* { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: system-ui, -apple-system, sans-serif; background: #fafafa; }
        
        /* Prevent background scrolling when modal is open */
        body.modal-open {
            overflow: hidden !important;
            height: 100vh; /* Lock height */
            position: fixed; /* Most aggressive scroll prevention */
            width: 100%; /* Prevent width jump */
            top: 0;
            left: 0;
        }
        
        /* Header */
        .header {
            background: white;
            border-bottom: 2px solid #e5e7eb;
            padding: 10px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            position: sticky;
            top: 0;
            z-index: 50;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
        }
        
        
        /* --- Label Swapping Logic --- */
        .label-mobile { display: none; } /* Default: Hidden */
        .label-desktop { display: inline; } /* Default: Visible */

        .device-devices {
            line-height: 1.2;
            white-space: nowrap;      /* Prevent wrapping */
            overflow: hidden;         /* Cut off if too long */
            text-overflow: ellipsis;  /* Add ... if too long */
            
            display: block; 
            font-size: 0.7rem; 
            color: #64748b;
        }
        
        /* Pricing Display */
        .pricing-display {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 2px;
            min-width: 140px;
        }
        
        .price-label {
            font-size: 0.75rem;
            color: #6b7280;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        
        .price-value {
            font-size: 1.0rem;
            font-weight: 700;
            color: #111827;
            line-height: 1;
            border: 2px solid #e5e7eb;
            border-radius: 8px;
            padding: 10px;
        }
        
        .price-description {
            font-size: 0.75rem;
            color: #6b7280;
            margin-top: 2px;
        }

        .price-info {
            margin-top: 0.75rem;
            padding: 0.55rem 0.8rem;

            font-size: 0.8rem;           /* slightly larger */
            line-height: 1.45;
            color: #475569;              /* slate-600 */

            background: #f1f5f9;         /* a touch darker */
            border-radius: 8px;
        }

        /* --- Home Button & Divider --- */
        .nav-home-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            border-radius: 50%; /* Circle shape - Distinct from square device buttons */
            color: #64748b;     /* Slate-500 */
            background: transparent;
            transition: all 0.2s;
            flex-shrink: 0;
        }

        .nav-home-btn:hover {
            background: #f1f5f9; /* Light gray hover */
            color: #0f172a;      /* Dark slate */
        }

        .nav-home-btn:focus-visible {
            outline: 2px solid #2563eb;
            outline-offset: 2px;
        }

        .nav-divider {
            width: 1px;
            height: 24px;
            background: #e2e8f0; /* Subtle vertical line */
            margin: 0 4px 0 0;   /* Spacing between line and label */
        }

        /* Bottom Nav Status */
        .nav-status {
            display: flex;
            flex-direction: column;
        }

        .nav-status-label {
            font-size: 0.7rem;
            text-transform: uppercase;
            color: #64748b;
            font-weight: 700;
            letter-spacing: 0.05em;
        }

        .nav-status-value {
            font-size: 1rem;
            font-weight: 700;
            color: #0f172a;
        }
        
        
        /* Mobile breakpoint */
        @media (max-width: 1024px) {
            .header {
                padding: 10px 16px;
                flex-direction: column;
                align-items: stretch;
                gap: 16px;
            }
                        
            /* Keep device options horizontal on all viewports */
            .device-options {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                gap: 8px;
            }
            
            .pricing-display {
                align-items: flex-start;
            }

            /* --- TABLET & MOBILE SHARED STYLES (Max Width 1024px) --- */
            /* This extends the Header and Bottom Nav changes to Tablets */


            /* 1. HEADER: Consistent with Mobile */
            /* Hide the extra stuff */
            #price-display { display: none !important; }
            .device-label { display: none !important; }
            .device-devices { display: none !important; }
            
            /* Tighten the spacing */
            .header {
                padding: 10px 12px !important;
                gap: 12px !important;
            }

            /* 2. BOTTOM NAV: Consistent with Mobile */
            /* Stack vertically */
            .bottom-nav {
                flex-direction: column !important;
                gap: 10px !important;
                padding: 12px 16px !important;
                height: auto !important;
            }
            
            /* Hide Info (It's in the modal now) */
            .nav-info { display: none !important; }
            
            /* Center the Order Button */
            .mobile-actions-container {
                width: 100%;
                display: flex;
                flex-direction: column;
                gap: 8px;
            }

            .order-button-container, .btn-order {
                width: 100% !important;
                text-align: center;
                justify-content: center;
            }

            /* 3. ENSURE PREVIEW BUTTON STAYS HIDDEN ON TABLET */
            /* The "View Preview" button is for mobile phones only */
            .mobile-only {
                display: none;
            }
        }

            /* Ensure mobile-only button reappears specifically for phones */
            @media (max-width: 640px) {
                .mobile-only {
                    display: block !important;
                }

        }
        
        /* Extra small breakpoint */
        /* Mobile: Compact segmented control */
        /* --- MOBILE OVERHAUL (Max Width 640px) --- */
        @media (max-width: 640px) {

        /* 1. HIDE Header Elements */
            #price-display { display: none !important; }
            .device-label { display: none !important; }
            .device-devices { display: none !important; } /* Helper text */
        
        /* 2. FULL WIDTH Builder */
            .builder-container {
            flex-direction: column;
            height: auto; /* Allow scrolling */
            padding-bottom: 80px; /* Space for bottom nav */
        }
        
        .left-panel {
            width: 100% !important;
            max-width: none !important;
            border-right: none;
        }
        
        .right-panel {
            display: none !important; /* Hide desktop preview pane */
        }

        /* 3. BOTTOM NAV Redesign */
        .bottom-nav {
            flex-direction: column;
            gap: 10px;
            padding: 12px 16px;
        }

        .nav-info { display: none !important; } /* Hide SKU/Dates in footer */
        
        .mobile-actions-container {
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: 100%;
        }

        .order-button-container, .btn-order {
            width: 100%;
            text-align: center;
            justify-content: center;
        }
        
        /* New Preview Button Styling */
        .btn-secondary {
            background: white;
            border: 1px solid #e5e7eb;
            color: #374151;
            padding: 12px;
            border-radius: 6px;
            font-weight: 600;
            width: 100%;
            cursor: pointer;
        }
        
        .mobile-only {
            display: block;
        }

        /* 1. HIDE THE DEVICE MOCKUP IN MODAL */
        /* This removes the large grey preview panel on mobile */
        .modal-right, 
        #previewPanel {
            display: none !important;
        }

        /* Make the template list use the full width since the preview is gone */
        .modal-left {
            width: 100% !important;
            flex: 1 !important;
            padding: 16px !important;
        }

        /* 2. STACK THE ADDED TEMPLATES */
        /* Forces the tiles into a vertical column instead of a grid */
        .tile-list {
            display: flex !important;
            flex-direction: column !important;
            gap: 16px !important; /* Adds "breathing room" between tiles */
        }

        .tile-item {
            width: 100% !important;
            margin: 0 !important;
        }

        /* Ensure the "Add Page" button matches the stacked width */
        .ghost-tile {
            width: 100% !important;
            min-height: 60px !important;
        }

        /* --- MOBILE DEVICE BUTTONS (S / M / L) --- */
    
    /* 1. Header Layout */
    .header {
        padding: 11px 12px !important; 
        gap: 12px !important;          
        align-items: center;
        display: flex !important;
    }

    /* 3. Back Button & Divider */
    .nav-home-btn {
        width: 36px;
        height: 36px;
        flex-shrink: 0;           /* Prevent shrinking */
        margin-right: 8px;        /* Add space after arrow */
    }
    
    .nav-divider {
        margin-right: 8px;        /* Add space after divider */
    }

    /* 4. KEY FIX: The Button Container Must Grow */
    .device-options {
        flex: 1 !important;       /* <--- THIS forces it to fill remaining space */
        display: flex !important;
        gap: 6px !important;      /* Gap between buttons */
        height: 36px !important;
        width: auto !important;   /* Reset any fixed width */
    }
    
    /* 5. The Buttons Must Share Space Equally */
    .device-option {
        flex: 1 1 0px !important;      /* Grow equally, ignoring content width */
        width: 0 !important;           /* standard flex trick for equal columns */
        height: 36px !important;       
        padding: 0 !important;         
        aspect-ratio: auto !important; 
        
        /* Centering content */
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-direction: row;
    }

    /* 6. Mobile Text Styling */
    .label-desktop { display: none !important; }
    .label-mobile { 
        display: inline !important; 
        font-size: 1rem; 
        font-weight: 700;
        line-height: 1;
    }

    .device-devices { display: none !important; }
    .device-name { margin: 0 !important; }
    .device-check { display: none; }

}

        /* Hide mobile button on desktop */
        @media (min-width: 641px) {
            .mobile-only { display: none; }
            #mobilePreviewOverlay { display: none !important; }
        }
        
        /* Builder Layout */
        .builder-container {
            display: flex;
            height: calc(100vh - 92px);
        }
        
        .left-panel {
            width: 400px;        /* Fixed Width */
            min-width: 360px;    /* Prevent flex-shrinking */
            flex-shrink: 0;      /* Ensure it stays 360px even if window is small */
            background: white;
            border-right: 1px solid #e5e7eb;
            overflow-y: auto;
            padding: 24px;
            position: relative;
            transition: width 0.3s ease; /* Smooth transition if we toggle it later */
        }
        
        .resize-handle {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 8px;
            cursor: col-resize;
            background: transparent;
            z-index: 10;
        }
        .resize-handle:hover {
            background: #e5e7eb;
        }
        .resize-handle:active {
            background: #3b82f6;
        }
        
        .right-panel {
            flex: 1;
            overflow-y: auto;
            padding: 24px;
            background: #fafafa;
            position: relative;
        }
        
        /* Sections */
        .section {
            margin-bottom: 32px;
        }
        
        .section-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        
        .section-title {
            font-size: 1rem;
            font-weight: 600;
            color: #111827;
        }
        
        .section-subtitle {
            font-size: 0.875rem;
            color: #6b7280;
            margin-bottom: 16px;
        }
        
        /* Unit Container */
        /* --- Collapsible Accordion Styles --- */
        .accordion-header {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: white;
            border: 1px solid #e5e7eb;
            padding: 12px 16px;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s;
            text-align: left;
            margin-bottom: 8px;
        }

        .accordion-header:hover {
            border-color: #3b82f6;
            background: #f9fafb;
        }

        .accordion-header[aria-expanded="true"] {
            background: #f0f9ff;
            border-color: #bfdbfe;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            margin-bottom: 0;
            border-bottom: none;
        }

        .accordion-title-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .accordion-title {
            font-size: 0.95rem;
            font-weight: 600;
            color: #111827;
        }

        .accordion-count {
            background: #f3f4f6;
            color: #6b7280;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .accordion-chevron {
            transition: transform 0.2s;
            color: #9ca3af;
        }

        .accordion-header[aria-expanded="true"] .accordion-chevron {
            transform: rotate(180deg);
            color: #3b82f6;
        }

        .accordion-content {
            display: none;
            border: 1px solid #e5e7eb;
            border-top: none;
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
            padding: 10px;
            background: white;
            margin-bottom: 16px;
        }

        .accordion-content.open {
            display: block;
            animation: slideDown 0.2s ease-out;
        }

        @keyframes slideDown {
            from { opacity: 0; transform: translateY(-5px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Screen Reader Only Utility */
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border-width: 0;
        }
        
        .unit-label {
            font-size: 0.875rem;
            font-weight: 600;
            color: #374151;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        /* Page Tiles */
        .tile-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
                
        .reorder-controls {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        
        .reorder-btn {
            width: 20px;
            height: 16px;
            border: 1px solid #e5e7eb;
            border-radius: 3px;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.625rem;
            color: #6b7280;
            transition: all 0.15s;
        }
        
        .reorder-btn:hover {
            background: #f3f4f6;
            border-color: #d1d5db;
            color: #111827;
        }
        
        /* Ghost Tile - Styled as rectangular button */
        .ghost-tile {
            border: 2px dashed #d1d5db;
            border-radius: 6px;
            background: #fafafa;
            aspect-ratio: 0.707;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s;
            padding: 16px;
            max-width: 120px;
        }
        
        .ghost-tile:hover {
            border-color: #3b82f6;
            background: #eff6ff;
        }
        
        .ghost-tile-icon {
            font-size: 2rem;
            color: #6b7280;
            margin-bottom: 8px;
        }
        
        .ghost-tile:hover .ghost-tile-icon {
            color: #3b82f6;
        }
        
        .ghost-tile-label {
            font-size: 0.75rem;
            color: #6b7280;
            font-weight: 500;
            text-align: center;
        }
        
        .ghost-tile:hover .ghost-tile-label {
            color: #3b82f6;
        }
        
        /* Controls - Stacked Button Style */
        .qty-control {
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .qty-buttons {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        
        .qty-display {
            font-size: 0.875rem;
            font-weight: 600;
            color: #111827;
            min-width: 32px;
            text-align: center;
            padding: 4px 8px;
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            background: white;
        }
        
        .qty-btn {
            width: 24px;
            height: 18px;
            border: 1px solid #e5e7eb;
            border-radius: 3px;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.75rem;
            color: #6b7280;
            transition: all 0.15s;
        }
        
        .qty-btn:hover {
            background: #f3f4f6;
            border-color: #d1d5db;
            color: #111827;
        }
        
        .btn-icon {
            width: 26px;
            height: 26px;
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.875rem;
            color: #6b7280;
            transition: all 0.15s;
        }
        
        .btn-icon:hover {
            background: #f3f4f6;
            border-color: #d1d5db;
            color: #111827;
        }
        
.btn-remove {
    color: #dc2626;
    position: relative; /* Anchor for the tooltip */

}

.btn-remove:hover {
    background: #fef2f2;
    border-color: #fecaca;
    z-index: 9999;
}

.btn-remove:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    
    /* FIX: Anchor to the right, do not center */
    right: 0; 
    left: auto;
    transform: none; /* Remove the shift */
    
    margin-bottom: 8px;
    background: #1f2937;
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1000; /* High Z-Index just in case */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Fix the arrow to follow the tooltip */
.btn-remove:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    
    /* FIX: Align arrow near the right edge to match */
    right: 10px; 
    left: auto;
    transform: none;
    
    margin-bottom: 2px;
    border: 6px solid transparent;
    border-top-color: #1f2937;
    z-index: 1000;
    pointer-events: none;
}
        
        /* Preview Panel */
        .preview-container {
            background: white;
            border-radius: 8px;
            padding: 20px;
            border: 1px solid #e5e7eb;
        }
        
        .preview-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 16px;
        }
        
        .preview-title {
            font-size: 1.125rem;
            font-weight: 700;
            color: #111827;
        }
        
        .preview-info {
            font-size: 0.875rem;
            color: #6b7280;
        }
        
        .preview-footer {
            margin-top: 20px;
            padding-top: 16px;
            border-top: 1px solid #e5e7eb;
            text-align: center;
        }
        
        .btn-expand {
            font-size: 0.875rem;
            color: #2563eb;
            background: transparent;
            border: none;
            cursor: pointer;
            font-weight: 500;
            padding: 6px 12px;
            border-radius: 4px;
        }
        
        .btn-expand:hover {
            background: #eff6ff;
        }
        
        .thumbnail-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
            gap: 12px;
        }
        
        .thumbnail {
            background: white;
            border: 2px solid #e5e7eb;
            border-radius: 6px;
            display: flex;
            flex-direction: column;
            aspect-ratio: 0.707;
            padding: 8px 4px;
        }
        
        .thumbnail-content {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.625rem;
            font-weight: 600;
            color: #6b7280;
            text-align: center;
        }
        
        .thumbnail-caption {
            font-size: 0.625rem;
            color: #6b7280;
            text-align: center;
            margin-top: 4px;
            line-height: 1.2;
        }
        
        .divider-tile {
            grid-column: 1 / -1;
            display: flex;
            align-items: center;
            gap: 12px;
            margin: 8px 0;
        }
        
        .divider-label {
            font-size: 0.875rem;
            font-weight: 600;
            color: #6b7280;
            white-space: nowrap;
        }
        
        .divider-line {
            flex: 1;
            height: 1px;
            background: #e5e7eb;
        }
        
        /* Bottom Navigation */
        .bottom-nav {
            position: sticky;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            border-top: 2px solid #e5e7eb;
            padding: 16px 24px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
            box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05);
            z-index: 20;
        }
        
        /* Nav Info (Date Coverage & SKU) */
        .nav-info {
            display: flex;
            gap: 32px;
            align-items: center;
        }
        
        .nav-info-item {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        
        .nav-info-label {
            font-size: 0.75rem;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }
        
        .nav-info-value {
            font-size: 0.875rem;
            font-weight: 600;
            color: #111827;
        }
        
        .max-pages-warning {
            display: none;
            font-size: 0.875rem;
            color: #dc2626;
            font-weight: 500;
            margin-left: auto;
        }
        
        .max-pages-warning.visible {
            display: block;
        }
        
        /* Order Button Container with Tooltip */
        .order-button-container {
            position: relative;
        }
        
        .recipe-tooltip {
            opacity: 0;
            visibility: hidden;
            position: absolute;
            bottom: calc(100% + 12px);
            right: 0;
            width: 400px;
            max-width: 90vw;
            background: white;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
            padding: 20px;
            z-index: 1000;
            transform: translateY(4px);
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
        }
        
        /* Desktop: hover */
        @media (min-width: 769px) {
            .order-button-container:hover .recipe-tooltip {
                opacity: 1;
                visibility: visible;
                transform: translateY(0);
            }
        }
        
        /* Mobile: tap-to-toggle with .visible class */
        .recipe-tooltip.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        
        .recipe-tooltip::after {
            content: '';
            position: absolute;
            top: 100%;
            right: 12px;
            border: 8px solid transparent;
            border-top-color: white;
        }
        
        .recipe-title {
            font-size: 1rem;
            font-weight: 700;
            color: #111827;
            margin-bottom: 12px;
            padding-bottom: 12px;
            border-bottom: 1px solid #e5e7eb;
        }
        
        .recipe-section {
            margin-bottom: 16px;
        }
        
        .recipe-section:last-child {
            margin-bottom: 0;
        }
        
        .recipe-label {
            font-size: 0.75rem;
            font-weight: 600;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 4px;
        }
        
        .recipe-value {
            font-size: 0.875rem;
            color: #111827;
            line-height: 1.5;
        }
        
        .recipe-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .recipe-list li {
            font-size: 0.875rem;
            color: #111827;
            padding: 4px 0;
            border-bottom: 1px solid #f3f4f6;
        }
        
        .recipe-list li:last-child {
            border-bottom: none;
        }
        
        .recipe-code {
            font-family: 'Monaco', 'Courier New', monospace;
            font-size: 0.75rem;
            color: #6b7280;
            background: #f9fafb;
            padding: 8px;
            border-radius: 4px;
            margin-top: 8px;

            /* Force long text to wrap to the next line */
            word-break: break-all;
            overflow-wrap: anywhere;
            white-space: normal;
        }
        
        /* Mobile styles for bottom nav */
        @media (max-width: 768px) {
            .bottom-nav {
                flex-direction: column;
                align-items: stretch;
                gap: 12px;
            }
            
            .nav-info {
                flex-direction: column;
                gap: 12px;
            }
            
            .max-pages-warning {
                margin-left: 0;
            }
            
            .recipe-tooltip {
                width: 90vw;
                left: 50%;
                right: auto;
            }
            
            .recipe-tooltip.visible {
                transform: translateX(-50%) translateY(0);
            }
            
            .recipe-tooltip:not(.visible) {
                transform: translateX(-50%) translateY(4px);
            }
            
            .recipe-tooltip::after {
                left: 50%;
                right: auto;
                transform: translateX(-50%);
            }
        }
        
        .btn-order {
            background: #3b82f6;
            color: white;
            border: none;
            padding: 12px 32px;
            border-radius: 6px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .btn-order:hover {
            background: #2563eb;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }


        /* Primary Action Buttons - Unified Style */
        #checkoutBtn {
            padding: 12px 32px;
            background: #3b82f6;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
        }

        #checkoutBtn:hover {
            background: #2563eb;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        #checkoutBtn:active {
            background: #065f46;
            transform: translateY(0);
            box-shadow: 0 1px 2px rgba(5, 150, 105, 0.2);
        }

        #checkoutBtn:disabled {
            background: #cbd5e1;
            cursor: not-allowed;
            box-shadow: none;
            transform: none;
        }
        
        /* Full-Screen Modal - Covers Everything */
        .modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            overflow: hidden; /* Prevent any scroll bubbling */
        }
        
        .modal-overlay.active {
            display: block;
        }
        
        .modal {
            background: white;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .modal-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 24px;
            border-bottom: 1px solid #e5e7eb;
        }
        
        .modal-title {
            font-size: 1.25rem;
            font-weight: 700;
            color: #111827;
        }
        
        .template-count {
            font-size: 0.875rem;
            color: #6b7280;
            font-weight: 500;
        }
        
        /* Unified Close Button for All Modals */
        .btn-close {
            width: 36px;
            height: 36px;
            border: none;
            background: transparent;
            font-size: 1.5rem;
            color: #64748b;
            cursor: pointer;
            border-radius: 6px;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            line-height: 1;
        }

        .btn-close:hover {
            background: #f1f5f9;
            color: #1e293b;
        }

        .btn-close:active {
            background: #e2e8f0;
        }
        
        .modal-body {
            flex: 1;
            display: flex;
            overflow: hidden;
        }
        
        .modal-left {
            flex: 1;
            overflow-y: auto;
            padding: 24px;
        }
        
        .search-box {
            margin-bottom: 24px;
            position: relative;
        }
        
        .search-input {
            width: 100%;
            padding: 10px 16px 10px 40px;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            font-size: 0.9375rem;
        }
        
        .search-input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        
        .search-icon {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
            pointer-events: none;
        }
        
        .modal-right {
            flex: 1.2;
            width: 35%;
            max-width: 500px;
            border-left: 1px solid #e5e7eb;
            background: #fafafa;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: sticky;
            top: 0;
            height: 100%;
        }
        
        /* Mobile: Horizontal Split */
        @media (max-width: 768px) {
            .modal-body {
                flex-direction: column;
            }
            
            .modal-right {
                width: 100%;
                max-width: none;
                height: 40%;
                border-left: none;
                border-bottom: 1px solid #e5e7eb;
            }
            
            .modal-left {
                height: 60%;
            }
            
            .search-box.collapsed .search-input {
                padding-right: 40px;
            }
        }
        
        .category-section {
            margin-bottom: 32px;
        }
        
        .category-header {
            font-size: 0.875rem;
            font-weight: 600;
            color: #6b7280;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .category-count {
            background: #e5e7eb;
            color: #6b7280;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 600;
        }
        
        .template-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }
        
        @media (max-width: 1024px) {
            .template-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 640px) {
            .template-grid {
                grid-template-columns: 1fr;
            }
        }
        
        .template-card {
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            padding: 12px;
            cursor: pointer;
            transition: all 0.15s;
            background: white;
        }
        
        .template-card:hover,
        .template-card:active,
        .template-card:focus {
            border-color: #3b82f6;
            background: #eff6ff;
        }
        
        /* Touch devices - tap to preview */
        @media (hover: none) {
            .template-card:active {
                border-color: #3b82f6;
                background: #eff6ff;
            }
        }
        
        .template-card-thumb {
            width: 100%;
            aspect-ratio: 0.707;
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            background: linear-gradient(to bottom, #f9fafb 0%, #f3f4f6 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.875rem;
            color: #6b7280;
            font-weight: 700;
            margin-bottom: 8px;
        }
        
        .template-card-name {
            font-size: 0.875rem;
            font-weight: 600;
            color: #111827;
            margin-bottom: 2px;
        }
        
        .template-card-desc {
            font-size: 0.75rem;
            color: #6b7280;
            line-height: 1.4;
        }
        
        /* Preview in Right Panel */
        .preview-placeholder {
            text-align: center;
            color: #9ca3af;
        }
        

        .preview-content {
            width: 80%;
            max-width: 400px;
            text-align: center;
            margin-bottom: 60px; /* Extra space after device */
        }
        
        /* E-Reader Device */
        .device-container {
            margin: 0 auto 24px;
            margin-bottom: 60px; /* Extra space after device */
        }
        
        .ereader-device {
            margin: 5% 0;
            padding: 20px 15px;
            border-radius: 20px;
            display: inline-block;
            background: rgb(40, 40, 40);
            border: 5px solid rgb(75, 75, 75);
            transition: opacity 0.3s ease-in-out;
            transform: scale(1.3);
            transform-origin: center center;
            margin-bottom: 40px; /* Add space for scaled content */
        }
        
        .template-card:hover ~ .modal-right .ereader-device,
        .template-card:active ~ .modal-right .ereader-device,
        .ereader-device.fade-in {
            animation: fadeIn 0.3s ease-in-out;
        }
        
        @keyframes fadeIn {
            0% {
                opacity: 0;
                transform: scale(0.98);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        .ereader-screen {
            width: 280px;
            height: 396px;
            background: rgb(215, 215, 215);
            color: rgb(50, 50, 50);
            border: 5px solid rgb(75, 75, 75);
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 24px;
        }
        
        .preview-name {
            margin-top: 16px; /* Give the device some breathing room */
            font-size: 1.125rem; /* 18px */
            font-weight: 700;
            color: #111827; /* Darker black for contrast */
            text-align: center;
            line-height: 1.4;
        }

        .preview-desc {
            font-size: 0.875rem; /* 14px */
            color: #6b7280; /* Softer gray */
            text-align: center;
            margin-top: 4px;
            margin-bottom: 20px; /* Space before the disclaimer */
            line-height: 1.5;
            max-width: 280px; /* Prevent text from getting too wide */
            margin-left: auto;
            margin-right: auto;
        }
        
        /* Date Input */
        .input-date {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            font-size: 0.875rem;
            font-weight: 500;
            color: #111827;
        }
        
        .input-date:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        
        .date-input-group {
            display: flex;
            flex-direction: column;
            gap: 12px;
            margin-top: 8px;
        }
        
        .date-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }
        
        @media (max-width: 768px) {
            .date-row {
                grid-template-columns: 1fr;
            }
        }
        
        .input-field {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        
        .input-label {
            font-size: 0.75rem;
            color: #6b7280;
            font-weight: 500;
        }
        
        .input-with-control {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .months-control {
            display: flex;
            align-items: center;
            gap: 6px;
            flex: 1;
        }
        
        .months-buttons {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        
        .months-display {
            font-size: 0.875rem;
            font-weight: 600;
            color: #111827;
            min-width: 40px;
            text-align: center;
            padding: 4px 8px;
            border: 1px solid #e5e7eb;
            border-radius: 4px;
            background: white;
        }
        
        .months-btn {
            width: 24px;
            height: 18px;
            border: 1px solid #e5e7eb;
            border-radius: 3px;
            background: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 0.75rem;
            color: #6b7280;
            transition: all 0.15s;
        }
        
        .months-btn:hover {
            background: #f3f4f6;
            border-color: #d1d5db;
            color: #111827;
        }
        
        .months-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        /* 1. Base Number Input Style */
        .input-number {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
            font-size: 0.875rem;
            font-weight: 500;
            color: #111827;
            font-family: inherit; /* Ensure it uses the same UI font as the date */
        }

        /* 2. Readonly State (Must come AFTER input-date and input-number) */
        .input-readonly {
            background: #f9fafb;
            font-family: monospace;
            color: #6b7280 !important; /* Forces the gray text color */
            cursor: not-allowed;
            -webkit-text-fill-color: #6b7280; /* Fix for Safari mobile graying things out weirdly */
            opacity: 1; /* Fix for iOS default opacity */
        }
        
        .input-number:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

/* Preview Device Frame - Always Visible */
.preview-content .device-container {
    opacity: 1 !important;
    visibility: visible !important;
}

.ereader-screen-placeholder {
    text-align: center;
    color: #9ca3af;
    padding: 24px;
}

.ereader-screen-placeholder-icon {
    font-size: 2rem;
    margin-bottom: 12px;
}

.ereader-screen-placeholder-text {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Thumbnail with Image Support */
.thumbnail {
    position: relative;
}

.thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.template-card-thumb {
    width: 100%;
    aspect-ratio: 0.707;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: #f9fafb;
    object-fit: cover;
}






.tile-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);
    margin-top: 8px;
    padding: 10px;
}


.tile-item {
    display: flex;         /* Switches from vertical stack to horizontal row */
    align-items: center;   /* Centers all items vertically within the row */
    gap: 8px;             /* Adds consistent spacing between elements */
    padding: 10px 10px;    /* Adds internal breathing room */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: white;     /* Ensures it stands out against the list background */
}




.tile-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-color: var(--accent);
}

.tile-thumb {
    width: 40px;
    height: 56px; /* Approx A-series ratio */
    object-fit: cover;
    border-radius: 4px;
    background: #eee;
    border: 1px solid rgba(0,0,0,0.1);
}

.tile-info {
    flex: 1;
    min-width: 0; /* Prevents text overflow issues */
}

.tile-name {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tile-qty {
    font-size: 11px;
    color: var(--text-sec);
}

.tile-actions {
    display: flex;
    gap: 4px;
}

/* --- Component: Unit Sections (e.g., "Month Pages") --- */
.unit-section {
    margin-bottom: 24px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
}

.unit-header {
    padding: 0 16px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.unit-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-sec);
}

/* --- Component: Ghost Tile (Add Button) --- */
.ghost-tile {
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    min-height: 80px; /* Match tile height roughly */
    color: var(--text-sec);
    transition: all 0.2s ease;
    background: rgba(255,255,255,0.5);
}

.ghost-tile:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(0, 102, 204, 0.05);
}

.ghost-tile-icon {
    font-size: 24px;
    line-height: 1;
    margin-bottom: 4px;
}

.ghost-tile-label {
    font-size: 11px;
    font-weight: 500;
}

/* --- Small Utilities --- */
.btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
    opacity: 0.6;
    border-radius: 4px;
}

.btn-icon:hover {
    opacity: 1;
    background: rgba(0,0,0,0.05);
}

/* Ensure the text container grows to fill the middle space */
.tile-info {
    flex: 1;               /* Pushes the delete button to the far right */
}


/* --- Mobile Fixes (Max Width 640px) --- */
@media (max-width: 640px) {
    /* 1. HIDE Header Elements to save space */
    #price-display { display: none !important; }
    .device-label { display: none !important; }
    .device-devices { display: none !important; }

    /* 2. HEADER: Stick to top firmly */
    .header {
        position: sticky; /* Keep it sticky */
        top: 0;
        z-index: 100; /* Ensure it stays above everything else */
        padding: 10px 12px !important;
        gap: 12px !important;
    }

    /* 3. BUILDER: Add massive padding at bottom for the fixed footer */
    .builder-container {
        flex-direction: column;
        height: auto; 
        padding-bottom: 180px; /* <--- INCREASED from 80px to 180px */
    }

    .left-panel {
        width: 100% !important;
        max-width: none !important;
        border-right: none;
        overflow: visible; /* Let body handle scrolling */
    }

    .right-panel {
        display: none !important; 
    }

    /* 4. BOTTOM NAV: Switch to FIXED to stop it "slipping upwards" */
    .bottom-nav {
        position: fixed; /* <--- CHANGED from sticky to fixed */
        bottom: 0;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 10px;
        padding: 16px;
        background: white; /* Ensure background isn't transparent */
        box-shadow: 0 -4px 20px rgba(0,0,0,0.1); /* Add shadow to separate from content */
        z-index: 90;
        height: auto;
    }

    .nav-info { display: none !important; }

    .mobile-actions-container {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .order-button-container, .btn-order {
        width: 100%;
        text-align: center;
        justify-content: center;
    }

    .btn-secondary {
        background: white;
        border: 1px solid #e5e7eb;
        color: #374151;
        padding: 12px;
        border-radius: 6px;
        font-weight: 600;
        width: 100%;
        cursor: pointer;
    }

    .mobile-only {
        display: block;
    }

    /* Modal Tweaks */
    .modal-right, 
    #previewPanel {
        display: none !important;
    }

    .modal-left {
        width: 100% !important;
        flex: 1 !important;
        padding: 16px !important;
    }

    .tile-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important; 
    }

    .tile-item {
        width: 100% !important;
        margin: 0 !important;
    }

    .ghost-tile {
        width: 100% !important;
        min-height: 60px !important;
    }
}



/* =========================================
   ACCESSIBILITY OVERRIDES
   ========================================= */

/* 1. Global Focus Visibility */
/* Only show focus rings when using keyboard (tabbing), not mouse clicks */
:focus-visible {
    outline: 2px solid #2563eb; /* Accessible Blue */
    outline-offset: 2px;
}

/* 2. Ensure specific interactive elements have focus styles */
.accordion-header:focus-visible,
.device-option:focus-visible,
.ghost-tile:focus-visible,
.qty-btn:focus-visible,
.reorder-btn:focus-visible,
.btn-icon:focus-visible,
.template-card:focus-visible,
.btn-order:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    z-index: 10; /* Bring to front so ring isn't cut off */
}

/* 3. Screen Reader Only Utility Class */
/* Hides content visually but keeps it available for screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.preview-notice {
  position: relative;
  margin-top: 12px;
  padding: 8px 12px 8px 28px;

  font-size: 0.9rem;
  line-height: 1.45;
  color: #475569;            /* slate-600 */

  background: #f1f5f9;       /* soft neutral */
  border-radius: 8px;
}

/* Small info triangle */
.preview-notice::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);

  width: 0;
  height: 0;

  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid #94a3b8; /* slate-400 */
}

/* =========================================
   WIZARD: PANORAMA LAYOUT (SCROLL FIXED)
   ========================================= */

/* 1. Modal Container */
.wizard-modal-fullscreen {
    position: fixed !important; top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    background: #f8fafc; z-index: 2000;
    display: flex; flex-direction: column;
    overflow: hidden; /* CRITICAL: Prevent scroll from bubbling to body */
}

/* 2. Header */
.wizard-header {
    background: white; padding: 16px 32px; border-bottom: 1px solid #e2e8f0;
    display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.wizard-brand { display: flex; align-items: center; gap: 16px; }
.wizard-logo-icon {
    font-size: 1.5rem; background: #eff6ff; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center; border-radius: 10px;
}
.wizard-subtitle { font-size: 0.9rem; color: #64748b; }
.btn-close-large {
    font-size: 1.5rem; background: none; border: none; cursor: pointer; color: #94a3b8;
    width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.btn-close-large:hover { background: #f1f5f9; color: #ef4444; }

/* 3. The Panorama Grid (The Engine) */
.wizard-body-fullscreen { 
    flex: 1; 
    overflow: hidden; /* Prevent body scroll */
    display: flex; 
    flex-direction: column; 
    min-height: 0; /* FIX 1: Allow shrinking */
}
.wizard-screen { 
    width: 100%; height: 100%; 
    display: flex; flex-direction: column; 
    overflow: hidden; 
    min-height: 0; /* FIX 2: Allow shrinking */
}

.wizard-panorama-layout {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* 25% | 50% | 25% */
    flex: 1;
    overflow: hidden;
    min-height: 0; /* FIX 3: Allow shrinking */
}

/* 4. Columns */
.wizard-col {
    padding: 24px; 
    overflow-y: auto; 
    border-right: 1px solid #e2e8f0;
    display: flex; flex-direction: column;
    min-height: 0; /* FIX 4: Allow shrinking */
}

.wizard-panel-title {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
    font-weight: 700; color: #94a3b8; margin-bottom: 20px; flex-shrink: 0;
}

/* 5. Format Column */
.format-list-scroll { 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
}

.format-card {
    border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; background: white; cursor: pointer; transition: all 0.2s;
}
.format-card:hover { border-color: #3b82f6; background: #f0f9ff; }
.format-card.selected { border-color: #2563eb; background: #eff6ff; box-shadow: 0 0 0 1px #2563eb; }
.format-example { display: block; font-weight: 700; color: #1e293b; margin-bottom: 4px; font-size: 0.95rem; }
.format-name { font-size: 0.75rem; color: #64748b; text-transform: uppercase; font-weight: 600; letter-spacing: 0.05em; }

.format-card {
    position: relative; /* Add if not present */
    cursor: pointer;
}

.format-card.selected::after {
    content: '✓';
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    background: #059669;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.3);
}

.format-card.selected {
    border-color: #059669;
}

/* 6. Observances Column (The Middle Engine) */
.wizard-col-group {
    display: flex; flex-direction: column; 
    border-right: 1px solid #e2e8f0; background: #fcfcfc;
    overflow: hidden; 
    min-height: 0; /* FIX 5: Critical for nested scrolling */
    height: 100%; /* CRITICAL FIX: Constrain to grid row height */
}

.observance-search-container { flex: 1; position: relative; }
.observance-search-input {
    width: 100%; padding: 10px 10px 10px 36px; border: 1px solid #cbd5e1;
    border-radius: 6px; font-size: 0.95rem;
}
.search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #94a3b8; }
.observance-counter {
    font-size: 0.85rem; font-weight: 600; color: #3b82f6; 
    background: #eff6ff; padding: 6px 12px; border-radius: 20px;
}

.wizard-sub-col {
    flex: 1; 
    padding: 20px 24px; 
    overflow-y: auto; /* Enable Scrollbar */
    display: flex; 
    flex-direction: column;
    min-height: 0; /* FIX 7: Child shrinking */
    height: 100%; /* Ensure it fills the parent container */
}

.wizard-panel-subtitle {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: #64748b;
    margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #e2e8f0;
}

/* Observance Items */
.obs-group-title {
    font-size: 0.75rem; font-weight: 700; color: #94a3b8; margin: 12px 0 4px 0;
}
/* Fixed Item Layout */
.obs-item {
    display: flex; align-items: center; padding: 12px;
    border: 1px solid #e2e8f0; border-radius: 8px; background: white;
    cursor: pointer; transition: all 0.15s; min-height: 50px; margin-bottom: 8px;
}
.obs-item:hover { border-color: #3b82f6; background: #f8fafc; }
.obs-item.selected { background: #eff6ff; border-color: #2563eb; }
.obs-item.disabled { opacity: 0.5; cursor: not-allowed; background: #f9fafb; }

.obs-icon { font-size: 1.4rem; margin-right: 12px; flex-shrink: 0; }
.obs-content { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.obs-label { font-weight: 600; color: #1e293b; font-size: 0.9rem; line-height: 1.2; }
.obs-lang-badge { font-size: 0.75rem; color: #64748b; font-weight: 500; }
.obs-check {
    width: 20px; height: 20px; border: 2px solid #cbd5e1; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: white; margin-left: 10px; flex-shrink: 0;
}
.obs-item.selected .obs-check { background: #2563eb; border-color: #2563eb; }
.obs-item.selected .obs-check::after { content: '✓'; font-size: 12px; font-weight: 800; }

/* 7. Summary Column */
.col-summary { background: white; z-index: 10; box-shadow: -4px 0 12px -4px rgba(0,0,0,0.05); }

.coverage-card-small {
    background: #f0f9ff; border: 1px solid #bfdbfe; border-radius: 8px; padding: 16px; margin-bottom: 20px;
}
.coverage-label { font-size: 0.7rem; text-transform: uppercase; color: #0369a1; font-weight: 700; margin-bottom: 4px; }
.coverage-dates { font-size: 1.1rem; font-weight: 800; color: #0c4a6e; }
.coverage-duration { font-size: 0.85rem; color: #0369a1; }

.localization-summary { margin-bottom: 20px; }
.loc-item { margin-bottom: 8px; border-bottom: 1px solid #f1f5f9; padding-bottom: 8px; }
.loc-label { font-size: 0.75rem; color: #64748b; font-weight: 600; }
.loc-value { font-size: 0.9rem; font-weight: 500; color: #0f172a; line-height: 1.4; }

.recipe-review-container { 
    flex: 1; overflow-y: auto; margin-bottom: 20px; 
    border-top: 2px solid #f1f5f9; padding-top: 10px; min-height: 0;
}

.wizard-poetry {
    margin-top: auto; background: #f8fafc; padding: 16px;
    border-radius: 8px; border: 1px dashed #cbd5e1; text-align: center;
}
.poetry-text { font-size: 0.9rem; color: #475569; line-height: 1.5; font-weight: 500; }

/* 8. Footer */
.wizard-footer-minimal {
    padding: 16px 32px; border-top: 1px solid #e2e8f0; background: white;
    display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; z-index: 50;
}
.btn-back-small {
    background: transparent; border: 1px solid #e2e8f0; color: #64748b;
    padding: 8px 16px; border-radius: 6px; font-weight: 600; cursor: pointer;
}
.btn-back-small:hover { background: #f8fafc; color: #1e293b; }

.btn-checkout-action {
    background: #059669; color: white; font-size: 1.1rem; font-weight: 700;
    padding: 12px 32px; border: none; border-radius: 8px;
    cursor: pointer; transition: transform 0.1s; box-shadow: 0 4px 6px -1px rgba(5, 150, 105, 0.3);
}
.btn-checkout-action:hover { background: #047857; transform: translateY(-1px); }

/* =========================================
   RESPONSIVE WIZARD (TABLET & MOBILE FIX)
   ========================================= */

/* Tablet (Portrait) & Large Mobile: Switch to Vertical Stack */
@media (max-width: 1024px) {
    /* 1. Unlock the Container Height */
    .wizard-modal-fullscreen {
        height: 100vh;
        overflow: hidden; /* Keep header/footer fixed */
    }

    .wizard-body-fullscreen {
        overflow-y: auto; /* Allow the body content to scroll */
        -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
    }

    .wizard-screen {
        height: auto; /* Let content dictate height */
        overflow: visible;
    }

    /* 2. Stack the Panorama Layout */
    .wizard-panorama-layout {
        display: flex;
        flex-direction: column;
        height: auto;
        overflow: visible;
    }

    /* 3. Reset Column Styles for Stacking */
    .wizard-col, .wizard-col-group {
        height: auto;
        overflow: visible; /* No internal scroll bars, use body scroll */
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        flex: none; /* Don't expand, just fit content */
    }

    /* 4. Observances Section (The Missing Part) */
    .wizard-col-group {
        display: block; /* RESTORED: Was display: none */
    }

    /* Keep the Toolbar Sticky relative to the group */
    .observance-toolbar {
        position: sticky;
        top: 0;
        z-index: 100;
        border-top: 1px solid #e2e8f0;
    }

    /* 5. Split View on Tablet: Keep side-by-side but with fixed height */
    .observance-split-view {
        height: 500px; /* Fixed height window for scrolling observances */
        overflow: hidden;
        border-bottom: 1px solid #e2e8f0;
    }
    
    .wizard-sub-col {
        height: 100%;
        overflow-y: auto;
    }

    /* 6. Summary moves to bottom */
    .col-summary {
        order: 99;
        box-shadow: none;
        border-top: 8px solid #f1f5f9; /* Visual separation */
    }
}

/* Mobile (Small Screens): Full Vertical Stack */
@media (max-width: 768px) {
    /* 1. Stack the Observance Lists Vertically */
    .observance-split-view {
        flex-direction: column;
        height: auto; /* Let it grow naturally */
        overflow: visible;
    }

    .wizard-sub-col {
        height: auto;
        overflow: visible;
        border-left: none;
        border-top: 1px dashed #e2e8f0;
        padding: 16px;
        max-height: 300px; /* Cap height per list so it doesn't dominate */
        overflow-y: auto;  /* Allow scrolling if list is huge */
    }

    /* 2. Adjust Sticky Toolbar */
    .observance-toolbar {
        padding: 12px 16px;
        top: -1px; /* Ensure it catches */
    }

    /* 3. Header & Footer Tweaks */
    .wizard-header { padding: 12px 16px; }
/* --- FOOTER RATIO FIX --- */
    .wizard-footer-minimal { 
        padding: 12px 16px; 
        gap: 12px;
        display: flex; /* Ensure flexbox is active */
    }
    
    /* 1. Back Button: Shrink to fit text */
    .btn-back-small {
        flex: 0 0 auto; /* Don't grow, don't shrink */
        width: auto;
        padding: 12px 16px;
        text-align: center;
    }
    
    /* 2. Checkout Button: Fill remaining space */
    .btn-checkout-action {
        flex: 1; /* Grow to fill 100% of remaining width */
        width: 100%; 
        font-size: 1rem;
        padding: 12px 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}


/* =========================================
   MOBILE ACCORDION & STICKY FOOTER
   ========================================= */

/* Default State (Desktop): Hide Mobile Toggles */
.mobile-accordion-toggle { display: none; }
.desktop-only { display: block; }

@media (max-width: 768px) {
    /* 1. STICKY FOOTER SETUP */
    .wizard-footer-minimal { 
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 1000;
        padding: 16px; 
        gap: 12px;
        display: flex;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.1); /* Lift it visually */
    }
    
    /* Footer Buttons Ratio (30% Back / 70% Go) */
    .btn-back-small {
        flex: 0 0 auto; 
        width: auto;
        padding: 12px 16px;
    }
    .btn-checkout-action {
        flex: 1; 
        width: 100%; 
        font-size: 1rem;
        padding: 12px 20px;
        display: flex; align-items: center; justify-content: center;
    }

    /* 2. MAIN LAYOUT SCROLLING */
    /* Add padding to bottom so content isn't hidden behind sticky footer */
    .wizard-body-fullscreen {
        padding-bottom: 90px; /* Footer height + buffer */
        overflow-y: auto;
    }
    .wizard-screen { height: auto; overflow: visible; }
    .wizard-panorama-layout { display: block; height: auto; overflow: visible; }

    /* 3. ACCORDION SYSTEM */
    .desktop-only { display: none !important; } /* Hide duplicate titles */

    /* The Trigger Button */
    .mobile-accordion-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: white;
        border: none;
        border-bottom: 1px solid #e2e8f0;
        padding: 16px 20px;
        font-size: 0.95rem;
        font-weight: 700;
        color: #1e293b;
        cursor: pointer;
        transition: background 0.2s;
    }
    .mobile-accordion-toggle:active { background: #f8fafc; }
    
    /* Icon Rotation */
    .acc-icon { transition: transform 0.3s ease; color: #94a3b8; font-size: 0.8rem; }
    .active .acc-icon { transform: rotate(180deg); color: #3b82f6; }
    .active .acc-title { color: #3b82f6; }

    /* The Content Container (Hidden by default on mobile) */
    .mobile-collapsible-content {
        display: none;
        padding: 16px;
        background: #fcfcfc;
        border-bottom: 1px solid #e2e8f0;
    }

    /* OPEN STATE */
    .active .mobile-collapsible-content {
        display: block;
        animation: slideDownMobile 0.3s ease-out;
    }

    /* 4. RESET COLUMN STYLES */
    .wizard-col, .wizard-col-group {
        border: none; padding: 0; margin: 0;
        height: auto; overflow: visible;
        background: white;
    }
    
    /* Fix Observances Layout inside Accordion */
    /* Ensure the split view fills that height */
    .observance-split-view {
        flex: 1; 
        display: flex; 
        overflow: hidden; 
        min-height: 0;
        height: 100%; /* <--- CRITICAL */
    }

    /* Ensure the lists can scroll */
    .wizard-sub-col {
        flex: 1; 
        padding: 20px 24px; 
        overflow-y: auto; /* <--- This enables the scrollbar */
        display: flex; 
        flex-direction: column;
        height: 100%; /* <--- CRITICAL */
    }
    .observance-toolbar { padding: 0 0 16px 0; background: transparent; top: 0; }
}

@keyframes slideDownMobile {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}




/* =========================================
   NEW OBSERVANCES SECTION - NO SCROLL
   ========================================= */

/* Main Container - NO HEIGHT CONSTRAINT, NO SCROLLING */
.wizard-col-group {
    display: flex; 
    flex-direction: column; 
    border-right: 1px solid #e2e8f0; 
    background: #fcfcfc;
    overflow: visible; /* Changed from hidden - allow content to flow */
    padding: 0; /* Remove padding, sections handle their own */
}

/* Search Section (Always Visible at Top) */
.observance-search-section {
    padding: 20px 24px;
    background: white;
    border-bottom: 2px solid #e2e8f0;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.observance-search-container {
    flex: 1;
    position: relative;
}

.observance-search-input {
    width: 100%;
    padding: 12px 12px 12px 42px;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.95rem;
    transition: all 0.2s;
}

.observance-search-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.observance-counter {
    font-size: 0.9rem;
    font-weight: 700;
    color: #3b82f6;
    background: #eff6ff;
    padding: 8px 16px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Content Area - NO SCROLLING */
.observance-content-area {
    padding: 0;
    overflow: visible; /* No scroll */
}

/* Section Container */
.obs-section {
    border-bottom: 1px solid #e2e8f0;
}

/* Section Header (Clickable) */
.obs-section-header {
    width: 100%;
    padding: 16px 24px;
    background: #fafafa;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
}

.obs-section-header:hover {
    background: #f1f5f9;
}

.obs-section-header:active {
    background: #e2e8f0;
}

.obs-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
}

.obs-section-icon {
    font-size: 1.1rem;
}

.obs-count {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 500;
}

.obs-section-toggle {
    font-size: 0.8rem;
    color: #94a3b8;
    transition: transform 0.3s ease;
}

.obs-section.expanded .obs-section-toggle {
    transform: rotate(180deg);
}

/* Section Content (Collapsible) */
.obs-section-content {
    max-height: 2000px; /* Large enough for any content */
    overflow: visible;
    transition: max-height 0.3s ease;
    padding: 0;
}

.obs-section-content.collapsed {
    max-height: 0;
    overflow: hidden;
}

/* Popular Section - Grid Layout */
#popularContent {
    padding: 16px 24px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

/* Regional/International Content - Group Layout */
#regionalContent,
#internationalContent,
#religiousContent {
    padding: 12px 24px 16px 24px;
}

/* Group Title */
.obs-group-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #64748b;
    letter-spacing: 0.05em;
    margin-top: 16px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px dashed #e2e8f0;
}

.obs-group-title:first-child {
    margin-top: 0;
}

/* Observance Item */
.obs-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    transition: all 0.15s;
    margin-bottom: 8px;
}

.obs-item:hover {
    border-color: #3b82f6;
    background: #f0f9ff;
    transform: translateX(2px);
}

.obs-item.selected {
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 0 0 1px #2563eb;
}

.obs-item.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.obs-item.disabled:hover {
    transform: none;
    border-color: #e2e8f0;
    background: white;
}

.obs-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    width: 32px;
    text-align: center;
}

.obs-content {
    flex: 1;
    min-width: 0;
}

.obs-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
}

.obs-lang-badge {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 2px;
}

.obs-check {
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e1;
    border-radius: 4px;
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s;
}

.obs-item.selected .obs-check {
    background: #2563eb;
    border-color: #2563eb;
}

.obs-item.selected .obs-check::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.85rem;
    font-weight: 700;
}

/* Popular Item - Card Style */
#popularContent .obs-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 12px;
    gap: 8px;
}

#popularContent .obs-icon {
    font-size: 2rem;
    width: auto;
}

#popularContent .obs-label {
    font-size: 0.85rem;
}

#popularContent .obs-lang-badge {
    font-size: 0.7rem;
}

#popularContent .obs-check {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
}

/* Empty State */
.obs-empty {
    padding: 40px 24px;
    text-align: center;
    color: #94a3b8;
    font-size: 0.9rem;
}

/* AA Green Checkmark Icon */
.obs-check-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    background: #059669;  /* AA compliant green */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.3);
    z-index: 1;
}

.obs-result-card {
    position: relative; /* Add if not present */
    cursor: pointer;
}

.obs-result-card.selected {
    border-color: #059669;
}

.obs-result-card:not(.disabled):hover {
    border-color: #10b981;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.15);
}

/* =========================================
   RESPONSIVE - TABLET
   ========================================= */

@media (max-width: 1024px) {
    .wizard-col-group {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }

    .observance-search-section {
        position: relative; /* Not sticky on tablet */
    }

    #popularContent {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}

/* =========================================
   RESPONSIVE - MOBILE
   ========================================= */

@media (max-width: 768px) {
    .observance-search-section {
        padding: 16px;
        flex-direction: column;
        align-items: stretch;
    }

    .observance-counter {
        text-align: center;
    }

    .obs-section-header {
        padding: 14px 16px;
    }

    #popularContent {
        grid-template-columns: repeat(2, 1fr);
        padding: 12px 16px;
        gap: 8px;
    }

    #regionalContent,
    #internationalContent,
    #religiousContent {
        padding: 12px 16px;
    }

    .obs-item {
        padding: 12px;
    }

    .obs-icon {
        font-size: 1.3rem;
        width: 28px;
    }

    .obs-label {
        font-size: 0.85rem;
    }

    /* Make popular items slightly smaller on mobile */
    #popularContent .obs-item {
        padding: 12px 8px;
    }

    #popularContent .obs-icon {
        font-size: 1.6rem;
    }

    #popularContent .obs-label {
        font-size: 0.8rem;
    }
}


/* =========================================
   OBSERVANCES - SEARCH FIRST
   ========================================= */

/* Main Container */
.wizard-col-group {
    display: flex; 
    flex-direction: column; 
    border-right: 1px solid #e2e8f0; 
    background: #fcfcfc;
    overflow: visible;
    padding: 0;
}

/* Search Section */
.obs-search-first-section {
    padding: 24px 24px 20px 24px;
    background: white;
    border-bottom: 2px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.obs-search-first-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.obs-search-first-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.01em;
}

.obs-counter-first {
    font-size: 0.9rem;
    font-weight: 700;
    color: #3b82f6;
    background: #eff6ff;
    padding: 4px 12px;
    border-radius: 12px;
}

.obs-search-first-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.obs-search-first-icon {
    position: absolute;
    left: 16px;
    color: #64748b;
    pointer-events: none;
}

.obs-search-first-input {
    width: 100%;
    padding: 14px 45px 14px 48px;
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    font-size: 0.95rem;
    transition: all 0.2s;
    background: white;
}

.obs-search-first-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.obs-search-first-clear {
    position: absolute;
    right: 12px;
    width: 26px;
    height: 26px;
    border: none;
    background: #e2e8f0;
    border-radius: 50%;
    color: #64748b;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.obs-search-first-clear:hover {
    background: #cbd5e1;
    color: #1e293b;
}

.obs-search-first-hint {
    font-size: 0.85rem;
    color: #64748b; /* ✅ AA compliant */
    margin-top: 10px;
    font-style: italic;
}

/* Selected Items */
.obs-selected-first {
    padding: 16px 24px;
    background: #f0f9ff;
    border-bottom: 1px solid #bfdbfe;
}

.obs-selected-first-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #0369a1;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.obs-selected-first-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

.obs-selected-first-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: white;
    border: 1px solid #3b82f6;
    border-radius: 8px;
}

.obs-selected-first-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.obs-selected-first-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.obs-selected-first-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.obs-selected-first-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.2;
}

.obs-selected-first-lang {
    font-size: 0.75rem;
    color: #64748b;
}

.obs-selected-first-remove {
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #64748b;
    font-size: 1.1rem;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}

.obs-selected-first-remove:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* Content Area */
.obs-content-first {
    padding: 24px;
}

/* Search Results */
.obs-results-first {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (max-width: 768px) {
    .obs-results-first {
        grid-template-columns: 1fr;
    }
}

.obs-result-card {
    padding: 16px 18px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    transition: all 0.2s;
}

.obs-result-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.obs-result-card.selected {
    border-color: #3b82f6;
    background: #eff6ff;
}

.obs-result-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.obs-result-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}

.obs-result-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.obs-result-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}

.obs-result-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
}



.obs-result-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    color: #64748b;
}

.obs-result-meta-item {
    display: flex;
    gap: 6px;
}

.obs-result-meta-label {
    font-weight: 600;
    color: #475569;
}

/* Not Found State */
.obs-not-found-first {
    text-align: center;
    padding: 40px 20px;
}

.obs-not-found-message {
    font-size: 1rem;
    color: #1e293b;
    margin-bottom: 12px;
    line-height: 1.5;
}

.obs-not-found-meta {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 20px;
}

.obs-request-btn {
    padding: 10px 20px;
    background: #f1f5f9;
    color: #1e293b;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.obs-request-btn:hover {
    background: white;
    border-color: #3b82f6;
    color: #3b82f6;
}

/* Discovery Prompts */
.obs-discovery-first {
    padding: 20px 0;
}

.obs-discovery-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 14px;
}

.obs-discovery-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.obs-discovery-item {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.5;
    padding-left: 0;
}

/* AA Compliant Focus Indicators */
.obs-search-first-input:focus,
.format-card:focus,
.obs-result-card:focus {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
}

button:focus {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
}

/* Hidden State */
.hidden {
    display: none !important;
}

/* =========================================
   RESPONSIVE - TABLET
   ========================================= */

@media (max-width: 1024px) {
    .wizard-col-group {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }

    .obs-search-first-section {
        position: relative;
    }
}

/* =========================================
   RESPONSIVE - MOBILE
   ========================================= */

@media (max-width: 768px) {
    .obs-search-first-section {
        padding: 20px 16px 16px 16px;
    }

    .obs-search-first-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .obs-search-first-input {
        padding: 13px 40px 13px 44px;
        font-size: 0.9rem;
    }

    .obs-selected-first {
        padding: 14px 16px;
    }

    .obs-content-first {
        padding: 20px 16px;
    }

    .obs-result-card {
        padding: 14px 16px;
    }

    .obs-result-header {
        flex-direction: column;
        gap: 12px;
    }

}


/* =====================================================
   SUMMARY PANEL - IMPROVED HIERARCHY
   ===================================================== */

/* Wizard Layout */
.wizard-cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    height: 100%;
    overflow: hidden;
}

.wizard-col {
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e2e8f0;
    background: #fcfcfc;
   /* overflow: visible; */
}

.wizard-col:last-child {
    border-right: none;
}

.wizard-panel-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 24px 24px 0 24px;
    margin-bottom: 16px;
}

/* Summary Column */
.wizard-col-summary {
    display: flex;
    flex-direction: column;
    padding: 0;
    gap: 0;
}

/* Summary Sections */
.summary-section {
    padding: 20px 24px;
    border-bottom: 1px solid #f1f5f9;
}

.summary-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.summary-value {
    font-size: 0.95rem;
    color: #1e293b;
    line-height: 1.5;
}

/* Date Range Block */
.summary-primary {
    padding: 20px 24px;
    margin: 24px 24px 20px 24px;
    background: #f8fafc;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

/* Specs Block */
.summary-specs-block {
    padding: 16px 20px;
    margin: 0 24px 20px 24px;
    background: #fafafa;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.summary-specs-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.summary-specs-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.summary-spec-line {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.5;
}

.summary-spec-line dt {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.summary-spec-line dd {
    margin: 0;
    font-size: 0.9rem;
    color: #1e293b;
}

/* Config Code */
.summary-technical {
    opacity: 0.9;
}

.summary-config-code {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
    background: #f8fafc;
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    letter-spacing: 0.02em;
}

/* Price Block */
.summary-price-block {
    padding: 24px 20px;
    margin: 0 24px 20px 24px;
    background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%);
    border: 2px solid #059669;
    border-radius: 12px;
    text-align: center;
}

.summary-price-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #047857;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.summary-price-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #065f46;
    line-height: 1.2;
}

.summary-price-note {
    font-size: 0.85rem;
    color: #059669;
    font-weight: 500;
}

/* Footer Note */
.summary-footer-note {
    font-size: 0.85rem;
    color: #64748b;
    text-align: center;
    padding: 12px 24px;
    margin: 0 24px 24px 24px;
    background: #fafafa;
    border-radius: 8px;
    line-height: 1.5;
}

/* Mobile */
@media (max-width: 768px) {
    .wizard-col-summary {
        gap: 16px;
        padding: 16px;
    }
    
    .summary-price-value {
        font-size: 1.3rem;
    }
}


/* Top Progress Indicator */
.progress-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #94a3b8; /* Inactive color */
}

.progress-step.active {
    color: #0f172a; /* Active color */
    font-weight: 700;
}

.progress-dot {
    font-weight: 700;
    color: #cbd5e1;
}

/* Footer Action Group: Holds Date + Button */
.footer-action-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Date Display Styling */
.footer-date-display {
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569; /* Slate 600 */
    background: #f1f5f9;
    padding: 8px 12px;
    border-radius: 6px;
    white-space: nowrap;
    border: 1px solid #e2e8f0;
}

/* Mobile Tweaks */
@media (max-width: 768px) {
    .footer-action-group {
        width: 100%;
        flex-direction: column; /* Stack date above button on mobile */
        gap: 8px;
    }

    .footer-date-display {
        width: 100%;
        text-align: center;
        font-size: 0.85rem;
        padding: 6px;
    }

    #mainActionBtn {
        width: 100%;
    }
}

/* --- Unified Navigation Styles --- */

/* Wrapper for Back/Exit Buttons */
.nav-btn-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

.nav-btn-wrapper:hover .nav-home-btn {
    background: #f1f5f9;
    color: #0f172a;
}

.nav-label-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
}

/* Make all headers consistent height */
.header, 
.modal-header, 
.wizard-header {
    height: 72px; /* Fixed height for consistency */
    padding: 0 24px !important; /* Force padding consistency */
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e5e7eb;
    background: white;
}

/* Center Title for Template Modal */
.modal-title-center {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
}

/* Reset Footer Date Style to match "Total Pages" */
#footerDateRange {
    /* No special background, just text like the page count */
    background: transparent;
    padding: 0;
    border: none;
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .header, .modal-header, .wizard-header {
        height: 60px;
        padding: 0 16px !important;
    }
    
    .progress-step {
        display: none; /* Hide non-active steps on mobile? */
    }
    .progress-step.active {
        display: block;
    }
    .progress-dot {
        display: none;
    }
    
    .nav-label-text {
        display: none; /* Hide "Back/Exit" text on mobile to save space */
    }
}


/* Fix for Wizard Footer Stats Alignment */
.wizard-footer-minimal {
    justify-content: flex-end; /* Push button to right */
    gap: 16px;
}

/* Ensure Nav Stats look good on white background of wizard footer */
.wizard-footer-minimal .nav-status-label {
    color: #64748b;
}

.wizard-footer-minimal .nav-status-value {
    color: #0f172a;
}

/* Mobile: Stack Wizard Footer */
@media (max-width: 768px) {
    .wizard-footer-minimal {
        flex-direction: column;
        height: auto;
        gap: 12px;
        align-items: stretch;
    }
    
    .wizard-footer-minimal > div:first-child {
        margin-right: 0;
        justify-content: space-between;
        margin-bottom: 8px;
    }
    
    .btn-back-small {
        width: 100%; /* Full width back button on mobile */
        text-align: center;
        padding: 12px;
    }
}