:root {
    /* Palette */
    --bg-color: #f4f4f4;
    --panel-bg: #ffffff;
    --text-primary: #171a20;
    --text-secondary: #5c5e62;
    --accent-blue: #E21E26;
    --accent-hover: #B9191F;
    --accent-black: #000000;
    --border-color: #d0d1d2;

    /* Base Widths (Reduced by ~10% for < 2560px default) */
    --sidebar-width: 205px;
    /* Orig: 228px */
    --config-width-std: 385px;
    /* Orig: 460px -> 414px -> 373px */
    --config-width-wide: 356px;
    /* Orig: 440px -> 396px -> 356px */

    --footer-height: 66px;
    --font-family: 'Inter', sans-serif;

    /* Mobile Layout Vars - Round 6 Baseline */
    --mobile-video-height: 185px;
}

/* Restore Original Widths for Large Screens (Targeting 2560px with scrollbar tolerance) */
@media (min-width: 2000px) {
    :root {
        --sidebar-width: 228px;
        --config-width-std: 480px;
        --config-width-wide: 460px;
    }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-primary);
    min-height: 100vh;
    /* Mobile: Global scroll */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

@media (min-width: 1024px) {
    body {
        height: 100vh;
        overflow: hidden;
    }
}

/* --- HEADER --- */
/* --- HEADER --- */
.global-header {
    height: 56px;
    /* Mobile View */
    background-color: var(--panel-bg);
    border-bottom: none;
    display: flex;
    align-items: center;
    padding: 0 20px;
    flex-shrink: 0;
    z-index: 100;
}

@media (min-width: 1024px) {
    .global-header {
        height: 60px;
        /* Desktop View */
    }
}

/* --- LAYOUT --- */
.configurator-container {
    display: flex;
    flex: 1;
    /* Mobile: Auto height for global scroll */
    height: auto;
    flex-direction: column;
    position: relative;
}

@media (min-width: 1024px) {
    .configurator-container {
        flex-direction: row;
        height: calc(100vh - 60px);
        /* Subtract header height */
    }
}

/* ------------------------------------------- */
/* --- 3. SIDEBAR NAVIGATION (RIGHT COLUMN) --- */
/* ------------------------------------------- */
.sidebar-nav {
    background: var(--panel-bg);
    /* Mobile: Order 2 (Middle) */
    order: 2;
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    white-space: nowrap;
    position: sticky;
    /* Mobile: Sticky below video */
    top: var(--mobile-video-height);
    z-index: 101;
    border-bottom: none;
    padding: 0 10px;
    align-items: center;
    height: 52px;
    -webkit-overflow-scrolling: touch;
    box-shadow: none;

    /* Hide scrollbar */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

.sidebar-nav::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

/* Tablet: Adjust sticky top to match fixed video height */
@media (min-width: 600px) and (max-width: 1023px) {
    .sidebar-nav {
        top: 330px;
        /* V16: Fixed gap (Removed header offset) */
    }
}

@media (min-width: 1024px) {
    .sidebar-nav {
        display: flex;
        flex-direction: column;
        width: var(--sidebar-width);
        flex-shrink: 0;
        position: sticky;
        top: 0;
        height: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        z-index: 10;
        padding: 40px 20px;
        order: 3;
        /* Desktop: Right column */
        border-right: none;
        border-left: 1px solid var(--border-color);
        border-bottom: none;
        box-shadow: none;
        align-items: stretch;
    }
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    margin-right: 5px;
    border-radius: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    font-family: 'Cormorant Garamond', serif;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

@media (min-width: 1024px) {
    .nav-item {
        margin-bottom: 8px;
        margin-right: 0;
    }

    .nav-item.active::before {
        height: 100%;
        width: 4px;
        top: 0;
        bottom: auto;
        border-radius: 0 2px 2px 0;
    }
}

.nav-item:hover {
    background-color: rgba(0, 0, 0, 0.04);
    color: var(--text-primary);
}

.nav-item.active {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--accent-black);
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background-color: var(--accent-black);
    border-radius: 3px 3px 0 0;
    top: auto;
}

.nav-icon {
    margin-right: 12px;
    width: 20px;
    height: 20px;
    fill: currentColor;
    opacity: 0.7;
    flex-shrink: 0;
}

.nav-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.nav-item.active .nav-icon {
    opacity: 1;
}

/* Back Link (Hidden per revert, but keeping class if needed logic remains) */
.back-link {
    display: flex;
    align-items: center;
    padding: 12px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
    border-radius: 6px;
    transition: background 0.2s;
}

.back-link:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

@media (min-width: 1024px) {
    .back-link {
        display: none;
    }
}

/* ---------------------------------------------------- */
/* --- 2. CONTROLS PANEL (CONFIGURATOR - MIDDLE COLUMN) --- */
/* ---------------------------------------------------- */
.controls-panel {
    flex: 1;
    background-color: var(--panel-bg);
    /* Mobile: Visible overflow for global scroll */
    overflow: visible;
    height: auto;
    padding: 40px 20px 120px 20px;
    /* Mobile: Order 3 (Bottom) */
    order: 3;
    scroll-behavior: smooth;
    border-right: 1px solid var(--border-color);
}

@media (min-width: 1024px) {
    .controls-panel {
        /* Desktop: Scrollable panel */
        overflow-y: auto;
        order: 2;
        flex: 0 0 var(--config-width-std);
        width: var(--config-width-std);
        padding: 60px 40px 120px 30px;
        height: 100%;

        border-right: none;
        border-left: none;
    }
}

@media (min-width: 1436px) {
    .controls-panel {
        flex: 0 0 var(--config-width-wide);
        width: var(--config-width-wide);
    }
}

.controls-wrapper {
    width: 100%;
    margin: 0 auto;
}

/* ------------------------------------------------ */
/* --- 1. VISUAL PANEL (VIDEO - LEFT COLUMN) --- */
/* ------------------------------------------------ */
.visual-panel {
    flex: none;
    /* Prevent expansion on mobile */
    background-color: var(--panel-bg);
    padding: 0;
    /* Full bleed on mobile */
    display: flex;
    justify-content: center;
    align-items: center;
    position: sticky;
    /* Mobile: Sticky top, below header */
    top: 0;
    z-index: 102;
    /* Mobile: Order 1 (Top) */
    order: 1;
    /* Mobile: Fixed height */
    height: var(--mobile-video-height);
    min-height: var(--mobile-video-height);
    /* aspect-ratio removed for fixed height */
    overflow: hidden;
}

.visual-panel-content {
    width: 100%;
    height: 100%;
    /* Ensure full height on mobile */
    /* On desktop this is overridden to be auto/flex/sticky */
}

/* Tablet: Increase video height */
@media (min-width: 600px) and (max-width: 1023px) {
    .visual-panel {
        height: 330px;
        min-height: 330px;
    }
}

@media (min-width: 1024px) {
    .visual-panel {
        order: 1;
        flex: 1;
        height: 100%;
        top: 0;
        border-right: none;
        padding: 40px;
        /* Restore padding on desktop */
        overflow: visible;
    }

    .visual-panel-content {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.media-placeholder {
    width: 100%;
    /* max-width removed for mobile full width */
    height: 100%;
    aspect-ratio: auto;
    background-color: #e0e0e0;
    border-radius: 0;
    /* Full square on mobile */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #888;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    /* Mobile shadow */
    overflow: hidden;
    /* Ensure video corners are clipped on desktop */
}

@media (max-width: 1023px) {
    .media-placeholder {
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
}

.visual-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.01);
    /* Hide potential edge artifacts */
    object-position: top center;
    /* Anchor to top to prevent cropping top content */
    transition: opacity 0.5s ease;
}

.visual-video.fade-out {
    opacity: 0;
}

@media (min-width: 1024px) {
    .media-placeholder {
        aspect-ratio: 16 / 9;
        height: auto;
        border-radius: 12px;
        /* Restore radius */
        max-width: 1200px;
        border: none;
        /* Removed border per user request */
        box-shadow: none;
        /* Removed shadow per user request */
        background-color: transparent !important;
        /* Prevent sub-pixel bleeding */
    }
}

@media (min-width: 2560px) {
    .media-placeholder {
        max-width: 1440px;
    }
}

.media-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 5px;
    opacity: 0.5;
}

@media (min-width: 1024px) {
    .media-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 10px;
    }
}

/* ------------------------------------------- */
/* --- TYPOGRAPHY & CARDS (STYLING) --- */
/* ------------------------------------------- */
h1.main-title {
    font-size: 32px;
    /* Increased slightly for Cormorant */
    font-weight: 600;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    margin-bottom: 5px;
}

p.subtitle {
    color: var(--text-secondary);
    margin-bottom: 40px;
    font-size: 18px;
    /* Slightly larger for Cormorant */
    line-height: 1.5;
    font-family: 'Cormorant Garamond', serif;
}

.step-section {
    margin-bottom: 60px;
    scroll-margin-top: 60px;
}

.order-summary-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 10px;
    font-family: var(--font-family);
    display: flex;
    align-items: center;
    position: relative;
    color: var(--text-primary);
}

.step-title {
    font-size: 24px;
    font-weight: 600;
    font-family: 'Cormorant Garamond', serif;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    /* Contains the laser beam */
    transition: color 0.3s ease;
}

.step-section.section-active .step-title {
    color: var(--accent-blue);
    border-bottom-color: transparent;
    /* We replace the border with our animated line */
}

/* Active Base Line (Solid Blue) */
/* Active Base Line (Solid Blue) */
.step-section.section-active .step-title::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    /* Thicker line */
    background-color: var(--accent-blue);
    animation: lineExpand 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    z-index: 1;
}

/* Laser Beam (Moving Shine) */
.step-section.section-active .step-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -100%;
    width: 50%;
    height: 2px;
    /* Thicker laser */
    /* Intense White Core with Red Edges */
    background: linear-gradient(90deg, transparent, rgba(226, 30, 38, 0.5), #ffffff, rgba(226, 30, 38, 0.5), transparent);
    z-index: 2;
    animation: laserPass 2.5s cubic-bezier(0.4, 0.0, 0.2, 1) infinite;
    mix-blend-mode: normal;
    /* Sit on top to be extra bright */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 5px var(--accent-blue);
    /* Strong Glow */
}

@keyframes lineExpand {
    from {
        transform: scaleX(0);
        transform-origin: left;
    }

    to {
        transform: scaleX(1);
        transform-origin: left;
    }
}

@keyframes laserPass {
    0% {
        left: -60%;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    60% {
        left: 120%;
        opacity: 0;
    }

    100% {
        left: 120%;
        opacity: 0;
    }
}

/* Info button in title */
.title-info-btn {
    width: 25px;
    height: 25px;
    border-radius: 0;
    background: transparent;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    margin-left: 10px;
    transition: all 0.2s;
}

.title-info-btn:hover {
    background: transparent;
    color: var(--text-secondary);
}

.options-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

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

    /* Force Base Package to be full width (1 column) */
    #section-base .options-grid {
        grid-template-columns: 1fr;
    }
}

/* V18: Compact Buttons & Grid for Tablet (600px - 1023px) - Forced Priority */
@media (min-width: 600px) and (max-width: 1023px) {
    .options-grid {
        gap: 8px !important;
    }

    /* Standard Cards (List Style) */
    .option-card {
        padding: 8px 10px !important;
        padding-right: 45px !important;
        /* Fix Price Overlap */
        min-height: 60px !important;
    }

    /* Grid Cards (Business Type) */
    .option-card-grid {
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
        padding: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
    }

    .option-card-grid .grid-icon svg,
    .option-card-grid .grid-icon i {
        width: 24px !important;
        height: 24px !important;
        font-size: 24px !important;
    }

    .option-card-grid .grid-title {
        font-size: 14px !important;
        margin-top: 4px !important;
        /* Add gap between icon and title */
    }

    /* V19: Remove invisible spacer to fix vertical centering */
    .option-card-grid .grid-status {
        display: none !important;
    }

    /* Only show if it has content (requires :not(:empty) but text usually injected. 
       Actually, for Business Type, current logic creates it empty. 
       Safe to hide for visual polish on tablet if 'Not Available' isn't critical or handled otherwise via opacity).
       Let's stick to display: none for now as it solves the immediate "too high" aesthetic issue.
    */

    /* Common Text Adjustments */
    .option-title {
        font-size: 13.5px !important;
        margin-bottom: 2px !important;
    }

    .option-desc {
        font-size: 11px !important;
        margin-top: 2px !important;
        line-height: 1.3 !important;
    }

    /* Compact Checkmark/Info */
    .option-card.selected::after,
    .info-btn {
        position: absolute !important;
        /* V22 fix: Ensure positioning works */
        top: 8px !important;
        right: 6px !important;
        width: 16px !important;
        height: 16px !important;
        font-size: 9px !important;
        z-index: 5000 !important;
        /* V22: Fix Info Button Clickability */
    }

    /* Ensure Checkmark is lower than info-btn */
    .option-card.selected::after {
        z-index: 10 !important;
    }
}

.option-card {
    border: 1px solid var(--border-color);
    /* Standardized lighter border */
    border-radius: 3px;
    padding: 16px 16px 16px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    background: white;
    /* Round 6 Flex Layout */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    padding-right: 45px;
    min-width: 0;
}

@media (hover: hover) {
    .option-card:hover {
        border-color: #a0a0a0;
    }
}

.option-card.selected {
    border-color: var(--accent-black);
    background-color: #f9f9f9;
}

/* Checkmark (Default for cards without Info Button) */
.option-card.selected::after {
    content: '✓';
    position: absolute;
    top: 16px;
    right: 12px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-black);
    border: 1px solid var(--accent-black);
    color: white;
    border-radius: 0;
    font-weight: bold;
    font-size: 11px;
    z-index: 10;
}

/* If card has an info button, hide the default checkmark so the button can become the checkmark */
.option-card.selected:has(.info-btn)::after {
    display: none;
}

/* Info Icon Styles */
.info-btn {
    position: absolute;
    top: 16px;
    right: 12px;
    width: 22px;
    height: 22px;
    border-radius: 0;
    background: #f0f0f0;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    font-family: serif;
    border: 1px solid #ddd;
    cursor: pointer;
    z-index: 5;
    transition: all 0.2s;
}

.info-btn:hover {
    background: var(--accent-black);
    color: white;
    border-color: var(--accent-black);
}

.info-icon-animate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #f0f0f0;
    border: 1px solid #ddd;
    color: #666;
    font-size: 11px;
    font-weight: bold;
    font-family: serif;
    margin: 0 2px;
    vertical-align: middle;
    border-radius: 0;
    animation: fadeGrayBlack 3s infinite alternate ease-in-out;
}

@keyframes fadeGrayBlack {
    0% {
        background-color: #f0f0f0;
        color: #666;
        border-color: #ddd;
    }

    100% {
        background-color: #000000;
        color: #ffffff;
        border-color: #000000;
    }
}

/* When selected, transform Info Button into Checkmark (but keep onclick functionality) */
.option-card.selected .info-btn {
    background-color: var(--accent-black);
    border-color: var(--accent-black);
    color: transparent;
    /* Hide 'i' text */
    position: absolute;
    /* Keep pos */
}

.option-card.selected .info-btn::after {
    content: '✓';
    color: white;
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: sans-serif;
}

.option-title {
    font-weight: 400;
    font-size: 13.5px;
    margin-bottom: 4px;
    margin-right: 10px;
}

.option-price {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.option-desc {
    font-size: 11px;
    /* Slight bump for readability? Or keep 12? user said "crampy" */
    color: #666;
    /* Slightly darker for contrast */
    margin-top: 8px;
    /* Breathing room */
    line-height: 1.6;
    /* Better leading */
    width: 100%;
}

.number-input-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--border-color);
    padding: 15px;
    border-radius: 0;
    margin-bottom: 15px;
}

.qty-btn {
    background: none;
    border: 1px solid var(--border-color);
    width: 32px;
    height: 32px;
    border-radius: 0;
    cursor: pointer;
    font-size: 18px;
    color: var(--accent-black);
    display: flex;
    justify-content: center;
    align-items: center;
}

.qty-val {
    font-weight: 600;
    width: 40px;
    text-align: center;
}

/* ---------------------------------------------------- */
/* --- FOOTER & INVOICE DRAWER (BELOW CONFIGURATOR) --- */
/* ---------------------------------------------------- */
.footer-container {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 200;
    transition: right 0.3s ease, width 0.3s ease, transform 0.3s ease;
}

@media (min-width: 1024px) {
    .footer-container {
        left: unset;
        right: var(--sidebar-width);
        width: var(--config-width-std);
    }
}

@media (min-width: 1436px) {
    .footer-container {
        left: unset;
        right: var(--sidebar-width);
        width: var(--config-width-wide);
    }
}

.invoice-drawer {
    background: white;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.1);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: absolute;
    bottom: 100%;
    width: 100%;
}

.invoice-drawer.open {
    max-height: 400px;
    overflow-y: auto;
}

.invoice-content {
    padding: 24px 30px;
}

.line-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    color: var(--text-secondary);
}

.line-item:last-child {
    border-bottom: none;
}

.line-item span.price {
    font-weight: 600;
    color: var(--text-primary);
}

.action-bar {
    background: white;
    padding: 10px 24px;
    border-top: none;
    min-height: var(--footer-height);
    height: auto;
    display: flex;
    border-radius: 16px 16px 0 0;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 2;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

.total-toggle {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    user-select: none;
}

.total-label {
    font-size: 12px;
    color: #666;
    margin-bottom: 2px;
}

.total-amount-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.total-amount {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.deposit-line {
    font-size: 11px;
    color: var(--accent-blue);
    font-weight: 600;
}

.remaining-line {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 400;
    margin-top: 1px;
}

.toggle-icon {
    width: 20px;
    height: 20px;
    fill: var(--text-secondary);
    transition: transform 0.3s ease;
}

.invoice-drawer.open+.action-bar .toggle-icon {
    transform: rotate(180deg);
}

/* Fix gap when drawer is open */
.invoice-drawer.open+.action-bar {
    border-radius: 0;
}

.btn-order {
    background: linear-gradient(-45deg, var(--accent-blue) 20px, var(--accent-black) 20px);
    color: white;
    border: none;
    padding: 10px 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-order:hover {
    background: var(--accent-hover);
}

/* --- MODAL (POPUP) --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-card {
    background: white;
    width: 90%;
    max-width: 600px;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

@media (max-width: 600px) {
    .modal-card {
        width: 95%;
        padding: 15px;
    }
}

.modal-overlay.active .modal-card {
    transform: translateY(0);
}

.modal-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.modal-body {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.modal-btn-close {
    background: var(--text-primary);
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    float: right;
}

.modal-btn-close:hover {
    background: #333;
}

/* --- STATIC COST BREAKDOWN --- */
.static-cost-breakdown {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 2px solid var(--border-color);
}

/* 3-Row Static Layout */
.static-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    /* Spacing between rows */
}

.row-total-small {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.row-remaining-small {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.row-upfront-large {
    font-size: 20px;
    /* Emphasize Upfront */
    font-weight: 700;
    color: var(--accent-black);
    margin: 10px 0;
    /* Add extra spacing around the main item */
}

/* Override colors for the right-side values if needed, or keep uniform */
.row-upfront-large span {
    color: var(--accent-black);
}

.btn-order.full-width {
    width: 100%;
    padding: 16px;
    font-size: 18px;
}

/* Hide footer animation */
.footer-container.hide-footer {
    transform: translateY(100%);
    box-shadow: none;
}

/* --- ToS Modal Styles --- */
.tos-card {
    background: white;
    width: 90%;
    max-width: 800px;
    /* Wider than normal info modal */
    border-radius: 12px;
    padding: 16px 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    /* Make sure it fits on screen */
}

.tos-body {
    flex: 1;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.6;
    color: #444;
    padding: 0 15px 15px 15px;
    margin-bottom: 10px;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #eee;
}

/* Ensure headings inside fetched HTML look okay */
.tos-body h1,
.tos-body h2,
.tos-body h3 {
    margin-top: 1.25em;
    margin-bottom: 0.5em;
    color: #111;
}

/* Aggressive removal of top margin for the first heading, even if nested inside a div */
.tos-body>*:first-child h1,
.tos-body>*:first-child h2,
.tos-body>*:first-child h3,
.tos-body>h1:first-child,
.tos-body>h2:first-child,
.tos-body>h3:first-child {
    margin-top: 0 !important;
}

.tos-body>*:first-child {
    margin-top: 0 !important;
}

.tos-body ul {
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: 1em;
}

/* Checkbox Container in Static Breakdown */
.tos-checkbox-container {
    padding: 15px 0;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: #333;
}

.tos-checkbox-container input[type='checkbox'] {
    margin-top: 3px;
    cursor: not-allowed;
    /* Initially disabled until signed */
}

.tos-link {
    color: var(--accent-blue);
    text-decoration: underline;
    cursor: pointer;
}

/* Disabled Button State */
.btn-order:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    opacity: 0.7;
    transform: none !important;
    box-shadow: none !important;
}

/* FORCE TEXT COLORS FOR TERMS OVERLAY */
.tos-body {
    color: #333 !important;
}

.tos-body * {
    color: #333 !important;
}

.tos-body h1,
.tos-body h2,
.tos-body h3,
.tos-body h4,
.tos-body h5,
.tos-body h6 {
    color: #111 !important;
}

.tos-body ul,
.tos-body li,
.tos-body p,
.tos-body span,
.tos-body div {
    color: #333 !important;
}


/* FORCE BACKGROUNDS TO WHITE/TRANSPARENT IN TOS */
.tos-body div,
.tos-body section,
.tos-body p,
.tos-body span {
    background-color: transparent !important;
    background: transparent !important;
    /* Catch gradients */
}

/* Ensure the modal main background is white */
.tos-card {
    background-color: white !important;
}


/* FORCE HEADER VISIBILITY */
.global-header {
    z-index: 100 !important;
    position: relative !important;
    /* Mobile: Default scroll behavior */
    width: 100% !important;
}

@media (min-width: 1024px) {
    .global-header {
        position: sticky !important;
        /* Desktop: Sticky behavior */
        top: 0 !important;
    }
}

body {
    padding-top: 0 !important;
}

/* --- BUTTON DISABLED VISUAL STATE --- */
.btn-disabled-visual {
    background-color: #d1d5db !important;
    /* gray-300 */
    color: #6b7280 !important;
    /* gray-500 */
    cursor: not-allowed !important;
    opacity: 1 !important;
    /* Reset opacity as bg color handles the look */
    pointer-events: auto !important;
    /* Ensure click is captured */
}

.btn-disabled-visual:hover {
    background-color: #d1d5db !important;
    /* No hover change */
}

/* --- GRID CARD STYLES (NEW) --- */
.option-card-grid {
    border: 1px solid var(--border-color);
    border-radius: 3px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    aspect-ratio: 1.78;
    min-height: 90px;
}

@media (hover: hover) {
    .option-card-grid:hover {
        border-color: #a0a0a0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }
}

.option-card-grid.selected {
    border-color: var(--accent-black);
    background-color: #f9f9f9;
    box-shadow: none;
}

/* Checkmark for Grid Cards */
.option-card-grid.selected::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    /* Same position as info btn usually */
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-black);
    color: white;
    border-radius: 50%;
    font-weight: bold;
    font-size: 14px;
    z-index: 10;
}

/* If card has an info button, we hide the default checkmark and use the info button as checkmark, similar to standard cards */
.option-card-grid.selected:has(.info-btn)::after {
    display: none;
}

/* When selected, transform Info Button into Checkmark */
.option-card-grid.selected .info-btn {
    background-color: var(--accent-black);
    border-color: var(--accent-black);
    color: #ffffff;
    /* Show 'i' */
}

.option-card-grid.selected .info-btn::after {
    content: none;
    color: white;
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: sans-serif;
}

.grid-icon {
    margin-bottom: 12px;
    color: var(--text-primary);
    opacity: 0.8;
    transition: opacity 0.2s;
}

.option-card-grid:hover .grid-icon {
    opacity: 1;
}

.grid-icon svg {
    width: 32px;
    height: 32px;
    fill: currentColor;
}

.grid-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

/* Info Button Position in Grid - Use standard styles, just ensure z-index */
.option-card-grid .info-btn {
    z-index: 20;
    /* ensure above icon */
}

/* Force 2 columns for Business Type Grid on Mobile */
.options-grid.grid-type-cards-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* --- STATIC COST BREAKDOWN --- */
.static-cost-breakdown {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 2px solid var(--border-color);
}

.static-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    padding: 20px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.static-total-price {
    font-size: 28px;
    color: var(--accent-blue);
}

.btn-order.full-width {
    width: 100%;
    padding: 16px;
    font-size: 18px;
}

/* Hide footer animation */
.footer-container.hide-footer {
    transform: translateY(100%);
    box-shadow: none;
}

.order-summary-title {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
    padding-bottom: 10px;
    font-family: inherit;
    display: flex;
    align-items: center;
    position: relative;
    color: var(--text-primary);
}

  

/* --- MOBILE BACK TO TOP BUTTON --- */
.back-to-top-btn {
    position: fixed;
    bottom: 20px;
    /* Slightly lower on configurator if needed, keeping 20px */
    right: 20px;
    width: 44px;
    height: 44px;
    background: #000;
    color: #fff;
    z-index: 9999;
    /* Tactical Cut Corner: Bottom Right */
    clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.back-to-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top-btn svg {
    width: 14px;
    height: 14px;
    margin-bottom: -2px;
    transition: transform 0.3s ease;
}

.back-to-top-btn span {
    font-family: 'Space Mono', monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #fff;
}

.back-to-top-btn:active {
    background: #E21E26;
    /* Accent Red on Press */
    border-color: #E21E26;
    transform: scale(0.95);
}

/* Desktop: Hidden (Configurator Desktop is > 1024px) */
@media (min-width: 1024px) {
    .back-to-top-btn {
        display: none;
    }
}

/* --- SMALL MOBILE REFINEMENTS (Targeting 320px specifically) --- */
@media (max-width: 340px) {

    /* 1. Footer Compactness */
    .footer-container .action-bar {
        padding: 10px 12px;
        /* Reduce horizontal padding */
        gap: 8px;
        /* Reduce space between total and order button */
    }

    .footer-container .total-label {
        font-size: 10px;
        /* Smaller label */
    }

    .footer-container .total-amount {
        font-size: 16px;
        /* Smaller price text */
    }

    .footer-container .btn-order {
        padding: 10px 16px;
        /* Smaller button padding */
        font-size: 14px;
        /* Smaller button text */
    }

    /* 2. Option Grid (Business Type & Others) */
    .options-grid {
        gap: 8px !important;
        /* Tighter grid */
    }

    .option-card-grid {
        padding: 8px !important;
        /* Less padding inside cards */
        min-height: 0 !important;
        /* Let content dictate height */
    }

    .option-card-grid .grid-icon svg,
    .option-card-grid .grid-icon i {
        width: 20px !important;
        /* Smaller icons */
        height: 20px !important;
        font-size: 20px !important;
    }

    .option-card-grid .grid-title {
        font-size: 12px !important;
        /* Smaller titles */
    }

    /* 3. General Overflow Prevention */
    .configurator-container,
    .controls-panel {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}


/* RESTORE INFO ICON OVERRIDE */
.option-card.selected .info-btn,
.option-card-grid.selected .info-btn {
    color: #ffffff !important;
}

.option-card.selected .info-btn::after,
.option-card-grid.selected .info-btn::after {
    content: none !important;
    display: none !important;
}

/* Cleaned up syntax error */

/* --- V22.3: Restored Missing Modal Styles --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 20000 !important;
    /* Must be > info-btn (5000) */
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    backdrop-filter: blur(2px);
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
    visibility: visible;
}

.modal-card {
    background: #ffffff;
    width: 90%;
    max-width: 500px;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    position: relative;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    animation: modalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 6001;
}

@keyframes modalPop {
    from {
        transform: scale(0.95) translateY(10px);
        opacity: 0;
    }

    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.modal-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #111;
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
}

.modal-body {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #444;
    overflow-y: auto;
    margin-bottom: 20px;
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 18px;
    font-size: 28px;
    font-weight: 300;
    color: #999;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s;
    z-index: 100;
}

.modal-close:hover {
    color: #000;
}

.modal-btn-close {
    align-self: flex-end;
    padding: 8px 16px;
    background: #000000;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-btn-close:hover {
    background: #333333;
    color: #ffffff;
}

/* V22.5: Fix Footer Positioning (Fixed at Bottom) */
.footer-container {
    z-index: 5500 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: transparent;
    /* Removed white background that caused hard edges */
    box-shadow: none;
    /* Shadow is handled by .action-bar */
    pointer-events: none;
    /* Let clicks pass through to underneath, re-enabled on .action-bar */
}

.action-bar {
    pointer-events: auto;
    /* Re-enable pointer events for the bar */
}

/* V22.6: Fix Z-Index Containment (Traps the high-z buttons inside this layer) */
.controls-panel {
    isolation: isolate;
    z-index: 50 !important;
    position: relative !important;
}

.action-bar,
.invoice-backdrop-footer-style {
    z-index: 5500 !important;
}

/* Fix for Footer Width on Desktop (Pins it to the Controls Column) */
@media (min-width: 1024px) {
    .footer-container {
        left: auto !important;
        right: var(--sidebar-width) !important;
        width: var(--config-width-std) !important;
    }
}

@media (min-width: 1436px) {
    .footer-container {
        right: var(--sidebar-width) !important;
        width: var(--config-width-wide) !important;
    }
}

@media (min-width: 2000px) {
    .footer-container {
        right: var(--sidebar-width) !important;
        width: var(--config-width-wide) !important;
    }
}

/* --- OPERATOR CHAT FEATURE --- */
.action-buttons-wrapper {
    display: flex;
    gap: 10px;
    align-items: center;
}

.btn-operator {
    background: transparent;
    color: #666;
    border: 1px solid #ddd;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 0;
    position: relative;
    overflow: hidden;
}

.btn-operator svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    transition: transform 0.3s ease;
}

.btn-operator:hover {
    background: #e8e8e8;
    color: #333;
}

.btn-operator:hover svg {
    transform: scale(1.1);
}

#chat-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    display: none;
    animation: fadeIn 0.3s ease;
}

@media (min-width: 1024px) {
    #chat-backdrop {
        display: none !important;
    }
}


@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Chat Window Styles */
#chat-window {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 380px;
    height: 550px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: none;
    flex-direction: column;
    z-index: 10000;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    overflow: hidden;
    animation: chatOpenDesktop 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes chatOpenDesktop {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes chatOpenMobile {
    from {
        opacity: 0;
        transform: translate(-50%, -40%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

#chat-auth {
    position: absolute;
    inset: 0;
    background: white;
    z-index: 10002;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    transition: all 0.3s ease;
}

.auth-close {
    position: absolute;
    top: 15px;
    right: 20px;
    color: #999 !important;
    font-size: 28px !important;
}

.chat-auth-title {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 30px;
    color: #000;
    text-transform: none;
    /* Changed from uppercase to match 'Build Your Store' */
    letter-spacing: normal;
}

#chat-auth .chat-input {
    flex: none;
    width: 100%;
    max-width: 300px;
    height: 54px;
    margin-bottom: 20px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
    border-radius: 2px;
    border: 1px solid #eee;
    background: #fafafa;
    font-size: 12px;
    outline: none;
    transition: all 0.2s;
}

#chat-auth .chat-input:focus {
    border-color: #000;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

#chat-auth .chat-btn-send {
    width: 100%;
    max-width: 300px;
    height: 54px;
    font-size: 11px;
    letter-spacing: 3px;
    font-weight: 700;
    border-radius: 2px;
}

.chat-auth-info {
    font-size: 8px;
    letter-spacing: 2px;
    color: #ccc;
    margin-top: 30px;
}

/* Improved mobile layout for auth and footer */
@media (max-width: 600px) {
    #chat-auth {
        justify-content: center;
        padding: 40px 20px;
    }

    .chat-footer {
        padding: 10px 8px;
        gap: 4px;
    }

    .chat-btn-send {
        min-width: 54px;
        padding: 0 8px;
        font-size: 10px;
    }

    .chat-btn-icon {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
    }
}

.chat-header {
    padding: 16px 20px;
    background: #fff;
    color: #000;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    border-bottom: 1px solid #eee;
}

.chat-header .close-chat {
    cursor: pointer;
    font-size: 20px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.chat-header .close-chat:hover {
    opacity: 1;
}

#chat-history {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: #fdfdfd;
}

.msg {
    max-width: 85%;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.5;
    border-radius: 12px;
    position: relative;
    font-family: var(--font-family);
}

.msg.user {
    align-self: flex-end;
    background: #f5f5f5;
    color: #111;
    border-bottom-right-radius: 2px;
    border: 1px solid #eee;
}

.msg.bot {
    align-self: flex-start;
    background: #fff;
    color: #111;
    border-bottom-left-radius: 2px;
    border: 1px solid #eee;
}

.chat-footer {
    padding: 15px;
    display: flex;
    gap: 8px;
    background: #fff;
    border-top: 1px solid #eee;
    align-items: center;
}

.chat-input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

.chat-input:focus {
    border-color: #000;
}

.chat-btn-icon {
    background: #f5f5f5;
    border: 1px solid #eee;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.chat-btn-icon:hover {
    background: #eee;
}

.chat-btn-send {
    background: #000;
    color: #fff;
    border: none;
    padding: 0 18px;
    height: 38px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    flex-shrink: 0;
}

#status-msg {
    font-size: 9px;
    text-align: center;
    color: #999;
    padding: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: #fdfdfd;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.status-dot {
    width: 6px;
    height: 6px;
    background-color: #22c55e;
    border-radius: 50%;
    display: inline-block;
}

.status-dot.pulsing {
    animation: statusPulse 2s infinite;
}

.status-dot.offline {
    background-color: #ef4444;
}

@keyframes statusPulse {
    0% {
        transform: scale(0.95);
        opacity: 0.8;
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }

    70% {
        transform: scale(1.1);
        opacity: 1;
        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0);
    }

    100% {
        transform: scale(0.95);
        opacity: 0.8;
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

/* Ban Overlay */
#ban-overlay {
    position: absolute;
    inset: 0;
    background: #fff;
    z-index: 10010;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Mobile Adjustments */
@media (max-width: 600px) {
    #chat-window {
        width: 92%;
        /* Slightly wider to give more breathing room */
        height: 60vh;
        max-height: 520px;
        top: 50%;
        left: 50%;
        bottom: auto;
        right: auto;
        transform: translate(-50%, -50%);
        border-radius: 16px;
        animation: chatOpenMobile 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
}

@media (min-width: 1024px) {
    #chat-window {
        right: calc(var(--sidebar-width) + 20px);
        width: 350px;
    }
}