/* Kanto account surfaces. Scoped to WooCommerce My Account only. */
.woocommerce-account .site-main { padding-block: var(--k-space-4) var(--k-space-6); }
.woocommerce-account .woocommerce-notices-wrapper { width: min(100% - 2rem, 54rem); margin: 0 auto var(--k-space-3); }
.woocommerce-account .woocommerce-error,
.woocommerce-account .woocommerce-message,
.woocommerce-account .woocommerce-info { margin: 0; padding: var(--k-space-3); border: 1px solid var(--k-card-border); border-radius: .75rem; background: var(--k-surface-2); color: var(--k-ink); list-style: none; }
.woocommerce-account .woocommerce-error { border-color: var(--k-accent-text); }

.kanto-auth-shell { display: grid; gap: var(--k-space-4); width: min(100%, 58rem); margin: 0 auto; padding: var(--k-space-3); background: var(--k-cream-bg); border: 1px solid var(--k-border-warm); border-radius: 1.375rem; }
.kanto-auth-shell--single { width: min(100%, 30rem); }
.kanto-auth-mode { display: none; }
.kanto-auth-card { display: grid; gap: var(--k-space-3); padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--k-border-warm); border-radius: 1.375rem; background: var(--k-surface); box-shadow: var(--k-shadow); }
.kanto-auth-card__eyebrow { font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -.08em; }
.kanto-auth-card__eyebrow span { color: var(--k-brand-pink); }
.kanto-auth-card h1,
.kanto-auth-card h2,
.kanto-account-heading h1 { margin: 0; font-size: clamp(1.25rem, 3vw, 1.45rem); font-weight: 800; line-height: 1.2; }
.kanto-auth-card__intro,
.kanto-account-heading p { margin: calc(var(--k-space-1) * -1) 0 0; color: var(--k-muted); font-size: .875rem; }
.kanto-auth-icon { display: grid; place-items: center; width: 3rem; height: 3rem; margin: 0; border-radius: 50%; background: var(--k-surface-active); color: var(--k-ink); font-size: 1.5rem; }
.kanto-social-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--k-space-2); min-height: 3rem; padding: .7rem 1rem; border: 1px solid var(--k-card-border); border-radius: .75rem; background: var(--k-surface); color: var(--k-ink); font-size: .9375rem; font-weight: 700; text-decoration: none; }
.kanto-social-button:hover { border-color: var(--k-muted-2); background: var(--k-surface-2); }
.kanto-social-button svg { width: 1.125rem; height: 1.125rem; }
.kanto-auth-divider { display: flex; align-items: center; gap: var(--k-space-2); margin: 0; color: var(--k-muted-2); font-size: .75rem; text-align: center; }
.kanto-auth-divider::before,
.kanto-auth-divider::after { flex: 1; height: 1px; background: var(--k-border-warm); content: ''; }
.kanto-auth-form,
.kanto-account-form { display: grid; gap: var(--k-space-3); }
.kanto-auth-form .form-row,
.kanto-account-form .form-row { display: grid; gap: .4rem; width: auto; margin: 0; }
.kanto-auth-form label,
.kanto-account-form label { color: var(--k-ink); font-size: .875rem; font-weight: 700; }
.kanto-auth-form input:not([type='checkbox']),
.kanto-account-form input { width: 100%; min-height: 3rem; padding: .75rem .875rem; border: 1.5px solid var(--k-card-border); border-radius: .75rem; background: var(--k-surface-2); color: var(--k-ink); }
.kanto-auth-form input:focus-visible,
.kanto-account-form input:focus-visible { border-color: var(--k-brand-pink); outline: 2px solid var(--k-brand-pink); outline-offset: 2px; }
.kanto-auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--k-space-2); }
.kanto-auth-label-row a,
.kanto-auth-switch a,
.kanto-auth-check a,
.kanto-order-card a,
.kanto-account-empty a { color: var(--k-accent-text); font-weight: 700; }
.kanto-auth-check { display: flex !important; align-items: flex-start; gap: .65rem; color: var(--k-muted) !important; font-size: .8125rem !important; font-weight: 500 !important; line-height: 1.5; }
.kanto-auth-check input { flex: 0 0 auto; width: 1.125rem; min-height: 1.125rem; margin-top: .1rem; accent-color: var(--k-brand-pink); }
.kanto-account-button { width: 100%; min-height: 3rem; border: 0; border-radius: 999px; background: var(--k-brand-yellow); color: var(--k-ink); font-weight: 800; }
.kanto-account-button:hover { background: var(--k-yellow-dark); }
.kanto-account-button:disabled { cursor: not-allowed; opacity: .55; }
.kanto-auth-switch,
.kanto-auth-hint { margin: 0; color: var(--k-muted); font-size: .8125rem; text-align: center; }
.kanto-auth-hint { text-align: start; }
.kanto-auth-switch label { color: var(--k-accent-text); cursor: pointer; font-weight: 700; text-decoration: underline; }

.kanto-account { display: grid; gap: var(--k-space-4); }
.kanto-account-nav { padding: var(--k-space-3); border: 1px solid var(--k-border-warm); border-radius: 1rem; background: var(--k-surface); }
.kanto-account-nav__profile { display: flex; align-items: center; gap: var(--k-space-2); padding-bottom: var(--k-space-3); border-bottom: 1px solid var(--k-border-warm); }
.kanto-account-nav__profile strong,
.kanto-account-nav__profile small { display: block; overflow: hidden; max-width: 13rem; text-overflow: ellipsis; white-space: nowrap; }
.kanto-account-nav__profile small { color: var(--k-muted); font-size: .75rem; }
.kanto-account-nav__avatar { display: grid; flex: 0 0 auto; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--k-brand-yellow); color: var(--k-ink); font-weight: 800; }
.kanto-account-nav ul { display: grid; gap: .35rem; margin: var(--k-space-3) 0 0; padding: 0; list-style: none; }
.kanto-account-nav a { display: block; min-height: 2.75rem; padding: .75rem; border-radius: .75rem; color: var(--k-muted); font-size: .875rem; font-weight: 700; text-decoration: none; }
.kanto-account-nav li.is-active a { background: var(--k-surface-active); color: var(--k-ink); }
.kanto-account-nav__logout { padding-top: var(--k-space-2); border-top: 1px solid var(--k-border-warm); }
.kanto-account-nav__logout a { color: var(--k-muted); }
.kanto-account__content { min-width: 0; padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--k-border-warm); border-radius: 1rem; background: var(--k-surface); }
.kanto-account-heading { margin-bottom: var(--k-space-4); }
.kanto-account-form { grid-template-columns: 1fr; }
.kanto-account-form .form-row-wide { grid-column: 1 / -1; }
.kanto-account-form .kanto-account-button { width: fit-content; min-width: 11rem; padding-inline: var(--k-space-4); }
.kanto-order-list { display: grid; gap: var(--k-space-3); }
.kanto-order-card { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--k-space-3); padding: var(--k-space-3); border: 1px solid var(--k-border-warm); border-radius: 1rem; }
.kanto-order-card__thumb img { width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: .75rem; background: var(--k-surface-2); }
.kanto-order-card__body h2 { margin: 0; font-size: 1rem; }
.kanto-order-card__body p,
.kanto-order-card__body time { display: block; margin: .2rem 0 0; color: var(--k-muted); font-size: .8125rem; }
.kanto-order-card__meta { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: var(--k-space-2); font-size: .8125rem; }
.kanto-order-card__meta a { text-decoration: none; }
.kanto-order-status { display: inline-flex; padding: .35rem .55rem; border-radius: 999px; background: var(--k-surface-active); color: var(--k-ink); font-weight: 700; }
.kanto-order-card--completed .kanto-order-status { background: var(--k-survey-success-bg); color: var(--k-trust-green); }
.kanto-order-card--processing .kanto-order-status,
.kanto-order-card--on-hold .kanto-order-status { background: var(--k-surface-2); color: var(--k-zalo-blue); }
.kanto-order-card--cancelled .kanto-order-status,
.kanto-order-card--failed .kanto-order-status { background: var(--k-border-faint); color: var(--k-muted); }
.kanto-account-empty { margin: 0; }
.woocommerce-pagination { margin-top: var(--k-space-4); }
.woocommerce-pagination .page-numbers { display: inline-flex; gap: .4rem; padding: .5rem .75rem; border-radius: .5rem; text-decoration: none; }
.woocommerce-pagination .current { background: var(--k-brand-yellow); color: var(--k-ink); font-weight: 800; }

@media (min-width: 48rem) {
  .kanto-account { grid-template-columns: 15.625rem minmax(0, 1fr); align-items: start; }
  .kanto-account-nav { position: sticky; top: var(--k-space-3); }
  .kanto-account-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kanto-order-card { grid-template-columns: 4.5rem minmax(0, 1fr) auto; align-items: center; }
  .kanto-order-card__meta { display: grid; grid-column: auto; justify-items: end; }
}

@media (min-width: 64rem) {
  .woocommerce-account .site-main { padding-block: var(--k-space-5) var(--k-space-7); }
  .kanto-auth-shell { display: block; width: min(100%, 42rem); padding: 0; overflow: hidden; background: var(--k-surface); box-shadow: var(--k-shadow); }
  .kanto-auth-shell--single { display: block; width: min(100%, 30rem); padding: var(--k-space-3); overflow: visible; background: var(--k-cream-bg); box-shadow: none; }
  .kanto-auth-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; margin: 0; padding: .5rem; border: 0; border-bottom: 1px solid var(--k-border-warm); background: var(--k-surface-2); }
  .kanto-auth-mode__input { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
  .kanto-auth-mode__label { display: grid; min-height: 2.75rem; place-items: center; padding-inline: var(--k-space-2); border-radius: .625rem; color: var(--k-muted); cursor: pointer; font-size: .875rem; font-weight: 800; }
  .kanto-auth-mode__input:focus-visible + .kanto-auth-mode__label { outline: 2px solid var(--k-brand-pink); outline-offset: 2px; }
  #kanto-account-login:checked + .kanto-auth-mode__label,
  #kanto-account-register:checked + .kanto-auth-mode__label { background: var(--k-surface); color: var(--k-ink); box-shadow: var(--k-shadow); }
  .kanto-auth-card { align-content: start; padding: clamp(2rem, 4vw, 3rem); border: 0; border-radius: 0; box-shadow: none; }
  .kanto-auth-card--register { display: none; }
  .kanto-auth-shell:has(#kanto-account-register:checked) .kanto-auth-card--login { display: none; }
  .kanto-auth-shell:has(#kanto-account-register:checked) .kanto-auth-card--register { display: grid; }
  .kanto-auth-card h1,
  .kanto-auth-card h2 { font-size: clamp(1.45rem, 2vw, 1.8rem); }
}

@media (prefers-reduced-motion: reduce) {
  .woocommerce-account *, .woocommerce-account *::before, .woocommerce-account *::after { scroll-behavior: auto; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}