.service-breadcrumb {
  display: none !important; /* Hidden — replaced by top progress-bar breadcrumb */
  justify-content: center; align-items: center;
  margin: 4px 0 12px 0;
}
#serviceBreadcrumb { display: none !important; }

#kitchenWizardContainer .wizard-header h3 { display: none; }

/* Kitchen wizard breadcrumb — sits above the step indicators (1 STYLE
   2 CABINETS …) inside each wizard step's .wizard-header. Shows
   "Kitchen NEW · <Style>" so the user always knows which service +
   style they're configuring without needing a separate panel. */
.kw-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 8px 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.kw-breadcrumb__cat {
  color: var(--muted, #94a3b8);
}
.kw-breadcrumb__sep {
  color: var(--muted, #94a3b8);
  opacity: 0.6;
}
.kw-breadcrumb__style {
  color: var(--accent, #06b6d4);
}

/* Sub-wizard mode kills the legacy in-card panel titles that used to
   render "Kitchen NEW / European Style" at the bottom of the column.
   The new .kw-breadcrumb above replaces it in a cleaner spot. */
body.is-subwizard #stdPanelTitle,
body.is-subwizard #stdPanelTitle2 {
  display: none !important;
}

/* Kitchen NEW internal step indicators (numbers 1-6) */
.kitchen-step-nums {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 8px 0 12px;
}
.kitchen-step-nums > span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  transition: all 0.25s ease;
}
.kitchen-step-nums[data-current="1"] > span:nth-child(1),
.kitchen-step-nums[data-current="2"] > span:nth-child(2),
.kitchen-step-nums[data-current="3"] > span:nth-child(3),
.kitchen-step-nums[data-current="4"] > span:nth-child(4),
.kitchen-step-nums[data-current="5"] > span:nth-child(5),
.kitchen-step-nums[data-current="6"] > span:nth-child(6) {
  background: var(--accent, #06b6d4);
  border-color: var(--accent, #06b6d4);
  color: #0f172a;
  box-shadow: 0 0 0 4px rgba(6,182,212,0.18);
}
.kitchen-step-nums[data-current="2"] > span:nth-child(-n+1),
.kitchen-step-nums[data-current="3"] > span:nth-child(-n+2),
.kitchen-step-nums[data-current="4"] > span:nth-child(-n+3),
.kitchen-step-nums[data-current="5"] > span:nth-child(-n+4),
.kitchen-step-nums[data-current="6"] > span:nth-child(-n+5) {
  background: #22c55e;
  border-color: #22c55e;
  color: #0f172a;
}
.service-breadcrumb .breadcrumb-track {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 18px;
  background: rgba(6,182,212,.06);
  border: 1px solid rgba(6,182,212,.25);
  border-radius: 10px;
  min-height: 42px;
}
.breadcrumb-item { font-size: 14px; color: var(--accent, #06b6d4); font-weight: 600; }
.breadcrumb-sep { color: var(--muted); font-size: 14px; }
.breadcrumb-selection { color: #a5e6c9; }

/* ============================================
   FULL PRO RESTORATION - Design System Tokens
   ============================================ */
:root {
  /* Brand Colors */
  --fp-navy-900: #0B1E3F;
  --fp-navy-800: #0F2847;
  --fp-navy-700: #1E3A5F;
  --fp-navy-600: #2D4A6F;
  --fp-red: #C8102E;
  --fp-red-dark: #9B0D24;

  /* Calculator Primary Palette (current cyan theme) */
  --fp-cyan-500: #06b6d4;
  --fp-cyan-400: #22d3ee;
  --fp-cyan-600: #0891b2;

  /* Semantic Colors */
  --fp-success: #10b981;
  --fp-success-dark: #059669;
  --fp-warning: #f59e0b;
  --fp-error: #ef4444;

  /* Neutrals - Dark Theme */
  --fp-bg-base: #0f172a;
  --fp-bg-elevated: #1e293b;
  --fp-bg-input: rgba(15, 23, 42, 0.8);
  --fp-border: rgba(255, 255, 255, 0.08);
  --fp-border-focus: var(--fp-cyan-500);

  /* Text Colors */
  --fp-text-primary: #f1f5f9;
  --fp-text-secondary: #cbd5e1;
  --fp-text-muted: #94a3b8;
  --fp-text-subtle: #64748b;

  /* Typography Scale */
  --fp-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, sans-serif;
  --fp-font-size-xs: 11px;
  --fp-font-size-sm: 13px;
  --fp-font-size-base: 15px;
  --fp-font-size-lg: 17px;
  --fp-font-size-xl: 20px;
  --fp-font-size-2xl: 24px;
  --fp-font-size-3xl: 30px;
  --fp-font-size-4xl: 36px;

  /* Font Weights */
  --fp-weight-regular: 400;
  --fp-weight-medium: 500;
  --fp-weight-semibold: 600;
  --fp-weight-bold: 700;

  /* Spacing Scale (4px base) */
  --fp-space-1: 4px;
  --fp-space-2: 8px;
  --fp-space-3: 12px;
  --fp-space-4: 16px;
  --fp-space-5: 20px;
  --fp-space-6: 24px;
  --fp-space-8: 32px;
  --fp-space-10: 40px;
  --fp-space-12: 48px;
  --fp-space-16: 64px;

  /* Border Radius Scale */
  --fp-radius-sm: 4px;
  --fp-radius-md: 8px;
  --fp-radius-lg: 12px;
  --fp-radius-xl: 16px;
  --fp-radius-2xl: 20px;
  --fp-radius-full: 9999px;

  /* Shadows - Elevation */
  --fp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --fp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --fp-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
  --fp-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);
  --fp-shadow-glow-cyan: 0 0 24px rgba(6, 182, 212, 0.3);

  /* Transitions */
  --fp-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --fp-transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --fp-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Z-index Scale */
  --fp-z-dropdown: 100;
  --fp-z-sticky: 200;
  --fp-z-modal-backdrop: 300;
  --fp-z-modal: 400;
  --fp-z-toast: 500;
}

/* ============================================
   END Design System Tokens
   ============================================ */

:root{
  /* === DESIGN SYSTEM (theme-agnostic) === */
  /* Brand */
  --brand-navy:        #0A1B3A;
  --brand-navy-2:      #142951;
  --brand-navy-ink:    #060F23;
  --brand-red:         #C41E2E;
  --brand-red-deep:    #99131F;
  --brand-red-soft:    #FDECEE;

  /* Fonts */
  --font-sans:    "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter Tight", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", "Consolas", monospace;
  --font-num:     "Inter Tight", sans-serif;

  /* Radius */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;

  /* ═══════════════════════════════════════════════════════════════
     KITCHEN WIZARD — Design tokens (Phase 1 of UI consolidation)
     One source of truth for card sizing, spacing, image ratios and
     breakpoints across all 6 wizard steps. Every step card should
     read from these tokens — no hardcoded paddings or fixed heights.
     ═══════════════════════════════════════════════════════════════ */
  --wiz-max-width:        1080px;
  --wiz-card-padding:     28px 32px;
  --wiz-card-padding-md:  22px 24px;
  --wiz-card-padding-sm:  16px 18px;
  --wiz-card-radius:      14px;
  --wiz-card-gap:         18px;
  --wiz-card-bg:          rgba(6, 182, 212, 0.04);
  --wiz-card-border:      1px solid rgba(255, 255, 255, 0.08);
  --wiz-card-border-hover:1px solid rgba(6, 182, 212, 0.35);
  --wiz-card-shadow:      0 4px 18px rgba(0, 0, 0, 0.18);

  /* Image aspect ratios — guarantees consistent card heights */
  --wiz-img-primary:      16 / 8;   /* hero choice cards (Style, Stone) */
  --wiz-img-secondary:    4 / 3;    /* sub-choice cards (Doors, Cabinets) */
  --wiz-img-thumb:        1 / 1;    /* list thumbnails (Summary rows) */

  /* Grid item min-widths — drive auto-fill columns at each tier */
  --wiz-grid-primary-min:   280px;  /* big choice cards (Style) */
  --wiz-grid-secondary-min: 160px;  /* sub-choice cards (Doors) */
  --wiz-grid-tile-min:      140px;  /* compact tile (Edge profiles) */

  /* === DARK THEME (default) === */
  --bg:#0f172a;
  --panel:#0b1223;
  --card:#1f2937;
  --muted:#9ca3af;
  --text:#e5e7eb;
  --accent:#06b6d4;
  --accent2:#22c55e;

  --paper:        #0f172a;
  --paper-2:      #131b30;
  --paper-3:      #1a2440;
  --surface:      rgba(31,41,55,.9);
  --surface-2:    rgba(255,255,255,0.03);

  --line:         rgba(255,255,255,0.08);
  --line-2:       rgba(255,255,255,0.18);
  --line-strong:  rgba(255,255,255,0.28);

  --ink:    #f1f5f9;
  --ink-2:  #cbd5e1;
  --ink-3:  #94a3b8;
  --muted-2:#64748b;

  --ok:        #22c55e;
  --ok-soft:   rgba(34,197,94,0.15);
  --warn:      #f59e0b;
  --warn-soft: rgba(245,158,11,0.15);
  --err:       #ef4444;
  --err-soft:  rgba(239,68,68,0.12);

  --accent-deep:  #0891b2;
  --accent-soft:  rgba(6,182,212,0.12);
  --accent-ink:   #001018;

  /* Shadows — heavier, deep navy */
  --sh-xs:    0 1px 1px rgba(0, 0, 0, .25);
  --sh-sm:    0 1px 2px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .03);
  --sh-md:    0 6px 18px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .15);
  --sh-lg:    0 22px 44px rgba(0, 0, 0, .55), 0 6px 14px rgba(0, 0, 0, .25);
  --sh-focus: 0 0 0 3px rgba(6, 182, 212, 0.22);
}

/* === LIGHT THEME === */
[data-theme="light"] {
  --bg:    #F6F4EF;
  --panel: #EFECE5;
  --card:  #FFFFFF;
  --text:  #0E1422;
  --accent: #C41E2E;
  --accent2: #15693F;

  --paper:        #F6F4EF;
  --paper-2:      #EFECE5;
  --paper-3:      #E6E2D8;
  --surface:      #FFFFFF;
  --surface-2:    #FBFAF7;

  --line:         #E2DED4;
  --line-2:       #CFCABE;
  --line-strong:  #B8B2A3;

  --ink:    #0E1422;
  --ink-2:  #2B3344;
  --ink-3:  #4D5468;
  --muted:  #6B7286;
  --muted-2:#9A9FAF;

  --ok:        #15693F;
  --ok-soft:   #E5F2EA;
  --warn:      #92590B;
  --warn-soft: #F8EFD7;
  --err:       #B91C1C;
  --err-soft:  #FEE7E7;

  --accent-deep:  var(--brand-red-deep);
  --accent-soft:  var(--brand-red-soft);
  --accent-ink:   #FFFFFF;

  --sh-xs:    0 1px 1px rgba(10, 27, 58, .04), 0 0 0 1px rgba(10, 27, 58, .04);
  --sh-sm:    0 1px 2px rgba(10, 27, 58, .06), 0 0 0 1px rgba(10, 27, 58, .05);
  --sh-md:    0 4px 12px -4px rgba(10, 27, 58, .12), 0 2px 6px rgba(10, 27, 58, .04);
  --sh-lg:    0 22px 44px -20px rgba(10, 27, 58, .28), 0 6px 14px -6px rgba(10, 27, 58, .08);
  --sh-focus: 0 0 0 3px rgba(10, 27, 58, 0.08);
}

*{box-sizing:border-box}
html{height:100%}

body{
  margin:0;
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11", "tnum";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: linear-gradient(180deg,var(--bg),#0b1223);
  color: var(--text);
}
body[data-current-wizard-step] {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  padding-bottom: 0;
}
body[data-theme="light"] { background: var(--paper); color: var(--ink); }

/* ─── Global scrollbar theming (dark mode) ──────────────────────────
   Subtle and sober — the scrollbar should fade into the navy theme
   so the seller isn't distracted by a bright slab on every page.
   Track is essentially invisible; thumb is a slightly lighter slate
   tone that gains contrast only on hover. Light theme stays default. */
body:not([data-theme="light"]) {
  scrollbar-width: thin;
  scrollbar-color: rgba(51, 65, 85, 0.6) transparent;
}
body:not([data-theme="light"]) ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
body:not([data-theme="light"]) ::-webkit-scrollbar-track {
  background: transparent;
}
body:not([data-theme="light"]) ::-webkit-scrollbar-thumb {
  background: rgba(51, 65, 85, 0.55);
  border: 2px solid transparent;
  border-radius: 8px;
  background-clip: padding-box;
  transition: background-color 0.15s ease;
}
body:not([data-theme="light"]) ::-webkit-scrollbar-thumb:hover {
  background: rgba(71, 85, 105, 0.85);
  background-clip: padding-box;
}
body:not([data-theme="light"]) ::-webkit-scrollbar-corner {
  background: transparent;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.014em;
  color: var(--ink);
}
h1 { font-size: 32px; line-height: 1.1; letter-spacing: -0.025em; margin: 0; }
h2 { font-size: 22px; letter-spacing: -0.018em; }
h3 { font-size: 17px; letter-spacing: -0.012em; }

/* Tabular numerals for prices, totals, measurements */
.num, .price, .total, [data-numeric] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Eyebrow / mono labels */
.eyebrow, .label-mono, .step-meta, .badge, .unit {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}

.container{max-width:1100px;margin:28px auto;padding:0 16px}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.version{font-size:12px;color:var(--muted);font-weight:500;margin-left:8px;}

.grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}

.card{background:rgba(31,41,55,.9);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:18px;box-shadow:0 10px 25px rgba(0,0,0,.35)}
label{font-size:13px;color:var(--muted);display:block;margin-bottom:6px}
select,input[type="number"],input[type="text"],textarea{width:100%;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:#0b1223;color:#ffffff;outline:none;font-family:inherit;}
input[type="email"]{width:100%;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:#0b1223;color:#ffffff;outline:none;font-family:inherit;}
input::placeholder,textarea::placeholder{color:#9ca3af;}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(6,182,212,.2)}
textarea{resize:vertical;line-height:1.5;}
#projectDescription { min-height: 180px; }
@media(min-width: 640px) { #projectDescription { min-height: 220px; } }
@media(min-width: 940px) { #projectDescription { min-height: 250px; } }

.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
button{cursor:pointer;border:none;border-radius:12px;padding:10px 14px;font-weight:600;font-size:13px;transition:all 0.2s ease;}
.primary{background:var(--accent);color:#001018}
.primary:hover:not(:disabled){background:#1ea34a}
.primary:disabled{background:#334155;color:#64748b;cursor:not-allowed;opacity:0.5;}
.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.15)}
.ghost:hover{background:rgba(255,255,255,.1)}
table{width:100%;border-collapse:separate;border-spacing:0;margin-top:8px}
th,td{padding:12px 10px;text-align:right}
th:first-child,td:first-child{text-align:left}
thead th{font-size:12px;color:var(--muted);border-bottom:1px solid rgba(255,255,255,.1)}

.price-table tbody tr { background: transparent; }
.price-table tbody tr+tr td { border-top: 1px dashed rgba(255,255,255,.08); }
.price-table td { padding: 8px 4px; }
.price-table input[type="radio"] { vertical-align: middle; }
.price-table label { display: inline; vertical-align: middle; color: var(--text); cursor:pointer; margin-left:5px; }

/* ========================================
   PRICE PREVIEW
   ======================================== */
.price-preview-container { margin-top: 15px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.06); }
.price-preview-header { margin-bottom: 12px; text-align: center; }
.price-preview-label { font-size: 14px; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; justify-content: center; gap: 8px; }

.selected-price-display { background: linear-gradient(135deg, rgba(6,182,212,.08) 0%, rgba(34,197,94,.08) 100%); border: 2px solid rgba(6,182,212,.2); border-radius: 10px; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.2); transition: all 0.3s ease; }
.selected-price-display.price-changed { animation: priceUpdate 0.5s ease; }
@keyframes priceUpdate { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); box-shadow: 0 4px 16px rgba(34,197,94,.4); } }
.selected-price-label { font-size: 14px; font-weight: 600; color: var(--text); text-transform: uppercase; letter-spacing: 0.5px; }
.selected-price-value { font-size: 22px; font-weight: 800; color: var(--accent2); font-family: 'Courier New', monospace; text-shadow: 0 0 10px rgba(34,197,94,.5); transition: all 0.3s ease; }

.price-options-collapsible { background: rgba(6,182,212,.05); border: 1px solid rgba(6,182,212,.2); border-radius: 10px; overflow: hidden; transition: all 0.3s ease; }
.price-options-collapsible[open] { background: rgba(6,182,212,.08); border-color: rgba(6,182,212,.3); }
.price-options-summary { padding: 12px 16px; cursor: pointer; display: flex; align-items: center; gap: 10px; user-select: none; transition: all 0.2s ease; list-style: none; background: rgba(6,182,212,.05); }
.price-options-summary::-webkit-details-marker { display: none; }
.price-options-summary:hover { background: rgba(6,182,212,.12); }
.summary-icon { font-size: 16px; }
.summary-text { flex: 1; font-size: 13px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; }
.selected-price-row { display: flex; align-items: stretch; gap: 10px; margin-bottom: 12px; }
.selected-price-row > .selected-price-display { flex: 1; margin-bottom: 0; }

.authorized-prices-lock-btn {
  flex-shrink: 0;
  width: 48px;
  height: auto;
  border-radius: 8px;
  border: 1px solid rgba(6,182,212,.35);
  background: rgba(6,182,212,.08);
  color: var(--accent);
  font-size: 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}
.authorized-prices-lock-btn:hover { background: rgba(6,182,212,.18); transform: scale(1.08); }
.authorized-prices-lock-btn.unlocked { border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.12); }
.summary-arrow { font-size: 12px; color: var(--muted); transition: transform 0.3s ease; }
.price-options-collapsible[open] .summary-arrow { transform: rotate(180deg); }

.all-prices { padding: 12px; animation: slideDown 0.3s ease; }
.price-options-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }

/* Hide the legacy <details> permanently — replaced by #authorizedPricesModal */
.price-options-collapsible { display: none !important; }

/* ============================================
   AUTHORIZED PRICES MODAL
   Opens when 🔒 lock button is clicked.
   ============================================ */
.auth-prices-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-prices-modal[hidden] { display: none; }

.auth-prices-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}

.auth-prices-dialog {
  position: relative;
  width: min(560px, 100%);
  max-height: 85vh;
  background: linear-gradient(180deg, rgba(15,23,42,.98), rgba(2,6,23,.98));
  border: 1px solid rgba(6,182,212,.3);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(6,182,212,.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ismIn .25s ease;
}

.auth-prices-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.auth-prices-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #f1f5f9;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.04em;
}
.auth-prices-icon { font-size: 20px; }

.auth-prices-close {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: #cbd5e1;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: all .2s ease;
}
.auth-prices-close:hover {
  background: rgba(239,68,68,.15);
  border-color: rgba(239,68,68,.4);
  color: #fca5a5;
}

.auth-prices-body {
  padding: 18px 22px 24px;
  overflow-y: auto;
}

/* Modal body uses bigger, more clickable price options */
.auth-prices-body .price-options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.auth-prices-body .price-option {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all .2s ease;
}
.auth-prices-body .price-option:hover {
  background: rgba(6,182,212,.08);
  border-color: rgba(6,182,212,.4);
  transform: translateX(4px);
}
.auth-prices-body .price-option.selected {
  background: rgba(34,197,94,.10);
  border-color: rgba(34,197,94,.45);
}
.auth-prices-body .price-option-name { font-size: 14px; }
.auth-prices-body .price-option-value { font-size: 18px; font-weight: 800; font-family: 'Courier New', monospace; color: #22c55e; text-shadow: 0 0 8px rgba(34,197,94,0.4); }

/* Light mode support */
[data-theme="light"] .auth-prices-backdrop {
  background: rgba(10, 27, 58, 0.5);
}
[data-theme="light"] .auth-prices-dialog {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--sh-lg);
  color: var(--ink);
}
[data-theme="light"] .auth-prices-header h3 { color: var(--ink); }
[data-theme="light"] .auth-prices-header { border-bottom-color: var(--line); }
[data-theme="light"] .auth-prices-close {
  background: var(--paper-2);
  border-color: var(--line);
  color: var(--ink);
}
[data-theme="light"] .auth-prices-body .price-option {
  background: var(--paper-2);
  border-color: var(--line);
  color: var(--ink);
}
[data-theme="light"] .auth-prices-body .price-option:hover {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.price-option { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: all 0.2s ease; }
.price-option:hover { background: rgba(255,255,255,.06); border-color: rgba(6,182,212,.3); transform: translateX(4px); }
.price-option input[type="radio"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent); }
.price-option-label { flex: 1; display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.price-option-name { font-size: 13px; font-weight: 600; color: var(--text); }
.price-option-value { font-size: 16px; font-weight: 700; color: var(--accent2); font-family: 'Courier New', monospace; }
.price-option.selected { background: rgba(6,182,212,.1); border-color: var(--accent); box-shadow: 0 0 12px rgba(6,182,212,.2); }

/* ============================================
   WINDOW CONFIGURATION TRIGGER BUTTON (step 1)
   Visible only when category = Windows
   ============================================ */
#windowConfigTriggerRow { width: 100%; max-width: 320px; margin: 8px auto 0; }

.window-config-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.30);
  border-radius: 12px;
  color: #FFFFFF;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  font-family: inherit;
}
.window-config-trigger:hover:not(:disabled) {
  background: rgba(6, 182, 212, 0.14);
  border-color: rgba(6, 182, 212, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.15);
}
.window-config-trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.window-config-trigger .wct-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.window-config-trigger .wct-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.window-config-trigger .wct-label {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.window-config-trigger .wct-summary {
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.window-config-trigger .wct-arrow {
  color: #06b6d4;
  font-size: 18px;
  flex-shrink: 0;
}
.window-config-trigger:disabled .wct-arrow { color: rgba(255,255,255,0.3); }

/* ============================================
   WINDOW CONFIGURATION MODAL
   Hosts Glass Type / Size / Quantity rows
   ============================================ */
.window-config-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.window-config-modal[hidden] { display: none; }

.window-config-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 24, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.window-config-dialog {
  position: relative;
  width: min(620px, 100%);
  max-height: calc(100vh - 48px);
  background: linear-gradient(180deg, #0A1B3A 0%, #060F23 100%);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: wcm-pop 0.2s ease-out;
}
@keyframes wcm-pop { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.window-config-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.window-config-header h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #FFFFFF;
  flex: 1;
  letter-spacing: 0.02em;
}
.window-config-close {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: #FFFFFF;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: all .2s ease;
}
.window-config-close:hover {
  background: rgba(239,68,68,.15);
  border-color: rgba(239,68,68,.4);
}

/* Reference image banner — full width below header */
.window-config-banner {
  width: 100%;
  height: 140px;
  background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}
.window-config-banner[data-type="photo"] { padding: 0; }
.window-config-banner[data-type="emoji"] { padding: 12px; }
.window-config-banner .wcb-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.window-config-banner .wcb-emoji {
  font-size: 88px;
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

.window-config-body {
  padding: 20px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  counter-reset: wcm-step;
  /* Custom thin cyan scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(6, 182, 212, 0.4) transparent;
}
.window-config-body::-webkit-scrollbar { width: 6px; }
.window-config-body::-webkit-scrollbar-track { background: transparent; }
.window-config-body::-webkit-scrollbar-thumb {
  background: rgba(6, 182, 212, 0.35);
  border-radius: 3px;
}
.window-config-body::-webkit-scrollbar-thumb:hover {
  background: rgba(6, 182, 212, 0.55);
}

/* Center the Quantity counter inside the modal */
.window-config-body .qty-counter {
  align-self: center;
  width: auto;
}

/* Each row inside the modal becomes a numbered "section card".
   No !important on display so inline `display:none` (set by JS for hidden rows) wins. */
.window-config-body > .row {
  margin-top: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.window-config-body > .row:first-child { padding-top: 4px; }
.window-config-body > .row:last-child { border-bottom: none; padding-bottom: 4px; }
.window-config-body > .row > div {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* For the size row: stack size-section + qty-section vertically (each becomes its own numbered step) */
.window-config-body > #sizeRow > div {
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.window-config-body > #sizeRow > div:first-child {
  padding-top: 0;
  border-top: none;
}

/* Labels become section titles with auto-numbered "Step N" prefix */
.window-config-body > .row > div > label,
.window-config-body > #sizeRow > div > label {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #06b6d4;
  margin: 0;
}
/* Auto-numbered step prefix */
.window-config-body > .row > div > label::before,
.window-config-body > #sizeRow > div > label::before {
  counter-increment: wcm-step;
  content: "Step " counter(wcm-step) " · ";
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
}

/* Instruction text under section title */
.wcm-section-instruction {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin: -4px 0 4px 0;
  font-style: italic;
}

/* Allowed-range hint below size inputs */
.wcm-size-limits-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin: 4px 0 0 0;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
}

.window-config-footer {
  padding: 16px 22px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: flex;
  justify-content: flex-end;
}
.window-config-save {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: #FFFFFF;
  border: none;
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: all .2s ease;
  letter-spacing: 0.04em;
}
.window-config-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.3);
}

/* Note: when Windows layout is active, the rows are PHYSICALLY moved into
   the modal body by JS, so no CSS hide rule is needed for the column. */

/* Show the windowConfigTriggerRow only when in Windows layout */
body[data-current-wizard-step="1"] #standardFormContainer:not([data-layout="windows"]) #windowConfigTriggerRow,
body[data-current-wizard-step="1"] #standardFormContainer:not([data-layout="windows"]) #windowSummaryCard {
  display: none !important;
}
body[data-current-wizard-step="1"] #standardFormContainer[data-layout="windows"] #windowConfigTriggerRow {
  display: block !important;
}

/* ============================================
   WINDOW SUMMARY CARD — visual confirmation of
   configured details (Windows step 1 only)
   ============================================ */
.window-summary-card {
  width: 100%;
  max-width: 320px;
  margin: 12px auto 0;
  background: rgba(34, 197, 94, 0.05);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 12px;
  padding: 14px 16px;
  animation: fadeIn 0.3s ease;
}
.wsc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.wsc-icon { font-size: 16px; }
.wsc-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #22c55e;
}
.wsc-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wsc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}
.wsc-row .wsc-label {
  color: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
  min-width: 60px;
}
.wsc-row .wsc-value {
  color: #FFFFFF;
  font-weight: 600;
  flex: 1;
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
}

.muted{color:var(--muted)} .small{font-size:12px} .footer{margin-top:18px;color:var(--muted);font-size:12px}
.hint{font-size:12px;color:#a5f3fc;margin-top:6px}

/* Master Bathroom Warning */
.master-bathroom-warning { background: linear-gradient(135deg, rgba(251,191,36,.15) 0%, rgba(245,158,11,.15) 100%); border: 2px solid rgba(251,191,36,.4); border-radius: 10px; padding: 12px 16px; margin-top: 10px; display: flex; align-items: center; gap: 10px; animation: warningPulse 2s ease-in-out infinite; }
@keyframes warningPulse { 0%, 100% { box-shadow: 0 0 10px rgba(251,191,36,.3); } 50% { box-shadow: 0 0 20px rgba(251,191,36,.6); } }
.warning-icon { font-size: 20px; animation: warningShake 1s ease-in-out infinite; }
@keyframes warningShake { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } }
.warning-text { font-size: 13px; font-weight: 600; color: #fbbf24; line-height: 1.4; }

#managerToggle{cursor:pointer;font-size:16px;background:none;border:none;padding:0 5px;line-height:1}
#quote-items-list{margin-bottom:15px; border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:10px;}
.quote-item{display:flex; justify-content:space-between; align-items:flex-start; padding:10px 8px; border-radius:8px; background:rgba(12,17,30,.4); margin-bottom:8px; font-size:14px;}
.quote-item-details{flex-grow:1;}
.quote-item-title{font-weight:600; margin-bottom:4px;}
.quote-item-desc{font-size:12px; color:var(--muted); white-space:pre-wrap; line-height:1.4; margin-top:4px;}
.edit-item-btn{background:transparent; color:#06b6d4; padding:5px 8px; font-size:16px; cursor:pointer; border:none; flex-shrink:0; transition:all 0.2s ease;}
.edit-item-btn:hover{transform:scale(1.2); filter:brightness(1.3);}
.delete-item-btn{background:transparent; color:#ff5555; padding:5px 8px; font-size:16px; cursor:pointer; border:none; flex-shrink:0;}

#grand-total-box,
#list-price-box { background: rgba(12,17,30,.7); border: 1px solid var(--accent2); border-radius: 12px; padding: 14px 18px; margin-top: 15px; box-shadow: 0 0 20px rgba(34,197,94,.1); }
#grand-total-box label,
#list-price-box label { font-size: 13px; color: var(--muted); margin-bottom: 4px; display:block; }
#grand-total-box h2,
#list-price-box h2 { margin: 0; font-size: 26px; color: var(--accent2); line-height: 1.1; }
#list-price-box.grand-total-hidden { opacity: 0.3; pointer-events: none; background: rgba(12,17,30,.3); border: 1px solid rgba(156,163,175,.2); box-shadow: none; }
#list-price-box.grand-total-hidden label { color: rgba(156,163,175,.5); }
#list-price-box.grand-total-hidden h2 { font-size: 14px !important; color: rgba(156,163,175,.6) !important; font-weight: 400 !important; }
#list-price-box.grand-total-revealed { opacity: 1 !important; background: rgba(12,17,30,.7) !important; border: 1px solid var(--accent2) !important; box-shadow: 0 0 20px rgba(34,197,94,.1) !important; }
#list-price-box.grand-total-revealed label { color: var(--muted) !important; }
#list-price-box.grand-total-revealed h2 { font-size: 26px !important; color: var(--accent2) !important; font-weight: 700 !important; }
/* List Price: una sola línea, label izquierda, precio derecha, fuente reducida */
#list-price-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; }
#list-price-box label { margin: 0 !important; font-size: 13px; letter-spacing: 0.06em; }
#list-price-box h2,
#list-price-box.grand-total-revealed h2 { font-size: 18px !important; text-align: right; }
#list-price-box.grand-total-hidden h2 { font-size: 13px !important; text-align: right; }

.description-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.06); }
.description-section label { font-size: 13px; color: var(--accent); margin-bottom: 6px; }

.template-controls { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 8px; }
.template-controls > div:first-child { flex: 1; }
.template-btn { padding: 10px 14px; border-radius: 12px; font-weight: 600; cursor: pointer; border: none; font-size: 13px; white-space: nowrap; }
.template-btn-add { background: #06B6D4; color: #FFFFFF; box-shadow: 0 4px 12px rgba(6,182,212,.25); }
.template-btn-add:hover { background: #0891B2; box-shadow: 0 6px 16px rgba(6,182,212,.4); transform: translateY(-1px); }
.template-btn-clear { background: transparent; color: #ff6b6b; border: 1px solid rgba(255,107,107,.3); }
.template-btn-clear:hover { background: rgba(255,107,107,.1); border-color: rgba(255,107,107,.5); }
.template-btn-hide { background: transparent; color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.18); }
.template-btn-hide:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.32); color: #FFFFFF; }

/* ─── Custom Template Dropdown (replaces native select) ─── */
.custom-select-wrapper { position: relative; width: 100%; }

.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  color: #FFFFFF;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
  outline: none;
}
.custom-select-trigger:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
}
.custom-select-trigger[aria-expanded="true"] {
  background: rgba(6, 182, 212, 0.06);
  border-color: #06B6D4;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.18);
}
.custom-select-value { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.custom-select-arrow { color: #06B6D4; font-size: 12px; transition: transform 200ms ease; }
.custom-select-trigger[aria-expanded="true"] .custom-select-arrow { transform: rotate(180deg); }

.custom-select-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 320px;
  overflow-y: auto;
  background: #0a1a36;
  border: 1px solid rgba(6, 182, 212, 0.35);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  padding: 6px;
  animation: fadeIn 160ms ease;
}
.custom-select-panel::-webkit-scrollbar { width: 8px; }
.custom-select-panel::-webkit-scrollbar-thumb { background: rgba(6,182,212,.35); border-radius: 4px; }
.custom-select-panel::-webkit-scrollbar-track { background: rgba(255,255,255,.04); border-radius: 4px; }

.cs-group-label {
  padding: 8px 12px 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FF6B7A;
}
.cs-option {
  display: block;
  padding: 10px 14px;
  border-radius: 7px;
  color: #cbd5e1;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
  user-select: none;
}
.cs-option:hover {
  background: #06B6D4;
  color: #FFFFFF;
}
.cs-option.cs-option-selected {
  background: rgba(6, 182, 212, 0.2);
  color: #06B6D4;
  font-weight: 600;
}
.cs-option.cs-option-selected:hover {
  background: #06B6D4;
  color: #FFFFFF;
}

/* Size inputs */
.size-inputs { display: flex; align-items: center; gap: 8px; }
.size-inputs input { flex: 1; min-width: 0; }
.size-separator { font-size: 18px; font-weight: 600; color: var(--accent); user-select: none; flex-shrink: 0; }
.size-reference-btn { background: rgba(6,182,212,.15); border: 1px solid rgba(6,182,212,.3); color: var(--accent); padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; transition: all 0.2s ease; flex-shrink: 0; }
.size-reference-btn:hover { background: rgba(6,182,212,.25); border-color: var(--accent); transform: scale(1.05); }

.size-match-indicator { margin-top: 8px; padding: 10px 12px; border-radius: 8px; font-size: 13px; display: flex; align-items: center; gap: 8px; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
.size-match-indicator.match-exact { background: rgba(34,197,94,.15); border: 1px solid rgba(34,197,94,.3); color: #4ade80; }
.size-match-indicator.match-close { background: rgba(251,191,36,.15); border: 1px solid rgba(251,191,36,.3); color: #fbbf24; }
.size-match-indicator.match-far { background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.3); color: #f87171; }
.match-icon { font-size: 16px; flex-shrink: 0; }
.match-text { line-height: 1.4; flex-grow: 1; }
.match-price { font-weight: 600; margin-left: 4px; }

.size-limit-warning { margin-top: 8px; padding: 8px 12px; border-radius: 8px; font-size: 12px; background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.3); color: #f87171; animation: fadeIn 0.3s ease; }
.size-limit-hint { font-size: 11px; color: var(--muted); margin-top: 4px; font-style: italic; }

/* Special Discount */
#special-discount-box { background: transparent; border: none; border-radius: 0; padding: 6px 2px; margin-top: 8px; }
.discount-checkbox-label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12px; color: rgba(251,191,36,.85); font-weight: 500; margin-bottom: 0; }
.discount-checkbox-label input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; }
#special-discount-box #discount-inputs { margin-top: 10px; }
#discount-inputs { display: none; margin-top: 10px; }
#discount-inputs.active { display: block; animation: fadeIn 0.3s ease; }
.discount-result { margin-top: 10px; padding: 10px; background: rgba(34,197,94,.1); border-radius: 8px; border-left: 3px solid #22c55e; }
.discount-amount { font-size: 14px; color: #4ade80; font-weight: 600; margin-bottom: 4px; }
.discount-final { font-size: 18px; color: var(--accent2); font-weight: 700; }
.discount-savings-message { margin-top: 12px; padding: 12px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 8px; text-align: center; font-size: 15px; font-weight: 700; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3); }
.same-day-notice { margin-top: 16px; padding: 12px 16px; background: #fef3c7; border-left: 4px solid #f59e0b; border-radius: 6px; font-size: 13px; color: #92400e; line-height: 1.5; }

/* ========================================
   EXTRAS SYSTEM (Modal)
   ======================================== */
.extras-trigger-btn { width: 100%; padding: 12px 16px; background: linear-gradient(135deg, rgba(6,182,212,.15) 0%, rgba(34,197,94,.15) 100%); border: 2px solid rgba(6,182,212,.3); border-radius: 12px; color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 8px; }
.extras-trigger-btn:hover { background: linear-gradient(135deg, rgba(6,182,212,.25) 0%, rgba(34,197,94,.25) 100%); border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(6,182,212,.3); }
.extras-btn-icon { font-size: 18px; animation: sparkle 2s ease-in-out infinite; }
@keyframes sparkle { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.2) rotate(10deg); } }
.extras-btn-count { font-size: 12px; color: #FF6B7A; font-weight: 700; }

.extras-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.3s ease; }
.extras-modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.7); backdrop-filter: blur(4px); }
.extras-modal-content { position: relative; background: var(--card); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; width: 90%; max-width: 700px; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.5); animation: slideUp 0.3s ease; }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }

.extras-modal-header { padding: 20px 24px; border-bottom: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.extras-modal-header h3 { margin: 0; font-size: 20px; color: var(--accent); display: flex; align-items: center; gap: 8px; }
.extras-modal-close { background: transparent; border: 1px solid rgba(255,255,255,.15); color: var(--muted); width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 16px; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; }
.extras-modal-close:hover { background: rgba(255,107,107,.15); border-color: #ff6b6b; color: #ff6b6b; transform: rotate(90deg); }
.extras-modal-body { padding: 24px; overflow-y: auto; flex: 1; }
.extras-modal-body::-webkit-scrollbar { width: 8px; }
.extras-modal-body::-webkit-scrollbar-track { background: rgba(255,255,255,.05); border-radius: 4px; }
.extras-modal-body::-webkit-scrollbar-thumb { background: rgba(6,182,212,.3); border-radius: 4px; }
.extras-modal-body::-webkit-scrollbar-thumb:hover { background: rgba(6,182,212,.5); }
.extras-modal-footer { padding: 16px 24px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: flex-end; flex-shrink: 0; }
.extras-modal-done { padding: 12px 32px; background: var(--accent2); border: none; border-radius: 10px; color: #001018; font-size: 15px; font-weight: 700; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 8px; }
.extras-modal-done:hover { background: #1ea34a; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(34,197,94,.4); }

/* Edit Modal */
.edit-modal-content { max-width: 700px !important; width: 95%; max-height: 85vh; }
.edit-item-info { background: rgba(6,182,212,.08); border: 2px solid rgba(6,182,212,.2); border-radius: 12px; padding: 16px 20px; margin-bottom: 24px; }
.edit-item-name { font-size: 18px; font-weight: 700; color: var(--accent); line-height: 1.4; }
.edit-quantity-section { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid rgba(255,255,255,.1); }
.edit-section-label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 12px; }
.edit-label-icon { font-size: 18px; }
.edit-quantity-input { width: 100%; max-width: 200px; padding: 12px 16px; background: rgba(255,255,255,.05); border: 2px solid rgba(255,255,255,.1); border-radius: 10px; color: var(--text); font-size: 16px; font-weight: 600; transition: all 0.2s ease; }
.edit-quantity-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(6,182,212,.2); background: rgba(255,255,255,.08); }
.edit-upgrades-section { margin-bottom: 16px; }
.edit-upgrades-section .edit-section-label { margin-bottom: 16px; }

.edit-modal-total { background: linear-gradient(135deg, rgba(34,197,94,.15) 0%, rgba(6,182,212,.15) 100%); border: 2px solid var(--accent2); border-radius: 12px; padding: 16px 24px; margin: 20px 24px 0 24px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 12px rgba(34,197,94,.2); animation: pulse-glow 2s ease-in-out infinite; }
@keyframes pulse-glow { 0%, 100% { box-shadow: 0 4px 12px rgba(34,197,94,.2); } 50% { box-shadow: 0 4px 20px rgba(34,197,94,.4); } }
.edit-modal-total-label { font-size: 15px; font-weight: 600; color: var(--text); text-transform: uppercase; letter-spacing: 0.5px; }
.edit-modal-total-value { font-size: 28px; font-weight: 800; color: var(--accent2); text-shadow: 0 0 10px rgba(34,197,94,.5); font-family: 'Courier New', monospace; letter-spacing: 1px; }

.extras-modal-cancel { padding: 12px 24px; background: transparent; border: 2px solid rgba(255,255,255,.2); border-radius: 10px; color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; margin-right: 12px; }
.extras-modal-cancel:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.3); }
.extras-modal-update { padding: 12px 32px; background: #f59e0b; border: none; border-radius: 10px; color: #001018; font-size: 15px; font-weight: 700; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; gap: 8px; }
.extras-modal-update:hover { background: #f97316; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(249,115,22,.4); }
.extras-modal-update:active { transform: translateY(0); }

/* ========================================
   CLIENT & EXPORT
   ======================================== */
.client-export-section { border-top: 1px solid rgba(255,255,255,.1); margin-top: 15px; padding-top: 15px; }
.section-title { margin: 0 0 16px 0; font-size: 16px; display: flex; align-items: center; gap: 8px; color: var(--accent); }
.section-icon { font-size: 18px; }

.client-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
@media (max-width: 768px) { .client-info-grid { grid-template-columns: 1fr; } }

.form-field { display: flex; flex-direction: column; }
.form-field label { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--text); }
.label-icon { font-size: 14px; }
.sales-rep-email { font-size: 12px; color: var(--accent); margin-top: 4px; display: none; }
.field-hint { font-size: 11px; color: var(--muted); margin-top: 4px; margin-bottom: 0; }

.advanced-options { background: rgba(6,182,212,.05); border: 1px solid rgba(6,182,212,.2); border-radius: 10px; margin-bottom: 16px; overflow: hidden; transition: all 0.3s ease; }
.advanced-options[open] { background: rgba(6,182,212,.08); border-color: rgba(6,182,212,.3); }
.advanced-options-header { padding: 12px 16px; cursor: pointer; display: flex; align-items: center; gap: 10px; user-select: none; transition: all 0.2s ease; list-style: none; }
.advanced-options-header::-webkit-details-marker { display: none; }
.advanced-options-header:hover { background: rgba(6,182,212,.1); }
.advanced-icon { font-size: 16px; transition: transform 0.3s ease; }
.advanced-options[open] .advanced-icon { transform: rotate(45deg); }
.advanced-title { flex: 1; font-size: 14px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; }
.advanced-arrow { font-size: 12px; color: var(--muted); transition: transform 0.3s ease; }
.advanced-options[open] .advanced-arrow { transform: rotate(180deg); }
.advanced-options-content { padding: 16px; border-top: 1px solid rgba(6,182,212,.15); animation: slideDown 0.3s ease; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

.email-routing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 768px) { .email-routing-grid { grid-template-columns: 1fr; } }

.notes-section { margin-bottom: 16px; padding: 14px; background: rgba(6,182,212,.05); border: 1px solid rgba(6,182,212,.15); border-radius: 10px; }
.notes-section label { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--text); }
.notes-section textarea { width: 100%; padding: 10px 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; color: var(--text); font-size: 13px; font-family: inherit; resize: vertical; transition: all 0.2s ease; }
.notes-section textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(6,182,212,.2); background: rgba(255,255,255,.08); }
.notes-section textarea::placeholder { color: var(--muted); font-style: italic; }

.export-action-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 16px; background: linear-gradient(135deg, rgba(6,182,212,.08) 0%, rgba(34,197,94,.08) 100%); border: 2px solid rgba(6,182,212,.2); border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
@media (max-width: 768px) { .export-action-bar { grid-template-columns: 1fr 1fr; gap: 8px; } }

.action-btn { padding: 14px 12px; border: none; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.2s ease; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; overflow: hidden; }
.action-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent); transition: left 0.5s ease; }
.action-btn:hover::before { left: 100%; }
.action-btn-icon { font-size: 24px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.action-btn-text { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }

.action-btn-pdf { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); color: white; box-shadow: 0 4px 12px rgba(239,68,68,.3); }
.action-btn-pdf:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(239,68,68,.5); }
.action-btn-email { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; box-shadow: 0 4px 12px rgba(59,130,246,.3); }
.action-btn-email:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(59,130,246,.5); }
.action-btn-whatsapp { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); color: white; box-shadow: 0 4px 12px rgba(34,197,94,.3); }
.action-btn-whatsapp:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(34,197,94,.5); }
.action-btn-copy { background: linear-gradient(135deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.05) 100%); color: var(--text); border: 2px solid rgba(255,255,255,.2); box-shadow: 0 4px 12px rgba(0,0,0,.2); }
.action-btn-copy:hover { transform: translateY(-3px); background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.1) 100%); border-color: rgba(255,255,255,.3); box-shadow: 0 6px 20px rgba(0,0,0,.3); }
.action-btn-update { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: white; box-shadow: 0 4px 12px rgba(139,92,246,.3); }
.action-btn-update:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(139,92,246,.5); }
/* Admin-only buttons — amber/orange, visually distinct from client-facing actions */
.action-btn-admin { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; box-shadow: 0 4px 12px rgba(245,158,11,.3); }
.action-btn-admin:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(245,158,11,.5); }

/* Admin-only element visibility — CSS-first, timing-independent.
   Hidden by default (fails closed). Shown only when body carries
   data-user-role="admin", which is set in the auth-guard before any
   UI renders. JS-based toggling was removed (caused race conditions
   when buttons entered DOM after the JS check ran). */
.admin-only { display: none !important; }
body[data-user-role="admin"] .admin-only { display: flex !important; }
.action-btn:active { transform: translateY(0); }

.extras-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.extra-item { background: rgba(6,182,212,.08); border: 2px solid rgba(6,182,212,.2); border-radius: 12px; padding: 12px 14px; cursor: pointer; transition: all 0.2s ease; display: flex; flex-direction: column; gap: 10px; user-select: none; min-height: 80px; position: relative; }
.extra-item:hover { background: rgba(6,182,212,.15); border-color: rgba(6,182,212,.4); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(6,182,212,.2); }
.extra-item:active { transform: scale(0.98); transition: transform 0.1s ease; }
.extra-item.selected { background: rgba(34,197,94,.15); border-color: var(--accent2); box-shadow: 0 0 0 2px rgba(34,197,94,.1); }
.extra-item.selected:hover { background: rgba(34,197,94,.2); border-color: var(--accent2); }
.extra-item input[type="checkbox"] { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; pointer-events: none; cursor: pointer; }
.extra-item-header { display: flex; align-items: flex-start; gap: 10px; width: 100%; }
.extra-item-content { flex: 1; min-width: 0; }
.extra-item-name { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 4px; line-height: 1.3; }
.extra-item-price { font-size: 14px; font-weight: 700; color: var(--accent2); }

.extra-qty-controls { display: none; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.1); pointer-events: auto; position: relative; z-index: 1; }
.extra-qty-btn { width: 28px; height: 28px; background: rgba(6,182,212,.15); border: 1px solid rgba(6,182,212,.3); border-radius: 6px; color: var(--accent); font-size: 16px; font-weight: 700; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; flex-shrink: 0; pointer-events: auto; position: relative; z-index: 1; }
.extra-qty-btn:hover { background: rgba(6,182,212,.3); border-color: var(--accent); transform: scale(1.1); }
.extra-qty-btn:active { transform: scale(0.95); }
.extra-qty-input { width: 50px; height: 28px; text-align: center; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 6px; color: var(--text); font-size: 14px; font-weight: 600; padding: 0; pointer-events: auto; position: relative; z-index: 1; cursor: text; }
.extra-qty-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(6,182,212,.2); }
.extra-qty-input::-webkit-inner-spin-button, .extra-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.extra-qty-input[type=number] { appearance: textfield; -moz-appearance: textfield; }

@media (max-width: 640px) { .extras-grid { grid-template-columns: 1fr; } }

.extras-in-quote { margin-top: 10px; padding: 10px; background: rgba(34,197,94,.08); border-left: 3px solid var(--accent2); border-radius: 6px; }
.extras-in-quote-title { font-size: 12px; font-weight: 700; color: var(--accent2); margin-bottom: 6px; letter-spacing: 0.5px; }
.extra-in-quote-item { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; font-size: 12px; color: var(--text); gap: 8px; }
.extra-in-quote-item span { flex: 1; line-height: 1.4; }
/* Read-only variant used for Kitchen wizard luxury upgrades — no X
   delete button (the wizard owns picks; removal happens by editing
   the wizard, not by ripping individual rows out of the cart). */
.extra-in-quote-item.kw-readonly { justify-content: flex-start; }

/* Technical Services block — cyan twin of the upgrades green pill.
   Same shape and spacing, different accent color so the seller can
   tell at a glance that this row is "trades the customer pays for"
   vs "optional luxury extras". */
.tech-in-quote { margin-top: 10px; padding: 10px; background: rgba(6,182,212,.08); border-left: 3px solid var(--accent, #06b6d4); border-radius: 6px; }
.tech-in-quote-title { font-size: 12px; font-weight: 700; color: var(--accent, #06b6d4); margin-bottom: 6px; letter-spacing: 0.5px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tech-in-quote-item { display: flex; align-items: center; padding: 4px 0; font-size: 12px; color: var(--text); gap: 8px; }
.tech-in-quote-item span { flex: 1; line-height: 1.4; }

/* Header alignment for the existing extras (green) block — section now
   carries its own Edit button on the right when it represents a kitchen
   wizard pick (luxury upgrades). Layout matches tech/cabinets/counters. */
.extras-in-quote-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Cabinets block — amber/wood tone so it reads "structural / built
   parts" as opposed to the cool stone-y counter block. */
.cabinets-in-quote { margin-top: 10px; padding: 10px; background: rgba(245,158,11,.08); border-left: 3px solid #f59e0b; border-radius: 6px; }
.cabinets-in-quote-title { font-size: 12px; font-weight: 700; color: #f59e0b; margin-bottom: 6px; letter-spacing: 0.5px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cabinets-in-quote-item { display: flex; align-items: center; padding: 4px 0; font-size: 12px; color: var(--text); gap: 8px; }
.cabinets-in-quote-item span { flex: 1; line-height: 1.4; }

/* Counters block — cool indigo/blue tone so the seller's eye reads it
   as "the stone half of the package" vs the warm cabinet half above. */
.counters-in-quote { margin-top: 10px; padding: 10px; background: rgba(99,102,241,.08); border-left: 3px solid #6366f1; border-radius: 6px; }
.counters-in-quote-title { font-size: 12px; font-weight: 700; color: #818cf8; margin-bottom: 6px; letter-spacing: 0.5px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.counters-in-quote-item { display: flex; align-items: center; padding: 4px 0; font-size: 12px; color: var(--text); gap: 8px; }
.counters-in-quote-item span { flex: 1; line-height: 1.4; }

/* Inline Edit button anchored to each section header (cabinets,
   counters, tech, luxury upgrades). Compact pill that inherits the
   section's accent color so it doesn't fight the title visually. */
.kw-section-edit-btn {
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.3px;
  line-height: 1.4;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.kw-section-edit-btn:hover {
  background: currentColor;
  color: #0c111e;
}
.kw-section-edit-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.delete-extra-btn { background: transparent; color: #ff6b6b; border: 1px solid rgba(255,107,107,.3); border-radius: 4px; padding: 2px 6px; font-size: 11px; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; }
.delete-extra-btn:hover { background: rgba(255,107,107,.15); border-color: #ff6b6b; transform: scale(1.1); }

/* ========================================
   CLIENT DATA MODAL
   ======================================== */
.client-data-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; display: flex; align-items: center; justify-content: center; animation: modalFadeIn 0.3s ease; }
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
.client-data-modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.client-data-modal-content { position: relative; background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border: 2px solid rgba(34,197,94,.3); border-radius: 20px; max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto; box-shadow: 0 25px 50px -12px rgba(0,0,0,.8), 0 0 0 1px rgba(34,197,94,.2), 0 0 60px rgba(34,197,94,.15); animation: modalSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes modalSlideUp { from { transform: translateY(50px) scale(0.95); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

.client-data-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 50%;
  color: #cbd5e1;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.client-data-modal-close:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.55);
  color: #fca5a5;
  transform: scale(1.05);
}
.client-data-modal-close:active { transform: scale(0.95); }
.client-data-modal-close:focus-visible {
  outline: 2px solid var(--accent2, #22c55e);
  outline-offset: 2px;
}

/* Trailing hint glyph inside the live-price pill — same right-aligned
   position the lock button occupies on the legacy Step 02 price bar,
   but non-interactive (it's just a status indicator). */
.kw-live-price-trailing {
  font-size: 18px;
  color: rgba(34, 197, 94, 0.7);
  margin-left: auto;
  padding: 0 4px;
  user-select: none;
}
/* Pending-pick hint under the running-total bar — visible only on
   Step 4 (Counters) when the seller has entered countertop area but
   not picked a stone yet. Minimal: amber text, no box, no border. */
.kw-live-price-pending {
  margin-top: 6px;
  color: #fcd34d;
  font-size: 12px;
  line-height: 1.35;
  font-style: italic;
  opacity: 0.85;
}
/* `hidden` attribute must beat the surrounding `display` rules so the
   element actually vanishes when the JS toggles it off — otherwise an
   empty amber stripe lingers under the price bar on every step. */
.kw-live-price-pending[hidden] {
  display: none !important;
}
.kw-live-price-pending::before {
  content: '💡 ';
}

/* Subtle pulse when the running total just changed — class is toggled
   on/off by JS after each recompute. */
#kitchen-wizard-live-price-box.kw-live-price-flash .selected-price-value {
  animation: kwLivePriceFlash 0.45s ease-out;
}
@keyframes kwLivePriceFlash {
  0%   { transform: scale(1);   color: #22c55e; }
  35%  { transform: scale(1.07); color: #4ade80; }
  100% { transform: scale(1);   color: var(--accent2, #22c55e); }
}

.client-data-modal-header { padding: 30px 30px 20px; text-align: center; border-bottom: 1px solid rgba(34,197,94,.2); }
.client-data-modal-header h2 { margin: 0 0 8px 0; font-size: 26px; font-weight: 700; color: var(--accent2); text-shadow: 0 0 20px rgba(34,197,94,.3); }
.client-data-subtitle { margin: 0; font-size: 14px; color: #94a3b8; font-weight: 400; }
.client-data-modal-body { padding: 30px; display: flex; flex-direction: column; gap: 20px; }
.client-data-field { display: flex; flex-direction: column; gap: 8px; }
.client-data-field label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #e2e8f0; }
.field-icon { font-size: 18px; filter: drop-shadow(0 0 8px rgba(34,197,94,.4)); }
.field-label { flex: 1; }
.field-required { color: #ff6b6b; font-size: 16px; font-weight: 700; }

.client-data-input, .client-data-select { width: 100%; padding: 14px 16px; background: rgba(15,23,42,.8); border: 2px solid rgba(71,85,105,.5); border-radius: 10px; color: #f1f5f9; font-size: 15px; font-family: 'Inter', -apple-system, sans-serif; transition: all 0.3s ease; box-sizing: border-box; }
.client-data-select { cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2322c55e' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.client-data-select option { background: #0f172a; color: #f1f5f9; padding: 10px; }
.client-data-input:focus, .client-data-select:focus { outline: none; border-color: var(--accent2); background: rgba(15,23,42,1); box-shadow: 0 0 0 3px rgba(34,197,94,.1), 0 0 20px rgba(34,197,94,.2); }
.client-data-input::placeholder { color: #64748b; }
.client-data-input:invalid:not(:placeholder-shown) { border-color: #ff6b6b; }
.client-data-input:valid:not(:placeholder-shown) { border-color: var(--accent2); }

.client-data-modal-footer { padding: 20px 30px 30px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.start-quote-btn { width: 100%; padding: 16px 24px; background: linear-gradient(135deg, var(--accent2) 0%, #059669 100%); border: none; border-radius: 12px; color: white; font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(34,197,94,.3); position: relative; overflow: hidden; }
.start-quote-btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255,255,255,.2); transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s; }
.start-quote-btn:hover::before { width: 300px; height: 300px; }
.start-quote-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(34,197,94,.4); }
.start-quote-btn:active { transform: translateY(0); }
.start-quote-btn:disabled { background: linear-gradient(135deg, #475569 0%, #334155 100%); cursor: not-allowed; opacity: 0.5; box-shadow: none; }
.start-quote-btn:disabled:hover { transform: none; }
.btn-icon { font-size: 20px; position: relative; z-index: 1; }
.btn-text { position: relative; z-index: 1; }
.client-data-hint { margin: 0; font-size: 12px; color: #94a3b8; text-align: center; }

body.modal-open .container { filter: blur(5px); pointer-events: none; user-select: none; }
body.modal-open { overflow: hidden; }

@media (max-width: 600px) {
  .client-data-modal-content { max-width: 95%; border-radius: 15px; }
  .client-data-modal-header { padding: 20px 20px 15px; }
  .client-data-modal-header h2 { font-size: 22px; }
  .client-data-modal-body { padding: 20px; gap: 16px; }
  .client-data-input { padding: 12px 14px; font-size: 14px; }
  .start-quote-btn { padding: 14px 20px; font-size: 15px; }
}

/* Grand Total states */
#grand-total-box.grand-total-hidden { opacity: 0.3; pointer-events: none; transition: all 0.5s ease; background: rgba(12,17,30,.3); border: 1px solid rgba(156,163,175,.2); box-shadow: none; }
#grand-total-box.grand-total-hidden label { color: rgba(156,163,175,.5); }
#grand-total-box.grand-total-hidden h2 { font-size: 14px !important; color: rgba(156,163,175,.6) !important; font-weight: 400 !important; }
#grand-total-box.grand-total-revealed { opacity: 1 !important; animation: revealPrice 0.8s ease; background: rgba(12,17,30,.7) !important; border: 1px solid var(--accent2) !important; box-shadow: 0 0 20px rgba(34,197,94,.1) !important; }
@keyframes revealPrice { 0% { opacity: 0.3; transform: scale(0.95); } 50% { transform: scale(1.05); box-shadow: 0 0 30px rgba(34,197,94,.3); } 100% { opacity: 1; transform: scale(1); } }
#grand-total-box.grand-total-revealed label { color: var(--muted) !important; }
#grand-total-box.grand-total-revealed h2 { font-size: 26px !important; color: var(--accent2) !important; font-weight: 700 !important; }

/* Primary Action Button */
.primary-action-container { margin: 20px 0; padding: 0; }
.primary-action-btn { width: 100%; padding: 18px 24px; background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); color: white; border: none; border-radius: 14px; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 12px; box-shadow: 0 6px 20px rgba(6,182,212,.4); position: relative; overflow: hidden; }
.primary-action-btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); transition: left 0.6s ease; }
.primary-action-btn:hover::before { left: 100%; }
.primary-action-btn:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(6,182,212,.6); background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%); }
.primary-action-btn:active:not(:disabled) { transform: translateY(0); box-shadow: 0 4px 15px rgba(6,182,212,.4); }
.primary-action-btn:disabled { background: linear-gradient(135deg, rgba(156,163,175,.3) 0%, rgba(107,114,128,.3) 100%); color: var(--muted); cursor: not-allowed; box-shadow: none; opacity: 0.5; }
.primary-action-icon { font-size: 24px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.primary-action-text { font-size: 15px; }
.primary-action-btn.loading { pointer-events: none; background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); animation: pulse 1.5s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 6px 20px rgba(251,191,36,.4); } 50% { box-shadow: 0 6px 30px rgba(251,191,36,.7); } }
.primary-action-btn.success { background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); box-shadow: 0 6px 20px rgba(34,197,94,.5); }

@media (max-width: 768px) {
  .primary-action-btn { padding: 16px 20px; font-size: 14px; }
  .primary-action-icon { font-size: 20px; }
  .primary-action-text { font-size: 13px; }
}

/* ========================================
   FLOORING NEW WIZARD (4 steps)
   ======================================== */
.flooring-wizard,
#kitchenWizardContainer { background: rgba(6,182,212,.05); border: 1px solid rgba(6,182,212,.2); border-radius: 14px; padding: 18px; animation: fadeIn 0.3s ease; }
body[data-current-wizard-step="1"] #standardFormContainer,
body[data-current-wizard-step="2"] #standardFormContainer {
  background: linear-gradient(180deg, #060F23 0%, #0A1B3A 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 32px 28px 16px;       /* bottom padding included so footer has breathing room */
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  animation: fadeIn 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* ============================================
   STEP 2: Project Description preview area
   Mimics the visual weight of step 1's image
   ============================================ */
body[data-current-wizard-step="2"] .desc-section-title {
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #06b6d4;
  margin: 0 0 4px 0;
  text-align: center;
}

body[data-current-wizard-step="2"] .desc-edit-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.28);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #FFFFFF;
  text-align: left;
}
body[data-current-wizard-step="2"] .desc-edit-trigger:hover {
  background: rgba(6, 182, 212, 0.14);
  border-color: rgba(6, 182, 212, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.15);
}
body[data-current-wizard-step="2"] .desc-edit-trigger .template-trigger-icon {
  color: #06b6d4;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
body[data-current-wizard-step="2"] .desc-edit-trigger .template-trigger-content {
  flex: 1;
  min-width: 0;
}
body[data-current-wizard-step="2"] .desc-edit-trigger .template-trigger-label {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
body[data-current-wizard-step="2"] .desc-edit-trigger .template-trigger-arrow {
  color: #06b6d4;
  font-size: 18px;
  flex-shrink: 0;
}

/* Preview area — looks like a read-only textarea
   Height tuned so step 2 card matches step 1 card height
   (step 1: image ~280px; step 2: button ~50px + preview ~210px + gap ~20px) */
.desc-preview-area {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 20px 22px;
  min-height: 200px;
  max-height: 240px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.desc-preview-area .desc-preview-placeholder {
  color: rgba(255, 255, 255, 0.4);
  font-size: 13px;
  text-align: center;
  margin: auto;
  line-height: 1.6;
  font-style: italic;
}
.desc-preview-area .desc-preview-text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  line-height: 1.6;
  font-family: 'Inter Tight', system-ui, sans-serif;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
  overflow-y: auto;
  max-height: 320px;
}
/* When text is present, hide placeholder via class */
.desc-preview-area.has-content .desc-preview-placeholder { display: none; }

/* Light mode */
[data-theme="light"][data-current-wizard-step="2"] .desc-section-title { color: var(--brand-navy); }
[data-theme="light"][data-current-wizard-step="2"] .desc-edit-trigger {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
[data-theme="light"][data-current-wizard-step="2"] .desc-edit-trigger:hover {
  background: var(--paper-2);
  border-color: var(--brand-navy);
}
[data-theme="light"][data-current-wizard-step="2"] .desc-edit-trigger .template-trigger-label { color: var(--ink); }
[data-theme="light"] .desc-preview-area {
  background: var(--paper-2);
  border-color: var(--line);
}
[data-theme="light"] .desc-preview-area .desc-preview-placeholder { color: var(--muted-2); }
[data-theme="light"] .desc-preview-area .desc-preview-text { color: var(--ink); }
body[data-current-wizard-step="1"] #standardFormContainer::-webkit-scrollbar { width: 4px; }
body[data-current-wizard-step="1"] #standardFormContainer::-webkit-scrollbar-track { background: transparent; }
body[data-current-wizard-step="1"] #standardFormContainer::-webkit-scrollbar-thumb { background: rgba(6,182,212,.35); border-radius: 4px; }

/* Content area inside the scrollable container grows to fill space */
body[data-current-wizard-step="1"] #standardFormContainer > *:not(#price-preview-box) {
  flex-shrink: 0;
}

/* Steps 1 & 2: Price preview as the internal footer (last child of #standardFormContainer) */
body[data-current-wizard-step="1"] #price-preview-box,
body[data-current-wizard-step="2"] #price-preview-box {
  /* Extend edge-to-edge (negate 28px horizontal padding) and to the bottom */
  margin: 16px -28px -16px -28px;  /* negative bottom margin = -padding-bottom of container */
  padding: 16px 28px 26px;
  /* Override .price-preview-container defaults */
  border-top: 1px solid rgba(6, 182, 212, 0.3) !important;
  /* Footer glass-dark background */
  background: linear-gradient(0deg, rgba(2, 6, 20, 0.97) 0%, rgba(6, 15, 35, 0.85) 100%);
  border-radius: 0 0 18px 18px;
}
body[data-current-wizard-step="1"] #standardFormContainer .flooring-wizard,
body[data-current-wizard-step="1"] #standardFormContainer #kitchenWizardContainer { background: transparent; border: none; padding: 0; }

.wizard-steps-bar { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 20px; padding: 0 8px; }
.wizard-step-indicator { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: default; opacity: 0.4; transition: all 0.3s ease; }
.wizard-step-indicator.active { opacity: 1; }
.wizard-step-indicator.completed { opacity: 0.7; }
.wizard-step-num { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--muted); transition: all 0.3s ease; }
.wizard-step-indicator.active .wizard-step-num { background: var(--accent); border-color: var(--accent); color: #001018; box-shadow: 0 0 12px rgba(6,182,212,.4); }
.wizard-step-indicator.completed .wizard-step-num { background: var(--accent2); border-color: var(--accent2); color: #001018; }
.wizard-step-connector { flex: 1; max-width: 50px; height: 2px; background: rgba(255,255,255,.1); margin: 0 4px; margin-bottom: 18px; }

.wizard-step-panel { animation: fadeIn 0.3s ease; }
.wizard-panel-title { font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 14px 0; }

.wizard-options-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.wizard-option { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: all 0.2s ease; }
.wizard-option:hover { background: rgba(255,255,255,.06); border-color: rgba(6,182,212,.3); transform: translateX(3px); }
.wizard-option.selected { background: rgba(6,182,212,.12); border-color: var(--accent); box-shadow: 0 0 10px rgba(6,182,212,.2); }
.wizard-option-radio { font-size: 16px; color: var(--accent); width: 20px; text-align: center; flex-shrink: 0; }
.wizard-option-name { font-size: 13px; font-weight: 600; color: var(--text); }

.wizard-options-sm { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
.wizard-option-sm { padding: 8px 10px; justify-content: center; text-align: center; flex-direction: column; gap: 4px; }
.wizard-option-sm .wizard-option-radio { font-size: 12px; }
.wizard-option-sm .wizard-option-name { font-size: 12px; }

.wizard-upgrades-grid { display: flex; flex-direction: column; gap: 8px; }
.wizard-upgrade-item { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: all 0.2s ease; }
.wizard-upgrade-item.selected { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.3); }
.wizard-upgrade-label { display: flex; align-items: center; gap: 10px; cursor: pointer; flex: 1; margin: 0; }
.wizard-upgrade-label input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent2); cursor: pointer; flex-shrink: 0; }
.wizard-upgrade-name { font-size: 13px; font-weight: 600; color: var(--text); }
.wizard-upgrade-detail { font-size: 11px; color: var(--muted); margin-top: 2px; }
.wizard-upgrade-qty { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.wizard-upgrade-section-title { font-size: 12px; font-weight: 600; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 12px; margin-bottom: 6px; }

.wizard-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.wizard-nav-btn { padding: 10px 20px; border-radius: 10px; font-weight: 600; font-size: 13px; cursor: pointer; border: 1px solid rgba(255,255,255,.15); background: transparent; color: var(--text); transition: all 0.2s ease; }
.wizard-nav-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); }
.wizard-nav-next { background: var(--accent); color: #001018; border-color: var(--accent); margin-left: auto; }
.wizard-nav-next:hover { background: #0891b2; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(6,182,212,.3); }

.wizard-summary { background: rgba(12,17,30,.5); border-radius: 10px; padding: 14px; }
.wizard-summary-table { width: 100%; border-collapse: collapse; margin: 0; }
.wizard-summary-table td { padding: 6px 4px; font-size: 13px; border: none; }
.wizard-summary-table .ws-label { color: var(--muted); text-align: left; }
.wizard-summary-table .ws-value { color: var(--text); text-align: right; font-weight: 600; }
.wizard-summary-table .ws-total .ws-label { color: var(--accent); font-weight: 700; font-size: 14px; }
.wizard-summary-table .ws-total .ws-value { color: var(--accent2); font-weight: 800; font-size: 16px; }

/* ========================================
   KITCHEN NEW WIZARD (6 steps) — Phase 1 design tokens applied.
   See :root for --wiz-* tokens (max-width, card-radius, image
   aspect ratios, grid mins). Hardcoded sizes have been replaced.
   ======================================== */
.wizard-header { margin-bottom: 0; }

/* Step 1 — Style choice grid (auto-fit so 2 cards on desktop,
   1 column on phones, gap pulled from token). */
.wizard-cards-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--wiz-grid-primary-min), 1fr));
  gap: var(--wiz-card-gap);
  margin-bottom: var(--wiz-card-gap);
}

.wizard-card {
  background: rgba(6, 182, 212, 0.05);
  border: 2px solid rgba(6, 182, 212, 0.2);
  border-radius: var(--wiz-card-radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  position: relative;
}
.wizard-card:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 8px 18px rgba(6, 182, 212, 0.18); }
.wizard-card.selected { border-color: var(--accent2); box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3); background: rgba(34, 197, 94, 0.05); }
.wizard-card.selected::after { content: '✓'; position: absolute; top: 10px; right: 10px; background: var(--accent2); color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; z-index: 10; }

/* Image area uses aspect-ratio instead of fixed 200px so cards
   keep their proportions on any viewport. */
.card-image {
  aspect-ratio: var(--wiz-img-primary);
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease;
}
.wizard-card:hover .card-image { transform: scale(1.02); }

.card-content {
  padding: 16px 18px;
  background: rgba(15, 23, 42, 0.8);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}
.card-content h4 { margin: 0 0 8px 0; color: var(--text); font-size: 18px; }
.card-content p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.4; }
.wizard-footer { text-align: right; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 16px; margin-top: 8px; }
@media (max-width: 600px) { .wizard-cards-layout { flex-direction: column; } }

/* Kitchen Wizard - Step 2 (Measurements) */
.measure-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 20px; margin-top: 20px; }
.measure-card { background: rgba(15, 23, 42, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.measure-card.simple-measure { flex-direction: row; justify-content: space-between; align-items: center; padding: 15px; }
.measure-img { height: 140px; background-size: cover; background-position: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.measure-input-area { padding: 15px; }
.measure-input-area label { display: block; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.measure-input-group { display: flex; align-items: center; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(6, 182, 212, 0.2); border-radius: 8px; overflow: hidden; transition: border-color 0.2s; }
.measure-input-group:focus-within { border-color: var(--accent2); box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2); }
.measure-input-group input { flex: 1; background: transparent; border: none; padding: 10px 15px; color: white; font-size: 16px; text-align: right; outline: none; }
.measure-input-group input::-webkit-outer-spin-button, .measure-input-group input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.measure-input-group input[type=number] { -moz-appearance: textfield; }
.measure-input-group .unit { padding: 10px 15px; background: rgba(6, 182, 212, 0.1); color: var(--accent2); font-weight: 700; border-left: 1px solid rgba(6, 182, 212, 0.2); }

.toggle-switch { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.toggle-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.toggle-switch input { opacity: 0; width: 0; height: 0; display: none; }
.toggle-slider { position: relative; display: inline-block; width: 40px; height: 22px; background-color: rgba(255, 255, 255, 0.1); border-radius: 22px; transition: .4s; }
.toggle-slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: #94a3b8; border-radius: 50%; transition: .4s; }
.toggle-switch input:checked + .toggle-slider { background-color: var(--accent2); }
.toggle-switch input:checked + .toggle-slider:before { background-color: white; transform: translateX(18px); }

@media (max-width: 600px) { .measure-grid { grid-template-columns: 1fr; } }

/* Kitchen Wizard - Step 3 (Colors) */
.color-catalog { margin: 20px 0; }
.color-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; min-height: 320px; }
.color-card { background: rgba(15, 23, 42, 0.4); border: 2px solid rgba(255, 255, 255, 0.05); border-radius: 12px; overflow: hidden; cursor: pointer; transition: all 0.2s ease; position: relative; display: flex; flex-direction: column; }
.color-card:hover { transform: translateY(-3px); border-color: rgba(6, 182, 212, 0.5); box-shadow: 0 4px 12px rgba(6, 182, 212, 0.15); }
.color-card.selected { border-color: var(--accent2); box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3); }
.color-card.selected::after { content: '✓'; position: absolute; top: 8px; right: 8px; background: var(--accent2); color: white; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 12px; z-index: 10; }
.color-swatch-img { height: 110px; background-size: cover; background-position: center; border-bottom: 1px solid rgba(255, 255, 255, 0.05); transition: transform 0.3s ease; position: relative; }
.color-card:hover .color-swatch-img { transform: scale(1.05); }

/* 🔍 zoom button — top-LEFT of the swatch (top-right is reserved for
   the green selected ✓ on .color-card.selected::after). Reveals on
   card hover. Clicking it opens the shared #upgradeImageLightbox
   with the color name + SW code as caption. */
.color-card__zoom {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(2, 8, 24, 0.7);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: zoom-in;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.18s, transform 0.15s, background 0.15s;
  padding: 0;
  z-index: 3;
}
.color-card:hover .color-card__zoom,
.color-card__zoom:focus-visible {
  opacity: 1;
}
.color-card__zoom:hover {
  background: var(--accent, #06b6d4);
  color: #001018;
  transform: scale(1.1);
}
/* Don't scale-zoom the swatch when hovering the button — it shifts
   the image around behind the cursor which feels janky. */
.color-card:has(.color-card__zoom:hover) .color-swatch-img {
  transform: none;
}
.color-info { padding: 10px; text-align: center; background: rgba(15, 23, 42, 0.8); flex: 1; z-index: 2; }
.color-info h5 { margin: 0; color: var(--text); font-size: 14px; }
.color-pagination { display: flex; justify-content: center; align-items: center; margin-top: 20px; gap: 15px; }
.page-indicator { font-size: 13px; font-weight: 600; color: var(--muted); }
.small-btn { padding: 5px 12px; font-size: 12px; }

@media (max-width: 600px) { .color-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .color-grid { grid-template-columns: 1fr; } }

/* Kitchen Wizard - Step 4 (Countertops) */
.area-badge { background: rgba(34, 197, 94, 0.15); color: var(--accent2); padding: 4px 10px; border-radius: 6px; font-size: 13px; font-weight: 700; border: 1px solid rgba(34, 197, 94, 0.3); }
.radio-btn-label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text); cursor: pointer; padding: 6px 10px; background: rgba(255,255,255,0.05); border-radius: 6px; border: 1px solid rgba(255,255,255,0.1); transition: all 0.2s; }
.radio-btn-label:hover { background: rgba(255,255,255,0.1); }
.radio-btn-label:has(input:checked) { background: rgba(6, 182, 212, 0.15); border-color: var(--accent); color: #fff; }

/* Kitchen Wizard - Step 5 (Stones & Edges) */
.filter-btn { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: var(--text); padding: 6px 14px; border-radius: 20px; cursor: pointer; font-size: 13px; white-space: nowrap; transition: all 0.2s; }
.filter-btn.active, .filter-btn:hover { background: var(--accent2); color: #fff; border-color: var(--accent2); }

.stone-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; max-height: 400px; overflow-y: auto; padding-right: 5px; }
.stone-grid::-webkit-scrollbar { width: 6px; }
.stone-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 10px; }

.stone-card { position: relative; background: rgba(15, 23, 42, 0.4); border: 2px solid rgba(255,255,255,0.05); border-radius: 8px; overflow: hidden; cursor: pointer; transition: all 0.2s; }
.stone-card:hover { transform: translateY(-2px); border-color: rgba(6, 182, 212, 0.5); }
.stone-card.selected { border-color: var(--accent2); box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.3); }
.stone-card.selected::after { content: '✓'; position: absolute; top: 5px; right: 5px; background: var(--accent2); color: white; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 11px; z-index: 5; }
.stone-img-container { height: 90px; background-size: cover; background-position: center; position: relative; }
.stone-zoom { position: absolute; top: 5px; left: 5px; background: rgba(0,0,0,0.6); color: #fff; width: 24px; height: 24px; border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: zoom-in; font-size: 12px; z-index: 10; transition: background 0.2s; }
.stone-zoom:hover { background: var(--accent); }
.stone-info { padding: 8px; text-align: center; background: rgba(15, 23, 42, 0.8); }
.stone-info h6 { margin: 0; font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stone-info .cat-tag { font-size: 10px; color: var(--muted); }

.edge-card { background: rgba(15, 23, 42, 0.4); border: 2px solid rgba(255,255,255,0.05); border-radius: 8px; cursor: pointer; display: flex; align-items: center; padding: 10px; gap: 12px; transition: all 0.2s; position: relative; }
.edge-card:hover { border-color: rgba(6, 182, 212, 0.5); background: rgba(255,255,255,0.05); }
.edge-card.selected { border-color: var(--accent2); background: rgba(34, 197, 94, 0.1); }
.edge-img-box { width: 50px; height: 50px; background: #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.edge-img { max-width: 90%; max-height: 90%; }
.edge-info h5 { margin: 0 0 4px 0; font-size: 13px; color: var(--text); }
.edge-info p { margin: 0; font-size: 11px; color: var(--muted); }
.edge-card.selected::after { content: '✓'; position: absolute; top: 50%; transform: translateY(-50%); right: 15px; color: var(--accent2); font-size: 20px; font-weight: bold; }

/* Stone Preview Modal */
.stone-modal { position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); display: flex; flex-direction: column; justify-content: center; align-items: center; }
.stone-modal-content { max-width: 90%; max-height: 80vh; border: 3px solid #fff; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.5); }
.stone-modal-close { position: absolute; top: 20px; right: 35px; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; }
#stoneModalCaption { margin-top: 15px; color: #fff; font-size: 18px; letter-spacing: 1px; }

@media (max-width: 600px) {
  .stone-grid { grid-template-columns: repeat(2, 1fr); }
  .edge-grid { grid-template-columns: 1fr !important; }
}

/* Kitchen Wizard - Step 6 (Upgrades) */
.upgrade-title { margin: 0 0 12px 0; color: var(--accent2); font-size: 15px; text-transform: uppercase; letter-spacing: 0.5px; border-left: 3px solid var(--accent2); padding-left: 10px; }
.service-card { background: rgba(15, 23, 42, 0.4); border: 1px solid rgba(255,255,255,0.05); border-radius: 10px; padding: 15px; }
.radio-group-vertical { display: flex; flex-direction: column; gap: 8px; }
.radio-option { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }
.radio-option input { accent-color: var(--accent2); }
.form-field-mini label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 5px; text-transform: uppercase; }
.form-field-mini select { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: white; padding: 8px; border-radius: 6px; font-size: 13px; }
.form-field-mini select option { background: #1e293b; color: white; }

.upgrade-checklist-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.check-card { background: rgba(15, 23, 42, 0.4); border: 1px solid rgba(255,255,255,0.05); border-radius: 10px; padding: 12px; display: flex; align-items: center; gap: 12px; cursor: pointer; position: relative; transition: all 0.2s; }
.check-card:hover { background: rgba(255,255,255,0.05); border-color: rgba(6, 182, 212, 0.3); }
.check-card:has(.upgrade-check:checked) { border-color: var(--accent2); background: rgba(34, 197, 94, 0.05); }
.check-icon { font-size: 24px; }
.check-info h6 { margin: 0; font-size: 13px; color: var(--text); }
.check-info p { margin: 0; font-size: 10px; color: var(--muted); }
.upgrade-check { display: none; }
.check-card::after { content: ''; position: absolute; top: 10px; right: 10px; width: 16px; height: 16px; border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; background: transparent; }
.check-card:has(.upgrade-check:checked)::after { background: var(--accent2); border-color: var(--accent2); content: '✓'; color: white; font-size: 10px; display: flex; align-items: center; justify-content: center; }

@media (max-width: 600px) {
  .upgrade-checklist-grid { grid-template-columns: 1fr; }
}


/* ==========================================================
   WIZARD LAYOUT — single column mode
   ========================================================== */

/* Ocultar card-right en Steps 1-2 */
body[data-current-wizard-step="1"] .card-right,
body[data-current-wizard-step="2"] .card-right {
  display: none !important;
}

/* Ocultar card-left en Steps 3-4 */
body[data-current-wizard-step="3"] .card-left,
body[data-current-wizard-step="4"] .card-left,
body[data-current-wizard-step="5"] .card-left {
  display: none !important;
}

/* Centrar la card activa cuando el wizard está activo */
body[data-current-wizard-step] .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

body[data-current-wizard-step] .card {
  max-width: 860px;
  width: 100%;
  min-height: 340px;
  padding: 32px 40px;
  margin: 0 auto;
  justify-self: center;
}

@media (max-width: 768px) {
  body[data-current-wizard-step] .card {
    width: calc(100% - 16px);
    padding: 16px;
  }
}

/* ==========================================================
   WIZARD PROGRESS BAR
   ========================================================== */

.wizard-progress-bar,
.wizard-progress-wrap {
  display: none;
  width: 100%;
  margin: 0 0 18px 0;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}
body[data-current-wizard-step="1"] #wizardProgressBar,
body[data-current-wizard-step="2"] #wizardProgressBar,
body[data-current-wizard-step="3"] #wizardProgressBar,
body[data-current-wizard-step="4"] #wizardProgressBar,
body[data-current-wizard-step="5"] #wizardProgressBar {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.card #wizardProgressBar { display: block !important; }
/* Force-hide price preview box outside steps 1 and 2 (overrides JS inline display:block) */
/* Step 1: visible for standard services (Kitchen NEW / Flooring NEW hide it themselves) */
body:not([data-current-wizard-step="1"]):not([data-current-wizard-step="2"]) #price-preview-box { display: none !important; }

/* ==========================================================
   STANDARD STEP 1 — REDESIGNED COMPONENTS
   (only for non-sub-wizard categories)
   ========================================================== */

/* Item Selection Panel Button — boutique glass like Step 0 */
.item-selection-panel-btn {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: rgba(15, 23, 42, 0.62);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  color: #F8FAFC;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  transition: transform 280ms cubic-bezier(.4,0,.2,1), background 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 6px 18px rgba(0,0,0,.25);
}
.item-selection-panel-btn::before {
  content: "";
  position: absolute;
  top: 0; left: 14%; right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  pointer-events: none;
}
.item-selection-panel-btn:hover {
  transform: translateY(-2px);
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 24px rgba(0,0,0,.32);
}
.item-selection-panel-btn:hover::before {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent);
}
.item-selection-panel-btn:active { transform: translateY(0); }

.isp-thumb {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  flex-shrink: 0;
  overflow: hidden;
  color: #E2E8F0;
  transition: color 300ms ease, border-color 300ms ease;
}
.isp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.item-selection-panel-btn:hover .isp-thumb { color: #06B6D4; border-color: rgba(6,182,212,.35); }

.isp-info { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; }
.isp-title {
  font-size: 12px;
  font-weight: 600;
  color: #F8FAFC;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  transition: color 300ms ease;
}
.isp-sub { font-size: 11px; color: #94a3b8; letter-spacing: 0.06em; }
.isp-chevron { color: #64748b; font-size: 14px; transition: color 300ms ease, transform 300ms ease; }
.item-selection-panel-btn:hover .isp-title { color: #06B6D4; }
.item-selection-panel-btn:hover .isp-chevron { color: #06B6D4; transform: translateY(2px); }

/* Item Selection Modal */
.item-selection-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; }
.item-selection-modal[hidden] { display: none; }
.ism-backdrop { position: absolute; inset: 0; background: rgba(2,6,23,.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ism-dialog {
  position: relative;
  width: min(900px, 100%);
  max-height: 85vh;
  background: linear-gradient(180deg, rgba(15,23,42,.98), rgba(2,6,23,.98));
  border: 1px solid rgba(6,182,212,.3);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 60px rgba(6,182,212,.15);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: ismIn .25s ease;
}
@keyframes ismIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.ism-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,.06); }
.ism-header h3 { margin: 0; font-size: 18px; color: #f1f5f9; }
.ism-close { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #cbd5e1; width: 32px; height: 32px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.ism-close:hover { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.4); color: #fca5a5; }
.ism-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; padding: 20px; overflow-y: auto; }
.ism-card {
  position: relative;
  background: rgba(15, 23, 42, 0.62);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 12px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 22px rgba(0,0,0,.28);
  transition: transform 280ms cubic-bezier(.4,0,.2,1), background 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
}
.ism-card::before {
  content: "";
  position: absolute;
  top: 0; left: 14%; right: 14%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  pointer-events: none;
}
.ism-card:hover {
  transform: translateY(-4px);
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 30px rgba(0,0,0,.4);
}
.ism-card:hover::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent); }

.ism-card.selected { border-color: rgba(6,182,212,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(6,182,212,.35), 0 12px 28px rgba(0,0,0,.4); }

.ism-card-thumb {
  height: 100px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: center; justify-content: center;
  font-size: 42px;
  overflow: hidden;
  color: #E2E8F0;
  transition: color 300ms ease, border-color 300ms ease;
}
.ism-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ism-card:hover .ism-card-thumb { color: #06B6D4; border-color: rgba(6,182,212,.25); }

.ism-card-title {
  font-size: 12px;
  font-weight: 600;
  color: #F8FAFC;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  line-height: 1.35;
  transition: color 300ms ease;
}
.ism-card:hover .ism-card-title { color: #06B6D4; }
.ism-card-desc { font-size: 11px; color: #94a3b8; line-height: 1.5; letter-spacing: 0.04em; }
.ism-card-price { font-size: 12px; font-weight: 700; color: #06B6D4; margin-top: auto; letter-spacing: 0.06em; }

.ism-card-check {
  position: absolute; top: 12px; right: 12px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #06B6D4;
  color: #0F172A;
  display: none; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
  box-shadow: 0 0 0 3px rgba(6,182,212,.18);
}
.ism-card.selected .ism-card-check { display: flex; }

/* ─── Standard Services Step 1 — Flooring/Kitchen NEW-inspired layout ─── */

/* Panel header title (mirrors .wizard-panel-title from sub-wizards) */
.std-panel-title {
  font-size: 18px;
  font-weight: 600;
  color: #FFFFFF;
  margin: 0 0 22px 0;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  letter-spacing: -0.01em;
  text-align: center;
}

/* ============================================================
   STEP 1 — Standard Services form (matches Client Modal style)
   Scoped to non-sub-wizard categories
   ============================================================ */

/* Section labels (Service/Item, Quantity) — JetBrains Mono uppercase */
body[data-current-wizard-step="1"] #standardFormContainer #categoryItemRow > div > label,
body[data-current-wizard-step="1"] #standardFormContainer #qtyRow > div > label,
body[data-current-wizard-step="1"] #standardFormContainer #glassTypeRow > div > label,
body[data-current-wizard-step="1"] #standardFormContainer .row > div > label {
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Menlo', 'Consolas', monospace !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin-bottom: 10px !important;
}

/* Inputs / selects inside standard form — modal style */
body[data-current-wizard-step="1"] #standardFormContainer input[type="text"],
body[data-current-wizard-step="1"] #standardFormContainer input[type="number"],
body[data-current-wizard-step="1"] #standardFormContainer input[type="email"],
body[data-current-wizard-step="1"] #standardFormContainer select {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 10px !important;
  color: #FFFFFF !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 13px 14px !important;
  width: 100%;
  box-sizing: border-box;
  outline: none !important;
  appearance: none;
  -webkit-appearance: none;
  transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
body[data-current-wizard-step="1"] #standardFormContainer select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%2306B6D4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 36px !important;
}
body[data-current-wizard-step="1"] #standardFormContainer input::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
  opacity: 1 !important;
}
/* Native <select> dropdown options: reset to dark text so they're readable
   (white color from the parent <select> makes options invisible on some browsers) */
body[data-current-wizard-step="1"] #standardFormContainer select option {
  color: #0f172a !important;
  background-color: #ffffff !important;
}
body[data-current-wizard-step="1"] #standardFormContainer input:hover,
body[data-current-wizard-step="1"] #standardFormContainer select:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
}
body[data-current-wizard-step="1"] #standardFormContainer input:focus,
body[data-current-wizard-step="1"] #standardFormContainer select:focus {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: #06B6D4 !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.22) !important;
}

/* Item Selection Panel button — modal-style glass */
body[data-current-wizard-step="1"] #standardFormContainer #itemSelectionPanelBtn.item-selection-panel-btn {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
body[data-current-wizard-step="1"] #standardFormContainer #itemSelectionPanelBtn.item-selection-panel-btn::before { display: none; }
body[data-current-wizard-step="1"] #standardFormContainer #itemSelectionPanelBtn.item-selection-panel-btn:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
  box-shadow: none !important;
}
body[data-current-wizard-step="1"] #standardFormContainer #itemSelectionPanelBtn .isp-thumb {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
body[data-current-wizard-step="1"] #standardFormContainer #itemSelectionPanelBtn .isp-title { color: #FFFFFF; }
body[data-current-wizard-step="1"] #standardFormContainer #itemSelectionPanelBtn .isp-sub { color: rgba(255, 255, 255, 0.55); }
body[data-current-wizard-step="1"] #standardFormContainer #itemSelectionPanelBtn:hover .isp-title { color: #06B6D4; }

/* Quantity counter — modal-style */
body[data-current-wizard-step="1"] #standardFormContainer .qty-counter {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
}
body[data-current-wizard-step="1"] #standardFormContainer .qty-counter-input {
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  font-size: 30px !important;
}
body[data-current-wizard-step="1"] #standardFormContainer .qty-counter-btn {
  color: rgba(255, 255, 255, 0.7) !important;
}
body[data-current-wizard-step="1"] #standardFormContainer .qty-counter-btn:hover {
  background: rgba(196, 30, 46, 0.7) !important;
  border-color: rgba(196, 30, 46, 0.9) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 12px rgba(196,30,46,.25) !important;
}
body[data-current-wizard-step="1"] #standardFormContainer .qty-counter-hint {
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  letter-spacing: 0.04em !important;
  font-style: normal !important;
}

/* ── Step 1: 2-column layout (standard services) ────────────────────────────
   LEFT  → reference image (square)
   RIGHT → Service/Item · Quantity · Upgrades (vertical stack)
   For Windows items: image hidden, form takes full width (current behavior).
   ─────────────────────────────────────────────────────────────────────── */

.step1-2col-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.step1-form-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

#customItemDescriptionDiv {
  grid-column: 1 / -1; /* span full width inside the 2-col grid */
  width: 100%;
}

#customItemDescription {
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 8px;
  resize: vertical;
  min-height: 80px;
  width: 100%;
  box-sizing: border-box;
  background: var(--surface, #0f172a);
  color: var(--text, #e5e7eb);
  border: 1px solid var(--line, rgba(255,255,255,0.1));
}

/* Step 1 → 2-col grid by default (image left, form right) */
body[data-current-wizard-step="1"] #standardFormContainer .step1-2col-wrapper {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-areas: "image form" !important;
  gap: 22px !important;
  align-items: stretch !important;
}

/* Image: explicit grid area = left column */
body[data-current-wizard-step="1"] #standardFormContainer .step1-2col-wrapper > #step1-item-image {
  grid-area: image !important;
  height: auto;
  align-self: stretch;
  min-width: 0;
}

/* Form: explicit grid area = right column */
body[data-current-wizard-step="1"] #standardFormContainer .step1-2col-wrapper > .step1-form-stack {
  grid-area: form !important;
  min-width: 0;
  width: 100%;
  align-items: center !important; /* center children horizontally (Service/Item, Qty, Upgrades) */
}

/* Service/Item row centered inside the right column */
body[data-current-wizard-step="1"] #standardFormContainer .step1-form-stack > #categoryItemRow {
  width: 100%;
  max-width: 320px;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
body[data-current-wizard-step="1"] #standardFormContainer .step1-form-stack > #categoryItemRow > div {
  width: 100%;
  text-align: center;
}
body[data-current-wizard-step="1"] #standardFormContainer .step1-form-stack > #categoryItemRow #standardItemSelectContainer {
  text-align: center;
  width: 100%;
}
body[data-current-wizard-step="1"] #standardFormContainer .step1-form-stack > #categoryItemRow #standardItemSelectContainer > label {
  text-align: center !important;
  width: 100%;
  display: block;
}
body[data-current-wizard-step="1"] #standardFormContainer .step1-form-stack > #categoryItemRow #itemSelectionPanelBtn {
  margin: 0 auto !important;
  width: 100% !important;
}

/* Windows layout → same 2-col grid (image left, Glass/Size/Qty right) */
/* Inherits the default grid layout — no overrides needed */

/* Hide ADD UPGRADES + qty-upgrades-row wrapper for Windows (Glass Type replaces it) */
body[data-current-wizard-step="1"] #standardFormContainer[data-layout="windows"] #extras-button-container,
body[data-current-wizard-step="1"] #standardFormContainer[data-layout="windows"] .qty-upgrades-row {
  display: none !important;
}

/* Windows form rows centered with consistent max-width */
body[data-current-wizard-step="1"] #standardFormContainer[data-layout="windows"] .step1-form-stack > #sizeRow,
body[data-current-wizard-step="1"] #standardFormContainer[data-layout="windows"] .step1-form-stack > #glassTypeRow,
body[data-current-wizard-step="1"] #standardFormContainer[data-layout="windows"] .step1-form-stack > #standardDoorPriceRow {
  width: 100%;
  max-width: 320px;
  margin: 0 auto !important;
}

/* sizeRow: stack Size (left div) on top, Quantity (right div) below — both full width */
body[data-current-wizard-step="1"] #standardFormContainer[data-layout="windows"] .step1-form-stack > #sizeRow {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}
body[data-current-wizard-step="1"] #standardFormContainer[data-layout="windows"] .step1-form-stack > #sizeRow > div,
body[data-current-wizard-step="1"] #standardFormContainer[data-layout="windows"] .step1-form-stack > #glassTypeRow > div {
  width: 100% !important;
}
body[data-current-wizard-step="1"] #standardFormContainer[data-layout="windows"] .step1-form-stack > #sizeRow > div > label,
body[data-current-wizard-step="1"] #standardFormContainer[data-layout="windows"] .step1-form-stack > #glassTypeRow > div > label {
  text-align: center !important;
  display: block !important;
  width: 100%;
}

/* Size inputs row (W × H + 🔍): inline, centered, compact */
body[data-current-wizard-step="1"] #standardFormContainer[data-layout="windows"] .step1-form-stack .size-inputs {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: nowrap;
}
body[data-current-wizard-step="1"] #standardFormContainer[data-layout="windows"] .step1-form-stack .size-inputs > input[type="number"] {
  width: 80px !important;
  min-width: 0;
  text-align: center;
}

/* Quantity input (the right div inside sizeRow) — full width, centered */
body[data-current-wizard-step="1"] #standardFormContainer[data-layout="windows"] .step1-form-stack > #sizeRow > div:last-child > input[type="number"] {
  width: 100% !important;
  text-align: center;
}

/* Wizard layout (Flooring NEW): hide the 2-col wrapper, sub-wizard takes over */
body[data-current-wizard-step="1"] #standardFormContainer[data-layout="wizard"] .step1-2col-wrapper {
  display: none !important;
}

/* ── qty-upgrades-row: vertical stack inside the right column ────────────── */
.qty-upgrades-row {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Step 1: stack qty above upgrades, both full-width inside the right column */
body[data-current-wizard-step="1"] #standardFormContainer .qty-upgrades-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 14px !important;
  margin-top: 0 !important;
  position: static !important;
}

body[data-current-wizard-step="1"] #standardFormContainer .qty-upgrades-row > #qtyRow {
  flex: 0 0 auto !important;
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

body[data-current-wizard-step="1"] #standardFormContainer .qty-upgrades-row > #extras-button-container {
  position: static !important;
  transform: none !important;
  width: 100% !important;
  border-top: none !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ── Step 1: Reference image for the selected service item ──────────────
   Shown below qty/upgrades row. Photo or emoji fallback, with caption.
   ─────────────────────────────────────────────────────────────────────── */
#step1-item-image {
  display: none; /* hidden outside step 1 */
}

body[data-current-wizard-step="1"] #standardFormContainer #step1-item-image {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
  min-height: 320px;
}

/* Photo variant — fills the left column */
body[data-current-wizard-step="1"] #standardFormContainer #step1-item-image .ref-img-photo {
  width: 100%;
  flex: 1 1 auto;
  min-height: 320px;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

/* Emoji variant — large emoji centered */
body[data-current-wizard-step="1"] #standardFormContainer #step1-item-image .ref-img-emoji {
  font-size: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex: 1 1 auto;
  min-height: 220px;
  background: rgba(6, 182, 212, 0.05);
}

/* Caption below image/emoji */
body[data-current-wizard-step="1"] #standardFormContainer #step1-item-image .ref-img-caption {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  padding: 10px 14px 12px;
  width: 100%;
  background: rgba(0, 0, 0, 0.25);
}

/* Light mode overrides */
body[data-theme="light"][data-current-wizard-step="1"] #standardFormContainer #step1-item-image {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}
body[data-theme="light"][data-current-wizard-step="1"] #standardFormContainer #step1-item-image .ref-img-emoji {
  background: rgba(6, 182, 212, 0.06);
}
body[data-theme="light"][data-current-wizard-step="1"] #standardFormContainer #step1-item-image .ref-img-caption {
  color: rgba(15, 23, 42, 0.55);
  background: rgba(0, 0, 0, 0.05);
}

/* Full-width ISP button — spacious like flooring/kitchen sub-wizard panels */
#itemSelectionPanelBtn.item-selection-panel-btn {
  padding: 14px 18px;
}
#itemSelectionPanelBtn .isp-thumb { width: 46px; height: 46px; font-size: 22px; }

/* Quantity Counter — centered by default, left-aligned in step 1 side-by-side layout */
#qtyRow { display: flex; flex-direction: column; align-items: center; }
#qtyRow > div:not([style*="display:none"]) { display: flex; flex-direction: column; align-items: center; width: 100%; }
#qtyRow > div > label { text-align: center; width: 100%; }

/* Step 1: qty counter centered inside its row (right column in 2-col layout) */
body[data-current-wizard-step="1"] #standardFormContainer #qtyRow {
  align-items: center !important;
}
body[data-current-wizard-step="1"] #standardFormContainer #qtyRow > div:not([style*="display:none"]) {
  align-items: center !important;
}
body[data-current-wizard-step="1"] #standardFormContainer #qtyRow > div > label {
  text-align: center !important;
}

.qty-counter {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid rgba(6,182,212,.22);
  border-radius: 14px;
  overflow: hidden;
  background: rgba(6,182,212,.04);
  height: 56px;
  width: 220px;
}
.qty-counter-btn {
  width: 30px; height: 30px;
  margin: 0 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  color: #94a3b8; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.qty-counter-btn svg { width: 13px; height: 13px; }
.qty-counter-btn:hover {
  background: rgba(196, 30, 46, 0.7);
  border-color: rgba(196, 30, 46, 0.9);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(196,30,46,.25);
}
.qty-counter-btn:active { background: #9B0D24; transform: scale(0.95); }
.qty-counter-input {
  flex: 1; text-align: center;
  background: transparent; border: 0;
  color: #f1f5f9; font-size: 30px; font-weight: 700;
  padding: 4px; height: 100%;
  -moz-appearance: textfield;
  letter-spacing: -0.01em;
}
.qty-counter-input::-webkit-inner-spin-button, .qty-counter-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.qty-counter-input:focus { outline: none; }
.qty-counter-hint { font-size: 11px !important; font-style: italic; color: #94a3b8 !important; margin-top: 8px !important; letter-spacing: 0.04em; }

/* Add Upgrades section */
#extras-button-container {
  text-align: center;
  margin-top: 0 !important;
  border-top: 1px solid rgba(6,182,212,.12);
  padding-top: 18px;
  width: 100%; /* overridden to auto in step 1 via abs position */
}
/* Step 1: no divider, auto width (absolute-positioned to the right) */
body[data-current-wizard-step="1"] #standardFormContainer #extras-button-container {
  border-top: none !important;
  padding-top: 0 !important;
  width: auto !important;
}
#openExtrasBtn.extras-trigger-btn {
  display: inline-flex !important;
  width: auto !important;
  padding: 13px 32px !important;
  background: rgba(6,182,212,.06) !important;
  border: 1px solid rgba(6,182,212,.28) !important;
  border-radius: 12px !important;
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: none !important;
  transition: background .2s, box-shadow .2s, transform .15s, border-color .2s !important;
}
#openExtrasBtn.extras-trigger-btn .extras-btn-text { color: #FFFFFF !important; }
#openExtrasBtn.extras-trigger-btn:hover {
  background: rgba(6,182,212,.14) !important;
  border-color: rgba(6,182,212,.45) !important;
  box-shadow: 0 4px 16px rgba(6,182,212,.15) !important;
  transform: translateY(-1px);
}
.extras-btn-icon { margin-right: 8px; }

/* Breathing space between main card and footer */
body[data-current-wizard-step="1"] .container,
body[data-current-wizard-step="2"] .container { margin-bottom: 28px; }

/* ─── New full-width Progress Bar (light SaaS style) ─── */
.wizard-progress-inner {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 16px 28px;
}

/* Left: breadcrumb */
.wizard-progress-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  font-size: 13px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.wpb-crumb { font-weight: 600; }
.wpb-crumb-current { color: #0f172a; }
.wpb-crumb-sep { color: #cbd5e1; font-weight: 400; }

/* Center: numbered steps with connectors */
.wizard-progress-steps {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 0;
}
.wp-step {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.55;
  transition: opacity 0.3s ease;
}
.wp-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #94a3b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.wp-step-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.wp-step-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94a3b8;
  transition: color 0.3s ease;
}
.wp-step-name {
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  transition: color 0.3s ease;
}
.wp-step-connector {
  width: 36px;
  height: 1px;
  background: #cbd5e1;
  margin: 0 14px;
  flex-shrink: 0;
}

/* Active step (current) */
body[data-current-wizard-step="1"] .wp-step[data-step="1"],
body[data-current-wizard-step="2"] .wp-step[data-step="2"],
body[data-current-wizard-step="3"] .wp-step[data-step="3"],
body[data-current-wizard-step="4"] .wp-step[data-step="4"],
body[data-current-wizard-step="5"] .wp-step[data-step="5"] {
  opacity: 1;
}
body[data-current-wizard-step="1"] .wp-step[data-step="1"] .wp-step-num,
body[data-current-wizard-step="2"] .wp-step[data-step="2"] .wp-step-num,
body[data-current-wizard-step="3"] .wp-step[data-step="3"] .wp-step-num,
body[data-current-wizard-step="4"] .wp-step[data-step="4"] .wp-step-num,
body[data-current-wizard-step="5"] .wp-step[data-step="5"] .wp-step-num {
  background: #0B1E3F;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(11, 30, 63, 0.25);
}
body[data-current-wizard-step="1"] .wp-step[data-step="1"] .wp-step-name,
body[data-current-wizard-step="2"] .wp-step[data-step="2"] .wp-step-name,
body[data-current-wizard-step="3"] .wp-step[data-step="3"] .wp-step-name,
body[data-current-wizard-step="4"] .wp-step[data-step="4"] .wp-step-name,
body[data-current-wizard-step="5"] .wp-step[data-step="5"] .wp-step-name {
  color: #0f172a;
}
body[data-current-wizard-step="1"] .wp-step[data-step="1"] .wp-step-label,
body[data-current-wizard-step="2"] .wp-step[data-step="2"] .wp-step-label,
body[data-current-wizard-step="3"] .wp-step[data-step="3"] .wp-step-label,
body[data-current-wizard-step="4"] .wp-step[data-step="4"] .wp-step-label,
body[data-current-wizard-step="5"] .wp-step[data-step="5"] .wp-step-label {
  color: #64748b;
}

/* Completed steps (before active) */
body[data-current-wizard-step="2"] .wp-step[data-step="1"],
body[data-current-wizard-step="3"] .wp-step[data-step="1"],
body[data-current-wizard-step="3"] .wp-step[data-step="2"],
body[data-current-wizard-step="4"] .wp-step[data-step="1"],
body[data-current-wizard-step="4"] .wp-step[data-step="2"],
body[data-current-wizard-step="4"] .wp-step[data-step="3"],
body[data-current-wizard-step="5"] .wp-step[data-step="1"],
body[data-current-wizard-step="5"] .wp-step[data-step="2"],
body[data-current-wizard-step="5"] .wp-step[data-step="3"],
body[data-current-wizard-step="5"] .wp-step[data-step="4"] {
  opacity: 0.85;
}
body[data-current-wizard-step="2"] .wp-step[data-step="1"] .wp-step-num,
body[data-current-wizard-step="3"] .wp-step[data-step="1"] .wp-step-num,
body[data-current-wizard-step="3"] .wp-step[data-step="2"] .wp-step-num,
body[data-current-wizard-step="4"] .wp-step[data-step="1"] .wp-step-num,
body[data-current-wizard-step="4"] .wp-step[data-step="2"] .wp-step-num,
body[data-current-wizard-step="4"] .wp-step[data-step="3"] .wp-step-num,
body[data-current-wizard-step="5"] .wp-step[data-step="1"] .wp-step-num,
body[data-current-wizard-step="5"] .wp-step[data-step="2"] .wp-step-num,
body[data-current-wizard-step="5"] .wp-step[data-step="3"] .wp-step-num,
body[data-current-wizard-step="5"] .wp-step[data-step="4"] .wp-step-num {
  background: #06b6d4;
  color: #ffffff;
}

/* Right: autosave */
.wizard-progress-autosave {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: end;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  white-space: nowrap;
}

/* Footer placement: the autosave pill sits on the right edge of the
   sticky footer, immediately to the LEFT of the Next button. Keeps
   it visible while the seller works without competing with the
   Change Service button in the middle. */
.wizard-nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-width: 0;
}
.wizard-main-footer .wizard-progress-autosave {
  justify-self: auto;
  font-size: 11px;
  color: #94a3b8;
  letter-spacing: 0.02em;
}
.wizard-main-footer .wpb-autosave-dot {
  width: 6px;
  height: 6px;
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18);
}
/* On narrow tablet/phone the autosave label hides so the buttons
   keep their hit targets — the dot alone still signals save state. */
@media (max-width: 720px) {
  .wizard-main-footer .wizard-progress-autosave .wpb-autosave-text {
    display: none;
  }
  .wizard-nav-right { gap: 8px; }
}
.wpb-autosave-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
  animation: fpr-autosave-pulse 2.4s ease-in-out infinite;
}
@keyframes fpr-autosave-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); }
  50% { box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.08); }
}

/* Responsive progress bar */
/* Tablet+ (≤ 1100px): keep the step *name* (Service / Details / Quote
   / Customer / Send) so the seller can read what step they're on at
   a glance. Only the upper "STEP 0X" mini-label gets hidden — its
   info is already encoded in the circle's number. */
@media (max-width: 1100px) {
  .wizard-progress-inner { grid-template-columns: auto 1fr auto; padding: 14px 18px; gap: 14px; }
  .wp-step-connector { width: 24px; margin: 0 8px; }
  .wp-step-label { display: none; }
  .wp-step-name { font-size: 12px; }
}
/* Tablet portrait (≤ 820px) — iPad mini / iPad Air portrait. Hide
   the left "Kitchen NEW / European Style" breadcrumb (it's already
   shown by the in-card title) so the numbered steps stop colliding
   with it. Also tighten step connectors so all 5 fit in one row. */
@media (max-width: 820px) {
  .wizard-progress-breadcrumb { display: none; }
  .wizard-progress-inner { grid-template-columns: 1fr auto; }
  .wp-step-connector { width: 18px; margin: 0 6px; }
  .wp-step-name { font-size: 11px; }
}
@media (max-width: 720px) {
  /* Below 720px there genuinely isn't room for both name + connectors
     × 5 steps; fall back to circle-only — the active step is colored
     and the seller can refer to the in-card title. */
  .wp-step-text { display: none; }
  .wp-step { gap: 0; }
}
@media (max-width: 520px) {
  .wizard-progress-autosave .wpb-autosave-text { display: none; }
  .wp-step-num { width: 24px; height: 24px; font-size: 11px; }
  .wp-step-connector { width: 16px; margin: 0 4px; }
}

.wizard-step-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: opacity 0.2s;
  opacity: 0.5;
}

.wizard-step-dot.active,
.wizard-step-dot.completed {
  opacity: 1;
}

.wizard-step-dot:hover {
  opacity: 0.8;
}

.wizard-step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: var(--text);
  font-size: 14px;
  transition: all 0.3s;
}

.wizard-step-dot.active .wizard-step-circle {
  background: var(--accent);
  border-color: var(--accent);
  color: #0f172a;
  box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.2);
}

.wizard-step-dot.completed .wizard-step-circle {
  background: #22c55e;
  border-color: #22c55e;
  color: #0f172a;
}

.wizard-step-label {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wizard-step-dot.active .wizard-step-label {
  color: var(--accent);
  font-weight: 600;
}

.wizard-step-line {
  flex: 1;
  max-width: 80px;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
  align-self: center;
  margin-top: -22px;
}

@media (max-width: 900px) {
  .wizard-progress-bar {
    max-width: 100%;
    padding: 0 8px;
  }
  .wizard-step-line {
    flex: 1;
    min-width: 20px;
  }
}

@media (max-width: 640px) {
  .wizard-progress-bar {
    padding: 16px;
    gap: 4px;
  }
  .wizard-step-label {
    font-size: 10px;
  }
  .wizard-step-line {
    max-width: 40px;
  }
}

@media (max-width: 600px) {
  .wizard-progress-bar {
    padding: 0 4px;
  }
  .wizard-step-circle {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }
  .wizard-step-label {
    font-size: 10px;
  }
}

/* ==========================================================
   WIZARD NAVIGATION BUTTONS
   ========================================================== */

/* Wizard main footer (visually attached to card) */
.wizard-main-footer {
  display: none;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 860px;           /* narrower than card to keep buttons clearly inside its edges */
  margin: 0 auto;
  padding: 14px 0;
  background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(2,6,23,.96));
  border: none;
  border-top: 1px solid rgba(6,182,212,.18);
  border-radius: 0;
  box-shadow: 0 -8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  box-sizing: border-box;
  /* Now sibling of <main> in body flex column — flex-shrink 0 keeps it visible */
  position: relative;
  flex-shrink: 0;
  z-index: 90;
}
/* Full-width navy band behind the centered button row */
.wizard-main-footer::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(2,6,23,.96));
  border-top: 1px solid rgba(6,182,212,.18);
  box-shadow: 0 -8px 24px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: -1;
  pointer-events: none;
}
.wizard-main-footer > * { position: relative; z-index: 1; }

/* (Legacy padding-bottom for sticky footer removed — body is now flex column) */

body[data-current-wizard-step="1"] .wizard-main-footer,
body[data-current-wizard-step="2"] .wizard-main-footer,
body[data-current-wizard-step="3"] .wizard-main-footer,
body[data-current-wizard-step="4"] .wizard-main-footer,
body[data-current-wizard-step="5"] .wizard-main-footer {
  display: grid;
}
.wizard-main-footer .wizard-btn-prev { justify-self: start; }
.wizard-main-footer .wizard-btn-home { justify-self: center; }
.wizard-main-footer .wizard-btn-next { justify-self: end; margin-left: 0; }

.wizard-btn-prev,
.wizard-btn-next {
  padding: 12px 26px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease, background .2s ease, color .2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.wizard-btn-next {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
  color: #ffffff;
  margin-left: auto;
  border-color: rgba(6,182,212,.5);
  box-shadow: 0 8px 22px rgba(6,182,212,.3), inset 0 1px 0 rgba(255,255,255,.18);
}

.wizard-btn-next:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(6,182,212,.45), inset 0 1px 0 rgba(255,255,255,.22);
}
.wizard-btn-next:active:not(:disabled) { transform: translateY(0); }

/* Steps 1 & 3 — Next button in same green as Step 2 "Add to Quote" */
body[data-current-wizard-step="1"] .wizard-btn-next,
body[data-current-wizard-step="3"] .wizard-btn-next {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
  border-color: rgba(34, 197, 94, 0.5) !important;
  box-shadow: 0 8px 22px rgba(34, 197, 94, 0.3), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
body[data-current-wizard-step="1"] .wizard-btn-next:hover:not(:disabled),
body[data-current-wizard-step="3"] .wizard-btn-next:hover:not(:disabled) {
  box-shadow: 0 12px 28px rgba(34, 197, 94, 0.45), inset 0 1px 0 rgba(255,255,255,.22) !important;
}

.wizard-btn-next:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.wizard-btn-prev {
  background: rgba(255,255,255,.03);
  color: #cbd5e1;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.wizard-btn-prev:hover {
  background: rgba(196, 30, 46, 0.12);
  border-color: #C41E2E;
  color: #FF6B7A;
  box-shadow: 0 4px 16px rgba(196, 30, 46, 0.18);
  color: #f1f5f9;
  transform: translateY(-1px);
}
.wizard-btn-prev:active { transform: translateY(0); }

/* Change Service / Add Service centered button */
.wizard-btn-home {
  background: rgba(15,23,42,.6);
  color: #cbd5e1;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: transform .12s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.wizard-btn-home:hover {
  background: rgba(6,182,212,.08);
  border-color: rgba(6,182,212,.35);
  color: #f1f5f9;
  transform: translateY(-1px);
}
.wizard-btn-home svg { width: 16px; height: 16px; }

body[data-current-wizard-step="0"] .wizard-btn-prev {
  visibility: hidden;
}

body[data-current-wizard-step="4"] .wizard-btn-next,
body[data-current-wizard-step="5"] .wizard-btn-next {
  display: none;
}

/* Wizard: ocultar Add to Quote original (el botón Next se transforma en Step 2) */
body[data-current-wizard-step] #addBtn {
  display: none !important;
}

/* Wizard: ocultar Reset original (reemplazado por uno flotante) */
body[data-current-wizard-step] #resetBtn {
  display: none !important;
}

/* Wizard: botón Reset flotante en esquina superior derecha */
.wizard-btn-reset-floating {
  display: none;
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 1000;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  color: var(--muted);
  border: 1px solid rgba(239, 68, 68, 0.3);
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

body[data-current-wizard-step] .wizard-btn-reset-floating {
  display: inline-block;
}

.wizard-btn-reset-floating:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border-color: #ef4444;
}

/* ============================================
   WIZARD HEADER - Redesigned with logo + user
   ============================================ */

.wizard-header {
  position: sticky;
  top: 0;
  width: 100%;
  padding: 0;
  background: linear-gradient(180deg, #0a1730 0%, #0B1E3F 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  z-index: 100;
  flex-shrink: 0;
}

.wizard-header-inner {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 14px 28px;
}

/* Left side: Logo + Brand */
.wizard-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  justify-self: start;
}

.wizard-header-logo {
  height: 42px;
  width: auto;
  max-width: 56px;
  object-fit: contain;
  flex-shrink: 0;
  padding: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

.wizard-header-brand {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  line-height: 1.15;
}

.wizard-header-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  font-style: italic;
  color: #f1f5f9;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.wizard-header-subtitle {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Center: Current Quote */
.wizard-header-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  justify-self: center;
  min-width: 0;
  text-align: center;
}
.wizard-header-quote-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #64748b;
}
.wizard-header-quote-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #f1f5f9;
  white-space: nowrap;
}
.wizard-header-quote-info #wizardHeaderQuoteCustomer {
  color: #f1f5f9;
}
.wizard-header-quote-sep { color: rgba(255, 255, 255, 0.25); font-weight: 400; }
.wizard-header-quote-info #wizardHeaderQuoteId {
  color: #94a3b8;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Right side: Actions + User */
.wizard-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
}

/* User badge — premium pill. Now rendered as a <button> so the
   seller can click it to open the account dropdown (sign-out lives
   inside, not as a standalone icon next to the pill). */
.wizard-header-user-wrap {
  position: relative;
  display: inline-flex;
}
.wizard-header-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 14px 5px 5px;
  background: rgba(11, 30, 63, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  /* Reset <button> defaults so the pill keeps its custom look. */
  font-family: inherit;
  color: inherit;
  outline: none;
}

.wizard-header-user:hover {
  background: rgba(11, 30, 63, 0.9);
  border-color: rgba(255, 255, 255, 0.15);
}
.wizard-header-user:focus-visible {
  border-color: var(--accent, #06b6d4);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.25);
}
.wizard-header-user[aria-expanded="true"] {
  background: rgba(6, 182, 212, 0.14);
  border-color: rgba(6, 182, 212, 0.4);
}
.wizard-header-user-chevron {
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.55);
  margin-left: 2px;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.wizard-header-user[aria-expanded="true"] .wizard-header-user-chevron {
  transform: rotate(180deg);
  color: var(--accent, #06b6d4);
}

/* User-menu panel — same shape as the hamburger panel but anchored
   to the user pill on the right edge of the header. */
.wizard-header-user-menu {
  min-width: 180px;
}

/* "Danger" menu item — used for the Sign out action. Distinct red
   tint so the seller has a strong visual cue this is destructive. */
.wizard-header-menu-item-danger { color: #fca5a5; }
.wizard-header-menu-item-danger:hover {
  background: rgba(239, 68, 68, 0.14) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  color: #fecaca !important;
}

.wizard-header-user-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C8102E, #9B0D24);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(200, 16, 46, 0.3);
}

.wizard-header-user-initials {
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.04em;
}

.wizard-header-user-avatar svg {
  width: 16px;
  height: 16px;
  color: white;
}

.wizard-header-user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}

.wizard-header-user-name {
  font-size: 13px;
  font-weight: 700;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.wizard-header-user-role {
  font-size: 10px;
  font-weight: 500;
  color: #94a3b8;
  letter-spacing: 0.04em;
}

/* Icon-only action buttons (refresh, logout) */
.wizard-header-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  color: #94a3b8;
  cursor: pointer;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
  padding: 0;
}

.wizard-header-icon-btn svg {
  width: 17px;
  height: 17px;
}

.wizard-header-icon-btn:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: #f1f5f9;
}

.wizard-header-icon-btn-logout:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

/* Variant: icon button with text label */
.wizard-header-icon-btn-text {
  width: auto;
  gap: 8px;
  padding: 0 14px 0 12px;
}
.wizard-header-icon-btn-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: inherit;
  font-family: inherit;
}
@media (max-width: 640px) {
  .wizard-header-icon-btn-text { padding: 0 10px 0 8px; gap: 6px; }
  .wizard-header-icon-btn-label { font-size: 12px; }
}
@media (max-width: 480px) {
  /* Don't kill labels inside the dropdown — only the inline header
     icon buttons that aren't part of the menu should collapse to icon-
     only at phone widths. */
  .wizard-header-right > .wizard-header-icon-btn:not(.wizard-header-menu-btn) .wizard-header-icon-btn-label { display: none; }
  .wizard-header-right > .wizard-header-icon-btn-text:not(.wizard-header-menu-btn) { width: 34px; padding: 0; gap: 0; }
}

/* ─── Header hamburger menu ───────────────────────────────────────
   Consolidates Theme / Reset / My Quotes / Admin into a single
   dropdown. The original button IDs (wizardHeaderThemeBtn, …) are
   preserved so the existing click handlers keep working — only the
   visual presentation changes. */
.wizard-header-menu-wrap {
  position: relative;
  display: inline-flex;
}
.wizard-header-menu-btn { /* same base style as .wizard-header-icon-btn */ }
.wizard-header-menu-btn[aria-expanded="true"] {
  background: rgba(6, 182, 212, 0.18);
  border-color: rgba(6, 182, 212, 0.5);
  color: var(--accent, #06b6d4);
}
.wizard-header-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  background: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.3);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: fpr-menu-fade-in 0.14s ease-out;
}
.wizard-header-menu-panel[hidden] { display: none; }
@keyframes fpr-menu-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Menu items — full-width with left-aligned icon + label. Strip the
   pill shape that the inline header buttons carry so they read as
   list items inside the dropdown. */
.wizard-header-menu-panel .wizard-header-menu-item {
  width: 100%;
  height: auto;
  justify-content: flex-start;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 9px 12px;
  gap: 10px;
  background: transparent;
}
.wizard-header-menu-panel .wizard-header-menu-item:hover {
  background: rgba(6, 182, 212, 0.12);
  border-color: rgba(6, 182, 212, 0.28);
}
.wizard-header-menu-panel .wizard-header-icon-btn-label {
  display: inline;       /* always visible inside the menu */
  font-size: 13px;
  font-weight: 600;
}
.wizard-header-menu-panel .wizard-header-menu-item svg {
  flex-shrink: 0;
}

/* Hide legacy elements */
.wizard-btn-reset-floating,
.wizard-legacy-reset,
.wizard-legacy-title {
  display: none !important;
}

/* ============================================
   RESPONSIVE - Tablet
   ============================================ */

@media (max-width: 1100px) {
  .wizard-header-inner {
    grid-template-columns: auto 1fr auto;
    padding: 12px 18px;
    gap: 16px;
  }
  .wizard-header-user-name { max-width: 110px; }
  .wizard-header-quote-info { font-size: 13px; }
}

@media (max-width: 880px) {
  .wizard-header-center { display: none; }
  .wizard-header-inner { grid-template-columns: 1fr auto; }
}

/* Tablet portrait (iPad mini ~768px): trim the right-side button row
   so Reset / My Quotes / Admin + the user pill don't run into the
   logo block. Drops the user "Admin" sub-role line and tightens
   button padding. */
@media (max-width: 820px) {
  .wizard-header-inner { padding: 12px 18px; gap: 14px; }
  .wizard-header-subtitle { font-size: 9px; letter-spacing: 0.1em; }
  .wizard-header-user-role { display: none; }
  .wizard-header-user-name { max-width: 100px; font-size: 13px; }
  .wizard-header-user { padding: 3px 12px 3px 3px; gap: 8px; }
}

@media (max-width: 640px) {
  .wizard-header-inner { padding: 10px 14px; gap: 10px; }
  .wizard-header-logo { height: 36px; max-width: 48px; padding: 4px; }
  .wizard-header-title { font-size: 16px; }
  .wizard-header-subtitle { font-size: 9px; letter-spacing: 0.1em; }
  .wizard-header-user { padding: 3px 10px 3px 3px; }
  .wizard-header-user-avatar { width: 28px; height: 28px; }
  .wizard-header-user-initials { font-size: 11px; }
  .wizard-header-user-name { font-size: 12px; max-width: 90px; }
  .wizard-header-user-role { display: none; }
  .wizard-header-icon-btn { width: 34px; height: 34px; }
  .wizard-header-icon-btn svg { width: 15px; height: 15px; }
}

@media (max-width: 480px) {
  .wizard-header-brand { display: none; }
}

/* ==========================================================
   WIZARD STEP 5 — Send to Customer polish
   ========================================================== */

.wizard-step5-success {
  display: none;
  text-align: center;
  padding: 32px 24px 24px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 12px;
  margin-bottom: 24px;
}

body[data-current-wizard-step="5"] .wizard-step5-success {
  display: block;
}

.wizard-step5-success-icon {
  font-size: 40px;
  margin-bottom: 8px;
}

.wizard-step5-success-title {
  margin: 0 0 8px 0;
  color: #22c55e;
  font-size: 20px;
  font-weight: 700;
}

.wizard-step5-success-subtitle {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  opacity: 0.85;
}

body[data-current-wizard-step="5"] #exportActionBar {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  padding: 20px 0;
  margin-top: 0;
}

body[data-current-wizard-step="5"] #exportActionBar > * {
  min-height: 110px;
  padding: 16px 12px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  white-space: normal;
}

body[data-current-wizard-step="5"] #exportActionBar > *:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body[data-current-wizard-step="5"] #grand-total-box,
body[data-current-wizard-step="5"] #finalizeAndSendBtn {
  display: none !important;
}

@media (max-width: 640px) {
  body[data-current-wizard-step="5"] #exportActionBar {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Sales Rep locked (Día 3 — auth) */
#salesRep.sales-rep-locked {
  opacity: 1;
  background-color: rgba(15, 23, 42, 0.6);
  color: #f1f5f9;
  cursor: not-allowed;
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2306b6d4' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* ============================================
   RESPONSIVE - Mobile consolidated fixes
   ============================================ */

@media (max-width: 768px) {
  body[data-current-wizard-step] .card {
    width: calc(100% - 24px);
    padding: 20px;
    margin: 0 auto;
    min-height: 280px;
  }

  .wizard-main-footer {
    width: calc(100% - 24px);
    padding: 12px 14px 14px;
    gap: 8px;
  }

  .wizard-main-footer .wizard-btn-prev,
  .wizard-main-footer .wizard-btn-next {
    flex: 1;
    min-width: 0;
  }

  .container {
    padding: 0 8px;
    margin: 16px auto;
  }

  .grid select,
  .grid input {
    width: 100%;
    min-width: 0;
  }

  .grid > div > label {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  body[data-current-wizard-step] .card {
    width: calc(100% - 8px);
    padding: 12px;
  }

  .container {
    padding: 0 4px;
    margin: 12px auto;
  }
}

/* ============================================
   KITCHEN NEW WIZARD - Restored legacy styles
   Scoped to #kitchenWizardContainer to avoid
   conflict with main wizard redesign
   ============================================ */

#kitchenWizardContainer .wizard-progress-bar {
  display: block !important;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  margin-top: 10px;
  overflow: hidden;
  padding: 0;
  max-width: none;
}

#kitchenWizardContainer .wizard-progress-fill {
  height: 100%;
  background: var(--accent2, #06b6d4);
  transition: width 0.3s ease;
}

#kitchenWizardContainer .wizard-header {
  position: static !important;
  width: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  z-index: auto !important;
  margin-bottom: 20px !important;
}

#kitchenWizardContainer .wizard-header h3 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: var(--text, #f1f5f9);
}

#kitchenWizardContainer .wizard-progress-bar {
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
}

/* ============================================
   WIZARD STEP 0 - Service Selection
   ============================================ */

/* ============================================
   STEP 0 — Quote Builder (Brand Navy + Red)
   ============================================ */

/* Make step 0 wrapper full-bleed with brand navy background */
.wizard-step-0 {
  display: none;
  width: 100%;
  max-width: none;
  margin: 0;
  /* The parent <body> has `overflow: hidden` + `height: 100dvh` (so
     the wizard's sticky header / sticky footer / scrollable main
     layout works on steps 1-5). On step 0 there is no <main> — the
     homepage IS the content. So we have to act as our own scroll
     container: take the remaining vertical space via flex, allow
     shrink (min-height: 0 overrides the default `auto` on flex
     items), and scroll internally when the stacked card grid
     overflows on narrow widths. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Vertical padding scales with viewport height to fit on most screens */
  padding: clamp(20px, 4vh, 56px) 28px clamp(20px, 4vh, 48px) 28px;
  background: linear-gradient(180deg, #060F23 0%, #0A1B3A 100%);
  animation: fadeInUp 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

body[data-current-wizard-step="0"] .wizard-step-0 {
  display: block;
}

/* On step 0, paint body with the gradient end color so any overflow blends seamlessly */
body[data-current-wizard-step="0"] {
  background: #0A1B3A !important;
}

body[data-current-wizard-step="0"] .wizard-progress-bar,
body[data-current-wizard-step="0"] #wizardNavButtons,
body[data-current-wizard-step="0"] .container {
  display: none !important;
}

body[data-current-wizard-step="0"] .wizard-step-0 ~ .container {
  display: none !important;
}

/* Hero header — override global `header { display:flex }` */
.wizard-step-0-header,
header.wizard-step-0-header {
  display: block !important;
  max-width: 1440px;
  margin: 0 auto clamp(18px, 3.5vh, 44px) auto;
  text-align: left;
  align-items: initial;
  justify-content: initial;
  gap: 0;
}

.wizard-step-0-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FF6B7A;
  margin-bottom: clamp(8px, 1.5vh, 18px);
}
.wizard-step-0-eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1.5px;
  background: #FF6B7A;
}

.wizard-step-0-title {
  margin: 0 0 clamp(8px, 1.4vh, 16px) 0;
  max-width: 720px;
  /* Scales between 32px and 56px depending on viewport width AND height */
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.wizard-step-0-subtitle {
  margin: 0;
  max-width: 580px;
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
}

/* Compact hero on shorter viewports */
@media (max-height: 800px) {
  .wizard-step-0-title { font-size: clamp(26px, 3.4vw, 40px); }
  .wizard-step-0-subtitle { font-size: 14px; }
}
@media (max-height: 680px) {
  .wizard-step-0-header { margin-bottom: 16px; }
  .wizard-step-0-title { font-size: 26px; max-width: 640px; }
  .wizard-step-0-subtitle { font-size: 13px; max-width: 540px; line-height: 1.45; }
  .wizard-step-0-eyebrow { font-size: 10px; margin-bottom: 8px; }
}

/* Grid */
.service-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

/* Card */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  padding: clamp(16px, 2.4vh, 28px) 22px clamp(14px, 2vh, 22px);
  min-height: clamp(140px, 22vh, 220px);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  color: #FFFFFF;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 280ms cubic-bezier(.4,0,.2,1), border-color 280ms ease, transform 280ms ease;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  isolation: isolate;
  overflow: visible;
  box-shadow: none;
}

.service-card::before { content: none; }
.service-card > * { position: relative; z-index: 2; }

.service-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
  box-shadow: none;
}
.service-card:active { transform: translateY(0); }

.service-card.selected {
  background: linear-gradient(180deg, rgba(196, 30, 46, 0.16), rgba(196, 30, 46, 0.04));
  border-color: #C41E2E;
}

/* Icon container */
.service-card-icon {
  position: relative;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  filter: none;
  transition: background 280ms ease, color 280ms ease;
  color: #FFFFFF;
}
.service-card-icon svg {
  width: 26px; height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  transition: none;
}
.service-card-icon svg * {
  stroke: inherit;
  fill: inherit;
}
.service-card:hover .service-card-icon,
.service-card.selected .service-card-icon {
  background: #C41E2E;
  color: #FFFFFF;
}
.service-card:hover .service-card-icon svg,
.service-card.selected .service-card-icon svg {
  stroke: #FFFFFF;
}

/* Footer (label + arrow) */
.service-card-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

.service-card-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.service-card-label {
  font-size: 18px;
  font-weight: 600;
  text-align: left;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: -0.005em;
  color: #FFFFFF;
  text-shadow: none;
  font-feature-settings: "kern" 1, "liga" 1;
  transition: color 280ms ease;
}
.service-card:hover .service-card-label {
  color: #FFFFFF;
  text-shadow: none;
}

.service-card-sub {
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
}

/* Arrow circle */
.service-card-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
  transition: background 280ms ease, color 280ms ease, transform 280ms ease;
}
.service-card-arrow svg {
  width: 11px; height: 11px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  transition: transform 280ms ease;
}
.service-card:hover .service-card-arrow {
  background: #C41E2E;
  color: #FFFFFF;
}
.service-card:hover .service-card-arrow svg {
  transform: translateX(2px);
}

/* NEW badge */
.service-card-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 3px 8px;
  background: #C41E2E;
  color: #FFFFFF;
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  border-radius: 4px;
  border: none;
  z-index: 3;
}

/* Botón "Add Service / Change Service / New Quote" - visible en TODOS los steps del wizard
   El texto y opciones del modal se actualizan dinámicamente según el step */
.wizard-btn-home {
  display: none;
  align-items: center;
  gap: 6px;
  margin: 0 auto;
  padding: 10px 16px;
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

body[data-current-wizard-step] .wizard-btn-home {
  display: flex;
}

.wizard-btn-home svg {
  width: 16px;
  height: 16px;
}

.wizard-btn-home:hover {
  background: rgba(6, 182, 212, 0.1);
  border-color: rgba(6, 182, 212, 0.3);
  color: #f1f5f9;
}

/* Step 0 responsive */
@media (max-width: 1280px) {
  .service-grid { grid-template-columns: repeat(4, 1fr); }
  .wizard-step-0-title { font-size: 48px; }
}
@media (max-width: 1024px) {
  .service-grid { grid-template-columns: repeat(3, 1fr); }
  .wizard-step-0 { padding: 48px 24px; }
  .wizard-step-0-title { font-size: 42px; }
  .wizard-step-0-subtitle { font-size: 16px; }
}
@media (max-width: 720px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .wizard-step-0 { padding: 36px 18px; }
  .wizard-step-0-title { font-size: 34px; }
  .wizard-step-0-subtitle { font-size: 15px; }
  .service-card { min-height: 180px; padding: 22px 18px 18px; }
  .service-card-icon { width: 44px; height: 44px; }
  .service-card-icon svg { width: 22px; height: 22px; }
  .service-card-label { font-size: 16px; }
}
@media (max-width: 480px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .wizard-step-0-title { font-size: 28px; }
  .wizard-step-0-eyebrow { font-size: 10px; letter-spacing: 0.16em; }
  .service-card { min-height: 160px; padding: 18px 14px 14px; }
  .service-card-label { font-size: 14px; }
  .service-card-sub { font-size: 9.5px; }
  .wizard-btn-home span { display: none; }
  .wizard-btn-home { padding: 10px 12px; }
}

/* ============================================
   ADD SERVICE OPTIONS MODAL
   ============================================ */

.add-service-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 200ms ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.add-service-modal {
  width: 100%;
  max-width: 480px;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 32px 28px 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: slideUp 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.add-service-modal-header {
  text-align: center;
  margin-bottom: 24px;
}

.add-service-modal-title {
  margin: 0 0 6px 0;
  font-size: 20px;
  font-weight: 700;
  color: #f1f5f9;
}

.add-service-modal-subtitle {
  margin: 0;
  color: #94a3b8;
  font-size: 13px;
}

.add-service-modal-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.add-service-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: #f1f5f9;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.add-service-option:hover {
  background: rgba(6, 182, 212, 0.08);
  border-color: rgba(6, 182, 212, 0.3);
  transform: translateY(-1px);
}

.add-service-option-cancel:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
}

.add-service-option-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-service-option-icon svg {
  width: 20px;
  height: 20px;
}

.add-service-option-icon-add {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.add-service-option-icon-change {
  background: rgba(6, 182, 212, 0.15);
  color: #22d3ee;
}

.add-service-option-icon-cancel {
  background: rgba(148, 163, 184, 0.15);
  color: #cbd5e1;
}

.add-service-option-icon-startnew {
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.add-service-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.add-service-option-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}

.add-service-option-desc {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.3;
}

@media (max-width: 480px) {
  .add-service-modal {
    padding: 24px 20px 20px;
    border-radius: 16px;
  }

  .add-service-modal-title {
    font-size: 18px;
  }

  .add-service-option {
    padding: 12px 14px;
    gap: 12px;
  }

  .add-service-option-icon {
    width: 36px;
    height: 36px;
  }
}

/* Next button deshabilitado (legacy, mantener) */
.wizard-btn-next:disabled,
.wizard-btn-next.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: grayscale(0.6);
  pointer-events: none;
}

/* ============================================
   NEXT BUTTON - "Add to Quote" mode (Step 2)
   ============================================ */
.wizard-btn-next {
  transition: background 250ms ease, color 250ms ease, box-shadow 250ms ease;
}

.wizard-btn-next.btn-add-mode {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3) !important;
  border: none !important;
}

.wizard-btn-next.btn-add-mode:hover {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4) !important;
}

.wizard-btn-next.btn-add-mode:active {
  transform: translateY(0);
}

/* ============================================================
   STEP 4 — Customer Form (matches Step 0 brand aesthetic)
   Navy gradient bg + brand red accents + JetBrains Mono labels
   ============================================================ */

#client-info.client-export-section {
  background: rgba(31, 41, 55, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 16px !important;
  padding: 32px 28px !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

/* Steps 1 & 2 (left), 4 & 5 (right): remove outer card background so only the inner sections show */
body[data-current-wizard-step="1"] .card-left,
body[data-current-wizard-step="2"] .card-left,
body[data-current-wizard-step="4"] .card-right,
body[data-current-wizard-step="5"] .card-right {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important; /* override the 340px min-height from .card */
  height: auto !important;
  flex: 0 0 auto !important; /* don't grow — size to content (no gap below) */
  overflow: visible !important; /* let inner container handle scroll */
}

/* Card grows to fill .grid, with internal scroll if content exceeds */
body[data-current-wizard-step] section.card.card-left,
body[data-current-wizard-step] section.card.card-right {
  flex: 1;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
/* Custom scrollbar inside card */
body[data-current-wizard-step="1"] .card-left::-webkit-scrollbar,
body[data-current-wizard-step="2"] .card-left::-webkit-scrollbar,
body[data-current-wizard-step="3"] .card-right::-webkit-scrollbar,
body[data-current-wizard-step="4"] .card-right::-webkit-scrollbar,
body[data-current-wizard-step="5"] .card-right::-webkit-scrollbar { width: 8px; }
body[data-current-wizard-step="1"] .card-left::-webkit-scrollbar-thumb,
body[data-current-wizard-step="2"] .card-left::-webkit-scrollbar-thumb,
body[data-current-wizard-step="3"] .card-right::-webkit-scrollbar-thumb,
body[data-current-wizard-step="4"] .card-right::-webkit-scrollbar-thumb,
body[data-current-wizard-step="5"] .card-right::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
}

/* (Legacy overflow:hidden for wizard steps moved to the flex-column body rule above) */

/* ============================================================
   <main class="wizard-main"> — scrollable middle section
   between sticky header/progress and footer in flex column body
   ============================================================ */
.wizard-main {
  flex: 1;
  min-height: 0;
  /* `overflow-y: auto` makes <main> the wizard's scroll container —
     since body has overflow:hidden + height:100dvh and the header /
     footer are sticky-positioned siblings, <main> consumes whatever
     vertical space is left and scrolls internally when the active
     step's content (Kitchen wizard sub-steps, counter measurements,
     stone galleries, etc.) overflows on shorter viewports or
     narrower screens. */
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
}
body[data-current-wizard-step] .wizard-main {
  display: flex;
}

/* ============================================================
   RESPONSIVE COMPACT SPACING — wizard step content adapts to viewport height
   Uses clamp() so paddings/gaps shrink on shorter screens
   ============================================================ */

/* Standard form (steps 1-2) */
body[data-current-wizard-step="1"] #standardFormContainer,
body[data-current-wizard-step="2"] #standardFormContainer {
  padding: clamp(14px, 2.4vh, 32px) clamp(16px, 2vw, 28px) !important;
  gap: clamp(10px, 1.6vh, 22px);
}
.qty-upgrades-row { gap: clamp(8px, 1.4vh, 18px); }
.std-panel-title {
  font-size: clamp(15px, 1.4vw, 18px) !important;
  margin: 0 0 clamp(10px, 1.6vh, 22px) 0 !important;
  padding-bottom: clamp(8px, 1.2vh, 16px) !important;
}

/* Step 1 form rows */
body[data-current-wizard-step="1"] #standardFormContainer #categoryItemRow > div > label,
body[data-current-wizard-step="1"] #standardFormContainer #qtyRow > div > label {
  margin-bottom: clamp(4px, 0.8vh, 10px) !important;
}
/* Inline row: no extra separators needed — layout handled by qty-upgrades-row */
body[data-current-wizard-step="1"] #standardFormContainer .qty-upgrades-row > #qtyRow {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
body[data-current-wizard-step="1"] #standardFormContainer #extras-button-container {
  padding-top: 0 !important;
}

/* Quantity counter */
.qty-counter { height: clamp(46px, 6vh, 56px); }

/* ISP button */
body[data-current-wizard-step="1"] #standardFormContainer #itemSelectionPanelBtn.item-selection-panel-btn {
  padding: clamp(10px, 1.4vh, 14px) clamp(12px, 1.4vw, 18px) !important;
}
body[data-current-wizard-step="1"] #standardFormContainer #itemSelectionPanelBtn .isp-thumb {
  width: clamp(36px, 4.6vh, 46px);
  height: clamp(36px, 4.6vh, 46px);
}

/* Step 2 sections */
.description-section { margin-top: clamp(10px, 1.6vh, 18px); padding-top: clamp(10px, 1.6vh, 18px); }
.price-preview-container { margin-top: clamp(10px, 1.6vh, 18px); padding-top: clamp(8px, 1.2vh, 14px); }
.price-preview-header { margin-bottom: clamp(8px, 1.2vh, 14px); }
.selected-price-display { padding: clamp(10px, 1.4vh, 16px) clamp(12px, 1.4vw, 18px) !important; }

/* Step 4 — Client & Export */
#client-info.client-export-section {
  padding: clamp(14px, 2vh, 24px) clamp(18px, 2vw, 28px) !important;
}
#client-info .section-title {
  margin: 0 0 clamp(12px, 1.8vh, 26px) 0 !important;
  font-size: clamp(20px, 1.8vw, 26px) !important;
}
#client-info .client-info-grid {
  gap: clamp(8px, 1.2vh, 14px) !important;
  margin-bottom: clamp(8px, 1.2vh, 16px) !important;
}
#client-info .form-field { gap: clamp(4px, 0.6vh, 8px); }
#client-info input,
#client-info select,
#client-info textarea {
  padding: clamp(8px, 1vh, 11px) clamp(10px, 1vw, 14px) !important;
  font-size: clamp(13px, 1vw, 14px) !important;
}
/* (legacy textarea min-height removed — Step 4 textarea now takes height from flex:1 elastic layout) */
#client-info .notes-section { margin: 0 0 clamp(12px, 1.6vh, 22px) 0 !important; }
#client-info .notes-section > label { margin-bottom: clamp(4px, 0.6vh, 10px) !important; }
#client-info .advanced-options { margin: 0 0 clamp(12px, 1.6vh, 22px) 0; }

/* Grand Total — responsive */
#client-info #grand-total-box {
  padding: clamp(10px, 1.2vh, 14px) clamp(14px, 1.4vw, 20px) !important;
  margin: clamp(4px, 0.6vh, 8px) 0 clamp(10px, 1.2vh, 16px) 0 !important;
}
#client-info #grand-total-box h2,
#client-info #grand-total-box #grandTotalValue {
  font-size: clamp(20px, 2vw, 26px) !important;
}

/* Primary action button */
#client-info .primary-action-btn {
  padding: clamp(11px, 1.4vh, 14px) clamp(20px, 2vw, 32px) !important;
  font-size: clamp(13px, 0.95vw, 14px) !important;
}

/* Step 3 quote items */
body[data-current-wizard-step="3"] #quote-items-list { gap: clamp(6px, 1vh, 10px); }
body[data-current-wizard-step="3"] .quote-item { padding: clamp(10px, 1.4vh, 14px) clamp(12px, 1.4vw, 16px); }
body[data-current-wizard-step="3"] .quote-item-title { font-size: clamp(13px, 0.95vw, 14px) !important; }
body[data-current-wizard-step="3"] #list-price-box { padding: clamp(8px, 1.2vh, 14px) clamp(12px, 1.4vw, 18px) !important; }

/* Step 5 success */
.wizard-step5-success { padding: clamp(12px, 1.8vh, 20px) clamp(14px, 1.6vw, 22px); }
.wizard-step5-success-title { font-size: clamp(18px, 1.8vw, 24px); }
.wizard-step5-success-subtitle { font-size: clamp(13px, 1vw, 14px); }
.export-action-bar { padding: clamp(12px, 1.6vh, 18px) clamp(12px, 1.4vw, 18px); gap: clamp(8px, 1vw, 14px); }
/* Inner panels stretch to fill the card */
body[data-current-wizard-step="1"] #standardFormContainer,
body[data-current-wizard-step="2"] #standardFormContainer,
body[data-current-wizard-step="1"] #kitchenWizardContainer,
body[data-current-wizard-step="2"] #kitchenWizardContainer,
body[data-current-wizard-step="1"] #flooringWizardContainer,
body[data-current-wizard-step="2"] #flooringWizardContainer {
  flex: 1;
  display: flex;
  flex-direction: column;
}
body[data-current-wizard-step="1"] .container,
body[data-current-wizard-step="2"] .container,
body[data-current-wizard-step="3"] .container,
body[data-current-wizard-step="4"] .container,
body[data-current-wizard-step="5"] .container {
  margin: 16px auto;
  padding: 0 16px;
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

body[data-current-wizard-step] .grid {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}
/* Remove progress bar's margin-bottom on wizard steps so spacing only comes from container margin-top */
body[data-current-wizard-step="1"] #wizardProgressBar,
body[data-current-wizard-step="2"] #wizardProgressBar,
body[data-current-wizard-step="3"] #wizardProgressBar,
body[data-current-wizard-step="4"] #wizardProgressBar,
body[data-current-wizard-step="5"] #wizardProgressBar {
  margin-bottom: 0 !important;
}

/* Step 4: paint body navy so any space below the form blends seamlessly */
body[data-current-wizard-step="4"] {
  background: #0A1B3A !important;
}
/* Step 4 inner panel fills card height with same spacing pattern as other steps */
body[data-current-wizard-step="4"] #client-info.client-export-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Step 4 — children layout: notes-section is the only flex:1 (elastic),
   everything else is flex-shrink:0 (never compresses) */
body[data-current-wizard-step="4"] #client-info > .section-title,
body[data-current-wizard-step="4"] #client-info > .client-info-grid,
body[data-current-wizard-step="4"] #client-info > .advanced-options,
body[data-current-wizard-step="4"] #client-info > #subtotal-display-container,
body[data-current-wizard-step="4"] #client-info > #grand-total-box,
body[data-current-wizard-step="4"] #client-info > .primary-action-container {
  flex-shrink: 0;
}

body[data-current-wizard-step="4"] #client-info > .notes-section {
  flex: 1;
  min-height: 80px;
  display: flex;
  flex-direction: column;
}

body[data-current-wizard-step="4"] #client-info > .notes-section textarea {
  flex: 1;
  min-height: 60px;
  resize: none;
}

/* Step 5: hide step 4 children (form fields, grand total, button) but keep step 5 children visible
   Note: step 5 success/export elements are nested inside #client-info, so we can't hide #client-info itself */
body[data-current-wizard-step="5"] #client-info > h3.section-title,
body[data-current-wizard-step="5"] #client-info > .client-info-grid,
body[data-current-wizard-step="5"] #client-info > .advanced-options,
body[data-current-wizard-step="5"] #client-info > .notes-section,
body[data-current-wizard-step="5"] #client-info > #subtotal-display-container,
body[data-current-wizard-step="5"] #client-info > #grand-total-box,
body[data-current-wizard-step="5"] #client-info > .primary-action-container { display: none !important; }
/* Strip the navy gradient bg from #client-info on step 5 (only step 5 content shows) */
body[data-current-wizard-step="5"] #client-info {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Section title — eyebrow + heading combo */
#client-info .section-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  padding: 0 !important;
  border: none !important;
  font-family: inherit !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #FFFFFF !important;
  text-transform: none !important;
  position: relative;
}
#client-info .section-title::before {
  content: "Customer · Step 04";
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Menlo', 'Consolas', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FF6B7A;
  margin-bottom: 8px;
}
#client-info .section-title::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: #FF6B7A;
}
#client-info .section-title .section-icon { display: none !important; }

/* Form fields grid */
#client-info .client-info-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 18px !important;
  margin-bottom: 22px !important;
}
@media (max-width: 720px) {
  #client-info .client-info-grid { grid-template-columns: 1fr !important; }
}

/* Hide Sales Rep field in Step 4 (already shown in modal badge) */
#client-info .client-info-grid .form-field:has(#salesRep) { display: none !important; }
/* Hide entire Advanced Export Options section (Send Copies To + duplicate CC moved to main grid) */
#client-info #advancedOptions { display: none !important; }
/* Show Additional CC Emails hint text */
#client-info .form-field .field-hint {
  display: block !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.45) !important;
  letter-spacing: 0.04em !important;
  margin-top: 6px !important;
}

/* Form field — label + input */
#client-info .form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#client-info .form-field > label {
  font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Menlo', 'Consolas', monospace !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.55) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}
#client-info .form-field > label .label-icon { display: none !important; }

/* Inputs, selects, textarea */
#client-info input[type="text"],
#client-info input[type="email"],
#client-info input[type="tel"],
#client-info select,
#client-info textarea {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 10px !important;
  color: #FFFFFF !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 13px 14px !important;
  transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
  width: 100% !important;
  box-sizing: border-box;
  outline: none !important;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
#client-info select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%23FF6B7A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 36px !important;
}
#client-info input::placeholder,
#client-info textarea::placeholder {
  color: rgba(255, 255, 255, 0.35) !important;
  font-weight: 400 !important;
}
#client-info input:hover,
#client-info select:hover,
#client-info textarea:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
#client-info input:focus,
#client-info select:focus,
#client-info textarea:focus {
  background: rgba(196, 30, 46, 0.06) !important;
  border-color: #C41E2E !important;
  box-shadow: 0 0 0 3px rgba(196, 30, 46, 0.15) !important;
}

/* Sales rep email helper */
#client-info .sales-rep-email {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  color: #FF6B7A !important;
  margin-top: 8px !important;
  letter-spacing: 0.04em !important;
  display: none;
}
#client-info .sales-rep-email[style*="block"],
#client-info #salesRepEmailText:not(:empty) ~ * { display: block !important; }

/* Advanced options collapsible */
#client-info .advanced-options {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 0;
  margin: 0 0 22px 0;
  overflow: hidden;
}
#client-info .advanced-options-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 18px !important;
  cursor: pointer;
  list-style: none;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.7) !important;
  transition: background 200ms ease;
}
#client-info .advanced-options-header::-webkit-details-marker { display: none; }
#client-info .advanced-options-header:hover { background: rgba(255, 255, 255, 0.04); }
#client-info .advanced-options-header .advanced-icon { display: none; }
#client-info .advanced-options-header .advanced-arrow {
  margin-left: auto;
  font-size: 10px;
  color: #FF6B7A;
  transition: transform 200ms ease;
}
#client-info .advanced-options[open] .advanced-arrow { transform: rotate(180deg); }
#client-info .advanced-options-content {
  padding: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
#client-info .email-routing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) {
  #client-info .email-routing-grid { grid-template-columns: 1fr; }
}
#client-info .field-hint {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  color: rgba(255, 255, 255, 0.45) !important;
  margin: 6px 0 0 0 !important;
  letter-spacing: 0.04em !important;
}

/* Notes section */
#client-info .notes-section {
  margin: 0 0 22px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#client-info .notes-section > label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.55) !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
#client-info .notes-section .label-icon { display: none !important; }
#client-info textarea {
  resize: vertical;
  min-height: 84px;
  font-family: inherit !important;
  line-height: 1.5;
}

/* Subtotal / List Price reference — hidden on Step 4 */
#client-info #subtotal-display-container { display: none !important; }
#client-info #subtotal-display-container > span:first-child {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.55) !important;
}
#client-info #subtotal-display-container #subtotalValue {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  font-variant-numeric: tabular-nums;
}

/* Grand Total box — premium green accent */
#client-info #grand-total-box {
  background: linear-gradient(180deg, rgba(34, 197, 94, 0.18) 0%, rgba(34, 197, 94, 0.06) 100%) !important;
  border: 1px solid rgba(34, 197, 94, 0.5) !important;
  border-radius: 14px !important;
  padding: 18px 22px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin: 8px 0 22px 0 !important;
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.18);
}
#client-info #grand-total-box label,
#client-info #grand-total-box #grandTotalLabel {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #4ADE80 !important;
  margin: 0 !important;
}
#client-info #grand-total-box h2,
#client-info #grand-total-box #grandTotalValue {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  margin: 0 !important;
  letter-spacing: -0.01em !important;
  font-variant-numeric: tabular-nums;
}

/* Primary action button — Confirm & Unlock */
#client-info .primary-action-container {
  display: flex !important;
  justify-content: center !important;
  margin-top: clamp(6px, 1vh, 10px) !important;
  padding-bottom: 0 !important;
}
#client-info .primary-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 14px 32px !important;
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
  border: 1px solid rgba(34, 197, 94, 0.5) !important;
  border-radius: 12px !important;
  color: #FFFFFF !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease !important;
  box-shadow: 0 8px 24px rgba(34, 197, 94, 0.3) !important;
  text-transform: none !important;
  width: auto !important;
}
#client-info .primary-action-btn:hover:not(:disabled) {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(34, 197, 94, 0.45) !important;
}
#client-info .primary-action-btn:active:not(:disabled) { transform: translateY(0); }
#client-info .primary-action-btn:disabled {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: none !important;
  cursor: not-allowed;
}
#client-info .primary-action-icon { font-size: 16px; }

/* ============================================================
   CLIENT DATA MODAL — matches Step 0 brand aesthetic
   Navy gradient + brand red accents + JetBrains Mono labels
   ============================================================ */

#clientDataModal.client-data-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
#clientDataModal[style*="block"],
#clientDataModal[style*="flex"] { display: flex !important; }

#clientDataModal .client-data-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(6, 15, 35, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#clientDataModal .client-data-modal-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #060F23 0%, #0A1B3A 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(196, 30, 46, 0.15) !important;
  padding: 36px 32px !important;
  animation: fadeInUp 320ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Header */
#clientDataModal .client-data-modal-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 16px;
  padding: 0;
  border: none;
  background: transparent;
  position: relative;
}
#clientDataModal .client-data-modal-header::before { content: none; }

/* Header icon (Full PRO logo) */
#clientDataModal .client-data-modal-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  margin-bottom: 16px;
  background: transparent;
  border: none;
  border-radius: 0;
  color: #06B6D4;
  padding: 0;
  box-sizing: border-box;
}
#clientDataModal .client-data-modal-icon svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
}
#clientDataModal .client-data-modal-icon--logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}
#clientDataModal .client-data-modal-header h2 {
  margin: 0 0 8px 0 !important;
  font-size: 24px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: #FFFFFF !important;
  background: none !important;
  -webkit-text-fill-color: #FFFFFF !important;
  text-transform: none !important;
}
#clientDataModal .client-data-modal-header h2::first-letter,
#clientDataModal .client-data-modal-header h2 {
  color: #FFFFFF !important;
}
/* Hide the leading 👤 emoji in h2 by clipping the first character via spacing */
#clientDataModal .client-data-subtitle {
  margin: 0 !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-weight: 400 !important;
  line-height: 1.5;
}

/* Body fields */
#clientDataModal .client-data-modal-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 24px;
}
#clientDataModal .client-data-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
#clientDataModal .client-data-field > label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.55) !important;
}
#clientDataModal .field-icon { display: none !important; }
#clientDataModal .field-label { color: inherit !important; font-weight: inherit !important; font-size: inherit !important; letter-spacing: inherit !important; }
#clientDataModal .field-required {
  color: #06B6D4 !important;
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
}

/* Inputs */
#clientDataModal .client-data-input,
#clientDataModal .client-data-select,
#clientDataModal input[type="text"],
#clientDataModal input[type="tel"],
#clientDataModal input[type="email"],
#clientDataModal select {
  width: 100% !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 10px !important;
  color: #FFFFFF !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 13px 14px !important;
  transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
  outline: none !important;
  box-sizing: border-box !important;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
#clientDataModal select.client-data-select,
#clientDataModal select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%2306B6D4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 36px !important;
}
#clientDataModal .client-data-input::placeholder,
#clientDataModal input::placeholder {
  color: rgba(255, 255, 255, 0.7) !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}
#clientDataModal .client-data-input:hover,
#clientDataModal .client-data-select:hover,
#clientDataModal input:hover,
#clientDataModal select:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
}
#clientDataModal .client-data-input:focus,
#clientDataModal .client-data-select:focus,
#clientDataModal input:focus,
#clientDataModal select:focus {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: #06B6D4 !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.22) !important;
}

/* Field hint — hidden (e.g. phone country code warning) */
#clientDataModal .field-hint { display: none !important; }

/* Hidden Sales Rep field (we show rep in header badge instead) */
#clientDataModal .client-data-field--hidden { display: none !important; }

/* Sales Rep badge — small pill below the logo, above the title */
#clientDataModal .client-data-rep-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 14px auto;
  padding: 7px 14px 7px 7px;
  background: rgba(6, 182, 212, 0.08);
  border: 1px solid rgba(6, 182, 212, 0.28);
  border-radius: 9999px;
}
#clientDataModal .rep-badge-label {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  background: rgba(6, 182, 212, 0.18);
  border-radius: 9999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #06B6D4;
}
#clientDataModal .rep-badge-name {
  font-size: 13px;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: 0.01em;
}

/* Field error state */
#clientDataModal .client-data-input.field-invalid,
#clientDataModal input.field-invalid {
  border-color: #EF4444 !important;
  background: rgba(239, 68, 68, 0.08) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
}
#clientDataModal .field-error {
  margin: 6px 0 0 0 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  color: #FCA5A5 !important;
  letter-spacing: 0.04em !important;
  display: none;
  line-height: 1.4;
}
#clientDataModal .field-error.show { display: block; }

/* Footer + button */
#clientDataModal .client-data-modal-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: none;
  background: transparent;
}
#clientDataModal .start-quote-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 14px 24px !important;
  background: #06B6D4 !important;
  border: 1px solid #06B6D4 !important;
  border-radius: 12px !important;
  color: #FFFFFF !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease !important;
  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.28) !important;
  text-transform: none !important;
}
#clientDataModal .start-quote-btn:hover:not(:disabled) {
  background: #0891B2 !important;
  border-color: #0891B2 !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(6, 182, 212, 0.4) !important;
}
#clientDataModal .start-quote-btn:active:not(:disabled) { transform: translateY(0); }
#clientDataModal .start-quote-btn:disabled {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: none !important;
  cursor: not-allowed;
}
#clientDataModal .btn-icon { font-size: 16px; }

#clientDataModal .client-data-hint {
  margin: 0 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.4) !important;
  text-align: center;
}

/* ============================================================
   EXTRAS / EDIT ITEM MODALS — match Client Modal aesthetic
   Navy gradient + white border + JetBrains Mono labels + cyan
   ============================================================ */

#extrasModal.extras-modal,
#editItemModal.extras-modal { padding: 20px; }

#extrasModal .extras-modal-overlay,
#editItemModal .extras-modal-overlay {
  background: rgba(6, 15, 35, 0.75) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

#extrasModal .extras-modal-content,
#editItemModal .extras-modal-content {
  background: linear-gradient(180deg, #060F23 0%, #0A1B3A 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(6, 182, 212, 0.1) !important;
  max-height: 88vh;
}

/* Header */
#extrasModal .extras-modal-header,
#editItemModal .extras-modal-header {
  padding: 22px 26px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
#extrasModal .extras-modal-header h3,
#editItemModal .extras-modal-header h3 {
  margin: 0 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.01em !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 4px !important;
  position: relative;
}
#extrasModal .extras-modal-header h3::before {
  content: "Step 01 · Upgrades";
  display: inline-block;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FF6B7A;
  margin-bottom: 2px;
}
#editItemModal .extras-modal-header h3::before {
  content: "Edit · Item";
  display: inline-block;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FF6B7A;
  margin-bottom: 2px;
}

/* Close button */
#extrasModal .extras-modal-close,
#editItemModal .extras-modal-close {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  font-size: 14px !important;
}
#extrasModal .extras-modal-close:hover,
#editItemModal .extras-modal-close:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
  color: #fca5a5 !important;
}

/* Body */
#extrasModal .extras-modal-body,
#editItemModal .extras-modal-body { padding: 24px 26px !important; }

#extrasModal .extras-modal-body::-webkit-scrollbar-thumb,
#editItemModal .extras-modal-body::-webkit-scrollbar-thumb {
  background: rgba(6, 182, 212, 0.35) !important;
}

/* Footer */
#extrasModal .extras-modal-footer,
#editItemModal .extras-modal-footer {
  padding: 18px 26px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* "Done" button — cyan */
#extrasModal .extras-modal-done,
#editItemModal .extras-modal-done {
  padding: 12px 28px !important;
  background: #06B6D4 !important;
  border-radius: 10px !important;
  color: #FFFFFF !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 6px 18px rgba(6, 182, 212, 0.28) !important;
}
#extrasModal .extras-modal-done:hover,
#editItemModal .extras-modal-done:hover {
  background: #0891B2 !important;
  box-shadow: 0 10px 24px rgba(6, 182, 212, 0.4) !important;
  transform: translateY(-1px);
}

/* Extras grid cards — modal style */
#extrasModal .extras-grid .extra-item,
#editItemModal .extras-grid .extra-item {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease !important;
  box-shadow: none !important;
}
#extrasModal .extras-grid .extra-item:hover,
#editItemModal .extras-grid .extra-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  transform: translateY(-2px);
  box-shadow: none !important;
}
#extrasModal .extras-grid .extra-item.selected,
#editItemModal .extras-grid .extra-item.selected {
  background: rgba(6, 182, 212, 0.10) !important;
  border-color: #06B6D4 !important;
  box-shadow: 0 0 0 1px rgba(6, 182, 212, 0.4) !important;
}
#extrasModal .extras-grid .extra-item.selected:hover,
#editItemModal .extras-grid .extra-item.selected:hover {
  background: rgba(6, 182, 212, 0.14) !important;
}

#extrasModal .extra-item-name,
#editItemModal .extra-item-name {
  color: #FFFFFF !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
#extrasModal .extra-item-price,
#editItemModal .extra-item-price {
  color: #06B6D4 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

/* Checkboxes inside extra cards — brand red */
#extrasModal .extras-grid .extra-item input[type="checkbox"],
#editItemModal .extras-grid .extra-item input[type="checkbox"] {
  accent-color: #C41E2E;
  width: 20px;
  height: 20px;
  cursor: pointer;
  border-radius: 4px;
}

/* Quantity controls inside extra cards */
#extrasModal .extra-qty-controls,
#editItemModal .extra-qty-controls {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}
#extrasModal .extra-qty-btn,
#editItemModal .extra-qty-btn {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #FFFFFF !important;
}
#extrasModal .extra-qty-btn:hover,
#editItemModal .extra-qty-btn:hover {
  background: rgba(196, 30, 46, 0.16) !important;
  border-color: #C41E2E !important;
  color: #FF6B7A !important;
}
#extrasModal .extra-qty-input,
#editItemModal .extra-qty-input {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #FFFFFF !important;
}
#extrasModal .extra-qty-input:focus,
#editItemModal .extra-qty-input:focus {
  border-color: #06B6D4 !important;
  box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.22) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}

/* ============================================================
   EDIT ITEM MODAL — additional bits
   ============================================================ */

/* Item info card at top */
#editItemModal .edit-item-info {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  margin-bottom: 22px !important;
}
#editItemModal .edit-item-name {
  color: #FFFFFF !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}

/* Section labels (Quantity, Upgrades) */
#editItemModal .edit-section-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.55) !important;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
#editItemModal .edit-label-icon { display: none !important; }

/* Section dividers */
#editItemModal .edit-quantity-section {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-bottom: 22px !important;
  margin-bottom: 22px !important;
}

/* Edit Quantity input */
#editItemModal .edit-quantity-input {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 10px !important;
  color: #FFFFFF !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  padding: 13px 14px !important;
  max-width: 200px;
}
#editItemModal .edit-quantity-input:focus {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: #06B6D4 !important;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.22) !important;
}

/* Total card — cyan accent (was green) */
#editItemModal .edit-modal-total {
  background: linear-gradient(180deg, rgba(6, 182, 212, 0.18) 0%, rgba(6, 182, 212, 0.06) 100%) !important;
  border: 1px solid rgba(6, 182, 212, 0.5) !important;
  border-radius: 14px !important;
  padding: 18px 22px !important;
  margin: 4px 26px 18px 26px !important;
  box-shadow: 0 8px 24px rgba(6, 182, 212, 0.18) !important;
  animation: none !important;
}
#editItemModal .edit-modal-total-label {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: #06B6D4 !important;
}
#editItemModal .edit-modal-total-value {
  font-family: inherit !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  letter-spacing: -0.02em !important;
  text-shadow: none !important;
  font-variant-numeric: tabular-nums;
}

/* Cancel & Update buttons */
#editItemModal .extras-modal-cancel {
  padding: 12px 22px !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 10px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  margin-right: 10px !important;
}
#editItemModal .extras-modal-cancel:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
}
#editItemModal .extras-modal-update {
  padding: 12px 26px !important;
  background: #06B6D4 !important;
  border: 1px solid #06B6D4 !important;
  border-radius: 10px !important;
  color: #FFFFFF !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 6px 18px rgba(6, 182, 212, 0.28) !important;
}
#editItemModal .extras-modal-update:hover {
  background: #0891B2 !important;
  border-color: #0891B2 !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(6, 182, 212, 0.4) !important;
}

/* ============================================================
   STEP 3 — List Price card: matches Step 2 style (cyan + red)
   ============================================================ */
body[data-current-wizard-step="3"] #list-price-box,
body[data-current-wizard-step="3"] #list-price-box.grand-total-revealed {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.10) 0%, rgba(6, 182, 212, 0.04) 100%) !important;
  border: 1px solid rgba(6, 182, 212, 0.35) !important;
  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.12) !important;
}
body[data-current-wizard-step="3"] #list-price-box label {
  color: #06B6D4 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
}
body[data-current-wizard-step="3"] #list-price-box h2,
body[data-current-wizard-step="3"] #list-price-box.grand-total-revealed h2 {
  color: #06B6D4 !important;
  text-shadow: 0 0 10px rgba(6, 182, 212, 0.45) !important;
  font-family: inherit !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  font-variant-numeric: tabular-nums;
}
/* Hidden state (before reveal) — keep dim but use neutral white */
body[data-current-wizard-step="3"] #list-price-box.grand-total-hidden {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
}
body[data-current-wizard-step="3"] #list-price-box.grand-total-hidden label {
  color: rgba(255, 255, 255, 0.4) !important;
}
body[data-current-wizard-step="3"] #list-price-box.grand-total-hidden h2 {
  color: rgba(255, 255, 255, 0.4) !important;
  text-shadow: none !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

/* ============================================================
   STEP 3 — Quote: header, items list, discount section
   Matches Step 2 brand aesthetic (white + cyan + red accents)
   ============================================================ */

/* Header: "Quote" title + lock + "Quote Total (X items)" */
body[data-current-wizard-step="3"] .card-right > div[data-wizard-step="3"]:first-child {
  padding: 4px 0 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 16px;
}
body[data-current-wizard-step="3"] .card-right > div[data-wizard-step="3"]:first-child h2 {
  color: #FFFFFF !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}
body[data-current-wizard-step="3"] #managerToggle {
  color: #06B6D4 !important;
  filter: none;
  font-size: 16px !important;
  opacity: 0.7;
  transition: opacity 200ms ease, transform 200ms ease;
}
body[data-current-wizard-step="3"] #managerToggle:hover { opacity: 1; transform: scale(1.1); }
body[data-current-wizard-step="3"] #resume {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Quote items list */
body[data-current-wizard-step="3"] #quote-items-list {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding-bottom: 14px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body[data-current-wizard-step="3"] .quote-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  transition: background 200ms ease, border-color 200ms ease;
}
body[data-current-wizard-step="3"] .quote-item:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.18);
}
body[data-current-wizard-step="3"] .quote-item-title {
  color: #FFFFFF !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.4;
}
body[data-current-wizard-step="3"] .quote-item-desc,
body[data-current-wizard-step="3"] .quote-item-extras {
  color: rgba(255, 255, 255, 0.55) !important;
  font-size: 12px !important;
  margin-top: 4px;
}
body[data-current-wizard-step="3"] .quote-item > div:last-child {
  align-items: center !important;
  flex-shrink: 0;
}
body[data-current-wizard-step="3"] .quote-item > div:last-child > span {
  color: #FFFFFF !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  font-variant-numeric: tabular-nums;
}
body[data-current-wizard-step="3"] .edit-item-btn,
body[data-current-wizard-step="3"] .delete-item-btn {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  width: 30px;
  height: 30px;
  padding: 0 !important;
  font-size: 13px !important;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body[data-current-wizard-step="3"] .edit-item-btn:hover {
  background: rgba(6, 182, 212, 0.15) !important;
  border-color: #06B6D4 !important;
  transform: scale(1.06);
}
body[data-current-wizard-step="3"] .delete-item-btn:hover {
  background: rgba(196, 30, 46, 0.15) !important;
  border-color: #C41E2E !important;
  transform: scale(1.06);
}

/* Special Discount section — minimal, no container bg */
body[data-current-wizard-step="3"] #special-discount-box {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 8px 2px !important;
  margin-top: 12px !important;
}
body[data-current-wizard-step="3"] .discount-checkbox-label {
  color: #FF6B7A !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
body[data-current-wizard-step="3"] .discount-checkbox-label input[type="checkbox"] {
  accent-color: #C41E2E;
  width: 16px !important;
  height: 16px !important;
}
body[data-current-wizard-step="3"] #discount-inputs label {
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
body[data-current-wizard-step="3"] #finalPriceInput {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 10px !important;
  color: #FFFFFF !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 12px 14px !important;
}
body[data-current-wizard-step="3"] #finalPriceInput:focus {
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08) !important;
  outline: none !important;
}
body[data-current-wizard-step="3"] .discount-result {
  background: rgba(6, 182, 212, 0.10) !important;
  border-left: 3px solid #06B6D4 !important;
  border-radius: 8px;
  padding: 12px 14px;
}
body[data-current-wizard-step="3"] .discount-amount {
  color: #06B6D4 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}
body[data-current-wizard-step="3"] .discount-savings-message {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.18) 0%, rgba(6, 182, 212, 0.08) 100%) !important;
  border: 1px solid rgba(6, 182, 212, 0.4) !important;
  color: #FFFFFF !important;
  text-shadow: none !important;
  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.18) !important;
  font-size: 14px !important;
  letter-spacing: 0.02em;
}

/* ============================================================
   STEP 2 — Details: cyan → red accents, price value → cyan
   ============================================================ */

/* Description section label (cyan → red) */
body[data-current-wizard-step="2"] .description-section > label,
body[data-current-wizard-step="2"] .description-section label[for="descTemplate"] {
  color: #FF6B7A !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

/* "Select Price for Quote" header */
body[data-current-wizard-step="2"] .price-preview-label {
  color: #FF6B7A !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
}

/* Selected price card — soft cyan gradient + cyan border (steps 1 & 2 identical) */
body[data-current-wizard-step="1"] .selected-price-display,
body[data-current-wizard-step="2"] .selected-price-display {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.10) 0%, rgba(6, 182, 212, 0.04) 100%) !important;
  border: 1px solid rgba(6, 182, 212, 0.35) !important;
  box-shadow: 0 4px 16px rgba(6, 182, 212, 0.12) !important;
}
body[data-current-wizard-step="1"] .selected-price-label,
body[data-current-wizard-step="2"] .selected-price-label {
  color: rgba(255, 255, 255, 0.7) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
/* Price NUMBER → green (steps 1 & 2 identical) */
body[data-current-wizard-step="1"] .selected-price-value,
body[data-current-wizard-step="2"] .selected-price-value {
  color: #22c55e !important;
  text-shadow: 0 0 10px rgba(34, 197, 94, 0.45) !important;
  font-family: 'Courier New', monospace !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  font-variant-numeric: tabular-nums;
}

/* Authorized prices lock button — cyan accent (matches price card) */
body[data-current-wizard-step="2"] .authorized-prices-lock-btn {
  border-color: rgba(6, 182, 212, 0.35) !important;
  background: rgba(6, 182, 212, 0.08) !important;
  color: #06B6D4 !important;
}
body[data-current-wizard-step="2"] .authorized-prices-lock-btn:hover {
  background: rgba(6, 182, 212, 0.18) !important;
  border-color: #06B6D4 !important;
  transform: scale(1.08);
}
body[data-current-wizard-step="2"] .authorized-prices-lock-btn.unlocked {
  border-color: rgba(34, 197, 94, 0.45) !important;
  background: rgba(34, 197, 94, 0.12) !important;
}

/* Authorized prices collapsible — cyan (matches price card) */
body[data-current-wizard-step="2"] .price-options-collapsible {
  background: rgba(6, 182, 212, 0.05) !important;
  border: 1px solid rgba(6, 182, 212, 0.25) !important;
}
body[data-current-wizard-step="2"] .price-options-collapsible[open] {
  background: rgba(6, 182, 212, 0.08) !important;
  border-color: rgba(6, 182, 212, 0.4) !important;
}
body[data-current-wizard-step="2"] .price-options-summary {
  background: rgba(6, 182, 212, 0.05) !important;
  color: #06B6D4 !important;
}
body[data-current-wizard-step="2"] .price-options-summary:hover {
  background: rgba(6, 182, 212, 0.12) !important;
}
body[data-current-wizard-step="2"] .price-options-summary .summary-text {
  color: #06B6D4 !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body[data-current-wizard-step="2"] .price-options-summary .summary-arrow {
  color: #06B6D4 !important;
}

/* Lock button unlocked state — cyan background (was green) */
body[data-current-wizard-step="2"] .authorized-prices-lock-btn.unlocked {
  border-color: #06B6D4 !important;
  background: rgba(6, 182, 212, 0.18) !important;
  color: #06B6D4 !important;
}

/* Dropdown items — keep names white, values green */
body[data-current-wizard-step="2"] .price-option-name {
  color: #FFFFFF !important;
}
body[data-current-wizard-step="2"] .price-option-value {
  color: #22c55e !important;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   LIGHT THEME — global override layer (scoped to [data-theme="light"])
   ============================================================ */

/* Body & step backgrounds */
body[data-theme="light"] { background: var(--paper) !important; color: var(--ink) !important; }body[data-theme="light"][data-current-wizard-step="0"] { background: var(--paper) !important; }body[data-theme="light"][data-current-wizard-step="4"] { background: var(--paper) !important; }/* Step 0 hero — keep navy as accent on light paper, not full-bleed dark */
[data-theme="light"] .wizard-step-0 {
  background: var(--paper) !important;
  color: var(--ink) !important;
}[data-theme="light"] .wizard-step-0-eyebrow { color: var(--brand-red) !important; }[data-theme="light"] .wizard-step-0-eyebrow::before { background: var(--brand-red) !important; }[data-theme="light"] .wizard-step-0-title { color: var(--ink) !important; }[data-theme="light"] .wizard-step-0-subtitle { color: var(--ink-3) !important; }/* Step 0 service cards — white surface */
[data-theme="light"] .service-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  box-shadow: var(--sh-sm) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}[data-theme="light"] .service-card::before { display: none !important; }[data-theme="light"] .service-card:hover {
  background: var(--surface) !important;
  border-color: var(--line-2) !important;
  box-shadow: var(--sh-md) !important;
  transform: translateY(-2px);
}[data-theme="light"] .service-card.selected {
  background: var(--surface) !important;
  border: 1.5px solid var(--brand-navy) !important;
  box-shadow: var(--sh-md), 0 0 0 1px var(--brand-navy) !important;
}[data-theme="light"] .service-card-icon {
  background: var(--paper-2) !important;
  color: var(--brand-navy) !important;
}[data-theme="light"] .service-card:hover .service-card-icon,
[data-theme="light"] .service-card.selected .service-card-icon {
  background: var(--brand-navy) !important;
  color: #ffffff !important;
}[data-theme="light"] .service-card:hover .service-card-icon svg,
[data-theme="light"] .service-card.selected .service-card-icon svg {
  stroke: #ffffff !important;
}[data-theme="light"] .service-card-icon svg { stroke: var(--brand-navy) !important; }[data-theme="light"] .service-card-label { color: var(--ink) !important; }[data-theme="light"] .service-card:hover .service-card-label { color: var(--ink) !important; }[data-theme="light"] .service-card-sub { color: var(--muted) !important; font-family: var(--font-mono) !important; }[data-theme="light"] .service-card-arrow {
  background: var(--paper-2) !important;
  color: var(--ink-3) !important;
}[data-theme="light"] .service-card:hover .service-card-arrow {
  background: var(--brand-navy) !important;
  color: #ffffff !important;
}[data-theme="light"] .service-card-badge {
  background: var(--brand-red) !important;
  color: #ffffff !important;
  font-family: var(--font-mono) !important;
}/* Wizard header — navy gradient remains on top bar */
[data-theme="light"] .wizard-header {
  background: linear-gradient(180deg, var(--brand-navy) 0%, var(--brand-navy-2) 100%) !important;
  border-bottom: 1px solid rgba(0,0,0,0.05) !important;
}[data-theme="light"] .wizard-header-title { color: #ffffff !important; }[data-theme="light"] .wizard-header-subtitle { color: rgba(255,255,255,0.55) !important; }[data-theme="light"] .wizard-header-quote-label { color: rgba(255,255,255,0.55) !important; }[data-theme="light"] .wizard-header-quote-info #wizardHeaderQuoteCustomer { color: #ffffff !important; }[data-theme="light"] .wizard-header-quote-info #wizardHeaderQuoteId { color: rgba(255,255,255,0.6) !important; }[data-theme="light"] .wizard-header-quote-sep { color: rgba(255,255,255,0.25) !important; }[data-theme="light"] .wizard-header-user { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.12) !important; }[data-theme="light"] .wizard-header-user:hover { background: rgba(255,255,255,0.14) !important; }[data-theme="light"] .wizard-header-user-name { color: #ffffff !important; }[data-theme="light"] .wizard-header-user-role { color: rgba(255,255,255,0.6) !important; }[data-theme="light"] .wizard-header-user-avatar {
  background: linear-gradient(135deg, var(--brand-red), var(--brand-red-deep)) !important;
}[data-theme="light"] .wizard-header-icon-btn {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.14) !important;
  color: rgba(255,255,255,0.85) !important;
}[data-theme="light"] .wizard-header-icon-btn:hover {
  background: rgba(255,255,255,0.16) !important;
  border-color: rgba(255,255,255,0.28) !important;
  color: #ffffff !important;
}[data-theme="light"] .wizard-header-logo {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.14) !important;
}/* Progress bar — already light */
[data-theme="light"] .wizard-progress-wrap {
  background: var(--paper-2) !important;
  border-bottom: 1px solid var(--line) !important;
}[data-theme="light"] .wpb-crumb { color: var(--ink-3) !important; }[data-theme="light"] .wpb-crumb-current { color: var(--ink) !important; }[data-theme="light"] .wpb-crumb-sep { color: var(--line-2) !important; }[data-theme="light"] .wp-step-num { background: var(--paper-3) !important; color: var(--muted) !important; border: 1.5px solid var(--line-2); }[data-theme="light"] .wp-step-label { color: var(--muted) !important; }[data-theme="light"] .wp-step-name { color: var(--muted) !important; }[data-theme="light"] .wp-step-connector { background: var(--line) !important; }body[data-theme="light"][data-current-wizard-step="1"] .wp-step[data-step="1"] .wp-step-num,
body[data-theme="light"][data-current-wizard-step="2"] .wp-step[data-step="2"] .wp-step-num,
body[data-theme="light"][data-current-wizard-step="3"] .wp-step[data-step="3"] .wp-step-num,
body[data-theme="light"][data-current-wizard-step="4"] .wp-step[data-step="4"] .wp-step-num,
body[data-theme="light"][data-current-wizard-step="5"] .wp-step[data-step="5"] .wp-step-num {
  background: var(--brand-navy) !important;
  color: #ffffff !important;
  border-color: var(--brand-navy) !important;
  box-shadow: 0 0 0 4px rgba(10,27,58,0.07) !important;
}body[data-theme="light"][data-current-wizard-step="1"] .wp-step[data-step="1"] .wp-step-name,
body[data-theme="light"][data-current-wizard-step="2"] .wp-step[data-step="2"] .wp-step-name,
body[data-theme="light"][data-current-wizard-step="3"] .wp-step[data-step="3"] .wp-step-name,
body[data-theme="light"][data-current-wizard-step="4"] .wp-step[data-step="4"] .wp-step-name,
body[data-theme="light"][data-current-wizard-step="5"] .wp-step[data-step="5"] .wp-step-name {
  color: var(--ink) !important;
}body[data-theme="light"][data-current-wizard-step="2"] .wp-step[data-step="1"] .wp-step-num,
body[data-theme="light"][data-current-wizard-step="3"] .wp-step[data-step="1"] .wp-step-num,
body[data-theme="light"][data-current-wizard-step="3"] .wp-step[data-step="2"] .wp-step-num,
body[data-theme="light"][data-current-wizard-step="4"] .wp-step[data-step="1"] .wp-step-num,
body[data-theme="light"][data-current-wizard-step="4"] .wp-step[data-step="2"] .wp-step-num,
body[data-theme="light"][data-current-wizard-step="4"] .wp-step[data-step="3"] .wp-step-num,
body[data-theme="light"][data-current-wizard-step="5"] .wp-step[data-step="1"] .wp-step-num,
body[data-theme="light"][data-current-wizard-step="5"] .wp-step[data-step="2"] .wp-step-num,
body[data-theme="light"][data-current-wizard-step="5"] .wp-step[data-step="3"] .wp-step-num,
body[data-theme="light"][data-current-wizard-step="5"] .wp-step[data-step="4"] .wp-step-num {
  background: var(--ok) !important;
  color: #ffffff !important;
  border-color: var(--ok) !important;
}[data-theme="light"] .wpb-autosave-text { color: var(--muted) !important; }/* Cards (left/right) — white surface on light paper */
[data-theme="light"] .card { background: var(--surface) !important; border: 1px solid var(--line) !important; box-shadow: var(--sh-sm) !important; }/* Standard form container — light card */
body[data-theme="light"][data-current-wizard-step="1"] #standardFormContainer,
body[data-theme="light"][data-current-wizard-step="2"] #standardFormContainer {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--sh-sm) !important;
  color: var(--ink);
}[data-theme="light"] .std-panel-title {
  color: var(--ink) !important;
  border-bottom-color: var(--line) !important;
}/* Standard step 1 labels & inputs */
body[data-theme="light"][data-current-wizard-step="1"] #standardFormContainer #categoryItemRow > div > label,
body[data-theme="light"][data-current-wizard-step="1"] #standardFormContainer #qtyRow > div > label,
body[data-theme="light"][data-current-wizard-step="1"] #standardFormContainer #glassTypeRow > div > label,
body[data-theme="light"][data-current-wizard-step="1"] #standardFormContainer .row > div > label {
  color: var(--muted) !important;
  font-family: var(--font-mono) !important;
}body[data-theme="light"][data-current-wizard-step="1"] #standardFormContainer input[type="text"],
body[data-theme="light"][data-current-wizard-step="1"] #standardFormContainer input[type="number"],
body[data-theme="light"][data-current-wizard-step="1"] #standardFormContainer input[type="email"],
body[data-theme="light"][data-current-wizard-step="1"] #standardFormContainer select {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink) !important;
}body[data-theme="light"][data-current-wizard-step="1"] #standardFormContainer input::placeholder { color: var(--muted-2) !important; }body[data-theme="light"][data-current-wizard-step="1"] #standardFormContainer input:hover,
body[data-theme="light"][data-current-wizard-step="1"] #standardFormContainer select:hover {
  background: var(--surface-2) !important;
  border-color: var(--line-strong) !important;
}body[data-theme="light"][data-current-wizard-step="1"] #standardFormContainer input:focus,
body[data-theme="light"][data-current-wizard-step="1"] #standardFormContainer select:focus {
  background: var(--surface) !important;
  border-color: var(--brand-navy) !important;
  box-shadow: var(--sh-focus) !important;
}body[data-theme="light"][data-current-wizard-step="1"] #standardFormContainer select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%230A1B3A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}/* Item Selection Panel button */
body[data-theme="light"][data-current-wizard-step="1"] #standardFormContainer #itemSelectionPanelBtn.item-selection-panel-btn {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  box-shadow: none !important;
}body[data-theme="light"][data-current-wizard-step="1"] #standardFormContainer #itemSelectionPanelBtn.item-selection-panel-btn:hover {
  background: var(--surface-2) !important;
  border-color: var(--line-strong) !important;
}body[data-theme="light"][data-current-wizard-step="1"] #standardFormContainer #itemSelectionPanelBtn .isp-thumb {
  background: var(--paper-2) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}body[data-theme="light"][data-current-wizard-step="1"] #standardFormContainer #itemSelectionPanelBtn .isp-title { color: var(--ink) !important; }body[data-theme="light"][data-current-wizard-step="1"] #standardFormContainer #itemSelectionPanelBtn .isp-sub { color: var(--muted) !important; }body[data-theme="light"][data-current-wizard-step="1"] #standardFormContainer #itemSelectionPanelBtn:hover .isp-title { color: var(--brand-navy) !important; }/* Quantity counter */
[data-theme="light"] .qty-counter {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
}[data-theme="light"] .qty-counter-input { color: var(--ink) !important; }[data-theme="light"] .qty-counter-btn {
  background: var(--paper-2) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink-3) !important;
}[data-theme="light"] .qty-counter-btn:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}[data-theme="light"] .qty-counter-hint { color: var(--muted) !important; }body[data-theme="light"][data-current-wizard-step="1"] #standardFormContainer .qty-counter-input {
  color: var(--ink) !important;
  border-color: transparent !important;
}body[data-theme="light"][data-current-wizard-step="1"] #standardFormContainer .qty-counter-btn:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}/* Section dividers inside standard form */
/* Inline row in light mode: no dividers */
body[data-theme="light"][data-current-wizard-step="1"] #standardFormContainer .qty-upgrades-row > #qtyRow {
  border-top: none !important;
}
body[data-theme="light"][data-current-wizard-step="1"] #standardFormContainer #extras-button-container {
  border-top: none !important;
}/* Add Upgrades button */
[data-theme="light"] #openExtrasBtn.extras-trigger-btn {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}[data-theme="light"] #openExtrasBtn.extras-trigger-btn .extras-btn-text { color: var(--ink) !important; }[data-theme="light"] #openExtrasBtn.extras-trigger-btn:hover {
  background: var(--paper-2) !important;
  border-color: var(--brand-navy) !important;
  color: var(--brand-navy) !important;
  box-shadow: var(--sh-sm) !important;
}[data-theme="light"] .extras-btn-count { color: var(--accent) !important; font-family: var(--font-mono) !important; }/* Step 2 — Description + Price */
body[data-theme="light"][data-current-wizard-step="2"] .description-section > label {
  color: var(--accent) !important;
  font-family: var(--font-mono) !important;
}body[data-theme="light"][data-current-wizard-step="2"] .price-preview-label {
  color: var(--accent) !important;
  font-family: var(--font-mono) !important;
}body[data-theme="light"][data-current-wizard-step="2"] .selected-price-display {
  background: var(--paper-2) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--sh-sm) !important;
}body[data-theme="light"][data-current-wizard-step="2"] .selected-price-label { color: var(--muted) !important; }body[data-theme="light"][data-current-wizard-step="2"] .selected-price-value {
  color: var(--brand-navy) !important;
  text-shadow: none !important;
  font-family: var(--font-num) !important;
  font-variant-numeric: tabular-nums;
}body[data-theme="light"][data-current-wizard-step="2"] .authorized-prices-lock-btn {
  background: var(--surface) !important;
  border-color: var(--line-2) !important;
  color: var(--ink-3) !important;
}body[data-theme="light"][data-current-wizard-step="2"] .authorized-prices-lock-btn:hover {
  background: var(--paper-2) !important;
  border-color: var(--brand-navy) !important;
  color: var(--brand-navy) !important;
}body[data-theme="light"][data-current-wizard-step="2"] .authorized-prices-lock-btn.unlocked {
  background: var(--ok-soft) !important;
  border-color: var(--ok) !important;
  color: var(--ok) !important;
}body[data-theme="light"][data-current-wizard-step="2"] .price-options-collapsible {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
}body[data-theme="light"][data-current-wizard-step="2"] .price-options-collapsible[open] {
  background: var(--surface-2) !important;
  border-color: var(--line-2) !important;
}body[data-theme="light"][data-current-wizard-step="2"] .price-options-summary {
  background: var(--surface) !important;
  color: var(--ink) !important;
}body[data-theme="light"][data-current-wizard-step="2"] .price-options-summary:hover { background: var(--paper-2) !important; }body[data-theme="light"][data-current-wizard-step="2"] .price-options-summary .summary-text { color: var(--ink-2) !important; font-family: var(--font-mono) !important; }body[data-theme="light"][data-current-wizard-step="2"] .price-options-summary .summary-arrow { color: var(--muted) !important; }body[data-theme="light"][data-current-wizard-step="2"] .price-option-name { color: var(--ink) !important; }body[data-theme="light"][data-current-wizard-step="2"] .price-option-value { color: var(--brand-navy) !important; font-family: var(--font-num) !important; }body[data-theme="light"][data-current-wizard-step="2"] .price-option {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
}body[data-theme="light"][data-current-wizard-step="2"] .price-option:hover {
  background: var(--paper-2) !important;
  border-color: var(--line-2) !important;
}body[data-theme="light"][data-current-wizard-step="2"] .price-option.selected {
  background: var(--surface-2) !important;
  border: 1.5px solid var(--brand-navy) !important;
  box-shadow: 0 0 0 1px var(--brand-navy) !important;
}/* Custom dropdown */
[data-theme="light"] .custom-select-trigger {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink) !important;
}[data-theme="light"] .custom-select-trigger:hover {
  background: var(--surface-2) !important;
  border-color: var(--line-strong) !important;
}[data-theme="light"] .custom-select-trigger[aria-expanded="true"] {
  background: var(--surface) !important;
  border-color: var(--brand-navy) !important;
  box-shadow: var(--sh-focus) !important;
}[data-theme="light"] .custom-select-arrow { color: var(--brand-navy) !important; }[data-theme="light"] .custom-select-panel {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  box-shadow: var(--sh-lg) !important;
}[data-theme="light"] .cs-group-label { color: var(--accent) !important; font-family: var(--font-mono) !important; }[data-theme="light"] .cs-option { color: var(--ink-2) !important; }[data-theme="light"] .cs-option:hover { background: var(--brand-navy) !important; color: #ffffff !important; }[data-theme="light"] .cs-option.cs-option-selected {
  background: var(--paper-2) !important;
  color: var(--brand-navy) !important;
}[data-theme="light"] .cs-option.cs-option-selected:hover { background: var(--brand-navy) !important; color: #ffffff !important; }/* Template buttons */
[data-theme="light"] .template-btn-clear { color: var(--err) !important; border-color: var(--err) !important; background: transparent !important; }[data-theme="light"] .template-btn-clear:hover { background: var(--err-soft) !important; }/* Step 3 — Quote */
body[data-theme="light"][data-current-wizard-step="3"] #resume { color: var(--muted) !important; font-family: var(--font-mono) !important; }body[data-theme="light"][data-current-wizard-step="3"] .card-right > div[data-wizard-step="3"]:first-child {
  border-bottom-color: var(--line) !important;
}body[data-theme="light"][data-current-wizard-step="3"] .quote-item {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
}body[data-theme="light"][data-current-wizard-step="3"] .quote-item:hover {
  background: var(--surface-2) !important;
  border-color: var(--line-2) !important;
}body[data-theme="light"][data-current-wizard-step="3"] .quote-item-title { color: var(--ink) !important; }body[data-theme="light"][data-current-wizard-step="3"] .quote-item-desc,
body[data-theme="light"][data-current-wizard-step="3"] .quote-item-extras { color: var(--muted) !important; }body[data-theme="light"][data-current-wizard-step="3"] .quote-item > div:last-child > span {
  color: var(--ink) !important;
  font-family: var(--font-num) !important;
}body[data-theme="light"][data-current-wizard-step="3"] .edit-item-btn,
body[data-theme="light"][data-current-wizard-step="3"] .delete-item-btn {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
}body[data-theme="light"][data-current-wizard-step="3"] .edit-item-btn:hover {
  background: var(--paper-2) !important;
  border-color: var(--brand-navy) !important;
}body[data-theme="light"][data-current-wizard-step="3"] .delete-item-btn:hover {
  background: var(--err-soft) !important;
  border-color: var(--err) !important;
}/* List Price box */
body[data-theme="light"][data-current-wizard-step="3"] #list-price-box,
body[data-theme="light"][data-current-wizard-step="3"] #list-price-box.grand-total-revealed {
  background: var(--paper-2) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}body[data-theme="light"][data-current-wizard-step="3"] #list-price-box label {
  color: var(--accent) !important;
  font-family: var(--font-mono) !important;
}body[data-theme="light"][data-current-wizard-step="3"] #list-price-box h2,
body[data-theme="light"][data-current-wizard-step="3"] #list-price-box.grand-total-revealed h2 {
  color: var(--brand-navy) !important;
  text-shadow: none !important;
  font-family: var(--font-display) !important;
  font-variant-numeric: tabular-nums;
}body[data-theme="light"][data-current-wizard-step="3"] #list-price-box.grand-total-hidden {
  background: var(--paper-2) !important;
  border-color: var(--line) !important;
  opacity: 0.65;
}body[data-theme="light"][data-current-wizard-step="3"] #list-price-box.grand-total-hidden label,
body[data-theme="light"][data-current-wizard-step="3"] #list-price-box.grand-total-hidden h2 {
  color: var(--muted) !important;
}/* Discount section */
body[data-theme="light"][data-current-wizard-step="3"] .discount-checkbox-label { color: var(--warn) !important; font-family: var(--font-mono) !important; }body[data-theme="light"][data-current-wizard-step="3"] .discount-checkbox-label input[type="checkbox"] { accent-color: var(--warn); }body[data-theme="light"][data-current-wizard-step="3"] #discount-inputs label { color: var(--muted) !important; }body[data-theme="light"][data-current-wizard-step="3"] #finalPriceInput {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink) !important;
}body[data-theme="light"][data-current-wizard-step="3"] #finalPriceInput:focus {
  border-color: var(--brand-navy) !important;
  box-shadow: var(--sh-focus) !important;
}body[data-theme="light"][data-current-wizard-step="3"] .discount-result {
  background: var(--ok-soft) !important;
  border-left: 3px solid var(--ok) !important;
}body[data-theme="light"][data-current-wizard-step="3"] .discount-amount { color: var(--ok) !important; }body[data-theme="light"][data-current-wizard-step="3"] .discount-savings-message {
  background: var(--ok-soft) !important;
  border: 1px solid var(--ok) !important;
  color: var(--ok) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}/* Step 4 — Customer */
[data-theme="light"] #client-info.client-export-section {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--sh-sm) !important;
}[data-theme="light"] #client-info .section-title { color: var(--ink) !important; }[data-theme="light"] #client-info .section-title::before { color: var(--accent) !important; }[data-theme="light"] #client-info .section-title::after { background: var(--accent) !important; }[data-theme="light"] #client-info .form-field > label {
  color: var(--muted) !important;
  font-family: var(--font-mono) !important;
}[data-theme="light"] #client-info input,
[data-theme="light"] #client-info select,
[data-theme="light"] #client-info textarea {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink) !important;
}[data-theme="light"] #client-info input::placeholder,
[data-theme="light"] #client-info textarea::placeholder { color: var(--muted-2) !important; }[data-theme="light"] #client-info input:hover,
[data-theme="light"] #client-info select:hover,
[data-theme="light"] #client-info textarea:hover {
  background: var(--surface) !important;
  border-color: var(--line-strong) !important;
}[data-theme="light"] #client-info input:focus,
[data-theme="light"] #client-info select:focus,
[data-theme="light"] #client-info textarea:focus {
  background: var(--surface) !important;
  border-color: var(--brand-navy) !important;
  box-shadow: var(--sh-focus) !important;
}[data-theme="light"] #client-info select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%230A1B3A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}[data-theme="light"] #client-info .field-hint { color: var(--muted) !important; font-family: var(--font-mono) !important; }[data-theme="light"] #client-info .notes-section > label { color: var(--muted) !important; font-family: var(--font-mono) !important; }[data-theme="light"] #client-info #grand-total-box {
  background: var(--ok-soft) !important;
  border: 1px solid var(--ok) !important;
  box-shadow: none !important;
}[data-theme="light"] #client-info #grand-total-box label,
[data-theme="light"] #client-info #grand-total-box #grandTotalLabel {
  color: var(--ok) !important;
  font-family: var(--font-mono) !important;
}[data-theme="light"] #client-info #grand-total-box h2,
[data-theme="light"] #client-info #grand-total-box #grandTotalValue {
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  font-variant-numeric: tabular-nums;
}[data-theme="light"] #client-info .primary-action-btn {
  background: var(--brand-navy) !important;
  border-color: var(--brand-navy) !important;
  color: #ffffff !important;
  box-shadow: var(--sh-sm) !important;
}[data-theme="light"] #client-info .primary-action-btn:hover:not(:disabled) {
  background: var(--brand-navy-ink) !important;
  border-color: var(--brand-navy-ink) !important;
  filter: none;
  box-shadow: var(--sh-md) !important;
}[data-theme="light"] #client-info .primary-action-btn:disabled {
  background: var(--paper-2) !important;
  border-color: var(--line) !important;
  color: var(--muted-2) !important;
  box-shadow: none !important;
}/* Footer + buttons */
[data-theme="light"] .wizard-main-footer {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--sh-sm) !important;
}[data-theme="light"] .wizard-btn-prev {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink-2) !important;
}[data-theme="light"] .wizard-btn-prev:hover {
  background: var(--paper-2) !important;
  border-color: var(--line-strong) !important;
  color: var(--ink) !important;
  box-shadow: none !important;
}[data-theme="light"] .wizard-btn-next {
  background: var(--brand-navy) !important;
  color: #ffffff !important;
  border: 1px solid var(--brand-navy) !important;
  box-shadow: var(--sh-sm) !important;
}[data-theme="light"] .wizard-btn-next:hover:not(:disabled) {
  background: var(--brand-navy-ink) !important;
  border-color: var(--brand-navy-ink) !important;
  filter: none;
  box-shadow: var(--sh-md) !important;
}body[data-theme="light"][data-current-wizard-step="1"] .wizard-btn-next,
body[data-theme="light"][data-current-wizard-step="3"] .wizard-btn-next,
[data-theme="light"] .wizard-btn-next.btn-add-mode {
  background: var(--ok) !important;
  border-color: var(--ok) !important;
  box-shadow: 0 1px 2px rgba(21, 105, 63, .15), 0 0 0 1px rgba(21, 105, 63, .1) !important;
}body[data-theme="light"][data-current-wizard-step="1"] .wizard-btn-next:hover:not(:disabled),
body[data-theme="light"][data-current-wizard-step="3"] .wizard-btn-next:hover:not(:disabled),
[data-theme="light"] .wizard-btn-next.btn-add-mode:hover:not(:disabled) {
  background: #0F4F2F !important;
  border-color: #0F4F2F !important;
  box-shadow: 0 4px 12px -4px rgba(21, 105, 63, .3) !important;
}[data-theme="light"] .wizard-btn-home {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink-2) !important;
}[data-theme="light"] .wizard-btn-home:hover {
  background: var(--paper-2) !important;
  border-color: var(--line-strong) !important;
  color: var(--ink) !important;
}/* Modals (client, extras, edit) — light surface */
[data-theme="light"] #clientDataModal .client-data-modal-overlay,
[data-theme="light"] #extrasModal .extras-modal-overlay,
[data-theme="light"] #editItemModal .extras-modal-overlay {
  background: rgba(10, 27, 58, 0.5) !important;
  backdrop-filter: blur(6px);
}[data-theme="light"] #clientDataModal .client-data-modal-content,
[data-theme="light"] #extrasModal .extras-modal-content,
[data-theme="light"] #editItemModal .extras-modal-content {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--sh-lg) !important;
}[data-theme="light"] #clientDataModal .client-data-modal-header h2 { color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; }[data-theme="light"] #clientDataModal .client-data-subtitle { color: var(--muted) !important; }[data-theme="light"] #clientDataModal .client-data-modal-icon {
  background: transparent !important;
  border: none !important;
}[data-theme="light"] #clientDataModal .client-data-rep-badge {
  background: var(--paper-2) !important;
  border: 1px solid var(--line-2) !important;
}[data-theme="light"] #clientDataModal .rep-badge-label {
  background: var(--brand-navy) !important;
  color: #ffffff !important;
  font-family: var(--font-mono) !important;
}[data-theme="light"] #clientDataModal .rep-badge-name { color: var(--ink) !important; }[data-theme="light"] #clientDataModal .client-data-field > label { color: var(--muted) !important; font-family: var(--font-mono) !important; }[data-theme="light"] #clientDataModal .field-required { color: var(--accent) !important; }[data-theme="light"] #clientDataModal .client-data-input,
[data-theme="light"] #clientDataModal input,
[data-theme="light"] #clientDataModal select {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink) !important;
}[data-theme="light"] #clientDataModal input::placeholder { color: var(--muted-2) !important; }[data-theme="light"] #clientDataModal input:hover,
[data-theme="light"] #clientDataModal select:hover { border-color: var(--line-strong) !important; }[data-theme="light"] #clientDataModal input:focus,
[data-theme="light"] #clientDataModal select:focus {
  background: var(--surface) !important;
  border-color: var(--brand-navy) !important;
  box-shadow: var(--sh-focus) !important;
}[data-theme="light"] #clientDataModal select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%230A1B3A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
}[data-theme="light"] #clientDataModal .start-quote-btn {
  background: var(--brand-navy) !important;
  border-color: var(--brand-navy) !important;
  color: #ffffff !important;
  box-shadow: var(--sh-sm) !important;
}[data-theme="light"] #clientDataModal .start-quote-btn:hover:not(:disabled) {
  background: var(--brand-navy-ink) !important;
  border-color: var(--brand-navy-ink) !important;
  box-shadow: var(--sh-md) !important;
}[data-theme="light"] #clientDataModal .start-quote-btn:disabled {
  background: var(--paper-2) !important;
  border-color: var(--line) !important;
  color: var(--muted-2) !important;
  box-shadow: none !important;
}[data-theme="light"] #clientDataModal .client-data-hint { color: var(--muted) !important; }[data-theme="light"] #clientDataModal .field-error { color: var(--err) !important; }[data-theme="light"] #clientDataModal .field-invalid {
  border-color: var(--err) !important;
  background: var(--err-soft) !important;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.1) !important;
}/* Extras modal headers */
[data-theme="light"] #extrasModal .extras-modal-header,
[data-theme="light"] #editItemModal .extras-modal-header { border-bottom-color: var(--line) !important; }[data-theme="light"] #extrasModal .extras-modal-header h3,
[data-theme="light"] #editItemModal .extras-modal-header h3 { color: var(--ink) !important; }[data-theme="light"] #extrasModal .extras-modal-header h3::before,
[data-theme="light"] #editItemModal .extras-modal-header h3::before { color: var(--accent) !important; }[data-theme="light"] #extrasModal .extras-modal-close,
[data-theme="light"] #editItemModal .extras-modal-close {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink-3) !important;
}[data-theme="light"] #extrasModal .extras-modal-close:hover,
[data-theme="light"] #editItemModal .extras-modal-close:hover {
  background: var(--err-soft) !important;
  border-color: var(--err) !important;
  color: var(--err) !important;
}[data-theme="light"] #extrasModal .extras-modal-footer,
[data-theme="light"] #editItemModal .extras-modal-footer { border-top-color: var(--line) !important; }[data-theme="light"] #extrasModal .extras-grid .extra-item,
[data-theme="light"] #editItemModal .extras-grid .extra-item {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
}[data-theme="light"] #extrasModal .extras-grid .extra-item:hover,
[data-theme="light"] #editItemModal .extras-grid .extra-item:hover {
  background: var(--surface-2) !important;
  border-color: var(--line-2) !important;
}[data-theme="light"] #extrasModal .extras-grid .extra-item.selected,
[data-theme="light"] #editItemModal .extras-grid .extra-item.selected {
  background: var(--paper-2) !important;
  border: 1.5px solid var(--brand-navy) !important;
  box-shadow: 0 0 0 1px var(--brand-navy) !important;
}[data-theme="light"] #extrasModal .extra-item-name,
[data-theme="light"] #editItemModal .extra-item-name { color: var(--ink) !important; }[data-theme="light"] #extrasModal .extra-item-price,
[data-theme="light"] #editItemModal .extra-item-price { color: var(--brand-navy) !important; font-family: var(--font-num) !important; }[data-theme="light"] #extrasModal .extras-grid .extra-item input[type="checkbox"],
[data-theme="light"] #editItemModal .extras-grid .extra-item input[type="checkbox"] { accent-color: var(--brand-navy); }[data-theme="light"] #extrasModal .extra-qty-controls,
[data-theme="light"] #editItemModal .extra-qty-controls { border-top-color: var(--line) !important; }[data-theme="light"] #extrasModal .extra-qty-btn,
[data-theme="light"] #editItemModal .extra-qty-btn {
  background: var(--paper-2) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink-2) !important;
}[data-theme="light"] #extrasModal .extra-qty-btn:hover,
[data-theme="light"] #editItemModal .extra-qty-btn:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}[data-theme="light"] #extrasModal .extra-qty-input,
[data-theme="light"] #editItemModal .extra-qty-input {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink) !important;
}[data-theme="light"] #extrasModal .extras-modal-done,
[data-theme="light"] #editItemModal .extras-modal-done {
  background: var(--brand-navy) !important;
  color: #ffffff !important;
  box-shadow: var(--sh-sm) !important;
}[data-theme="light"] #extrasModal .extras-modal-done:hover,
[data-theme="light"] #editItemModal .extras-modal-done:hover {
  background: var(--brand-navy-ink) !important;
  box-shadow: var(--sh-md) !important;
}/* Edit item modal */
[data-theme="light"] #editItemModal .edit-item-info {
  background: var(--paper-2) !important;
  border: 1px solid var(--line) !important;
}[data-theme="light"] #editItemModal .edit-item-name { color: var(--ink) !important; }[data-theme="light"] #editItemModal .edit-section-label { color: var(--muted) !important; font-family: var(--font-mono) !important; }[data-theme="light"] #editItemModal .edit-quantity-section { border-bottom-color: var(--line) !important; }[data-theme="light"] #editItemModal .edit-quantity-input {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink) !important;
}[data-theme="light"] #editItemModal .edit-quantity-input:focus {
  border-color: var(--brand-navy) !important;
  box-shadow: var(--sh-focus) !important;
}[data-theme="light"] #editItemModal .edit-modal-total {
  background: var(--paper-2) !important;
  border: 1px solid var(--line-2) !important;
  box-shadow: none !important;
  animation: none !important;
}[data-theme="light"] #editItemModal .edit-modal-total-label { color: var(--muted) !important; font-family: var(--font-mono) !important; }[data-theme="light"] #editItemModal .edit-modal-total-value {
  color: var(--brand-navy) !important;
  font-family: var(--font-display) !important;
  text-shadow: none !important;
  font-variant-numeric: tabular-nums;
}[data-theme="light"] #editItemModal .extras-modal-cancel {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink-2) !important;
}[data-theme="light"] #editItemModal .extras-modal-cancel:hover {
  background: var(--paper-2) !important;
  border-color: var(--line-strong) !important;
}[data-theme="light"] #editItemModal .extras-modal-update {
  background: var(--brand-navy) !important;
  border-color: var(--brand-navy) !important;
  color: #ffffff !important;
  box-shadow: var(--sh-sm) !important;
}[data-theme="light"] #editItemModal .extras-modal-update:hover {
  background: var(--brand-navy-ink) !important;
  border-color: var(--brand-navy-ink) !important;
  box-shadow: var(--sh-md) !important;
}/* Item Selection Modal */
[data-theme="light"] .item-selection-modal { background: rgba(10, 27, 58, 0.5) !important; }[data-theme="light"] .ism-overlay { background: rgba(10, 27, 58, 0.5) !important; }[data-theme="light"] .ism-content,
[data-theme="light"] .ism-panel {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  box-shadow: var(--sh-lg) !important;
  color: var(--ink);
}[data-theme="light"] .ism-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink);
}[data-theme="light"] .ism-card:hover {
  background: var(--surface-2) !important;
  border-color: var(--line-2) !important;
}[data-theme="light"] .ism-card.selected {
  background: var(--paper-2) !important;
  border: 1.5px solid var(--brand-navy) !important;
  box-shadow: 0 0 0 1px var(--brand-navy) !important;
}/* Sub-wizards (Flooring NEW, Kitchen NEW) */
[data-theme="light"] .flooring-wizard,
[data-theme="light"] #kitchenWizardContainer {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  color: var(--ink);
}[data-theme="light"] .wizard-step-num {
  background: var(--paper-2) !important;
  border-color: var(--line-2) !important;
  color: var(--muted) !important;
}[data-theme="light"] .wizard-step-indicator.active .wizard-step-num {
  background: var(--brand-navy) !important;
  border-color: var(--brand-navy) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(10,27,58,0.07) !important;
}[data-theme="light"] .wizard-step-indicator.completed .wizard-step-num {
  background: var(--ok) !important;
  border-color: var(--ok) !important;
  color: #ffffff !important;
}[data-theme="light"] .wizard-step-connector { background: var(--line) !important; }[data-theme="light"] .wizard-panel-title { color: var(--ink) !important; }[data-theme="light"] .wizard-step-label { color: var(--muted) !important; }[data-theme="light"] .wizard-nav-btn {
  background: var(--surface) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--ink-2) !important;
}[data-theme="light"] .wizard-nav-next {
  background: var(--brand-navy) !important;
  border-color: var(--brand-navy) !important;
  color: #ffffff !important;
}/* Misc text colors */
[data-theme="light"] .small,
[data-theme="light"] .muted,
[data-theme="light"] .hint { color: var(--muted) !important; }[data-theme="light"] .unit-note,
[data-theme="light"] .qty-counter-hint { color: var(--muted) !important; font-family: var(--font-mono) !important; font-size: 11px !important; }/* Step 5 — success */
[data-theme="light"] .wizard-step5-success-title { color: var(--ok) !important; }[data-theme="light"] .wizard-step5-success-subtitle { color: var(--ink-3) !important; }[data-theme="light"] .wizard-step5-success-icon { background: var(--ok-soft) !important; }/* Hide navy fills that don't make sense in light theme */
body[data-theme="light"][data-current-wizard-step="0"] { background: var(--paper) !important; }body[data-theme="light"][data-current-wizard-step="4"] { background: var(--paper) !important; }/* Loading overlay */
[data-theme="light"] #calculator-loading-overlay { color: var(--muted) !important; }

/* ============================================================
   STEP 4 — COMPACT LAYOUT + NOTES MODAL
   ============================================================ */

/* ───────── BLOQUE 1 — Grid de 4 columnas ───────── */

/* Step 4 — inputs en una sola fila de 4 columnas */
body[data-current-wizard-step="4"] .client-info-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1vw, 14px);
  margin-bottom: clamp(10px, 1.4vh, 18px);
}

/* Sales Rep sigue oculto */
body[data-current-wizard-step="4"] .client-info-grid:has(#salesRep) #salesRep {
  display: none;
}

/* ───────── BLOQUE 2 — Botón trigger "Add Notes" con preview ───────── */

.notes-trigger-section {
  margin-bottom: clamp(10px, 1.4vh, 18px);
}

.notes-trigger-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}

.notes-trigger-btn:hover {
  background: rgba(15, 23, 42, 0.85);
  border-color: var(--accent);
  border-style: solid;
}

.notes-trigger-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.22);
}

.notes-trigger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(6, 182, 212, 0.12);
  color: var(--accent);
  border-radius: 8px;
  flex-shrink: 0;
}

.notes-trigger-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.notes-trigger-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}

.notes-trigger-preview {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: none;
}

.notes-trigger-btn.has-content .notes-trigger-preview {
  display: block;
}

.notes-trigger-btn.has-content .notes-trigger-label {
  color: var(--accent);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.notes-trigger-arrow {
  color: var(--muted);
  font-size: 16px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.notes-trigger-btn:hover .notes-trigger-arrow {
  color: var(--accent);
  transform: translateX(2px);
}

/* ───────── BLOQUE 3 — Modal de Notes (overlay + dialog) ───────── */

.notes-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
  animation: notesModalFadeIn 0.2s ease;
}

.notes-modal-overlay[hidden] {
  display: none;
}

@keyframes notesModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.notes-modal {
  background: rgba(31, 41, 55, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: notesModalSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes notesModalSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.notes-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.notes-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.notes-modal-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.notes-modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.notes-modal-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
}

.notes-modal-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#clientNotesModal {
  width: 100%;
  min-height: 200px;
  padding: 14px 16px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.15s ease;
}

#clientNotesModal:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.18);
}

.notes-modal-hint {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.notes-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}

.notes-modal-btn-cancel,
.notes-modal-btn-save {
  padding: 10px 20px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.notes-modal-btn-cancel {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--muted);
}

.notes-modal-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.25);
}

.notes-modal-btn-save {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #001018;
}

.notes-modal-btn-save:hover {
  background: var(--accent-deep, #0891b2);
  border-color: var(--accent-deep, #0891b2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.25);
}

/* ───────── BLOQUE 4 — Responsive del grid (tablet/mobile) ───────── */

/* Tablet: 2 columnas */
@media (max-width: 900px) {
  body[data-current-wizard-step="4"] .client-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: 1 columna */
@media (max-width: 540px) {
  body[data-current-wizard-step="4"] .client-info-grid {
    grid-template-columns: 1fr;
  }

  .notes-modal {
    max-width: 100%;
    max-height: 95vh;
  }

  .notes-modal-header,
  .notes-modal-body,
  .notes-modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ============================================================
   STEP 2 — TEMPLATE MODAL (Day 5)
   ============================================================ */

/* ───────── BLOQUE 1 — Template trigger button ───────── */

.template-trigger-section {
  margin-bottom: clamp(10px, 1.4vh, 18px);
}

.template-trigger-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(15, 23, 42, 0.6);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease;
}

.template-trigger-btn:hover {
  background: rgba(15, 23, 42, 0.85);
  border-color: var(--accent);
  border-style: solid;
}

.template-trigger-btn:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.22);
}

.template-trigger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(6, 182, 212, 0.12);
  color: var(--accent);
  border-radius: 8px;
  flex-shrink: 0;
}

.template-trigger-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.template-trigger-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}

.template-trigger-preview {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: none;
}

.template-trigger-btn.has-content .template-trigger-preview {
  display: block;
}

.template-trigger-btn.has-content .template-trigger-label {
  color: var(--accent);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.template-trigger-arrow {
  color: var(--muted);
  font-size: 16px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.template-trigger-btn:hover .template-trigger-arrow {
  color: var(--accent);
  transform: translateX(2px);
}

/* ───────── BLOQUE 2 — Template Modal (overlay + dialog + tabs) ───────── */

.template-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
  animation: tmplModalFadeIn 0.2s ease;
}

.template-modal-overlay[hidden] {
  display: none;
}

@keyframes tmplModalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.template-modal {
  background: rgba(31, 41, 55, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: tmplModalSlideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes tmplModalSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.template-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.template-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.template-modal-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.template-modal-close:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.template-modal-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 24px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.template-tab {
  padding: 10px 18px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: -1px;
  transition: all 0.15s ease;
}

.template-tab:hover {
  color: var(--text);
}

.template-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.template-modal-body {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.template-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.template-tab-panel[hidden] {
  display: none;
}

.template-modal-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

.template-modal-select {
  width: 100%;
  padding: 12px 14px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.template-modal-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.18);
}

.template-apply-btn {
  align-self: flex-start;
  padding: 9px 18px;
  background: rgba(6, 182, 212, 0.12);
  border: 1px solid rgba(6, 182, 212, 0.4);
  border-radius: 8px;
  color: var(--accent);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.template-apply-btn:hover:not(:disabled) {
  background: rgba(6, 182, 212, 0.22);
  border-color: var(--accent);
}

.template-apply-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.template-modal-hint {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  padding: 12px 14px;
  background: rgba(6, 182, 212, 0.05);
  border-left: 3px solid rgba(6, 182, 212, 0.4);
  border-radius: 6px;
}

#templateModalTextarea {
  width: 100%;
  min-height: 220px;
  padding: 14px 16px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.15s ease;
}

#templateModalTextarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.18);
}

/* ───────── BLOQUE 3 — Template Modal Footer + responsive ───────── */

.template-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}

.template-modal-footer-right {
  display: flex;
  gap: 10px;
}

.template-modal-btn-clear {
  padding: 10px 16px;
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  color: rgba(239, 68, 68, 0.9);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.template-modal-btn-clear:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.5);
  color: rgba(239, 68, 68, 1);
}

.template-modal-btn-cancel,
.template-modal-btn-save {
  padding: 10px 20px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.template-modal-btn-cancel {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--muted);
}

.template-modal-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
}

.template-modal-btn-save {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #001018;
}

.template-modal-btn-save:hover {
  background: var(--accent-deep, #0891b2);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.25);
}

/* Mobile responsive */
@media (max-width: 540px) {
  .template-modal {
    max-width: 100%;
    max-height: 95vh;
  }

  .template-modal-header,
  .template-modal-body,
  .template-modal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .template-modal-tabs {
    padding-left: 16px;
    padding-right: 16px;
  }

  .template-modal-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .template-modal-footer-right {
    width: 100%;
  }

  .template-modal-btn-cancel,
  .template-modal-btn-save {
    flex: 1;
  }
}

/* ============================================================
   STEP TRANSITION OVERLAY
   Visible from the very first render (no display:none default).
   Hides via double-rAF + fade after each showStep() completes.
   Prevents flash on:
     • Initial page load (1.5 s wizard init delay)
     • Every step-to-step navigation
   ============================================================ */
#stepTransitionOverlay {
  position: fixed;
  inset: 0;
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg, #0f172a);
  opacity: 1;
  transition: opacity 0.22s ease;
  pointer-events: all;
  /* Visible by default — JS fades it out after first showStep(0) */
}

#stepTransitionOverlay.step-trans-hiding {
  opacity: 0;
  pointer-events: none;
}

#stepTransitionOverlay.step-trans-hidden {
  display: none;
}

.step-transition-spinner {
  width: 38px;
  height: 38px;
  border: 3px solid rgba(6, 182, 212, 0.15);
  border-top-color: #06b6d4;
  border-radius: 50%;
  animation: step-trans-spin 0.75s linear infinite;
}

@keyframes step-trans-spin {
  to { transform: rotate(360deg); }
}

/* Light theme: match paper background */
[data-theme="light"] #stepTransitionOverlay {
  background: var(--paper, #f8fafc);
}

/* The overlay must remain visible even during the auth-verified transition */
#stepTransitionOverlay {
  visibility: visible !important;
}

/* ============================================================
   WIZARD CART SHORTCUT BUTTON  (lives in the header right)
   Always visible when quote has items (all steps).
   Red accent to stand out against the header's neutral palette.
   ============================================================ */
.wizard-header-cart-btn {
  /* hidden by default; JS adds .wc-visible */
  display: none;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 12px 0 10px;

  background: rgba(239, 68, 68, 0.10);
  border: 1.5px solid rgba(239, 68, 68, 0.35);
  border-radius: 10px;
  color: #f87171;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-ui, Inter, sans-serif);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s, box-shadow 0.16s;
  flex-shrink: 0;
}

.wizard-header-cart-btn.wc-visible {
  display: flex;
  animation: wc-pop-in 0.22s cubic-bezier(.34,1.56,.64,1) both;
}

.wizard-header-cart-btn:hover {
  background: rgba(239, 68, 68, 0.18);
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: 0 2px 12px rgba(239, 68, 68, 0.22);
}

.wizard-header-cart-btn:active {
  background: rgba(239, 68, 68, 0.26);
}

.wizard-header-cart-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: 0.9;
}

.wizard-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  background: #ef4444;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  border-radius: 100px;
  line-height: 1;
}

/* badge bounce when count changes */
.wizard-cart-count.wc-bounce {
  animation: wc-badge-bounce 0.3s cubic-bezier(.34,1.56,.64,1);
}

@keyframes wc-pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

@keyframes wc-badge-bounce {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* Light theme */
[data-theme="light"] .wizard-header-cart-btn {
  background: rgba(220, 38, 38, 0.07);
  border-color: rgba(220, 38, 38, 0.32);
  color: #dc2626;
}
[data-theme="light"] .wizard-header-cart-btn:hover {
  background: rgba(220, 38, 38, 0.13);
  border-color: rgba(220, 38, 38, 0.55);
}
[data-theme="light"] .wizard-cart-count {
  background: #dc2626;
  color: #ffffff;
}


/* Settings button — admin-only visibility (Day 6) */
[data-admin-only] {
  display: none !important;
}

body.is-admin [data-admin-only] {
  display: inline-flex !important;
}

/* ============================================
   Color Picker Modal — Day 9
   ============================================ */
.color-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.color-modal--open {
  display: flex;
}

.color-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.color-modal__panel {
  position: relative;
  background: var(--fp-bg-elevated, #1a2332);
  color: var(--fp-text, #e8edf2);
  border: 1px solid var(--fp-border, #2a3a52);
  border-radius: 12px;
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.color-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--fp-border, #2a3a52);
  flex-shrink: 0;
  background: var(--fp-bg-elevated, #1a2332);
}

.color-modal__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.color-modal__close {
  background: transparent;
  color: inherit;
  border: 0;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 12px;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.color-modal__close:hover {
  background: var(--fp-bg-hover, rgba(255,255,255,0.08));
}

.color-modal__reuse {
  flex-shrink: 0;
  padding: 12px 20px;
  border-bottom: 1px solid var(--fp-border, #2a3a52);
  background: var(--fp-bg-subtle, rgba(0,0,0,0.18));
}

.color-modal__reuse-title {
  margin: 0 0 8px 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fp-text-muted, #94a3b8);
  font-weight: 600;
}

.color-modal__grid--reuse {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.color-modal__grid--reuse .color-card {
  flex: 0 0 140px;
}

.color-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 20px;
}

/* European Line + Finish filter strip inside the color modal.
   Visible only when style === European. Persists choice across
   cabinet opens. */
.color-modal__euro-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(15, 23, 42, 0.35);
  flex-shrink: 0;
}
.color-modal__euro-filters[hidden] { display: none; }

.color-modal__euro-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.color-modal__euro-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #94a3b8);
  width: 60px;
  flex-shrink: 0;
}
.color-modal__euro-tabs {
  display: inline-flex;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
  flex-wrap: wrap;
}
.color-modal__euro-tab {
  background: transparent;
  border: none;
  color: var(--muted, #94a3b8);
  padding: 6px 12px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.color-modal__euro-tab:hover { color: var(--text, #f1f5f9); }
.color-modal__euro-tab.active {
  background: var(--accent, #06b6d4);
  color: #001018;
}

.color-modal__empty {
  text-align: center;
  padding: 30px 16px;
  color: var(--muted, #94a3b8);
  font-size: 13px;
}
.color-modal__empty[hidden] { display: none; }

.color-modal__grid--all {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.color-modal .color-card {
  width: 100%;
  margin: 0;
  cursor: pointer;
}

/* ── Step 6 cards (3 visually distinct sections) ── */
.upgrade-sections { gap: 22px !important; }

.step6-card {
  position: relative;
  background: linear-gradient(180deg, #1e2a3d 0%, #15202f 100%);
  border: 1px solid rgba(20, 184, 166, 0.18);
  border-radius: 12px;
  padding: 14px 18px 16px;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
}
/* Accent stripe on the left */
.step6-card::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  background: var(--fp-accent, #14b8a6);
  border-radius: 0 3px 3px 0;
  opacity: 0.7;
}
.step6-card__header {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.step6-card__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--fp-text, #e8edf2);
  letter-spacing: -0.01em;
}
.step6-card__subtitle {
  margin: 3px 0 0;
  font-size: 11.5px;
  color: var(--fp-text-muted, #94a3b8);
}

/* Service section (Plumbing/Electrical) */
.service-section { margin-top: 12px; }
.service-section:first-of-type { margin-top: 0; }
.service-section__title {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fp-text, #e8edf2);
  display: flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.02em;
}

.service-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 4px;
  transition: border-color 0.2s;
}
@media (max-width: 700px) {
  .service-options-grid { grid-template-columns: 1fr; }
}

.service-option {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  background: var(--fp-bg, #0f1923);
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .18s, background .18s;
  align-items: center;
}
.service-option:hover { border-color: rgba(20,184,166,.4); }
.service-option input[type="radio"] {
  margin: 0;
  accent-color: var(--fp-accent, #14b8a6);
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.service-option:has(input:checked) {
  border-color: var(--fp-accent, #14b8a6);
  background: rgba(20,184,166,.08);
  align-items: flex-start;
}
.service-option:has(input:checked) input[type="radio"] {
  margin-top: 2px;
}
.service-option__body { flex: 1; min-width: 0; }
.service-option__name {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--fp-text, #e8edf2);
  margin-bottom: 0;
  line-height: 1.3;
}

/* Descriptions collapse by default so the grid stays compact and
   every option is visible at a glance. The selected option expands
   to show its full description — the user only needs detail for the
   choice they actually pick. Hover also reveals the description as a
   preview. */
.service-option__desc {
  margin: 0;
  font-size: 11px;
  color: var(--fp-text-muted, #94a3b8);
  line-height: 1.45;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.2s ease, margin 0.2s ease;
}
.service-option:hover .service-option__desc,
.service-option:has(input:checked) .service-option__desc {
  max-height: 200px;
  opacity: 1;
  margin-top: 6px;
}
.service-option__desc em {
  color: var(--fp-accent, #14b8a6);
  font-style: normal;
  font-weight: 600;
}

/* Visual options (Handles / Sink) */
.visual-section { margin-top: 18px; }
.visual-section:first-of-type { margin-top: 0; }

.visual-options-grid {
  display: grid;
  gap: 10px;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 4px;
  transition: border-color 0.2s;
}
.visual-options-grid--3 { grid-template-columns: repeat(3, 1fr); }
.visual-options-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 600px) {
  .visual-options-grid--3,
  .visual-options-grid--2 { grid-template-columns: 1fr; }
}

.visual-option {
  border-radius: 10px;
  overflow: hidden;
  background: var(--fp-bg, #0f1923);
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color .18s, transform .15s;
}
.visual-option:hover {
  border-color: rgba(20,184,166,.4);
  transform: translateY(-2px);
}
.visual-option.selected {
  border-color: var(--fp-accent, #14b8a6);
  box-shadow: 0 0 0 3px rgba(20,184,166,.25);
}
.visual-option__img {
  width: 100%;
  height: 130px;
  background-size: cover;
  background-position: center;
  background-color: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
}
.visual-option__placeholder {
  font-size: 32px;
  opacity: 0.4;
}
.visual-option__img[style*="background-image"] .visual-option__placeholder {
  display: none;
}
.visual-option__info { padding: 8px 10px; }
.visual-option__info strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--fp-text, #e8edf2);
}
.visual-option__info p {
  margin: 2px 0 0;
  font-size: 10px;
  color: var(--fp-text-muted, #94a3b8);
}

/* Upgrade gate (ask if customer wants upgrades) */
.upgrade-gate {
  background: rgba(20,184,166,0.08);
  border: 1px solid rgba(20,184,166,0.3);
  border-radius: 12px;
  padding: 18px 22px;
  text-align: center;
  margin-bottom: 4px;
}
.upgrade-gate__msg {
  margin: 0 0 14px 0;
  font-size: 14px;
  color: var(--fp-text, #e8edf2);
  line-height: 1.55;
}
.upgrade-gate__msg strong {
  color: var(--fp-accent, #14b8a6);
  font-weight: 600;
}
.upgrade-gate__buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 4px;
  transition: border-color 0.2s;
}
.upgrade-gate__buttons .cabinet-decision-btn {
  padding: 8px 18px;
  font-size: 13px;
}

/* Mode banner shown after decision */
.upgrade-mode-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(20,184,166,0.08);
  border: 1px solid rgba(20,184,166,0.25);
  border-radius: 8px;
  padding: 9px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--fp-text, #e8edf2);
}
.upgrade-mode-banner__icon {
  font-size: 16px;
  flex-shrink: 0;
}
.upgrade-mode-banner__text {
  flex: 1;
}
.upgrade-mode-banner--preview {
  background: rgba(148, 163, 184, 0.08);
  border-color: rgba(148, 163, 184, 0.3);
}

/* Preview mode: cards faded but still clickable (click converts to Yes mode) */
.upgrade-img-grid--preview .upgrade-img-card {
  opacity: 0.55;
  cursor: pointer;
}
.upgrade-img-grid--preview .upgrade-img-card:hover {
  opacity: 1;
  border-color: var(--fp-accent, #14b8a6);
  transform: translateY(-2px);
}
.upgrade-img-grid--preview .upgrade-img-card__toggle {
  background: rgba(148, 163, 184, 0.1);
  color: var(--fp-text-muted, #94a3b8);
  border-color: rgba(148, 163, 184, 0.3);
}
.upgrade-img-grid--preview .upgrade-img-card:hover .upgrade-img-card__toggle {
  background: var(--fp-accent, #14b8a6);
  color: #001018;
  border-color: var(--fp-accent, #14b8a6);
}

/* Luxury Upgrade visual cards (image + info + add toggle) */
.upgrade-img-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 700px) { .upgrade-img-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .upgrade-img-grid { grid-template-columns: 1fr; } }

.upgrade-img-card {
  border-radius: 10px;
  overflow: hidden;
  background: var(--fp-bg, #0f1923);
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color .18s, transform .15s;
  display: flex;
  flex-direction: column;
}
.upgrade-img-card:hover {
  border-color: rgba(20,184,166,.4);
  transform: translateY(-2px);
}
.upgrade-img-card.selected {
  border-color: var(--fp-accent, #14b8a6);
  box-shadow: 0 0 0 3px rgba(20,184,166,.25);
}
.upgrade-img-card__img {
  width: 100%;
  height: 130px;
  background-size: cover;
  background-position: center;
  background-color: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.upgrade-img-card__placeholder {
  font-size: 38px;
  opacity: 0.5;
}
.upgrade-img-card__img[style*="background-image"] .upgrade-img-card__placeholder {
  display: none;
}
.upgrade-img-card__body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.upgrade-img-card__title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--fp-text, #e8edf2);
}
.upgrade-img-card__desc {
  margin: 0 0 8px 0;
  font-size: 11px;
  color: var(--fp-text-muted, #94a3b8);
  flex: 1;
}
.upgrade-img-card__toggle {
  display: block;
  text-align: center;
  background: var(--fp-bg-elevated, #1a2332);
  color: var(--fp-text, #e8edf2);
  border: 1px solid var(--fp-border, #2a3a52);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
  transition: all .15s;
}
.upgrade-img-card.selected .upgrade-img-card__toggle {
  background: var(--fp-accent, #14b8a6);
  border-color: var(--fp-accent, #14b8a6);
  color: #001018;
}

/* ── Step 5 compact selector rows ── */
.s5-selector-row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  margin-top: 12px;
  background: var(--fp-bg-elevated, #1a2332);
  border: 1px solid var(--fp-border, #2a3a52);
  border-radius: 12px;
  transition: border-color .18s;
}
.s5-selector-row:hover {
  border-color: rgba(20,184,166,.4);
}
.s5-selector-row__thumb {
  width: 90px;
  height: 70px;
  background-size: cover;
  background-position: center;
  background-color: #0f1923;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--fp-border, #2a3a52);
}
.s5-selector-row__placeholder {
  font-size: 28px;
  opacity: 0.4;
}
.s5-selector-row__body {
  min-width: 0;
}
.s5-selector-row__indicator {
  font-size: 11px;
  color: var(--fp-text-muted, #94a3b8);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 2px;
}
.s5-selector-row__title {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--fp-text, #e8edf2);
}
.s5-selector-row__status {
  margin: 0;
  font-size: 13px;
  color: var(--fp-text-muted, #94a3b8);
}
.s5-selector-row__status.has-value {
  color: var(--fp-accent, #14b8a6);
  font-weight: 500;
}
.s5-selector-row__action button {
  white-space: nowrap;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 600;
  min-width: 148px;
  border-radius: 10px;
}

/* Edge card: fade-in slide when it becomes visible (sequential flow) */
#s5EdgeCard {
  animation: s5EdgeReveal 0.35s ease both;
}
@keyframes s5EdgeReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Gate dentro del selector row */
.s5-gate { margin-top: 4px; }
.s5-gate__question {
  margin: 0 0 10px 0;
  font-size: 13px;
  color: var(--fp-text-muted, #94a3b8);
}
.s5-gate .cabinet-decision-gate__buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.s5-gate .cabinet-decision-btn {
  padding: 6px 14px;
  font-size: 13px;
}
/* Ajustar row para acomodar gate */
.s5-selector-row { align-items: start; }
.s5-selector-row__thumb { align-self: center; }
@media (max-width: 600px) {
  .s5-selector-row {
    grid-template-columns: 60px 1fr;
    grid-template-rows: auto auto;
  }
  .s5-selector-row__thumb { width: 60px; height: 60px; }
  .s5-selector-row__action { grid-column: 1 / -1; }
  .s5-selector-row__action button { width: 100%; }
}

/* ── Stone picker modal — tabs + toolbar ── */
.stone-picker-tabs {
  display: flex;
  gap: 4px;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
  overflow-x: auto;
}
.stone-picker-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--fp-text-muted, #94a3b8);
  padding: 12px 16px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.stone-picker-tab:hover { color: var(--fp-text, #e8edf2); }
.stone-picker-tab.active {
  color: var(--fp-accent, #14b8a6);
  border-bottom-color: var(--fp-accent, #14b8a6);
}
.stone-picker-tab__count {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  letter-spacing: 0.02em;
}
.stone-picker-tab.active .stone-picker-tab__count {
  background: rgba(20, 184, 166, 0.25);
  color: var(--fp-accent, #14b8a6);
}

.stone-picker-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.stone-picker-search {
  flex: 1;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--fp-text, #e8edf2);
  padding: 8px 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
}
.stone-picker-search:focus {
  outline: none;
  border-color: var(--fp-accent, #14b8a6);
}

.stone-picker-thickness {
  display: inline-flex;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.stone-picker-thickness-btn {
  background: transparent;
  border: none;
  color: var(--fp-text-muted, #94a3b8);
  padding: 6px 12px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.stone-picker-thickness-btn:hover { color: var(--fp-text, #e8edf2); }
.stone-picker-thickness-btn.active {
  background: var(--fp-accent, #14b8a6);
  color: #001018;
}

.stone-picker-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--fp-text-muted, #94a3b8);
  font-size: 13px;
}

/* ── Stone picker grid (inside modal) ── */
.stone-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.stone-picker-card {
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--fp-bg, #0f1923);
  cursor: pointer;
  transition: border-color .18s, transform .15s;
}
.stone-picker-card:hover {
  border-color: var(--fp-accent, #14b8a6);
  transform: translateY(-2px);
}
.stone-picker-card.selected {
  border-color: var(--fp-accent, #14b8a6);
  box-shadow: 0 0 0 3px rgba(20,184,166,.25);
}
.stone-picker-card__img {
  width: 100%;
  aspect-ratio: 1;
  background-size: cover;
  background-position: center;
  background-color: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* Fallback icon shown when the stone image hasn't been uploaded yet */
.stone-picker-card__fallback {
  font-size: 32px;
  opacity: 0.35;
}
.stone-picker-card__img[style*="background-image"] .stone-picker-card__fallback {
  display: none;
}

/* Zoom button — sits top-right of each stone card image. Click opens
   the shared #upgradeImageLightbox so the rep can show the customer
   a full-size view without leaving the picker. The button is a
   separate click target from the card itself (delegated handler in
   buildStoneGrid stops propagation so selection isn't triggered). */
.stone-picker-card__zoom {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(2, 8, 24, 0.7);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  cursor: zoom-in;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.18s, transform 0.15s, background 0.15s;
  padding: 0;
  z-index: 2;
}
.stone-picker-card:hover .stone-picker-card__zoom,
.stone-picker-card__zoom:focus-visible {
  opacity: 1;
}
.stone-picker-card__zoom:hover {
  background: var(--fp-accent, #14b8a6);
  color: #001018;
  transform: scale(1.08);
}
.stone-picker-card__info {
  padding: 8px 10px;
}
.stone-picker-card__name {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--fp-text, #e8edf2);
  line-height: 1.35;
  /* Allow up to 2 lines for long stone names (e.g. "Calacatta Calgary / Montreal / Vancouver") */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Edge picker grid (inside modal) ── */
.edge-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.edge-picker-card {
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  background: var(--fp-bg, #0f1923);
  cursor: pointer;
  transition: border-color .18s, transform .15s;
}
.edge-picker-card:hover {
  border-color: var(--fp-accent, #14b8a6);
  transform: translateY(-2px);
}
.edge-picker-card.selected {
  border-color: var(--fp-accent, #14b8a6);
  box-shadow: 0 0 0 3px rgba(20,184,166,.25);
}
.edge-picker-img {
  width: 100%;
  aspect-ratio: 4/3;
  background-size: cover;
  background-position: center;
  background-color: #1e293b;
}
.edge-picker-info {
  padding: 7px 10px;
}
.edge-picker-info h5 {
  margin: 0 0 1px 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--fp-text, #e8edf2);
}
.edge-picker-info span {
  font-size: 10px;
  color: var(--fp-text-muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: .04em;
}

@media (max-width: 600px) {
  .stone-picker-grid { grid-template-columns: repeat(2, 1fr); }
  .edge-picker-grid  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .color-modal {
    padding: 8px;
  }
  .color-modal__panel {
    max-height: 95vh;
  }
  .color-modal__grid--all {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .color-modal__grid--reuse .color-card {
    flex: 0 0 120px;
  }
  .color-modal__header,
  .color-modal__reuse,
  .color-modal__body {
    padding: 12px 14px;
  }
}

/* ============================================
   Kitchen Wizard Step 2 — Cabinet Active Card
   Day 9 redesign
   ============================================ */
.kitchen-substep-header {
  margin-bottom: 16px;
  text-align: center;
}

.kitchen-substep-title {
  margin: 0 0 4px 0;
  font-size: 20px;
  font-weight: 600;
}

.kitchen-substep-indicator {
  font-size: 13px;
  color: var(--fp-text-muted, #94a3b8);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.cabinet-active-card {
  display: grid;
  grid-template-columns: minmax(240px, 320px) 1fr;
  gap: 24px;
  align-items: stretch;
  padding: 24px 28px;
  margin-bottom: 16px;
  background: var(--fp-bg-elevated, #1a2332);
  border: 1px solid var(--fp-border, #2a3a52);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.cabinet-active-card__image {
  background: var(--fp-bg-subtle, rgba(0,0,0,0.18));
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Fixed aspect ratio so every cabinet/counter card image (lowers,
     uppers, island, backsplash reference, etc.) renders at the same
     size regardless of the source image's native aspect (portrait /
     landscape / square). */
  aspect-ratio: 4 / 3;
  width: 100%;
  max-width: 420px;
  /* `align-items: stretch` on the parent .cabinet-active-card grid
     would otherwise pull this column to match the taller body column
     (e.g. when the cabinet is fully configured: LF + color + Edit
     button) — making the Lower Cabinets image visibly bigger than
     the others. Pin to the top so aspect-ratio is the only height
     driver. */
  align-self: start;
}

.cabinet-active-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cabinet-active-card__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cabinet-active-card__title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}

.cabinet-active-card__hint {
  margin: 0;
  font-size: 13px;
  color: var(--fp-text-muted, #94a3b8);
  font-style: italic;
}

.cabinet-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.cabinet-toggle input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 24px;
  background: var(--fp-bg-subtle, #2a3a52);
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
  margin: 0;
}

.cabinet-toggle input[type="checkbox"]::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  top: 3px;
  left: 3px;
  transition: transform 0.2s;
}

.cabinet-toggle input[type="checkbox"]:checked {
  background: var(--fp-accent, #14b8a6);
}

.cabinet-toggle input[type="checkbox"]:checked::after {
  transform: translateX(20px);
}

.cabinet-toggle__slider { display: none; }

.cabinet-toggle__label {
  font-size: 14px;
  font-weight: 500;
}

.cabinet-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: opacity 0.2s;
}

.cabinet-fields--disabled {
  opacity: 0.45;
  pointer-events: none;
}

.cabinet-fields--disabled .cabinet-toggle--inline {
  pointer-events: auto;
  opacity: 1;
}

.cabinet-field-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cabinet-field-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fp-text-muted, #94a3b8);
  font-weight: 600;
}

.cabinet-field-input {
  display: flex;
  align-items: center;
  background: var(--fp-bg-subtle, #0f1929);
  border: 1px solid var(--fp-border, #2a3a52);
  border-radius: 8px;
  overflow: hidden;
}

.cabinet-field-input input {
  flex: 1 1 auto;
  background: transparent;
  border: 0;
  padding: 10px 12px;
  color: inherit;
  font-size: 16px;
  outline: none;
}

.cabinet-field-input input:focus {
  outline: 2px solid var(--fp-accent, #14b8a6);
  outline-offset: -2px;
}

.cabinet-field-unit {
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fp-accent, #14b8a6);
  border-left: 1px solid var(--fp-border, #2a3a52);
  align-self: stretch;
  display: flex;
  align-items: center;
}

.cabinet-color-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  background: var(--fp-bg-subtle, #0f1929);
  border: 1px solid var(--fp-border, #2a3a52);
  border-radius: 8px;
  color: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: left;
}

.cabinet-color-btn:hover:not(:disabled) {
  border-color: var(--fp-accent, #14b8a6);
}

.cabinet-color-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.cabinet-color-btn__placeholder {
  color: var(--fp-text-muted, #94a3b8);
  font-style: italic;
}

.cabinet-color-btn__swatch {
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  border: 1px solid var(--fp-border, #2a3a52);
}

.cabinet-color-btn__name {
  flex: 1 1 auto;
  font-weight: 500;
}

.cabinet-color-btn__change {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fp-accent, #14b8a6);
  font-weight: 600;
}

.cabinet-color-btn--selected {
  border-color: var(--fp-accent, #14b8a6);
}

@media (max-width: 720px) {
  .cabinet-active-card {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px;
  }
  .cabinet-active-card__image { max-width: 100%; }
  .cabinet-active-card__title { font-size: 18px; }
}

/* Decision gate — tri-state cabinet selector */
.cabinet-decision-gate {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0;
}

.cabinet-decision-gate__question {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--fp-text, #e8edf2);
  line-height: 1.4;
}

.cabinet-decision-gate__buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 4px;
  transition: border-color 0.2s;
}

.cabinet-decision-btn {
  flex: 1 1 auto;
  min-width: 140px;
  padding: 12px 18px;
  font-size: 15px;
  font-weight: 600;
}

.cabinet-status-bar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  align-self: flex-start;
}

.cabinet-status-bar--available {
  background: rgba(20, 184, 166, 0.12);
  border: 1px solid rgba(20, 184, 166, 0.4);
  color: var(--fp-accent, #14b8a6);
}

.cabinet-status-bar--skipped {
  background: rgba(148, 163, 184, 0.1);
  border: 1px solid rgba(148, 163, 184, 0.3);
  color: var(--fp-text-muted, #94a3b8);
}

.cabinet-status-icon {
  font-size: 16px;
  font-weight: bold;
}

.cabinet-status-text {
  flex: 1 1 auto;
}

.cabinet-status-change {
  background: transparent;
  border: 0;
  color: inherit;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px 6px;
  font-weight: 600;
  opacity: 0.85;
  transition: opacity 0.15s;
}

.cabinet-status-change:hover { opacity: 1; }

.cabinet-skipped-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0;
}

.cabinet-skipped-message {
  margin: 0;
  font-size: 14px;
  color: var(--fp-text-muted, #94a3b8);
  font-style: italic;
}

/* ── Color suggestion banner ────────────────────────────────── */
.color-suggestion-row {
  margin-bottom: 12px;
}
.color-suggestion-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(135deg, rgba(20,184,166,.08) 0%, rgba(20,184,166,.04) 100%);
  border: 1px solid rgba(20,184,166,.35);
  border-radius: 10px;
  padding: 12px 14px;
  flex-wrap: wrap;
}
.color-suggestion-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.color-suggestion-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fp-accent, #14b8a6);
}
.color-suggestion-preview {
  display: flex;
  align-items: center;
  gap: 8px;
}
.color-suggestion-swatch {
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,.15);
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-color: #4b5563;
}
.color-suggestion-name {
  font-size: 14px;
  font-weight: 600;
  color: #e2e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.color-suggestion-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.color-suggestion-btn {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all .15s;
  white-space: nowrap;
}
.color-suggestion-btn--yes {
  background: var(--fp-accent, #14b8a6);
  color: #001018;
}
.color-suggestion-btn--yes:hover {
  background: #0d9488;
  transform: translateY(-1px);
}
.color-suggestion-btn--no {
  background: transparent;
  color: #94a3b8;
  border: 1px solid rgba(148,163,184,.3);
}
.color-suggestion-btn--no:hover {
  background: rgba(148,163,184,.1);
  color: #e2e8f0;
}

/* ── Next-action guide highlight ───────────────────────────── */
@keyframes nextActionPulse {
  0%   { box-shadow: 0 0 0 0   rgba(20,184,166,.55), 0 0 0 0   rgba(20,184,166,.25); }
  50%  { box-shadow: 0 0 0 6px rgba(20,184,166,.20), 0 0 0 12px rgba(20,184,166,.08); }
  100% { box-shadow: 0 0 0 0   rgba(20,184,166,.55), 0 0 0 0   rgba(20,184,166,.25); }
}

/* Label chip that floats above the highlighted field */
.next-action-wrap {
  position: relative;
}
.next-action-wrap::before {
  content: attr(data-next-label);
  position: absolute;
  top: -26px;
  left: 0;
  background: var(--fp-accent, #14b8a6);
  color: #001018;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px 4px 0 0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s, transform .2s;
}
.next-action-wrap.next-action--active::before {
  opacity: 1;
  transform: translateY(0);
}

/* Glow ring on the child input / button */
.next-action-wrap.next-action--active .cabinet-field-input,
.next-action-wrap.next-action--active .cabinet-color-btn,
.next-action-wrap.next-action--active .measure-input-group,
.next-action-wrap.next-action--active .cabinet-decision-gate__buttons,
.next-action-wrap.next-action--active .upgrade-gate__buttons,
.next-action-wrap.next-action--active .service-options-grid,
.next-action-wrap.next-action--active .visual-options-grid,
.next-action-wrap.next-action--active .radio-btn-label {
  border-color: var(--fp-accent, #14b8a6);
  animation: nextActionPulse 1.8s ease-in-out infinite;
}

/* Glow ring on the color suggestion card when it's the next action */
.color-suggestion-row.next-action--active .color-suggestion-card {
  border-color: var(--fp-accent, #14b8a6);
  animation: nextActionPulse 1.8s ease-in-out infinite;
}
.color-suggestion-row.next-action--active::before {
  content: '👉 Choose same or different color';
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fp-accent, #14b8a6);
  margin-bottom: 6px;
}

/* Arrow pointer that draws attention */
.next-action-arrow {
  display: none;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fp-accent, #14b8a6);
  margin-top: 4px;
  animation: nextActionPulse 1.8s ease-in-out infinite;
}
.next-action-wrap.next-action--active + .next-action-arrow {
  display: flex;
}

/* ============================================
   Kitchen Wizard Step 3 — Summary
   ============================================ */
/* ============================================
   Kitchen Wizard Step 3 — Compact Summary List
   ============================================ */
.cabinet-summary-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 auto 16px;
  max-width: 820px;
}

/* Compact variant — used by Step 5 Final Review (Kitchen Wizard) where
   the user reviews 6 rows (4 counters + Stone + Edge). The default
   row height was making the column scroll on a 720p screen; this
   variant trims padding / thumb / typography so all 6 fit comfortably
   above the fold. */
.cabinet-summary-grid--compact {
  gap: 4px;
  max-width: 740px;
}
.cabinet-summary-grid--compact .cabinet-summary-row {
  grid-template-columns: 42px 1fr auto;
  gap: 10px;
  padding: 5px 10px;
  border-radius: 6px;
}
.cabinet-summary-grid--compact .cabinet-summary-row__thumb {
  width: 42px;
  height: 32px;
  border-radius: 4px;
}
.cabinet-summary-grid--compact .cabinet-summary-row__title {
  font-size: 12.5px;
  line-height: 1.25;
}
.cabinet-summary-grid--compact .cabinet-summary-row__status {
  font-size: 10.5px;
  padding: 2px 6px;
}
.cabinet-summary-grid--compact .cabinet-summary-row__colors {
  font-size: 11px;
}
.cabinet-summary-grid--compact .cabinet-summary-row__action {
  font-size: 10px;
}
.cabinet-summary-grid--compact .cabinet-summary-row__body {
  gap: 2px;
}

/* Step 5 Final Review pager — sits below the visible page of rows.
   Shown only when totalPages > 1 (currently always, since 6 rows / 4
   per page = 2 pages). */
.s5-summary-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  padding: 6px 4px 0;
}
.s5-summary-pager__btn {
  background: rgba(20, 184, 166, 0.08);
  border: 1px solid rgba(20, 184, 166, 0.35);
  color: var(--fp-accent, #14b8a6);
  padding: 6px 14px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.s5-summary-pager__btn:hover:not(:disabled) {
  background: rgba(20, 184, 166, 0.18);
  border-color: var(--fp-accent, #14b8a6);
}
.s5-summary-pager__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.s5-summary-pager__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fp-text-muted, #94a3b8);
}

.cabinet-summary-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  background: var(--fp-bg-elevated, #1a2332);
  border: 1px solid var(--fp-border, #2a3a52);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
}

.cabinet-summary-row:hover,
.cabinet-summary-row:focus-visible {
  border-color: var(--fp-accent, #14b8a6);
  transform: translateX(2px);
  background: rgba(20, 184, 166, 0.04);
  outline: none;
}

.cabinet-summary-row__thumb {
  width: 56px;
  height: 42px;
  border-radius: 5px;
  background-size: cover;
  background-position: center;
  background-color: var(--fp-bg-subtle, rgba(0,0,0,0.18));
  flex-shrink: 0;
}

.cabinet-summary-row__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.cabinet-summary-row__header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cabinet-summary-row__title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
}

.cabinet-summary-row__status {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.cabinet-summary-row__status--available {
  color: var(--fp-accent, #14b8a6);
  background: rgba(20, 184, 166, 0.1);
}

.cabinet-summary-row__status--skipped {
  color: var(--fp-text-muted, #94a3b8);
  background: rgba(148, 163, 184, 0.08);
}

.cabinet-summary-row__colors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.cabinet-summary-color-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--fp-text, #e8edf2);
}

.cabinet-summary-color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--fp-border, #2a3a52);
  flex-shrink: 0;
}

.cabinet-summary-row__action {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fp-accent, #14b8a6);
  font-weight: 600;
  white-space: nowrap;
  align-self: center;
}

@media (max-width: 600px) {
  .cabinet-summary-row {
    grid-template-columns: 60px 1fr;
    grid-template-rows: auto auto;
    padding: 10px 12px;
    gap: 8px 12px;
  }
  .cabinet-summary-row__thumb {
    width: 60px;
    height: 50px;
    grid-row: span 2;
  }
  .cabinet-summary-row__action {
    grid-column: 2;
    justify-self: end;
  }
  .cabinet-summary-row__colors {
    grid-column: 2;
  }
}

/* ── Coupon Codes — Step 3 UI (Day 13) ─────────────────────────── */
.coupon-section {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--fp-border, rgba(255,255,255,0.08));
  border-radius: 8px;
}

.coupon-label {
  display: block;
  font-size: 0.88rem;
  color: var(--muted, #9ca3af);
  margin-bottom: 0.45rem;
}

.coupon-row {
  display: flex;
  gap: 0.5rem;
}

.coupon-input {
  flex: 1;
  padding: 0.45rem 0.75rem;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--fp-bg-input, rgba(15,23,42,0.8));
  border: 1px solid var(--fp-border, rgba(255,255,255,0.08));
  border-radius: 6px;
  color: inherit;
}

.coupon-input:focus {
  outline: none;
  border-color: var(--fp-border-focus, var(--accent, #06b6d4));
}

.coupon-apply-btn {
  white-space: nowrap;
  padding: 0.45rem 0.9rem;
  font-size: 0.88rem;
}

.coupon-error {
  color: var(--fp-danger, #ef4444);
  font-size: 0.82rem;
  margin-top: 0.4rem;
}

.coupon-applied {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.8rem;
  background: rgba(16, 185, 129, 0.08);
  border-radius: 6px;
  border-left: 3px solid var(--fp-success, #10b981);
}

.coupon-success-icon {
  font-size: 1.1rem;
  color: var(--fp-success, #10b981);
  font-weight: 700;
  flex-shrink: 0;
}

.coupon-success-text {
  flex: 1;
  line-height: 1.3;
}

.coupon-success-text small {
  display: block;
  opacity: 0.65;
  font-size: 0.78rem;
}

.coupon-remove-link {
  background: none;
  border: none;
  color: var(--accent, #06b6d4);
  cursor: pointer;
  font-size: 0.82rem;
  text-decoration: underline;
  padding: 0;
  flex-shrink: 0;
}

.coupon-remove-link:hover {
  opacity: 0.8;
}

/* Coupon section: force [hidden] to win over .coupon-applied { display:flex }.
   Class selector and attribute selector have equal specificity (0,1,0) so
   the last rule in the cascade would win — this !important breaks the tie. */
#couponSection [hidden] { display: none !important; }

/* Day 13 polish — hide legacy manager-approved discount checkbox */
#managerApprovedDiscount { display: none !important; }

/* Coupon 24h validity line */
.savings-validity {
  font-size: 0.78rem;
  color: var(--muted, #9ca3af);
  margin-top: 0.3rem;
}

/* Coupon skip / skipped states */
.coupon-skip-link {
  background: none;
  border: none;
  color: var(--muted, #9ca3af);
  cursor: pointer;
  font-size: 0.82rem;
  text-decoration: underline;
  padding: 0.4rem 0 0 0;
  display: block;
  margin-top: 0.3rem;
}
.coupon-skip-link:hover { opacity: 0.75; }

.coupon-skipped {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--muted, #9ca3af);
  padding: 0.4rem 0;
}

.coupon-reopen-link {
  background: none;
  border: none;
  color: var(--accent, #06b6d4);
  cursor: pointer;
  font-size: 0.82rem;
  text-decoration: underline;
  padding: 0;
}
.coupon-reopen-link:hover { opacity: 0.8; }

/* ── Cabinet gate wrap — room for ::before label ────────────── */
#cabinetGateWrap {
  margin-top: 32px;
}

/* ── Step 6 Upgrade Gate — disabled Next-btn ────────────────── */
#kitchenStep6FinishBtn:disabled,
#kitchenStep6FinishBtn[disabled] {
  opacity: 0.38 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* ── Step 6 Upgrade Sequencer ───────────────────────────────── */
#upgradeSequencer {
  margin-top: 16px;
}

.upgrade-seq-progress {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent, #06b6d4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

/* 2-column card — info on the LEFT, large clickable image on the
   RIGHT. The image opens a lightbox popup on click so the sales rep
   can show the customer a full-size preview without leaving the
   wizard. Layout is grid-driven; .upgrade-seq-img is force-positioned
   to column 2 regardless of source order. */
.upgrade-seq-card {
  display: grid;
  grid-template-columns: 1fr 240px;
  align-items: stretch;
  gap: 0;
  background: var(--card-bg, #1e293b);
  border: 2px solid var(--accent, #06b6d4);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
  min-height: 150px;
  animation: seqCardIn 0.28s ease;
}

@keyframes seqCardIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.upgrade-seq-img {
  grid-column: 2;
  width: 100%;
  height: 100%;
  /* Layered background: a soft cyan/purple gradient fallback BEHIND
     the actual product photo. If the photo URL fails to load (file
     missing in assets/img/upgrades/), the gradient + the .upgrade-seq-icon
     above show through — the user always sees a meaningful preview
     instead of a black void. */
  background:
    radial-gradient(circle at 30% 30%, rgba(6, 182, 212, 0.18), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(168, 85, 247, 0.16), transparent 60%),
    linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  overflow: hidden;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  cursor: zoom-in;
  position: relative;
  transition: filter 0.2s;
}
.upgrade-seq-icon {
  /* Faded icon that acts as a placeholder when the product photo is
     missing — gets visually covered when the bg image loads. */
  font-size: 4rem;
  opacity: 0.55;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}
.upgrade-seq-img:hover {
  filter: brightness(1.08);
}
/* Subtle "click to enlarge" hint, visible only on hover */
.upgrade-seq-img::after {
  content: '🔍 Click to enlarge';
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 2px 7px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.upgrade-seq-img:hover::after { opacity: 1; }

.upgrade-seq-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upgrade-seq-body {
  grid-column: 1;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.upgrade-seq-title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: var(--text, #f1f5f9);
  line-height: 1.25;
}

.upgrade-seq-desc {
  font-size: 0.82rem;
  color: var(--muted, #94a3b8);
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 720px) {
  .upgrade-seq-card { grid-template-columns: 1fr 160px; min-height: 110px; }
  .upgrade-seq-img  { font-size: 2rem; }
  .upgrade-seq-img::after { display: none; }
}
@media (max-width: 480px) {
  .upgrade-seq-card { grid-template-columns: 1fr; min-height: auto; }
  .upgrade-seq-img  { grid-column: 1; aspect-ratio: 16 / 9; border-left: none; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
  .upgrade-seq-body { grid-column: 1; }
}

/* ═══ Image Lightbox — opens when user clicks an upgrade image ═══
   Simple fullscreen overlay that scales the image to fit the viewport.
   ESC / click-outside closes it. */
.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.image-lightbox[hidden] { display: none; }
.image-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 24, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: zoom-out;
}
.image-lightbox__panel {
  position: relative;
  max-width: 92vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: lightboxIn 0.2s ease;
}
@keyframes lightboxIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.image-lightbox__img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  background: #0f172a;
}
.image-lightbox__close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: #0f172a;
  border: none;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  transition: transform 0.15s;
}
.image-lightbox__close:hover { transform: scale(1.08); }
.image-lightbox__caption {
  color: #e8edf2;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  background: rgba(15, 23, 42, 0.85);
  padding: 8px 16px;
  border-radius: 8px;
}

.upgrade-seq-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 0;
}

.upgrade-seq-yes {
  flex: 1;
  padding: 9px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 8px;
  background: var(--accent, #06b6d4);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: filter 0.15s;
}
.upgrade-seq-yes:hover { filter: brightness(1.12); }

.upgrade-seq-no {
  flex: 1;
  padding: 9px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  border-radius: 8px;
  background: transparent;
  color: var(--muted, #94a3b8);
  border: 2px solid var(--border, #334155);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.upgrade-seq-no:hover { border-color: var(--accent, #06b6d4); color: var(--text, #f1f5f9); }

/* Summary screen — compact 2-line layout per item so the full list of
   9 upgrades (or 5 tech services) fits in ~120 px without wrapping
   onto a long vertical column. */
.upgrade-seq-summary__title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #22c55e;
  margin-bottom: 8px;
}

.upgrade-seq-summary__grid {
  display: grid;
  /* Tighter min-width so 4 items fit per row on most desktops. */
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

.upgrade-seq-summary__item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.25;
  min-height: 32px;
}
.upgrade-seq-summary__icon {
  font-size: 14px;
  text-align: center;
}
.upgrade-seq-summary__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upgrade-seq-summary__status {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.upgrade-seq-summary__item.included {
  background: rgba(34,197,94,0.10);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,0.25);
}

.upgrade-seq-summary__item.skipped {
  background: rgba(148,163,184,0.06);
  color: var(--muted, #94a3b8);
  border: 1px solid rgba(148,163,184,0.12);
}

.upgrade-seq-restart {
  display: inline-block;
  background: none;
  border: none;
  color: var(--accent, #06b6d4);
  font-size: 0.78rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  margin-top: 2px;
}
.upgrade-seq-restart:hover { opacity: 0.8; }

@media (max-width: 720px) {
  .upgrade-seq-summary__grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

/* ───────────────────────────────────────────────────────────────────
   Multi-segment measurement summer (LF cabinet inputs)
   Activated when user clicks "+ Break into parts" — allows measuring
   L-shaped / multi-section cabinets piece by piece, auto-summing.
   ─────────────────────────────────────────────────────────────────── */
.lf-segments {
  margin-top: 8px;
}

.lf-input--readonly {
  background: rgba(6, 182, 212, 0.08) !important;
  border-color: rgba(6, 182, 212, 0.35) !important;
  cursor: default;
}

.lf-segments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(6, 182, 212, 0.05);
  border: 1px dashed rgba(6, 182, 212, 0.25);
  border-radius: 10px;
}

.lf-segment-row {
  display: flex;
  align-items: center;
  gap: 10px;
  animation: lfSegmentIn 0.18s ease;
}

@keyframes lfSegmentIn {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

.lf-segment-label {
  flex: 0 0 60px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lf-segment-input-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card-bg, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 8px;
  padding: 4px 10px;
  transition: border-color 0.15s;
}
.lf-segment-input-wrap:focus-within {
  border-color: var(--accent, #06b6d4);
}

.lf-segment-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text, #f1f5f9);
  font-size: 0.95rem;
  padding: 6px 0;
  min-width: 0;
}

.lf-segment-unit {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted, #94a3b8);
}

.lf-segment-remove {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid rgba(239, 68, 68, 0.35);
  color: #ef4444;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.lf-segment-remove:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
}

.lf-segments-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.lf-segments-footer--single {
  justify-content: flex-start;
  margin-top: 6px;
}

.lf-segments-add {
  background: transparent;
  border: 1px dashed rgba(6, 182, 212, 0.45);
  color: var(--accent, #06b6d4);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.lf-segments-add:hover {
  background: rgba(6, 182, 212, 0.1);
  border-color: var(--accent, #06b6d4);
}

.lf-segments-total {
  font-size: 0.85rem;
  color: var(--text, #f1f5f9);
}
.lf-segments-total strong {
  color: var(--accent, #06b6d4);
  font-size: 0.95rem;
  margin-left: 4px;
}

/* ───────────────────────────────────────────────────────────────────
   Multi-section W×D counter measurement summer
   Reuses .lf-segments-* base styles; adds W×D-specific pair layout.
   ─────────────────────────────────────────────────────────────────── */
.ct-segments {
  margin-top: 12px;
}

/* Each section row is a vertical stack: label + ✕ on top, then the
   W×D pair, then the area pill. Avoids the cramped horizontal layout. */
.ct-segment-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label   remove"
    "pair    pair"
    "area    area";
  row-gap: 10px;
  column-gap: 12px;
  align-items: center;
  padding: 14px 16px;
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(6, 182, 212, 0.18);
  border-radius: 10px;
  animation: lfSegmentIn 0.18s ease;
}

.ct-segment-row + .ct-segment-row {
  margin-top: 10px;
}

.ct-segment-row .lf-segment-label {
  grid-area: label;
  flex: none;
  min-width: 0;
  font-size: 0.82rem;
  padding: 0;
  border: none;
}

.ct-segment-pair {
  grid-area: pair;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.ct-segment-pair .lf-segment-input-wrap {
  flex: 1;
  min-width: 0;
  padding: 8px 14px;
}

.ct-segment-pair .lf-segment-input {
  font-size: 1rem;
  padding: 6px 0;
  text-align: left;
}

.ct-segment-x {
  flex: none;
  color: var(--muted, #94a3b8);
  font-weight: 700;
  font-size: 1.05rem;
  opacity: 0.7;
}

.ct-segment-area {
  grid-area: area;
  justify-self: start;
  min-width: 78px;
  text-align: left;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--accent, #06b6d4);
  background: rgba(6, 182, 212, 0.10);
  padding: 6px 12px;
  border-radius: 6px;
  white-space: nowrap;
}

.ct-segment-row .lf-segment-remove {
  grid-area: remove;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 0.95rem;
  justify-self: end;
}

/* Make the LF segment list wrapper a bit airier for consistency */
.lf-segments-list {
  padding: 14px 14px;
  gap: 10px;
}

/* Total + Add row: more breathing room above */
.lf-segments-footer {
  margin-top: 14px;
}
.lf-segments-total {
  font-size: 0.92rem;
}
.lf-segments-total strong {
  font-size: 1.05rem;
}

/* ───────────────────────────────────────────────────────────────────
   Tech Services Sequencer (Step 6 sub-step 2)
   One service shown at a time + summary card with edit links.
   Mirrors the visual rhythm of the Luxury Upgrades sequencer.
   ─────────────────────────────────────────────────────────────────── */
.tech-seq-progress {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--accent, #06b6d4);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 4px 0 14px 0;
}

.tech-seq-summary {
  padding: 4px 0;
}

.tech-seq-summary__title {
  font-size: 1rem;
  font-weight: 700;
  color: #22c55e;
  margin-bottom: 14px;
}

.tech-seq-summary__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.tech-seq-summary__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
}

.tech-seq-summary__item.included {
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.30);
}

.tech-seq-summary__item.skipped {
  background: rgba(148, 163, 184, 0.07);
  border-color: rgba(148, 163, 184, 0.15);
}

.tech-seq-summary__icon {
  font-size: 1.35rem;
  flex: 0 0 auto;
}

.tech-seq-summary__body {
  flex: 1;
  min-width: 0;
}

.tech-seq-summary__name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text, #f1f5f9);
}

.tech-seq-summary__pick {
  font-size: 0.82rem;
  margin-top: 2px;
}

.tech-seq-summary__item.included .tech-seq-summary__pick { color: #22c55e; }
.tech-seq-summary__item.skipped  .tech-seq-summary__pick { color: var(--muted, #94a3b8); }

.tech-seq-summary__edit {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid rgba(6, 182, 212, 0.35);
  color: var(--accent, #06b6d4);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.tech-seq-summary__edit:hover {
  background: rgba(6, 182, 212, 0.12);
}

/* ───────────────────────────────────────────────────────────────────
   Upgrade Sequencer — pick-type option grid (Handles, Sink)
   Replaces the Include/Skip buttons when the current sequencer item
   is a 'pick' (one-of-N) instead of 'binary'.
   ─────────────────────────────────────────────────────────────────── */
#upgradeSeqPick {
  margin-bottom: 18px;
}

.upgrade-seq-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.upgrade-seq-pick-card {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--border, #334155);
  border-radius: 12px;
  background: var(--card-bg, #1e293b);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}

.upgrade-seq-pick-card:hover {
  border-color: var(--accent, #06b6d4);
  transform: translateY(-2px);
}

.upgrade-seq-pick-card.selected {
  border-color: var(--accent, #06b6d4);
  box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.25);
}

.upgrade-seq-pick-img {
  height: 110px;
  background-size: cover;
  background-position: center;
  background-color: rgba(15, 23, 42, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
}

.upgrade-seq-pick-placeholder {
  font-size: 2.2rem;
  opacity: 0.5;
}

.upgrade-seq-pick-info {
  padding: 12px 14px;
}

.upgrade-seq-pick-info strong {
  display: block;
  font-size: 0.92rem;
  color: var(--text, #f1f5f9);
  margin-bottom: 4px;
}

.upgrade-seq-pick-info p {
  margin: 0;
  font-size: 0.78rem;
  color: var(--muted, #94a3b8);
  line-height: 1.4;
}

/* Upgrade Pick modal — host for Handles + Sink option grid */
#upgradePickModal .window-config-dialog {
  width: min(720px, 100%);
}
#upgradePickModal .window-config-body {
  padding: 18px 20px 22px;
}
#upgradePickModal .upgrade-seq-pick-grid {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
#upgradePickModal .upgrade-seq-pick-img {
  height: 90px;
}

/* ───────────────────────────────────────────────────────────────────
   Shaker Door Type picker — Step 1, visible only when style === Shaker
   8 cards split into 2 groups: paintable (any of 20 colors) and
   natural wood (no paint option). Pick is required before Next Step.
   ─────────────────────────────────────────────────────────────────── */
#shakerDoorSection {
  animation: shakerDoorIn 0.22s ease;
}

@keyframes shakerDoorIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.shaker-door-section + .shaker-door-section {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 12px;
}

/* "✓ Hampton" line shown on the selected category card */
.shaker-cat-selected,
.euro-cat-selected {
  margin: 8px 0 0 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent2, #22c55e);
}
.shaker-cat-selected[hidden],
.euro-cat-selected[hidden] { display: none; }

/* Shaker category cards (Paintable / Natural Wood) — horizontal
   layout: small square door image on the left, text content on the
   right. Avoids the dead-space problem the vertical hero layout had
   when the door PNG is small relative to the card width. */
#shakerCategoryPaintable,
#shakerCategoryNatural {
  flex-direction: row;
  align-items: stretch;
  min-height: 110px;
}
#shakerCategoryPaintable .card-image,
#shakerCategoryNatural   .card-image {
  aspect-ratio: auto;
  width: 120px;
  height: auto;
  flex-shrink: 0;
  background-size: contain;
  border-bottom: none;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
#shakerCategoryPaintable .card-content,
#shakerCategoryNatural   .card-content {
  justify-content: center;
}

/* Shaker door picker modal — host for the 4-door grid.
   Reuses the .window-config-dialog shell. The grid lays out as a tight
   2×2 inside the modal so each door card stays compact (avoids the
   stretched single-column look that would otherwise inherit from
   --wiz-grid-secondary-min). */
#shakerDoorModal .window-config-dialog {
  width: min(560px, 100%);
}
#shakerDoorModal .window-config-body {
  padding: 16px 18px 20px;
}
#shakerDoorModal .shaker-door-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
#shakerDoorModal .shaker-door-card {
  cursor: pointer;
}
#shakerDoorModal .shaker-door-card__img {
  aspect-ratio: auto;
  height: 96px;
  background-size: contain;
}

.shaker-door-group__title {
  margin: 0 0 10px 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Door grid uses the 'secondary' tier tokens — smaller min-width
   than the primary Style cards above, so 4 doors fit per row on
   desktop and the grid collapses gracefully on tablet/phone. */
.shaker-door-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--wiz-grid-secondary-min), 1fr));
  gap: var(--wiz-card-gap);
}

.shaker-door-card {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--border, #334155);
  border-radius: var(--wiz-card-radius);
  background: var(--card-bg, #1e293b);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}

.shaker-door-card:hover {
  border-color: var(--accent, #06b6d4);
  transform: translateY(-2px);
}

.shaker-door-card.selected {
  border-color: var(--accent, #06b6d4);
  box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.25);
}

/* Image area uses the secondary aspect ratio (4:3) — keeps every
   card the same height regardless of column count. Container CSS
   `display: flex; align-items: center;` is removed because the
   aspect-ratio handles vertical sizing now. */
.shaker-door-card__img {
  aspect-ratio: var(--wiz-img-secondary);
  background-size: cover;
  background-position: center;
  background-color: rgba(15, 23, 42, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
}

.shaker-door-card__placeholder {
  font-size: 1.8rem;
  opacity: 0.5;
}

.shaker-door-card__info {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.shaker-door-card__info strong {
  font-size: 0.9rem;
  color: var(--text, #f1f5f9);
}

.shaker-door-card__badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  align-self: flex-start;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.shaker-door-card__badge--paint {
  background: rgba(6, 182, 212, 0.15);
  color: var(--accent, #06b6d4);
}

.shaker-door-card__badge--wood {
  background: rgba(180, 130, 90, 0.18);
  color: #d4a574;
}

/* ───────────────────────────────────────────────────────────────────
   Cabinet color button — natural-wood state (Shaker non-paintable door)
   Replaces the "Select Color" / color swatch with a fixed wood badge.
   ─────────────────────────────────────────────────────────────────── */
.cabinet-color-btn--natural {
  background: rgba(180, 130, 90, 0.10) !important;
  border: 1px solid rgba(180, 130, 90, 0.35) !important;
  cursor: default !important;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
}

.cabinet-color-btn--natural:hover {
  /* No hover effect — it's disabled */
  background: rgba(180, 130, 90, 0.10) !important;
}

.cabinet-color-btn__natural-icon {
  font-size: 1.5rem;
  flex: 0 0 auto;
}

.cabinet-color-btn__natural-text {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.cabinet-color-btn__natural-text strong {
  color: #d4a574;
  font-size: 0.9rem;
  font-weight: 700;
}

.cabinet-color-btn__natural-text small {
  color: var(--muted, #94a3b8);
  font-size: 0.75rem;
  margin-top: 2px;
}

/* ───────────────────────────────────────────────────────────────────
   Shaker Door Type — visual card separate from the Style picker.
   Lifts the door section out of the surrounding step container so
   it reads as its own decision panel below the two style options.
   ─────────────────────────────────────────────────────────────────── */
/* Shaker door section now reads from the same tokens as every other
   step card so its outer chrome (radius, border, shadow, padding)
   matches the Style cards above. */
#shakerDoorSection {
  background: var(--card-bg, #1e293b);
  border: var(--wiz-card-border);
  border-radius: var(--wiz-card-radius);
  padding: var(--wiz-card-padding-md);
  box-shadow: var(--wiz-card-shadow);
  margin-top: var(--wiz-card-gap);
}

@media (max-width: 640px) {
  #shakerDoorSection { padding: var(--wiz-card-padding-sm); }
}

#shakerDoorSection > h4 {
  margin: 0 0 4px 0;
  font-size: 1rem;
  color: var(--text, #f1f5f9);
  display: flex;
  align-items: center;
  gap: 8px;
}

#shakerDoorSection > h4::before {
  content: '🚪';
  font-size: 1.1rem;
}

#shakerDoorSection > p {
  margin: 0 0 16px 0;
  font-size: 0.82rem;
  color: var(--muted, #94a3b8);
  line-height: 1.45;
}

/* ───────────────────────────────────────────────────────────────────
   Quote History modal — G.1 / G.2
   Overlay + centered modal with filters bar and a table of quotes.
   ─────────────────────────────────────────────────────────────────── */
/* Full-page view (no longer a centered modal). Covers the entire
   viewport with the calculator's own background so it FEELS like a
   page navigation rather than a popup. The close button label now
   reads "← Back" to match. */
.quote-history-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg, #0f172a);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.quote-history-overlay[hidden] { display: none; }

.quote-history-modal {
  background: transparent;
  color: var(--text, #f1f5f9);
  border-radius: 0;
  width: 100%;
  max-width: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.quote-history-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.85));
  backdrop-filter: blur(8px);
}

.quote-history-modal__header h3 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.quote-history-modal__close {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text, #f1f5f9);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, border-color 0.15s;
}
.quote-history-modal__close:hover {
  background: rgba(6, 182, 212, 0.12);
  border-color: var(--accent, #06b6d4);
  color: var(--accent, #06b6d4);
}

.quote-history-modal__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 18px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  align-items: flex-end;
  background: rgba(15, 23, 42, 0.5);
}

.qh-filter {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--muted, #94a3b8);
}

.qh-filter input,
.qh-filter select {
  background: var(--bg, #0f172a);
  color: var(--text, #f1f5f9);
  border: 1px solid var(--border, #334155);
  border-radius: 6px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 0.85rem;
  min-width: 140px;
}

.quote-history-modal__filters button {
  padding: 7px 14px;
  font-size: 0.82rem;
}

.quote-history-modal__body {
  padding: 18px 32px 32px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.quote-history-empty {
  text-align: center;
  padding: 40px 0;
  color: var(--muted, #94a3b8);
  font-size: 0.9rem;
}

.quote-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}

.quote-history-table th {
  text-align: left;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--muted, #94a3b8);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.quote-history-table td {
  padding: 10px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.quote-history-table tr:hover td {
  background: rgba(255, 255, 255, 0.025);
}

.qh-id {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.78rem;
  color: var(--accent, #06b6d4);
}

.qh-total {
  font-weight: 700;
  text-align: right;
}

.qh-status {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.qh-status--sent     { background: rgba(34, 197, 94, 0.15);  color: #22c55e; }
.qh-status--sending  { background: rgba(6, 182, 212, 0.15);  color: #06b6d4; }
.qh-status--failed   { background: rgba(239, 68, 68, 0.15);  color: #ef4444; }
.qh-status--pending  { background: rgba(234, 179, 8, 0.15);  color: #eab308; }
.qh-status--unknown  { background: rgba(148, 163, 184, 0.12); color: #94a3b8; }

.qh-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

.qh-actions button {
  padding: 4px 10px;
  font-size: 0.75rem;
  border-radius: 6px;
}

/* ───────────────────────────────────────────────────────────────────
   Quote Detail modal — Phase 3
   Shown when 'View' is clicked in the My Quotes list.
   ─────────────────────────────────────────────────────────────────── */
.quote-detail-modal { max-width: 880px; }

.quote-detail-modal__footer {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.qd-section {
  padding: 18px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.qd-section:last-of-type { border-bottom: none; }

.qd-section-title {
  margin: 0 0 12px 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text, #f1f5f9);
}

.qd-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.qd-meta-grid > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.qd-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.qd-meta-grid strong {
  font-size: 0.95rem;
  color: var(--text, #f1f5f9);
}

.qd-meta-grid small {
  font-size: 0.78rem;
  color: var(--muted, #94a3b8);
}

.qd-item {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.qd-item-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

.qd-item-name strong {
  display: block;
  font-size: 0.92rem;
  color: var(--text, #f1f5f9);
}
.qd-item-name small {
  display: block;
  font-size: 0.78rem;
  color: var(--muted, #94a3b8);
  margin-top: 2px;
}

.qd-item-price {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent, #06b6d4);
}

.qd-inner-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  margin-top: 6px;
}

.qd-inner-table th,
.qd-inner-table td {
  padding: 6px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  text-align: left;
}

.qd-inner-table th {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted, #94a3b8);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.qd-inner-table td.num,
.qd-inner-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

.qd-item-desc {
  margin-top: 8px;
  font-size: 0.8rem;
}

.qd-item-desc summary {
  cursor: pointer;
  color: var(--muted, #94a3b8);
  font-size: 0.78rem;
  user-select: none;
}

.qd-item-desc pre {
  margin: 8px 0 0 0;
  padding: 8px 10px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  white-space: pre-wrap;
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--text, #f1f5f9);
  line-height: 1.45;
}

.qd-totals { background: rgba(6, 182, 212, 0.04); padding: 14px 16px; border-radius: 10px; }

.qd-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 0;
}

.qd-total-row span    { color: var(--muted, #94a3b8); font-size: 0.85rem; }
.qd-total-row strong  { font-size: 0.95rem; color: var(--text, #f1f5f9); }
.qd-discount strong   { color: #ef4444; }
.qd-grand {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 6px;
  padding-top: 10px;
}
.qd-grand span   { font-size: 0.95rem; color: var(--text, #f1f5f9); font-weight: 600; }
.qd-grand strong { font-size: 1.2rem; color: var(--accent, #06b6d4); }

/* ───────────────────────────────────────────────────────────────────
   Quote History — Delete button gets a danger tint to set it apart
   ─────────────────────────────────────────────────────────────────── */
.qh-delete-btn {
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
}
.qh-delete-btn:hover {
  background: rgba(239, 68, 68, 0.12) !important;
  border-color: #ef4444 !important;
}

.qh-edit-btn {
  color: var(--accent, #06b6d4) !important;
  border: 1px solid rgba(6, 182, 212, 0.35) !important;
}
.qh-edit-btn:hover {
  background: rgba(6, 182, 212, 0.12) !important;
}

/* ───────────────────────────────────────────────────────────────────
   Delete All button — admin-only, lives in the filters bar.
   Solid danger style so it can't be mistaken for a per-row action.
   ─────────────────────────────────────────────────────────────────── */
.qh-delete-all-btn {
  background: rgba(239, 68, 68, 0.12) !important;
  color: #ef4444 !important;
  border: 1px solid rgba(239, 68, 68, 0.45) !important;
  margin-left: auto; /* pushes it to the far right of the filters row */
  font-weight: 600;
}
.qh-delete-all-btn:hover {
  background: rgba(239, 68, 68, 0.22) !important;
  border-color: #ef4444 !important;
}

/* ───────────────────────────────────────────────────────────────────
   Edge Picker — 3 tiered sections (Standard / Premium / Custom)
   ─────────────────────────────────────────────────────────────────── */

/* Tab nav (one active section at a time). Each tab shows the tier
   name + its price so the in-section header becomes redundant — it's
   hidden via the [hidden] attribute on the section itself plus the
   .edge-picker-section__head visual de-emphasis below. */
.edge-picker-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.edge-picker-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted, #94a3b8);
  cursor: pointer;
  padding: 10px 14px;
  margin-bottom: -1px;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  border-radius: 6px 6px 0 0;
}
.edge-picker-tab:hover {
  color: var(--text, #f1f5f9);
  background: rgba(6, 182, 212, 0.06);
}
.edge-picker-tab.active {
  color: var(--accent, #06b6d4);
  border-bottom-color: var(--accent, #06b6d4);
}
.edge-picker-tab__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.edge-picker-tab__price {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted, #94a3b8);
}
.edge-picker-tab.active .edge-picker-tab__price {
  color: var(--accent, #06b6d4);
}

/* The in-section header (Standard | Included) is now duplicated by the
   tabs. Keep the DOM in place (legacy JS selectors) but visually hide it. */
.edge-picker-section[data-edge-tier] .edge-picker-section__head {
  display: none;
}
.edge-picker-section[hidden] { display: none !important; }

.edge-picker-section + .edge-picker-section {
  margin-top: 22px;
}

.edge-picker-section__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.edge-picker-section__title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text, #f1f5f9);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.edge-picker-section__price {
  font-size: 0.78rem;
  font-weight: 600;
  color: #22c55e;
}

.edge-picker-section__price--paid {
  color: var(--accent, #06b6d4);
}

.edge-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.edge-picker-card {
  border: 2px solid var(--border, #334155);
  border-radius: 10px;
  background: var(--card-bg, #1e293b);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}

.edge-picker-card:hover {
  border-color: var(--accent, #06b6d4);
  transform: translateY(-2px);
}

.edge-picker-card.selected {
  border-color: var(--accent, #06b6d4);
  box-shadow: 0 0 0 2px rgba(6, 182, 212, 0.25);
}

.edge-picker-img {
  height: 70px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(15, 23, 42, 0.5);
}

.edge-picker-info {
  padding: 8px 10px;
  text-align: center;
}

.edge-picker-info h5 {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text, #f1f5f9);
}

.edge-picker-info span {
  display: block;
  font-size: 0.7rem;
  color: var(--muted, #94a3b8);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ───────────────────────────────────────────────────────────────────
   Cabinet card — Phase 2a summary view
   In summary mode (default), the card hides the state-driven controls
   (decision gate, status pill, fields, skipped panel) and shows only
   a compact badge + details + Configure button. When the modal opens,
   .summary-mode is removed so the controls (now reparented into the
   modal body) render per their normal display state.
   ─────────────────────────────────────────────────────────────────── */
.cabinet-summary-view {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0;
}

.cabinet-summary-view__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cabinet-summary-view__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Small "Change" button next to the status badge — lets the user
   reset their Include / Not Applicable decision and go back to the
   gate question without entering the configuration modal. */
.cabinet-summary-view__change {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(148, 163, 184, 0.35);
  color: var(--muted, #94a3b8);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cabinet-summary-view__change:hover {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text, #f1f5f9);
  border-color: rgba(148, 163, 184, 0.55);
}
.cabinet-summary-view__change[hidden] { display: none !important; }

.cabinet-summary-view__badge--undecided {
  background: rgba(148, 163, 184, 0.15);
  color: var(--muted, #94a3b8);
}
.cabinet-summary-view__badge--available {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
}
.cabinet-summary-view__badge--skipped {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}

.cabinet-summary-view__details {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text, #f1f5f9);
  line-height: 1.5;
}

.cabinet-summary-view__configure {
  align-self: flex-start;
  padding: 10px 20px;
  font-size: 0.92rem;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.cabinet-summary-view__configure:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(6, 182, 212, 0.25);
}

/* "Configure pending" pulse — applied after the user picks Include but
   before they enter measurements / color. Draws attention to the
   Configure button with a glowing ring + a side-to-side hand wave. */
@keyframes summaryConfigPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.55); }
  50%      { box-shadow: 0 0 0 10px rgba(6, 182, 212, 0); }
}
@keyframes summaryConfigWave {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}
.cabinet-summary-view__configure--pulse {
  animation:
    summaryConfigPulse 1.6s ease-in-out infinite,
    summaryConfigWave  1.6s ease-in-out infinite;
  position: relative;
}

/* Summary mode — only active when the cabinet/counter decision is
   'Available' (decision === true). In that case the standard status bar
   + the configuration fields are hidden in the card and replaced by the
   compact summary view + Configure button. The decision gate and the
   skipped panel are NEVER hidden by this class — they keep their normal
   state-driven visibility so the user can:
     · still pick Include / Not Applicable inline when undecided
     · see the 'Not Applicable' panel + Change link when skipped
   Same selectors cover both Step 2 (cabinet) and Step 4 (counter) since
   they share the .cabinet-active-card__body wrapper. */
.cabinet-active-card__body.summary-mode #cabinetStatusAvailable,
.cabinet-active-card__body.summary-mode #cabinetFields,
.cabinet-active-card__body.summary-mode #ct4StatusAvailable,
.cabinet-active-card__body.summary-mode #ct4FieldsPanel {
  display: none !important;
}

/* When NOT in summary-mode (decision is null or false), hide the summary
   view itself so the gate or skipped panel takes its place. */
.cabinet-active-card__body:not(.summary-mode) #cabinetSummaryView,
.cabinet-active-card__body:not(.summary-mode) #ct4SummaryView {
  display: none;
}

/* ───────────────────────────────────────────────────────────────────
   Cabinet / Counter config modal — Phase 2 polish
   - Reference image now sits inside the header as a small icon
     (replaces the giant cropped banner)
   - Footer gets a Cancel + Save layout
   - Save button has explicit disabled state until validation passes
   ─────────────────────────────────────────────────────────────────── */
.cfg-modal-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.cfg-modal-footer {
  display: flex;
  justify-content: space-between !important;
  gap: 10px;
  align-items: center;
}

.cfg-modal-cancel {
  padding: 10px 22px !important;
  font-weight: 600;
}

/* Disabled Save & Close — clear visual signal that validation is pending */
.window-config-save:disabled {
  background: rgba(148, 163, 184, 0.18) !important;
  color: rgba(255, 255, 255, 0.45) !important;
  cursor: not-allowed !important;
  pointer-events: none;
  box-shadow: none !important;
  transform: none !important;
}

/* Hide the giant inline-styled banner that used to wrap the image — its
   markup is gone from the HTML now, but if anything still references it
   via CSS this rule keeps the layout calm. */
.window-config-banner {
  display: none;
}