/* ============================================================================
   css/40-account.css  ·  Customer cabinet (/account) — restyled to match the
   storefront v2 look. Tokens mirror css/30-storefront.css (.storefront-v2).
   Self-contained: account.html does NOT load css/bundle.css, so tokens are
   declared here on :root.
   ============================================================================ */
:root{
  --sf-ink:#070b16; --sf-navy:#0c1426; --sf-navy-2:#111c33;
  --sf-line:rgba(212,179,99,.18); --sf-line-soft:rgba(255,255,255,.07);
  --sf-txt:#eaf0fb; --sf-muted:#9aa7c2; --sf-muted-2:#7e8cab;
  --sf-gold-1:#f6e3a8; --sf-gold-2:#d8b35f; --sf-gold-3:#b8862f;
  --sf-green:#39d98a; --sf-r:18px;
  --display:'Fraunces',Georgia,serif;
  --ui:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
}
[dir="rtl"]{
  --display:'Frank Ruhl Libre','Heebo',Georgia,serif;
  --ui:'Heebo',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:var(--ui); color:var(--sf-txt);
  background:
    radial-gradient(1100px 600px at 80% -10%, rgba(216,179,95,.10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(64,90,160,.18), transparent 55%),
    linear-gradient(180deg, var(--sf-ink), var(--sf-navy) 40%, var(--sf-ink));
  min-height:100vh;
}
.acct-wrap{max-width:760px; margin:0 auto; padding:0 16px 64px}

/* ── Header ─────────────────────────────────────────────────────────────── */
.acct-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 4px 14px; border-block-end:1px solid var(--sf-line-soft); margin-block-end:22px;
}
.acct-wordmark{display:flex; flex-direction:column; line-height:1; direction:ltr; text-decoration:none}
.acct-wm-1{font-family:'Fraunces',serif; font-weight:300; letter-spacing:.34em; font-size:19px; color:#fdfbf4; padding-inline-start:.34em}
.acct-wm-2{font-family:'Fraunces',serif; font-weight:300; letter-spacing:.5em; font-size:11px;
  background:linear-gradient(90deg,var(--sf-gold-1),var(--sf-gold-2),var(--sf-gold-3));
  -webkit-background-clip:text; background-clip:text; color:transparent; padding-inline-start:.5em}
.acct-top-actions{display:flex; gap:8px; align-items:center}
.acct-ghost{
  font-family:var(--ui); font-size:13px; color:var(--sf-muted); text-decoration:none;
  padding:8px 14px; border:1px solid var(--sf-line-soft); border-radius:999px; background:transparent; cursor:pointer;
}
.acct-ghost:hover{color:var(--sf-txt); border-color:var(--sf-line)}
.acct-lang{
  font-family:var(--ui); font-size:13px; color:var(--sf-muted); cursor:pointer;
  padding:7px 10px; border:1px solid var(--sf-line-soft); border-radius:999px;
  background:transparent; color-scheme:dark;
}
.acct-lang:hover{color:var(--sf-txt); border-color:var(--sf-line)}
.acct-lang option{background:var(--sf-navy); color:var(--sf-txt)}

/* ── Signed-out ─────────────────────────────────────────────────────────── */
.acct-signedout{text-align:center; padding:60px 20px}
.acct-signedout p{color:var(--sf-muted); font-size:15px; margin:0 0 18px}
#acctGoogle{
  font-family:var(--ui); font-size:14px; font-weight:600; cursor:pointer; padding:11px 22px;
  border-radius:11px; border:none; background:linear-gradient(90deg,var(--sf-gold-1),var(--sf-gold-2)); color:#1a1206;
}

/* ── Greeting ───────────────────────────────────────────────────────────── */
.acct-greet{margin:0 4px 20px}
.acct-greet h1{font-family:var(--display); font-weight:500; font-size:26px; margin:0 0 4px}
.acct-greet p{margin:0; color:var(--sf-muted); font-size:14px}

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.acct-tabs{display:flex; gap:8px; margin:0 0 22px; flex-wrap:wrap; padding:0}
.acct-tab{
  font-family:var(--ui); font-size:14px; font-weight:500; cursor:pointer;
  padding:9px 18px; border-radius:999px; border:1px solid var(--sf-line-soft);
  background:rgba(255,255,255,.02); color:var(--sf-muted);
}
.acct-tab.is-active{
  background:linear-gradient(90deg,var(--sf-gold-1),var(--sf-gold-2));
  color:#1a1206; border-color:transparent; font-weight:600;
}
.acct-panel{display:none}
.acct-panel.is-active{display:block}

/* ── Onboarding · 3 steps to owning gold & silver ───────────────────────── */
.acct-onboard{
  position:relative; margin-block-end:22px; padding:22px 22px 18px;
  border-radius:var(--sf-r); border:1px solid var(--sf-gold-3);
  background:
    radial-gradient(520px 200px at 100% 0%, rgba(216,179,95,.16), transparent 62%),
    linear-gradient(180deg, var(--sf-navy-2), var(--sf-navy));
}
.acct-ob-title{font-family:var(--display); font-weight:500; font-size:20px; margin:0 0 4px}
.acct-ob-sub{color:var(--sf-muted); font-size:13.5px; margin:0 0 18px}
.acct-ob-steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.acct-ob-step{display:flex; gap:13px; align-items:flex-start}
.acct-ob-num{
  flex:none; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-size:13px; font-weight:700; color:var(--sf-muted-2);
  background:rgba(255,255,255,.04); border:1px solid var(--sf-line-soft);
}
.acct-ob-step.is-active .acct-ob-num{
  color:#1a1206; border-color:transparent;
  background:linear-gradient(90deg,var(--sf-gold-1),var(--sf-gold-2));
}
.acct-ob-body{flex:1; min-width:0}
.acct-ob-h{font-weight:600; font-size:14px; margin:0 0 2px}
.acct-ob-step:not(.is-active) .acct-ob-h{color:var(--sf-muted)}
.acct-ob-d{color:var(--sf-muted); font-size:12.5px; margin:0; line-height:1.5}
.acct-ob-body .acct-btn-gold{margin-block-start:9px}
.acct-ob-foot{color:var(--sf-muted-2); font-size:12px; margin:18px 0 0; padding-block-start:14px; border-block-start:1px solid var(--sf-line-soft)}
.acct-cm-x{
  position:absolute; inset-inline-end:10px; top:8px; background:transparent; border:none;
  color:var(--sf-muted-2); font-size:18px; line-height:1; cursor:pointer; padding:2px 6px;
}
.acct-cm-x:hover{color:var(--sf-txt)}

/* ── Savings plan teaser (coming soon) ──────────────────────────────────── */
.acct-savings{
  display:flex; gap:16px; align-items:center; text-decoration:none; color:var(--sf-txt);
  position:relative; overflow:hidden; margin-block-end:22px;
  padding:18px 20px; border-radius:var(--sf-r); border:1px solid var(--sf-line);
  background:
    radial-gradient(420px 160px at 100% 0%, rgba(216,179,95,.16), transparent 60%),
    linear-gradient(180deg, var(--sf-navy-2), var(--sf-navy));
}
.acct-savings:hover{border-color:var(--sf-gold-2)}
.acct-sv-badge{position:absolute; inset-inline-start:16px; top:14px; font-size:10px; font-weight:700; letter-spacing:.1em;
  padding:3px 9px; border-radius:999px; color:#1a1206; background:linear-gradient(90deg,var(--sf-gold-1),var(--sf-gold-2))}
.acct-sv-ico{font-size:34px; flex:none; filter:drop-shadow(0 4px 10px rgba(216,179,95,.4))}
.acct-sv-body{padding-block-start:8px}
.acct-sv-body h2{font-family:var(--display); font-weight:500; font-size:19px; margin:0 0 5px}
.acct-sv-body p{margin:0 0 9px; color:var(--sf-muted); font-size:13px; line-height:1.55; max-width:46ch}
.acct-sv-cta{font-size:13px; font-weight:600;
  background:linear-gradient(90deg,var(--sf-gold-1),var(--sf-gold-2));
  -webkit-background-clip:text; background-clip:text; color:transparent}

/* ── "Today's value" widget ─────────────────────────────────────────────── */
.acct-value{
  display:flex; align-items:center; gap:16px; margin-block-end:22px;
  padding:18px 20px; border-radius:var(--sf-r); border:1px solid var(--sf-line);
  background:
    radial-gradient(420px 160px at 0% 0%, rgba(57,217,138,.10), transparent 60%),
    linear-gradient(180deg, var(--sf-navy-2), var(--sf-navy));
}
.acct-value .vw-ico{font-size:30px; flex:none}
.acct-value .vw-label{color:var(--sf-muted); font-size:13px; margin:0 0 3px}
.acct-value .vw-amount{font-family:var(--display); font-weight:500; font-size:26px; color:#fff; font-variant-numeric:tabular-nums}
.acct-value .vw-note{color:var(--sf-muted-2); font-size:11px; margin:3px 0 0}

/* ── Order card ─────────────────────────────────────────────────────────── */
.acct-order{
  background:linear-gradient(180deg, var(--sf-navy-2), var(--sf-navy));
  border:1px solid var(--sf-line); border-radius:var(--sf-r);
  padding:18px; margin-block-end:16px; box-shadow:0 18px 40px -24px rgba(0,0,0,.8);
}
.acct-order-head{display:flex; gap:16px; align-items:flex-start}
.acct-order-img{
  width:84px; height:84px; flex:none; border-radius:14px; display:grid; place-items:center; font-size:34px;
  background:radial-gradient(circle at 35% 30%, #1b2742, #0a1120); border:1px solid var(--sf-line-soft);
}
.acct-order-meta{flex:1; min-width:0}
.acct-order-name{font-family:var(--display); font-weight:500; font-size:18px; margin:0 0 4px; line-height:1.25}
.acct-order-sub{color:var(--sf-muted); font-size:13px; margin:0 0 2px}
.acct-order-num{color:var(--sf-muted-2); font-size:12px; letter-spacing:.04em; margin:0}
.acct-order-price{text-align:start; flex:none}
.acct-order-price b{font-size:20px; font-weight:600; color:#fff; font-variant-numeric:tabular-nums}
.acct-order-price span{display:block; font-size:11px; color:var(--sf-muted-2); margin-block-start:2px}

.acct-pill{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  padding:5px 11px; border-radius:999px; margin-block-start:8px; background:rgba(57,217,138,.12); color:var(--sf-green)}
.acct-pill .dot{width:7px; height:7px; border-radius:50%; background:currentColor}

.acct-steps{display:flex; gap:0; margin-block-start:16px; padding-block-start:14px; border-block-start:1px solid var(--sf-line-soft)}
.acct-step{flex:1; text-align:center; position:relative; font-size:11px; color:var(--sf-muted-2)}
.acct-step .bul{width:18px; height:18px; border-radius:50%; margin:0 auto 6px; border:2px solid var(--sf-line-soft);
  background:var(--sf-navy); display:grid; place-items:center; font-size:10px}
.acct-step::before{content:""; position:absolute; top:9px; inset-inline-end:50%; width:100%; height:2px; background:var(--sf-line-soft); z-index:0}
.acct-step:first-child::before{display:none}
.acct-step.done .bul{border-color:var(--sf-gold-2); background:linear-gradient(90deg,var(--sf-gold-1),var(--sf-gold-2)); color:#1a1206}
.acct-step.done{color:var(--sf-gold-1)}
.acct-step.done::before{background:linear-gradient(90deg,var(--sf-gold-3),var(--sf-gold-1))}
.acct-step.current .bul{box-shadow:0 0 0 4px rgba(216,179,95,.18)}

.acct-order-foot{display:flex; gap:10px; margin-block-start:16px; flex-wrap:wrap}
.acct-btn-gold{
  font-family:var(--ui); font-size:13px; font-weight:600; cursor:pointer; text-decoration:none;
  padding:10px 16px; border-radius:11px; border:none;
  background:linear-gradient(90deg,var(--sf-gold-1),var(--sf-gold-2)); color:#1a1206;
  display:inline-flex; align-items:center; gap:7px;
}
.acct-btn-line{
  font-family:var(--ui); font-size:13px; font-weight:500; cursor:pointer; text-decoration:none;
  padding:10px 16px; border-radius:11px; border:1px solid var(--sf-line);
  background:transparent; color:var(--sf-txt); display:inline-flex; align-items:center; gap:7px;
}

/* ── Empty state ────────────────────────────────────────────────────────── */
.acct-empty{
  text-align:center; padding:48px 20px; border:1px dashed var(--sf-line);
  border-radius:var(--sf-r); background:rgba(255,255,255,.015);
}
.acct-empty .em-ico{font-size:38px; margin-block-end:10px}
.acct-empty h3{font-family:var(--display); font-weight:500; font-size:20px; margin:0 0 6px}
.acct-empty p{color:var(--sf-muted); font-size:14px; margin:0 0 18px}

/* ── Help block ─────────────────────────────────────────────────────────── */
.acct-help{
  background:rgba(255,255,255,.02); border:1px solid var(--sf-line-soft);
  border-radius:var(--sf-r); padding:20px; margin-block-start:30px;
}
.acct-help h2{font-family:var(--display); font-weight:500; font-size:19px; margin:0 0 4px}
.acct-help .hsub{color:var(--sf-muted); font-size:13px; margin:0 0 16px}
.acct-contact-row{display:flex; gap:10px; flex-wrap:wrap; margin-block-end:18px}
.acct-contact{
  flex:1; min-width:150px; display:flex; align-items:center; gap:11px;
  padding:12px 14px; border-radius:13px; text-decoration:none;
  border:1px solid var(--sf-line-soft); background:rgba(255,255,255,.02); color:var(--sf-txt);
}
.acct-contact:hover{border-color:var(--sf-line)}
.acct-contact .ico{width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center; font-size:17px}
.acct-contact small{display:block; color:var(--sf-muted-2); font-size:11px}
.ico-wa{background:rgba(37,211,102,.14); color:#25d366}
.ico-ph{background:rgba(216,179,95,.14); color:var(--sf-gold-1)}
.ico-mail{background:rgba(42,171,238,.14); color:#2aabee}

.acct-faq summary{
  cursor:pointer; list-style:none; padding:13px 4px; font-size:14px; font-weight:500;
  border-block-start:1px solid var(--sf-line-soft); display:flex; justify-content:space-between; align-items:center;
}
.acct-faq summary::-webkit-details-marker{display:none}
.acct-faq summary::after{content:"+"; color:var(--sf-gold-2); font-size:18px}
.acct-faq details[open] summary::after{content:"\2013"}
.acct-faq p{margin:0 4px 14px; color:var(--sf-muted); font-size:13px; line-height:1.6}

/* ── Profile ────────────────────────────────────────────────────────────── */
.acct-profile{display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; max-width:620px}
.acct-field{display:flex; flex-direction:column; gap:6px}
.acct-field.full{grid-column:1 / -1}
.acct-field label{font-size:13px; color:var(--sf-muted)}
.acct-field input, .acct-field select{
  font-family:var(--ui); font-size:14px; color:var(--sf-txt); padding:11px 13px;
  border-radius:11px; border:1px solid var(--sf-line-soft); background:rgba(255,255,255,.03);
  color-scheme:dark; /* dark native dropdown popup, no white flash */
}
.acct-field select option{background:var(--sf-navy); color:var(--sf-txt)}
.acct-field input[readonly]{opacity:.6}
.acct-hint{font-size:11px; color:var(--sf-muted-2); margin-block-start:-1px}
.acct-biz{grid-column:1 / -1; border:1px solid var(--sf-line-soft); border-radius:13px; padding:0 14px; background:rgba(255,255,255,.015)}
.acct-biz summary{cursor:pointer; list-style:none; padding:14px 0; font-size:14px; font-weight:500; color:var(--sf-muted)}
.acct-biz summary::-webkit-details-marker{display:none}
.acct-biz[open] summary{color:var(--sf-txt)}
.acct-biz .acct-profile{margin:0 0 16px}
@media(max-width:520px){.acct-profile{grid-template-columns:1fr}}