/* ==========================================================================
   account.css — the customer's own pages.

   Same house as the rest of the site: square corners, hairline rules, the gold
   kept for marks and the teal for anything that can be acted on. What is new
   here is the dark member panel at the top, which is the one place on the site
   where a person's own name is set in the display face.

   Loaded only by the account pages, and namespaced .ac- so nothing here can
   reach the public site while the section is still unfinished.
   ========================================================================== */

.ac{--ac-gut:clamp(20px,5vw,56px)}

/* ── the member panel ─────────────────────────────────────────────── */
.ac-hero{
  position:relative;overflow:hidden;color:#fff;
  background:
    radial-gradient(120% 140% at 85% 0%, rgba(212,180,131,.22), transparent 55%),
    linear-gradient(200deg, var(--teal-dp) 0%, #0A2F39 55%, var(--black) 100%);
  padding:clamp(40px,6vw,72px) var(--ac-gut) clamp(32px,4vw,52px);
}
/* The crown, very large and very quiet, the way it sits on the brand book's
   own dark pages. */
.ac-hero .ac-mark{
  position:absolute;inset-block-start:-14%;inset-inline-end:-4%;
  width:min(420px,42%);color:var(--gold);opacity:.13;pointer-events:none;
}
.ac-hero .ac-mark svg{width:100%;height:auto;display:block}

.ac-hero-in{position:relative;display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,64px);align-items:flex-end}
.ac-id{flex:1 1 360px;min-width:0}
.ac-eb{
  margin:0 0 14px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);display:flex;align-items:center;gap:.7em;
}
[lang="fa"] .ac-eb{letter-spacing:.1em;font-size:12px}
.ac-eb::after{content:"";flex:1;height:1px;background:linear-gradient(to left,transparent,rgba(212,180,131,.5));max-width:120px}
[dir="ltr"] .ac-eb::after{background:linear-gradient(to right,transparent,rgba(212,180,131,.5))}

.ac-name{
  margin:0;font-size:clamp(30px,4.4vw,52px);line-height:1.15;font-weight:300;
  letter-spacing:-.01em;
}
.ac-name .ac-unnamed{color:rgba(255,255,255,.55)}

.ac-since{margin:14px 0 0;font-size:14px;line-height:1.9;color:rgba(255,255,255,.72)}
.ac-since b{font-weight:500;color:#fff}

/* the tier, as a struck plate rather than a coloured pill */
.ac-tier{
  display:inline-flex;align-items:center;gap:.6em;margin-block-start:22px;
  border:1px solid rgba(212,180,131,.55);padding:9px 18px;color:var(--gold);
  font-size:14px;line-height:1.4;
}
.ac-tier svg{width:16px;height:16px;flex:none}
.ac-tier .lvl{color:rgba(255,255,255,.6);font-size:12px;padding-inline-start:.6em;
  border-inline-start:1px solid rgba(255,255,255,.22);margin-inline-start:.2em}

/* the three counts */
.ac-counts{display:flex;gap:clamp(22px,3.5vw,46px);flex:0 1 auto}
.ac-count{min-width:64px}
.ac-count .n{display:block;font-size:clamp(26px,3vw,38px);line-height:1.1;font-weight:300}
.ac-count .t{display:block;margin-block-start:6px;font-size:12px;line-height:1.6;color:rgba(255,255,255,.62)}
.ac-count.is-new .n{color:var(--gold)}

/* ── the rail ─────────────────────────────────────────────────────── */
.ac-rail{
  position:sticky;inset-block-start:0;z-index:20;background:var(--white);
  border-block-end:1px solid var(--line);
  padding-inline:var(--ac-gut);overflow-x:auto;scrollbar-width:none;
}
.ac-rail::-webkit-scrollbar{display:none}
.ac-rail ul{list-style:none;margin:0;padding:0;display:flex;gap:clamp(16px,2.4vw,34px);min-width:max-content}
.ac-rail a{
  display:flex;align-items:center;gap:.5em;padding:18px 0 16px;font-size:14.5px;
  color:var(--ink-2);border-block-end:2px solid transparent;margin-block-end:-1px;white-space:nowrap;
}
.ac-rail a:hover{color:var(--ink)}
.ac-rail a.on{color:var(--ink);border-block-end-color:var(--accent)}
.ac-rail .dot{
  display:inline-grid;place-items:center;min-width:19px;height:19px;padding-inline:5px;
  background:var(--wine);color:#fff;font-size:11px;line-height:1;border-radius:10px;
}

/* ── the body ─────────────────────────────────────────────────────── */
.ac-body{padding:clamp(28px,4vw,52px) var(--ac-gut) clamp(56px,7vw,96px);max-width:1280px;margin-inline:auto}
.ac-cols{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:start}

.ac-sec{margin-block-end:clamp(30px,4vw,48px)}
.ac-sec:last-child{margin-block-end:0}
.ac-h{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  margin:0 0 18px;padding-block-end:12px;border-block-end:1px solid var(--line);
}
.ac-h h2{margin:0;font-size:17px;line-height:1.5;font-weight:500;letter-spacing:.01em}
.ac-h .more{font-size:13px;color:var(--accent-ink);white-space:nowrap}
.ac-h .more:hover{text-decoration:underline;text-underline-offset:3px}

.ac-card{border:1px solid var(--line);background:var(--paper);padding:clamp(18px,2.4vw,26px)}
.ac-card+.ac-card{margin-block-start:14px}

/* ── the next appointment ─────────────────────────────────────────── */
.ac-appt{display:flex;gap:clamp(16px,2.5vw,28px);align-items:flex-start}
.ac-appt .when{
  flex:none;text-align:center;border:1px solid var(--line-2);padding:12px 16px;min-width:92px;
  background:var(--sage-pale);
}
.ac-appt .when .d{display:block;font-size:26px;line-height:1.1;font-weight:400}
.ac-appt .when .m{display:block;margin-block-start:4px;font-size:12.5px;color:var(--ink-2)}
.ac-appt .when .t{display:block;margin-block-start:8px;padding-block-start:8px;border-block-start:1px solid var(--line-2);
  font-size:13px;color:var(--ink-2)}
.ac-appt .what{min-width:0}
.ac-appt .what h3{margin:0 0 6px;font-size:16px;line-height:1.6;font-weight:500}
.ac-appt .what p{margin:0;font-size:13.5px;line-height:1.9;color:var(--ink-2)}
.ac-st{
  display:inline-flex;align-items:center;gap:.45em;margin-block-start:10px;
  font-size:12px;line-height:1;padding:6px 10px;border:1px solid var(--line-2);color:var(--ink-2);
}
.ac-st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ac-st.is-ok{color:#1F6B4F;border-color:#BFE0D0}
.ac-st.is-wait{color:var(--gold-dk);border-color:#E8D9BC}
.ac-st.is-off{color:var(--ink-3)}

/* ── privileges ───────────────────────────────────────────────────── */
.ac-priv{list-style:none;margin:0;padding:0}
.ac-priv li{display:flex;gap:.9em;align-items:flex-start;padding-block:14px;border-block-end:1px solid var(--line)}
.ac-priv li:last-child{border-block-end:0;padding-block-end:0}
.ac-priv .ic{flex:none;width:22px;height:22px;display:grid;place-items:center;color:var(--accent-ink)}
.ac-priv .ic svg{width:18px;height:18px}
.ac-priv .tx{min-width:0}
.ac-priv .tx b{display:block;font-size:14.5px;font-weight:500;line-height:1.7}
.ac-priv .tx span{display:block;font-size:12.5px;line-height:1.8;color:var(--ink-3);margin-block-start:2px}
.ac-priv li.is-locked{color:var(--ink-3)}
.ac-priv li.is-locked .ic{color:var(--ink-3)}
.ac-priv li.is-locked .tx b{font-weight:400;color:var(--ink-2)}

/* ── the ladder ───────────────────────────────────────────────────── */
.ac-ladder{list-style:none;margin:0;padding:0;position:relative}
.ac-ladder::before{
  content:"";position:absolute;inset-block:14px;inset-inline-start:5px;width:1px;background:var(--line-2);
}
.ac-ladder li{position:relative;padding:12px 0 12px 0;padding-inline-start:26px}
.ac-ladder .pip{
  position:absolute;inset-inline-start:0;inset-block-start:18px;width:11px;height:11px;
  border:1px solid var(--line-2);background:var(--white);border-radius:50%;
}
.ac-ladder li.is-here .pip{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 3px var(--sage-pale)}
.ac-ladder li.is-past .pip{background:var(--line-2)}
.ac-ladder b{display:block;font-size:14.5px;font-weight:500;line-height:1.7}
.ac-ladder li.is-here b{color:var(--accent-ink)}
.ac-ladder span{display:block;font-size:12.5px;line-height:1.9;color:var(--ink-3)}

/* ── garments ─────────────────────────────────────────────────────── */
.ac-gar{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:clamp(12px,1.6vw,20px)}
.ac-gar figure{margin:0;border:1px solid var(--line);background:var(--paper)}
.ac-gar .im{display:block;aspect-ratio:3/4;overflow:hidden;background:var(--grey)}
.ac-gar img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s var(--ease,ease)}
.ac-gar figure:hover img{transform:scale(1.03)}
.ac-gar figcaption{padding:14px 15px 16px}
.ac-gar .ti{display:block;font-size:14px;line-height:1.7;font-weight:500}
.ac-gar .me{display:block;margin-block-start:5px;font-size:12px;line-height:1.8;color:var(--ink-3)}

/* ── offers ───────────────────────────────────────────────────────── */
.ac-offer{border:1px solid var(--line);border-inline-start:3px solid var(--gold);padding:18px 20px}
.ac-offer+.ac-offer{margin-block-start:12px}
.ac-offer h3{margin:0 0 6px;font-size:15.5px;line-height:1.6;font-weight:500}
.ac-offer p{margin:0;font-size:13.5px;line-height:1.9;color:var(--ink-2)}
.ac-offer .till{display:block;margin-block-start:10px;font-size:12px;color:var(--gold-dk)}

/* ── notifications ────────────────────────────────────────────────── */
.ac-notes{list-style:none;margin:0;padding:0}
.ac-notes li{display:flex;gap:.9em;padding-block:15px;border-block-end:1px solid var(--line)}
.ac-notes li:last-child{border-block-end:0}
.ac-notes .ic{flex:none;width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);color:var(--ink-2)}
.ac-notes .ic svg{width:15px;height:15px}
.ac-notes li.is-new .ic{border-color:var(--accent);color:var(--accent-ink);background:var(--sage-pale)}
.ac-notes b{display:block;font-size:14px;font-weight:500;line-height:1.7}
.ac-notes p{margin:2px 0 0;font-size:13px;line-height:1.85;color:var(--ink-2)}
.ac-notes time{display:block;margin-block-start:4px;font-size:11.5px;color:var(--ink-3)}

/* ── forms ────────────────────────────────────────────────────────── */
.ac-form{display:grid;gap:18px;max-width:560px}
.ac-f label{display:block;font-size:12.5px;color:var(--ink-2);margin-block-end:7px}
.ac-f input,.ac-f select,.ac-f textarea{
  width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--white);
  border:1px solid var(--line-2);padding:13px 14px;
}
.ac-f input:focus,.ac-f select:focus,.ac-f textarea:focus{outline:2px solid var(--accent);outline-offset:-2px;border-color:var(--accent)}
.ac-f .hint{display:block;margin-block-start:7px;font-size:12px;line-height:1.8;color:var(--ink-3)}
.ac-f input[readonly]{background:var(--grey);color:var(--ink-2)}

.ac-msg{padding:14px 16px;font-size:13.5px;line-height:1.9;border:1px solid var(--line)}
.ac-msg.is-ok{border-color:#BFE0D0;background:#F1F8F4;color:#1F5C44}
.ac-msg.is-bad{border-color:#E6C3CB;background:#FBF2F4;color:var(--wine)}
.ac-msg.is-note{border-color:#E8D9BC;background:#FCF8F1;color:var(--gold-dk)}

/* ── empty states ─────────────────────────────────────────────────── */
.ac-empty{border:1px dashed var(--line-2);padding:clamp(26px,4vw,40px);text-align:center}
.ac-empty p{margin:0 0 4px;font-size:14.5px;line-height:1.9;color:var(--ink-2)}
.ac-empty .sm{font-size:13px;color:var(--ink-3)}
.ac-empty .zb{margin-block-start:16px}

/* ══════════════════════════ sign-in ═══════════════════════════════ */
.ac-gate{
  min-height:calc(100vh - var(--zh-h));display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
}
.ac-gate-art{
  position:relative;overflow:hidden;
  background:
    radial-gradient(110% 120% at 20% 10%, rgba(212,180,131,.2), transparent 60%),
    linear-gradient(200deg, var(--teal-dp), var(--black));
  color:#fff;padding:clamp(40px,5vw,72px);display:flex;flex-direction:column;justify-content:space-between;
}
.ac-gate-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.26}
/* A scrim under the words, so the type is never read off the photograph itself:
   the picture can be anything, the contrast underneath has to be constant. */
.ac-gate-art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(10,32,39,.55) 0%, rgba(10,32,39,.2) 38%, rgba(10,32,39,.78) 100%);
}
.ac-gate-art>*{position:relative;z-index:1}
.ac-gate-art .mk{color:var(--gold);display:flex;align-items:center;gap:12px}
.ac-gate-art .mk svg{display:block;width:auto}
.ac-gate-art .mk .lg-crown{height:34px}
.ac-gate-art .mk .lg-word{height:26px}
.ac-gate-art h1{margin:0;font-size:clamp(26px,3vw,40px);line-height:1.3;font-weight:300}
.ac-gate-art p{margin:14px 0 0;max-width:38ch;font-size:15px;line-height:2;color:rgba(255,255,255,.76)}

.ac-gate-form{padding:clamp(36px,5vw,72px);display:flex;flex-direction:column;justify-content:center;max-width:620px}
.ac-gate-form h2{margin:0 0 8px;font-size:22px;line-height:1.5;font-weight:400}
.ac-gate-form .lead{margin:0 0 28px;font-size:14px;line-height:1.9;color:var(--ink-2)}

/* the two ways in, side by side */
.ac-ways{display:grid;gap:22px}
.ac-way{border:1px solid var(--line);padding:clamp(20px,2.4vw,28px)}
.ac-way h3{margin:0 0 6px;display:flex;align-items:center;gap:.55em;font-size:15.5px;font-weight:500;line-height:1.6}
.ac-way h3 svg{width:18px;height:18px;color:var(--accent-ink);flex:none}
.ac-way p{margin:0 0 16px;font-size:13px;line-height:1.9;color:var(--ink-3)}
.ac-way form{display:flex;gap:10px;flex-wrap:wrap}
.ac-way input{
  flex:1 1 200px;min-width:0;font:inherit;font-size:15px;padding:13px 14px;
  border:1px solid var(--line-2);background:var(--white);color:var(--ink);
}
.ac-way input:focus{outline:2px solid var(--accent);outline-offset:-2px}
.ac-way .zb{min-height:47px;padding-inline:26px}
.ac-way.is-off{background:var(--grey);border-style:dashed}

/* the dialled code */
.ac-dial{border:1px solid var(--line);padding:clamp(22px,3vw,32px);text-align:center}
.ac-dial .say{margin:0 0 18px;font-size:14px;line-height:1.9;color:var(--ink-2)}
.ac-dial .num{
  display:inline-block;font-size:clamp(24px,3.4vw,34px);letter-spacing:.06em;direction:ltr;
  padding:16px 26px;border:1px solid var(--line-2);background:var(--grey);color:var(--ink);
  font-weight:500;
}
.ac-dial .num b{color:var(--accent-ink);font-weight:600}
.ac-dial .tel{display:inline-block;margin-block-start:18px}
.ac-dial .wait{margin:22px 0 0;font-size:13px;color:var(--ink-3);display:flex;align-items:center;justify-content:center;gap:.6em}
.ac-dial .spin{width:14px;height:14px;border:2px solid var(--line-2);border-block-start-color:var(--accent);border-radius:50%;animation:ac-spin 1s linear infinite}
@keyframes ac-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ac-dial .spin{animation:none}}

/* the three steps of the USSD route */
.ac-steps{list-style:none;margin:0;padding:0;counter-reset:acs}
.ac-steps>li{
  counter-increment:acs;position:relative;padding-block:0 22px;padding-inline-start:44px;
  border-inline-start:1px solid var(--line-2);margin-inline-start:14px;
}
.ac-steps>li:last-child{border-inline-start-color:transparent;padding-block-end:0}
.ac-steps>li::before{
  content:counter(acs);position:absolute;inset-inline-start:-15px;inset-block-start:-3px;
  width:29px;height:29px;display:grid;place-items:center;border-radius:50%;
  background:var(--white);border:1px solid var(--accent);color:var(--accent-ink);font-size:13px;
}
.ac-steps>li>b{display:block;font-size:15px;font-weight:500;line-height:1.7}
.ac-steps>li>span{display:block;margin-block-start:4px;font-size:13px;line-height:1.9;color:var(--ink-3)}
.ac-steps .ac-dial{display:flex;flex-wrap:wrap;align-items:center;gap:12px;border:0;padding:0;margin-block-start:10px;text-align:start}
.ac-steps .ac-dial .num{padding:12px 20px;font-size:clamp(20px,2.6vw,26px)}
.ac-steps .ac-dial .tel{margin:0}
[lang="fa"] .ac-steps>li::before{font-family:inherit}

/* the typed code */
.ac-code{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:center}
.ac-code input{
  font:inherit;font-size:26px;letter-spacing:.5em;text-align:center;direction:ltr;
  padding:14px 10px 14px 24px;border:1px solid var(--line-2);width:220px;background:var(--white);
}
.ac-code input:focus{outline:2px solid var(--accent);outline-offset:-2px}

/* A button that has to read as a sentence — resending a code, calling off a
   visit. It posts, so it is a button; it is quiet, so it looks like a link. */
.ac-link{
  font:inherit;font-size:12.5px;background:none;border:0;padding:0;cursor:pointer;
  color:var(--accent-ink);border-block-end:1px solid currentColor;
}
.ac-link:hover{color:var(--ink)}
.ac-link.is-quiet{color:var(--ink-3)}

/* ── the two ways into the account, on the details page ──────────────
   Each is a small form of its own rather than a field in the big one: an
   address or a number is proved before it is kept, never just typed. */
.ac-keys{display:grid;gap:16px;margin-block-start:4px}
.ac-key{border:1px solid var(--line);padding:16px 18px}
.ac-key h3{margin:0 0 4px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:.5em}
.ac-key h3 svg{width:16px;height:16px;color:var(--accent-ink);flex:none}
.ac-key .val{margin:0 0 10px;font-size:14px;color:var(--ink)}
.ac-key .val .none{color:var(--ink-3)}
.ac-key p{margin:0 0 12px;font-size:12.5px;line-height:1.85;color:var(--ink-3)}
.ac-key form{display:flex;gap:8px;flex-wrap:wrap}
.ac-key input{
  flex:1 1 180px;min-width:0;font:inherit;font-size:14px;padding:11px 12px;
  border:1px solid var(--line-2);background:var(--white);color:var(--ink);
}
.ac-key input:focus{outline:2px solid var(--accent);outline-offset:-2px}
.ac-key .zb{min-height:42px;padding-inline:20px;font-size:12.5px}
.ac-ver{
  display:inline-flex;align-items:center;gap:.35em;font-size:11.5px;
  color:#1F5C44;background:#F1F8F4;border:1px solid #BFE0D0;padding:2px 8px;
}
.ac-ver.is-no{color:var(--gold-dk);background:#FCF8F1;border-color:#E8D9BC}

/* the row of quiet actions under an appointment */
.ac-appt .acts{display:flex;gap:14px;align-items:center;margin-block-start:10px}

/* ── narrow ───────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .ac-cols{grid-template-columns:1fr}
  .ac-gate{grid-template-columns:1fr;min-height:0}
  .ac-gate-art{min-height:260px}
  .ac-gate-form{max-width:none}
}
@media (max-width:640px){
  /* The panel stacks here, and in a column the flex-basis of .ac-id would be read
     as a height — 360px of empty gold-lit nothing under the name. */
  .ac-hero-in{flex-direction:column;align-items:flex-start;gap:26px}
  .ac-id{flex:0 0 auto;width:100%}
  .ac-counts{width:100%;justify-content:space-between;gap:12px}
  .ac-appt{flex-direction:column}
  .ac-appt .when{display:flex;gap:14px;align-items:baseline;min-width:0;width:100%;text-align:start}
  .ac-appt .when .t{margin:0;padding:0;border:0}
}

/* ── orders ───────────────────────────────────────────────────────────
   Laid out like an appointment, with the piece's picture where the date
   block sits, and the road the order travels underneath its state. */
.ac-order{display:flex;gap:clamp(16px,2.5vw,28px);align-items:flex-start}
.ac-order .im{flex:none;width:92px;height:92px;object-fit:cover;background:var(--sage-pale);border:1px solid var(--line-2)}
.ac-order .what{min-width:0;flex:1}
.ac-order .what h3{margin:0 0 6px;font-size:16px;line-height:1.6;font-weight:500}
.ac-order .what p{margin:0;font-size:13.5px;line-height:1.9;color:var(--ink-2)}
.ac-order .sum b{font-weight:600;color:var(--ink)}
.ac-order .from-house{margin-block-start:10px !important;padding:10px 12px;background:var(--sage-pale);color:var(--ink) !important}
.ac-road{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 0;font-size:12px;color:var(--ink-3)}
.ac-road li{display:flex;align-items:center}
.ac-road li+li::before{content:"";width:18px;height:1px;background:var(--line-2);margin-inline:6px}
.ac-road li.done{color:var(--ink)}
.ac-road li[aria-current]{font-weight:600;color:var(--accent-ink)}
@media (max-width:520px){.ac-order .im{width:64px;height:64px}}