/* ═══════════════════════════════════════════════════
   Solar Wizard v2.2 — Complete Stylesheet
   ═══════════════════════════════════════════════════ */

/* ── CSS VARIABLES — Light theme ────────────────── */
:root {
    --sw-primary  : #FF8C00;
    --sw-primary-h: #e07800;
    --sw-dark     : #1A1A2E;
    --sw-mid      : #555;
    --sw-muted    : #888;
    --sw-border   : #E0E0E0;
    --sw-bg       : #F7F7F7;
    --sw-white    : #ffffff;
    --sw-card-bg  : #ffffff;
    --sw-input-bg : #ffffff;
    --sw-banner-1 : #1A1A2E;
    --sw-banner-2 : #2D4270;
    --sw-radius   : 12px;
    --sw-trans    : .2s ease;
    --sw-shadow   : 0 4px 20px rgba(0,0,0,.08);
}

/* ── DARK THEME variables ───────────────────────── */
.sw-wrap.sw-dark, .sw-wrap[data-theme="dark"] {
    --sw-dark     : #F0F0F0;
    --sw-mid      : #B0B0B0;
    --sw-muted    : #808080;
    --sw-border   : #3A3A4A;
    --sw-bg       : #1E1E2E;
    --sw-white    : #2A2A3E;
    --sw-card-bg  : #252535;
    --sw-input-bg : #1A1A2E;
    --sw-banner-1 : #0D0D1A;
    --sw-banner-2 : #1A1A3E;
    --sw-shadow   : 0 4px 20px rgba(0,0,0,.3);
}

/* ── OS dark mode auto-detect ───────────────────── */
@media (prefers-color-scheme: dark) {
    .sw-wrap:not(.sw-light) {
        --sw-dark     : #F0F0F0;
        --sw-mid      : #B0B0B0;
        --sw-muted    : #808080;
        --sw-border   : #3A3A4A;
        --sw-bg       : #1E1E2E;
        --sw-white    : #2A2A3E;
        --sw-card-bg  : #252535;
        --sw-input-bg : #1A1A2E;
        --sw-banner-1 : #0D0D1A;
        --sw-banner-2 : #1A1A3E;
        --sw-shadow   : 0 4px 20px rgba(0,0,0,.3);
    }
}

/* ── RESET / TEXT SELECTION ──────────────────────── */
.sw-wrap *, .sw-wrap *::before, .sw-wrap *::after { box-sizing:border-box; }
/* Selection: dark navy bg + white text — visible on any background */
.sw-wrap ::selection      { background: #1A1A2E !important; color: #fff !important; }
.sw-wrap ::-moz-selection { background: #1A1A2E !important; color: #fff !important; }

/* ── OUTER WRAP ──────────────────────────────────── */
.sw-wrap {
    max-width    : 780px;
    margin       : 0 auto;
    border       : 2px solid var(--sw-primary);
    border-radius: 16px;
    background   : var(--sw-white);
    overflow     : hidden;
    font-family  : -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    color        : var(--sw-dark);
    box-shadow   : var(--sw-shadow);
    transition   : background var(--sw-trans), color var(--sw-trans);
}

/* ── RTL ─────────────────────────────────────────── */
.sw-wrap[dir="rtl"] { direction:rtl; text-align:right; }
.sw-wrap[dir="rtl"] .sw-btn-row { flex-direction:row-reverse; }

/* ── TOP BAR (lang + theme toggle) ──────────────── */
.sw-top-bar {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    padding        : 10px 16px;
    background     : var(--sw-bg);
    border-bottom  : 1px solid var(--sw-border);
}
.sw-lang-bar { display:flex; gap:6px; }
.sw-lang-btn {
    border:2px solid var(--sw-border); border-radius:8px;
    background:var(--sw-white)!important; padding:4px 14px;
    font-size:.78rem; font-weight:700; cursor:pointer;
    color:var(--sw-mid)!important; transition:all var(--sw-trans);
}
.sw-lang-btn.active, .sw-lang-btn:hover {
    border-color:var(--sw-primary); color:var(--sw-primary)!important;
    background:var(--sw-card-bg)!important;
}

/* Dark mode toggle */
.sw-theme-toggle {
    display    : flex;
    align-items: center;
    gap        : 8px;
    cursor     : pointer;
    padding    : 4px 10px;
    border-radius: 8px;
    border     : 2px solid var(--sw-border);
    background : var(--sw-white);
    transition : all var(--sw-trans);
}
.sw-theme-toggle:hover { border-color:var(--sw-primary); }
.sw-theme-icon { font-size:1rem; line-height:1; }
.sw-theme-label { font-size:.76rem; font-weight:600; color:var(--sw-mid)!important; }

/* ── SCREENS ──────────────────────────────────────── */
.sw-screen { display:none; padding:28px 28px 20px; }
.sw-screen.active { display:block; animation:swIn .25s ease; }
.sw-screen.sw-exit { animation:swOut .25s ease forwards; pointer-events:none; }
.sw-t-hidden, .sw-hidden { display:none!important; }

@keyframes swIn  { from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:none} }
@keyframes swOut { from{opacity:1} to{opacity:0;transform:translateX(-24px)} }
.sw-wrap[dir="rtl"] .sw-screen.active { animation-name:swInR; }
.sw-wrap[dir="rtl"] .sw-screen.sw-exit { animation-name:swOutR; }
@keyframes swInR  { from{opacity:0;transform:translateX(-24px)} to{opacity:1;transform:none} }
@keyframes swOutR { from{opacity:1} to{opacity:0;transform:translateX(24px)} }

/* ── LOGO ─────────────────────────────────────────── */
.sw-logo-wrap  { text-align:center; margin-bottom:14px; }
.sw-logo-img   { max-height:72px; max-width:220px; width:auto; object-fit:contain; }
.sw-brand-logo { max-height:52px; max-width:180px; width:auto; object-fit:contain; }
.sw-brand-name { font-size:1.25rem; font-weight:700; color:var(--sw-primary); letter-spacing:-.5px; }
.sw-result-brand { text-align:center; margin-bottom:18px; }
.sw-result-brand .sw-brand-logo { max-height:44px; }
.sw-result-brand .sw-brand-name { font-size:1.1rem; }

/* ── TYPOGRAPHY — force normal case ─────────────── */
.sw-wrap h2 {
    font-size:1.5rem!important; font-weight:700!important;
    margin:0 0 8px!important; color:var(--sw-dark)!important;
    text-align:center; text-transform:none!important;
    letter-spacing:normal!important;
}
.sw-wrap h3 {
    font-size:1.05rem!important; font-weight:600!important;
    margin:0 0 16px!important; color:var(--sw-dark)!important;
    text-transform:none!important; letter-spacing:normal!important;
    line-height:1.4;
}
.sw-wrap h4 {
    font-size:.93rem!important; font-weight:600!important;
    margin:10px 0 8px!important; color:var(--sw-dark)!important;
    text-transform:none!important; letter-spacing:normal!important;
}
.sw-wrap p { color:var(--sw-mid)!important; }
.sw-step-sub  { text-align:center; font-size:.88rem; margin:0 0 16px; }
.sw-step-label{ font-size:.74rem; color:var(--sw-muted)!important; display:block; margin:0 0 4px; }
.sw-muted     { color:var(--sw-muted)!important; }

/* ── MODE BUTTONS ─────────────────────────────────── */
.sw-mode-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:20px; }
.sw-mode-btn  {
    border:2px solid var(--sw-border)!important; border-radius:var(--sw-radius)!important;
    background:var(--sw-card-bg)!important; padding:22px 16px!important; cursor:pointer!important;
    display:flex!important; flex-direction:column!important; align-items:center!important; gap:10px!important;
    color:var(--sw-mid)!important; transition:all var(--sw-trans)!important;
    text-transform:none!important; letter-spacing:normal!important;
}
.sw-mode-btn:hover {
    border-color:var(--sw-primary)!important; color:var(--sw-dark)!important;
    box-shadow:0 4px 16px rgba(255,140,0,.15)!important;
}
.sw-mode-btn.selected {
    border:3px solid var(--sw-primary)!important;
    background:rgba(255,140,0,.22)!important;
    color:var(--sw-dark)!important;
    box-shadow:0 4px 20px rgba(255,140,0,.35)!important;
}
/* Dark theme: selected needs more contrast */
.sw-wrap.sw-dark .sw-mode-btn.selected,
.sw-wrap[data-theme="dark"] .sw-mode-btn.selected {
    background:rgba(255,140,0,.28)!important;
}
.sw-mode-btn.selected .sw-mode-label { color:var(--sw-primary)!important; }
.sw-mode-icon svg { display:block; }
.sw-mode-label { font-size:1rem; font-weight:700; color:var(--sw-dark)!important; transition:color var(--sw-trans); }
.sw-mode-steps { margin-top:6px; }

/* ── PLACEHOLDER — visible in both themes ─────── */
.sw-wrap input::placeholder,
.sw-wrap textarea::placeholder { color:var(--sw-muted)!important; opacity:1; }
.sw-wrap input::-webkit-input-placeholder,
.sw-wrap textarea::-webkit-input-placeholder { color:var(--sw-muted)!important; opacity:1; }
.sw-wrap input::-moz-placeholder,
.sw-wrap textarea::-moz-placeholder { color:var(--sw-muted)!important; opacity:1; }

/* Animated step dots */
.sw-stepdots  { display:flex; align-items:center; gap:5px; flex-wrap:wrap; justify-content:center; }
.sw-stepdot   {
    width:9px; height:9px; border-radius:50%;
    background:var(--sw-primary); opacity:0;
    animation:dotPop .4s ease forwards;
}
@keyframes dotPop { 0%{opacity:0;transform:scale(0)} 60%{opacity:1;transform:scale(1.3)} 100%{opacity:.85;transform:scale(1)} }
.sw-steps-label { font-size:.72rem; color:var(--sw-muted)!important; margin-left:6px; white-space:nowrap; }

/* ── NAME ROW ─────────────────────────────────────── */
.sw-name-row { display:grid; grid-template-columns:1fr 1fr auto; gap:10px; align-items:center; }
.sw-name-row input {
    border:2px solid var(--sw-border); border-radius:10px;
    padding:12px 14px; font-size:.95rem; outline:none; width:100%;
    color:var(--sw-dark)!important; background:var(--sw-input-bg)!important;
    transition:border-color var(--sw-trans);
}
.sw-name-row input:focus { border-color:var(--sw-primary); }
.sw-next-arrow {
    background:var(--sw-primary); color:#fff; border:none;
    border-radius:10px; width:48px; height:48px;
    font-size:1.2rem; cursor:pointer;
    transition:background var(--sw-trans),transform var(--sw-trans);
}
.sw-next-arrow:disabled { background:#ccc; cursor:not-allowed; }
.sw-next-arrow:not(:disabled):hover { background:var(--sw-primary-h); transform:scale(1.06); }

/* ── CARDS ────────────────────────────────────────── */
.sw-icon-grid  { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.sw-icon-grid--2 { grid-template-columns:repeat(2,1fr); }
.sw-icon-grid--3 { grid-template-columns:repeat(3,1fr); }
.sw-interest-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:16px; }

.sw-card {
    border:2px solid var(--sw-border); border-radius:var(--sw-radius);
    background:var(--sw-card-bg)!important; padding:18px 10px; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:10px;
    font-size:.84rem; font-weight:500; text-align:center;
    transition:all var(--sw-trans);
    text-transform:none!important; letter-spacing:normal!important;
}
.sw-card:hover  { border-color:var(--sw-primary); transform:translateY(-3px); box-shadow:0 6px 20px rgba(255,140,0,.15); }
.sw-card.selected {
    border:3px solid var(--sw-primary)!important;
    background:rgba(255,140,0,.22)!important;
    box-shadow:0 4px 20px rgba(255,140,0,.3)!important;
}
.sw-wrap.sw-dark .sw-card.selected,
.sw-wrap[data-theme="dark"] .sw-card.selected {
    background:rgba(255,140,0,.28)!important;
}
.sw-card.selected .sw-card-text,
.sw-card.selected span { color:var(--sw-primary)!important; }
.sw-card-icon   { line-height:1; }
.sw-card-icon svg { display:block; }
.sw-card-text, .sw-card span { color:var(--sw-dark)!important; font-size:.84rem; line-height:1.3; }
.sw-card--large { padding:24px 14px!important; }
.sw-card--icon  { }

/* Interest cards */
.sw-card--interest { min-height:100px; }
.sw-interest-multi { display:flex; gap:6px; align-items:center; justify-content:center; flex-wrap:wrap; }
.sw-interest-multi svg { display:block; }

/* ── LIST BUTTONS ─────────────────────────────────── */
.sw-list     { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.sw-list-btn {
    border:2px solid var(--sw-border); border-radius:var(--sw-radius);
    background:var(--sw-card-bg)!important; padding:16px 20px; cursor:pointer;
    text-align:left; font-size:.95rem; font-weight:500;
    color:var(--sw-mid)!important;
    transition:all var(--sw-trans);
    text-transform:none!important; letter-spacing:normal!important;
}
.sw-list-btn:hover { border-color:var(--sw-primary); color:var(--sw-dark)!important; }
.sw-list-btn.selected {
    border:3px solid var(--sw-primary)!important;
    background:rgba(255,140,0,.22)!important;
    color:var(--sw-primary)!important;
    box-shadow:0 2px 12px rgba(255,140,0,.25)!important;
}
.sw-wrap.sw-dark .sw-list-btn.selected,
.sw-wrap[data-theme="dark"] .sw-list-btn.selected {
    background:rgba(255,140,0,.28)!important;
}

/* ── SKIP BUTTON ──────────────────────────────────── */
.sw-skip-btn {
    display:block; width:100%; background:none!important;
    border:2px dashed var(--sw-border); border-radius:var(--sw-radius);
    padding:10px; cursor:pointer; font-size:.84rem;
    color:var(--sw-muted)!important; margin-bottom:12px;
    transition:all var(--sw-trans); text-align:center;
    text-transform:none!important;
}
.sw-skip-btn:hover { border-color:var(--sw-primary); color:var(--sw-primary)!important; }

/* ── NAVIGATION BUTTONS ───────────────────────────── */
.sw-btn-row {
    display:flex; align-items:center; gap:12px; margin-top:16px;
}

/* Back button — bigger, cleaner */
.sw-back-btn {
    display:flex; align-items:center; gap:6px;
    background:var(--sw-card-bg)!important;
    border:2px solid var(--sw-border);
    border-radius:var(--sw-radius);
    padding:14px 22px;
    color:var(--sw-mid)!important;
    cursor:pointer; font-size:.95rem; font-weight:600;
    white-space:nowrap; flex:0 0 auto;
    transition:all var(--sw-trans);
    text-transform:none!important; letter-spacing:normal!important;
}
.sw-back-btn:hover {
    border-color:var(--sw-primary);
    color:var(--sw-primary)!important;
    background:rgba(255,140,0,.06);
}

/* Next button — bigger, bolder */
.sw-next-btn, .sw-btn-primary {
    flex:1; background:var(--sw-primary); color:#fff!important;
    border:none; border-radius:var(--sw-radius);
    padding:16px 28px; font-size:1.05rem; font-weight:700;
    cursor:pointer; transition:all var(--sw-trans);
    text-align:center; display:flex; align-items:center;
    justify-content:center; gap:8px;
    text-transform:none!important; letter-spacing:normal!important;
    box-shadow:0 4px 14px rgba(255,140,0,.3);
}
.sw-next-btn:hover:not(:disabled), .sw-btn-primary:hover:not(:disabled) {
    background:var(--sw-primary-h);
    transform:translateY(-1px);
    box-shadow:0 6px 20px rgba(255,140,0,.4);
}
.sw-next-btn:disabled, .sw-btn-primary:disabled {
    background:#ccc; cursor:not-allowed;
    box-shadow:none; transform:none;
}

/* WhatsApp button */
.sw-wa-yes { background:#25D366!important; box-shadow:0 4px 14px rgba(37,211,102,.3)!important; }
.sw-wa-yes:hover:not(:disabled) { background:#1ea952!important; }

/* ── FIELDS ───────────────────────────────────────── */
.sw-field { display:flex; flex-direction:column; margin-bottom:12px; flex:1; }
.sw-field label {
    font-size:.78rem; font-weight:700; color:var(--sw-mid)!important;
    margin-bottom:5px; text-transform:uppercase; letter-spacing:.05em;
}
.sw-field input,.sw-field select,.sw-field textarea {
    border:2px solid var(--sw-border); border-radius:10px;
    padding:11px 14px; font-size:.93rem; outline:none; width:100%;
    background:var(--sw-input-bg)!important; color:var(--sw-dark)!important;
    transition:border-color var(--sw-trans);
}
.sw-field input:focus,.sw-field select:focus { border-color:var(--sw-primary); }
.sw-field--grow  { flex:2; }
.sw-field--narrow{ flex:0 0 110px; }
.sw-field-row    { display:flex; gap:12px; }

.sw-input-prefix {
    display:flex; align-items:center;
    border:2px solid var(--sw-border); border-radius:10px; overflow:hidden;
    background:var(--sw-input-bg)!important;
}
.sw-input-prefix:focus-within { border-color:var(--sw-primary); }
.sw-input-prefix span {
    padding:0 14px; background:var(--sw-bg)!important;
    font-weight:700; color:var(--sw-mid)!important;
    border-right:2px solid var(--sw-border);
}
.sw-input-prefix input { border:none; outline:none; padding:11px 14px; flex:1; background:var(--sw-input-bg)!important; color:var(--sw-dark)!important; }

/* ── ADDRESS ──────────────────────────────────────── */
.sw-addr-row { display:flex; gap:8px; }
.sw-addr-row input {
    flex:1; border:2px solid var(--sw-border); border-radius:10px;
    padding:11px 14px; font-size:.93rem; outline:none;
    background:var(--sw-input-bg)!important; color:var(--sw-dark)!important;
    transition:border-color var(--sw-trans);
}
.sw-addr-row input:focus { border-color:var(--sw-primary); }
.sw-addr-btn {
    background:var(--sw-primary); color:#fff; border:none;
    border-radius:10px; padding:0 16px; cursor:pointer;
    font-size:1.1rem; transition:background var(--sw-trans);
    white-space:nowrap;
}
.sw-addr-btn:hover { background:var(--sw-primary-h); }

/* ── MAP ──────────────────────────────────────────── */
.sw-map-box {
    border:2px solid var(--sw-border); border-radius:var(--sw-radius);
    overflow:hidden; margin:10px 0;
}
#sw-map { height:300px; width:100%; background:var(--sw-bg); }
.sw-map-hint {
    background:rgba(255,140,0,.06); padding:8px 12px;
    font-size:.79rem; color:var(--sw-mid)!important;
    border-top:1px solid var(--sw-border); margin:0;
}
.sw-roof-info {
    background:rgba(67,160,71,.08); border-top:1px solid rgba(67,160,71,.3);
    padding:8px 14px; font-size:.83rem; color:#276749!important;
}

/* ── KM/MILES TOGGLE ──────────────────────────────── */
.sw-unit-row    { display:flex; gap:8px; align-items:center; }
.sw-unit-row input { flex:1; }
.sw-unit-toggle { display:flex; border:2px solid var(--sw-border); border-radius:10px; overflow:hidden; flex-shrink:0; }
.sw-unit-btn    {
    background:var(--sw-card-bg)!important; border:none; padding:8px 12px;
    font-size:.8rem; font-weight:600; cursor:pointer;
    color:var(--sw-mid)!important; transition:all var(--sw-trans);
}
.sw-unit-btn.active { background:var(--sw-primary); color:#fff!important; }
.sw-unit-display { font-size:.82rem; color:var(--sw-muted)!important; flex-shrink:0; padding:11px 8px; }

/* ── SLIDER ───────────────────────────────────────── */
.sw-slider-wrap { display:flex; align-items:center; gap:12px; }
.sw-slider-wrap input[type="range"] { flex:1; accent-color:var(--sw-primary); cursor:pointer; height:6px; }
.sw-slider-wrap span { min-width:60px; font-weight:700; color:var(--sw-primary)!important; }

/* ── PERSONA BANNER ───────────────────────────────── */
.sw-persona-banner {
    display:flex; align-items:center; gap:14px;
    background:linear-gradient(135deg,var(--sw-banner-1),var(--sw-banner-2));
    border-radius:var(--sw-radius); padding:16px; margin-bottom:16px;
}
.sw-banner-logo {
    height:44px; width:auto; object-fit:contain;
    flex-shrink:0; background:#fff; border-radius:8px; padding:4px;
}
.sw-persona-banner p { color:rgba(255,255,255,.85)!important; font-size:.86rem; margin:0; }

/* ── SYSTEM BANNER ────────────────────────────────── */
.sw-system-banner {
    display:flex; align-items:center; justify-content:space-around; flex-wrap:wrap;
    background:linear-gradient(135deg,var(--sw-banner-1),var(--sw-banner-2));
    border-radius:var(--sw-radius); padding:20px; margin-bottom:14px; gap:10px;
}
.sw-system-stat { display:flex; flex-direction:column; align-items:center; gap:4px; }
.sw-system-val  { font-size:1.5rem; font-weight:800; color:#fff!important; }
.sw-savings-val { color:var(--sw-primary)!important; }
.sw-system-stat>span:last-child { font-size:.74rem; color:rgba(255,255,255,.75)!important; }
.sw-panel-img   { font-size:2.6rem; }

/* ── EV RESULT ────────────────────────────────────── */
.sw-ev-result {
    background:rgba(255,140,0,.06); border:1px solid rgba(255,140,0,.3);
    border-radius:var(--sw-radius); padding:12px 16px; margin-bottom:12px;
}
.sw-ev-result p { font-size:.87rem; margin:0 0 8px; color:var(--sw-dark)!important; }
.sw-ev-metrics  { display:flex; justify-content:space-around; gap:10px; }
.sw-ev-metrics div { display:flex; flex-direction:column; align-items:center; font-size:.74rem; color:var(--sw-mid)!important; }
.sw-ev-metrics strong { font-size:1.1rem; color:var(--sw-primary)!important; }

/* ── ROOF WARNING ─────────────────────────────────── */
.sw-roof-warning {
    background:#FFF3CD; border:1px solid #FFEAA7;
    border-radius:8px; padding:10px 14px; font-size:.82rem;
    color:#856404!important; margin-bottom:10px;
}

/* ── KEEP IN MIND ─────────────────────────────────── */
.sw-keep-in-mind {
    background:rgba(255,140,0,.06); border-left:3px solid var(--sw-primary);
    padding:8px 14px; font-size:.8rem; margin-bottom:12px;
    color:var(--sw-mid)!important; border-radius:0 6px 6px 0;
}

/* ── OFFSET SLIDER ────────────────────────────────── */
.sw-offset-wrap  { margin-bottom:14px; }
.sw-offset-labels{ display:flex; justify-content:space-between; font-size:.83rem; margin-bottom:6px; color:var(--sw-mid)!important; }
.sw-offset-labels strong { color:var(--sw-primary)!important; }

/* ── ENV PERIOD LABEL ────────────────────────────── */
.sw-env-period {
    font-size: .75rem;
    color: var(--sw-muted) !important;
    text-align: center;
    margin: 0 0 6px !important;
    font-style: italic;
}

/* ── ENV GRID ─────────────────────────────────────── */
.sw-env-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:8px; }
.sw-env-card {
    background:var(--sw-bg)!important; border:1px solid var(--sw-border);
    border-radius:var(--sw-radius); padding:14px 6px;
    display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center;
}
.sw-env-icon   { font-size:1.8rem; }
.sw-env-card strong { font-size:1rem; font-weight:700; color:var(--sw-primary)!important; }
.sw-env-card span   { font-size:.7rem; color:var(--sw-muted)!important; }
.sw-env-note   { font-size:.74rem; color:var(--sw-muted)!important; text-align:center; margin-bottom:12px; }
.sw-env-grid--sm .sw-env-card { padding:8px 4px; }

/* ── RESULT RECAP ─────────────────────────────────── */
.sw-result-recap {
    background:var(--sw-bg)!important; border-radius:8px; padding:8px 14px;
    font-size:.82rem; margin-bottom:14px; color:var(--sw-mid)!important;
    border:1px solid var(--sw-border);
}
.sw-result-recap span { font-weight:700; color:var(--sw-primary)!important; }

/* ── COST CARDS ───────────────────────────────────── */
.sw-cost-card { border:1px solid var(--sw-border); border-radius:var(--sw-radius); padding:16px; margin-bottom:10px; background:var(--sw-card-bg)!important; }
.sw-cost-card h4 { margin:0 0 10px; color:var(--sw-dark)!important; }
.sw-cost-card ul { margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.sw-cost-card li { font-size:.83rem; display:flex; justify-content:space-between; gap:8px; color:var(--sw-mid)!important; }
.sw-cost-card li strong { color:var(--sw-dark)!important; }
.sw-loan-meta { display:flex; gap:12px; margin-top:8px; font-size:.75rem; color:var(--sw-muted)!important; }

/* ── DISCLAIMER ───────────────────────────────────── */
.sw-disclaimer {
    font-size:.75rem; color:var(--sw-muted)!important;
    margin:8px 0; padding:10px 14px;
    background:var(--sw-bg)!important; border-radius:8px;
    border:1px solid var(--sw-border);
}

/* ── DATE WRAP (legacy) ───────────────────────────── */
.sw-date-wrap { position:relative; display:block; cursor:pointer; }

/* ── CUSTOM DATE + TIME PICKERS ───────────────────── */
.sw-datepicker,
.sw-timepicker { position:relative; }

.sw-datepicker-display,
.sw-timepicker-display {
    display:flex; align-items:center; gap:10px;
    border:2px solid var(--sw-border); border-radius:10px;
    padding:11px 14px; background:var(--sw-input-bg)!important;
    cursor:pointer; transition:border-color var(--sw-trans);
    user-select:none;
}
.sw-datepicker-display:hover,
.sw-timepicker-display:hover,
.sw-datepicker.sw-open .sw-datepicker-display,
.sw-timepicker.sw-open .sw-timepicker-display { border-color:var(--sw-primary); }
.sw-datepicker-display.sw-disabled,
.sw-timepicker-display.sw-disabled { opacity:.5; cursor:not-allowed; pointer-events:none; }
.sw-datepicker-icon,
.sw-timepicker-icon  { font-size:1.1rem; line-height:1; flex-shrink:0; }
.sw-datepicker-text,
.sw-timepicker-text  { font-size:.93rem; color:var(--sw-muted)!important; flex:1; }
.sw-datepicker-text.sw-dp-selected,
.sw-timepicker-text.sw-tp-selected { color:var(--sw-dark)!important; font-weight:600; }

/* Calendar panel */
.sw-datepicker-panel {
    position:absolute; top:calc(100% + 6px); left:0; z-index:999;
    background:var(--sw-card-bg)!important; border:2px solid var(--sw-primary);
    border-radius:12px; padding:14px;
    box-shadow:0 8px 32px rgba(0,0,0,.2); min-width:260px;
}
.sw-datepicker-nav {
    display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;
}
.sw-datepicker-prev,
.sw-datepicker-next {
    background:var(--sw-bg)!important; border:2px solid var(--sw-border); border-radius:8px;
    width:32px; height:32px; font-size:1.2rem; cursor:pointer;
    color:var(--sw-dark)!important; display:flex; align-items:center; justify-content:center;
    transition:all var(--sw-trans);
}
.sw-datepicker-prev:hover,
.sw-datepicker-next:hover { border-color:var(--sw-primary); color:var(--sw-primary)!important; }
.sw-datepicker-month-year { font-size:.93rem; font-weight:700; color:var(--sw-dark)!important; }
.sw-datepicker-weekdays {
    display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:4px;
}
.sw-datepicker-weekdays span {
    text-align:center; font-size:.7rem; font-weight:700;
    color:var(--sw-muted)!important; padding:4px 0;
}
.sw-datepicker-days { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.sw-dp-day {
    text-align:center; padding:7px 2px; border-radius:8px;
    font-size:.84rem; cursor:pointer; color:var(--sw-dark)!important;
    border:2px solid transparent; transition:all var(--sw-trans); background:none;
    line-height:1;
}
.sw-dp-day:hover:not(.sw-dp-past):not(.sw-dp-empty) {
    background:rgba(255,140,0,.1); border-color:var(--sw-primary);
}
.sw-dp-day.sw-dp-today  { border-color:var(--sw-primary); color:var(--sw-primary)!important; font-weight:700; }
.sw-dp-day.sw-dp-selected { background:var(--sw-primary); color:#fff!important; font-weight:700; border-color:var(--sw-primary); }
.sw-dp-day.sw-dp-past   { color:var(--sw-border)!important; cursor:default; }
.sw-dp-day.sw-dp-empty  { visibility:hidden; cursor:default; }

/* Time panel */
.sw-timepicker-panel {
    position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:999;
    background:var(--sw-card-bg)!important; border:2px solid var(--sw-primary);
    border-radius:12px; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,.2);
    max-height:280px; overflow-y:auto;
}
.sw-timepicker-opt {
    display:block; width:100%; padding:11px 16px; text-align:left;
    background:none!important; border:none; border-bottom:1px solid var(--sw-border);
    font-size:.93rem; color:var(--sw-dark)!important;
    cursor:pointer; transition:background var(--sw-trans);
}
.sw-timepicker-opt:last-child { border-bottom:none; }
.sw-timepicker-opt:hover { background:rgba(255,140,0,.1); }
.sw-timepicker-opt.sw-tp-selected { background:var(--sw-primary); color:#fff!important; font-weight:700; }

/* ── SCHEDULE ─────────────────────────────────────── */
.sw-thankyou { font-size:1.05rem; font-weight:700; color:var(--sw-primary)!important; margin-bottom:8px; }
.sw-thankyou-big { font-size:3rem; text-align:center; margin:16px 0 10px; }
.sw-privacy-note { font-size:.77rem; color:var(--sw-muted)!important; margin-bottom:8px; }
.sw-privacy-note a { color:var(--sw-primary)!important; }
.sw-optin { display:flex; align-items:flex-start; gap:8px; font-size:.8rem; margin:8px 0 10px; cursor:pointer; color:var(--sw-mid)!important; }
.sw-optin input { margin-top:2px; accent-color:var(--sw-primary); }

/* ── WHATSAPP SCREEN ──────────────────────────────── */
.sw-wa-hero  { text-align:center; padding:10px 0 18px; }
.sw-wa-icon  { display:flex; justify-content:center; margin-bottom:14px; }
.sw-wa-icon svg { display:block; }
.sw-phone-row { display:flex; gap:8px; align-items:stretch; }
.sw-phone-prefix {
    width:72px!important; flex:0 0 72px!important; text-align:center;
    font-weight:700; border:2px solid var(--sw-border)!important;
    border-radius:10px!important; padding:11px 8px!important;
    background:var(--sw-input-bg)!important; color:var(--sw-dark)!important;
}
.sw-phone-prefix:focus { border-color:var(--sw-primary)!important; }
.sw-phone-row input[type="tel"] {
    flex:1; border:2px solid var(--sw-border); border-radius:10px;
    padding:11px 14px; font-size:.93rem; outline:none;
    background:var(--sw-input-bg)!important; color:var(--sw-dark)!important;
    transition:border-color var(--sw-trans);
}
.sw-phone-row input[type="tel"]:focus { border-color:var(--sw-primary); }
.sw-phone-row input.sw-error { border-color:#e53935!important; }
.sw-wa-consent { font-size:.74rem; color:var(--sw-muted)!important; margin:6px 0 16px; line-height:1.5; }
.sw-wa-btns  { display:flex; flex-direction:column; gap:10px; }
.sw-wa-yes   { display:flex!important; align-items:center; justify-content:center; gap:10px; }
.sw-wa-yes svg { flex-shrink:0; }
.sw-wa-skip  {
    display:flex; align-items:center; justify-content:center; gap:8px;
    background:none!important; border:2px solid var(--sw-border); border-radius:var(--sw-radius);
    padding:13px 20px; cursor:pointer; font-size:.93rem;
    color:var(--sw-mid)!important; transition:all var(--sw-trans); width:100%;
    text-transform:none!important;
}
.sw-wa-skip:hover { border-color:var(--sw-primary); color:var(--sw-primary)!important; }

/* ── THANK YOU SCREEN ─────────────────────────────── */
.sw-ty-wrap { padding:4px 0 8px; }
.sw-ty-hero {
    text-align:center; padding:24px 16px 18px;
    background:linear-gradient(to bottom, rgba(67,160,71,.08), transparent);
    border-radius:var(--sw-radius); margin-bottom:16px;
}
.sw-ty-check { display:flex; justify-content:center; margin-bottom:16px; }
.sw-ty-check svg { width:72px; height:72px; filter:drop-shadow(0 4px 14px rgba(46,125,50,.3)); }
.sw-ty-hero h2 { font-size:1.5rem!important; margin-bottom:8px!important; }
.sw-ty-hero p  { color:var(--sw-mid)!important; margin:0 0 6px; }
.sw-ty-email-msg { font-size:.88rem; }
.sw-ty-email-msg strong { color:var(--sw-dark)!important; }
.sw-ty-cta {
    background:var(--sw-primary); border-radius:var(--sw-radius);
    padding:20px; text-align:center; margin-bottom:10px;
}
.sw-ty-cta p { color:rgba(255,255,255,.92)!important; font-size:.92rem; margin:0 0 12px; font-weight:600; }
.sw-ty-phone {
    display:inline-flex; align-items:center; gap:10px; color:#fff!important;
    text-decoration:none; font-size:1.5rem; font-weight:800;
    background:rgba(255,255,255,.15); border-radius:10px;
    padding:12px 24px; transition:background var(--sw-trans);
}
.sw-ty-phone:hover { background:rgba(255,255,255,.25); }
.sw-ty-phone svg { width:24px; height:24px; stroke:#fff; flex-shrink:0; }
.sw-ty-booking {
    display:block; text-align:center;
    background:var(--sw-dark); color:#fff!important;
    border-radius:var(--sw-radius); padding:15px 20px;
    font-size:.95rem; font-weight:600; text-decoration:none;
    margin-bottom:16px; transition:background var(--sw-trans);
}
.sw-ty-booking:hover { opacity:.85; }
.sw-ty-steps h4 { margin:0 0 14px; }
.sw-ty-step {
    display:flex; align-items:flex-start; gap:12px; margin-bottom:12px;
    font-size:.88rem; color:var(--sw-mid)!important; line-height:1.4;
}
.sw-ty-step svg { flex-shrink:0; }
.sw-ty-step-num {
    width:28px; height:28px; flex-shrink:0; border-radius:50%;
    background:var(--sw-primary); color:#fff!important;
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:.82rem;
}

/* ── PROGRESS BAR ─────────────────────────────────── */
.sw-progress-wrap { margin-top:18px; border-top:1px solid var(--sw-border); padding-top:12px; }
.sw-progress-track { background:var(--sw-border); border-radius:99px; height:7px; overflow:hidden; }
.sw-progress-fill  { height:100%; background:var(--sw-primary); border-radius:99px; transition:width .4s ease; width:0; }
.sw-step-info { font-size:.73rem; color:var(--sw-muted)!important; text-align:center; margin:6px 0 0; }

/* ── ENERGY PRICE ─────────────────────────────────── */
.sw-energy-hint { font-size:.73rem; color:var(--sw-muted)!important; margin-left:4px; }

/* ── HEAR ABOUT ───────────────────────────────────── */
.sw-hear-field { margin-bottom:14px; }

/* ── RESPONSIVE ───────────────────────────────────── */
@media(max-width:580px){
    .sw-screen { padding:18px 14px 14px; }
    .sw-icon-grid { grid-template-columns:repeat(2,1fr); }
    .sw-icon-grid--3 { grid-template-columns:repeat(2,1fr); }
    .sw-mode-grid { grid-template-columns:1fr; }
    .sw-name-row { grid-template-columns:1fr 1fr; }
    .sw-name-row .sw-next-arrow { grid-column:1/-1; width:100%; }
    .sw-field-row { flex-direction:column; }
    .sw-field--narrow { flex:unset; }
    .sw-system-banner { flex-direction:column; }
    .sw-btn-row { flex-wrap:wrap; }
    .sw-btn-row .sw-back-btn { flex:0 0 auto; }
    .sw-btn-row .sw-next-btn, .sw-btn-row .sw-btn-primary { flex:1; min-width:160px; }
    .sw-persona-banner { flex-direction:column; text-align:center; }
}

/* ── FEATURED COST CARD (Cash Purchase) ─────────── */
.sw-cost-card--featured {
    border     : 2px solid var(--sw-primary);
    box-shadow : 0 4px 20px rgba(255,140,0,.15);
}

/* Header: icon left, title right, vertically centered */
.sw-cost-header {
    display    : flex;
    align-items: center;
    gap        : 16px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--sw-border);
}
.sw-cost-icon svg { display: block; }
.sw-cost-header-info h4 {
    margin     : 0 !important;
    font-size  : 1.15rem !important;
    font-weight: 800 !important;
    color      : var(--sw-dark) !important;
}

/* Cost rows */
.sw-cost-rows { display: flex; flex-direction: column; gap: 0; }
.sw-cost-row {
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    padding        : 11px 0;
    border-bottom  : 1px solid var(--sw-border);
    font-size      : .92rem;
}
.sw-cost-row:last-child { border-bottom: none; }
.sw-cost-row span { color: var(--sw-dark) !important; font-weight: 500; }
.sw-cost-row strong { color: var(--sw-dark) !important; font-size: 1rem; font-weight: 700; }
.sw-cost-row--green strong { color: #2E7D32 !important; font-size: 1.05rem; }
.sw-cost-row--total {
    background   : var(--sw-bg);
    margin       : 6px -16px;
    padding      : 12px 16px;
    border-radius: 6px;
    border-bottom: none;
}
.sw-cost-row--total span { font-weight: 700; color: var(--sw-dark) !important; font-size: .95rem; }
.sw-cost-row--total strong { font-size: 1.2rem; color: var(--sw-primary) !important; }

/* ── INCENTIVES FIELD ────────────────────────────── */
.sw-incentives-field { margin-top: 2px; }
.sw-field-hint {
    font-size  : .72rem;
    color      : var(--sw-muted) !important;
    margin-top : 4px;
    display    : block;
    line-height: 1.4;
}