/* ===========================================================================
   mp-sa-mobplus — lander v2
   Dark navy card on near-black, one warm-amber accent, pill geometry.
   Restraint executed precisely: this page takes recurring-billing consent,
   so it should read like something an operator would put its name on.

   NOTHING here may move inline. The app's CSP is script-src/style-src 'self'
   with no 'unsafe-inline', so an inline <style> or style="" attribute is
   dropped SILENTLY by the browser — it looks fine locally and is broken in
   production. All styling lives in this file.
   =========================================================================== */

@font-face {
  font-family: 'Plex Arabic';
  src: url('../fonts/ibm-plex-sans-arabic-400.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Plex Arabic';
  src: url('../fonts/ibm-plex-sans-arabic-600.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'Plex Arabic';
  src: url('../fonts/ibm-plex-sans-arabic-700.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Plex Latin';
  src: url('../fonts/ibm-plex-sans-latin-var.woff2') format('woff2');
  font-weight: 100 700; font-display: swap;
}

:root {
  --ink:        #0B1220;   /* page, near-black navy */
  --ink-2:      #0E1626;   /* gradient partner      */
  --card:       #182133;   /* raised card           */
  --card-edge:  #24304a;
  --field:      #131C2C;   /* input wells           */
  --amber:      #F2A34C;   /* the ONE accent        */
  --amber-deep: #E08C31;
  --on-amber:   #23180A;   /* text on amber         */
  --text:       #EEF2F8;
  --muted:      #93A1B8;
  --muted-2:    #6C7C96;
  --danger:     #FF9A8B;

  --r-card: 22px;
  --r-pill: 999px;
  --r-well: 16px;

  --s1: .25rem; --s2: .5rem;  --s3: .75rem; --s4: 1rem;
  --s5: 1.5rem; --s6: 2rem;   --s7: 2.75rem;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--text);
  font-family: 'Plex Arabic', 'Plex Latin', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[lang='en'] body,
html[lang='en'] { font-family: 'Plex Latin', 'Plex Arabic', system-ui, sans-serif; }

body {
  min-height: 100svh;
  /* Two soft amber pools top and bottom: atmosphere without a hero image,
     which keeps the page fast on a mid-range Android over mobile data. */
  background-image:
    radial-gradient(120% 55% at 50% -8%,  rgba(242,163,76,.13), transparent 62%),
    radial-gradient(120% 45% at 50% 108%, rgba(242,163,76,.07), transparent 60%),
    linear-gradient(180deg, var(--ink-2), var(--ink) 45%);
  background-attachment: fixed;
}

.shell {
  width: 100%;
  max-width: 27rem;
  margin: 0 auto;
  padding: var(--s4) var(--s4) var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  min-height: 100svh;
}

/* ── language toggle ───────────────────────────────────────────────────── */
.topbar { display: flex; justify-content: flex-end; }
.lang-toggle {
  display: inline-flex;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--card-edge);
  border-radius: var(--r-pill);
  padding: 3px;
  gap: 2px;
}
.lang-opt {
  min-height: 44px;              /* mobile tap target */
  min-width: 52px;
  padding: 0 var(--s3);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lang-opt[aria-current='true'] { background: var(--amber); color: var(--on-amber); }
.lang-opt:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ── card ──────────────────────────────────────────────────────────────── */
.card {
  background: linear-gradient(180deg, var(--card), #141C2B);
  border: 1px solid var(--card-edge);
  border-radius: var(--r-card);
  padding: var(--s5) var(--s4) var(--s5);
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.02) inset;
}

/* ── progress ──────────────────────────────────────────────────────────── */
.progress {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s2);
  margin-bottom: var(--s3);
}
.progress-seg {
  height: 4px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.10);
  transition: background .28s ease;
}
.progress-seg.is-on { background: var(--amber); }
.progress-label {
  margin: 0 0 var(--s5);
  text-align: center;
  font-size: .75rem;
  letter-spacing: .05em;
  color: var(--muted-2);
}

/* ── panes ─────────────────────────────────────────────────────────────── */
.pane { display: none; }
.shell[data-step='age']   #paneAge,
.shell[data-step='phone'] #panePhone,
.shell[data-step='code']  #paneCode { display: block; animation: rise .34s ease both; }

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.seal {
  width: 58px; height: 58px;
  margin: 0 auto var(--s4);
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  color: var(--on-amber);
  background: var(--amber);
  box-shadow: 0 0 0 8px rgba(242,163,76,.12);
}

.pane-title {
  margin: 0 0 var(--s2);
  text-align: center;
  font-size: 1.3125rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.pane-body {
  margin: 0 0 var(--s5);
  text-align: center;
  font-size: .875rem;
  line-height: 1.65;
  color: var(--muted);
}
.msisdn-recap {
  display: inline-block;
  margin-top: var(--s1);
  color: var(--amber);
  font-weight: 700;
  /* Pinned: a phone number must never reorder under RTL. */
  direction: ltr;
  unicode-bidi: isolate;
}

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn {
  width: 100%;
  min-height: 54px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  transition: transform .12s ease, opacity .2s ease, background .2s ease;
}
.btn + .btn { margin-top: var(--s3); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.btn-primary {
  background: linear-gradient(180deg, var(--amber), var(--amber-deep));
  color: var(--on-amber);
  box-shadow: 0 12px 26px -14px rgba(242,163,76,.75);
}
.btn-primary:disabled {
  opacity: .38;
  cursor: not-allowed;
  box-shadow: none;
}
.btn-ghost {
  background: transparent;
  border-color: var(--card-edge);
  color: var(--muted);
  font-weight: 600;
}

.secure-note {
  margin: var(--s5) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-size: .75rem;
  color: var(--muted-2);
}

/* ── phone field ───────────────────────────────────────────────────────── */
.field-label {
  display: block;
  margin-bottom: var(--s2);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--muted);
}
/* Pinned LTR: under an RTL document the country chip and digits would
   otherwise swap sides and the number would read backwards. */
.phone-row {
  direction: ltr;
  display: flex;
  align-items: stretch;
  gap: var(--s2);
  margin-bottom: var(--s5);
}
.cc-chip {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--s4);
  border-radius: var(--r-well);
  background: var(--field);
  border: 1px solid var(--card-edge);
  color: var(--text);
  font-weight: 700;
  font-size: .9375rem;
  letter-spacing: .02em;
  white-space: nowrap;
}
.phone-input {
  direction: ltr;
  flex: 1;
  min-width: 0;
  min-height: 54px;
  padding: 0 var(--s4);
  border-radius: var(--r-well);
  border: 1.5px solid var(--card-edge);
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.phone-input::placeholder { color: var(--muted-2); letter-spacing: .08em; font-weight: 400; }
.phone-input:focus { outline: none; border-color: var(--amber); }

/* ── service state ─────────────────────────────────────────────────────── */
/* Not a price disclosure — this only appears when the terms gate is closed
   and the service genuinely cannot be subscribed to. */
.status-line {
  margin: 0 0 var(--s4);
  text-align: center;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--muted);
}

/* ── collapsed terms ───────────────────────────────────────────────────── */
.terms {
  margin-top: var(--s4);
  border-top: 1px solid var(--card-edge);
  padding-top: var(--s3);
}
.terms-summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--muted);
}
.terms-summary::-webkit-details-marker { display: none; }
/* Chevrons DO mirror under RTL — unlike digits — so a logical rotation is
   correct here. */
.terms-summary::after {
  content: '';
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.terms[open] .terms-summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.terms-summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.terms-list {
  margin: var(--s2) 0 0;
  padding-inline-start: 1.1rem;
  text-align: start;
}
.terms-list li {
  margin-bottom: var(--s2);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--muted);
}
/* The recurring charge leads the list and is the most legible line in it. */
.terms-list li.terms-price {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--text);
}
.fineprint {
  margin: var(--s3) 0 0;
  text-align: center;
  font-size: .75rem;
  line-height: 1.6;
  color: var(--muted-2);
}

/* ── PIN grid ──────────────────────────────────────────────────────────── */
/* Pinned LTR: without this the first digit lands in the RIGHTMOST box under
   an RTL document and entry advances leftward. Digits never mirror. */
.pin-grid {
  direction: ltr;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s2);
  margin-bottom: var(--s5);
}
.pin-box {
  direction: ltr;
  width: 100%;
  min-height: 56px;
  padding: 0;
  text-align: center;
  border-radius: var(--r-well);
  border: 1.5px solid var(--card-edge);
  background: var(--field);
  color: var(--text);
  font: inherit;
  font-size: 1.375rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  caret-color: var(--amber);
}
.pin-box:focus { outline: none; border-color: var(--amber); background: #172233; }
.pin-box.is-filled { border-color: rgba(242,163,76,.55); }
/* Keep every box >= 44px on a 320px viewport once padding and gaps are taken. */
@media (max-width: 23rem) {
  .pin-grid { gap: var(--s1); }
  .pin-box  { font-size: 1.1875rem; }
}

.ttl {
  margin: var(--s3) 0 0;
  text-align: center;
  font-size: .8125rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.ttl.is-urgent { color: var(--amber); }

.pane-links {
  margin-top: var(--s4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
}
.link {
  min-height: 44px;
  padding: 0 var(--s3);
  background: none;
  border: 0;
  color: var(--amber);
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.link:disabled { color: var(--muted-2); cursor: default; }
.link-muted { color: var(--muted); font-weight: 500; }
.link:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ── alert ─────────────────────────────────────────────────────────────── */
.alert {
  display: none;
  margin-top: var(--s4);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-well);
  background: rgba(255,154,139,.10);
  border: 1px solid rgba(255,154,139,.34);
  color: var(--danger);
  font-size: .875rem;
  line-height: 1.55;
  text-align: center;
}
.alert.is-shown { display: block; }
.alert.is-info {
  background: rgba(242,163,76,.10);
  border-color: rgba(242,163,76,.34);
  color: var(--amber);
}

/* Only shown on the step that actually has the submit control. A consent
   sentence describing an action that is not on screen is noise at best and
   misleading at worst. */
.footnote {
  display: none;
  margin: 0;
  text-align: center;
  font-size: .6875rem;
  line-height: 1.7;
  color: var(--muted-2);
}
.shell[data-step='phone'] .footnote { display: block; }

/* In RTL, prefer PHYSICAL sides on full-width blocks — logical
   inset-inline-end resolves to the LEFT and reads backwards. */
[dir='rtl'] .topbar { justify-content: flex-start; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}