/* ============================================================
 * Auth modal (login / register / lost password / Google sign-in)
 * Mirrors brief-modal styling. Dark glass card, gradient accents.
 * ============================================================ */

/* Account icon in header (next to search) */
.nav-account{
  width:40px;height:40px;border:0;background:transparent;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted);border-radius:999px;padding:0;
  transition:color .18s ease, background .18s ease;
  text-decoration:none;
}
.nav-account:hover{color:var(--text);background:rgba(244,242,239,.06)}
.nav-account svg{width:20px;height:20px}
.nav-account__avatar{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--magenta),var(--amber));
  color:#fff;font-weight:700;font-size:12px;letter-spacing:-.01em;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(168,59,207,.32)
}

/* Modal overlay */
.auth-backdrop{
  position:fixed;inset:0;z-index:200;
  background:rgba(7,7,16,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:none;align-items:flex-start;justify-content:center;
  padding:48px 16px 24px;overflow-y:auto;
}
.auth-backdrop.is-open{display:flex;animation:auth-fade .22s ease}
html.auth-locked,html.auth-locked body{overflow:hidden}
@keyframes auth-fade{from{opacity:0}to{opacity:1}}

.auth-modal{
  position:relative;width:100%;max-width:440px;
  background:linear-gradient(180deg,#10101e 0%,#0a0a18 100%);
  border:1px solid var(--line);border-radius:20px;
  padding:22px 32px 28px;
  box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 1px rgba(168,59,207,.12),0 0 40px rgba(251,121,50,.08);
  animation:auth-pop .26s cubic-bezier(.2,.8,.2,1);
}
@keyframes auth-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}

.auth-close{
  flex-shrink:0;width:36px;height:36px;
  border:0;background:rgba(244,242,239,.05);border-radius:999px;
  color:var(--muted);display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .18s ease,color .18s ease;
}
.auth-close:hover{background:rgba(244,242,239,.12);color:var(--text)}
.auth-close svg{width:16px;height:16px}

.auth-brand{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:0 0 18px;
}
.auth-brand img{display:block;height:28px;width:auto;filter:drop-shadow(0 0 14px rgba(251,121,50,.32))}

.auth-tabs{
  display:flex;gap:4px;padding:4px;margin:0 0 22px;
  background:rgba(244,242,239,.03);border:1px solid var(--line);border-radius:12px;
}
.auth-tab{
  flex:1;padding:9px 12px;border:0;background:transparent;
  color:var(--muted);font-family:inherit;font-size:14px;font-weight:600;letter-spacing:-.005em;
  border-radius:9px;cursor:pointer;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease;
}
.auth-tab:hover{color:var(--text)}
.auth-tab.is-active{
  background:linear-gradient(135deg,var(--magenta),var(--amber));color:#fff;
  box-shadow:0 6px 16px rgba(168,59,207,.28)
}

.auth-title{margin:0 0 6px;font-size:22px;font-weight:700;letter-spacing:-.018em;color:var(--text);line-height:1.25}
.auth-lede{margin:0 0 22px;font-size:14px;color:var(--muted);line-height:1.55}

.auth-google{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;padding:12px 16px;border-radius:12px;
  background:#fff;color:#1f1f1f;font-weight:600;font-size:14.5px;letter-spacing:-.005em;
  text-decoration:none;border:1px solid rgba(255,255,255,.92);
  transition:transform .15s ease,box-shadow .2s ease;
}
.auth-google:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(0,0,0,.4),0 0 0 2px rgba(255,255,255,.2)}
.auth-google svg{flex-shrink:0}

.auth-sep{
  display:flex;align-items:center;gap:14px;margin:18px 0;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.auth-sep::before,.auth-sep::after{content:"";flex:1;height:1px;background:rgba(244,242,239,.10)}

.auth-form{display:flex;flex-direction:column;gap:12px}
.auth-form[hidden]{display:none}

.auth-field{position:relative}
.auth-field input{
  width:100%;padding:14px 16px;border-radius:12px;
  background:rgba(244,242,239,.04);border:1px solid var(--line);
  color:var(--text);font-family:inherit;font-size:15px;
  transition:border-color .25s ease,background .25s ease;
}
.auth-field input::placeholder{color:rgba(244,242,239,.36)}
.auth-field input:focus{outline:none;border-color:rgba(251,121,50,.55);background:rgba(244,242,239,.06)}
/* Keep dark theme look when Chrome/Safari autofills credentials (default
   autofill bg is light blue and washes out the password-toggle icon). */
.auth-field input:-webkit-autofill,
.auth-field input:-webkit-autofill:hover,
.auth-field input:-webkit-autofill:focus,
.auth-field input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px #161624 inset;
  caret-color:var(--text);
  transition:background-color 9999s ease-in-out 0s;
}

.auth-field--password input{padding-right:46px}
.auth-pw-toggle{
  position:absolute;top:50%;right:8px;transform:translateY(-50%);
  width:34px;height:34px;border:0;background:transparent;cursor:pointer;
  color:var(--text);opacity:.7;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  z-index:2;
  transition:opacity .15s ease,color .15s ease,background .15s ease;
}
.auth-pw-toggle:hover{opacity:1;background:rgba(244,242,239,.06)}
.auth-pw-toggle svg{width:18px;height:18px}
.auth-pw-toggle.is-shown{color:var(--amber);opacity:1}

.auth-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:2px 0}
.auth-remember{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);cursor:pointer;user-select:none}
.auth-remember input{accent-color:var(--amber);width:14px;height:14px;cursor:pointer}

.auth-link{
  border:0;background:transparent;color:var(--amber-soft);
  font-family:inherit;font-size:13.5px;font-weight:600;letter-spacing:-.005em;
  cursor:pointer;padding:0;text-decoration:none;
  transition:color .15s ease;
}
.auth-link:hover{color:var(--amber)}

.auth-error{
  min-height:0;font-size:13.5px;color:#ff9b9b;line-height:1.4;
  background:rgba(255,107,107,.10);border:1px solid rgba(255,107,107,.25);
  padding:0 12px;border-radius:10px;
  max-height:0;overflow:hidden;
  transition:max-height .22s ease,padding .22s ease,opacity .22s ease;
  opacity:0;
}
.auth-error.is-shown{padding:10px 12px;max-height:200px;opacity:1;margin-top:2px}
.auth-error.is-shown.auth-error--standalone{margin-bottom:14px}

.auth-success{
  font-size:13.5px;color:#7fdca8;line-height:1.4;
  background:rgba(67,200,140,.10);border:1px solid rgba(67,200,140,.30);
  padding:10px 12px;border-radius:10px;margin-top:2px;
}

.auth-submit{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;margin-top:6px;padding:14px 20px;border:0;border-radius:999px;cursor:pointer;
  background:linear-gradient(135deg,var(--magenta),var(--amber));
  color:#fff;font-family:inherit;font-size:15px;font-weight:600;letter-spacing:-.005em;
  box-shadow:0 12px 28px rgba(168,59,207,.32);
  transition:transform .18s ease,box-shadow .25s ease,opacity .2s ease;
}
.auth-submit:hover{transform:translateY(-1px);box-shadow:0 16px 36px rgba(251,121,50,.4)}
.auth-submit:disabled{opacity:.6;cursor:wait;transform:none}
.auth-submit svg{width:16px;height:16px;flex-shrink:0}

.auth-switch{margin:10px 0 0;text-align:center;font-size:13.5px;color:var(--muted)}
.auth-switch .auth-link{margin-left:4px}

.auth-privacy{margin:20px 0 0;font-size:12px;color:rgba(244,242,239,.4);text-align:center;line-height:1.5}

.auth-honeypot{
  position:absolute !important;left:-9999px !important;width:1px;height:1px;
  opacity:0;pointer-events:none;
}

.sr-only{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================================================
 * Standalone reset-password page (/account/reset/).
 * Reuses .auth-* form atoms inside a centered card — same look as the
 * modal but rendered as a normal page (no fixed overlay).
 * ============================================================ */
.auth-page{
  min-height:calc(100vh - 200px);
  display:flex;align-items:center;justify-content:center;
  padding:80px 16px 96px;
}
.auth-page__card{
  width:100%;max-width:440px;
  background:linear-gradient(180deg,#10101e 0%,#0a0a18 100%);
  border:1px solid var(--line);border-radius:20px;
  padding:30px 32px 32px;
  box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 1px rgba(168,59,207,.12),0 0 40px rgba(251,121,50,.08);
}
.auth-page__card .auth-brand{justify-content:center;margin-bottom:22px}
.auth-page__card .auth-title{text-align:center}
.auth-page__card .auth-lede{text-align:center}
.auth-submit--link{
  text-decoration:none;display:inline-flex;
}
@media (max-width:520px){
  .auth-page{padding:40px 12px 64px}
  .auth-page__card{padding:26px 22px 24px;border-radius:18px}
}

@media (max-width:520px){
  .auth-backdrop{padding:24px 12px 16px}
  .auth-modal{padding:28px 22px 22px;border-radius:18px}
  .auth-title{font-size:20px}
}

/* ============================================================
 * "Logged in" account icon on header — initial badge, not silhouette
 * (drives user familiarity with their own avatar)
 * ============================================================ */

/* ============================================================
 * WC surface (my-account, cart, checkout, thank-you) — minimal page chrome.
 * Driven by .static-page--wc on <main> (set in page.php). Removes the
 * cinematic hero and the bottom CTA so the page reads as transactional, not
 * marketing.
 * ============================================================ */
.static-page--wc .static-page__body{padding-top:24px;padding-bottom:80px;background:transparent}
/* Match the header's container width AND its outer 15px gutter so the dashboard
   frame lines up with the "catcode" logo on the left, not 15px inboard of it. */
.wrap.wc-surface{max-width:var(--container);padding:0 55px}
@media (max-width:1100px){.wrap.wc-surface{padding:0 39px}}
@media (max-width:720px){.wrap.wc-surface{padding:0 33px}}
@media (max-width:520px){.wrap.wc-surface{padding:0 27px}}
/* The breadcrumbs partial wraps its own .wrap → kill the double-padding inside .wc-surface */
.wrap.wc-surface .catcode-breadcrumbs{padding:0}
.wrap.wc-surface .catcode-breadcrumbs > .wrap{padding:0;max-width:none;margin:0}
.wc-surface__title{
  font-size:clamp(28px,3.4vw,40px);
  font-weight:700;letter-spacing:-.022em;margin:18px 0 36px;color:var(--text);
  line-height:1.1
}

/* Login surface on /my-account/ (logged out) — centered card */
body.woocommerce-account.logged-out .wrap.wc-surface{max-width:480px}
body.woocommerce-account.logged-out .wc-surface__title{text-align:center;font-size:28px;margin-bottom:24px}
/* Logged-out only: unwind the 240px+1fr grid so the CTA card sits centered. */
body.woocommerce-account:not(.logged-in) .woocommerce{display:block !important;grid-template-columns:none !important;gap:0 !important}
body.woocommerce-account:not(.logged-in) .woocommerce > h2{display:none}

/* Login CTA card (logged out users on /my-account/) */
.cc-account-login-card{
  max-width:520px;margin:0 auto;padding:36px 32px;text-align:center;
  background:linear-gradient(180deg,#10101e 0%,#0a0a18 100%);
  border:1px solid var(--line);border-radius:20px;
  box-shadow:0 30px 70px rgba(0,0,0,.4),0 0 0 1px rgba(168,59,207,.10),0 0 40px rgba(251,121,50,.06);
}
.cc-account-login-card h2{margin:0 0 10px;font-size:24px;letter-spacing:-.02em;color:var(--text);font-weight:700;line-height:1.25}
.cc-account-login-card p{margin:0 0 24px;color:var(--muted);font-size:15px;line-height:1.55}
.cc-account-login-card__actions{display:flex;flex-direction:column;gap:14px;align-items:center}
.cc-account-login-card .btn{padding:13px 36px;font-size:15px}
.cc-account-login-card__hint{margin:0;font-size:13.5px;color:var(--muted)}
.cc-account-login-card__hint a{color:var(--amber-soft);font-weight:600;text-decoration:none;margin-left:6px;cursor:pointer}
.cc-account-login-card__hint a:hover{color:var(--amber)}
body.woocommerce-account.logged-out .woocommerce-form-login{
  max-width:none;margin:0;padding:32px 28px;
  background:linear-gradient(180deg,#10101e 0%,#0a0a18 100%);
  border:1px solid var(--line);border-radius:18px;
  box-shadow:0 30px 70px rgba(0,0,0,.4),0 0 0 1px rgba(168,59,207,.10);
}
body.woocommerce-account.logged-out .woocommerce-form-login p{margin:0 0 14px}
body.woocommerce-account.logged-out .woocommerce-form-login p.form-row label{
  color:var(--muted);font-size:13px;font-weight:600;display:block;margin-bottom:6px;letter-spacing:.02em
}
body.woocommerce-account.logged-out .woocommerce-form-login__rememberme{display:inline-flex;gap:8px;align-items:center}
body.woocommerce-account.logged-out .woocommerce-form-login__submit{width:100%}