/* =============================================================================
   SME Lebanon v2 — design system
   -----------------------------------------------------------------------------
   Visual language extracted from the original SME admin source CSS:
     - Navy 214 28% 35% as the structural primary (chrome, body type, headings)
     - SME-red 0 78% 36% as the iconic ACCENT — used selectively for the
       brand badge, primary CTA, errors, "live" emphasis. Withholding red for
       interaction makes it land harder when it shows up.
     - Inter for body, Plus Jakarta Sans for display (loaded by index.php).
     - Gradient buttons + optional shine sweep on hover for the hero CTA.
     - Animated nav-link underline (scaleX from 0 to 1).
     - Subtle hover-lifts (translateY -2px) with soft layered shadows.
     - Fade-in / slide-down entrances; pulse-dot for active nav.
     - prefers-reduced-motion respected at the bottom.

   File is organized top-down: tokens → reset → layout → components → animations.
   Edit live; no build step.
   ============================================================================= */

/* ---------- DESIGN TOKENS --------------------------------------------------- */
:root {
  /* Navy ramp — primary (structural) */
  --primary:        214 28% 35%;
  --primary-50:     214 28% 97%;
  --primary-100:    214 28% 92%;
  --primary-200:    214 28% 82%;
  --primary-400:    214 28% 55%;
  --primary-500:    214 28% 42%;
  --primary-600:    214 28% 32%;
  --primary-700:    214 28% 25%;
  --primary-800:    214 28% 18%;
  --primary-900:    214 28% 12%;

  /* Red ramp — accent (SME brand) */
  --accent:         0 78% 36%;
  --accent-50:      0 78% 97%;
  --accent-100:     0 78% 92%;
  --accent-200:     0 78% 85%;
  --accent-500:     0 78% 48%;
  --accent-600:     0 78% 42%;
  --accent-700:     0 78% 36%;
  --accent-800:     0 78% 28%;
  --accent-900:     0 78% 22%;

  /* Neutrals */
  --background:     210 20% 98%;
  --foreground:     214 25% 14%;
  --muted:          214 20% 96%;
  --muted-fg:       214 16% 47%;
  --border:         214 20% 88%;
  --input:          214 20% 82%;

  /* Status — kept on a hue scale that pairs well with navy */
  --success-bg:     142 76% 95%;
  --success-fg:     142 71% 28%;
  --warning-bg:     38 92% 92%;
  --warning-fg:     32 81% 29%;
  --info-bg:        214 95% 93%;
  --info-fg:        214 84% 31%;
  --danger-bg:      0 78% 96%;
  --danger-fg:      0 70% 35%;

  /* Geometry */
  --radius-sm:      0.375rem;
  --radius:         0.5rem;
  --radius-md:      0.625rem;
  --radius-lg:      0.875rem;
  --radius-xl:      1.125rem;

  /* Shadow ramps — soft, layered, never heavy */
  --shadow-sm:      0 1px 2px rgba(15,23,42,.05);
  --shadow:         0 1px 3px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md:      0 4px 8px rgba(15,23,42,.07), 0 2px 4px rgba(15,23,42,.04);
  --shadow-lg:      0 10px 20px rgba(15,23,42,.1), 0 4px 8px rgba(15,23,42,.04);
  --shadow-xl:      0 20px 40px rgba(15,23,42,.12), 0 8px 16px rgba(15,23,42,.05);

  /* Type */
  --font-body:      'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display:   'Plus Jakarta Sans', 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Brand gradient — used by the SME badge and primary CTA */
  --grad-accent:    linear-gradient(135deg, hsl(0 78% 44%) 0%, hsl(0 78% 30%) 100%);
  --grad-primary:   linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--primary-700)) 100%);

  /* Legacy shim — older inline styles in admin pages reference --primary
     as a flat color expecting #b30000. Provide a flat alias. */
  --primary-flat:   hsl(var(--accent));
}

/* ---------- RESET + BASE ---------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: hsl(var(--primary-700));
  letter-spacing: -0.015em;
  margin: 0;
  font-weight: 700;
}

a { color: hsl(var(--accent)); text-decoration: none; }
a:hover { color: hsl(var(--accent-800)); text-decoration: underline; text-underline-offset: 2px; }

::selection { background: hsl(var(--accent) / 0.18); color: hsl(var(--accent-800)); }

button { font-family: inherit; }

.hidden { display: none !important; }

/* ---------- PAGE LAYOUT ----------------------------------------------------- */
.page-wrap {
  min-height: 100vh;
  background:
    radial-gradient(1200px 600px at 100% -10%, hsl(0 78% 50% / .06), transparent 60%),
    radial-gradient(900px 500px at 0% 100%, hsl(214 60% 50% / .05), transparent 50%),
    hsl(var(--background));
  padding: 28px 16px 48px;
}

.container {
  max-width: 880px;
  margin: 0 auto;
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  animation: sme-fade-in 0.35s ease-out both;
}

/* ---------- HEADER + ICONIC SME BADGE -------------------------------------- */
.header {
  background: linear-gradient(135deg, hsl(var(--primary-800)) 0%, hsl(var(--primary-900)) 100%);
  color: #fff;
  padding: 28px 32px;
  position: relative;
  overflow: hidden;
}
.header::before {
  /* Soft red corner glow — reinforces the brand without dominating */
  content: '';
  position: absolute;
  top: -40%; right: -10%;
  width: 380px; height: 380px;
  background: radial-gradient(circle, hsl(0 78% 50% / .25), transparent 70%);
  pointer-events: none;
}
.header-top {
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
}
.header-top > div:nth-child(2) { flex: 1; }

/* ============================================================
   BRAND MARK — five standard sizes, image-logo OR text fallback
   ============================================================
   Used everywhere a logo appears: wizard header, success page,
   admin nav/topbar/login, form PDF, error pages. brand_html()
   in functions.php emits one of these shapes depending on
   whether an admin has uploaded a custom logo.
*/
.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
  position: relative;
}
.brand-mark img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  /* No max-height needed — the wrapper has fixed height */
}

/* Text-mark fallback — gradient block that mimics the original SME logo */
.brand-mark--text {
  background: var(--grad-accent);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.5px;
  border-radius: var(--radius-md);
  box-shadow:
    0 8px 20px hsl(0 78% 30% / .35),
    inset 0 1px 0 hsl(0 78% 70% / .35);
  text-align: center;
}
.brand-mark--text::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--radius-md) - 1px);
  background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 35%);
  pointer-events: none;
}

/* Five standard sizes. Width auto-sizes for IMG logos via aspect ratio;
   text mark uses a min-width-equals-height for a balanced square block. */
.brand-mark--xs { height: 24px; min-width: 24px; }
.brand-mark--sm { height: 40px; min-width: 40px; }
.brand-mark--md { height: 56px; min-width: 56px; }
.brand-mark--lg { height: 80px; min-width: 80px; }
.brand-mark--xl { height: 120px; min-width: 120px; }

/* Responsive shrink — on small phones, the medium mark in the wizard
   header is too dominant. Shrink one tier per breakpoint so the header
   text gets room. The image variant scales naturally via height-locked
   container; the text-mark font-size is also stepped down below. */
@media (max-width: 640px) {
  .brand-mark--md { height: 48px; min-width: 48px; }
  .brand-mark--lg { height: 64px; min-width: 64px; }
  .brand-mark--md.brand-mark--text { font-size: 16px; padding: 0 12px; }
  .brand-mark--lg.brand-mark--text { font-size: 22px; padding: 0 16px; }
}
@media (max-width: 480px) {
  .brand-mark--md { height: 42px; min-width: 42px; }
  .brand-mark--md.brand-mark--text { font-size: 14px; padding: 0 10px; }
}
@media (max-width: 360px) {
  .brand-mark--md { height: 38px; min-width: 38px; }
  .brand-mark--md.brand-mark--text { font-size: 13px; padding: 0 8px; }
}

/* Text-mark font sizes per size — tuned by eye for readable letterforms */
.brand-mark--xs.brand-mark--text { font-size: 11px;  padding: 0 6px;  border-radius: 4px; }
.brand-mark--sm.brand-mark--text { font-size: 14px;  padding: 0 10px; }
.brand-mark--md.brand-mark--text { font-size: 18px;  padding: 0 14px; }
.brand-mark--lg.brand-mark--text { font-size: 26px;  padding: 0 18px; }
.brand-mark--xl.brand-mark--text { font-size: 38px;  padding: 0 24px; }

/* Backwards-compat: legacy .brand class still resolves to the md text-mark.
   Old templates pre-v2.18 use <div class="brand">SME</div>; this keeps them
   rendering identically until they're migrated. */
.brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  height: 56px;
  min-width: 56px;
  background: var(--grad-accent);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.5px;
  border-radius: var(--radius-md);
  padding: 0 14px;
  box-shadow:
    0 8px 20px hsl(0 78% 30% / .35),
    inset 0 1px 0 hsl(0 78% 70% / .35);
}
.brand::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--radius-md) - 1px);
  background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 35%);
  pointer-events: none;
}

.title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  color: #fff;
  letter-spacing: -0.01em;
}
.subtitle {
  font-size: 13px;
  color: hsl(214 28% 80%);
  margin-top: 2px;
}

/* ---------- SESSION WARNING (R3) ----------------------------------------- */
.session-warning {
  margin: 0;
  padding: 12px 24px;
  background: hsl(var(--warning-bg));
  border-bottom: 1px solid hsl(38 92% 80%);
  color: hsl(var(--warning-fg));
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.session-warning.is-critical {
  background: hsl(var(--danger-bg));
  border-bottom-color: hsl(var(--accent-200));
  color: hsl(var(--danger-fg));
}
.session-warning .session-warning-icon {
  font-size: 16px;
}
.session-warning button {
  margin-left: auto;
  padding: 6px 14px;
  background: hsl(var(--primary));
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.session-warning button:hover { background: hsl(var(--primary-700)); }

/* ---------- WIZARD STEP BAR ------------------------------------------------- */
.wizard-bar {
  background: #fff;
  padding: 22px 32px 8px;
  border-bottom: 1px solid hsl(var(--border));
}
.wizard-progress {
  height: 4px;
  background: hsl(var(--muted));
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 16px;
}
.wizard-progress-fill {
  height: 100%;
  width: 0;
  background: var(--grad-accent);
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(.4,0,.2,1);
}
.wizard-steps {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
}
.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 11px;
  color: hsl(var(--muted-fg));
  flex: 1;
  min-width: 0;
  transition: color 0.2s;
  gap: 6px;
}
/* The circle that holds either the icon (default) or the number (small
   screens). num is positioned over the icon and only shown when CSS hides
   the icon — keeps the layout single-element and accessible. */
.wizard-step .step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: hsl(var(--muted));
  color: hsl(var(--muted-fg));
  border: 2px solid transparent;
  transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s, box-shadow 0.25s;
  flex-shrink: 0;
}
.wizard-step .step-icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}
.wizard-step .num {
  /* Hidden by default — the icon is the primary visual. Becomes visible on
     small phones (under 480px) where icons would be too cluttered. */
  display: none;
}
.wizard-step .label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 500;
  line-height: 1.2;
}
.wizard-step .label .lbl-ar {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: hsl(var(--muted-fg));
  opacity: 0.85;
  font-family: 'Tajawal', system-ui, sans-serif;
}

/* Active state — gradient + pulse */
.wizard-step.is-active .step-icon {
  background: var(--grad-accent);
  color: #fff;
  border-color: hsl(0 78% 88%);
  transform: scale(1.08);
  box-shadow: 0 4px 14px hsl(0 78% 36% / .35);
}
.wizard-step.is-active .label .lbl-en {
  color: hsl(var(--accent-800));
  font-weight: 700;
}
.wizard-step.is-active .label .lbl-ar {
  color: hsl(var(--accent-700));
  opacity: 1;
}

/* Complete state — fill + checkmark replaces icon */
.wizard-step.is-complete .step-icon {
  background: hsl(var(--primary));
  color: #fff;
}
.wizard-step.is-complete .step-icon svg { display: none; }
.wizard-step.is-complete .step-icon::after {
  content: '✓';
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

/* On small phones the labels truncate to 'P...' / 'S...' which reads worse
   than no label at all. Drop them entirely under 480px and let the SVG
   icons + active step's panel heading carry the wayfinding. The active
   step's icon stays slightly enlarged so the user can still see where
   they are at a glance. */
@media (max-width: 480px) {
  .wizard-step .label { display: none; }
  .wizard-step .step-icon { width: 38px; height: 38px; }
  .wizard-step .step-icon svg { width: 22px; height: 22px; }
  .wizard-bar { padding: 16px 14px 12px; }
  .wizard-steps { gap: 4px; }
}
@media (max-width: 360px) {
  /* Squeeze further on entry-level phones */
  .wizard-step .step-icon { width: 32px; height: 32px; }
  .wizard-step .step-icon svg { width: 18px; height: 18px; }
}

/* ---------- PANELS (each step body) ---------------------------------------- */
.panel {
  display: none;
  padding: 32px;
  animation: sme-fade-in 0.3s ease-out both;
}
.panel.active { display: block; }

.panel h2 {
  font-size: 22px;
  font-weight: 700;
  color: hsl(var(--primary-800));
  margin-bottom: 4px;
}
.panel .help {
  color: hsl(var(--muted-fg));
  font-size: 13px;
  margin-bottom: 20px;
}

/* ---------- FORM GRID + FIELDS --------------------------------------------- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px 14px;
  align-items: start;  /* prevent stretched cards from forcing equal heights */
}
.col-12 { grid-column: span 12; }
.col-6  { grid-column: span 6;  }
.col-4  { grid-column: span 4;  }
.col-3  { grid-column: span 3;  }

/* Tablet: collapse 4-col rows to 2-col, keep 6-col side-by-side. Without this,
   fields like Building/Floor/Property/Section get squashed below ~900px. */
@media (max-width: 1024px) {
  .col-3 { grid-column: span 6; }
  .col-4 { grid-column: span 6; }
}
/* Phone: everything collapses to single column for breathing room. */
@media (max-width: 640px) {
  .col-3, .col-4, .col-6 { grid-column: span 12; }
  .grid { gap: 12px; }
}

.field {
  display: flex;
  flex-direction: column;
  /* Lock label-to-input distance so labels of varying length don't misalign
     inputs in adjacent grid cells. Fields with multi-line bilingual labels
     stay one row taller; this is by design — alternative is hiding the AR
     label which we don't want. */
  min-width: 0;  /* prevent grid blow-out from overflowing input content */
}
.field label {
  font-size: 12px;
  font-weight: 600;
  color: hsl(var(--primary-700));
  margin-bottom: 6px;
  letter-spacing: 0.1px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  line-height: 1.3;
  min-height: 18px;
}
.field label [lang="ar"] {
  font-weight: 500;
  color: hsl(var(--muted-fg));
  font-size: 11px;
}

.field input, .field select, .field textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: hsl(var(--foreground));
  background: #fff;
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius-md);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  appearance: none;
  -webkit-appearance: none;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.18);
}
.field input[readonly] {
  background: hsl(var(--muted));
  color: hsl(var(--muted-fg));
  cursor: not-allowed;
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: hsl(var(--accent));
  box-shadow: 0 0 0 3px hsl(var(--accent) / 0.15);
}
.err-msg {
  display: none;
  color: hsl(var(--accent-800));
  font-size: 12px;
  margin-top: 4px;
  font-weight: 500;
}
.field.is-invalid .err-msg { display: block; }

/* Native select carot */
.field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* Inline confidence/badge chips that sit beside labels */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 8px;
}
.badge-warn  { background: hsl(var(--warning-bg)); color: hsl(var(--warning-fg)); }

/* ---------- CHOICE GRID (Yes/No / Have-landline / Customer-type buttons) ---- */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin: 8px 0;
}
.choice-btn {
  background: #fff;
  border: 2px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  padding: 22px 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  text-align: center;
  font-family: inherit;
  transition: transform 0.18s ease, border-color 0.18s, background 0.18s, box-shadow 0.18s;
  color: hsl(var(--primary-700));
}
.choice-btn .ch-en { font-size: 16px; font-weight: 700; }
.choice-btn .ch-ar { font-size: 13px; color: hsl(var(--muted-fg)); }
.choice-btn:hover {
  border-color: hsl(var(--primary));
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.choice-btn.is-selected {
  background: hsl(var(--accent-50));
  border-color: hsl(var(--accent));
  box-shadow: 0 6px 20px hsl(0 78% 36% / .15);
}
.choice-btn.is-selected .ch-en { color: hsl(var(--accent-800)); }

/* ---------- BUTTON SYSTEM --------------------------------------------------- */
/* Default = ghost-ish secondary. Use .btn-primary for navy-gradient action,
   accent through the gradient + shine for hero submit. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  background: #fff;
  color: hsl(var(--primary-700));
  border: 1.5px solid hsl(var(--border));
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  user-select: none;
  transition: transform .18s cubic-bezier(.4,0,.2,1),
              box-shadow .18s,
              background .18s,
              border-color .18s,
              color .18s,
              filter .18s;
}
.btn:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  border-color: hsl(var(--primary-400));
}
.btn:not(:disabled):active { transform: translateY(0); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn:focus-visible {
  outline: 3px solid hsl(var(--primary) / 0.3);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--grad-accent);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 20px hsl(0 78% 36% / .28),
              inset 0 1px 0 hsl(0 78% 70% / .25);
}
.btn-primary:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px hsl(0 78% 36% / .35),
              inset 0 1px 0 hsl(0 78% 70% / .25);
  filter: brightness(1.06);
  border-color: transparent;
}
.btn-primary:focus-visible { outline-color: hsl(var(--accent) / 0.4); }

/* Shine sweep — used on the hero submit + 'Check feasibility' so the eye
   knows where to land. Opt-in via .btn-shine. Auto-applied to submit. */
.btn-primary.btn-large::before,
.btn-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: skewX(-20deg);
  transition: left 0.7s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.btn-primary.btn-large:hover::before,
.btn-shine:hover::before { left: 130%; }

.btn-large { padding: 14px 26px; font-size: 15px; border-radius: var(--radius-md); }

/* Outline / ghost variant — used for secondary actions (Cancel, Try again) */
.btn-ghost {
  background: transparent;
  color: hsl(var(--primary));
  border: 2px solid hsl(var(--primary));
}
.btn-ghost:not(:disabled):hover {
  background: hsl(var(--primary));
  color: #fff;
  border-color: hsl(var(--primary));
}

/* ---------- WIZARD NAV (Prev / Next bottom bar) ---------------------------- */
.wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 18px 32px;
  background: hsl(var(--muted));
  border-top: 1px solid hsl(var(--border));
}
.wizard-nav .btn {
  /* Prevent button text overflow on small phones with bilingual labels */
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  min-width: 0;
}
@media (max-width: 480px) {
  .wizard-nav { padding: 14px 16px; gap: 8px; }
  .wizard-nav .btn { padding: 10px 12px; font-size: 13px; flex: 1 1 0; }
  .wizard-nav .btn-large { font-size: 14px; }
}

/* ---------- BANNERS --------------------------------------------------------- */
.banner {
  padding: 14px 18px;
  border-radius: var(--radius-lg);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 4px solid transparent;
  background: hsl(var(--info-bg));
  color: hsl(var(--info-fg));
}
.banner.info     { background: hsl(var(--info-bg));    color: hsl(var(--info-fg));    border-left-color: hsl(var(--info-fg)); }
.banner.success  { background: hsl(var(--success-bg)); color: hsl(var(--success-fg)); border-left-color: hsl(var(--success-fg)); }
.banner.warn     { background: hsl(var(--warning-bg)); color: hsl(var(--warning-fg)); border-left-color: hsl(var(--warning-fg)); }
.banner.error    { background: hsl(var(--danger-bg));  color: hsl(var(--danger-fg));  border-left-color: hsl(var(--danger-fg)); }
.banner b { color: inherit; }

/* ---------- PLAN CARDS (Step 5) -------------------------------------------- */
.plans-banner {
  font-size: 13px;
  color: hsl(var(--muted-fg));
  font-weight: 500;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: hsl(var(--muted));
  border-radius: var(--radius);
  border-left: 3px solid hsl(var(--primary-200));
}
/* Plan cards arranged in a responsive grid. The minmax floor (160px) is
   chosen so two cards always fit side-by-side on small phones (~340px
   viewport: 160+160+12gap = 332px, well under the 340px viewport even
   with panel padding squeezed by the mobile rules below). On wider
   screens, auto-fit packs more cards per row.
   Explicit breakpoints below override the auto-fit behavior with
   prescribed column counts so the layout is predictable. */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  /* Allow flex/grid children to shrink below their intrinsic content
     width. Without this, long Arabic plan names or formatted prices
     would push tracks wider than the minmax floor and the grid would
     fall back to a single column even when there's horizontal room. */
  min-width: 0;
}
.plan-grid > * { min-width: 0; }

/* Wide screens: enforce 3 columns so cards don't grow uncomfortably wide. */
@media (min-width: 900px) {
  .plan-grid { grid-template-columns: repeat(3, 1fr); }
}
/* Tablets and most phones: 2 columns side-by-side. */
@media (max-width: 899px) and (min-width: 480px) {
  .plan-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Small phones: 2 columns with tighter gap. Below 360px (genuinely
   narrow devices like older iPhones in landscape splits), the
   single-column fallback at the top of the cascade still applies. */
@media (max-width: 479px) {
  .plan-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 339px) {
  .plan-grid { grid-template-columns: 1fr; }
}
.plan {
  position: relative;
  background: #fff;
  border: 1.5px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  padding: 20px 18px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}
.plan::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(.4,0,.2,1);
}
.plan:hover {
  transform: translateY(-2px);
  border-color: hsl(var(--primary-400));
  box-shadow: var(--shadow-md);
}
.plan:hover::before { transform: scaleX(1); }
.plan.is-selected {
  border-color: hsl(var(--accent));
  background: hsl(var(--accent-50));
  box-shadow: 0 8px 24px hsl(0 78% 36% / .15);
}
.plan.is-selected::before { transform: scaleX(1); }

.plan-badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px 9px;
  background: hsl(var(--primary-100));
  color: hsl(var(--primary-700));
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.plan-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: hsl(var(--primary-800));
  margin-top: 4px;
}
.plan-sub {
  font-size: 11px;
  color: hsl(var(--muted-fg));
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.plan-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: hsl(var(--accent-800));
  margin: 6px 0 4px;
}
.plan-note {
  font-size: 12px;
  color: hsl(var(--muted-fg));
  line-height: 1.45;
}

/* Mobile: tighten card chrome so two columns fit comfortably on phones.
   The price line is the widest element and the most likely to push
   cards out of the column — overflow-wrap lets it break onto two lines
   instead of forcing the track wider. */
@media (max-width: 640px) {
  .plan {
    padding: 14px 12px;
    gap: 3px;
  }
  .plan-name      { font-size: 14px; }
  .plan-price     { font-size: 15px; margin: 4px 0 2px; }
  .plan-note      { font-size: 11px; line-height: 1.4; }
  .plan-badge     { font-size: 10px; padding: 2px 7px; }
  .plan-sub       { font-size: 10px; }
  /* Allow long prices/names to wrap rather than overflow the card. */
  .plan-name, .plan-price, .plan-note { overflow-wrap: anywhere; word-break: break-word; }
}
/* Step 5 needs more horizontal room on phones than other steps, since
   it shows 2 cards side-by-side. Tighter panel padding gives back ~20px
   per side to the grid. */
@media (max-width: 640px) {
  .panel { padding: 24px 16px; }
}
@media (max-width: 479px) {
  .panel { padding: 20px 12px; }
}

/* ---------- ADDON GRID (Step 6) --------------------------------------------
   Mirrors the .plan-grid responsive pattern so step 5 and step 6 feel
   consistent. Same minmax floor + breakpoint cascade so add-ons pack
   the same number of columns at each viewport size as the plans do.
   --------------------------------------------------------------------------- */
.addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
  min-width: 0;
}
.addon-grid > * { min-width: 0; }

@media (min-width: 900px) {
  .addon-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 899px) and (min-width: 480px) {
  .addon-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px) {
  .addon-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
@media (max-width: 339px) {
  .addon-grid { grid-template-columns: 1fr; }
}
.addon {
  background: #fff;
  border: 1.5px solid hsl(var(--border));
  border-radius: var(--radius-md);
  padding: 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform .18s, border-color .18s, box-shadow .18s, background .18s;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.addon:hover {
  transform: translateY(-1px);
  border-color: hsl(var(--primary-400));
  box-shadow: var(--shadow);
}
.addon.is-selected {
  background: hsl(var(--accent-50));
  border-color: hsl(var(--accent));
}
.addon-name { font-weight: 700; font-size: 14px; color: hsl(var(--primary-800)); }
.addon-name-ar { font-size: 12px; color: hsl(var(--muted-fg)); direction: rtl; }
.addon-desc { font-size: 12px; color: hsl(var(--muted-fg)); margin: 4px 0; line-height: 1.4; }
.addon-price { font-weight: 700; color: hsl(var(--accent-800)); font-size: 13px; }

/* Mobile shrink for add-on cards — same pattern as .plan above. */
@media (max-width: 640px) {
  .addon {
    padding: 11px 10px;
    gap: 2px;
  }
  .addon-name    { font-size: 13px; }
  .addon-name-ar { font-size: 11px; }
  .addon-desc    { font-size: 11px; margin: 3px 0; }
  .addon-price   { font-size: 12px; }
  .addon-name, .addon-desc, .addon-price { overflow-wrap: anywhere; word-break: break-word; }
}

/* ---------- TOTALS BOX ----------------------------------------------------- */
.totals {
  background: hsl(var(--muted));
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-top: 14px;
  border: 1px solid hsl(var(--border));
}
.totals-row {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  font-size: 14px;
  color: hsl(var(--foreground));
}
.totals-row.subtotal {
  border-top: 1px solid hsl(var(--border));
  margin-top: 4px;
  padding-top: 12px;
  font-weight: 600;
}
.totals-row.total {
  border-top: 2px solid hsl(var(--primary));
  margin-top: 4px;
  padding-top: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: hsl(var(--primary-800));
}

/* ---------- USD PRICE LABEL (red, inline) ---------------------------------- */
.price-usd {
  display: inline-block;
  margin-left: 6px;
  color: hsl(var(--accent));
  font-size: 0.78em;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.2px;
}

/* ---------- INSTALLATION FEE NOTE ------------------------------------------ */
.install-note {
  margin-top: 18px;
  padding: 16px 20px;
  background: hsl(var(--warning-bg));
  border: 1px solid hsl(38 92% 80%);
  border-left: 4px solid hsl(38 92% 50%);
  border-radius: var(--radius-lg);
  color: hsl(var(--warning-fg));
  font-size: 13px;
  line-height: 1.55;
}
.install-note:empty { display: none; }
.install-note-head {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: hsl(32 81% 35%);
  margin-bottom: 6px;
}
.install-note-amount {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: hsl(var(--primary-800));
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
.install-note-amount .price-usd { font-size: 0.7em; }
.install-note-text { margin-top: 4px; white-space: pre-line; }
.install-note-text[dir="rtl"] { text-align: right; margin-top: 6px; white-space: pre-line; font-size: 13px; }

/* ---------- UPLOAD CARDS (Step 2) ------------------------------------------ */
.upload-card {
  background: #fff;
  border: 1.5px dashed hsl(var(--border));
  border-radius: var(--radius-lg);
  padding: 14px 18px;
  margin-bottom: 12px;
  transition: border-color 0.2s, background 0.2s;
}
.upload-card.is-processing { border-color: hsl(var(--primary-400)); background: hsl(var(--primary-50)); }
.upload-card.is-ok         { border-style: solid; border-color: hsl(var(--success-fg)); background: hsl(var(--success-bg) / 0.4); }
.upload-card.is-failed     { border-color: hsl(var(--accent)); background: hsl(var(--danger-bg)); }

.upload-card .ulabel {
  font-weight: 700;
  font-size: 14px;
  color: hsl(var(--primary-800));
  margin-bottom: 6px;
}
.upload-card .uactions { margin: 6px 0; }
.upload-card input[type=file] {
  font-family: inherit;
  font-size: 13px;
  padding: 4px 0;
}
.upload-card .ufile-info {
  font-size: 12px;
  color: hsl(var(--muted-fg));
  margin-top: 4px;
}
.upload-card.is-ok .ufile-info     { color: hsl(var(--success-fg)); font-weight: 500; }
.upload-card.is-failed .ufile-info { color: hsl(var(--accent-800)); font-weight: 500; }

/* ---------- FEASIBILITY STATES (Step 1c) ----------------------------------- */
.feasibility-state { margin: 8px 0; }
.feasibility-state.hidden { display: none; }

#fs-checking, #fs-error, #fs-unavailable { display: flex; flex-direction: column; gap: 14px; }
#feasibility-result-banner { margin-bottom: 18px; }

/* ---------- REVIEW (Step 7) ------------------------------------------------- */
.review {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.review-section {
  background: #fff;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}
.review-section-head {
  font-family: var(--font-display);
  font-weight: 700;
  color: hsl(var(--primary-800));
  font-size: 14px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid hsl(var(--border));
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.review-section-head a {
  font-size: 12px;
  font-weight: 600;
  color: hsl(var(--accent));
  text-transform: none;
  letter-spacing: 0;
}
.review-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  font-size: 14px;
  gap: 12px;
}
.review-row .k { color: hsl(var(--muted-fg)); flex-shrink: 0; }
.review-row .v { text-align: right; color: hsl(var(--foreground)); }

.confirm-box {
  margin-top: 18px;
  padding: 14px 18px;
  background: hsl(var(--primary-50));
  border: 1px solid hsl(var(--primary-200));
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: 10px;
}
.confirm-box input[type=checkbox] {
  width: 18px;
  height: 18px;
  accent-color: hsl(var(--accent));
  cursor: pointer;
}
.confirm-box label {
  flex: 1;
  font-weight: 500;
  font-size: 14px;
  color: hsl(var(--primary-800));
  cursor: pointer;
}

/* ---------- MODAL ---------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
  animation: sme-fade-in 0.2s ease-out both;
}
.modal-backdrop.is-active { display: flex; }
.modal {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 24px;
  max-width: 460px;
  width: 100%;
  box-shadow: var(--shadow-xl);
  animation: sme-slide-down 0.25s cubic-bezier(.4,0,.2,1) both;
}
.modal h3 {
  font-size: 18px;
  margin-bottom: 8px;
}
.modal p { color: hsl(var(--muted-fg)); font-size: 14px; margin: 0 0 14px; }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

/* ---------- FOOTER --------------------------------------------------------- */
.footer {
  background: hsl(var(--primary-50));
  padding: 18px 32px;
  border-top: 1px solid hsl(var(--border));
  font-size: 12px;
  color: hsl(var(--muted-fg));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px 24px;
}
.footer b { color: hsl(var(--primary-700)); font-weight: 600; }

/* ---------- SEO CONTENT (post-form, below the wizard container) ------------ */
.seo-content {
  margin: 24px 16px 32px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.seo-inner { padding: 32px; max-width: 920px; margin: 0 auto; }
@media (max-width: 640px) { .seo-inner { padding: 24px 18px; } }

.seo-content h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: hsl(var(--primary-800));
  margin: 0 0 12px;
  letter-spacing: -0.2px;
}
.seo-content h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: hsl(var(--primary-700));
  margin: 24px 0 10px;
}
.seo-content p {
  font-size: 14px;
  line-height: 1.65;
  color: hsl(var(--foreground));
  margin: 0 0 8px;
}
.seo-content p[lang="ar"] { color: hsl(var(--muted-fg)); font-size: 13px; }

.seo-header { margin-bottom: 24px; }

.seo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 14px 0 8px;
}
@media (max-width: 640px) { .seo-grid { grid-template-columns: 1fr; } }
.seo-grid article {
  background: hsl(var(--primary-50));
  border-left: 3px solid hsl(var(--accent));
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.seo-grid article h3 {
  font-size: 15px;
  margin: 0 0 6px;
  color: hsl(var(--accent-800));
}
.seo-grid article p { font-size: 13px; line-height: 1.55; }

.seo-steps {
  margin: 8px 0 8px 22px;
  padding: 0;
}
.seo-steps li {
  font-size: 14px;
  line-height: 1.65;
  margin-bottom: 8px;
  color: hsl(var(--foreground));
}
.seo-steps strong { color: hsl(var(--primary-800)); font-weight: 700; }

.seo-faq { margin-top: 8px; }
.seo-faq details {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 8px;
  background: #fff;
  transition: border-color 0.15s, background 0.15s;
}
.seo-faq details[open] {
  background: hsl(var(--primary-50));
  border-color: hsl(var(--primary-200));
}
.seo-faq summary {
  font-weight: 600;
  font-size: 14px;
  color: hsl(var(--primary-800));
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.seo-faq summary::-webkit-details-marker { display: none; }
.seo-faq summary::after {
  content: "+";
  font-size: 18px;
  font-weight: 400;
  color: hsl(var(--accent));
  transition: transform 0.2s;
  flex-shrink: 0;
}
.seo-faq details[open] summary::after { content: "−"; }
.seo-faq details p {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: hsl(var(--muted-fg));
}

.seo-cta {
  text-align: center;
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid hsl(var(--border));
}
.seo-cta a {
  color: hsl(var(--accent-700));
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 18px;
  border-radius: var(--radius);
  transition: background 0.15s;
}
.seo-cta a:hover { background: hsl(var(--accent-100)); text-decoration: none; }

/* =========================================================================
   RESPONSIVE — MOBILE FIRST AT THE BOTTOM SO IT OVERRIDES DESKTOP DEFAULTS
   =========================================================================
   Strategy:
     • 768px  — tablet portrait & large phone landscape: trim padding,
                tighten header, drop subtitle prominence
     • 640px  — typical phone portrait: stack flex rows, full-width buttons,
                bump form input font-size to 16px (iOS auto-zoom defense),
                allow tables to scroll horizontally
     • 480px  — already covered for the wizard step bar in P7 polish; we
                add panel + nav refinements here
     • 360px  — very small phones (older Android, iPhone SE): drop subtitle,
                shrink brand + title, tighten everything
   Touch-target rule: any button intended to be tapped is ≥44px tall on mobile
   (Apple HIG). Inputs ≥16px font-size to prevent the iOS focus-zoom UX trap.
   ========================================================================= */

@media (max-width: 768px) {
  /* --- container shell tighter --- */
  .page-wrap { padding: 18px 12px 36px; }
  .container { border-radius: var(--radius-lg); }

  /* --- header reads naturally even when title wraps --- */
  .header { padding: 22px 22px; }
  .header-top { gap: 14px; }
  .brand { width: 48px; height: 48px; font-size: 16px; }
  .title { font-size: 19px; line-height: 1.3; }
  .subtitle { font-size: 12px; margin-top: 4px; }

  /* --- panels: less generous padding so the form fits more in the viewport --- */
  .panel { padding: 22px 18px; }
  .panel h2 { font-size: 19px; }
  .panel .help { font-size: 13px; margin-bottom: 16px; }

  /* --- wizard nav bar: tighter --- */
  .wizard-nav { padding: 14px 18px; gap: 10px; }

  /* --- footer: tighter --- */
  .footer { padding: 16px 22px; gap: 6px 18px; }

  /* --- admin tables get a horizontal scroll fallback so 7-column dashboards
     don't clip on a phone. The card itself scrolls — content above and below
     the table stays at full width but the wide table gets a swipe affordance. */
  .admin-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-card table { min-width: 540px; }
}

@media (max-width: 640px) {
  /* --- iOS auto-zoom prevention: any input below 16px triggers a 1.3x zoom
     on focus that the user has to manually zoom back out from. Bump to 16px. */
  .field input,
  .field select,
  .field textarea,
  .admin-card input[type="text"],
  .admin-card input[type="email"],
  .admin-card input[type="password"],
  .admin-card input[type="number"],
  .admin-card input[type="tel"],
  .admin-card input[type="search"],
  .admin-card input:not([type]),
  .admin-card select,
  .admin-card textarea {
    font-size: 16px;
  }
  .admin-card .input-mono { font-size: 13px; } /* monospace stays readable smaller */

  /* --- touch-target size: tap a button without misfiring --- */
  .btn { padding: 12px 18px; min-height: 44px; }
  .btn-large {
    padding: 14px 22px;
    min-height: 48px;
    font-size: 15px;
    /* Full-width on phones — primary CTAs (Check feasibility, Continue,
       Download summary, Apply with new landline) become tap-friendly hero
       blocks instead of small inline buttons. */
    width: 100%;
  }

  /* --- panels even tighter on phone --- */
  .panel { padding: 20px 16px; }
  .panel h2 { font-size: 18px; }

  /* --- wizard nav: stack Prev under Next so both are full-width tap targets.
     column-reverse keeps the primary "Next →" on top where the thumb is. */
  .wizard-nav {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
  }
  .wizard-nav .btn { width: 100%; }

  /* --- modal: less rigid padding, action buttons stack full-width --- */
  .modal-backdrop { padding: 12px; }
  .modal { padding: 22px 18px; max-width: 100%; }
  .modal-actions {
    flex-direction: column-reverse;
    gap: 10px;
    align-items: stretch;
  }
  .modal-actions .btn { width: 100%; }

  /* --- choice buttons need less air on a small screen --- */
  .choice-btn { padding: 18px 14px; }
  .choice-btn .ch-en { font-size: 15px; }

  /* --- review-row: long values overflow on mobile when laid out side-by-side.
     Stack them so the value gets full width. --- */
  .review-row {
    flex-direction: column;
    gap: 2px;
    padding: 8px 0;
  }
  .review-row .k {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: hsl(var(--muted-fg));
  }
  .review-row .v {
    text-align: left;
    word-break: break-word;
  }
  /* "change" jump links bigger touch target */
  .review-section-head a {
    display: inline-block;
    padding: 4px 10px;
    margin-left: 4px;
    background: hsl(var(--primary-100));
    border-radius: 999px;
    text-decoration: none;
    font-size: 11px;
  }

  /* --- totals: keep the side-by-side layout but allow wrapping if needed --- */
  .totals-row { flex-wrap: wrap; gap: 4px 14px; }

  /* --- install note tighter --- */
  .install-note { padding: 14px 16px; margin-top: 14px; }

  /* --- admin detail modal — has inline max-width:780 that we override --- */
  .modal-backdrop .modal[style*="max-width:780"] { max-width: 100%; }

  /* --- admin login screen: adapt --- */
  .login-shell, .login-card { max-width: 100% !important; }
  .login-card { padding: 22px 18px !important; }

  /* --- admin tab bar wraps but the tabs themselves can get tight; let them
     scroll horizontally instead of wrapping awkwardly --- */
  .tab-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -18px 16px;
    padding: 0 18px 4px;
  }
  .tab { flex-shrink: 0; }
}

@media (max-width: 480px) {
  /* --- header even tighter; title shrinks one more notch --- */
  .header { padding: 20px 16px; }
  .title { font-size: 17px; }
  .subtitle { font-size: 11px; }

  /* --- panels: tighter still --- */
  .panel { padding: 18px 14px; }

  /* --- footer values stay readable but get less padding --- */
  .footer { padding: 14px 18px; font-size: 11.5px; }

  /* --- choice buttons --- */
  .choice-btn { padding: 16px 12px; }
  .choice-btn .ch-en { font-size: 14px; }
  .choice-btn .ch-ar { font-size: 12px; }

  /* --- plan / addon grid: tighter cards --- */
  .plan, .addon { padding: 16px 14px; }

  /* --- wizard step bar already covered by P7's @media (max-width: 480px),
     but we re-tighten the overall bar padding to match the rest --- */
  .wizard-bar { padding: 14px 12px 10px; }
}

@media (max-width: 360px) {
  /* --- very small phones (iPhone SE 1st gen, older Androids).
     Drop the subtitle entirely, shrink brand, drop one font tier. --- */
  .page-wrap { padding: 12px 8px 24px; }
  .header { padding: 16px 14px; }
  .header-top { gap: 12px; }
  .brand { width: 42px; height: 42px; font-size: 14px; }
  .title { font-size: 15px; }
  .subtitle { display: none; }

  .panel { padding: 16px 12px; }
  .panel h2 { font-size: 16px; }

  .wizard-nav { padding: 12px 14px; }
  .footer { padding: 12px 14px; gap: 4px 12px; }

  /* --- F/L/D placeholder is long, smaller field padding helps fit it --- */
  .field input, .field select { padding: 12px 10px; }

  /* --- SEO content tighter --- */
  .seo-content { margin: 18px 8px 24px; }
  .seo-inner { padding: 20px 14px; }
  .seo-content h2 { font-size: 19px; }
}

/* --- Print: hide noisy chrome, keep content --- */
@media print {
  .wizard-nav, .header::before, .session-warning, .seo-content { display: none; }
  body { background: #fff; }
  .container { box-shadow: none; }
}

/* ---------- FLOW BADGES (admin) -------------------------------------------- */
.flow-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.3px;
}
.flow-badge.flow_1 { background: hsl(var(--primary-100));   color: hsl(var(--primary-700)); }
.flow-badge.flow_2 { background: hsl(var(--info-bg));       color: hsl(var(--info-fg)); }
.flow-badge.flow_3 { background: hsl(var(--success-bg));    color: hsl(var(--success-fg)); }
.flow-badge.flow_4 { background: hsl(var(--warning-bg));    color: hsl(var(--warning-fg)); }

/* ---------- ADMIN LAYOUT --------------------------------------------------- */
.admin-shell {
  display: flex;
  min-height: 100vh;
  background: hsl(var(--background));
}
.admin-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: linear-gradient(180deg, hsl(var(--primary-800)) 0%, hsl(var(--primary-900)) 100%);
  color: #fff;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.admin-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid hsl(var(--primary-700) / 0.5);
}
.admin-sidebar-brand .brand {
  width: 36px;
  height: 36px;
  font-size: 13px;
  border-radius: var(--radius);
  box-shadow: 0 4px 12px hsl(0 78% 30% / .4);
}
.admin-sidebar-brand .label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.3px;
}
.admin-sidebar-brand .sub {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.65;
}

.admin-sidebar nav {
  padding: 10px 8px;
  flex: 1;
}
.admin-sidebar .sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  color: hsl(214 28% 80%);
  border-left: 3px solid transparent;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 0 var(--radius) var(--radius) 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
  margin-bottom: 2px;
}
.admin-sidebar .sidebar-item:hover {
  background: hsl(var(--primary-700) / 0.5);
  color: #fff;
  transform: translateX(2px);
}
.admin-sidebar .sidebar-item.active {
  background: hsl(var(--accent-700) / 0.15);
  border-left-color: hsl(var(--accent));
  color: #fff;
  font-weight: 700;
}
.admin-sidebar .sidebar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity 0.15s;
}
.admin-sidebar .sidebar-item:hover .sidebar-icon,
.admin-sidebar .sidebar-item.active .sidebar-icon { opacity: 1; }
.admin-sidebar .sidebar-icon svg { display: block; }

.admin-sidebar-foot {
  padding: 14px 14px 18px;
  border-top: 1px solid hsl(var(--primary-700) / 0.5);
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.admin-sidebar-foot .who {
  display: flex;
  flex-direction: column;
  color: hsl(214 28% 75%);
}
.admin-sidebar-foot .who .name { color: #fff; font-weight: 600; }
.admin-sidebar-foot .who .role {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  opacity: 0.7;
}
.admin-sidebar-foot button {
  background: hsl(var(--primary-700));
  color: #fff;
  border: 1px solid hsl(var(--primary-600));
  padding: 7px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: background 0.15s, transform 0.15s;
}
.admin-sidebar-foot button:hover {
  background: hsl(var(--accent-700));
  border-color: hsl(var(--accent-700));
  transform: translateY(-1px);
}

.admin-main {
  flex: 1;
  min-width: 0;
  padding: 24px;
}
@media (min-width: 1024px) {
  .admin-main { padding: 32px 40px; }
}

.admin-topbar { display: none; }

@media (max-width: 900px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: min(280px, 85vw);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 50;
    box-shadow: var(--shadow-xl);
  }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-topbar {
    display: flex;
    position: sticky;
    top: 0;
    background: linear-gradient(135deg, hsl(var(--primary-800)) 0%, hsl(var(--primary-900)) 100%);
    color: #fff;
    height: 56px;
    padding: 0 16px;
    align-items: center;
    justify-content: space-between;
    z-index: 40;
    box-shadow: var(--shadow);
  }
  .admin-topbar .brand { width: 32px; height: 32px; font-size: 12px; }
  .admin-topbar-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.2px;
  }
  .admin-topbar-toggle {
    background: transparent;
    border: 1px solid hsl(var(--primary-700));
    color: #fff;
    width: 38px;
    height: 38px;
    border-radius: var(--radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .admin-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 45;
  }
  .admin-sidebar.open ~ .admin-backdrop { opacity: 1; pointer-events: auto; }
  .admin-main { padding: 16px; }
}

.admin-card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 22px;
  animation: sme-fade-in 0.3s ease-out 0.05s both;
}
.admin-card h2 {
  font-family: var(--font-display);
  font-size: 18px;
  margin-bottom: 14px;
  color: hsl(var(--primary-800));
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-card h3 {
  font-family: var(--font-display);
  font-size: 15px;
  margin: 18px 0 10px;
  color: hsl(var(--primary-700));
}

/* Admin form controls — same visual language as public-form .field controls.
   Scoped to .admin-card so we don't bleed into the wizard's bespoke fields. */
.admin-card label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: hsl(var(--primary-700));
  margin: 0 0 6px;
  letter-spacing: 0.1px;
}
.admin-card input[type="text"],
.admin-card input[type="email"],
.admin-card input[type="password"],
.admin-card input[type="number"],
.admin-card input[type="tel"],
.admin-card input[type="search"],
.admin-card input[type="url"],
.admin-card input:not([type]),
.admin-card select,
.admin-card textarea {
  width: 100%;
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: 14px;
  color: hsl(var(--foreground));
  background: #fff;
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius-md);
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  appearance: none;
  -webkit-appearance: none;
}
.admin-card input:focus,
.admin-card select:focus,
.admin-card textarea:focus {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.18);
}
.admin-card textarea { font-family: var(--font-body); resize: vertical; min-height: 80px; }
.admin-card select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
.admin-card input[type="checkbox"] {
  width: auto;
  accent-color: hsl(var(--accent));
  cursor: pointer;
  margin-right: 6px;
  vertical-align: middle;
}

/* Code-like inputs (JSONPath, regex, JSON config) — same theme tokens but
   monospace + smaller text so the structure is legible. */
.admin-card .input-mono {
  font-family: 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 12px;
}

/* Dashboard search input — sits inside a flex row with the search button. */
.admin-card .input-search {
  flex: 1;
}

/* Destructive actions inside admin tables / forms. */
.btn-danger {
  background: hsl(var(--accent-700));
  color: #fff;
  border-color: transparent;
  font-weight: 600;
}
.btn-danger:hover { background: hsl(var(--accent-800)); border-color: transparent; color: #fff; }
.btn-danger-soft {
  background: hsl(var(--danger-bg));
  color: hsl(var(--danger-fg));
  border: 1px solid hsl(var(--accent-200));
  padding: 6px 10px;
  font-size: 12px;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: background .15s, color .15s, border-color .15s;
}
.btn-danger-soft:hover {
  background: hsl(var(--accent-700));
  color: #fff;
  border-color: hsl(var(--accent-700));
}

.admin-card p.help {
  font-size: 12px;
  color: hsl(var(--muted-fg));
  margin: 6px 0 0;
}

.flash {
  padding: 11px 16px;
  border-radius: var(--radius);
  margin-bottom: 14px;
  font-weight: 500;
  font-size: 14px;
  border-left: 4px solid currentColor;
  animation: sme-fade-in 0.25s ease-out both;
}
.flash.success { background: hsl(var(--success-bg)); color: hsl(var(--success-fg)); }
.flash.error   { background: hsl(var(--danger-bg));  color: hsl(var(--danger-fg)); }
.flash.info    { background: hsl(var(--info-bg));    color: hsl(var(--info-fg)); }

/* Admin tables — clean, hover-row, small caps headers */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
th, td {
  padding: 11px 14px;
  border-bottom: 1px solid hsl(var(--border));
  text-align: left;
  vertical-align: middle;
}
th {
  background: hsl(var(--muted));
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: hsl(var(--muted-fg));
}
tbody tr {
  transition: background 0.12s;
}
tbody tr:hover { background: hsl(var(--primary-50)); }

/* Tab bar above tables on dashboard */
.tab-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.tab {
  padding: 9px 16px;
  border-radius: var(--radius);
  background: #fff;
  color: hsl(var(--primary-700));
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  border: 1.5px solid hsl(var(--border));
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.15s, border-color 0.15s, background 0.15s, color 0.15s;
}
.tab:hover {
  border-color: hsl(var(--primary-400));
  transform: translateY(-1px);
  text-decoration: none;
}
.tab.active {
  background: var(--grad-accent);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 14px hsl(0 78% 36% / .3);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.form-grid .col-12 { grid-column: span 2; }
@media (max-width: 720px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .col-12 { grid-column: span 1; }
}

/* ---------- SPINNER -------------------------------------------------------- */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid hsl(var(--border));
  border-top-color: hsl(var(--accent));
  border-radius: 50%;
  animation: sme-spin 0.8s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}

/* ---------- ANIMATIONS ----------------------------------------------------- */
@keyframes sme-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sme-slide-down {
  from { opacity: 0; transform: translateY(-10px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes sme-spin { to { transform: rotate(360deg); } }
@keyframes sme-pulse {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  50%      { transform: scale(1.15); opacity: 1; }
}

/* ---------- REDUCED-MOTION OVERRIDE ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
  }
}

/* =========================================================================
   FULL-PAGE WIZARD — v2.12
   =========================================================================
   The wizard fills the viewport edge-to-edge AND vertically. The
   card-style centered container (max-width 880px, rounded corners,
   shadow) and the outer page padding are gone. The wizard IS the page.
   On wide screens, inner content (form fields, step bar items, button
   row) stays at a comfortable reading width via centered max-width or
   padding-calc — chrome backgrounds (header gradient, step bar, nav row,
   footer) still span the full viewport.
   ========================================================================= */

/* Drop the outer page padding so the wizard meets the viewport edges.
   The mobile responsive rules earlier in the file set this padding for
   small screens; we override at every breakpoint here. */
.page-wrap { padding: 0; }
@media (max-width: 768px) { .page-wrap { padding: 0; } }
@media (max-width: 360px) { .page-wrap { padding: 0; } }

/* Container: full-width, no card chrome, fills the viewport vertically
   via flex column so the footer always sits at the bottom of the viewport
   even when the active step's content is short (e.g. step 1a — two
   choice buttons). */
.container {
  max-width: none;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Form takes all remaining vertical space so a short step doesn't leave
   a gap between the wizard-nav and the footer. The active panel grows
   to fill the form's height; wizard-nav (which sits inside form, after
   panels) is naturally pushed to the form's bottom. */
.container > form {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.container > form > .panel.active {
  flex: 1 1 auto;
}

/* Inner content of major regions stays at a comfortable reading width
   on wide screens. The chrome BACKGROUNDS (header gradient, step bar
   bg, footer bg) still span the full viewport because their parent
   elements (.header / .wizard-bar / .footer) aren't max-width'd. */
.header-top,
.wizard-bar > .wizard-steps,
.container > form > .panel {
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}

/* On wide screens, padding-calc keeps the wizard-nav and footer's INNER
   content within ~1024px while their backgrounds still span full width.
   max(32px, calc(...)) means the padding never shrinks below 32px on
   narrow screens (where the responsive rules earlier in the file already
   handle layout). */
@media (min-width: 1089px) {
  .wizard-nav,
  .footer {
    padding-left:  max(32px, calc((100vw - 1024px) / 2));
    padding-right: max(32px, calc((100vw - 1024px) / 2));
  }
}

/* SEO section: edge-to-edge to match the new full-bleed wizard above.
   Its inner .seo-inner already constrains content to a 920px reading
   width, so the side margins and rounded corners are no longer needed. */
.seo-content {
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;
}

/* =========================================================================
   Privileged-action unlock page (admin_render_unlock_form in functions.php)
   ========================================================================= */
.unlock-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(1200px 700px at 100% 0%, hsl(0 78% 50% / .14), transparent 55%),
        radial-gradient(900px 500px at 0% 100%, hsl(214 60% 50% / .12), transparent 55%),
        linear-gradient(135deg, hsl(214 28% 14%) 0%, hsl(214 28% 8%) 100%);
    color: #fff;
}
.unlock {
    width: 100%;
    max-width: 380px;
    animation: sme-fade-in .35s ease-out both;
}
.unlock-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.unlock-head .label {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 18px;
}
.unlock-head .sub {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .6px;
    opacity: .65;
}
.unlock-card {
    background: #fff;
    color: hsl(var(--foreground));
    border-radius: var(--radius-xl);
    padding: 28px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
.unlock-card h2 {
    margin: 0 0 4px;
    font-size: 18px;
    color: hsl(var(--primary-800));
}
.unlock-card p {
    font-size: 13px;
    color: hsl(var(--muted-fg));
    margin: 0 0 14px;
}
.unlock-card input {
    width: 100%;
    padding: 11px 13px;
    font-size: 14px;
    border: 1px solid hsl(var(--input));
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    transition: border-color .15s, box-shadow .15s;
}
.unlock-card input:focus {
    outline: none;
    border-color: hsl(var(--primary));
    box-shadow: 0 0 0 3px hsl(var(--primary) / .18);
}
.unlock-card .btn-primary {
    width: 100%;
    margin-top: 14px;
}
.unlock-flash {
    padding: 10px 14px;
    border-radius: var(--radius);
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 500;
    border-left: 4px solid currentColor;
}
.unlock-flash.error {
    background: hsl(var(--danger-bg));
    color: hsl(var(--danger-fg));
}