/* ─────────────────────────────────────────────────────────────────────────
 *  Smart Film Depot — /builder light theme (samplekits look-and-feel)
 *  REPLACES the legacy dark glass theme.
 *
 *  Design intent:
 *    - Light samplekits-style body, cards & forms (matches the new homepage).
 *    - The dark <header> is preserved by scoped overrides (it has inline dark
 *      styles which we keep; we just re-assert white text inside <header>).
 *    - All Bootstrap utility classes that pages used for the old dark theme
 *      (text-white, text-white-50, bg-dark, addon-card, busbar-option, etc.)
 *      are remapped here so existing inline markup renders correctly on light.
 *  ───────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    --sk-navy:        #1a1a2e;
    --sk-navy-2:      #16213e;
    --sk-orange:      #ff7801;
    --sk-orange-2:    #ff9333;
    --sk-orange-hover:#ff6500;
    --sk-orange-soft: rgba(255,120,1,0.10);

    --sk-text:        #1e293b;
    --sk-text-strong: #0f172a;
    --sk-muted:       #64748b;
    --sk-muted-2:     #94a3b8;

    --sk-bg:          #f5f7fa;
    --sk-bg-2:        #eef2f7;
    --sk-surface:     #ffffff;
    --sk-surface-alt: #f8fafc;

    --sk-line:        #e2e8f0;
    --sk-line-strong: #cbd5e1;

    --sk-success:     #16a34a;
    --sk-warning:     #d97706;
    --sk-danger:      #dc2626;
    --sk-info:        #0284c7;

    --sk-radius:      14px;
    --sk-radius-lg:   20px;
    --sk-shadow-sm:   0 1px 3px rgba(15,23,42,.06);
    --sk-shadow:      0 4px 18px rgba(15,23,42,.08);
    --sk-shadow-lg:   0 14px 40px rgba(15,23,42,.12);
}

* { box-sizing: border-box; }
html, body { height: auto; margin: 0; padding: 0; }
body {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif !important;
    background: var(--sk-bg) !important;
    color: var(--sk-text) !important;
    line-height: 1.55;
}

/* ── Logo (used in dark header) ────────────────────────────────────────── */
.logo { height: 100px !important; }

/* ── Headings & body text on the light surface ─────────────────────────── */
body :where(h1, h2, h3, h4, h5, h6) { color: var(--sk-text-strong); font-weight: 700; }
body :where(p, label, small, li, td, th, dt, dd) { color: var(--sk-text); }

/* Bootstrap text utility remapping for the LIGHT body.
   The header has its own inline dark bg so we re-assert white text inside
   <header> further down. */
body .text-white     { color: var(--sk-text-strong) !important; }
body .text-white-50  { color: var(--sk-muted) !important; }
body .text-white-100 { color: var(--sk-text) !important; }
body .text-muted     { color: var(--sk-muted) !important; }

body .text-success { color: var(--sk-success) !important; }
body .text-warning { color: var(--sk-warning) !important; }
body .text-danger  { color: var(--sk-danger)  !important; }
body .text-info    { color: var(--sk-info)    !important; }

a { color: var(--sk-orange); text-decoration: none; }
a:hover { color: var(--sk-orange-hover); }

/* ── Form controls ─────────────────────────────────────────────────────── */
.form-control, .form-select {
    background: var(--sk-surface) !important;
    border: 1px solid var(--sk-line) !important;
    color: var(--sk-text) !important;
    border-radius: var(--sk-radius);
    padding: 12px 14px;
    box-shadow: var(--sk-shadow-sm);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.form-control::placeholder, .form-select::placeholder { color: var(--sk-muted-2) !important; }
.form-control:focus, .form-select:focus {
    border-color: var(--sk-orange) !important;
    box-shadow: 0 0 0 3px rgba(255,120,1,0.18) !important;
    background: #fff !important;
    color: var(--sk-text) !important;
    outline: none !important;
}
.form-label { color: var(--sk-text) !important; font-weight: 600; font-size: 0.92rem; }
.form-check-input:checked { background-color: var(--sk-orange); border-color: var(--sk-orange); }
.form-check-label { color: var(--sk-text); }

/* ── Generic CARD (used everywhere) ────────────────────────────────────── */
.card {
    background: var(--sk-surface) !important;
    border: 1px solid var(--sk-line) !important;
    color: var(--sk-text) !important;
    border-radius: var(--sk-radius-lg);
    box-shadow: var(--sk-shadow);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    backdrop-filter: none;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sk-shadow-lg); }
.card-body { color: var(--sk-text); }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
    border-radius: 12px;
    font-weight: 600;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn-brand {
    background: linear-gradient(45deg, var(--sk-orange), var(--sk-orange-2)) !important;
    color: #fff !important;
    border: none !important;
    padding: 14px 32px;
    border-radius: 50px;
    font-weight: 700;
    box-shadow: 0 8px 22px rgba(255,120,1,0.30);
}
.btn-brand:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(255,120,1,0.45); color:#fff !important; }

/* The dark theme abused .btn-outline-light for the secondary action.
   On the light theme, recolor it to a neutral outlined button. */
.btn-outline-light {
    background: transparent !important;
    color: var(--sk-text) !important;
    border: 1px solid var(--sk-line-strong) !important;
}
.btn-outline-light:hover {
    background: var(--sk-surface-alt) !important;
    color: var(--sk-text-strong) !important;
    border-color: var(--sk-orange) !important;
}

.btn-outline-warning {
    color: var(--sk-warning) !important;
    border: 1px solid var(--sk-warning) !important;
    background: transparent !important;
}
.btn-outline-warning:hover {
    background: var(--sk-warning) !important;
    color: #fff !important;
}

/* Bootstrap badge classes used by film cards */
.bg-dark, .bg-secondary {
    background: var(--sk-surface-alt) !important;
    color: var(--sk-text) !important;
}

/* The `.recommended-badge` ribbon used on cards */
.recommended-badge {
    background: linear-gradient(45deg, #59afff, #7acaff);
    color: #001b3a !important;
    font-weight: 700;
    font-size: 0.85rem !important;
    padding: 5px 18px !important;
    border-radius: 50px;
    z-index: 10;
}

/* ── Price (gradient text) ─────────────────────────────────────────────── */
.price {
    font-size: 4.2rem;
    font-weight: 800;
    background: linear-gradient(45deg, var(--sk-orange), #ffb74a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* ── Progress bar ──────────────────────────────────────────────────────── */
.progress { height: 6px; background: var(--sk-line); border-radius: 3px; }
.progress-bar {
    background: linear-gradient(90deg, var(--sk-orange), #ffa940);
    box-shadow: 0 0 12px rgba(255,120,1,0.35);
}

/* ── Film-tier card on the homepage ────────────────────────────────────── */
.film-card.selected {
    border: 2px solid var(--sk-orange) !important;
    box-shadow: 0 0 30px rgba(255,120,1,0.30) !important;
}

/* ════════════════════════════════════════════════════════════════════════
 *  COMPONENT REMAPS — these classes are defined in per-page <style> blocks
 *  with hard-coded dark colours. We override with !important so the new
 *  light theme wins regardless of cascade order.
 *  ════════════════════════════════════════════════════════════════════════ */

/* Add-on choice card (nano-coating, uv-block, etc.) */
.addon-card {
    background: var(--sk-surface) !important;
    border: 2px solid var(--sk-line) !important;
    color: var(--sk-text) !important;
    border-radius: 24px;
    padding: 2.5rem;
    box-shadow: var(--sk-shadow);
    transition: border-color .3s ease, box-shadow .3s ease;
}
.addon-card.selected {
    border-color: var(--sk-orange) !important;
    box-shadow: 0 0 30px rgba(255,120,1,0.18) !important;
}
.addon-card .text-white,
.addon-card .text-white-50,
.addon-card p,
.addon-card h1,
.addon-card h2,
.addon-card h3,
.addon-card h4,
.addon-card h5,
.addon-card h6 {
    color: var(--sk-text) !important;
}
.addon-card h2 { color: var(--sk-text-strong) !important; }
.addon-card .text-white-50 { color: var(--sk-muted) !important; }

/* "No thanks" — high-contrast so it stays visible on light addon cards */
.addon-btn.no {
    background: #0f172a !important;
    color: #ffffff !important;
    border: 2px solid #0f172a !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.28) !important;
}
.addon-btn.no:hover {
    background: #1e293b !important;
    border-color: #1e293b !important;
    color: #ffffff !important;
}
.addon-btn.no.active {
    background: #020617 !important;
    color: #ffffff !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.35), 0 6px 20px rgba(15, 23, 42, 0.35) !important;
}

/* Busbar option card on electrical-connections.php */
.busbar-option {
    background: var(--sk-surface) !important;
    border: 2px solid var(--sk-line) !important;
    color: var(--sk-text) !important;
    border-radius: 16px;
    box-shadow: var(--sk-shadow-sm);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.busbar-option:hover { transform: translateY(-2px); box-shadow: var(--sk-shadow); }
.busbar-option.active {
    border-color: var(--sk-orange) !important;
    box-shadow: 0 0 0 3px rgba(255,120,1,0.18) !important;
}
.busbar-option.disabled-option {
    background: var(--sk-bg-2) !important;
    opacity: 0.6;
    cursor: not-allowed;
}
.busbar-option .text-white,
.busbar-option .text-white-50 { color: var(--sk-text) !important; }
.busbar-option .text-white-50 { color: var(--sk-muted) !important; }

/* Power supply card (power-supply.php) */
.power-card {
    background: var(--sk-surface) !important;
    border: 2px solid var(--sk-line) !important;
    color: var(--sk-text) !important;
    border-radius: 16px;
    box-shadow: var(--sk-shadow-sm);
}
.power-card .text-white,
.power-card .text-white-50 { color: var(--sk-text) !important; }
.power-card .text-white-50 { color: var(--sk-muted) !important; }

/* Wire-location panel */
.wire-panel-v2 {
    background: var(--sk-surface) !important;
    border: 1px solid var(--sk-line) !important;
    border-radius: 14px;
    box-shadow: var(--sk-shadow-sm);
}

/* Final review section */
.review-section {
    background: var(--sk-surface) !important;
    border: 1px solid var(--sk-line) !important;
    color: var(--sk-text) !important;
    border-radius: 14px;
    box-shadow: var(--sk-shadow-sm);
}
.review-section .text-white,
.review-section .text-white-50,
.review-row .label,
.review-row .value { color: var(--sk-text) !important; }
.review-row .label { color: var(--sk-muted) !important; }

.grand-total-box {
    background: linear-gradient(135deg, var(--sk-surface) 0%, #fff5e6 100%) !important;
    border: 2px solid var(--sk-orange) !important;
    color: var(--sk-text-strong) !important;
}

/* Pricing compare strip wrapper */
.pricing-compare-strip-wrapper {
    background: var(--sk-surface);
    border-bottom: 1px solid var(--sk-line);
}

/* ── Per-page card classes (defined inline in step pages, no !important) ── */

/* power-supply.php */
.mode-card {
    background: var(--sk-surface) !important;
    border: 2px solid var(--sk-line) !important;
    color: var(--sk-text) !important;
    border-radius: 20px;
    padding: 2rem 1.5rem;
    box-shadow: var(--sk-shadow-sm);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.mode-card:hover {
    border-color: var(--sk-orange) !important;
    background: #fff7ed !important;
    transform: translateY(-2px);
}
.mode-card.active {
    border-color: var(--sk-orange) !important;
    background: #fff7ed !important;
    box-shadow: 0 0 0 3px rgba(255,120,1,0.18) !important;
}
.panel-pool, .zone-target, .zone-summary {
    background: var(--sk-surface-alt) !important;
    border: 2px dashed var(--sk-line-strong) !important;
    color: var(--sk-text) !important;
    border-radius: 16px;
}
.zone-target.drag-over {
    border-color: var(--sk-orange) !important;
    background: #fff7ed !important;
    border-style: solid !important;
}
.zone-summary {
    border-style: solid !important;
    border-color: var(--sk-line) !important;
    background: var(--sk-surface) !important;
    box-shadow: var(--sk-shadow-sm);
}
.panel-chip {
    background: #fff7ed !important;
    border: 1.5px solid #fed7aa !important;
    color: var(--sk-text-strong) !important;
}
.panel-chip:hover { background: #ffedd5 !important; border-color: var(--sk-orange) !important; }
.panel-chip.selected { background: #ffedd5 !important; border-color: var(--sk-orange) !important; }
.panel-preview-chip {
    background: var(--sk-surface-alt) !important;
    border: 1px solid var(--sk-line) !important;
    color: var(--sk-text) !important;
}
.zone-count-btn {
    background: var(--sk-surface) !important;
    border: 2px solid var(--sk-line-strong) !important;
    color: var(--sk-text-strong) !important;
}
.zone-count-btn:hover, .zone-count-btn.active {
    background: #fff7ed !important;
    border-color: var(--sk-orange) !important;
    color: var(--sk-orange) !important;
}
.add-zone-btn {
    background: var(--sk-surface-alt) !important;
    border: 2px dashed var(--sk-line-strong) !important;
    color: var(--sk-muted) !important;
}
.add-zone-btn:hover {
    background: #fff7ed !important;
    border-color: var(--sk-orange) !important;
    color: var(--sk-orange) !important;
}
.zone-summary-chip { background: #fff7ed !important; border: 1px solid #fed7aa !important; color: var(--sk-text) !important; }
.chip-qty { background: var(--sk-orange) !important; color: #fff !important; }
.chip-remove, .zone-remove-btn { background: #fef2f2 !important; color: var(--sk-danger) !important; border: 1px solid #fecaca !important; }

/* builder.php — main panel-builder card */
.panel-card, .panel-card.card {
    background: var(--sk-surface) !important;
    border: 1px solid var(--sk-line) !important;
    color: var(--sk-text) !important;
    backdrop-filter: none !important;
    box-shadow: var(--sk-shadow);
}

/* index.php tier cards / badges */
.tier-card {
    background: var(--sk-surface) !important;
    border: 1px solid var(--sk-line) !important;
    color: var(--sk-text) !important;
    box-shadow: var(--sk-shadow);
}
.tier-card.tier-recommended {
    border: 2px solid var(--sk-orange) !important;
    box-shadow: 0 0 30px rgba(255,120,1,0.18) !important;
}
.etl-badge-yes {
    background: #ecfdf5 !important; color: #166534 !important; border: 1px solid #86efac !important;
}
.etl-badge-no {
    background: #fef2f2 !important; color: #991b1b !important; border: 1px solid #fecaca !important;
}
.etl-badge-builder {
    background: #fffbeb !important; color: #b45309 !important; border: 1px solid #fde68a !important;
}
.tier-badge-extend {
    background: #fff7ed !important; color: #c2410c !important; border: 1px solid #fed7aa !important;
}

/* compliance.php cards */
.compliance-card, .haze-card, .warranty-card {
    background: var(--sk-surface) !important;
    border: 2px solid var(--sk-line) !important;
    color: var(--sk-text) !important;
    border-radius: 20px;
    box-shadow: var(--sk-shadow);
}
.compliance-card.disabled, .haze-card.disabled, .warranty-card.disabled {
    background: var(--sk-bg-2) !important;
    opacity: 0.7;
    color: var(--sk-muted) !important;
}
.compliance-card.selected, .haze-card.selected, .warranty-card.selected {
    border-color: var(--sk-orange) !important;
    box-shadow: 0 0 0 3px rgba(255,120,1,0.18) !important;
}

/* wire-location.php */
.feature-item {
    background: var(--sk-surface) !important;
    border: 1px solid var(--sk-line) !important;
    color: var(--sk-text) !important;
    border-radius: 12px;
}
.feature-item:hover { background: var(--sk-surface-alt) !important; }
.upgrade-card {
    background: var(--sk-surface) !important;
    border: 1px solid var(--sk-line) !important;
    color: var(--sk-text) !important;
    box-shadow: var(--sk-shadow);
}
.pm-upsell-card {
    background: linear-gradient(135deg, #fff 0%, #fff7ed 100%) !important;
    border: 2px solid var(--sk-orange) !important;
    color: var(--sk-text) !important;
    border-radius: 14px;
}
.pm-btn {
    background: var(--sk-surface) !important;
    border: 2px solid var(--sk-line-strong) !important;
    color: var(--sk-text) !important;
}
.pm-btn.yes.active { background: #ecfdf5 !important; border-color: var(--sk-success) !important; color: var(--sk-success) !important; }
.pm-btn.no.active  { background: #fef2f2 !important; border-color: var(--sk-danger)  !important; color: var(--sk-danger)  !important; }

/* checkout.php tiles */
.pay-select {
    background: var(--sk-surface) !important;
    border: 2px solid var(--sk-line) !important;
    color: var(--sk-text) !important;
    border-radius: 12px;
}
.pay-select.active { border-color: var(--sk-orange) !important; background: #fff7ed !important; }
.expedited-option {
    background: var(--sk-surface) !important;
    border: 2px solid var(--sk-line) !important;
    color: var(--sk-text) !important;
}
.expedited-option.selected { border-color: var(--sk-orange) !important; background: #fff7ed !important; }
.genuine-feature-card {
    background: var(--sk-surface) !important;
    border: 1px solid var(--sk-line) !important;
    color: var(--sk-text) !important;
    box-shadow: var(--sk-shadow-sm);
}

/* success.php */
.btn-home {
    background: var(--sk-orange) !important;
    color: #fff !important;
    border-radius: 50px;
    font-weight: 700;
    padding: 0.6rem 1.4rem;
}
.success-card {
    background: var(--sk-surface) !important;
    border: 1px solid var(--sk-line) !important;
    color: var(--sk-text) !important;
    box-shadow: var(--sk-shadow);
}

/* potm card on the homepage */
.potm-card {
    background: var(--sk-surface) !important;
    border: 1px solid var(--sk-line) !important;
    color: var(--sk-text) !important;
    box-shadow: var(--sk-shadow);
}

/* film-visual badges in inc/film-visual.php — leave inline, just ensure
   surrounding panels read as light. The semi-transparent orange tints
   render fine over a light body. */

/* generic-confirm.php */
.confirm-card {
    background: var(--sk-surface) !important;
    border: 1px solid var(--sk-line) !important;
    color: var(--sk-text) !important;
    box-shadow: var(--sk-shadow);
}

/* electrical-connections.php */
.electrical-card {
    background: var(--sk-surface) !important;
    border: 1px solid var(--sk-line) !important;
    color: var(--sk-text) !important;
}

/* ════════════════════════════════════════════════════════════════════════
 *  HEADER PROTECTION — header.php has inline dark bg styles. Re-assert
 *  white text inside <header> so the body's light text rules don't bleed
 *  into the header (which is intentionally dark per user request).
 *  ════════════════════════════════════════════════════════════════════════ */
header {
    color: #e8e8ea;
}
header :where(h1, h2, h3, h4, h5, h6, p, label, small, span, a, div) {
    color: inherit;
}
header .text-white     { color: #fff !important; }
header .text-white-50  { color: rgba(255,255,255,0.55) !important; }
header .text-white-100 { color: rgba(255,255,255,0.85) !important; }
header .text-muted     { color: rgba(255,255,255,0.55) !important; }

header a, header a:hover { color: var(--sk-orange) !important; }

/* New sk-header CTA buttons — keep their site.css colors inside <header> */
header a.sfd-btn-orange,
header a.sfd-btn-orange:hover,
header a.sfd-btn-orange:focus,
header a.sfd-btn-ghost,
header a.sfd-btn-ghost:hover,
header a.sfd-btn-ghost:focus { color: #fff !important; }
header a.sfd-btn-ghost-green,
header a.sfd-btn-ghost-green:hover,
header a.sfd-btn-ghost-green:focus { color: #d6f5d8 !important; }
header a.sfd-btn-ghost-green:hover,
header a.sfd-btn-ghost-green:focus { color: #fff !important; }
header a.sk-logo-text-link,
header a.sk-logo-text-link:hover,
header a.sk-logo-badge-link,
header a.sk-logo-badge-link:hover { color: #fff !important; }

/* The contact-us / get-a-quote modal lives in the body but has an inline
   dark background. Keep its dark look (matches header) but normalize text. */
#contactSFDModal .modal-content,
#contactSFDModal label,
#contactSFDModal p,
#contactSFDModal h1,
#contactSFDModal h2,
#contactSFDModal h3,
#contactSFDModal h4,
#contactSFDModal h5 {
    color: #fff !important;
}
#contactSFDModal .modal-content {
    background: #1a1a22 !important;
    border: 1px solid rgba(255,120,1,0.30) !important;
}
#contactSFDModal .form-control {
    background: #0f0f14 !important;
    border: 1px solid rgba(255,120,1,0.25) !important;
    color: #fff !important;
}
#contactSFDModal .form-control::placeholder { color: rgba(255,255,255,0.45) !important; }

/* Other "kept-dark" modals: why ETL, busbar info, dealer map — keep
   their inline dark backgrounds and re-assert white text inside them
   so the light body overrides on .text-white do not bleed in. */
#whyEtlModal .modal-content,
#busbarInfoModal .modal-content,
#dealerMapModal .modal-content { color: #fff; }
#whyEtlModal .text-white,
#busbarInfoModal .text-white,
#dealerMapModal .text-white { color: #fff !important; }
#whyEtlModal .text-white-50,
#busbarInfoModal .text-white-50,
#dealerMapModal .text-white-50 { color: rgba(255,255,255,0.65) !important; }
#whyEtlModal .alert.bg-dark { background: rgba(0,0,0,0.45) !important; color: #fff !important; }

/* Manufacturing-time banner & promo strip use their own inline <style>
   in header.php (now light-themed). No global override needed here. */

/* ── Modal default (light) ─────────────────────────────────────────────── */
.modal-content {
    background: var(--sk-surface);
    color: var(--sk-text);
    border: 1px solid var(--sk-line);
    border-radius: 16px;
    box-shadow: var(--sk-shadow-lg);
}
.modal-header { border-bottom: 1px solid var(--sk-line); }
.modal-footer { border-top:    1px solid var(--sk-line); }

/* ── Tables (used in admin-ish parts of the builder) ───────────────────── */
.table { color: var(--sk-text); }
.table thead { color: var(--sk-text); background: var(--sk-bg-2); }
.table-hover tbody tr:hover { background: var(--sk-surface-alt); }

/* ── Alerts ────────────────────────────────────────────────────────────── */
.alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.alert-info    { background: #eff6ff; border-color: #bfdbfe; color: #1e3a8a; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.alert-danger  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }

/* ── Code/inline borders that used dark-only colors ────────────────────── */
hr.border-secondary { border-color: var(--sk-line) !important; }

/* ════════════════════════════════════════════════════════════════════════
 *  RESPONSIVE
 *  ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .logo { height: 44px !important; }
    .price { font-size: 2.4rem; }
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.25rem; }
    h3 { font-size: 1.1rem; }
    h4 { font-size: 1rem; }
    .lead { font-size: 0.95rem; }
    .btn-brand { padding: 10px 20px; font-size: 0.9rem; }
    .btn-lg { padding: 0.55rem 1.2rem !important; font-size: 0.9rem !important; }
    .card { border-radius: 14px; }
    .card:hover { transform: none; }
    .btn-brand:hover { transform: none; }
    .form-control, .form-select { padding: 10px !important; font-size: 0.9rem; border-radius: 10px; }
    .container { padding-left: 12px; padding-right: 12px; }
    .addon-page { padding: 0 4px; }
    .addon-card { padding: 1.25rem !important; border-radius: 16px; }
    .addon-btn { padding: 0.7rem 1.2rem; font-size: 0.95rem; }
    .addon-toggle { flex-direction: column; gap: 0.6rem; }
    .addon-price { font-size: 1.4rem; }
    .review-section { padding: 1rem; border-radius: 12px; }
    .review-row .label { font-size: 0.8rem; }
    .review-row .value, .review-row .price { font-size: 0.85rem; }
    .grand-total-box { padding: 0.8rem 1rem; border-radius: 12px; }
    .power-card { padding: 1.25rem !important; border-radius: 14px; }
    .power-image-thumb { max-width: 70px; height: 70px; border-radius: 8px; }
    .busbar-option { padding: 1.25rem !important; border-radius: 16px; }
    .wire-panel-v2 { padding: 16px; border-radius: 12px; }
    .glass-rep { height: 180px; }
    .zone-label { font-size: 0.85rem; letter-spacing: 1px; }
    .zone-desc { font-size: 0.65rem; }
    .zone-top, .zone-bottom { height: 50px; left: 10%; right: 10%; }
    .zone-left, .zone-right { width: 60px; height: 80px; }
    .selection-pill { padding: 6px 14px; font-size: 0.85rem; }
    .upgrade-card { padding: 1.25rem; border-radius: 18px; }
    .feature-item { padding: 0.8rem; border-radius: 12px; }
    .feature-item:hover { transform: none; }
    .pm-upsell-card { padding: 16px; border-radius: 14px; }
    .pricing-compare-strip { padding: 0.75rem !important; }
    .pricing-compare-strip .fs-3 { font-size: 1.25rem !important; }
    .potm-card { padding: 1.25rem !important; }
    .modal-content { margin: 0.5rem; border-radius: 16px; }
    .modal-body { padding: 1.5rem; }

    .mobile-container-tight { padding-top: 0.5rem !important; padding-bottom: 0.25rem !important; }
    .container.mt-4 { margin-top: 0.75rem !important; }
    .builder-info-strip { display: none !important; }
    .builder-top-actions { display: none !important; }
    .builder-bottom-actions { display: flex !important; }
}

@media (max-width: 575.98px) {
    .price { font-size: 2rem; }
    .logo { height: 36px !important; }
    .btn-lg { padding: 0.5rem 1rem !important; font-size: 0.85rem !important; }
    .addon-card { padding: 1rem !important; }
    .glass-rep { height: 160px; }
    .zone-top, .zone-bottom { height: 42px; }
    .zone-left, .zone-right { width: 50px; height: 65px; }
    .zone-label { font-size: 0.7rem; }
    .zone-desc { display: none; }
}