@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap');
/* ============================================================
   fb-private-membership.css
   The shared FB PRIVATE MEMBERSHIP client-pages design system.
   Arabic script falls through Futura PT (no Arabic glyphs) to Tajawal,
   loaded via the @import above and added to the Futura stacks below.

   ONE cohesive luxury design system for the client-facing web
   (the account portal + the public self-registration page). Built
   ON TOP of the canonical fb-ui.css tokens - it never invents a
   parallel token scale, only consumes --canvas-bg / --text* /
   --accent* / --champagne / --glass-* / --radius-* / --control-* /
   --s-* and adds program-specific structure (membership card, tier
   ladder, progress, benefits, exclusive grid, request CTA).

   Edge-to-edge, mobile-first, luxury (Futura PT, cream, hairlines,
   generous whitespace, house graphics), RTL-correct.

   This account/ copy is the CANONICAL source of the shared system.
   The clients/ copy carries this exact same shared system verbatim
   (byte-identical down to the page-local REGISTRATION PAGE block it
   appends at the end, the way account.css appends portal-only bits).
   Reconcile by re-copying this file's shared body into clients/ and
   keeping its appended registration block. fb-ui.css is loaded FIRST
   (absolute URL on the account portal, root-relative on the register
   page); this file is loaded after it.

   HARD RULES honoured here:
   - No em-dashes / en-dashes anywhere (hyphens only).
   - "F. BINSABBAR" is always uppercase; FB PRIVATE MEMBERSHIP is the
     program name, never lowercased or abbreviated to mean Facebook.
   ============================================================ */

/* ============================================================
   0. PROGRAM-LOCAL VARIABLES
   These are layered on fb-ui.css tokens - NOT a parallel scale.
   They centralise the program's hairline, ink and tier ramp so the
   account portal and the register page stay in lockstep.
   ============================================================ */
:root {
  --pm-hairline:       rgba(0,0,0,0.08);
  --pm-hairline-soft:  rgba(0,0,0,0.05);
  --pm-ink:            #0e0e0e;
  --pm-max:            760px;   /* shared reading width            */
  --pm-card-max:       480px;   /* membership card - editorial centerpiece */

  /* Tier ramp, keyed to data-rank (0 public .. 3 top). The SAME
     ramp drives .tier-chip, .ladder, .excl-badge and the card tier
     so a tier reads identically everywhere. */
  --pm-rank0-bg:  rgba(0,0,0,0.08);
  --pm-rank0-ink: var(--text-muted);
  --pm-rank1-bg:  var(--champagne);
  --pm-rank1-ink: #1a140c;
  --pm-rank2-bg:  #6f5a3e;
  --pm-rank2-ink: var(--accent-yellow);
  --pm-rank3-bg:  #0e0e0e;
  --pm-rank3-ink: var(--accent-yellow);
}

/* ============================================================
   1. PAGE FRAME (shared shell)
   ============================================================ */
html, body { min-height: 100%; }
body {
  background: var(--canvas-bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  font-family: futura-pt, "Futura PT", "Tajawal", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Warm, quiet wash behind everything (champagne + ember). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 58% at 16% 6%, rgba(247,72,39,0.045), transparent 62%),
    radial-gradient(54% 54% at 94% 14%, rgba(254,229,165,0.34), transparent 72%),
    radial-gradient(86% 86% at 56% 114%, rgba(177,155,125,0.12), transparent 72%);
}

/* The shared centred reading column. Pages use .pm-main; the account
   portal keeps .acct-main as an alias for backwards-compat. */
.pm-main, .acct-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--pm-max);
  margin: 0 auto;
  padding: 0 var(--s-5) var(--s-9);
}

/* ============================================================
   2. TOP BAR (account portal chrome)
   ============================================================ */
.acct-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--pm-hairline);
}
.wm-logo {
  display: inline-flex;
  align-items: center;
  margin: 0;
  color: var(--text);
  text-decoration: none;
}
.wm-img {
  display: block;
  height: 15px;
  width: auto;
  /* wordmark SVG fills currentColor; renders ink black on cream */
}
.acct-bar-actions { display: flex; align-items: center; gap: var(--s-3); }
.lang-toggle, .signout {
  appearance: none;
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.04em;
  height: var(--s-8);
  padding: 0 var(--s-4);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.lang-toggle:hover, .signout:hover { background: var(--control-bg-hover); color: var(--text); }

/* ============================================================
   3. SCREENS / TRANSITIONS
   ============================================================ */
.screen { display: none; }
.screen.is-active { display: block; animation: pm-fade-in 420ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes pm-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Boot spinner */
.screen-boot { min-height: 60vh; display: none; place-items: center; }
.screen-boot.is-active { display: grid; }
.boot-mark {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.12);
  border-top-color: var(--accent);
  animation: pm-spin 800ms linear infinite;
}
@keyframes pm-spin { to { transform: rotate(360deg); } }

/* ============================================================
   4. LOGIN SCREEN (edge-to-edge hero + phone-OTP)
   ============================================================ */
.screen-login { position: relative; }
/* Large, quiet house monogram watermark behind the form. */
.login-watermark {
  position: absolute;
  top: 46%;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
  width: min(82vw, 460px);
  height: auto;
  opacity: 0.07;
  filter: sepia(1) saturate(0.55) brightness(1.12) hue-rotate(-8deg);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
[dir="rtl"] .login-watermark { transform: translate(50%, -50%); }
.login-inner {
  position: relative;
  z-index: 1;
  max-width: 460px;
  margin: 0 auto;
  box-sizing: border-box;
  /* Side gutter so the banner + form are inset from the screen edges on phones,
     matching the register page (.page.reg uses the same var(--s-5)). */
  padding: var(--s-8) var(--s-5) 0;
}
.login-monogram {
  display: flex;
  justify-content: center;
  margin-bottom: var(--s-5);
}
.login-monogram img {
  display: block;
  height: 66px;
  width: auto;
  opacity: 0.92;
}
.login-hero { margin-bottom: var(--s-7); text-align: center; }
/* The program eyebrow on login - letterspaced, quiet champagne. */
.login-hero .eyebrow { color: var(--champagne); }
.login-hero h1 { margin: var(--s-3) 0 var(--s-3); }
.login-hero p { max-width: 38ch; margin-inline: auto; }

.auth-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-glass);
  padding: var(--s-7) var(--s-6) var(--s-6);
}
.field-label {
  display: block;
  font-size: var(--param-title-fs, 11px);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-muted);
  margin-bottom: var(--s-3);
}
.phone-row { display: flex; align-items: stretch; gap: var(--s-2); }
.dial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: var(--control-h);
  padding: 0 var(--s-4);
  border-radius: var(--radius-pill);
  background: var(--control-bg);
  border: 1px solid var(--control-border);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--text);
  direction: ltr;
  unicode-bidi: isolate;
}
.phone-input { flex: 1 1 auto; direction: ltr; text-align: start; letter-spacing: 0.08em; }
.otp-input {
  width: 100%;
  text-align: center;
  font-size: 22px;
  letter-spacing: 0.5em;
  direction: ltr;
  padding-inline-start: 0.5em;
}
.field-hint {
  min-height: 16px;
  margin: var(--s-2) 0 0;
  font-size: 12px;
  color: var(--text-faint);
}
.field-hint.is-error { color: var(--accent); }
.field-note {
  margin: var(--s-4) 0 0;
  font-size: 11.5px;
  color: var(--text-faint);
  line-height: 1.5;
}
.auth-btn { width: 100%; justify-content: center; margin-top: var(--s-5); }
.auth-btn.is-busy { opacity: 0.6; pointer-events: none; }
.back-link {
  appearance: none;
  background: none;
  border: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 0;
  margin-bottom: var(--s-4);
}
.back-link:hover { color: var(--text); }
.back-link svg { width: 16px; height: 16px; }
[dir="rtl"] .back-link svg { transform: scaleX(-1); }
.otp-sent { margin: 0 0 var(--s-4); font-size: 13px; color: var(--text-muted); }
.resend {
  appearance: none; background: none; border: 0;
  display: block; margin: var(--s-4) auto 0;
  color: var(--text-muted); font: inherit; font-size: 12px;
  letter-spacing: 0.04em; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}
.resend:hover { color: var(--accent); }
#recaptcha-container { position: fixed; bottom: 0; left: 0; }

/* Become-a-member affordance under the auth card: a quiet hairline
   divider then a "Not a member yet? Become a member" line that routes
   to the public registration page. */
.join-cta {
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--pm-hairline);
  text-align: center;
}
.join-cta p {
  margin: 0 0 var(--s-4);
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}
.join-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: var(--control-h);
  padding: 0 var(--s-6);
  border-radius: var(--radius-pill);
  border: 1px solid var(--pm-ink);
  background: transparent;
  color: var(--pm-ink);
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}
.join-link:hover { background: var(--pm-ink); color: var(--accent-yellow); }
.join-link svg { width: 15px; height: 15px; }
[dir="rtl"] .join-link svg { transform: scaleX(-1); }

/* ============================================================
   5. ACCOUNT HERO
   ============================================================ */
.acct-hero { margin: var(--s-9) 0 var(--s-7); }
.acct-hero h1 {
  margin: var(--s-3) 0 0;
  font-size: clamp(30px, 8vw, 46px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.acct-hero .eyebrow { font-size: 12px; letter-spacing: 0.24em; }
.acct-crest {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}
.acct-crest img {
  display: block;
  height: 34px;
  width: auto;
  opacity: 0.9;
}
.acct-crest::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(to right, rgba(0,0,0,0.14), rgba(0,0,0,0));
}
[dir="rtl"] .acct-crest::after {
  background: linear-gradient(to left, rgba(0,0,0,0.14), rgba(0,0,0,0));
}
.acct-hero .eyebrow { color: var(--champagne); }
.tier-line {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-5);
  flex-wrap: wrap;
}

/* ---- Tier chip (rank ramp) ---- */
.tier-chip {
  display: inline-flex;
  align-items: center;
  height: var(--s-8);
  padding: 0 var(--s-5);
  border-radius: var(--radius-pill);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--text);
  color: var(--accent-yellow);
}
.tier-chip[data-rank="0"] { background: var(--pm-rank0-bg); color: var(--pm-rank0-ink); }
.tier-chip[data-rank="1"] { background: var(--pm-rank1-bg); color: var(--pm-rank1-ink); }
.tier-chip[data-rank="2"] { background: var(--pm-rank2-bg); color: var(--pm-rank2-ink); }
.tier-chip[data-rank="3"] { background: var(--pm-rank3-bg); color: var(--pm-rank3-ink); }
.points-inline { font-size: 14px; color: var(--text-muted); }
.points-inline strong { color: var(--text); font-weight: 500; }

/* ============================================================
   6. TABS / PANELS
   ============================================================ */
.acct-tabs {
  position: sticky;
  top: 60px;
  z-index: 40;
  margin: 0 calc(-1 * var(--s-5)) var(--s-7);
  padding: var(--s-3) var(--s-5);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--pm-hairline);
}
/* Editorial tabs: quiet uppercase labels, a thin underline marks the active
   one (minimal chrome over the fb-ui pill default). */
.acct-tabs .tabs {
  display: flex;
  gap: var(--s-6);
  overflow-x: auto;
  scrollbar-width: none;
}
.acct-tabs .tabs::-webkit-scrollbar { display: none; }
.acct-tabs .tab {
  appearance: none;
  background: none;
  border: 0;
  padding: var(--s-2) 0;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  transition: color 160ms ease;
}
.acct-tabs .tab::after {
  content: "";
  position: absolute;
  inset-inline: 0; bottom: -2px;
  height: 1.5px;
  background: var(--pm-ink);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 220ms cubic-bezier(.2,.7,.2,1);
}
.acct-tabs .tab:hover { color: var(--text-muted); }
.acct-tabs .tab.active { color: var(--pm-ink); }
.acct-tabs .tab.active::after { transform: scaleX(1); }
.panel { display: none; }
.panel.is-active { display: block; animation: pm-fade-in 320ms ease both; }

/* ---- DETAILS ---- chrome-less list, hairline-separated rows ---- */
.detail-card {
  padding: 0 2px;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.detail-list { margin: 0; }
.detail-key, .detail-val { margin: 0; padding: var(--s-4) 0; }
.detail-key {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text-faint);
  padding-bottom: 2px;
}
.detail-val {
  font-size: 16px;
  color: var(--text);
  padding-top: 0;
  border-bottom: 1px solid var(--pm-hairline);
}
.detail-list dd:last-of-type { border-bottom: 0; }

/* ---- ORDERS ---- hairline-separated rows, minimal chrome ---- */
.orders-list { display: flex; flex-direction: column; gap: 0; }
.order-card {
  padding: var(--s-6) 2px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--pm-hairline);
  box-shadow: none;
  border-radius: 0;
}
.orders-list .order-card:last-child { border-bottom: 0; }
.order-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-4);
}
.order-ref { font-size: 15px; font-weight: 500; letter-spacing: 0.02em; }
.order-source {
  font-size: 9.5px; letter-spacing: 0.10em; text-transform: uppercase;
  padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--pm-hairline); color: var(--text-muted);
}
.order-source.src-online { background: var(--accent-soft); color: var(--accent); }
.order-source.src-boutique { background: rgba(177,155,125,0.22); color: #6f5a3e; }
.order-date { font-size: 12px; color: var(--text-faint); }
.order-meta {
  display: flex; gap: var(--s-6); flex-wrap: wrap;
  padding-bottom: var(--s-2);
}
.order-meta-cell { display: flex; flex-direction: column; gap: 2px; }
.meta-k { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.10em; color: var(--text-faint); }
.meta-v { font-size: 15px; color: var(--text); }
.order-items {
  margin: var(--s-4) 0 0; padding: var(--s-4) 0 0;
  list-style: none; border-top: 1px solid var(--pm-hairline);
}
.order-items li {
  font-size: 13px; color: var(--text-muted);
  padding: 3px 0; padding-inline-start: var(--s-4);
  position: relative;
}
.order-items li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 11px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--champagne);
}
/* Order actions row: pill-shaped, branded buttons (charcoal fill). The same
   pill is reused for any sibling order action so the row stays consistent. */
.order-actions {
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-top: var(--s-5);
}
.order-pill {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--s-7);
  padding: 0 var(--s-5);
  border-radius: var(--radius-pill);
  background: var(--pm-ink);
  color: var(--accent-yellow);
  border: 1px solid var(--pm-ink);
  font: inherit;
  font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: opacity 160ms ease, background 160ms ease, color 160ms ease;
}
.order-pill:hover { opacity: 0.88; }
/* Secondary variant (gold outline) for any non-primary sibling action. */
.order-pill.is-outline {
  background: transparent; color: var(--pm-ink);
  border-color: var(--champagne);
}
.order-pill.is-outline:hover { background: var(--champagne); color: #1a140c; opacity: 1; }

/* ============================================================
   7. MEMBERSHIP CARD (the physical card photo + overlay)
   membership-card.jpg is referenced RELATIVELY from app.js so it
   must deploy alongside it in account/.
   ============================================================ */
.membership-card {
  position: relative;
  width: 100%;
  max-width: var(--pm-card-max);
  margin: var(--s-4) auto var(--s-6);
  aspect-ratio: 1.586 / 1;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(20,12,2,0.30), 0 3px 10px rgba(20,12,2,0.18);
  isolation: isolate;
  color: #fff;
}
.membership-card .mc-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block; z-index: 0;
}
.membership-card .mc-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.12) 42%, rgba(0,0,0,0) 70%),
    linear-gradient(to bottom, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0) 38%);
}
.membership-card .mc-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  padding: clamp(16px, 5.5%, 26px);
  font-family: futura-pt, "Futura PT", "Tajawal", system-ui, sans-serif;
  font-weight: 300;
}
.membership-card .mc-label {
  margin: 0;
  font-size: clamp(10px, 3vw, 13px);
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
}
.membership-card .mc-tier {
  margin: auto 0 0;
  font-size: clamp(22px, 8vw, 34px);
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1;
  text-shadow: 0 1px 10px rgba(0,0,0,0.35);
}
.membership-card .mc-foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-5); margin-top: clamp(10px, 3%, 16px);
}
.membership-card .mc-cell { display: flex; flex-direction: column; gap: 3px; }
.membership-card .mc-pts { text-align: end; align-items: flex-end; }
.membership-card .mc-cell-k {
  font-size: clamp(8.5px, 2.6vw, 10px);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}
.membership-card .mc-cell-v {
  font-size: clamp(14px, 4.6vw, 18px);
  font-weight: 400; letter-spacing: 0.06em;
}
.membership-card .mc-num .mc-cell-v { font-variant-numeric: tabular-nums; }
[dir="rtl"] .membership-card .mc-num .mc-cell-v { letter-spacing: 0.04em; }

/* ============================================================
   8. MEMBERSHIP TAB - points + progress + tier ladder + benefits
   The Kith-style program surface.
   ============================================================ */
/* Calmer, chrome-less points block: no card surface, lean on whitespace. */
.points-card {
  text-align: center;
  padding: var(--s-7) var(--s-5) var(--s-6);
  background: transparent;
  border: 0;
  box-shadow: none;
}
.points-big {
  margin: 0; font-size: 60px; font-weight: 500; line-height: 1;
  letter-spacing: -0.02em;
}
.points-big .points-unit {
  font-size: 16px; font-weight: 400; letter-spacing: 0.04em;
  color: var(--text-muted); margin-inline-start: var(--s-2);
}
.points-tier-note { margin: var(--s-4) 0 0; font-size: 14px; color: var(--text-muted); }

/* ---- Progress to next tier ---- */
.tier-progress {
  margin: var(--s-6) auto 0;
  max-width: 360px;
  text-align: start;
}
.tier-progress-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-3);
}
.tier-progress-label {
  font-size: 12px; color: var(--text-muted); letter-spacing: 0.02em;
}
.tier-progress-label strong { color: var(--text); font-weight: 500; }
.tier-progress-count {
  font-size: 11px; color: var(--text-faint);
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
  white-space: nowrap;
}
.tier-progress-track {
  position: relative;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,0.07);
  overflow: hidden;
}
.tier-progress-fill {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--champagne), var(--accent));
  transition: width 700ms cubic-bezier(.2,.7,.2,1);
}
[dir="rtl"] .tier-progress-fill {
  background: linear-gradient(270deg, var(--champagne), var(--accent));
}
/* At the top tier there is no "next" - show a calm full champagne bar. */
.tier-progress.is-max .tier-progress-fill {
  width: 100% !important;
  background: var(--champagne);
}

/* ---- Tier ladder (vertical, with thresholds + benefits) ---- */
.tier-ladder {
  margin-top: var(--s-7);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ladder-step {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  opacity: 0.6;
  border-bottom: 1px solid var(--pm-hairline-soft);
}
.ladder-step:last-child { border-bottom: 0; }
.ladder-step.is-passed, .ladder-step.is-current { opacity: 1; }
/* connecting rail down the dot column */
.ladder-step::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  inset-inline-start: 13px;
  width: 1px;
  background: var(--pm-hairline);
}
.ladder-step:first-child::before { top: var(--s-5); }
.ladder-step:last-child::before { bottom: auto; height: var(--s-5); }
.ladder-marker {
  position: relative;
  z-index: 1;
  width: 28px;
  display: flex;
  justify-content: center;
  padding-top: 2px;
}
.ladder-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.25);
  background: var(--canvas-bg);
}
.ladder-step.is-passed .ladder-dot { background: var(--champagne); border-color: var(--champagne); }
.ladder-step.is-current .ladder-dot {
  background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.ladder-body { min-width: 0; }
.ladder-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4);
}
.ladder-name-wrap { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); min-width: 0; }
.ladder-name {
  font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 500;
}
.ladder-step.is-current .ladder-name { color: var(--text); }
.ladder-current-tag {
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--accent); color: #fff;
  vertical-align: middle;
}
.ladder-threshold {
  font-size: 11px; color: var(--text-faint);
  letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ladder-benefits {
  margin: var(--s-3) 0 0; padding: 0;
  list-style: none;
}
.ladder-benefits li {
  position: relative;
  font-size: 12.5px; color: var(--text-muted);
  line-height: 1.5;
  padding: 2px 0; padding-inline-start: var(--s-4);
}
.ladder-benefits li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 9px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--champagne);
}

/* ---- "How you earn" explainer - quiet, hairline top rule, no box ---- */
.earn-card {
  margin-top: var(--s-7);
  padding: var(--s-7) 2px 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--pm-hairline);
  box-shadow: none;
}
.earn-title {
  margin: 0 0 var(--s-3);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--champagne);
}
.earn-body {
  margin: 0;
  font-size: 13px; color: var(--text-muted); line-height: 1.65;
}

/* ============================================================
   9. EXCLUSIVE - "Reserved for you" + Request a purchase
   ============================================================ */
/* Editorial lookbook: a big uppercase letterspaced header, then a disciplined
   square grid where the photography leads and chrome recedes (no boxes, no
   shadows around the media - the image IS the card). Tapping opens the rich
   detail view. */
.excl-head { margin: 0 0 var(--s-7); }
.excl-head .eyebrow {
  color: var(--champagne);
  font-size: 12px;
  letter-spacing: 0.24em;
}
.excl-lede {
  margin: var(--s-3) 0 0;
  font-size: 15px; color: var(--text-muted);
  max-width: 46ch; line-height: 1.6;
}
.excl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-5) var(--s-4);
}
/* Card is chrome-less: no surface, no border, no shadow. The media is the
   hero; text sits quietly beneath it like a lookbook caption. */
.excl-card {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.excl-card:focus-visible .excl-media {
  box-shadow: 0 0 0 2px var(--canvas-bg), 0 0 0 4px var(--champagne);
}
.excl-media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #ebe7df;
  display: grid; place-items: center;
  overflow: hidden;
  border-radius: 4px;   /* near-square, gallery-like, minimal rounding */
}
.excl-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 600ms cubic-bezier(.2,.7,.2,1);
}
.excl-card:hover .excl-media img { transform: scale(1.035); }
.excl-media.is-placeholder::after {
  content: "F. BINSABBAR";
  font-size: 10px; letter-spacing: 0.20em; color: var(--text-faint);
}
.excl-badge {
  position: absolute; top: var(--s-3); inset-inline-start: var(--s-3);
  font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--text); color: var(--accent-yellow);
}
.excl-badge[data-rank="0"] { background: var(--pm-rank0-bg); color: var(--pm-rank0-ink); }
.excl-badge[data-rank="1"] { background: var(--pm-rank1-bg); color: var(--pm-rank1-ink); }
.excl-badge[data-rank="2"] { background: var(--pm-rank2-bg); color: var(--pm-rank2-ink); }
.excl-badge[data-rank="3"] { background: var(--pm-rank3-bg); color: var(--pm-rank3-ink); }
.excl-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: var(--s-4) 2px 0;
}
.excl-name {
  margin: 0; font-size: 14px; font-weight: 500; line-height: 1.3;
  letter-spacing: 0.02em;
}
.excl-ref {
  margin: 2px 0 0; font-size: 10.5px; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--text-faint);
}
.excl-price { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); letter-spacing: 0.02em; }

/* ============================================================
   9b. EXCLUSIVE - rich detail view (full-screen, swipeable gallery)
   Image-first: the gallery bleeds to the sheet edges; the piece copy
   sits in a calm, generous column beneath / beside it.
   ============================================================ */
body.pd-locked { overflow: hidden; }
.piece-detail {
  position: fixed; inset: 0; z-index: 9000;
  display: none;
}
.piece-detail.is-open { display: block; }
.pd-scrim {
  position: absolute; inset: 0;
  background: rgba(14,11,6,0.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: pm-fade-in 240ms ease both;
}
.pd-sheet {
  position: absolute;
  inset-inline: 0; bottom: 0; top: auto;
  max-height: 94vh;
  background: var(--canvas-bg);
  border-radius: 22px 22px 0 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 -18px 60px rgba(20,12,2,0.34);
  animation: pd-rise 360ms cubic-bezier(.2,.7,.2,1) both;
}
@keyframes pd-rise { from { transform: translateY(36px); opacity: 0; } to { transform: none; opacity: 1; } }
.pd-close {
  position: absolute; z-index: 3;
  top: var(--s-4); inset-inline-end: var(--s-4);
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  color: var(--pm-ink); cursor: pointer;
  box-shadow: var(--glass-shadow);
}
.pd-close svg { width: 18px; height: 18px; }

/* ---- gallery ---- */
.pd-gallery {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #ebe7df;
  overflow: hidden;
}
.pd-gallery.is-empty::after {
  content: "F. BINSABBAR";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 11px; letter-spacing: 0.22em; color: var(--text-faint);
}
.pd-track {
  display: flex;
  height: 100%;
  /* Force LTR so the slide order + translate math is identical in both
     directions; the arrow/swipe INTENT mapping handles RTL, not the layout. */
  direction: ltr;
  transition: transform 420ms cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.pd-slide { flex: 0 0 100%; height: 100%; }
.pd-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  color: var(--pm-ink); cursor: pointer;
  box-shadow: var(--glass-shadow);
}
.pd-nav svg { width: 18px; height: 18px; }
.pd-prev { inset-inline-start: var(--s-4); }
.pd-next { inset-inline-end: var(--s-4); }
[dir="rtl"] .pd-nav svg { transform: scaleX(-1); }
.pd-dots {
  position: absolute; z-index: 2;
  inset-inline: 0; bottom: var(--s-4);
  display: flex; justify-content: center; gap: 7px;
}
.pd-dot {
  width: 7px; height: 7px; border-radius: 50%;
  border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,0.5);
  transition: background 200ms ease, transform 200ms ease;
}
.pd-dot.is-active { background: #fff; transform: scale(1.25); }
.pd-badge {
  position: absolute; z-index: 2;
  top: var(--s-4); inset-inline-start: var(--s-4);
}

/* ---- detail body ---- */
.pd-body {
  padding: var(--s-7) var(--s-6) var(--s-8);
  max-width: 560px;
  margin: 0 auto;
}
.pd-name {
  margin: 0; font-size: 26px; font-weight: 500; line-height: 1.15;
  letter-spacing: 0.01em;
}
.pd-ref {
  margin: var(--s-3) 0 0;
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-faint);
}
.pd-price {
  margin: var(--s-4) 0 0;
  font-size: 17px; color: var(--text); letter-spacing: 0.02em;
}
.pd-section { margin-top: var(--s-7); }
.pd-section-head {
  margin: 0 0 var(--s-3);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--champagne);
}
.pd-desc { margin: 0; font-size: 15px; color: var(--text-muted); line-height: 1.7; }
.pd-specs { margin: 0; }
.pd-specs dt {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--text-faint); padding-top: var(--s-4);
}
.pd-specs dd {
  margin: 2px 0 0; font-size: 15px; color: var(--text);
  padding-bottom: var(--s-4); border-bottom: 1px solid var(--pm-hairline-soft);
}
.pd-specs dd:last-of-type { border-bottom: 0; }
.pd-request {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-3);
  width: 100%;
  margin-top: var(--s-8);
  height: var(--s-9);
  padding: 0 var(--s-6);
  border-radius: var(--radius-pill);
  border: 0;
  background: var(--pm-ink);
  color: var(--accent-yellow);
  font: inherit; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: opacity 160ms ease;
}
.pd-request:hover { opacity: 0.88; }
.pd-request svg { width: 17px; height: 17px; }

/* tablet / desktop: image-left, copy-right editorial split */
@media (min-width: 760px) {
  .piece-detail.is-open { display: grid; place-items: center; }
  .pd-sheet {
    position: relative; inset: auto;
    width: min(92vw, 980px);
    max-height: 90vh;
    border-radius: 18px;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
  }
  .pd-gallery { aspect-ratio: auto; height: 100%; }
  .pd-body { align-self: center; max-width: none; padding: var(--s-8) var(--s-8); }
  .pd-close { background: var(--glass-bg-strong); }
}

/* ============================================================
   10. EMPTY NOTES / MESSAGE SCREEN
   ============================================================ */
.empty-note {
  text-align: center; color: var(--text-muted); font-size: 14px;
  line-height: 1.6; max-width: 420px; margin: var(--s-9) auto; padding: 0 var(--s-4);
}
.screen-message { min-height: 60vh; display: none; }
.screen-message.is-active { display: grid; place-items: center; }
.message-inner { text-align: center; max-width: 420px; padding: var(--s-8) var(--s-5); }
.message-mark {
  width: 44px; height: 44px; margin: 0 auto var(--s-5);
  border-radius: 50%; border: 1px solid rgba(0,0,0,0.14);
  display: grid; place-items: center;
}
.message-mark::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.message-inner h2 { margin: 0 0 var(--s-3); font-size: 22px; font-weight: 500; }
.message-inner p { margin: 0 0 var(--s-6); color: var(--text-muted); line-height: 1.6; font-size: 15px; }

/* ============================================================
   11. FOOTER (shared)
   ============================================================ */
.acct-foot {
  text-align: center;
  padding: var(--s-8) var(--s-5) var(--s-9);
  border-top: 1px solid var(--pm-hairline);
  margin-top: var(--s-9);
}
.foot-brand { margin: 0; font-size: 15px; letter-spacing: 0.20em; font-weight: 500; }
.foot-brand sup { font-size: 8px; }
.foot-tagline { margin: var(--s-3) 0 var(--s-4); font-size: 12px; color: var(--text-muted); letter-spacing: 0.04em; }
.foot-legal { margin: 0; font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.03em; }

/* ============================================================
   12. RESPONSIVE + RTL + REDUCED MOTION
   ============================================================ */
@media (min-width: 600px) {
  .excl-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 380px) {
  .wm-img { height: 13px; }
  .login-monogram img { height: 56px; }
  .points-big { font-size: 44px; }
}

/* RTL: keep numbers/phone/card-number LTR but flip layout where needed */
[dir="rtl"] .order-head { direction: rtl; }
[dir="rtl"] .dial,
[dir="rtl"] .phone-input,
[dir="rtl"] .otp-input { direction: ltr; }

@media (prefers-reduced-motion: reduce) {
  .screen.is-active, .panel.is-active { animation: none; }
  .boot-mark { animation-duration: 1600ms; }
  .tier-progress-fill { transition: none; }
}

/* ============================================================
   REGISTRATION PAGE
   Self-registration page-specific layout (banner, form controls,
   country-code picker, feedback modal, success state). Mirrors the
   portal tokens above; LTR/RTL aware. Served at fb-brand/clients.
   ============================================================ */

:root { --radius-canvas: 24px; }

/* Top-bar "Member sign in" affordance - a quiet pill that matches the
   account portal's .lang-toggle / .signout bar actions so the shared top
   bar reads identically across both client pages. */
.bar-link {
  display: inline-flex;
  align-items: center;
  height: var(--s-8);
  padding: 0 var(--s-4);
  border-radius: var(--radius-pill);
  border: 1px solid var(--control-border);
  background: var(--control-bg);
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 160ms ease, color 160ms ease;
}
.bar-link:hover { background: var(--control-bg-hover); color: var(--text); }

/* The registration page centres its own content column. */
.reg {
  flex: 1 1 auto;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s-6) max(var(--s-6), env(safe-area-inset-right)) var(--s-8) max(var(--s-6), env(safe-area-inset-left));
}
.reg button { text-transform: uppercase; letter-spacing: 0.05em; }
/* 16px on small screens stops iOS from auto-zooming the field on focus */
@media (max-width: 600px) {
  .reg input, .reg select, .reg textarea { font-size: 16px; }
}

/* Registration hero: a champagne letterspaced eyebrow, then the large light
   house headline (the .hero h1 scale comes from fb-ui.css). The page opens
   straight on this hero (no banner, no crest), so keep a little top breathing
   room above the eyebrow. */
.reg-hero { margin-top: var(--s-5); margin-bottom: var(--s-8); }
.reg-hero .eyebrow {
  color: var(--champagne);
  font-size: 12px;
  letter-spacing: 0.24em;
}
.reg-hero h1 { margin: var(--s-3) 0 var(--s-4); }

.reg .lead { color: var(--text-muted); font-size: 16px; line-height: 1.6; max-width: 60ch; }

.benefit-list { list-style: none; margin: 0; padding: 0; }
.benefit-list li {
  position: relative; padding-inline-start: var(--s-5); margin-bottom: var(--s-3);
  line-height: 1.55; color: var(--text);
}
.benefit-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.5em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

/* Collapsible membership summary - keeps the page light, especially on mobile */
.mem-details {
  margin: var(--s-8) 0 var(--s-5);
  border: 1px solid var(--control-border);
  border-radius: 16px;
  background: rgba(255,255,255,0.45);
  overflow: hidden;
}
.mem-details > summary {
  list-style: none; cursor: pointer;
  padding: var(--s-4) var(--s-5);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
}
.mem-details > summary::-webkit-details-marker { display: none; }
.mem-details > summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-inline-end: 3px;
  border-right: 1.5px solid var(--text-muted); border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(45deg); transition: transform 0.2s;
}
.mem-details[open] > summary::after { transform: rotate(-135deg); }
.mem-body { padding: 0 var(--s-5) var(--s-5); }
.mem-body .benefit-list { margin-bottom: var(--s-4); }
.mem-body .fine { font-size: 12.5px; color: var(--text-muted); line-height: 1.6; margin: 0; }

/* Form layout - pairs collapse to a single column on narrow screens */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 540px) { .pair { grid-template-columns: 1fr; } }

/* Phone = ONE control: searchable country-code picker + local number in a single box */
.phone-field {
  display: flex; align-items: center;
  height: var(--s-9);
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: var(--radius-pill);
  transition: border-color 0.12s, box-shadow 0.12s, background 0.12s;
}
.phone-field:hover {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  background: rgba(255,255,255,0.75);
}
.phone-field .phone-num {
  flex: 1; min-width: 0; height: 100%; margin: 0;
  border-radius: 0; -webkit-appearance: none; appearance: none;
  padding: 0 var(--s-4);
  font-family: inherit; font-size: 13px; color: var(--text);
}
/* Inner controls paint NO border/ring/background in ANY state (kit + UA + autofill) */
.phone-field .phone-num, .phone-field .ccode-btn,
.phone-field .phone-num:hover, .phone-field .phone-num:focus, .phone-field .phone-num:focus-visible, .phone-field .phone-num:active,
.phone-field .ccode-btn:hover, .phone-field .ccode-btn:focus, .phone-field .ccode-btn:focus-visible, .phone-field .ccode-btn:active {
  border: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important;
}
/* The kit's `:root input[type=tel]:focus` forces an accent border+ring with !important and
   out-specifies the .phone-field override (0,3,1 > 0,3,0). Re-assert through the #phone ID
   (1,0,0) to kill it for THIS field ONLY - every other input keeps the kit's focus style. */
#phone, #phone:hover, #phone:focus, #phone:focus-visible, #phone:active {
  border: 0 !important; outline: none !important; box-shadow: none !important; background: transparent !important;
}
.phone-field .phone-num:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: var(--text) !important;
  transition: background-color 9999s ease 0s;
}
.phone-field .phone-num::placeholder { color: var(--text-faint); }
.phone-field .divider { width: 1px; height: 20px; background: rgba(0,0,0,0.12); flex: none; }

/* Country-code combobox */
.ccode { position: relative; flex: none; height: 100%; }
.ccode-btn {
  display: flex; align-items: center; gap: 6px; height: 100%; margin: 0;
  border: 0; background: transparent; cursor: pointer;
  padding: 0 var(--s-3) 0 var(--s-4);
  font-family: inherit; font-size: 13px; color: var(--text); white-space: nowrap;
  text-transform: none; letter-spacing: 0;
}
.ccode-btn svg { width: 12px; height: 12px; opacity: 0.55; transition: transform 0.15s; }
.ccode-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.ccode-pop {
  position: absolute; top: calc(100% + 8px); inset-inline-start: 0; z-index: 60;
  width: 290px; max-width: 80vw;
  background: var(--canvas-bg); border: 1px solid var(--control-border);
  border-radius: 16px; box-shadow: var(--glass-shadow); padding: var(--s-3);
}
.ccode-pop[hidden] { display: none; }
.ccode-search {
  width: 100%; height: 38px; box-sizing: border-box; margin: 0 0 var(--s-3);
  border: 1px solid var(--control-border); border-radius: var(--radius-pill);
  background: #fff; padding: 0 var(--s-4);
  font-family: inherit; font-size: 14px; color: var(--text); outline: none;
  -webkit-appearance: none; appearance: none;
}
.ccode-search:focus { border-color: var(--accent); }
.ccode-list { list-style: none; margin: 0; padding: 0; max-height: 232px; overflow-y: auto; }
.ccode-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 9px var(--s-3); border-radius: 10px; cursor: pointer; font-size: 14px; color: var(--text);
}
.ccode-list li.hidden { display: none; }
.ccode-list li.active, .ccode-list li:hover { background: rgba(0,0,0,0.06); }
.cc-iso { font-size: 11px; color: var(--text-muted); opacity: 0.55; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; }
.ccode-list li .cc-iso { min-width: 22px; flex: none; }
.ccode-list li .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccode-list li .cd { color: var(--text-muted); flex: none; }
.ccode-empty { padding: var(--s-3); text-align: center; color: var(--text-muted); font-size: 13px; }
@media (max-width: 540px) { .ccode-pop { width: 250px; } }

.check-line { display: flex; align-items: flex-start; gap: var(--s-3); margin-block: var(--s-4); }
.check-line input[type="checkbox"] { margin-top: 1px; }
.check-line label { font-size: 13px; color: var(--text); line-height: 1.5; cursor: pointer; text-transform: none; letter-spacing: 0; }
.check-line label .sub { display: block; color: var(--text-muted); font-size: 12px; margin-top: 2px; }

.req { color: var(--accent); }
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

.submit { width: 100%; margin-top: var(--s-5); }
.submit[disabled] { opacity: 0.55; pointer-events: none; }

/* A quiet "already a member" line back to the membership login. */
.reg-signin {
  margin: var(--s-6) 0 0; text-align: center;
  font-size: 13px; color: var(--text-muted);
}
.reg-signin a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; }
.reg-signin a:hover { color: var(--text); }

/* Feedback modal (errors + notices) - own class to avoid the kit .modal clash */
.reg-modal {
  position: fixed; inset: 0; z-index: 9800; display: none;
  align-items: center; justify-content: center; padding: var(--s-5);
  background: rgba(14,14,14,0.45);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.reg-modal.show { display: flex; }
.reg-modal-card {
  background: var(--canvas-bg); border-radius: var(--radius-canvas);
  padding: var(--s-6) var(--s-6) var(--s-5); width: 100%; max-width: 360px;
  text-align: center; box-shadow: var(--glass-shadow);
}
.reg-modal-card .m-icon {
  width: 46px; height: 46px; border-radius: 50%; margin: 0 auto var(--s-4);
  display: flex; align-items: center; justify-content: center;
}
.reg-modal-card .m-icon svg { width: 24px; height: 24px; }
.reg-modal.err .m-icon { background: rgba(247,72,39,0.12); color: var(--accent); }
.reg-modal.info .m-icon { background: rgba(0,0,0,0.06); color: var(--text-muted); }
.reg-modal-card p { margin: 0 0 var(--s-5); color: var(--text); line-height: 1.6; font-size: 15px; }
.reg-modal-card .btn { min-width: 130px; }

.success { display: none; text-align: center; padding: var(--s-7) var(--s-5); }
.success.show { display: block; }
.success .tick {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto var(--s-5);
  background: var(--accent); display: flex; align-items: center; justify-content: center;
}
.success .tick svg { width: 30px; height: 30px; color: #fff; }
.success h2 { margin: 0 0 var(--s-3); }
.success p { color: var(--text-muted); line-height: 1.6; max-width: 46ch; margin: 0 auto var(--s-3); }
.success .ref { font-weight: 500; color: var(--text); letter-spacing: 0.04em; }
.success .wallet { margin-top: var(--s-5); }

.policy-link { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; }

/* Keep it light and simple on phones */
@media (max-width: 600px) {
  .reg-hero { margin-top: var(--s-4); margin-bottom: var(--s-6); }
  .reg .section { margin-top: var(--s-6); }
  .reg .lead { font-size: 15px; }
  .mem-details { margin-bottom: var(--s-5); }
}

/* Stop focus zoom on touch devices: iOS zooms a focused field whose font-size < 16px. */
@media (hover: none) and (pointer: coarse) {
  .reg input, .reg select, .reg textarea,
  .reg .text-input, .reg .fb-select, .reg textarea.text-input,
  .phone-field .phone-num, .ccode-search, .ccode-btn, #ccodeLabel { font-size: 16px; }
}

/* RTL: the registration page mirrors layout; keep phone number LTR. */
[dir="rtl"] .phone-field .phone-num, [dir="rtl"] #phone { direction: ltr; text-align: start; }

/* ============================================================
   ARABIC LETTER-SPACING RESET
   Arabic script is cursive - letter-spacing shatters the joined glyphs. Zero all
   tracking in Arabic mode (lang=ar / dir=rtl). Latin/English untouched.
   ============================================================ */
:lang(ar), :lang(ar) *,
[dir="rtl"], [dir="rtl"] * {
  letter-spacing: normal !important;
}