/* ==========================================================================
   Design Configurator Page Specific Styles
   ========================================================================== */

/* --- CSS Variables --- */
:root {
    /* Schematics */
    --schematic-frame-color: #b0b0b0;
    --schematic-outer-frame-thickness: 8px;
    --schematic-inner-mullion-thickness: 4px;
    --schematic-panel-background: white;
    --schematic-display-height: 50vh;
    --schematic-display-width: 100%;

    /* Forms & Interactions */
    --form-option-bg: #f8f9fa; /* Previously #f7f7f0 */
    --form-option-border: #dee2e6; /* Softer border */
    --form-option-selected-border-color: #007bff; /* Primary blue for selection */
    --form-option-selected-bg: #e7f3ff; /* Lighter blue for selected bg */
    --form-text-primary: #212529; /* Darker primary text */
    --form-text-secondary: #495057; /* Secondary text */
    --form-title-color: #212529;
    --price-addon-color: #198754; /* Bootstrap success green */
}

/* --- Utility Classes --- */
.hidden {
    display: none !important;
}

/* --- Door Schematics --- */
.door-schematic-wrapper.hidden {
    display: none;
}
.door-schematic-wrapper {
    margin-bottom: 15px;
}

.garage-door-frame-container {
    display: block;
    background-color: var(--schematic-frame-color);
    padding: var(--schematic-outer-frame-thickness);
    box-sizing: border-box;
    width: var(--schematic-display-width);
    height: var(--schematic-display-height);
}

.garage-door-inner-grid {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

.grid-row {
    flex: 1;
    display: flex;
}

.grid-row:not(:last-child) {
    border-bottom: var(--schematic-inner-mullion-thickness) solid
        var(--schematic-frame-color);
}

.grid-cell {
    flex: 1;
    background-color: var(--schematic-panel-background);
}

.grid-cell:not(:last-child) {
    border-right: var(--schematic-inner-mullion-thickness) solid
        var(--schematic-frame-color);
}

.schematic-label-below {
    text-align: center;
    margin-top: 5px;
    font-size: 0.9em;
    color: var(--form-text-secondary);
}

/* --- Page Layout --- */
.design-configurator-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px; /* Adjusted gap */
}

/* Left column (previews) */
.design-configurator-page > div:first-child {
    /* Targets .design-image */
    position: -webkit-sticky;
    position: sticky;
    top: 100px; /* Adjust based on your header/nav height */
    align-self: flex-start;
    height: calc(100vh - 120px); /* Adjust top + desired bottom margin */
    overflow-y: auto;
    padding-right: 15px; /* Slight padding from the gap */
}

/* --- General Form & Configurator Styles --- */
#garageDoorConfigForm {
    display: flex;
    flex-direction: column;
    gap: 35px; /* Spacing between sections */
}

.config-section {
    margin-bottom: 20px; /* Reduced margin, gap on form is primary */
}

.config-title {
    /* For "Choose your door size", etc. */
    font-size: 1.3rem; /* Slightly smaller title */
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--form-title-color);
}

/* Container for radio button options (Door Size, Glass Type, Custom Finish box) */
.options-container.radio-options {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Spacing between selectable boxes */
}

/* Wrapper for each selectable box style option */
.option-item-wrapper {
    background-color: var(--form-option-bg);
    padding: 18px 22px;
    border-radius: 10px;
    border: 1px solid var(--form-option-border);
    transition: border-color 0.2s ease, box-shadow 0.2s ease,
        background-color 0.2s ease;
}

/* Native radio button hiding */
.options-container input[type="radio"],
.finish-swatches input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Clickable labels for box-style options */
.option-item-wrapper label.option-item {
    cursor: pointer;
    display: block;
    width: 100%;
}

.option-item-wrapper label.option-item h4 {
    font-size: 1rem; /* Slightly smaller text */
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--form-text-primary);
}

.option-item-wrapper label.option-item p.option-description {
    font-size: 0.85rem;
    color: var(--form-text-secondary);
    line-height: 1.45;
    margin-bottom: 6px;
}

.option-item-wrapper label.option-item .price-addon {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--price-addon-color);
    display: block;
    margin-top: 4px;
}

/* Selected state for box-style option wrappers */
.option-item-wrapper:has(input[type="radio"]:checked) {
    border-color: var(--form-option-selected-border-color);
    background-color: var(--form-option-selected-bg);
    box-shadow: 0 0 0 1px var(--form-option-selected-border-color),
        0 3px 6px rgba(0, 123, 255, 0.1);
}

/* --- Frame Finish Swatches (Circular Style) --- */
.finish-swatches.radio-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Spacing between circular swatches */
    align-items: center;
    margin-bottom: 0; /* Remove bottom margin here, handled by #selectedFinishInfoOutput */
}

.finish-swatch-wrapper {
    padding: 0;
    border: none;
    background-color: transparent;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

label.finish-swatch {
    display: block;
    width: 38px; /* Diameter of the circle */
    height: 38px; /* Diameter of the circle */
    border-radius: 50%; /* Makes it a circle */
    cursor: pointer;
    border: 2px solid #d0d0d0; /* Default border for unselected */
    box-sizing: border-box;
    transition: border-color 0.2s ease, transform 0.15s ease,
        box-shadow 0.2s ease;
    font-size: 0; /* Hide text if any in label */
    color: transparent;
    text-indent: -9999px;
    overflow: hidden;
    margin-bottom: 4px; /* Space if name is below */
}

label.finish-swatch:hover {
    transform: scale(1.1);
}

/* Selected state for circular swatch LABEL */
.finish-swatch-wrapper:has(input[type="radio"]:checked) label.finish-swatch {
    border-color: var(--form-option-selected-border-color);
    box-shadow: 0 0 0 2px white,
        /* Inner "gap" to mimic target */ 0 0 0 4px
            var(--form-option-selected-border-color); /* Outer colored ring */
    transform: scale(1.05);
}
/* IMPORTANT: The .finish-swatch-wrapper:has(input[type="radio"]:checked) rule that applies a border and shadow to the wrapper
   should be removed or overridden for the circular swatches if you don't want the wrapper itself to have a border.
   The circular style applies selection indication directly to the label.finish-swatch.
*/
.finish-swatches .finish-swatch-wrapper:has(input[type="radio"]:checked) {
    border-color: transparent; /* Ensure wrapper doesn't get a border */
    box-shadow: none; /* Ensure wrapper doesn't get a shadow */
    background-color: transparent; /* Ensure wrapper stays transparent */
}

/* Hidden description items within each swatch wrapper */
.finish-swatches .finish-description-item,
.options-container .option-item-wrapper .finish-description-item {
    /* For Custom Finish's description */
    display: none !important; /* JS will read from these */
}

/* --- Centralized Output for Selected Finish Information --- */
#selectedFinishInfoOutput {
    margin-top: 15px;
    margin-bottom: 20px; /* Space before the "Custom Finish" option box */
    padding: 0;
}

#selectedFinishInfoOutput h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 3px;
    color: var(--form-text-primary);
}

#selectedFinishInfoOutput p {
    font-size: 0.85rem;
    color: var(--form-text-secondary);
    line-height: 1.45;
}

/* --- Header Styles (within the form area) --- */
.config-header {
    margin-bottom: 30px;
}

.config-header .config-title {
    /* Main page title H1 */
    font-size: 2rem;
    font-weight: 700;
    color: var(--form-title-color);
    margin-bottom: 8px;
}

.config-header .config-subtitle {
    font-size: 1.05rem;
    color: var(--form-text-secondary);
    max-width: 550px; /* Control line length */
    line-height: 1.5;
}

/* --- Price Breakdown --- */
.price-breakdown {
    background-color: var(--form-option-bg);
    padding: 20px 25px;
    border-radius: 10px;
    border: 1px solid var(--form-option-border);
    margin-top: 10px; /* Reduced margin */
}

.price-breakdown h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--form-text-primary);
}

.price-line.simple-price-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.05rem;
}

.price-line .label {
    color: var(--form-text-secondary);
}

.price-line .amount {
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--price-addon-color);
}
.price-line .amount small {
    font-size: 0.75rem;
    font-weight: 400;
    color: #6c757d;
    display: block;
    text-align: right;
    margin-top: 2px;
}

/* --- Submit Button --- */
.submit-button-container {
    text-align: center;
    margin-top: 25px;
}

.submit-button {
    background-color: #28a745;
    color: white;
    padding: 14px 28px;
    font-size: 1.1rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease,
        box-shadow 0.2s ease;
    /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); */
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    justify-content: center;
}

.submit-button:hover {
    background-color: #218838;
    /* transform: translateY(-2px); */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}
.submit-button:active {
    transform: translateY(0px);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

/* --- Footnote --- */
.config-footnote {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 25px;
    text-align: center;
    line-height: 1.4;
}

/* Utility: Remove margin for selected finish info output if empty or handled by CSS */
#selectedFinishInfoOutput:empty {
    margin-top: 0;
    margin-bottom: 0;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    /* Adjust breakpoint for 2-column to 1-column switch */
    .design-configurator-page {
        grid-template-columns: 1fr; /* Stack columns */
        gap: 30px;
    }
    .design-configurator-page > div:first-child {
        /* Left column (previews) */
        position: static; /* Remove sticky positioning */
        height: auto;
        overflow-y: visible;
        padding-right: 0;
        margin-bottom: 30px; /* Space before form starts */
    }
    /* Adjust schematic height for smaller screens if 50vh is too much in single column */
    :root {
        --schematic-display-height: 40vh;
    }
}

@media (max-width: 768px) {
    .config-header .config-title {
        font-size: 1.8rem;
    }
    .config-header .config-subtitle {
        font-size: 1rem;
    }
    .options-container {
        gap: 10px;
    }
    .option-item-wrapper {
        padding: 15px 20px;
    }
    .finish-swatches.radio-swatches {
        gap: 10px;
    }
    label.finish-swatch {
        width: 32px; /* Smaller circles on mobile */
        height: 32px;
    }
    .price-line.simple-price-display {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    .price-line .amount small {
        text-align: left;
    }
    .submit-button {
        padding: 12px 25px;
        font-size: 1.05rem;
    }
    .design-image {
        display: none;
    }
}