/* =============================================================================
   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));
}

/* ---------- DARK / LIGHT THEME TOGGLE BUTTON -------------------------------- */
/* The apply wizard has its own toggle button (same #theme-toggle id/class as
   the landing page). The landing page sources this from sme-dark.css; the
   wizard loads only wizard-v2.css, so the styles go here.                    */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 1.5px solid hsl(var(--border));
  border-radius: var(--radius-sm, 6px);
  background: transparent;
  color: hsl(var(--muted-fg));
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.theme-toggle:hover {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}
.theme-toggle:focus-visible {
  outline: 2px solid hsl(var(--accent));
  outline-offset: 2px;
}
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
:root.theme-dark .theme-toggle .icon-sun,
.theme-toggle[data-effective="dark"] .icon-sun  { display: block; }
:root.theme-dark .theme-toggle .icon-moon,
.theme-toggle[data-effective="dark"] .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) .theme-toggle .icon-sun  { display: block; }
  :root:not(.theme-light) .theme-toggle .icon-moon { display: none; }
}

/* ---------- 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-source hints — small inline annotations under the label that tell
  the customer WHERE to source the field's value from (e.g. "according to
  landline owner" / "حسب صاحب الخط الأرضي").
  - flex-basis:100% forces a line break so the hint sits on its own row
    inside the label (label is display:flex with flex-wrap:wrap, so this
    pushes the hint below the En/Ar header pair without changing the
    label's overall layout)
  - font-weight stays 400 + italic — visually distinct from the bold
    label, signaling "this is helper text, not part of the label" without
    competing with the input border for visual weight
  - color uses --muted-fg to match the existing Arabic-label color so the
    hint feels like part of the same secondary-info row
*/
.field-source {
  display: block;
  flex-basis: 100%;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
  color: hsl(var(--muted-fg));
  letter-spacing: 0;
}
.field-source .field-source-ar {
  font-style: normal;
  margin-inline-start: 2px;
}

.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));
}

/* =============================================================================
   TOUCH-DEVICE INPUT FIXES + EXTRA RESPONSIVE POLISH
   -----------------------------------------------------------------------------
   This block consolidates mobile/touch fixes that the per-breakpoint rules
   earlier in the file didn't fully cover.
   ============================================================================= */

/* ---------- iOS Safari auto-zoom defense (universal touch fix) -------------
   The existing @media (max-width: 640px) rule bumps inputs to 16px on
   phone-portrait widths — but iOS Safari triggers auto-zoom on focus for
   ANY input with font-size < 16px, including phones in landscape (where
   the viewport can be 812px-932px wide on iPhone 12-15 Pro Max). Cover
   ALL touch-primary devices regardless of viewport width.
   ----------------------------------------------------------------------------
   The hover/pointer media query targets "no precise pointer + no hover" —
   the modern, accurate way to detect touch primary devices. It catches:
     - All phones and tablets (regardless of orientation/width)
     - It does NOT catch desktops/laptops with touchscreens that ALSO have
       a mouse (those have hover:hover), preserving the tighter 14px UX
       there.
*/
@media (hover: none) and (pointer: coarse) {
  .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 {
    /* 16px is the magic threshold below which iOS Safari auto-zooms. */
    font-size: 16px;
  }
  /* Touch-target minimum — Apple HIG + Google Material guidance is 44x44 CSS px.
     The base .btn padding already gets close; this enforces the floor for
     all clickable controls so micro-buttons (close icons, file-input
     trigger links etc) don't end up sub-target. */
  .btn,
  button:not(.linklike),
  [role="button"],
  input[type="submit"],
  input[type="button"],
  .choice-btn,
  .plan,
  .addon,
  .tab,
  .wizard-step {
    min-height: 44px;
  }
  /* Larger tap target on the form-source hint text — it's inside the
     label, so tapping it should still focus the input. Increase the
     vertical hit-area without changing the visual size by adding small
     vertical padding. */
  .field-source { padding: 2px 0; }
}

/* ---------- Long-content wrapping (prevents horizontal scroll) -------------
   Bilingual labels, long Lebanese street names, and ASN org strings can
   blow out narrow viewports if their containers don't allow wrapping.
   These rules guarantee no horizontal scroll on any screen >= 320px.
*/
.field label,
.choice-btn,
.plan,
.addon,
.banner,
.footer > div,
.help,
.flash,
.session-warning {
  /* Modern overflow-wrap (line-break only at word boundaries OR breaks
     long unbreakable strings like a 60-char Arabic toponym) prevents
     horizontal overflow without hard-hyphenating short text. */
  overflow-wrap: anywhere;
  word-break: break-word;  /* legacy fallback for older Safari */
}

/* Ensure container itself never overflows the viewport. The flex
   children inside (.header-top, .wizard-bar, etc.) already have
   max-width: 1024px above; this is a safety net for content that
   slipped past — embedded SVGs with intrinsic widths, third-party
   iframes, etc. */
html, body { overflow-x: hidden; }
.page-wrap, .container { max-width: 100vw; }

/* ---------- Ultra-narrow phones (320-339px) --------------------------------
   iPhone SE (1st gen) and older Android devices are still ~320px wide.
   Drop one more notch of padding so the form's input fields aren't
   visually squeezed to half the viewport's width.
*/
@media (max-width: 339px) {
  .page-wrap { padding: 8px 4px 20px; }
  .header { padding: 14px 12px; }
  .panel { padding: 14px 10px; }
  .field input, .field select, .field textarea {
    /* Keep 16px to avoid auto-zoom, but tighten horizontal padding to
       compensate for the cramped viewport. */
    padding: 10px 8px;
  }
  .footer { padding: 10px 12px; font-size: 11px; gap: 3px 8px; }
  .seo-inner { padding: 16px 10px; }
  .seo-content h2 { font-size: 17px; }
  .seo-content h3 { font-size: 14px; }
  .seo-content p { font-size: 13px; }
}

/* ---------- Reduce motion (accessibility) ---------------------------------
   The existing prefers-reduced-motion rule earlier in the file disables
   animations on elements that have explicit `animation` declarations.
   This rule is a stronger blanket fallback that also kills smooth
   scrolling, marquee-style sweeps, and any transitions the per-element
   rules might miss.
*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Print: keep SEO/wizard content readable on paper --------------- */
@media print {
  .seo-content, .wizard-bar, .session-warning, .footer {
    /* hide non-essential chrome on print */
    display: none !important;
  }
  body, .container, .panel { background: #fff !important; color: #000; }
  a { color: #000; text-decoration: underline; }
}

/* Inline per-field validation message (shown under an invalid field). */
.field-error {
  margin: .35rem 0 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--wz-danger, #dc2626);
  line-height: 1.4;
}
.field-error:empty { display: none; }
.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea {
  border-color: var(--wz-danger, #dc2626) !important;
  box-shadow: 0 0 0 1px var(--wz-danger, #dc2626);
}

/* Skip link — visible only on keyboard focus. */
.wz-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  background: var(--wz-accent, #2563eb);
  color: #fff;
  padding: .6rem 1rem;
  border-radius: 0 0 8px 0;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
}
.wz-skip-link:focus { left: 0; }

/* Consistent keyboard focus ring across interactive wizard elements. */
.wizard-bar a:focus-visible,
.panel a:focus-visible,
.panel button:focus-visible,
.panel input:focus-visible,
.panel select:focus-visible,
.panel textarea:focus-visible,
.wizard-nav button:focus-visible,
.opt-card:focus-visible,
.plan-card:focus-visible {
  outline: 3px solid var(--wz-accent, #2563eb);
  outline-offset: 2px;
}

/* ============================================================
   STEP 1e — FDU (Fiber Distribution Unit) verification.
   Feasibility-OFF mode only. Professional, bilingual, mobile-first.
   ============================================================ */
.fdu-notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 16px 18px;
  background: hsl(var(--accent-50));
  border: 1px solid hsl(var(--accent-100));
  border-radius: var(--radius-lg, 14px);
}
.fdu-notice__icon {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: #fff;
  color: hsl(var(--accent-700));
  border: 1px solid hsl(var(--accent-100));
}
.fdu-notice__body { flex: 1 1 auto; min-width: 0; }
.fdu-notice__lead { margin: 0; font-size: 15px; line-height: 1.55; color: hsl(var(--primary-800, var(--primary))); }
.fdu-notice__hint { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: hsl(var(--muted-fg)); }
.fdu-notice__lead[dir="rtl"], .fdu-notice__hint[dir="rtl"] { text-align: right; }

.fdu-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}
.fdu-opt {
  flex-direction: row !important;
  align-items: center !important;
  text-align: start !important;
  gap: 14px !important;
  padding: 16px 18px !important;
}
.fdu-opt__icon {
  flex: 0 0 auto;
  font-size: 24px;
  line-height: 1;
  width: 30px; text-align: center;
}
.fdu-opt .ch-en { font-size: 15px; }
.fdu-opt .ch-ar { margin-inline-start: auto; }

/* Subtitle inside an FDU choice — a small, muted clarifying clause that
   reads on its own line under the main headline. Used today by the "No
   FDU box installed at my building" option to add "(I will apply for SME
   DSL instead)" as supporting context. */
.fdu-opt__sub {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: hsl(var(--muted-fg));
  font-style: italic;
}

.fdu-upload-zone { margin-top: 14px; }
.fdu-upload-zone .upload-card__hint { font-size: 12px; color: hsl(var(--muted-fg)); margin-top: 6px; }

/* Tablet/desktop: keep options comfortably wide and readable. */
@media (min-width: 720px) {
  .fdu-opt .ch-ar { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .fdu-opt { transition: none; }
}

/* FDU reference example image (visual hint in step 1e). */
.fdu-example {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 14px 0 0;
  padding: 14px;
  background: #fff;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg, 14px);
}
.fdu-example img {
  flex: 0 0 auto;
  width: 120px;
  height: auto;
  border-radius: 10px;
  border: 1px solid hsl(var(--border));
  background: #f3f4f6;
  object-fit: cover;
}
.fdu-example figcaption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  line-height: 1.55;
  color: hsl(var(--muted-fg));
}
.fdu-example__en { color: hsl(var(--primary-800, var(--primary))); font-weight: 600; }
.fdu-example__ar { text-align: right; }
@media (max-width: 560px) {
  .fdu-example { flex-direction: column; align-items: flex-start; gap: 12px; }
  .fdu-example img { width: 100%; max-width: 220px; align-self: center; }
}

/* =============================================================================
   DARK MODE — comprehensive coverage for the apply wizard + admin pages.
   -----------------------------------------------------------------------------
   The wizard uses HSL custom-property tokens (hsl(var(--…))) for ~95% of its
   colors, so the token remap below cascades through virtually every surface
   automatically. The remaining 5% are hard-coded `background: #fff` cards
   (.container, .wizard-bar, .plan, .addon, .upload-card, .review-section,
   .modal) plus the .field input row and the FDU-example image — each gets
   elements — each gets an explicit override below.

   ACTIVATION: this block fires under EITHER trigger —
     1. `:root.theme-dark` — the manual toggle, persisted in localStorage as
        `sme_theme=dark`. Applied early by theme-init.js loaded in the <head>
        so dark mode paints on first frame (no flash of light content).
     2. `@media (prefers-color-scheme: dark)` combined with
        `:root:not(.theme-light)` — the OS-level preference, suppressed when
        the user explicitly picked Light via the toggle.

   The same `sme_theme` localStorage key is shared with the marketing site, so
   a user who toggled dark on the homepage gets dark throughout the apply
   wizard + admin pages without re-clicking anything.

   LIGHT MODE RENDERS IDENTICALLY — none of these rules apply when the class
   is absent and OS preference is not dark. Verified: rendering this CSS
   without `.theme-dark` and without the dark media query leaves every
   selector's specificity exactly where it was, because every rule below is
   either inside the media query or under `:root.theme-dark …`.
   ============================================================================= */

/* ---------- Smooth theme cross-fade (manual toggle only) -------------------
   Glides the light↔dark colour change instead of snapping. Scoped to
   <html>.theme-anim, a class the toggle adds for ~340ms then removes, so the
   first paint and step-to-step navigation never animate (no flash). Colour
   properties only; transforms untouched. Honours prefers-reduced-motion. */
:root.theme-anim * {
  transition: background-color .28s ease, border-color .28s ease,
              color .28s ease, fill .28s ease, box-shadow .28s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  :root.theme-anim * { transition: none !important; }
}

/* ---------- TOKEN REMAP (manual toggle path) -------------------------------- */
:root.theme-dark {
  /* Neutrals — visual hierarchy: page bg darkest, then container, then card,
     then input. Each step ~3% lighter so elevation reads without contrast loss. */
  --background:     214 32% 10%;
  --foreground:     210 20% 92%;
  --muted:          214 24% 16%;
  --muted-fg:       214 12% 68%;  /* 68% = ~4.7:1 on dark bg. 65% was 4.38 (below WCAG AA 4.5) */
  --border:         214 20% 24%;
  --input:          214 20% 24%;

  /* Primary navy ramp — INVERTED for dark legibility. The original ramp went
     near-white (50) → deep navy (900); we flip so 50/100/200 become dark BGs
     and 700/800/900 stay near-white for text. Mid values (400-600) brighten
     so they read on dark surfaces. */
  --primary:        214 28% 75%;
  --primary-50:     214 24% 14%;
  --primary-100:    214 24% 18%;
  --primary-200:    214 24% 22%;
  --primary-400:    214 28% 55%;
  --primary-500:    214 28% 65%;
  --primary-600:    214 28% 75%;
  --primary-700:    214 28% 82%;
  --primary-800:    214 28% 88%;
  --primary-900:    214 28% 95%;

  /* Brand red — brightened for visibility on dark, but the very-light light-mode
     variants (50/100/200) become dark muted-red backgrounds for selected states. */
  --accent:         0 72% 60%;
  --accent-50:      0 40% 16%;
  --accent-100:     0 40% 22%;
  --accent-200:     0 40% 30%;
  --accent-500:     0 72% 58%;
  --accent-600:     0 72% 60%;
  --accent-700:     0 72% 62%;
  --accent-800:     0 72% 68%;
  --accent-900:     0 72% 75%;

  /* Status banner pairs — dark muted backgrounds with bright readable foregrounds.
     Banners themselves use these tokens, so they adapt without per-selector overrides. */
  --success-bg:     142 30% 16%;
  --success-fg:     142 60% 70%;
  --warning-bg:     38 30% 16%;
  --warning-fg:     38 70% 70%;
  --info-bg:        214 30% 18%;
  --info-fg:        214 70% 75%;
  --danger-bg:      0 30% 16%;
  --danger-fg:      0 70% 70%;

  /* Shadows — strengthen so elevation stays visible on dark surfaces. The light-mode
     shadows use rgba(15,23,42,.05–.12) which are invisible on dark; deepen to .35–.55. */
  --shadow-sm:      0 1px 2px rgba(0,0,0,.4);
  --shadow:         0 2px 4px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
  --shadow-md:      0 4px 8px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3);
  --shadow-lg:      0 8px 16px rgba(0,0,0,.5), 0 4px 8px rgba(0,0,0,.35);
  --shadow-xl:      0 16px 32px rgba(0,0,0,.55), 0 8px 16px rgba(0,0,0,.4);

  /* --wz-* tokens: wz-skip-link + :focus-visible use --wz-accent; .field-error
     + .field.is-invalid use --wz-danger. Both brightened so they read on dark. */
  --wz-accent:        hsl(214 60% 55%);
  --wz-danger:        hsl(0 70% 65%);
}

/* ---------- BODY + HARD-CODED #FFF SURFACE OVERRIDES ------------------------ */
:root.theme-dark body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

:root.theme-dark .container,
:root.theme-dark .wizard-bar,
:root.theme-dark .plan,
:root.theme-dark .addon,
:root.theme-dark .upload-card,
:root.theme-dark .review-section,
:root.theme-dark .modal {
  background-color: hsl(214 28% 13%);
  color: hsl(var(--foreground));
}

/* Form inputs — slightly lighter than card bg so they read as "interactive surface". */
:root.theme-dark .field input,
:root.theme-dark .field select,
:root.theme-dark .field textarea {
  background-color: hsl(214 26% 16%);
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
}
:root.theme-dark .field input::placeholder,
:root.theme-dark .field textarea::placeholder {
  color: hsl(214 12% 55%);
}

/* Choice buttons (FDU options, customer type, tech choice, identity dropdown). */
:root.theme-dark .choice-btn {
  background-color: hsl(214 28% 13%);
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
}
:root.theme-dark .choice-btn:hover:not(.is-selected) {
  background-color: hsl(214 28% 17%);
  border-color: hsl(214 20% 32%);
}
:root.theme-dark .choice-btn.is-selected {
  background-color: hsl(0 40% 20%);
  border-color: hsl(var(--accent));
}
:root.theme-dark .choice-btn.is-selected .ch-en {
  color: hsl(var(--accent-700));
}

/* Default light .btn variant (line 675) — used as ghost-ish secondary CTA. */
:root.theme-dark .btn:not(.btn-primary):not(.btn-ghost) {
  background-color: hsl(214 28% 16%);
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
}
:root.theme-dark .btn:not(.btn-primary):not(.btn-ghost):hover {
  background-color: hsl(214 28% 20%);
}

/* FDU example image background — light gray placeholder doesn't fit dark page */
:root.theme-dark .fdu-example img { background-color: hsl(214 24% 16%); }
:root.theme-dark .fdu-example { background-color: hsl(214 28% 13%); border-color: hsl(var(--border)); }
:root.theme-dark .fdu-notice__icon { background-color: hsl(214 28% 16%); border-color: hsl(var(--accent-200)); }
:root.theme-dark .seo-faq details { background-color: hsl(214 28% 13%); border-color: hsl(var(--border)); }
:root.theme-dark .seo-faq details[open] { background-color: hsl(var(--primary-50)); border-color: hsl(var(--primary-200)); }

/* ---------- MEDIA QUERY MIRROR (OS-level preference) ------------------------ */
/* Identical map, gated on prefers-color-scheme: dark and suppressed when the
   user explicitly chose Light via .theme-light. */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    --background:     214 32% 10%;
    --foreground:     210 20% 92%;
    --muted:          214 24% 16%;
    --muted-fg:       214 12% 68%;
    --border:         214 20% 24%;
    --input:          214 20% 24%;

    --primary:        214 28% 75%;
    --primary-50:     214 24% 14%;
    --primary-100:    214 24% 18%;
    --primary-200:    214 24% 22%;
    --primary-400:    214 28% 55%;
    --primary-500:    214 28% 65%;
    --primary-600:    214 28% 75%;
    --primary-700:    214 28% 82%;
    --primary-800:    214 28% 88%;
    --primary-900:    214 28% 95%;

    --accent:         0 72% 60%;
    --accent-50:      0 40% 16%;
    --accent-100:     0 40% 22%;
    --accent-200:     0 40% 30%;
    --accent-500:     0 72% 58%;
    --accent-600:     0 72% 60%;
    --accent-700:     0 72% 62%;
    --accent-800:     0 72% 68%;
    --accent-900:     0 72% 75%;

    --success-bg:     142 30% 16%;
    --success-fg:     142 60% 70%;
    --warning-bg:     38 30% 16%;
    --warning-fg:     38 70% 70%;
    --info-bg:        214 30% 18%;
    --info-fg:        214 70% 75%;
    --danger-bg:      0 30% 16%;
    --danger-fg:      0 70% 70%;

    --shadow-sm:      0 1px 2px rgba(0,0,0,.4);
    --shadow:         0 2px 4px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
    --shadow-md:      0 4px 8px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.3);
    --shadow-lg:      0 8px 16px rgba(0,0,0,.5), 0 4px 8px rgba(0,0,0,.35);
    --shadow-xl:      0 16px 32px rgba(0,0,0,.55), 0 8px 16px rgba(0,0,0,.4);

    --wz-accent:        hsl(214 60% 55%);
    --wz-danger:        hsl(0 70% 65%);
  }

  :root:not(.theme-light) body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
  }
  :root:not(.theme-light) .container,
  :root:not(.theme-light) .wizard-bar,
  :root:not(.theme-light) .plan,
  :root:not(.theme-light) .addon,
  :root:not(.theme-light) .upload-card,
  :root:not(.theme-light) .review-section,
  :root:not(.theme-light) .modal {
    background-color: hsl(214 28% 13%);
    color: hsl(var(--foreground));
  }
  :root:not(.theme-light) .field input,
  :root:not(.theme-light) .field select,
  :root:not(.theme-light) .field textarea {
    background-color: hsl(214 26% 16%);
    color: hsl(var(--foreground));
    border-color: hsl(var(--border));
  }
  :root:not(.theme-light) .field input::placeholder,
  :root:not(.theme-light) .field textarea::placeholder {
    color: hsl(214 12% 55%);
  }
  :root:not(.theme-light) .choice-btn {
    background-color: hsl(214 28% 13%);
    color: hsl(var(--foreground));
    border-color: hsl(var(--border));
  }
  :root:not(.theme-light) .choice-btn:hover:not(.is-selected) {
    background-color: hsl(214 28% 17%);
    border-color: hsl(214 20% 32%);
  }
  :root:not(.theme-light) .choice-btn.is-selected {
    background-color: hsl(0 40% 20%);
    border-color: hsl(var(--accent));
  }
  :root:not(.theme-light) .choice-btn.is-selected .ch-en {
    color: hsl(var(--accent-700));
  }
  :root:not(.theme-light) .btn:not(.btn-primary):not(.btn-ghost) {
    background-color: hsl(214 28% 16%);
    color: hsl(var(--foreground));
    border-color: hsl(var(--border));
  }
  :root:not(.theme-light) .btn:not(.btn-primary):not(.btn-ghost):hover {
    background-color: hsl(214 28% 20%);
  }
  :root:not(.theme-light) .fdu-example img {
    background-color: hsl(214 24% 16%);
  }
}


/* =============================================================================
   DARK MODE — ADMIN INLINE STYLE OVERRIDES
   -----------------------------------------------------------------------------
   admin.php (and a few other admin*.php pages) use a lot of inline `style="…"`
   attributes for one-off layout — background:#f9fafb, color:#374151, etc. CSS
   variables can't reach inline styles, so we use attribute-substring selectors
   to retheme each common color. Each rule uses !important to outrank inline
   specificity (the only way to override an inline style with external CSS).

   This is gated under the same dark triggers as the main wizard dark block, so
   light mode is unaffected.
   ============================================================================= */

/* Light gray backgrounds → muted dark surface */
:root.theme-dark [style*="background:#f9fafb"],
:root.theme-dark [style*="background: #f9fafb"],
:root.theme-dark [style*="background:#fafafa"],
:root.theme-dark [style*="background: #fafafa"],
:root.theme-dark [style*="background:white"],
:root.theme-dark [style*="background:#fff"],
:root.theme-dark [style*="background: #fff"] {
  background-color: hsl(214 28% 13%) !important;
  color: hsl(var(--foreground));
}

/* Light borders → token border (visible on dark) */
:root.theme-dark [style*="border:1px solid #e5e7eb"],
:root.theme-dark [style*="border: 1px solid #e5e7eb"],
:root.theme-dark [style*="border:1px solid #d1d5db"],
:root.theme-dark [style*="border: 1px solid #d1d5db"] {
  border-color: hsl(var(--border)) !important;
}

/* Dark text colors → readable on dark */
:root.theme-dark [style*="color:#111827"],
:root.theme-dark [style*="color: #111827"],
:root.theme-dark [style*="color:#1f2937"],
:root.theme-dark [style*="color: #1f2937"],
:root.theme-dark [style*="color:#374151"],
:root.theme-dark [style*="color: #374151"] {
  color: hsl(var(--foreground)) !important;
}

/* Muted text colors (light gray) → token muted-fg */
:root.theme-dark [style*="color:#6b7280"],
:root.theme-dark [style*="color: #6b7280"],
:root.theme-dark [style*="color:#9ca3af"],
:root.theme-dark [style*="color: #9ca3af"] {
  color: hsl(var(--muted-fg)) !important;
}

/* Orange warning panels (site-survey hint block) — darken bg, brighten fg */
:root.theme-dark [style*="background:#fff7ed"],
:root.theme-dark [style*="background: #fff7ed"] {
  background-color: hsl(24 30% 16%) !important;
}
:root.theme-dark [style*="color:#7c2d12"],
:root.theme-dark [style*="color: #7c2d12"],
:root.theme-dark [style*="color:#9a3412"],
:root.theme-dark [style*="color: #9a3412"] {
  color: hsl(24 70% 70%) !important;
}
:root.theme-dark [style*="border:1px solid #fed7aa"],
:root.theme-dark [style*="border: 1px solid #fed7aa"] {
  border-color: hsl(24 30% 35%) !important;
}

/* Yellow warning panels — darken bg, brighten fg */
:root.theme-dark [style*="background:#fef3c7"],
:root.theme-dark [style*="background: #fef3c7"] {
  background-color: hsl(45 30% 16%) !important;
}
:root.theme-dark [style*="color:#92400e"],
:root.theme-dark [style*="color: #92400e"] {
  color: hsl(45 70% 70%) !important;
}

/* Mirror admin overrides under media query too */
@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) [style*="background:#f9fafb"],
  :root:not(.theme-light) [style*="background: #f9fafb"],
  :root:not(.theme-light) [style*="background:#fafafa"],
  :root:not(.theme-light) [style*="background: #fafafa"],
  :root:not(.theme-light) [style*="background:white"],
  :root:not(.theme-light) [style*="background:#fff"],
  :root:not(.theme-light) [style*="background: #fff"] {
    background-color: hsl(214 28% 13%) !important;
    color: hsl(var(--foreground));
  }
  :root:not(.theme-light) [style*="border:1px solid #e5e7eb"],
  :root:not(.theme-light) [style*="border: 1px solid #e5e7eb"],
  :root:not(.theme-light) [style*="border:1px solid #d1d5db"],
  :root:not(.theme-light) [style*="border: 1px solid #d1d5db"] {
    border-color: hsl(var(--border)) !important;
  }
  :root:not(.theme-light) [style*="color:#111827"],
  :root:not(.theme-light) [style*="color: #111827"],
  :root:not(.theme-light) [style*="color:#1f2937"],
  :root:not(.theme-light) [style*="color: #1f2937"],
  :root:not(.theme-light) [style*="color:#374151"],
  :root:not(.theme-light) [style*="color: #374151"] {
    color: hsl(var(--foreground)) !important;
  }
  :root:not(.theme-light) [style*="color:#6b7280"],
  :root:not(.theme-light) [style*="color: #6b7280"],
  :root:not(.theme-light) [style*="color:#9ca3af"],
  :root:not(.theme-light) [style*="color: #9ca3af"] {
    color: hsl(var(--muted-fg)) !important;
  }
  :root:not(.theme-light) [style*="background:#fff7ed"],
  :root:not(.theme-light) [style*="background: #fff7ed"] {
    background-color: hsl(24 30% 16%) !important;
  }
  :root:not(.theme-light) [style*="color:#7c2d12"],
  :root:not(.theme-light) [style*="color: #7c2d12"],
  :root:not(.theme-light) [style*="color:#9a3412"],
  :root:not(.theme-light) [style*="color: #9a3412"] {
    color: hsl(24 70% 70%) !important;
  }
  :root:not(.theme-light) [style*="border:1px solid #fed7aa"],
  :root:not(.theme-light) [style*="border: 1px solid #fed7aa"] {
    border-color: hsl(24 30% 35%) !important;
  }
  :root:not(.theme-light) [style*="background:#fef3c7"],
  :root:not(.theme-light) [style*="background: #fef3c7"] {
    background-color: hsl(45 30% 16%) !important;
  }
  :root:not(.theme-light) [style*="color:#92400e"],
  :root:not(.theme-light) [style*="color: #92400e"] {
    color: hsl(45 70% 70%) !important;
  }
}