/* Add these styles at the top of your CSS file */
.site-header {
    width: 100%;
    background: #9c0000;  /* Changed from white to dark red */
    padding: 10px 20px;  /* Changed padding */
    position: relative;
    z-index: 101;  /* Ensure it's above other elements */
    border-bottom: 1px solid #800000;  /* Darker shade of red for border */
    margin-bottom: 20px;
}

.logo-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;  /* Changed from center to left */
}

.site-logo {
    max-height: 60px;
    width: auto;
    display: block;  /* Ensure proper display */
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background: #f5f5f5;
}

section {
    position: relative;
    z-index: 98;
    max-width: 800px; /* Match preview width */
    margin: 20px auto 0;  /* Added top margin */
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;  /* Center the preview block */
}

/* Full width white background for preview area */
.preview-section {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background: white;
    z-index: 99;
}

/* Full width background behind preview */
.preview-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: #f5f5f5;
    z-index: 99;
}

/* Preview Block - sticky with fade overlay */
#block {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 75%;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    box-sizing: border-box;
    border: 3px solid #ddd;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    overflow: hidden;
    background: white;
}

/* Container to maintain content width */
.preview-section-inner {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

/* Update fade overlay below preview */
.preview-section::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: 0;
    right: 0;
    height: 50px;
    background: linear-gradient(to bottom,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,0) 100%);
    pointer-events: none;
    z-index: 98;
}

#design {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    display: block;
    border-radius: 13px;
}

/* Step Headers */
.h2 {
    margin: 0;
    padding: 15px;
    border-bottom: 1px solid #ddd;
}

.h2 mark {
    background: #2196F3;
    color: white;
    padding: 5px 10px;
    margin-right: 10px;
}

.h2 h2 {
    display: inline;
    font-size: 18px;
}

/* Step Content */
.step {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px; /* Only keep spacing between steps */
}

/* Remove ALL padding from menu items */
figure.type, figure.house {
    margin: 0;
    padding: 0; /* Remove the 5px padding */
    text-align: center;
    cursor: pointer;
}

figure.type p, figure.house p {
    margin: 0;
    padding: 0; /* Remove the 2px padding */
    background: none;
}

/* Door type specific sizes */
figure.type img {
    height: 60px;
    display: block;
    box-shadow: none; /* Remove shadow */
}

figure.type#single img {
    width: 60px;
}

figure.type#double img {
    width: 120px;
}

figure.type#wide img {
    width: 180px;
}

/* House type specific sizes */
figure.house img {
    width: 50px;
    height: 50px;
    display: block;
    object-fit: cover;
    box-shadow: none;
    border-radius: 8px;
    transition: transform 0.2s ease;
}

figure.house:hover img {
    transform: scale(1.05);
}

figure.house.active img {
    border: 2px solid #00533b;
    transform: scale(1.05);
}

/* Active states - enhanced glow */
figure.type p.active, figure.house p.active {
    background: rgba(0, 83, 59, 0.15); /* Slightly more opaque */
    box-shadow: 
        0 0 10px rgba(0, 83, 59, 0.3),  /* Inner glow */
        0 0 20px rgba(0, 83, 59, 0.2),  /* Middle glow */
        0 0 30px rgba(0, 83, 59, 0.1);  /* Outer glow */
}

/* Active state - ambient background only */
figure.type p.active {
    background: rgba(0, 83, 59, 0.1); /* Light green background */
    border: none;
    box-shadow: none;
}

/* Hover state */
figure.type p:hover, figure.house p:hover {
    background: rgba(0, 83, 59, 0.05);
}

figure.type figcaption, figure.house div {
    margin-top: 1px;
    font-size: 11px;
    color: #333;
}

/* Menu Navigation */
.menu-nav {
    position: sticky;
    top: calc(75vh - 60px);  /* Position it just below the preview */
    z-index: 90;  /* Below the preview but above content */
    background: linear-gradient(to bottom, 
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,1) 20%);
    padding-top: 20px;  /* Add padding to make fade more visible */
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.nav-item {
    padding: 10px 20px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 16px;
    color: #666;
    border-radius: 4px;
    transition: all 0.3s;
}

.nav-item:hover {
    background: #f0f0f0;
    color: #333;
}

.nav-item.active {
    background: #2196F3;
    color: white;
}

/* Options Container */
.options-container {
    width: 100%;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.options-section {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 25px;
    margin: 0;
    padding: 0;
}

.options-section.active {
    display: grid;
}

/* Fixed Preview Area */
.preview-container {
    position: sticky;
    top: 0;
    width: 100%;
    background: #000;
    z-index: 100;
    padding: 20px 0;
}

#housePreview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#doorPreview {
    position: absolute;
    /* We'll set these based on the house type selected */
    width: 30%;
    height: 60%;
    left: 35%;
    top: 20%;
}

/* Step Menu */
.step-menu {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

/* Option Items */
.option-item {
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.option-item:hover {
    border-color: #2196F3;
    background: rgba(33, 150, 243, 0.05);
}

.option-item.selected {
    border-color: #2196F3;
    background: rgba(33, 150, 243, 0.1);
}

/* Remove any old preview styles */
.preview-container, .preview-window, #housePreview, #doorPreview {
    display: none;
}

/* Universal Step Headers */
.step-header, .h2 {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    width: 100%;
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;  /* Add padding to create space above the line */
}

.step-number, .h2 mark {
    background: #00533B;
    color: white;
    padding: 8px 15px;
    font-weight: bold;
    margin: 0;
}

.step-title, .h2 h2 {
    background: none;
    color: #333;
    padding: 8px 15px;
    flex: 1;
    font-weight: bold;
    margin: 0;
    font-size: 16px;
    display: inline;
}

/* Universal Button/Image Styles */
figure p, .option-item {
    margin: 0;
    padding: 0;
    background: none;
    cursor: pointer;
}

/* Universal Active State */
figure p.active, 
.option-item.active,
figure.type p.active, 
figure.house p.active {
    background: rgba(0, 83, 59, 0.15);
    box-shadow: 
        0 0 10px rgba(0, 83, 59, 0.3),
        0 0 20px rgba(0, 83, 59, 0.2),
        0 0 30px rgba(0, 83, 59, 0.1);
    border: none;
}

/* Universal Hover State */
figure p:hover,
.option-item:hover {
    background: rgba(0, 83, 59, 0.05);
}

/* Remove the clear divider class */
.c {
    display: none; /* Hide it instead of removing to prevent layout issues */
}

/* Door Types and House Types */
figure.type img, figure.house img {
    height: 50px;
    width: auto;
}

/* Panel Design section layout */
#style {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    padding: 20px;
    align-items: start;
    justify-items: center;
    width: 100%;
}

/* Panel Design icons */
figure.panel {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 140px;
}

figure.panel img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1;
    object-fit: contain;
    display: block;
    padding: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Active state for panel designs */
figure.panel.active img {
    box-shadow: 0 4px 12px rgba(0, 83, 59, 0.2);
    transform: translateY(-2px);
    border: 2px solid rgba(0, 83, 59, 0.3);
}

/* Hover state for panel designs */
figure.panel:hover img {
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

/* Mobile adjustments */
@media screen and (max-width: 767px) {
    #style {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 15px !important;
        padding: 15px;
        width: 100% !important;
    }

    figure.panel {
        width: 100% !important;
        max-width: none;
    }

    .step {
        width: 100%;
        display: block;
    }
}

/* Color option icons */
#colors figure.option {
    position: relative; /* For absolute positioning of glow effect */
}

#colors figure.option img {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    border: 2px solid #ddd;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    object-fit: cover;
    display: block;
}

/* Active state - ambient glow */
#colors figure.option.active img {
    box-shadow: 
        0 0 15px rgba(0, 83, 59, 0.4),
        0 0 30px rgba(0, 83, 59, 0.2),
        0 0 45px rgba(0, 83, 59, 0.1);
}

/* Remove any background from p tags */
#colors figure.option p {
    background: none;
}

#colors figure.option p.active {
    background: rgba(0, 83, 59, 0.15);
}

/* Adjust grid spacing for icons */
#style, .options-section {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 15px;
}

/* Common caption styling */
figure.panel figcaption, figure.option figcaption {
    font-size: 12px;
    color: #333;
    line-height: 1.2;
    text-align: center;
    margin-top: 4px;
}

/* Universal figure styles */
figure {
    margin: 0;
    text-align: center;
    cursor: pointer;
    line-height: normal;
    display: flex;
    flex-direction: column;
    gap: 8px; /* Space between image and caption */
}

figure p {
    margin: 0;
    padding: 0;
    background: none;
}

/* Remove this as it might be adding white space */
figure img {
    display: block;
    margin: 0;
    padding: 0;
}

/* Update figure styles to handle text wrapping */
figure figcaption {
    font-size: 10px;
    color: #333;
    line-height: 1.2;
    word-wrap: break-word;
    max-width: 100%;
    white-space: normal;
    padding: 0 2px;
}

/* Larger text for captions */
figure.option figcaption {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    line-height: 1.3;
    word-wrap: break-word;
    text-align: center;
    width: 100%;
    padding: 8px 4px;
    margin-top: 8px;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Active State - ONLY the glow */
figure p.active {
    background: rgba(0, 83, 59, 0.15);
    box-shadow: 
        0 0 10px rgba(0, 83, 59, 0.3),
        0 0 20px rgba(0, 83, 59, 0.2),
        0 0 30px rgba(0, 83, 59, 0.1);
}

/* Hover State - just the background */
figure p:hover {
    background: rgba(0, 83, 59, 0.05);
}

#doorOverlays {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.door-overlay {
    position: absolute;
    background-repeat: no-repeat;
}

/* Color overlay specific styling */
.door-overlay[id*="colors"] {
    background-size: 100% 100% !important; /* Full size like other overlays */
    background-repeat: no-repeat !important; /* No repeating */
    opacity: 0.5; /* Keep 50% transparent */
}

/* Window overlay specific styling - make blacks opaque, everything else transparent */
.window-overlay {
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    mix-blend-mode: multiply !important;
    opacity: 1 !important;
}

/* Common styles for all option sections */
.door-types, .house-types, #style, .options-section {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    padding: 20px;
}

/* Standardize all icons/images */
figure.type img, 
figure.house img,
figure.panel img,
figure.option img {
    width: 75px;
    height: 75px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Common caption styling for all sections */
figure.type figcaption,
figure.house div,
figure.panel figcaption,
figure.option figcaption {
    font-size: 12px;
    color: #333;
    line-height: 1.2;
    text-align: center;
    margin-top: 4px;
    text-transform: capitalize;
}

/* Remove extra spacing */
.step {
    width: 100%;
    margin-bottom: 10px;
}

.door-types, .house-types {
    margin-bottom: 0;
}

/* Update the house setup layout */
#houseSetup .door-types,
#houseSetup .house-types {
    display: grid;
    grid-template-columns: repeat(3, auto);  /* 3 columns for door types */
    justify-content: center;
    gap: 15px;
    padding: 15px;
}

#houseSetup .house-types {
    grid-template-columns: repeat(7, auto);  /* 7 columns for house types */
}

/* Keep the standardized image sizes */
#houseSetup figure.type img,
#houseSetup figure.house img {
    width: 75px;
    height: 75px;
    object-fit: contain;
}

/* Door type images - properly resize to 70px height */
#houseSetup figure.type img {
    height: 70px;
    width: auto;
    object-fit: contain;
    box-shadow: none;
    transition: all 0.2s ease;
    display: block;
}

/* Container for composed door images */
#houseSetup figure.type p {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row; /* Force horizontal layout */
    gap: 12px;
    align-items: center;
}

/* Door types container - updated for 2-row layout with specific order */
#houseSetup .door-types {
    display: grid;
    grid-template-rows: auto auto;  /* Two rows */
    grid-template-columns: repeat(3, auto);  /* 3 columns */
    justify-content: center;
    gap: 20px;
    padding: 15px;
    width: 100%;
}

/* Position items in first row (3 items) */
#houseSetup .door-types figure.type:nth-child(1) { /* single */
    grid-column: 1;
    grid-row: 1;
}
#houseSetup .door-types figure.type:nth-child(2) { /* double */
    grid-column: 2;
    grid-row: 1;
}
#houseSetup .door-types figure.type:nth-child(6) { /* triple */
    grid-column: 3;
    grid-row: 1;
}

/* Position items in second row (3 items) */
#houseSetup .door-types figure.type:nth-child(4) { /* double wide */
    grid-column: 1;
    grid-row: 2;
}
#houseSetup .door-types figure.type:nth-child(3) { /* single-double */
    grid-column: 2;
    grid-row: 2;
}
#houseSetup .door-types figure.type:nth-child(5) { /* double-single */
    grid-column: 3;
    grid-row: 2;
}

/* Mobile adjustments */
@media screen and (max-width: 767px) {
    /* Scale down preview */
    #block {
        width: 95%;
    }
    
    /* Update door types layout for mobile */
    #houseSetup .door-types {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding: 10px;
    }
    
    /* Scale down door types for mobile */
    #houseSetup figure.type {
        padding: 5px;
        width: calc(33.33% - 10px); /* Take up one third of space minus gap */
        min-width: 80px; /* Minimum width to maintain readability */
    }
    
    #houseSetup figure.type img {
        height: 40px;
        width: auto;
    }
    
    /* Update house types grid to wrap */
    #houseSetup .house-types {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding: 10px;
    }
    
    /* Center and wrap all menus */
    .door-types, 
    .house-types, 
    #style, 
    #colors, 
    #windows, 
    #handles, 
    #hinges,
    .options-section {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding: 10px;
    }
    
    /* Scale down panel designs */
    figure.panel img {
        height: 100px !important;
    }
    
    /* Scale down option images */
    figure.option img {
        width: 60px;
        height: 60px;
    }

    /* Add padding at bottom for camera buttons */
    body {
        padding-bottom: 100px;
    }
    
    /* Ensure section content doesn't cover camera area */
    section {
        margin-bottom: 100px;
    }

    /* Update preview wrapper to control the sticky background height */
    .preview-wrapper {
        margin: 0;
    }

    /* Ensure the preview background only covers the preview area plus 5px */
    .preview-background-sticky {
        height: 12vh;
    }

    /* Remove the top margin from first step to avoid gaps */
    .step:first-of-type {
        margin-top: 0;
    }
    
    /* Adjust caption size for better readability on mobile */
    #houseSetup figure.type figcaption {
        font-size: 11px;
        margin-top: 3px;
    }
}

/* Door type container */
#houseSetup figure.type {
    border-radius: 8px;
    width: fit-content;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: all 0.2s ease;
    margin: 0;
    padding: 10px 15px;
}

/* Caption */
#houseSetup figure.type figcaption {
    margin: 5px 0 0 0;
    text-align: center;
    font-size: 12px;
    width: 100%; /* Full width of the figure */
}

/* Active/Hover states */
#houseSetup figure.type.active,
#houseSetup figure.type:hover {
    background: rgba(0, 83, 59, 0.1);
    box-shadow: 0 6px 12px rgba(0,0,0,0.3);
    transform: translateY(-2px);
} 

/* Step Menu Styling */
.step {
    width: 100%;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

/* Door Types Grid */
.door-types {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding: 10px;
    width: 100%;
}

/* House Types Grid */
.house-types {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: 10px;
    padding: 10px;
    width: 100%;
}

/* Door Type Items */
figure.type {
    margin: 0;
    padding: 5px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: white;
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content; /* Only take up needed space */
    justify-self: center; /* Center in grid cell */
}

figure.type p {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0; /* Remove gap between doors */
}

figure.type img {
    width: auto;
    height: 40px;
    object-fit: contain;
    display: block;
    margin: 0;
    padding: 0;
}

/* Remove any extra spacing between multiple doors */
figure.type[id="double"] img,
figure.type[id="doubleWide"] img {
    margin: 0;
    padding: 0;
}

/* Mobile adjustments */
@media screen and (max-width: 767px) {
    figure.type {
        padding: 3px;
    }

    figure.type img {
        height: 35px;
    }
}

/* House Type Items */
figure.house {
    margin: 0;
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
    background: white;
    border: 2px solid transparent;
}

figure.house img {
    width: 40px; /* Smaller width */
    height: 40px; /* Smaller height */
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Active States */
figure.type.active,
figure.house.active {
    border-color: #00533b;
    background: rgba(0, 83, 59, 0.05);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

figure.type.active p,
figure.house.active p {
    background: rgba(0, 83, 59, 0.1);
    color: #00533b;
    font-weight: 500;
}

/* Hover States */
figure.type:hover,
figure.house:hover {
    border-color: #00533b;
    background: rgba(0, 83, 59, 0.02);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Step Headers */
.step-header {
    width: 100%;
    padding: 15px 20px;
    background: #f8f8f8;
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid #eee;
}

.step-number {
    font-size: 14px;
    font-weight: 600;
    color: #00533b;
    margin-bottom: 4px;
}

.step-title {
    font-size: 18px;
    font-weight: 500;
    color: #333;
}

/* Mobile adjustments */
@media screen and (max-width: 767px) {
    .door-types {
        grid-template-columns: repeat(3, 1fr); /* Keep 3 columns */
        gap: 5px;
        padding: 5px;
    }

    .house-types {
        grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
        gap: 5px;
        padding: 5px;
    }

    figure.type,
    figure.house {
        padding: 5px;
    }

    figure.type img {
        height: 35px; /* Even smaller on mobile */
    }

    figure.house img {
        width: 35px; /* Even smaller on mobile */
        height: 35px;
    }

    figure.type figcaption,
    figure.house figcaption {
        font-size: 10px;
        margin-top: 3px;
    }
}