/* ============================================================================
   WASLA DESIGN SYSTEM
   Ported from the approved Figma-Make prototype: UI/src/index.css (+ S01–S11 / D0).

   BRAND BOUNDARY (UI/src/imports/pasted_text/visual-system-correction.md):

     WASLA
       ├── Merchant platform / dashboard  → WASLA design system (blue / navy / white)
       ├── Store builder / onboarding     → WASLA design system
       └── Merchant store (buyer-facing)  → MERCHANT theme (.storefront-theme)
                                             └── Crafted Legacy: black / gold

   Merchant theme tokens must never leak upward into Wasla platform UI, and gold
   is never a Wasla platform primary colour. The merchant theme therefore lives
   entirely inside the `.storefront-theme` scope at the bottom of this file.

   This layer is loaded AFTER Bootstrap and re-skins Bootstrap's components onto
   the prototype's tokens, so every existing template inherits the approved visual
   language without its markup being rewritten. All directional rules use CSS
   logical properties so Arabic (RTL) and English (LTR) both stay correct.
   ========================================================================== */

/* ─── Design tokens ───────────────────────────────────────────────────────────
   Geometry, typography, spacing and component shapes are the prototype's
   (UI/src/index.css) verbatim. The PRIMARY COLOUR is deliberately not: per the
   owner directive "adopt the old colour but take the new design", the accent
   family below is Wasla's established sky identity from static/css/app.css
   (--wasla-sky-500 #0ea5e9, documented in Docs/UIUX_BILINGUAL_DELIVERY.md as the
   "sky / black / white" identity), not the prototype's royal blue #2563eb.

   The token names stay `--blue*` because every rule in this file and the sheets it
   re-skins already reference them; only their values changed, so the swap is a
   single edit here rather than hundreds of call sites.
   ------------------------------------------------------------------------- */
:root {
  --navy: #0a2234;
  --blue: #0ea5e9;
  --blue-hover: #0369a1;
  --blue-light: #f0f9ff;
  --blue-mid: #e0f2fe;
  --green: #16a34a;
  --green-light: #f0fdf4;
  --green-mid: #bbf7d0;
  /* OWNER DIRECTIVE: gold is not adopted. The prototype's --gold/--gold-light pair
     is deliberately not carried over. "Attention / needs setup" states use a neutral
     slate instead, so the four status colours stay distinguishable (blue = info,
     green = success, red = danger, slate = attention) without any gold or amber. */
  --attention: #475569;
  --attention-light: #f1f5f9;
  --attention-border: #cbd5e1;
  --red: #dc2626;
  --red-light: #fef2f2;
  --border: #e2e8f0;
  --border-dark: #cbd5e1;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-900: #0f172a;

  /* Prototype geometry */
  --ds-radius-card: 10px;
  --ds-radius-btn: 8px;
  --ds-radius-input: 7px;
  --ds-radius-pill: 20px;
  --ds-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);
  --ds-shadow-raised: 0 4px 12px rgba(15, 23, 42, 0.08);

  /* Bilingual type stack. Docs/PROTOTYPE_SCENARIOS.pdf § Typography specifies
     Arabic: "Noto Sans Arabic, Cairo" and English: "Inter". Latin glyphs resolve
     from Inter first; Arabic glyphs fall through to Noto Sans Arabic then Cairo. */
  --ds-font: "Inter", "Noto Sans Arabic", "Cairo", "Tajawal", "Segoe UI", system-ui, sans-serif;

  /* Bridge the legacy variable names still referenced by older stylesheets so
     nothing falls back to the retired cyan identity. */
  --brand-primary: var(--blue);
  --brand-secondary: var(--navy);
  --brand-accent: var(--blue);
  --brand-font: var(--ds-font);
  --wasla-ink: var(--gray-900);
  --wasla-slate: var(--gray-700);
  --wasla-muted: var(--gray-500);
  --wasla-surface: #ffffff;
  --wasla-page: #ffffff;
  --wasla-border: var(--border);
  --wasla-radius: var(--ds-radius-card);
  --wasla-shadow: var(--ds-shadow-card);
  --wasla-sky-500: var(--blue);
  --wasla-sky-600: var(--blue);
  --wasla-sky-700: var(--blue-hover);
  --wasla-sky-50: var(--blue-light);
  --wasla-sky-100: var(--blue-mid);
  --wasla-sky-400: var(--blue);
}

/* ─── Base surface ─── */
html { overflow-x: hidden; }

body.wasla-body,
body {
  min-height: 100vh;
  margin: 0;
  background: #ffffff;
  color: var(--gray-900);
  font-family: var(--ds-font);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 3px; }

h1, h2, h3, h4, h5, h6 { color: var(--gray-900); font-weight: 700; letter-spacing: -0.01em; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-hover); }
.text-muted, .text-secondary { color: var(--gray-500) !important; }
.text-primary { color: var(--blue) !important; }
hr { border-color: var(--border); opacity: 1; }

/* ─── Animations (prototype) ─── */
@keyframes ds-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ds-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ds-pulse-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.3); }
  50% { box-shadow: 0 0 0 8px rgba(14, 165, 233, 0); }
}
.animate-fade-in { animation: ds-fade-in 0.35s ease-out both; }
.animate-pulse-ring { animation: ds-pulse-ring 1.5s ease-in-out infinite; }

.loader-circle {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: ds-spin 0.8s linear infinite;
}

/* ============================================================================
   BOOTSTRAP COMPONENT RE-SKIN
   ========================================================================== */

/* ─── Buttons ─── */
.btn {
  --bs-btn-border-radius: var(--ds-radius-btn);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 24px;
  border-radius: var(--ds-radius-btn);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--ds-font);
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover { transform: none; }
.btn-sm { padding: 6px 14px; font-size: 13px; border-radius: 6px; }
.btn-lg { padding: 13px 30px; font-size: 16px; }

.btn-primary {
  --bs-btn-bg: var(--blue);
  --bs-btn-border-color: var(--blue);
  --bs-btn-hover-bg: var(--blue-hover);
  --bs-btn-hover-border-color: var(--blue-hover);
  --bs-btn-active-bg: var(--blue-hover);
  --bs-btn-active-border-color: var(--blue-hover);
  --bs-btn-disabled-bg: var(--blue);
  --bs-btn-disabled-border-color: var(--blue);
  box-shadow: none;
}

.btn-outline-primary,
.btn-outline-secondary {
  --bs-btn-color: var(--gray-700);
  --bs-btn-border-color: var(--border-dark);
  --bs-btn-bg: #ffffff;
  --bs-btn-hover-color: var(--blue);
  --bs-btn-hover-bg: var(--blue-light);
  --bs-btn-hover-border-color: var(--blue);
  --bs-btn-active-color: var(--blue);
  --bs-btn-active-bg: var(--blue-light);
  --bs-btn-active-border-color: var(--blue);
  border-width: 1.5px;
  font-weight: 500;
}

.btn-success {
  --bs-btn-bg: var(--green);
  --bs-btn-border-color: var(--green);
  --bs-btn-hover-bg: #15803d;
  --bs-btn-hover-border-color: #15803d;
}
.btn-danger {
  --bs-btn-bg: var(--red);
  --bs-btn-border-color: var(--red);
  --bs-btn-hover-bg: #b91c1c;
  --bs-btn-hover-border-color: #b91c1c;
}
.btn-link { color: var(--gray-500); font-weight: 500; text-decoration: none; }
.btn-link:hover { color: var(--gray-700); }

/* ─── Cards ─── */
.card {
  overflow: visible;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-shadow-card);
}
.card-header {
  padding: 14px 18px;
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  color: var(--gray-900);
  font-weight: 600;
}
.card-body { padding: 18px; }
.card-footer { background: var(--gray-50); border-top: 1px solid var(--border); }

/* ─── Forms ─── */
.form-label,
.field-label {
  display: block;
  margin-bottom: 6px;
  color: var(--gray-700);
  font-size: 13px;
  font-weight: 500;
}
.field-label .req { color: var(--red); margin-inline-start: 2px; }

.form-control,
.form-select,
.field-input {
  width: 100%;
  min-height: unset;
  padding: 9px 12px;
  background: #ffffff;
  border: 1px solid var(--border-dark);
  border-radius: var(--ds-radius-input);
  color: var(--gray-900);
  font-size: 14px;
  font-family: var(--ds-font);
}
.form-control:focus,
.form-select:focus,
.field-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.16);
  outline: none;
}
.form-control::placeholder { color: var(--gray-400); }
.form-control-sm, .form-select-sm { padding: 6px 10px; font-size: 13px; }
.form-text { color: var(--gray-500); font-size: 13px; }
.form-check-input:checked { background-color: var(--blue); border-color: var(--blue); }
.form-check-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.16); }
.input-group-text { background: var(--gray-50); border-color: var(--border-dark); color: var(--gray-600); }

/* ─── Badges — prototype pill treatment ─── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--ds-radius-pill);
  font-size: 12px;
  font-weight: 600;
}
.badge.text-bg-success, .badge-green {
  background-color: var(--green-light) !important;
  color: var(--green) !important;
}
.badge.text-bg-primary, .badge.text-bg-info, .badge-blue {
  background-color: var(--blue-light) !important;
  color: var(--blue) !important;
}
.badge.text-bg-warning, .badge-attention {
  background-color: var(--attention-light) !important;
  color: var(--attention) !important;
  box-shadow: inset 0 0 0 1px var(--attention-border);
}
.badge.text-bg-danger {
  background-color: var(--red-light) !important;
  color: var(--red) !important;
}
.badge.text-bg-light, .badge.text-bg-secondary {
  background-color: var(--gray-100) !important;
  color: var(--gray-600) !important;
}

/* ─── Tables ─── */
.table {
  --bs-table-border-color: var(--border);
  color: var(--gray-700);
  font-size: 14px;
}
.table > thead > tr > th {
  padding: 10px 14px;
  background: var(--gray-50);
  border-bottom: 1px solid var(--border);
  color: var(--gray-500);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.table > tbody > tr > td { padding: 12px 14px; border-color: var(--border); vertical-align: middle; }
.table-hover > tbody > tr:hover > * { background-color: var(--gray-50); }

/* ─── Alerts ─── */
.alert {
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-card);
  font-size: 14px;
}
.alert-success { background: var(--green-light); border-color: var(--green-mid); color: #14532d; }
.alert-info    { background: var(--blue-light); border-color: var(--blue-mid); color: #1e3a8a; }
.alert-warning { background: var(--attention-light); border-color: var(--attention-border); color: var(--gray-700); }
.alert-danger  { background: var(--red-light); border-color: #fecaca; color: #7f1d1d; }

/* ─── Lists ─── */
.list-group-item { border-color: var(--border); color: var(--gray-700); font-size: 14px; padding: 12px 16px; }
.list-group-item + .list-group-item { border-top-width: 1px; }

/* ─── Pagination / misc ─── */
.page-link { color: var(--blue); border-color: var(--border); }
.page-item.active .page-link { background: var(--blue); border-color: var(--blue); }
.nav-tabs { border-bottom-color: var(--border); }
.nav-tabs .nav-link { color: var(--gray-600); border: none; border-bottom: 2px solid transparent; font-weight: 500; }
.nav-tabs .nav-link.active { color: var(--blue); background: none; border-bottom-color: var(--blue); }
.progress { background: var(--border); border-radius: 3px; }
.progress-bar { background: var(--blue); }
.modal-content { border: 1px solid var(--border); border-radius: var(--ds-radius-card); box-shadow: var(--ds-shadow-raised); }

/* ============================================================================
   PLATFORM SHELL — white top bar + light sidebar (prototype "app" TopNav)
   ========================================================================== */

.brand-navbar,
.navbar.bg-primary {
  min-height: 56px;
  padding: 0 24px;
  background: #ffffff !important;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
.brand-navbar .navbar-brand,
.brand-navbar .navbar-brand span { color: var(--navy) !important; font-weight: 700; }
.brand-navbar .text-white-50 { color: var(--gray-500) !important; }
.brand-navbar .btn-outline-light {
  --bs-btn-color: var(--gray-700);
  --bs-btn-border-color: var(--border-dark);
  --bs-btn-hover-color: var(--blue);
  --bs-btn-hover-bg: var(--blue-light);
  --bs-btn-hover-border-color: var(--blue);
}
.brand-navbar .btn-light {
  --bs-btn-bg: var(--blue);
  --bs-btn-color: #ffffff;
  --bs-btn-border-color: var(--blue);
  --bs-btn-hover-bg: var(--blue-hover);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-border-color: var(--blue-hover);
}
.brand-navbar .form-select { width: auto; min-width: 7rem; border-color: var(--border-dark); background-color: #ffffff; }

/* The existing logo asset is intentionally unchanged — container styling only. */
.wasla-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
  background: #ffffff;
  box-shadow: none;
}

.wasla-shell { background: #ffffff; }

.sidebar {
  min-height: calc(100vh - 56px);
  background: var(--gray-50);
  border-inline-end: 1px solid var(--border);
  backdrop-filter: none;
}
.sidebar .nav-link {
  display: flex;
  align-items: center;
  min-height: 38px;
  margin-bottom: 2px;
  padding: 8px 12px;
  border-radius: var(--ds-radius-btn);
  color: var(--gray-700);
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.15s, color 0.15s;
}
.sidebar .nav-link:hover { background: var(--blue-light); color: var(--blue); transform: none; }
.sidebar .nav-link.active {
  background: var(--blue-light);
  box-shadow: none;
  color: var(--blue);
  font-weight: 600;
}
[dir="rtl"] .sidebar .nav-link:hover,
[dir="rtl"] .sidebar .nav-link.active { transform: none; }
.sidebar .text-uppercase {
  color: var(--gray-400) !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.wasla-main { background: #ffffff; }

/* ============================================================================
   PROTOTYPE LAYOUT UTILITIES (UI/src/index.css)
   ========================================================================== */

.ctr        { width: 100%; max-width: 900px; margin: 0 auto; padding: 0 24px; }
.ctr-narrow { width: 100%; max-width: 680px; margin: 0 auto; padding: 0 24px; }
.ctr-wide   { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 24px; }
.page-body  { padding-top: 32px; padding-bottom: 32px; }

.two-col { display: flex; gap: 24px; align-items: flex-start; }
.grid-2  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

/* Page heading block used across platform screens */
.ds-page-head { margin-bottom: 20px; }
.ds-page-head h1 { margin: 0 0 4px; font-size: 24px; font-weight: 700; color: var(--gray-900); }
.ds-page-head p  { margin: 0; color: var(--gray-500); font-size: 14px; }
.ds-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Metric tile — prototype KPI treatment */
.ds-metric {
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-shadow-card);
}
.ds-metric small,
.ds-metric .metric-label { display: block; color: var(--gray-500); font-size: 13px; font-weight: 500; }
.ds-metric strong,
.ds-metric .metric-value { display: block; margin-top: 4px; color: var(--gray-900); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }

/* AI recommendation / insight callout (S02, S07, S09 pattern) */
.ds-ai-card {
  padding: 16px;
  background: var(--blue-light);
  border: 1px solid var(--blue-mid);
  border-radius: var(--ds-radius-card);
}
.ds-ai-card .ds-ai-title { color: var(--blue); font-size: 13px; font-weight: 700; }

/* Selectable option card (S04 route cards, S10 product types, S11 methods) */
.ds-choice {
  display: block;
  width: 100%;
  padding: 18px;
  background: #ffffff;
  border: 1.5px solid var(--border);
  border-radius: var(--ds-radius-card);
  text-align: start;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.ds-choice:hover { border-color: var(--blue); background: var(--blue-light); }
.ds-choice.selected { border-color: var(--blue); background: var(--blue-light); }

/* Product thumbnail (P01 catalog rows) */
.ds-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 8px;
  border: 1px solid var(--border);
  object-fit: cover;
  background: var(--gray-50);
  color: var(--gray-500);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
}
.ds-thumb-empty { background: var(--gray-100); }

/* Module navigation card (MerchantDashboard NAV_ITEMS grid) */
.ds-module { text-decoration: none; color: inherit; }
.ds-module:hover { color: inherit; }
.ds-module-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.ds-module-head strong { color: var(--navy); font-size: 15px; font-weight: 600; }
.ds-module-desc { display: block; color: var(--gray-500); font-size: 13px; line-height: 1.5; }

/* Progress stepper (S02/S04/S06 horizontal rail) */
.ds-stepper { display: flex; max-width: 720px; margin: 0 auto 28px; }
.ds-step { display: flex; align-items: flex-start; flex: 1; }
.ds-step-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--border-dark);
  color: var(--gray-400);
  font-size: 13px;
  font-weight: 700;
}
.ds-step.is-done .ds-step-mark,
.ds-step.is-active .ds-step-mark { background: var(--blue); border-color: var(--blue); color: #ffffff; }
.ds-step-label { margin-top: 6px; color: var(--gray-500); font-size: 12px; text-align: center; }
.ds-step.is-active .ds-step-label { color: var(--blue); font-weight: 600; }
.step-line { flex: 1; height: 2px; margin: 0 4px 20px; background: var(--border); }
.step-line.done { background: var(--blue); }
.ds-step-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 56px;
  text-decoration: none;
}
.ds-step-link:hover .ds-step-mark { border-color: var(--blue); color: var(--blue); }
.ds-step.is-done .ds-step-link:hover .ds-step-mark,
.ds-step.is-active .ds-step-link:hover .ds-step-mark { color: #ffffff; }

.ds-stepper-mobile { display: none; padding: 12px 0 20px; }
@media (max-width: 767px) {
  .ds-stepper-mobile { display: block; }
}

/* Landing hero (S01) */
.hero-section { padding: 80px 40px 60px; text-align: center; }
.hero-h1 { margin-bottom: 16px; color: var(--gray-900); font-size: 52px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.hero-p  { margin-bottom: 36px; color: var(--gray-600); font-size: 18px; }
.cta-row { display: flex; gap: 12px; justify-content: center; margin-bottom: 64px; }
.value-props { display: flex; gap: 48px; justify-content: center; }

/* ─── Responsive — mirrors the prototype breakpoints ─── */
@media (min-width: 768px) and (max-width: 1023px) {
  .ctr, .ctr-wide { padding: 0 20px; }
  .hero-h1 { font-size: 40px; }
  .value-props { gap: 32px; }
}

@media (max-width: 991.98px) {
  .sidebar { min-height: auto; border-inline-end: 0; border-bottom: 1px solid var(--border); }
  .sidebar nav { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem !important; }
  .sidebar .text-uppercase { grid-column: 1 / -1; margin-top: 0.85rem !important; }
}

@media (max-width: 767px) {
  .ctr, .ctr-narrow, .ctr-wide { padding: 0 16px; }
  .page-body { padding-top: 20px; padding-bottom: 20px; }
  .two-col { flex-direction: column; }
  .two-col > * { width: 100% !important; flex-shrink: unset !important; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .hero-section { padding: 48px 20px 40px; }
  .hero-h1 { font-size: 30px; }
  .hero-p { font-size: 15px; margin-bottom: 28px; }
  .cta-row { flex-direction: column; align-items: center; margin-bottom: 40px; }
  .value-props { flex-direction: column; gap: 24px; align-items: center; }
  .ds-stepper { display: none; }
}

@media (max-width: 479px) {
  .hero-h1 { font-size: 26px; }
  .grid-4 { grid-template-columns: 1fr; }
}

/* Accessibility floor — Docs/PROTOTYPE_SCENARIOS.pdf § Accessibility:
   "Touch targets: 44x44px minimum". Matches the prototype's own
   `button { min-height: 44px }` mobile rule in UI/src/index.css. */
@media (max-width: 767px) {
  .btn,
  button,
  .sidebar .nav-link,
  .form-control,
  .form-select { min-height: 44px; }
}

/* ============================================================================
   MERCHANT STOREFRONT THEME — driven by the merchant's own AI-chosen branding
   SCOPED. Buyer-facing merchant store only; never applied to platform UI.

   The merchant picks their storefront colour, font and corner style during
   onboarding, via the AI theme generator (UI/src/screens/S14ThemeGeneration.tsx —
   four AI-generated options plus a colour palette, font style and corner style,
   adopted in S13/S14). So the storefront has NO fixed palette of its own: every
   colour below reads from a CSS variable that `templates/storefront/base.html`
   fills from the tenant's `StoreBranding` row (primary/secondary/accent colour,
   font family, theme code).

   "Luxury Minimal" — the dark gold option in S14 — is therefore just one theme a
   merchant may choose for their own store. It is NOT adopted as a Wasla colour and
   is not hardcoded anywhere; per the owner directive gold appears only if a
   merchant selects it for their own storefront.

   The fallbacks are the S14 "Clean Commerce" option (white ground, blue primary),
   which is also the safe default for a store that has not been branded yet.
   ========================================================================== */

.storefront-theme {
  --sf-primary: var(--blue);
  --sf-ink: var(--gray-900);
  --sf-ground: #ffffff;
  --sf-surface: var(--gray-50);
  --sf-radius: var(--ds-radius-card);

  background: var(--sf-ground);
  color: var(--sf-ink);
  font-family: var(--brand-font, var(--ds-font));
}
.storefront-theme h1,
.storefront-theme h2,
.storefront-theme h3,
.storefront-theme h4 { color: var(--sf-ink); }
.storefront-theme a { color: var(--sf-primary); }
.storefront-theme a:hover { filter: brightness(0.88); }

.storefront-theme .card {
  background: var(--sf-surface);
  border-color: color-mix(in srgb, var(--sf-ink) 12%, transparent);
  border-radius: var(--sf-radius);
}

/* The store header carries the merchant's own colour, not the platform's. */
.storefront-theme .brand-navbar,
.storefront-theme .navbar.brand-navbar {
  background: var(--sf-ink) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--sf-primary) 35%, transparent);
}
.storefront-theme .brand-navbar .navbar-brand,
.storefront-theme .brand-navbar .navbar-brand span,
.storefront-theme .brand-navbar .nav-link { color: #ffffff !important; }
.storefront-theme .brand-navbar .navbar-brand:hover,
.storefront-theme .brand-navbar .nav-link:hover { color: var(--sf-primary) !important; }
.storefront-theme .brand-navbar .btn-outline-light {
  --bs-btn-color: #ffffff;
  --bs-btn-border-color: color-mix(in srgb, var(--sf-primary) 55%, transparent);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: var(--sf-primary);
  --bs-btn-hover-border-color: var(--sf-primary);
}
.storefront-theme .brand-navbar .form-select {
  background-color: rgba(255, 255, 255, 0.96);
  border-color: color-mix(in srgb, var(--sf-primary) 45%, transparent);
}

/* Buyer CTAs take the merchant's primary colour. */
.storefront-theme .btn-primary {
  --bs-btn-bg: var(--sf-primary);
  --bs-btn-border-color: var(--sf-primary);
  --bs-btn-hover-bg: var(--sf-primary);
  --bs-btn-hover-border-color: var(--sf-primary);
  --bs-btn-active-bg: var(--sf-primary);
}
.storefront-theme .btn-primary:hover { filter: brightness(0.9); }
.storefront-theme .btn-outline-primary {
  --bs-btn-color: var(--sf-ink);
  --bs-btn-border-color: var(--sf-primary);
  --bs-btn-hover-bg: var(--sf-primary);
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-border-color: var(--sf-primary);
}
.storefront-theme .badge.text-bg-primary {
  background-color: color-mix(in srgb, var(--sf-primary) 15%, transparent) !important;
  color: var(--sf-primary) !important;
}

/* ============================================================================
   LANDING HERO — S01 VISUAL LOCK
   UI/src/imports/pasted_text/visual-reference-lock.md § "S01 VISUAL LOCK":
   centred hero, large two-line headline, two CTAs, three value props, "large
   white/light background, subtle decorative background treatment".

   The shipped hero painted a saturated dark→blue gradient with white text, and
   used amber (rgba(245,158,11,…)) plus an orange #f97316 section eyebrow. Both
   break the approved system: the background must be light, and
   visual-system-correction.md § 5 reserves gold/amber for the merchant storefront
   theme — it is never a Wasla platform colour. Overridden here (this sheet loads
   after hero_banner.css) rather than by rewriting the shipped file, so the
   correction stays one reviewable block.
   ========================================================================== */

.wasla-hero {
  background:
    radial-gradient(circle at 85% 15%, var(--blue-light) 0%, transparent 48%),
    #ffffff !important;
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--gray-900) !important;
}
/* The two decorative circles are absolutely positioned with no z-index, so on a
   light ground they painted OVER the headline, CTAs and feature cards and washed
   them out. Push them behind content and lift the content above them. */
.wasla-hero::before,
.wasla-hero::after { z-index: 0; }
.wasla-hero::before { background: var(--blue-light) !important; opacity: 0.7; }
.wasla-hero::after  { background: var(--blue-mid) !important; opacity: 0.35; }
.wasla-hero > .container { position: relative; z-index: 1; }

.wasla-hero__eyebrow {
  background: var(--blue-light) !important;
  color: var(--blue) !important;
  font-weight: 600;
}
.wasla-hero__title { color: var(--gray-900) !important; letter-spacing: -0.02em; }
.wasla-hero__subtitle { color: var(--gray-600) !important; }

.wasla-hero__chip {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--gray-700) !important;
}
.wasla-hero__chip-dot { background: var(--blue) !important; }

/* CTA row: one solid blue primary + outline secondaries (S01 two-CTA pattern). */
.wasla-hero__cta .btn-light {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #ffffff !important;
}
.wasla-hero__cta .btn-light:hover {
  background: var(--blue-hover) !important;
  border-color: var(--blue-hover) !important;
}
.wasla-hero__cta .btn-outline-light {
  background: #ffffff !important;
  border-color: var(--border-dark) !important;
  color: var(--gray-700) !important;
}
.wasla-hero__cta .btn-outline-light:hover {
  border-color: var(--blue) !important;
  background: var(--blue-light) !important;
  color: var(--blue) !important;
}
.wasla-hero__cta .btn-link.text-white { color: var(--gray-500) !important; }
.wasla-hero__cta .btn-link.text-white:hover { color: var(--gray-700) !important; }

/* Feature cards inside the hero sit on the light surface now. */
.wasla-hero__feature {
  background: var(--gray-50) !important;
  border: 1px solid var(--border);
}
.wasla-hero__feature-title { color: var(--gray-900) !important; }
.wasla-hero__feature-desc  { color: var(--gray-600) !important; }

/* Section eyebrows: amber/orange → Wasla blue. */
.wasla-marketing__eyebrow { color: var(--blue) !important; }
.wasla-marketing__title,
.wasla-marketing__subtitle { color: var(--gray-900) !important; }

/* Decorative panels that mixed blue with amber. */
.wasla-hero__badge,
.wasla-how__media {
  background: linear-gradient(135deg, var(--blue-light), var(--blue-mid)) !important;
}

/* ============================================================================
   AI STUDIO — converted to the Wasla design system
   OWNER DIRECTIVE: gold is not adopted.

   `static/css/ai-studio.css` implements the superseded "AI Way" aesthetic — a dark
   navy shell (#071a2d) with metallic gold (--ai-gold #e4ba4a) actions and glows,
   described in Docs/AI_PROTOTYPE_VISUAL_SYSTEM_NOTES.md. That predates the approved
   React prototype. UI/src/imports/pasted_text/visual-system-correction.md is explicit:
   the AI Studio is merchant-platform UI, so it must use the Wasla design system, and
   "DO NOT use gold as a Wasla platform color."

   These rules load after ai-studio.css and convert the surface to light/blue without
   touching the shipped file or any of its markup.
   ========================================================================== */

.ai-prototype-shell {
  background: #ffffff !important;
  color: var(--gray-900) !important;
}
.ai-prototype-shell::before { display: none !important; }

.ai-eyebrow {
  color: var(--blue) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.ai-title    { color: var(--gray-900) !important; }
.ai-subtitle { color: var(--gray-500) !important; }

.ai-frame {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--ds-radius-card) !important;
  box-shadow: var(--ds-shadow-card) !important;
}
.ai-glow {
  border-color: var(--blue-mid) !important;
  box-shadow: var(--ds-shadow-card) !important;
}

.ai-nav {
  background: var(--gray-50) !important;
  border-inline-end: 1px solid var(--border) !important;
}
.ai-nav-link { color: var(--gray-700) !important; font-weight: 500; }
.ai-nav-link:hover,
.ai-nav-link.active {
  background: var(--blue-light) !important;
  color: var(--blue) !important;
  box-shadow: none !important;
}

.ai-insight {
  background: var(--blue-light) !important;
  border: 1px solid var(--blue-mid) !important;
  border-radius: var(--ds-radius-card);
  color: var(--gray-700) !important;
  padding: 14px 16px;
}
.ai-panel-title { color: var(--gray-900) !important; font-weight: 600; }

.ai-progress { background: var(--border) !important; }
.ai-progress > span { background: var(--blue) !important; }

.ai-product-row {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
}
.ai-product-tile {
  background: var(--gray-100) !important;
  border: 1px solid var(--border) !important;
  color: var(--gray-700) !important;
  box-shadow: none !important;
}
.ai-upload-zone { border: 1px dashed var(--border-dark) !important; }

.ai-chip {
  background: var(--blue-light) !important;
  color: var(--blue) !important;
}
.ai-score {
  border: 2px solid var(--blue) !important;
  color: var(--blue) !important;
}
.ai-source-pill {
  background: var(--gray-100) !important;
  color: var(--gray-600) !important;
  border: 1px solid var(--border) !important;
}
.ai-kpi {
  background: #ffffff !important;
  border: 1px solid var(--border) !important;
  color: var(--gray-900) !important;
}
.ai-funnel-stage { color: var(--gray-700) !important; border-color: var(--border) !important; }
.ai-supplier-table { color: var(--gray-700) !important; }
.ai-best-supplier { background: var(--blue-light) !important; }

/* Gold gradient CTA → Wasla blue primary. */
.ai-action-gold {
  background: var(--blue) !important;
  border: 0 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}
.ai-action-gold:hover { background: var(--blue-hover) !important; color: #ffffff !important; filter: none !important; }
.ai-action-outline {
  background: #ffffff !important;
  border: 1.5px solid var(--border-dark) !important;
  color: var(--gray-700) !important;
}
.ai-action-outline:hover {
  border-color: var(--blue) !important;
  background: var(--blue-light) !important;
  color: var(--blue) !important;
}

/* The studio's dark inline panels are overridden structurally where they are
   inline-styled in the template; these cover the class-driven ones. */
.ai-prototype-shell .text-secondary,
.ai-prototype-shell .text-secondary-emphasis { color: var(--gray-500) !important; }
.ai-prototype-shell .text-warning { color: var(--attention) !important; }

/* ai-studio.css also darkens the merchant sidebar whenever the studio is on screen:
     body:has(.ai-prototype-shell) .sidebar { background: #0b1a30; ... }
     body:has(.ai-prototype-shell) .sidebar .nav-link.active { background: gold gradient }
   That selector outranks a plain `.sidebar` rule, so the platform navigation kept its
   dark shell and a gold active item on /dashboard/ai/*. Matched here at equal
   specificity so the sidebar stays the same Wasla navigation on every page. */
body:has(.ai-prototype-shell) .sidebar {
  background: var(--gray-50) !important;
  border-inline-end: 1px solid var(--border) !important;
}
body:has(.ai-prototype-shell) .sidebar .text-muted { color: var(--gray-400) !important; }
body:has(.ai-prototype-shell) .sidebar .nav-link { color: var(--gray-700) !important; }
body:has(.ai-prototype-shell) .sidebar .nav-link:hover,
body:has(.ai-prototype-shell) .sidebar .nav-link.active {
  background: var(--blue-light) !important;
  color: var(--blue) !important;
  box-shadow: none !important;
}
body:has(.ai-prototype-shell) { background: #ffffff !important; }
body:has(.ai-prototype-shell) .wasla-main { background: #ffffff !important; }

/* ============================================================================
   MERCHANT DASHBOARD WORKSPACE — kept, re-skinned
   OWNER DIRECTIVE: the original workspace dashboard layout is preferred, so its
   structure in `templates/web/dashboard.html` and `static/css/dashboard-workspace.css`
   is retained exactly. Only its colour surface is brought onto the Wasla design system.

   Most of that sheet already reads --wasla-sky-* variables, which this file remaps to
   the prototype blue, so it converts on its own. What remains are hardcoded cyan tints
   (#f5fbff, #ecf8ff, #edfaff, #e7f7ff, #f0faff, #fbfdff) and cyan shadows; those are
   the rules below. No layout, spacing or markup is changed.
   ========================================================================== */

.workspace-frame {
  border-color: var(--border);
  border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-shadow-card);
}
.workspace-rail {
  background: var(--gray-50);
  border-inline-end: 1px solid var(--border);
}
.workspace-rail-mark {
  background: #ffffff;
  border: 1px solid var(--border);
  color: var(--gray-600);
}
.workspace-rail-mark.active {
  background: var(--blue);
  border-color: var(--blue);
  color: #ffffff;
  box-shadow: none;
}
.workspace-core { background: #ffffff; }
.workspace-right {
  background: var(--gray-50);
  border-inline-start: 1px solid var(--border);
}

.store-pulse {
  background: var(--blue-light);
  border: 1px solid var(--blue-mid);
  border-radius: var(--ds-radius-card);
}

.metric-tile {
  border: 1px solid var(--border);
  border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-shadow-card);
}
.metric-tile small { color: var(--gray-500); }
.metric-tile strong { color: var(--gray-900); }

.workspace-card {
  border: 1px solid var(--border);
  border-radius: var(--ds-radius-card);
}
.workspace-card-header { border-bottom: 1px solid var(--border); }
.workspace-card-header h3 { color: var(--gray-900); }

.action-callout {
  background: var(--blue-light);
  border: 1px solid var(--blue-mid);
  border-radius: var(--ds-radius-card);
}
.action-callout .eyebrow { color: var(--blue); }
.action-callout h3 { color: var(--gray-900); }
.action-callout p { color: var(--gray-600); }

.mini-funnel > div {
  background: var(--gray-50);
  border: 1px solid var(--border);
  color: var(--gray-700);
}

.workspace-list li { border-bottom: 1px solid var(--border); }
.workspace-dot { background: var(--blue); }
.workspace-list span { color: var(--gray-500); }

.recent-table th { color: var(--gray-500); }
.recent-table th,
.recent-table td { border-bottom: 1px solid var(--border); }
.product-avatar {
  background: var(--blue-light);
  color: var(--blue);
}

.insight-card {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--ds-radius-card);
}
.insight-card .insight-title { color: var(--blue); }
.insight-card p { color: var(--gray-600); }
.insight-score { color: var(--gray-900); }

/* ============================================================================
   LANDING PAGE — S01 structure
   Section rhythm, hero and card treatments ported from UI/src/screens/S01Landing.tsx.
   Colour is the established sky identity per the owner directive.
   ========================================================================== */

.ds-hero {
  position: relative;
  overflow: hidden;
  padding: 80px 24px 64px;
  text-align: center;
  background: linear-gradient(160deg, var(--blue-light) 0%, #ffffff 55%, var(--green-light) 100%);
}
.ds-hero-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }

.value-props { margin-top: 8px; }
.ds-vp { flex: 1; max-width: 220px; text-align: center; }
.ds-vp-icon { display: flex; justify-content: center; margin-bottom: 12px; }
.ds-vp-title { margin-bottom: 6px; color: var(--navy); font-size: 15px; font-weight: 600; }
.ds-vp-desc  { color: var(--gray-500); font-size: 13px; line-height: 1.5; }

.ds-section { padding: 72px 24px; background: #ffffff; }
.ds-section-muted { background: var(--gray-50); }
.ds-section-tint  { background: var(--blue-light); }
.ds-section-inner { max-width: 1100px; margin: 0 auto; }
.ds-section-head { margin-bottom: 48px; text-align: center; }
.ds-section-head h2 {
  margin: 12px 0;
  color: var(--gray-900);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.ds-section-head p { max-width: 520px; margin: 0 auto; color: var(--gray-600); font-size: 16px; }

.ds-feature { padding: 24px 20px; }
.ds-feature-title { margin-bottom: 8px; color: var(--navy); font-size: 15px; font-weight: 700; }
.ds-feature-desc  { color: var(--gray-500); font-size: 13px; line-height: 1.6; }

.ds-plan { position: relative; display: flex; flex-direction: column; padding: 28px 24px; }
.ds-plan.is-featured { border: 2px solid var(--blue); }
.ds-plan-badge {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  padding: 3px 12px;
  border-radius: var(--ds-radius-pill);
  background: var(--blue);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.ds-plan-name  { margin-bottom: 8px; color: var(--navy); font-size: 14px; font-weight: 700; }
.ds-plan-price { margin-bottom: 20px; color: var(--gray-900); font-size: 30px; font-weight: 900; }
.ds-plan-sub   { color: var(--gray-500); font-size: 13px; font-weight: 400; }
.ds-plan-features {
  flex: 1;
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ds-plan-features li { color: var(--gray-600); font-size: 13px; }
.ds-plan-features li::before { content: "✓"; color: var(--green); font-weight: 700; margin-inline-end: 8px; }

.ds-template { overflow: hidden; padding: 0; }
.ds-template-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  background: var(--gray-100);
}
.ds-template-swatch { width: 80px; height: 24px; border-radius: 4px; background: var(--blue); opacity: 0.9; }
.ds-template-body { padding: 16px 18px; }
.ds-template-name { margin-bottom: 4px; color: var(--gray-900); font-size: 14px; font-weight: 700; }
.ds-template-cat  { margin-bottom: 14px; color: var(--gray-500); font-size: 12px; }

.ds-cta-panel {
  padding: 32px 24px;
  text-align: center;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--ds-radius-card);
}
.ds-cta-panel h3 { margin-bottom: 8px; color: var(--gray-900); font-size: 20px; font-weight: 700; }
.ds-cta-panel p  { margin-bottom: 20px; color: var(--gray-500); font-size: 14px; }

@media (max-width: 767px) {
  .ds-hero { padding: 48px 20px 40px; }
  .ds-section { padding: 48px 20px; }
  .ds-section-head { margin-bottom: 32px; }
  .ds-section-head h2 { font-size: 26px; }
  .ds-vp { max-width: 100%; }
}

/* ── Auth screens — S02 composition (form + assistant card) ───────────────── */
.ds-auth { max-width: 940px; margin: 0 auto; padding: 24px 0 40px; }
.ds-auth-cols { display: flex; gap: 24px; align-items: flex-start; }
.ds-auth-card { flex: 1 1 auto; min-width: 0; }
.ds-auth-title { margin-bottom: 20px; color: var(--navy); font-size: 20px; font-weight: 700; }

.ds-auth-aside {
  flex: 0 0 250px;
  padding: 22px 20px;
  border-color: var(--blue-mid);
}
.ds-auth-aside-mark { display: flex; justify-content: center; margin-bottom: 14px; }
.ds-auth-aside-title {
  margin-bottom: 12px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}
.ds-auth-steps { margin: 0 0 14px; padding-inline-start: 18px; }
.ds-auth-steps li { margin-bottom: 8px; color: var(--gray-600); font-size: 13px; line-height: 1.5; }
.ds-auth-aside-note {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  color: var(--gray-500);
  font-size: 12px;
}

@media (max-width: 767px) {
  .ds-auth-cols { flex-direction: column; }
  .ds-auth-aside { flex: 1 1 auto; width: 100%; }
}

/* ── S02 Basic Information — reconstructed from UI/src/screens/S02BasicInfo.tsx ── */
.ds-s02 { max-width: 900px; }
.ds-s02-title { margin-bottom: 24px; color: var(--navy); font-size: 22px; font-weight: 700; }
.ds-s02-fields { display: flex; flex-direction: column; gap: 16px; }

.ds-s02-progress { margin: 16px 0 28px; }
.ds-s02-progress-track { height: 4px; border-radius: 2px; background: var(--border); }
.ds-s02-progress-fill { width: 25%; height: 100%; border-radius: 2px; background: var(--blue); }
.ds-s02-progress-text { margin-top: 4px; color: var(--gray-500); font-size: 12px; text-align: center; }

/* The stepper carries two lines here ("Step N" over its sublabel). */
.ds-s02 .ds-step-label { line-height: 1.35; }
.ds-s02 .ds-step-label b { font-weight: 700; }

/* Mobile number: prefix box welded to the input, one shared border. */
.ds-phone {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--border-dark);
  border-radius: var(--ds-radius-input);
}
.ds-phone:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.16); }
.ds-phone-prefix {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
  align-items: center;
  padding: 9px 12px;
  background: var(--gray-50);
  border-inline-end: 1px solid var(--border-dark);
  color: var(--gray-700);
  font-size: 13px;
  white-space: nowrap;
}
.ds-phone-flag { font-size: 18px; line-height: 1; }
.ds-phone input,
.ds-phone .form-control {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.ds-phone input:focus, .ds-phone .form-control:focus { border: none; box-shadow: none; }

/* Password reveal toggle sits inside the field, direction-aware. */
.ds-password { position: relative; }
.ds-password input { padding-inline-end: 38px; }
.ds-password-toggle {
  position: absolute;
  inset-inline-end: 10px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  min-height: unset;
  border: none;
  background: none;
  color: var(--gray-500);
  cursor: pointer;
}
.ds-password-toggle.is-on { color: var(--blue); }

/* Assistant card — 240px, tinted border, centred. */
.ds-s02-aside {
  flex-shrink: 0;
  width: 240px;
  padding: 24px;
  border-color: var(--blue-mid);
  text-align: center;
}
.ds-s02-avatar-wrap { display: flex; justify-content: center; margin-bottom: 16px; }
.ds-s02-avatar-rel { position: relative; }
/* The two "+" marks framing the disc (S02BasicInfo.tsx lines 108-109). Offsets are
   logical, so the pair mirrors with the page instead of drifting in Arabic. */
.ds-s02-spark { position: absolute; pointer-events: none; }
.ds-s02-spark-top { top: -2px; inset-inline-end: -2px; }
.ds-s02-spark-bottom { bottom: 2px; inset-inline-start: -4px; }
.ds-s02-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--blue-light);
  border: 2px solid var(--blue-mid);
}
.ds-s02-aside-text { margin-bottom: 16px; color: var(--gray-700); font-size: 14px; line-height: 1.5; }
.ds-s02-aside-text strong { color: var(--blue); }
.ds-s02-confirm.is-confirmed { opacity: 0.85; }

@media (max-width: 767px) {
  .ds-s02-aside { width: 100%; }
}

/* ── S03 OTP verification ─────────────────────────────────────────────────────
   Ported from UI/src/screens/S03OTPVerify.tsx, UI/src/components/OTPInput.tsx and
   UI/src/components/ProgressStepper.tsx, cross-checked against the rendered Figma Make
   application. Values are the approved ones, not approximations: 680px column, 26px
   title, 24px card padding, 10px radius, 16px grid gap, 52px boxes with a 1.5px border
   and 22px centred digits, 6px box gap.                                            */
.ds-otp { max-width: 680px; }
.ds-otp-head { margin: 32px 0; text-align: center; }
.ds-otp-head h2 { margin-bottom: 8px; color: var(--gray-900); font-size: 26px; font-weight: 700; }
.ds-otp-head p { margin: 0; color: var(--gray-500); font-size: 14px; }

.ds-otp-card { padding: 24px; border-radius: 10px; }
.ds-otp-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--navy);
  font-size: 15px;
  font-weight: 600;
}
.ds-otp-target {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  color: var(--gray-700);
  font-size: 14px;
}
.ds-otp-flag { font-size: 16px; line-height: 1; }
.ds-otp-hint { margin-bottom: 12px; color: var(--gray-500); font-size: 12px; }

/* Six single-digit boxes: 52px tall, 1.5px border, 22px centred text (OTPInput.tsx). */
.ds-otp-boxes { display: flex; gap: 6px; }
.ds-otp-box {
  flex: 1;
  min-width: 0;
  max-width: 48px;
  height: 52px;
  padding: 0;
  border: 1.5px solid var(--border-dark);
  border-radius: 8px;
  background: #ffffff;
  color: var(--navy);
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ds-otp-box:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.ds-otp-box.is-error { border-color: var(--red); }
.ds-otp-box.is-error:focus { border-color: var(--red); box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1); }

/* Verified: OTPInput's `disabled` look — grey ground, no interaction. */
.ds-otp-boxes-done { pointer-events: none; }
.ds-otp-box.is-filled {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  color: var(--gray-400);
}

/* Status row: the Verified pill, or the resend countdown / link. */
.ds-otp-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  margin-bottom: 8px;
  min-height: 22px;
}
.ds-otp-resend-wait { color: var(--gray-500); font-size: 12px; }
.ds-otp-resend-wait b { color: var(--gray-700); }

.ds-otp-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.ds-otp-link:hover { color: var(--blue-hover); text-decoration: underline; }
a.ds-otp-link { display: inline-block; font-weight: 400; }

.ds-otp-msg { margin: 8px 0 0; font-size: 12px; }
.ds-otp-msg.is-error { color: var(--red); }
.ds-otp-msg.is-info { color: var(--blue); }

/* Divider + reassurance note pinned to the foot of each card. */
.ds-otp-foot {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-100);
  color: var(--gray-400);
  font-size: 11px;
}

/* Directional glyphs. The approved screen is LTR-only, so its literal ← / → would point
   the wrong way in Arabic; mirroring them keeps "back" pointing back. */
[dir="rtl"] .ds-dir-arrow { display: inline-block; transform: scaleX(-1); }

/* Approved rail labels sit on one line (ProgressStepper.tsx whiteSpace: nowrap). */
.ds-otp .ds-step-label { white-space: nowrap; }

.ds-otp-gate {
  margin-bottom: 12px;
  color: var(--gray-500);
  font-size: 13px;
  text-align: center;
}

/* Condensed rail below 768px — ProgressStepper.tsx MobileStepper. */
.ds-stepper-mobile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ds-stepper-mobile-step { color: var(--blue); font-size: 13px; font-weight: 700; }
.ds-stepper-mobile-label { color: var(--gray-500); font-size: 13px; }
.ds-stepper-mobile-track { height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.ds-stepper-mobile-fill { width: 100%; height: 100%; border-radius: 3px; background: var(--blue); }

/* ── S03 dual-channel layout ─────────────────────────────────────────────── */
.otp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.ds-otp-form { margin: 0; }
/* Both cards end level regardless of which controls each channel's policy shows. */
.ds-otp-card { display: flex; flex-direction: column; }
.ds-otp-foot { margin-top: auto; }
.ds-otp-continue { padding: 14px 24px; font-size: 15px; }
.ds-otp-continue:disabled { opacity: 0.45; cursor: not-allowed; }

/* Verified pill — UI/src/index.css .badge-green. Geometry stated here so the pill does
   not depend on Bootstrap's .badge; the design-system rule above supplies the colours. */
.ds-otp-card .badge-green {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

/* In-screen nav row (Previous + primary CTA) — UI/src/index.css. Mirrors under RTL by
   flex order, so Previous stays at the reading start and Continue at the reading end. */
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 0;
  border: none;
  background: none;
  color: var(--gray-500);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
.btn-ghost:hover { color: var(--gray-700); }

@media (max-width: 767px) {
  .ds-otp-box { height: 46px; font-size: 19px; }
  .ds-otp-boxes { gap: 4px; }
  .otp-grid { grid-template-columns: 1fr; }
  .nav-row { flex-direction: column-reverse; gap: 8px; }
  .nav-row > * { width: 100%; }
  .nav-row .btn-ghost, .nav-row .ds-otp-continue { width: 100%; justify-content: center; }
}