body {
    font-family: 'Poppins', sans-serif !important;
    background: white;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    height: 100vh;
    overflow: hidden;
}

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

/* Sidebar Styles */
.sidebar {
    width: 110px;
    background: rgb(91 91 91 / 80%);
    padding: 15px;
    border: 2px solid white; /* White border on all sides */
    border-radius: 20px;
    margin: 10px;
    transition: width 0.3s ease;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    overflow: hidden;
}

    .sidebar:hover,
    .sidebar.sidebar-open {
        width: 240px;
    }

.menu-item.active {
    background: linear-gradient(90deg, rgba(101, 143, 183, 0.38) 0%, rgba(255, 255, 255, 0.16) 100%);
    box-shadow: inset 4px 0 0 #dff1ff;
}


.menu-item {
    display: flex;
    align-items: center;
    color: white;
    padding: 30px 10px;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    white-space: nowrap;
    gap: 10px;
    line-height: 1; /* Ensures consistent spacing */
    position: relative;
    transform-origin: left center;
}

    .menu-item:not(:last-child)::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 10%;
        width: 80%;
        height: 2px;
        background: white;
        opacity: 0.8;
    }

    .menu-item:hover {
        background: rgb(187 187 187 / 20%);
    }

    .menu-item.menu-item-opening {
        animation: sidebarMenuItemOpen 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .menu-item i,
    .menu-item .menu-svg-icon {
        width: 3.5rem;
        height: 3.5rem;
        flex: 0 0 3.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        font-size: 3.5rem;
        line-height: 1;
        transition: transform 0.28s ease, filter 0.28s ease;
    }

    .menu-item .menu-svg-icon {
        color: currentColor;
        overflow: visible;
    }

    .menu-item.active i,
    .menu-item.active .menu-svg-icon {
        transform: scale(1.08);
        filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.22));
    }

.sidebar .menu-text {
    display: none;
    font-size: 1.25rem;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.sidebar:hover .menu-text,
.sidebar.sidebar-open .menu-text {
    display: inline;
}

.menu-item.active .menu-text {
    transform: translateX(4px);
}

@keyframes sidebarMenuItemOpen {
    0% {
        transform: translateX(0) scale(1);
    }

    45% {
        transform: translateX(8px) scale(1.03);
    }

    100% {
        transform: translateX(0) scale(1);
    }
}
/* ================================
        Updated Professional CSS
        ================================ */

/* Main Color Menu Panel */
.color-menu {
    position: absolute;
    top: 647px;
    left: 20px;
    width: 400px;
    height: 68vh;
    background: #ffffff;
    color: #000000;
    border-radius: 16px;
    border: 1px solid #000000;
    padding: 40px 10px 10px 20px;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    font-family: Inter, sans-serif;
    display: none;
}

    /* Scrollbar Styling */
    .color-menu::-webkit-scrollbar {
        width: 8px;
    }

    .color-menu::-webkit-scrollbar-track {
        background: #f0f0f0;
        border-radius: 10px;
    }

    .color-menu::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,0.2);
        border-radius: 10px;
    }

        .color-menu::-webkit-scrollbar-thumb:hover {
            background: rgba(0,0,0,0.4);
        }

    /* Close Button */
    .color-menu .custom-close, .color-menu .custom-back {
        position: absolute;
        top: 10px;
        right: 15px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: white;
        color: black;
        border: 1px solid black;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        line-height: 32px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.2s ease;
    }


    .color-menu .custom-back {
        position: absolute;
        top: 10px;
        right: 60px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: white;
        color: black;
        border: 1px solid black;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        line-height: 32px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: 0.2s ease;
    }

        .color-menu .custom-close:hover, .color-menu .custom-back:hover {
            background: #b1b1b1;
        }

/* Image Centering */
.centerImg {
    display: block;
    margin: 0 auto 20px auto;
    max-width: 60%;
}

/* Labels */
.color-menu label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #000;
    margin-top: 12px;
    margin-bottom: 6px; /* Added space between label and field */
}

/* Range Container */
.range-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    margin-bottom: 12px; /* Vertical gap after each field */
}

/* Range Input */
.color-menu input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 6px;
    border-radius: 4px;
    background: #e0e0e0;
    border: 1px solid #000;
    outline: none;
    transition: background 0.2s ease;
}

    .color-menu input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 18px;
        height: 18px;
        background: #000;
        border-radius: 50%;
        cursor: pointer;
        border: 1px solid #000;
        transition: background 0.2s ease;
    }

    .color-menu input[type="range"]::-moz-range-thumb {
        width: 18px;
        height: 18px;
        background: #000;
        border-radius: 50%;
        cursor: pointer;
        border: 1px solid #000;
    }

/* Text and Number Inputs (centered text) */
.color-menu input[type="text"],
.color-menu input[type="number"],
.modal-content input[type="text"],
.modal-content input[type="number"],
textarea,
.modal-content input[type="email"] {
    width: 70px;
    text-align: left; /* Center text for inputs */
    font-size: 14px;
    font-weight: 500;
    color: #000;
    border-radius: 8px;
    border: 1px solid #000;
    background: #fff;
    padding: 6px 10px;
    outline: none;
    transition: border 0.2s ease, box-shadow 0.2s ease;
}

/* Select / Dropdowns (left-aligned text) */
.color-menu select,
.modal select {
    width: 100%; /* Full width for selects */
    text-align: left; /* Left-align text */
    font-size: 14px;
    font-weight: 500;
    color: #000;
    border-radius: 8px;
    border: 1px solid #000;
    background: #fff;
    padding: 6px 10px;
    outline: none;
    transition: border 0.2s ease, box-shadow 0.2s ease;
    margin-top: 4px;
}

    /* Focus state for all inputs and selects */
    .color-menu input[type="text"]:focus,
    .color-menu input[type="number"]:focus,
    textarea:focus,
    .modal-content input[type="text"]:focus,
    .modal-content input[type="number"]:focus,
    .modal-content input[type="email"]:focus,
    .color-menu select:focus,
    .modal select:focus {
        border-color: #000;
        box-shadow: 0 0 0 2px rgba(0,0,0,0.12);
    }


    .color-menu input[type="number"]:focus,
    .color-menu select:focus,
    textarea:focus {
        border-color: #000;
        box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
    }

/* Select dropdown full width */
select {
    width: 100% !important;
    font-weight: 500;
    border: 1px solid #000;
}

/* Hover for dropdown options */
.dd-option:hover {
    background-color: #000 !important;
    color: white !important;
}

/* Checkbox Container */
.color-menu .checkbox-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    margin-bottom: 12px;
}

.color-menu input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    border: 1px solid #000;
}

.color-menu .checkbox-container label {
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    color: #000;
}

/* Table Styling */
.color-menu table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

    .color-menu table td {
        padding: 4px;
    }

/* Buttons */
/* Plus button - add new row */
.color-menu .plus-btn {
    background: #fff;
    color: #000;
    font-size: 16px;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #000;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    width: 100%;
}

    .color-menu .plus-btn:hover {
        background: #e6e6e6;
        transform: scale(1.05);
    }

/* Minus button - remove row */
.color-menu .minus-btn,
.color-menu button.minus {
    background: #fff;
    color: #d80000; /* Red to indicate deletion */
    font-size: 16px;
    font-weight: bold;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #d80000;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    width: 100%;
}

    .color-menu .minus-btn:hover,
    .color-menu button.minus:hover {
        background: #f9d6d6;
        transform: scale(1.05);
    }

.color-menu .minus-btn {
    margin-top: 0;
}

/* Canvas Container */
.canvas-container {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: flex-start;
}

canvas {
    width: 100%;
    height: 100%;
    display: block;
    margin-top: 0;
}

.copyright-tag {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 6px;
    font-size: 0.875rem;
    border-radius: 0 20px 20px 0;
    border: 2px solid #000;
    margin-right: -6px;
}

.hidden-menu-popup {
    position: fixed;
    z-index: 9999;
    min-width: 230px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(14, 14, 14, 0.94);
    color: #fff;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    display: none;
}

.hidden-menu-popup.is-open {
    display: block;
}

.hidden-menu-popup__title {
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 0.02em;
}

.hidden-menu-popup__option {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

.hidden-menu-popup__option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #7cc26b;
    cursor: pointer;
}

/* Hide class */
.hide {
    display: none;
}

/* Confirmation Popup */
.ConfirmationPopup {
    max-width: 500px !important;
    padding: 30px !important;
    background: rgba(0,0,0,1) !important;
}

/* Position the icons on the left top */
.bottom-right-icons {
    position: fixed;
    bottom: 50px;
    right: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.125rem;
}

/* Style the main icon group */
.icon-group {
    display: flex;
    background: rgb(91 91 91 / 80%);
    padding: 10px;
    border-radius: 20px;
    border: 2px solid white; /* White border on all sides */
}

    .icon-group i {
        color: white;
        font-size: 1.25rem;
        padding: 8px;
        cursor: pointer;
        transition: transform 0.2s;
    }

        .icon-group i:hover {
            transform: scale(1.2);
        }

.zoom-controls {
    position: fixed;
    bottom: 120px;
    right: 50px;
    display: flex;
    flex-direction: column;
    background: rgb(91 91 91 / 80%);
    overflow: hidden;
    padding: 10px;
    border: 2px solid white; /* White border on all sides */
    border-radius: 20px;
}

    .zoom-controls i {
        color: white;
        font-size: 1.25rem;
        padding: 8px;
        cursor: pointer;
        text-align: center;
        transition: background 0.2s;
    }

        .zoom-controls i:hover {
            background: rgb(187 187 187 / 20%);
        }

.quote-button {
    position: fixed;
    top: 50px;
    right: 50px;
    background-color: rgba(0, 50, 0, 0.8);
    color: white;
    padding: 10px 20px;
    font-size: 1.375rem;
    font-weight: bold;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
    border: 2px solid white; /* White border on all sides */
}

    .quote-button:hover {
        background: #3d4c28; /* Slightly lighter green */
        transform: scale(1.05); /* Small zoom effect */
    }

.language-switcher {
    position: fixed;
    top: 112px;
    right: 50px;
    z-index: 1200;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 132px;
    max-width: calc(100vw - 32px);
    padding: 6px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(27, 60, 85, 0.14);
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(12px);
    overflow: hidden;
}

.language-switcher-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.language-switcher-select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 32px;
    padding: 0 28px 0 10px;
    border-radius: 10px;
    border: 1px solid rgba(39, 71, 101, 0.18);
    background: #ffffff;
    color: #16324a;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    outline: none;
    cursor: pointer;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #35526f 50%), linear-gradient(135deg, #35526f 50%, transparent 50%);
    background-position: calc(100% - 14px) calc(50% - 1px), calc(100% - 9px) calc(50% - 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.language-switcher-select:focus {
    border-color: rgba(39, 71, 101, 0.42);
    box-shadow: 0 0 0 3px rgba(39, 71, 101, 0.12);
}

body.lang-rtl {
    direction: rtl;
}

    body.lang-rtl .language-switcher {
        top: 112px;
        right: 50px;
        left: auto;
        z-index: 99;
    }

body.lang-rtl .language-switcher-select {
    padding: 0 10px 0 28px;
    background-position: 14px calc(50% - 1px), 19px calc(50% - 1px);
}

@media (max-width: 900px) {
    .language-switcher {
        top: 70px;
        right: 34px;
        left: auto;
        width: 116px;
        padding: 5px;
    }

    .language-switcher-select {
        height: 30px;
        font-size: 0.75rem;
    }

    body.lang-rtl .language-switcher {
        top: 70px;
        right: 34px;
        left: auto;
    }
}

/*START of subMenu*/

/* Apply custom scrollbar using OverlayScrollbars */



.checkbox-container {
    display: flex;
    align-items: center;
    gap: 5px; /* Reduce space between checkbox and text */
    margin-bottom: 5px; /* Adjust spacing between checkboxes */
}

    .checkbox-container input {
        width: 16px;
        height: 16px;
        margin: 0; /* Remove default margin */
    }

    .checkbox-container label {
        font-size: 0.875rem;
        line-height: 16px; /* Ensure text aligns properly with checkbox */
        margin: 0;
        cursor: pointer; /* Allows clicking the label to check/uncheck */
    }



/*END of subMenu*/

.option-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
}

.option {
    width: 100px;
    height: 100px;
    background: white;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    color: black;
    cursor: pointer;
    box-shadow: 2px 2px 5px black;
    padding: 10px;
}

    .option img {
        width: 40px; /* Adjust image size as needed */
        height: 40px;
        margin-bottom: 5px;
    }

    .option span {
        font-size: 0.8rem;
    }


/*END of door menu*/


/*Start of colour menu*/



/*End of colour menu*/


/*Start of Access door popup*/

.add-btn, .cancel-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    width: 100%;
}

.add-btn {
    background: white;
    color: #2f3e1d;
}

.cancel-btn {
    background: transparent;
    color: white;
    border: 1px solid white;
}


/*end of Access door popup*/


/*Start of Rollor Door popup*/
.popup {
    background: #2f3e1d;
    color: black;
    padding: 20px;
    border-radius: 12px;
    width: 500px;
    text-align: left;
}

    .popup label {
        font-size: 0.875rem;
        display: block;
        margin-top: 10px;
    }

/*END of Rollor Door popup*/

/*Start of bays position popup*/

h3 {
    font-size: 1rem;
    margin-bottom: 10px;
    font-weight: bold;
    text-align: left;
}

.options {
    list-style: none;
    padding: 0;
    text-align: left;
}

    .options li {
        font-size: 0.875rem;
        padding: 10px;
        cursor: pointer;
        border-radius: 6px;
        transition: background 0.3s ease;
    }

        .options li:hover {
            background: rgb(187 187 187 / 20%);
        }

.cancel-btn {
    width: 100%;
    padding: 10px;
    border: 1px solid white;
    background: transparent;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 10px;
    font-weight: bold;
}

    .cancel-btn:hover {
        background: rgb(187 187 187 / 20%);
    }


/*End of bays position Popup*/
/* Modal Background */
.modal {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    overflow: hidden;
    z-index: 1000;
}

/* Modal Box (Bigger & Responsive) */
.modal-content {
    background: rgba(0, 50, 0, 0.8);
    padding: 40px;
    border: 2px solid white;
    border-radius: 20px;
    width: 80%;
    max-width: 1000px;
    max-height: 90vh; /* Ensure it doesn't exceed viewport */
    overflow-y: auto; /* Enable vertical scrolling */
    /*height:60%;*/
    color: white;
    text-align: left;
    position: relative;
}

.scrollDiv {
    max-height: 90vh;
    overflow-y: auto !important;
}

.modal-Wizard {
    max-width: 1600px;
}

/* Close Button */
.close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Form Layout */
form {
    display: flex;
    flex-direction: column;
    text-align: left;
}

/* Aligning First Name & Last Name, Email & Phone Number */
.row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
}

/* Each Column */
.column {
    flex: 1;
}

/* Adjusting the Message Box */
textarea {
    resize: none;
    height: 120px;
    width: 100%;
}

/* Submit Button */
button {
    background: white;
    color: #2e3b1e;
    padding: 12px;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: 10px;
}

/* Mobile Devices (up to 480px) */


#quoteModal {
    display: none;
}

#divRollerDoorData {
    display: none;
}

#divAccessDoorData {
    display: none;
}

#divWindowData {
    display: none;
}

#divGlassSlidingDoorData {
    display: none;
}

#dialog-Confirmation {
    display: none;
}

#dialog-SideBayWidth-Check {
    display: none;
}

#dialog-Wizard {
    display: none;
}

#dialog-ContextMenu {
    display: none;
}

#dialog-BayPosition .popup {
    width: 250px;
}

#PortraitMobileDiv {
    display: none;
}

#IphoneSafariDiv {
    display: none;
}

#PortraitMobileDiv {
    display: none;
}

/* Custom Close Button */
.custom-close, .custom-back {
    position: absolute;
    top: 10px;
    right: 15px;
    width: 35px;
    height: 35px;
    background-color: white;
    color: black;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    line-height: 35px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
}

.dd-select {
    width: 100% !important;
}
/* Hover Effect */
.custom-close:hover, .custom-back:hover {
    background-color: #1e2912; /* Slightly darker green */
}

/*.image-grid {
                 display: grid;
                 grid-template-columns: repeat(4, minmax(50px, 1fr));
                 gap: 15px;
                 padding: 20px;
                 max-width: 1200px;
                 margin: auto;
             }*/

/* Make all images responsive */
/*.image-grid img {
                     width: 100%;
                     height: auto;
                     border-radius: 10px;
                     display: block;
                     cursor: pointer;
                 }*/

/* Center the last image if it's alone in the last row */
/*.image-grid img:last-child:nth-child(7) {
                         grid-column: 2 / span 1;*/ /* Places it in the center column */
/*}*/

/* Responsive Design */


/*Start of lean to menu*/


.menu-section {
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 15px;
}

h4 {
    font-size: 1rem;
    margin-bottom: 10px;
}

.checkbox-container {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    margin-bottom: 5px;
}

    .checkbox-container input {
        margin-right: 10px;
    }

.roof-pitch-btn {
    width: 100%;
    padding: 8px;
    border: 1px solid white;
    background: transparent;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    margin-top: 10px;
}

    .roof-pitch-btn:hover {
        background: rgb(187 187 187 / 20%);
    }

/*End of Lean to menu*/

table {
    width: 100% !important;
}

/*Start of wall menu*/

.grid {
    position: relative;
}

    .grid .grid-back, .grid .grid-front, .grid .grid-left, .grid .grid-right {
        border: none;
        text-align: center;
    }

    .grid .grid-right {
        right: -3px;
        width: 10px;
    }

    .grid .grid-left, .grid .grid-right {
        position: absolute;
        top: calc(50% - 10px);
        width: auto;
        display: block;
    }

.legend {
    font-size: 0.96875rem;
    margin-bottom: 15px;
}

.legend {
    display: block;
    width: 100%;
    margin-bottom: 23px;
    font-size: 1.21875rem;
    line-height: inherit;
    color: white;
    border-bottom: 1px solid #e5e5e5;
}

fieldset, .legend {
    padding: 0;
    border: 0;
}

.grid .grid-wrap {
    margin: 30px 25px;
}

.grid .grid-column, .grid .grid-row {
    display: flex;
}

    .grid .grid-column .grid-column-spacer, .grid .grid-row .grid-line {
        margin-right: 10px;
        margin-left: 10px;
    }

    .grid .grid-column .grid-line, .grid .grid-row .grid-line {
        flex-grow: 1;
    }

    .grid .grid-row .grid-button {
        width: 100%;
        height: 18px;
    }

.grid .grid-button {
    border-radius: 20px;
    padding: 0;
}

.grid .grid-column {
    display: flex;
}

.grid .grid-column {
    margin-left: -10px;
    margin-right: -10px;
}

.grid .grid-column, .grid .grid-row {
    display: flex;
}

    .grid .grid-column .grid-column-spacer {
        flex-grow: 1;
        position: relative;
    }

    .grid .grid-column .grid-column-spacer, .grid .grid-row .grid-line {
        margin-right: 10px;
        margin-left: 10px;
    }

    .grid .grid-column .grid-button {
        width: 18px;
        height: 55px;
    }

.grid .grid-button {
    border-radius: 20px;
    padding: 0;
}

.btn-default.disabled {
    background-color: white !important;
    color: rgba(0, 0, 0, .4);
    opacity: 1;
    /* box-shadow: 1px 1px 4px rgba(0, 0, 0, .4) !important; */
}

.btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    cursor: not-allowed;
    opacity: .65;
    filter: alpha(opacity = 65);
    -webkit-box-shadow: none;
    box-shadow: none;
}

button[disabled], html input[disabled] {
    cursor: default;
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: #ccc;
    border-radius: 4px;
    outline: none;
}
/* Inputs, Textareas, Selects, Number Fields */


/* Dropdown / custom select */
.dd-container {
    width: 100% !important;
}

.dd-select {
    border-radius: 14px !important;
    border: solid 1px #ccc;
    position: relative;
    cursor: pointer;
}

.dd-selected-text {
    margin-top: 2px !important;
}

.dd-selected {
    padding: 8px 10px !important;
    width: 100%;
    border-radius: 14px !important;
    border: 1px solid #000;
    background: #fff;
    color: #000;
    font-size: 0.875rem;
}

.dd-options {
    width: 100% !important;
    border: 1px solid #000 !important;
    background: #fff !important;
    color: #000 !important;
    border-radius: 6px;
}

/* Option images and text */
.dd-option-image,
.dd-selected-image {
    vertical-align: middle;
    float: left;
    margin-right: 5px;
    max-width: 15px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    margin-top: 3px;
}

label.dd-option-text,
label.dd-selected-text {
    line-height: 1.2 !important;
    margin-bottom: 0;
}

/* Utility */
.full-width {
    width: 100%;
    margin-bottom: 20px;
}


.RollerDoorIcon {
    cursor: url('images/icons/RollerDoor.png'), auto;
}

.PADoorIcon {
    cursor: url('images/icons/PADoor.png'), auto;
}

.WindowIcon {
    cursor: url('images/icons/Window.png'), auto;
}

.OpenBayIcon {
    cursor: url('images/icons/OpenBay.bmp'), auto;
}

.EditOpeningIcon {
    cursor: url('images/icons/icon.png'), auto;
}

.stepper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 600px;
    margin: 0 auto 10px;
    position: relative;
}

.step {
    text-align: center;
    position: relative;
    flex: 1;
}

.step-circle {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background: #ddd;
    color: #555;
    display: inline-block;
    font-size: 1.125rem;
    font-weight: bold;
    text-align: center;
    transition: 0.3s;
    position: relative;
    z-index: 2;
}

.step.active .step-circle {
    background: green;
    color: white;
}

.step-line {
    position: absolute;
    width: 100%;
    height: 4px;
    background: #ddd;
    top: 18px;
    left: 50%;
    z-index: 1;
}

.step:first-child .step-line {
    display: block;
}

.step.active ~ .step .step-line {
    background: #ddd;
}

.step.active .step-line {
    background: white;
}

.step-label {
    margin-top: 10px;
    font-size: 0.875rem;
    color: #777;
}

.menuMobile {
    display: none;
}


@media screen and (max-height: 664px) {
    .sidebar {
        max-height: 708px;
    }

    .fa-4x {
        font-size: 1em;
    }

    .copyright-tag {
        font-size: 0.5rem;
    }

    .quote-button {
        font-size: 0.8rem;
        top: 15px;
        right: 30px;
    }

    .icon-group i {
        font-size: 1rem;
        padding: 1px 8px;
    }

    .zoom-controls i {
        font-size: 1rem;
        padding: 8px 1px;
    }
}

@media screen and (max-height: 864px) and (min-height: 665px) {
    .sidebar {
        max-height: 708px;
    }

    .fa-4x {
        font-size: 2em;
    }

    .copyright-tag {
        font-size: 0.6rem;
    }

    .quote-button {
        font-size: 0.8rem;
        top: 15px;
        right: 30px;
    }

    .icon-group i {
        font-size: 1rem;
        padding: 1px 8px;
    }

    .zoom-controls i {
        font-size: 1rem;
        padding: 8px 1px;
    }
}

@media screen and (max-width: 480px) and (max-height: 864px) {
    .fa-3x {
        font-size: 1.8em;
    }

    .menuMobile-text {
        display: none;
    }

    .menuMobile.sidebar-open .menuMobile-text {
        display: block;
        font-size: 0.5rem;
    }

    .menuMobile {
        display: flex;
        background: rgba(0, 50, 0, 0.8);
        padding: 0px 10px;
        border-radius: 50px;
        position: fixed;
        bottom: 10px;
        left: 1%;
        right: 1%;
        color: white;
        border: 2px solid white;
    }

        .menuMobile.sidebar-open {
            border-radius: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-bottom: 0;
            border-left: 0;
            border-right: 0;
        }

    .menuMobile-item {
        padding: 15px 11px;
        text-align: center;
        margin: 0 auto;
    }

        .menuMobile-item:first-child {
            border-top-left-radius: 50px;
            border-bottom-left-radius: 50px;
            border-left: none;
        }

        .menuMobile-item:last-child {
            border-top-right-radius: 50px;
            border-bottom-right-radius: 50px;
        }

        .menuMobile-item img {
            width: 30px;
            height: 30px;
        }

    .zoom-controls {
        top: 70px;
        bottom: auto;
        left: 30px;
        right: auto;
    }

    .step-circle {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
    }

    .icon-group i {
        font-size: 1rem;
        padding: 1px 8px;
    }

    .zoom-controls i {
        font-size: 1rem;
        padding: 8px 1px;
    }

    .step-line {
        top: 13px;
    }

    .step-label {
        font-size: 12px;
    }

    .sidebar .menu-text {
        font-size: 1rem;
    }

    .color-menu h2 {
        font-size: 1rem;
    }

    .color-menu label {
        font-size: 0.75rem;
    }

    .quote-button {
        font-size: 0.8rem;
        top: 15px;
        right: 30px;
    }

    .bottom-right-icons {
        font-size: 0.8rem;
        top: 23px;
        left: 30px;
        bottom: auto;
        right: auto;
    }

    .modal-content {
        padding: 20px;
    }

        .modal-content button {
            font-size: 1rem;
        }

    .menu-section h4 {
        font-size: 0.875rem;
    }

    .checkbox-container label {
        font-size: 0.75rem;
    }

    .roof-pitch-btn {
        font-size: 0.875rem;
    }

    .legend {
        font-size: 0.875rem;
    }

    .grid .grid-button {
        font-size: 0.875rem;
    }

    .row {
        flex-direction: column !important;
        margin-bottom: 20px !important;
    }

    .modal-content {
        width: 90% !important;
        padding: 20px !important;
        max-height: 80vh !important; /* Limit height to avoid excessive scrolling */
    }

    #sidebar-menu {
        display: none !important;
    }

    /*    .image-grid {
                     grid-template-columns: 1fr !important;
                 }*/

    .custom-close, .custom-back {
        width: 30px !important;
        height: 30px !important;
        font-size: 1.2rem !important;
        line-height: 30px !important;
    }

    .color-menu {
        width: 100% !important;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
        border-bottom: 0;
        position: fixed;
        bottom: 0;
        height: 265px;
        top: auto;
        margin-top: 0;
        left: 0;
    }

    #Tab-ContentDiv-Walls {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto !important;
        width: 100% !important;
        height: min(62vh, 420px);
        margin: 0;
        padding: 0;
        border-right: 0;
        border-left: 0;
        border-bottom: 0;
        border-radius: 0;
        background: #ffffff;
        color: #000000;
        overflow: hidden;
    }

        #Tab-ContentDiv-Walls .modal-content {
            width: 100% !important;
            height: 100% !important;
            max-width: none !important;
            max-height: none !important;
            margin: 0;
            padding: 0 !important;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            overflow: hidden !important;
        }

        #Tab-ContentDiv-Walls .popup-content {
            height: 100%;
            max-height: none;
            padding: 52px 16px 18px;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            box-sizing: border-box;
        }

    .copyright-tag {
        font-size: 0.5rem;
    }

    h1 {
        font-size: 1.2rem;
    }
}

/* Tablets (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .fa-3x {
        font-size: 1.8em;
    }

    .menuMobile-text {
        display: none;
    }

    .menuMobile.sidebar-open .menuMobile-text {
        display: block;
        font-size: 0.5rem;
    }

    .menuMobile {
        display: flex;
        background: rgba(0, 50, 0, 0.8);
        padding: 0px 10px;
        border-radius: 50px;
        position: fixed;
        bottom: 10px;
        left: 1%;
        right: 1%;
        color: white;
        border: 2px solid white;
    }

        .menuMobile.sidebar-open {
            border-radius: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-bottom: 0;
            border-left: 0;
            border-right: 0;
        }

    .menuMobile-item {
        padding: 15px 11px;
        text-align: center;
        margin: 0 auto;
    }

        .menuMobile-item:first-child {
            border-top-left-radius: 50px;
            border-bottom-left-radius: 50px;
            border-left: none;
        }

        .menuMobile-item:last-child {
            border-top-right-radius: 50px;
            border-bottom-right-radius: 50px;
        }

        .menuMobile-item img {
            width: 30px;
            height: 30px;
        }

    .zoom-controls {
        top: 70px;
        bottom: auto;
        left: 30px;
        right: auto;
    }

    .step-circle {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
    }

    .icon-group i {
        font-size: 1rem;
        padding: 1px 8px;
    }

    .zoom-controls i {
        font-size: 1rem;
        padding: 8px 1px;
    }

    .step-line {
        top: 13px;
    }

    .step-label {
        font-size: 12px;
    }

    .sidebar .menu-text {
        font-size: 1rem;
    }

    .color-menu h2 {
        font-size: 1rem;
    }

    .color-menu label {
        font-size: 0.75rem;
    }

    .quote-button {
        font-size: 0.8rem;
        top: 15px;
        right: 30px;
    }

    .bottom-right-icons {
        font-size: 0.8rem;
        top: 23px;
        left: 30px;
        bottom: auto;
        right: auto;
    }

    .modal-content {
        padding: 20px;
    }

        .modal-content button {
            font-size: 1rem;
        }

    .menu-section h4 {
        font-size: 0.875rem;
    }

    .checkbox-container label {
        font-size: 0.75rem;
    }

    .roof-pitch-btn {
        font-size: 0.875rem;
    }

    .legend {
        font-size: 0.875rem;
    }

    .grid .grid-button {
        font-size: 0.875rem;
    }

    .row {
        flex-direction: column !important;
        margin-bottom: 20px !important;
    }

    .modal-content {
        width: 90% !important;
        padding: 20px !important;
        max-height: 80vh !important; /* Limit height to avoid excessive scrolling */
    }

    #sidebar-menu {
        display: none !important;
    }

    /*    .image-grid {
                     grid-template-columns: 1fr !important;
                 }*/

    .custom-close, .custom-back {
        width: 30px !important;
        height: 30px !important;
        font-size: 1.2rem !important;
        line-height: 30px !important;
    }

    .color-menu {
        width: 100% !important;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
        border-bottom: 0;
        position: fixed;
        bottom: 0;
        height: 265px;
        top: auto;
        margin-top: 0;
        left: 0;
    }

    #Tab-ContentDiv-Walls {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto !important;
        width: 100% !important;
        height: min(62vh, 420px);
        margin: 0;
        padding: 0;
        border-right: 0;
        border-left: 0;
        border-bottom: 0;
        border-radius: 0;
        background: #ffffff;
        color: #000000;
        overflow: hidden;
    }

        #Tab-ContentDiv-Walls .modal-content {
            width: 100% !important;
            height: 100% !important;
            max-width: none !important;
            max-height: none !important;
            margin: 0;
            padding: 0 !important;
            border: 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            overflow: hidden !important;
        }

        #Tab-ContentDiv-Walls .popup-content {
            height: 100%;
            max-height: none;
            padding: 52px 16px 18px;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            box-sizing: border-box;
        }

    .copyright-tag {
        font-size: 0.5rem;
    }

    h1 {
        font-size: 1.2rem;
    }
}


/* Laptops (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {

    .fa-3x {
        font-size: 1.8em;
    }

    .menuMobile-text {
        display: none;
    }

    .menuMobile.sidebar-open .menuMobile-text {
        display: block;
        font-size: 0.5rem;
    }

    .menuMobile {
        display: flex;
        background: rgba(0, 50, 0, 0.8);
        padding: 0px 10px;
        border-radius: 50px;
        position: fixed;
        bottom: 10px;
        left: 1%;
        right: 1%;
        color: white;
        border: 2px solid white;
    }

        .menuMobile.sidebar-open {
            border-radius: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border-bottom: 0;
            border-left: 0;
            border-right: 0;
        }

    .menuMobile-item {
        padding: 15px 11px;
        text-align: center;
        margin: 0 auto;
    }

        .menuMobile-item:first-child {
            border-top-left-radius: 50px;
            border-bottom-left-radius: 50px;
            border-left: none;
        }

        .menuMobile-item:last-child {
            border-top-right-radius: 50px;
            border-bottom-right-radius: 50px;
        }

        .menuMobile-item img {
            width: 30px;
            height: 30px;
        }

    .zoom-controls {
        top: 70px;
        bottom: auto;
        left: 30px;
        right: auto;
    }

    .step-circle {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
    }

    .icon-group i {
        font-size: 1rem;
        padding: 1px 8px;
    }

    .zoom-controls i {
        font-size: 1rem;
        padding: 8px 1px;
    }

    .step-line {
        top: 13px;
    }

    .step-label {
        font-size: 12px;
    }

    .sidebar .menu-text {
        font-size: 1rem;
    }

    .color-menu h2 {
        font-size: 1rem;
    }

    .color-menu label {
        font-size: 0.75rem;
    }

    .quote-button {
        font-size: 0.8rem;
        top: 15px;
        right: 30px;
    }

    .bottom-right-icons {
        font-size: 0.8rem;
        top: 23px;
        left: 30px;
        bottom: auto;
        right: auto;
    }

    .modal-content {
        padding: 20px;
    }

        .modal-content button {
            font-size: 1rem;
        }

    .menu-section h4 {
        font-size: 0.875rem;
    }

    .checkbox-container label {
        font-size: 0.75rem;
    }

    .roof-pitch-btn {
        font-size: 0.875rem;
    }

    .legend {
        font-size: 0.875rem;
    }

    .grid .grid-button {
        font-size: 0.875rem;
    }

    .row {
        margin-bottom: 20px !important;
    }

    .modal-content {
        width: 90% !important;
        padding: 20px !important;
        max-height: 80vh !important; /* Limit height to avoid excessive scrolling */
    }

    #sidebar-menu {
        display: none !important;
    }


    .custom-close, .custom-back {
        width: 30px !important;
        height: 30px !important;
        font-size: 1.2rem !important;
        line-height: 30px !important;
    }

    .color-menu {
        width: 100% !important;
        border-right: 0;
        border-left: 0;
        border-radius: 0;
        border-bottom: 0;
        position: fixed;
        bottom: 0;
        height: 265px;
        top: auto;
        margin-top: 0;
        left: 0;
    }

    .copyright-tag {
        font-size: 0.5rem;
    }

    h1 {
        font-size: 1.2rem;
    }
}

/* Large Screens & Desktops (1025px and above) */
@media screen and (min-width: 1025px) and (min-height: 864px) {

    .fa-house {
        font-size: 3.2em;
    }

    .fa-car {
        font-size: 3.6em;
    }

    .fa-palette {
        font-size: 3.5em;
    }

    .fa-file-invoice {
        font-size: 1.6em;
    }
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Remove arrows for Firefox */
input[type="number"] {
    -moz-appearance: textfield !important;
}

.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

    .image-grid figure {
        margin: 0;
        overflow: hidden;
        border-radius: 0.5rem;
        background-color: #e0e0e0;
        aspect-ratio: 4 / 3;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .image-grid img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

        .image-grid img:before {
            content: attr(alt);
        }

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

#quoteModal.qf-modal {
    position: fixed !important;
    inset: 0 !important;
    padding: 24px !important;
    background: rgba(8, 15, 24, 0.42) !important;
    backdrop-filter: blur(8px);
    align-items: center !important;
    justify-content: center !important;
    z-index: 99999 !important;
}

#quoteModal .qf-wrapper {
    position: relative !important;
    max-width: 920px !important;
    width: min(920px, 100%) !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 28px !important;
    overflow-y: auto !important;
    max-height: 90vh !important;
    background: linear-gradient(180deg, #f8fbfd 0%, #eef3f7 100%) !important;
    box-shadow: 0 28px 60px rgba(6, 15, 26, 0.28) !important;
    font-family: "Segoe UI", sans-serif;
}

    #quoteModal .qf-wrapper > .qf-close {
        position: absolute !important;
        top: 18px !important;
        right: 18px !important;
        z-index: 2 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.85) !important;
        box-shadow: 0 10px 22px rgba(20, 38, 58, 0.14) !important;
        font-size: 24px !important;
        color: #17324a !important;
        cursor: pointer !important;
        line-height: 1 !important;
        text-align: center !important;
        transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
    }

        #quoteModal .qf-wrapper > .qf-close:hover {
            background: #ffffff !important;
            transform: translateY(-1px) !important;
            box-shadow: 0 14px 24px rgba(20, 38, 58, 0.18) !important;
        }

.quote-popup-content,
#quoteModal .popup-content {
    padding: 28px 28px 22px;
}

.quote-hero,
#quoteModal .roller-door-hero {
    margin-bottom: 20px;
    padding: 22px 22px 18px;
    border-radius: 22px;
    background: linear-gradient(135deg, #1d3b56 0%, #416a89 100%);
    color: #ffffff;
    box-shadow: 0 18px 34px rgba(29, 59, 86, 0.24);
}

.quote-badge,
#quoteModal .roller-door-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#quoteModal .qf-title,
#quoteModal .roller-door-title {
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    text-align: left !important;
}

.quote-subtitle,
#quoteModal .roller-door-subtitle {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.92rem;
    line-height: 1.5;
}

.quote-form-layout,
#quoteModal .roller-door-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
}

.quote-form-section,
#quoteModal .roller-door-section {
    padding: 18px;
    border: 1px solid rgba(24, 52, 76, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08);
}

.quote-form-section-title,
#quoteModal .roller-door-section-title {
    margin: 0 0 6px;
    color: #17324a;
    font-size: 1rem;
    font-weight: 700;
}

.quote-form-section-copy,
#quoteModal .roller-door-section-copy {
    margin: 0 0 16px;
    color: #607789;
    font-size: 0.88rem;
    line-height: 1.45;
}

#quoteModal .qf-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px !important;
    width: 100% !important;
    margin: 0 0 16px !important;
}

    #quoteModal .qf-row.qf-row-full {
        grid-template-columns: 1fr !important;
    }

    #quoteModal .qf-row:last-child {
        margin-bottom: 0 !important;
    }

#quoteModal .qf-col {
    display: flex;
    flex-direction: column;
    width: 100% !important;
}

#quoteModal .qf-input,
#quoteModal .qf-textarea,
#quoteModal input[type="text"],
#quoteModal input[type="number"],
#quoteModal input[type="email"] {
    width: 100% !important;
    min-height: 46px;
    border-radius: 14px !important;
    border: 1px solid rgba(32, 62, 89, 0.16) !important;
    padding: 12px 14px !important;
    font-size: 14px;
    font-weight: 500;
    background: #fdfefe !important;
    color: #10283d;
    box-shadow: inset 0 1px 2px rgba(16, 40, 61, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#quoteModal .qf-textarea {
    min-height: 140px;
    resize: vertical !important;
}

    #quoteModal .qf-input:focus,
    #quoteModal .qf-textarea:focus,
    #quoteModal input[type="text"]:focus,
    #quoteModal input[type="number"]:focus,
    #quoteModal input[type="email"]:focus {
        outline: none !important;
        border-color: #356386 !important;
        box-shadow: 0 0 0 4px rgba(53, 99, 134, 0.12) !important;
        background: #ffffff !important;
    }

#quoteModal .qf-col span[id^="lbl"] {
    margin-top: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}

.quote-footer,
#quoteModal .roller-door-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 18px 28px 28px;
    border-top: 1px solid rgba(24, 52, 76, 0.08);
    background: rgba(244, 248, 251, 0.94);
}

    .quote-footer .qf-col,
    #quoteModal .roller-door-footer .column {
        width: 100%;
    }

#quoteModal .qf-btn,
#quoteModal .qf-cancel-btn {
    width: 100% !important;
    min-height: 48px;
    border-radius: 14px !important;
    font-size: 0.94rem !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

#quoteModal .qf-btn {
    background: linear-gradient(180deg, #1f4765 0%, #16364f 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 24px rgba(22, 54, 79, 0.22);
}

    #quoteModal .qf-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 18px 28px rgba(22, 54, 79, 0.28);
    }

#quoteModal .qf-cancel-btn {
    background: #ffffff !important;
    color: #17324a !important;
    border: 1px solid rgba(32, 62, 89, 0.16) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

    #quoteModal .qf-cancel-btn:hover {
        background: #f5f8fb !important;
        transform: translateY(-1px);
    }

@media(max-width: 720px) {
    #quoteModal.qf-modal {
        padding: 14px !important;
    }

    .quote-popup-content,
    #quoteModal .popup-content {
        padding: 20px 18px 18px;
    }

    #quoteModal .qf-row,
    .quote-footer,
    #quoteModal .roller-door-footer {
        grid-template-columns: 1fr;
    }

    .quote-footer,
    #quoteModal .roller-door-footer {
        padding: 16px 18px 20px;
    }
}

:root {
    --overlay: rgba(255,255,255,0.6);
    --card-bg: #ffffff;
    --accent: #000000;
    --muted: #a3a3a3;
    --glass: rgba(255,255,255,0.9);
    --radius: 14px;
    --gap: 18px;
    --text: #111111;
    --shadow: 0 10px 30px rgba(0,0,0,0.1);
}

* {
    box-sizing: border-box;
}

.overlay {
    position: fixed;
    inset: 0;
    /* background: var(--overlay);*/
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 98;
    padding: 20px;
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
}

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

.popup {
    width: 60%;
    max-width: var(--max-width);
    border-radius: var(--radius);
    background: var(--card-bg);
    box-shadow: var(--shadow);
    overflow: hidden;
    transform: translateY(12px) scale(.98);
    opacity: 0;
    transition: transform .32s ease, opacity .32s ease;
    display: grid;
    gap: var(--gap);
    padding: 24px;
    border: 1px solid #e0e0e0;
}

.overlay.open .popup {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.popup-content {
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.title-subtitle {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: var(--text);
}

.subtitle {
    color: #000;
    opacity: 0.72;
    font-size: 13px;
    margin-top: 0;
}

/* Progress */
.progress {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    font-size: 13px;
    color: #000;
}

.steps {
    display: flex;
    gap: 34px;
}

.step {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #f0f0f0;
    display: grid;
    place-items: center;
    font-weight: 700;
    color: #000;
    transition: 0.2s ease;
}

    .step.active {
        background: var(--accent);
        color: #fff;
    }

.step-label {
    line-height: 1;
}

/* Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.choice {
    background: var(--glass);
    border-radius: 14px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
    cursor: pointer;
    border: 1px solid rgba(35, 71, 101, 0.12);
    transition: 0.25s ease;
    box-shadow: 0 10px 18px rgba(31, 58, 85, 0.08);
}

    .choice:hover {
        transform: translateY(-2px);
        background: #f4f8fb;
    }

    .choice img {
        width: 100%;
        object-fit: cover;
        border-radius: 10px;
    }

.choice-label {
    font-size: 13px;
    font-weight: 600;
    color: #000;
}

.choice-sub {
    font-size: 12px;
    color: var(--muted);
}

/* Actions */
.actions-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    flex-wrap: wrap;
    gap: 12px;
}

.note {
    font-size: 13px;
    color: #000;
    opacity: 0.72;
}

.actions {
    display: flex;
    gap: 10px;
}

.btn {
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    border: 0;
    transition: 0.25s;
}

    .btn.primary {
        background: var(--accent);
        color: #fff;
    }

        .btn.primary:hover {
            opacity: 0.9;
        }

    .btn.ghost {
        background: var(--accent);
        color: #fff;
    }

        .btn.ghost:hover {
            opacity: 0.9;
        }

/* Responsive */
@media (max-width: 900px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .header-flex {
        flex-direction: column;
        align-items: flex-start;
    }

    .progress {
        margin-top: 4px;
    }

    .grid {
        grid-template-columns: 1fr;
    }

    .actions-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ===============================
        Wizard Dimensions – Scoped UI
        =============================== */

.wizard-dimensions {
    --border: rgba(35, 71, 101, 0.12);
    --text: #000;
    --muted: #000;
    --focus: #000;
}

    .wizard-dimensions .row {
        display: flex;
        gap: 14px;
        margin-bottom: 16px;
        flex-wrap: wrap;
    }

    .wizard-dimensions .column {
        flex: 1;
        min-width: 220px;
    }

    .wizard-dimensions .wizard-hero-column {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .wizard-dimensions .wizard-field-card {
        padding: 12px;
        border: 1px solid rgba(35, 71, 101, 0.1);
        border-radius: 16px;
        background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 8px 16px rgba(31, 58, 85, 0.06);
    }

    .wizard-dimensions .wizard-field-meta {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 8px;
    }

    .wizard-dimensions label {
        display: block;
        font-size: 13px;
        font-weight: 700;
        color: var(--text);
        margin-bottom: 0;
    }

    .wizard-dimensions .wizard-field-hint {
        color: var(--muted);
        opacity: 0.72;
        font-size: 12px;
        line-height: 1.3;
        text-align: right;
    }

    .wizard-dimensions .wizard-select-shell {
        margin-bottom: 10px;
    }

    .wizard-dimensions select {
        width: 100%;
        min-height: 108px;
        padding: 8px;
        border-radius: 12px;
        border: 1px solid var(--border);
        background: #fbfcfe;
        font-size: 13px;
        color: #000;
        outline: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

        .wizard-dimensions select:focus {
            border-color: var(--focus);
            box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
        }

    .wizard-dimensions .range-container {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 0;
    }

    .wizard-dimensions input[type="range"] {
        flex: 1;
        height: 8px;
        border-radius: 999px;
        background: linear-gradient(90deg, #d4e0ea 0%, #a9c0d4 100%);
        outline: none;
        appearance: none;
        box-shadow: inset 0 1px 2px rgba(24, 52, 76, 0.18);
    }

        .wizard-dimensions input[type="range"]::-webkit-slider-thumb {
            appearance: none;
            width: 18px;
            height: 18px;
            background: linear-gradient(180deg, #4f6f8a 0%, #21425d 100%);
            border: 2px solid #fff;
            border-radius: 50%;
            cursor: pointer;
        }

        .wizard-dimensions input[type="range"]::-moz-range-thumb {
            width: 18px;
            height: 18px;
            background: linear-gradient(180deg, #4f6f8a 0%, #21425d 100%);
            border: 2px solid #fff;
            border-radius: 50%;
            cursor: pointer;
        }

    .wizard-dimensions input[type="number"] {
        width: 82px;
        min-height: 42px;
        padding: 8px 10px;
        border-radius: 14px;
        border: 1px solid var(--border);
        background: #fbfcfe;
        font-size: 14px;
        color: #000;
        text-align: center;
        outline: none;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

        .wizard-dimensions input[type="number"]:focus {
            border-color: var(--focus);
            box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
        }

    .wizard-dimensions .wizard-toggle-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 10px;
        padding: 10px 12px;
        border: 1px solid rgba(35, 71, 101, 0.12);
        border-radius: 16px;
        background: linear-gradient(180deg, #f9fbfd 0%, #edf3f8 100%);
    }

    .wizard-dimensions .wizard-toggle-copy strong {
        display: block;
        color: #000;
        font-size: 13px;
        font-weight: 700;
    }

    .wizard-dimensions .wizard-toggle-copy span {
        display: block;
        margin-top: 4px;
        color: #000;
        opacity: 0.72;
        font-size: 12px;
        line-height: 1.35;
    }

    .wizard-dimensions .checkbox-container {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-top: 0;
        font-size: 13px;
        color: var(--text);
    }

        .wizard-dimensions .checkbox-container input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: #315d80;
        }

/* Responsive */
@media (max-width: 900px) {
    .wizard-dimensions .row {
        flex-direction: column;
    }
}

.option-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 15px;
}

#Tab-ContentDiv-Extras {
    background: linear-gradient(180deg, #f8fafc 0%, #e8eef5 100%);
}

    #Tab-ContentDiv-Extras h2 {
        margin: 10px 0 0;
    }

.extras-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 12px;
}

.extras-intro {
    padding: 18px 18px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #14324a 0%, #315d80 100%);
    color: #ffffff;
    box-shadow: 0 18px 35px rgba(20, 50, 74, 0.22);
}

    .extras-intro h2 {
        color: #ffffff;
        font-size: 1.15rem;
        line-height: 1.4;
        letter-spacing: 0.01em;
    }

.extras-intro-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.extras-intro-note {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.88rem;
    line-height: 1.5;
}

.extras-section {
    padding: 18px;
    border: 1px solid rgba(20, 50, 74, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.08);
}

.extras-section-title {
    margin: 0 0 6px;
    color: #18344c;
    font-size: 1rem;
    font-weight: 700;
}

.extras-section-copy {
    margin: 0;
    color: #597082;
    font-size: 0.88rem;
    line-height: 1.45;
}

#Tab-ContentDiv-Extras .option-container {
    justify-content: flex-start;
    gap: 16px;
    margin-top: 16px;
}

#Tab-ContentDiv-Extras .option {
    width: calc(50% - 8px);
    min-height: 132px;
    padding: 18px 14px;
    border: 1px solid rgba(35, 71, 101, 0.14);
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
    box-shadow: 0 12px 24px rgba(31, 58, 85, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

#Tab-ContentDiv-Extras .option:hover {
        transform: translateY(-3px);
        border-color: rgba(49, 93, 128, 0.35);
        box-shadow: 0 18px 28px rgba(31, 58, 85, 0.16);
    }

    #Tab-ContentDiv-Extras .option.is-active {
        border-color: rgba(20, 122, 85, 0.42);
        background: linear-gradient(180deg, #f4fff8 0%, #e0f6e9 100%);
        box-shadow: 0 18px 30px rgba(20, 122, 85, 0.18);
    }

    #Tab-ContentDiv-Extras .option img {
        width: 52px;
        height: 52px;
        margin-bottom: 10px;
        object-fit: contain;
    }

    #Tab-ContentDiv-Extras .option span {
        color: #17324a;
        font-size: 0.92rem;
        font-weight: 700;
        line-height: 1.3;
    }

.extras-checkbox-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    margin-top: 4px;
}

#Tab-ContentDiv-Extras .checkbox-container {
    align-items: center;
    gap: 12px;
    min-height: 64px;
    margin: 0;
    padding: 16px;
    border: 1px solid rgba(35, 71, 101, 0.12);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(31, 58, 85, 0.08);
}

    #Tab-ContentDiv-Extras .checkbox-container input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: #2f6b96;
    }

    #Tab-ContentDiv-Extras .checkbox-container label {
        margin: 0;
        flex: 1;
        color: #17324a;
        font-size: 0.92rem;
        font-weight: 600;
        line-height: 1.35;
    }

@media (max-width: 640px) {
    #Tab-ContentDiv-Extras .option {
        width: 100%;
    }

    .extras-checkbox-row {
        grid-template-columns: 1fr;
    }
}


/* Overlay */
.overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    background: rgba(0, 0, 0, 0.08);
    z-index: 98;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

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

/* Popup */
.context-popup {
    width: 240px;
    background: #ffffff;
    color: #000000;
    border-radius: 14px;
    border: 1px solid #000;
    padding: 18px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    transform: translateY(10px) scale(0.96);
    opacity: 0;
    transition: all 0.25s ease;
}

.overlay.open .context-popup {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* Title */
.context-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e5e5;
}

/* Options */
.context-options {
    list-style: none;
    padding: 0;
    margin: 10px 0 14px;
}

    .context-options li {
        padding: 10px 12px;
        font-size: 14px;
        border-radius: 8px;
        cursor: pointer;
        transition: background 0.2s ease, transform 0.15s ease;
    }

        .context-options li:hover {
            background: #f2f2f2;
            transform: translateX(2px);
        }

/* Cancel Button */
.context-cancel {
    width: 100%;
    background: #ffffff;
    color: #000;
    border: 1px solid #000;
    border-radius: 8px;
    padding: 8px 0;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

    .context-cancel:hover {
        background: #f0f0f0;
    }

/* ===== Custom bay editor modals ===== */
#customBayDiv.modal,
#frontGaraportCustomBayModal.modal,
#backGaraportCustomBayModal.modal {
    padding: 24px;
    background: rgba(8, 15, 24, 0.42);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
}

#customBayDiv .modal-content,
#frontGaraportCustomBayModal .modal-content,
#backGaraportCustomBayModal .modal-content {
    position: relative;
    max-width: 920px;
    width: min(920px, 100%);
    padding: 0;
    border: 0;
    border-radius: 28px;
    overflow-y: auto;
    max-height: 90vh;
    background: linear-gradient(180deg, #f8fbfd 0%, #eef3f7 100%);
    box-shadow: 0 28px 60px rgba(6, 15, 26, 0.28);
}

#customBayDiv .popup-content,
#frontGaraportCustomBayModal .popup-content,
#backGaraportCustomBayModal .popup-content {
    padding: 28px 28px 22px;
}

#customBayDiv .custom-close,
#frontGaraportCustomBayModal .custom-close,
#backGaraportCustomBayModal .custom-close,
#customBayDiv .custom-back,
#frontGaraportCustomBayModal .custom-back,
#backGaraportCustomBayModal .custom-back {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 10px 22px rgba(20, 38, 58, 0.14);
    font-size: 24px;
    color: #17324a;
    cursor: pointer;
}

.bay-editor-hero {
    margin-bottom: 20px;
    padding: 22px 22px 18px;
    border-radius: 22px;
    color: #ffffff;
    box-shadow: 0 18px 34px rgba(29, 59, 86, 0.24);
}

.bay-editor-hero-size {
    background: linear-gradient(135deg, #1f5d4b 0%, #4d8a78 100%);
}

.bay-editor-hero-garaport {
    background: linear-gradient(135deg, #1d3b56 0%, #416a89 100%);
}

.bay-range-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    width: 100%;
}

.bay-override-control {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 132px;
    margin: 0;
    color: #1f5d4b;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}

.bay-override-control input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #1f5d4b;
}

.bay-override-copy {
    color: #57776d;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bay-row-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    min-height: 30px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(31, 93, 75, 0.12);
    color: #1f5d4b;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.bay-editor-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bay-editor-title {
    margin: 0;
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;
}

.bay-editor-subtitle {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.92rem;
    line-height: 1.5;
}

.bay-editor-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.bay-editor-tab {
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid rgba(24, 52, 76, 0.1);
    border-radius: 999px;
    background: #ffffff;
    color: #4d6578;
    font-size: 0.88rem;
    font-weight: 700;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

    .bay-editor-tab:hover {
        transform: translateY(-1px);
        box-shadow: 0 10px 18px rgba(15, 23, 42, 0.08);
    }

    .bay-editor-tab.active {
        background: linear-gradient(180deg, #1f4765 0%, #16364f 100%);
        color: #ffffff;
        border-color: transparent;
        box-shadow: 0 12px 22px rgba(22, 54, 79, 0.22);
    }

.bay-editor-panel {
    display: none;
}

    .bay-editor-panel.active {
        display: block;
    }

.bay-editor-shell {
    padding: 18px;
    border: 1px solid rgba(24, 52, 76, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08);
}

#frontGaraportCustomBayModal .garaport-bay-list,
#backGaraportCustomBayModal .garaport-bay-list {
    display: grid;
    gap: 12px;
}

#frontGaraportCustomBayModal .bay-editor-shell,
#backGaraportCustomBayModal .bay-editor-shell {
    padding: 16px;
    border: 1px solid rgba(29, 75, 62, 0.1);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f9f7 100%);
    box-shadow: 0 12px 24px rgba(29, 75, 62, 0.06);
}

#frontGaraportCustomBayModal .bay-editor-title,
#backGaraportCustomBayModal .bay-editor-title,
#frontGaraportCustomBayModal .bay-editor-subtitle,
#backGaraportCustomBayModal .bay-editor-subtitle {
    color: #ffffff;
}

#frontGaraportCustomBayModal .bay-editor-footer,
#backGaraportCustomBayModal .bay-editor-footer {
    justify-content: flex-end;
}

#frontGaraportCustomBayModal .bay-row-badge,
#backGaraportCustomBayModal .bay-row-badge {
    background: rgba(31, 93, 75, 0.12);
    color: #1f5d4b;
}

#frontGaraportCustomBayModal .range-container,
#backGaraportCustomBayModal .range-container {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(32, 62, 89, 0.12);
    border-radius: 14px;
    background: #f9fbfc;
}

#FrontCustomBayWidth.garaport-inline-toggle,
#BackCustomBayWidth.garaport-inline-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 46px;
    padding: 10px 16px;
    border: 1px solid rgba(29, 75, 62, 0.12);
    border-radius: 14px;
    background: #ffffff;
    color: #173b33;
    box-shadow: 0 10px 20px rgba(29, 75, 62, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

#FrontCustomBayWidth.garaport-inline-toggle:hover,
#BackCustomBayWidth.garaport-inline-toggle:hover,
#FrontCustomBayWidth.garaport-inline-toggle.is-active,
#BackCustomBayWidth.garaport-inline-toggle.is-active {
    background: linear-gradient(180deg, #2f6b5d 0%, #1d4b3e 100%);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(29, 75, 62, 0.16);
}

#frontGaraportCustomBayModal .range-container.is-readonly,
#backGaraportCustomBayModal .range-container.is-readonly {
    background: linear-gradient(180deg, #f8fafb 0%, #eef2f5 100%);
    border-color: rgba(148, 163, 184, 0.2);
}

#frontGaraportCustomBayModal .range-container.is-readonly .bay-override-control,
#backGaraportCustomBayModal .range-container.is-readonly .bay-override-control {
    opacity: 0.76;
}

#frontGaraportCustomBayModal input[type="range"],
#backGaraportCustomBayModal input[type="range"] {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(90deg, #c8d9d2 0%, #9cbcb2 100%);
    outline: none;
    box-shadow: inset 0 1px 2px rgba(18, 48, 40, 0.18);
}

    #frontGaraportCustomBayModal input[type="range"]::-webkit-slider-thumb,
    #backGaraportCustomBayModal input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        border: 2px solid #ffffff;
        border-radius: 50%;
        background: linear-gradient(180deg, #2f6b5d 0%, #1d4b3e 100%);
        box-shadow: 0 4px 10px rgba(29, 75, 62, 0.28);
        cursor: pointer;
    }

#frontGaraportCustomBayModal input[type="range"]:disabled,
#backGaraportCustomBayModal input[type="range"]:disabled,
#frontGaraportCustomBayModal input[type="number"]:disabled,
#backGaraportCustomBayModal input[type="number"]:disabled {
    opacity: 0.52;
    cursor: not-allowed;
}

#frontGaraportCustomBayModal .bay-override-control,
#backGaraportCustomBayModal .bay-override-control {
    display: grid;
    grid-template-columns: 16px auto auto;
    align-items: center;
    column-gap: 10px;
    flex: 0 0 186px;
    min-width: 186px;
    min-height: 46px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid rgba(31, 93, 75, 0.14);
    background: linear-gradient(180deg, #ffffff 0%, #eef6f2 100%);
}

#frontGaraportCustomBayModal .bay-override-copy,
#backGaraportCustomBayModal .bay-override-copy {
    line-height: 1;
}

#frontGaraportCustomBayModal .bay-row-badge,
#backGaraportCustomBayModal .bay-row-badge {
    justify-self: end;
}

    #frontGaraportCustomBayModal input[type="range"]::-moz-range-thumb,
    #backGaraportCustomBayModal input[type="range"]::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border: 2px solid #ffffff;
        border-radius: 50%;
        background: linear-gradient(180deg, #2f6b5d 0%, #1d4b3e 100%);
        box-shadow: 0 4px 10px rgba(29, 75, 62, 0.28);
        cursor: pointer;
    }

#frontGaraportCustomBayModal input[type="number"],
#backGaraportCustomBayModal input[type="number"] {
    width: 110px;
    min-width: 110px;
    min-height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(32, 62, 89, 0.16);
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    background: #fdfefe;
    color: #10283d;
}

#frontGaraportCustomBayModal .plus-btn,
#frontGaraportCustomBayModal .minus-btn,
#backGaraportCustomBayModal .plus-btn,
#backGaraportCustomBayModal .minus-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: 12px;
    font-weight: 700;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

#frontGaraportCustomBayModal .plus-btn,
#backGaraportCustomBayModal .plus-btn {
    min-width: 110px;
    padding: 10px 16px;
    border: 1px solid rgba(29, 75, 62, 0.12);
    background: linear-gradient(180deg, #2f6b5d 0%, #1d4b3e 100%);
    color: #ffffff;
    box-shadow: 0 12px 20px rgba(29, 75, 62, 0.18);
}

    #frontGaraportCustomBayModal .plus-btn:hover,
    #backGaraportCustomBayModal .plus-btn:hover {
        background: linear-gradient(180deg, #367766 0%, #205245 100%);
        transform: translateY(-1px);
    }

#frontGaraportCustomBayModal .minus-btn,
#backGaraportCustomBayModal .minus-btn {
    min-width: 92px;
    padding: 10px 16px;
    border: 1px solid rgba(166, 54, 54, 0.2);
    background: #fff6f6;
    color: #b13e3e;
}

    #frontGaraportCustomBayModal .minus-btn:hover,
    #backGaraportCustomBayModal .minus-btn:hover {
        background: #ffecec;
        transform: translateY(-1px);
    }

.bay-editor-footer {
    display: flex;
    justify-content: flex-end;
    padding: 18px 28px 28px;
    border-top: 1px solid rgba(24, 52, 76, 0.08);
    background: rgba(244, 248, 251, 0.94);
}

#customBayDiv .cancel-btn,
#frontGaraportCustomBayModal .cancel-btn,
#backGaraportCustomBayModal .cancel-btn {
    min-width: 160px;
    min-height: 48px;
    border-radius: 14px;
    border: 1px solid rgba(32, 62, 89, 0.16);
    background: #ffffff;
    color: #17324a;
    font-size: 0.94rem;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

    #customBayDiv .cancel-btn:hover,
    #frontGaraportCustomBayModal .cancel-btn:hover,
    #backGaraportCustomBayModal .cancel-btn:hover {
        background: #f5f8fb;
        transform: translateY(-1px);
    }

@media (max-width: 720px) {
    #customBayDiv.modal,
    #frontGaraportCustomBayModal.modal,
    #backGaraportCustomBayModal.modal {
        padding: 14px;
    }

    #customBayDiv .popup-content,
    #frontGaraportCustomBayModal .popup-content,
    #backGaraportCustomBayModal .popup-content {
        padding: 20px 18px 18px;
    }

    .bay-editor-tabs {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .bay-editor-tab {
        width: 100%;
    }

    #frontGaraportCustomBayModal .range-container,
    #backGaraportCustomBayModal .range-container {
        flex-wrap: wrap;
    }

    #frontGaraportCustomBayModal input[type="number"],
    #backGaraportCustomBayModal input[type="number"] {
        width: 100%;
        min-width: 0;
    }

    .bay-range-cell {
        flex-wrap: wrap;
    }

    .bay-editor-footer {
        padding: 16px 18px 20px;
    }

    #customBayDiv .cancel-btn,
    #frontGaraportCustomBayModal .cancel-btn,
    #backGaraportCustomBayModal .cancel-btn {
        width: 100%;
        min-width: 0;
    }
}

#Tab-ContentDiv-Walls.modal {
    padding: 24px;
    background: rgba(8, 15, 24, 0.42);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
}

#Tab-ContentDiv-Walls .modal-content {
    position: relative;
    width: 70vw;
    max-width: 70vw;
    padding: 0;
    border: 0;
    border-radius: 28px;
    overflow-y: auto;
    background: linear-gradient(180deg, #f8fafc 0%, #eef3f7 100%);
    box-shadow: 0 28px 60px rgba(6, 15, 26, 0.28);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
}

#Tab-ContentDiv-Walls .popup-content {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    padding: 78px 28px 24px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    overscroll-behavior: contain;
}

#Tab-ContentDiv-Walls .walls-panel {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#Tab-ContentDiv-Walls .custom-close,
#Tab-ContentDiv-Walls .custom-back {
    position: absolute;
    top: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 22px rgba(20, 38, 58, 0.14);
    color: #17324a;
}

#Tab-ContentDiv-Walls .custom-close {
    right: 18px;
}

#Tab-ContentDiv-Walls .custom-back {
    right: 68px;
    left: auto;
}

@media (max-width: 768px) {
    #Tab-ContentDiv-Walls.modal {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto !important;
        width: 100% !important;
        height: min(62vh, 420px);
        margin: 0;
        padding: 0;
        background: #ffffff;
        backdrop-filter: none;
        align-items: stretch;
        justify-content: stretch;
    }

    #Tab-ContentDiv-Walls .modal-content {
        height: 100% !important;
        width: 100% !important;
        max-width: none !important;
        max-height: none !important;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }

    #Tab-ContentDiv-Walls .popup-content {
        padding: 52px 16px 18px;
    }
}


/* ===== Roller door modal ===== */
#divRollerDoorData.modal {
    padding: 24px;
    background: rgba(8, 15, 24, 0.42);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
}

#divRollerDoorData .modal-content {
    position: relative;
    max-width: 920px;
    width: min(920px, 100%);
    padding: 0;
    border: 0;
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    max-height: 90vh;
    background: linear-gradient(180deg, #f8fbfd 0%, #eef3f7 100%);
    box-shadow: 0 28px 60px rgba(6, 15, 26, 0.28);
}

#divRollerDoorData .popup-content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 28px 28px 22px;
    overflow-y: auto;
    overflow-x: hidden;
}

    #divRollerDoorData .popup-content > .custom-close {
        position: absolute;
        top: 18px;
        right: 18px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.85);
        box-shadow: 0 10px 22px rgba(20, 38, 58, 0.14);
        font-size: 24px;
        color: #17324a;
        cursor: pointer;
    }

.roller-door-hero {
    margin-bottom: 20px;
    padding: 22px 22px 18px;
    border-radius: 22px;
    background: linear-gradient(135deg, #1d3b56 0%, #416a89 100%);
    color: #ffffff;
    box-shadow: 0 18px 34px rgba(29, 59, 86, 0.24);
}

.roller-door-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.roller-door-title {
    margin: 0;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.3;
}

.roller-door-subtitle {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.92rem;
    line-height: 1.5;
}

.roller-door-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.roller-door-section {
    padding: 18px;
    border: 1px solid rgba(24, 52, 76, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08);
}

.roller-door-section-title {
    margin: 0 0 6px;
    color: #17324a;
    font-size: 1rem;
    font-weight: 700;
}

.roller-door-section-copy {
    margin: 0 0 16px;
    color: #607789;
    font-size: 0.88rem;
    line-height: 1.45;
}

#divRollerDoorData label {
    color: #17324a;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}

#divRollerDoorData .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 16px;
}

    #divRollerDoorData .row:last-child {
        margin-bottom: 0;
    }

#divRollerDoorData .column,
#divRollerDoorData .full-width .column {
    display: flex;
    flex-direction: column;
    width: 100% !important;
}

#divRollerDoorData .full-width {
    margin-bottom: 16px;
}

#divRollerDoorData input[type="text"],
#divRollerDoorData input[type="number"],
#divRollerDoorData select {
    min-height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(32, 62, 89, 0.16);
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    background: #fdfefe;
    color: #10283d;
    box-shadow: inset 0 1px 2px rgba(16, 40, 61, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

    #divRollerDoorData input[type="text"]:focus,
    #divRollerDoorData input[type="number"]:focus,
    #divRollerDoorData select:focus {
        outline: none;
        border-color: #356386;
        box-shadow: 0 0 0 4px rgba(53, 99, 134, 0.12);
        background: #ffffff;
    }

#divRollerDoorData #RollerDoorDef {
    min-height: 52px;
    font-weight: 600;
}

#divRollerDoorData .range-container {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(32, 62, 89, 0.12);
    border-radius: 14px;
    background: #f9fbfc;
}

    #divRollerDoorData .range-container input[type="range"] {
        flex: 1;
    }

    #divRollerDoorData .range-container input[type="number"] {
        width: 96px;
        min-width: 96px;
    }

.roller-door-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 58px;
    padding: 14px 16px;
    border: 1px solid rgba(32, 62, 89, 0.12);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.06);
}

    .roller-door-toggle input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: #2f6b96;
    }

.roller-door-toggle-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.roller-door-toggle-title {
    color: #17324a;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
}

.roller-door-toggle-note {
    color: #628094;
    font-size: 0.82rem;
    line-height: 1.35;
}

#divRollerDoorData .dd-container,
#divRollerDoorData .dd-select,
#divRollerDoorData .dd-options {
    width: 100% !important;
}

#divRollerDoorData .dd-select {
    min-height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(32, 62, 89, 0.16) !important;
    background: #fdfefe !important;
    box-shadow: inset 0 1px 2px rgba(16, 40, 61, 0.04);
}

#divRollerDoorData .dd-selected {
    display: flex !important;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
}

#divRollerDoorData .dd-selected-image,
#divRollerDoorData .dd-option-image {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    object-fit: cover;
}

#divRollerDoorData .dd-selected-text,
#divRollerDoorData .dd-option-text {
    color: #10283d;
    line-height: normal !important;
}

.roller-door-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    flex-shrink: 0;
    padding: 18px 28px 28px;
    border-top: 1px solid rgba(24, 52, 76, 0.08);
    background: rgba(244, 248, 251, 0.94);
}

    .roller-door-footer .column {
        width: 100%;
    }

#btnSaveRollerDoor,
#divRollerDoorData .cancel-btn {
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
    font-size: 0.94rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

#btnSaveRollerDoor {
    background: linear-gradient(180deg, #1f4765 0%, #16364f 100%);
    color: #ffffff;
    box-shadow: 0 14px 24px rgba(22, 54, 79, 0.22);
}

    #btnSaveRollerDoor:hover {
        transform: translateY(-1px);
        box-shadow: 0 18px 28px rgba(22, 54, 79, 0.28);
    }

#divRollerDoorData .cancel-btn {
    background: #ffffff;
    color: #17324a;
    border: 1px solid rgba(32, 62, 89, 0.16);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

    #divRollerDoorData .cancel-btn:hover {
        background: #f5f8fb;
    }


/* ===== Access door modal ===== */
#divAccessDoorData.modal {
    padding: 24px;
    background: rgba(8, 15, 24, 0.42);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
}

#divAccessDoorData .modal-content {
    position: relative;
    max-width: 920px;
    width: min(920px, 100%);
    padding: 0;
    border: 0;
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    max-height: 90vh;
    background: linear-gradient(180deg, #f8fbfd 0%, #eef3f7 100%);
    box-shadow: 0 28px 60px rgba(6, 15, 26, 0.28);
}

#divAccessDoorData .popup-content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 28px 28px 22px;
    overflow-y: auto;
    overflow-x: hidden;
}

    #divAccessDoorData .popup-content > .custom-close {
        position: absolute;
        top: 18px;
        right: 18px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.85);
        box-shadow: 0 10px 22px rgba(20, 38, 58, 0.14);
        font-size: 24px;
        color: #17324a;
        cursor: pointer;
    }

.access-door-hero {
    margin-bottom: 20px;
    padding: 22px 22px 18px;
    border-radius: 22px;
    background: linear-gradient(135deg, #1d3b56 0%, #416a89 100%);
    color: #ffffff;
    box-shadow: 0 18px 34px rgba(29, 59, 86, 0.24);
}

.access-door-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.access-door-title {
    margin: 0;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.3;
}

.access-door-subtitle {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.92rem;
    line-height: 1.5;
}

.access-door-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.access-door-section {
    padding: 18px;
    border: 1px solid rgba(24, 52, 76, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08);
}

.access-door-section-title {
    margin: 0 0 6px;
    color: #17324a;
    font-size: 1rem;
    font-weight: 700;
}

.access-door-section-copy {
    margin: 0 0 16px;
    color: #607789;
    font-size: 0.88rem;
    line-height: 1.45;
}

#divAccessDoorData label {
    color: #17324a;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}

#divAccessDoorData .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 16px;
}

    #divAccessDoorData .row:last-child {
        margin-bottom: 0;
    }

#divAccessDoorData .column,
#divAccessDoorData .full-width .column {
    display: flex;
    flex-direction: column;
    width: 100% !important;
}

#divAccessDoorData .full-width {
    margin-bottom: 16px;
}

#divAccessDoorData input[type="text"],
#divAccessDoorData input[type="number"],
#divAccessDoorData select {
    min-height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(32, 62, 89, 0.16);
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    background: #fdfefe;
    color: #10283d;
    box-shadow: inset 0 1px 2px rgba(16, 40, 61, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

    #divAccessDoorData input[type="text"]:focus,
    #divAccessDoorData input[type="number"]:focus,
    #divAccessDoorData select:focus {
        outline: none;
        border-color: #356386;
        box-shadow: 0 0 0 4px rgba(53, 99, 134, 0.12);
        background: #ffffff;
    }

#divAccessDoorData #TypeAccessDoor {
    min-height: 52px;
    font-weight: 600;
}

#divAccessDoorData .range-container {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(32, 62, 89, 0.12);
    border-radius: 14px;
    background: #f9fbfc;
}

    #divAccessDoorData .range-container input[type="range"] {
        flex: 1;
    }

    #divAccessDoorData .range-container input[type="number"] {
        width: 96px;
        min-width: 96px;
    }

#divAccessDoorData .dd-container,
#divAccessDoorData .dd-select,
#divAccessDoorData .dd-options {
    width: 100% !important;
}

#divAccessDoorData .dd-select {
    min-height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(32, 62, 89, 0.16) !important;
    background: #fdfefe !important;
    box-shadow: inset 0 1px 2px rgba(16, 40, 61, 0.04);
}

#divAccessDoorData .dd-selected {
    display: flex !important;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
}

#divAccessDoorData .dd-selected-image,
#divAccessDoorData .dd-option-image {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    object-fit: cover;
}

#divAccessDoorData .dd-selected-text,
#divAccessDoorData .dd-option-text {
    color: #10283d;
    line-height: normal !important;
}

.access-door-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    flex-shrink: 0;
    padding: 18px 28px 28px;
    border-top: 1px solid rgba(24, 52, 76, 0.08);
    background: rgba(244, 248, 251, 0.94);
}

    .access-door-footer .column {
        width: 100%;
    }

#btnSaveAccessDoor,
#divAccessDoorData .cancel-btn {
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
    font-size: 0.94rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

#btnSaveAccessDoor {
    background: linear-gradient(180deg, #1f4765 0%, #16364f 100%);
    color: #ffffff;
    box-shadow: 0 14px 24px rgba(22, 54, 79, 0.22);
}

    #btnSaveAccessDoor:hover {
        transform: translateY(-1px);
        box-shadow: 0 18px 28px rgba(22, 54, 79, 0.28);
    }

#divAccessDoorData .cancel-btn {
    background: #ffffff;
    color: #17324a;
    border: 1px solid rgba(32, 62, 89, 0.16);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

    #divAccessDoorData .cancel-btn:hover {
        background: #f5f8fb;
    }


/* ===== Glass sliding door modal ===== */
#divGlassSlidingDoorData.modal {
    padding: 24px;
    background: rgba(8, 15, 24, 0.42);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
}

#divGlassSlidingDoorData .modal-content {
    position: relative;
    max-width: 920px;
    width: min(920px, 100%);
    padding: 0;
    border: 0;
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    max-height: 90vh;
    background: linear-gradient(180deg, #f8fbfd 0%, #eef3f7 100%);
    box-shadow: 0 28px 60px rgba(6, 15, 26, 0.28);
}

#divGlassSlidingDoorData .popup-content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 28px 28px 22px;
    overflow-y: auto;
    overflow-x: hidden;
}

    #divGlassSlidingDoorData .popup-content > .custom-close {
        position: absolute;
        top: 18px;
        right: 18px;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.85);
        box-shadow: 0 10px 22px rgba(20, 38, 58, 0.14);
        font-size: 24px;
        color: #17324a;
        cursor: pointer;
    }

.glass-sliding-door-hero {
    margin-bottom: 20px;
    padding: 22px 22px 18px;
    border-radius: 22px;
    background: linear-gradient(135deg, #1d3b56 0%, #416a89 100%);
    color: #ffffff;
    box-shadow: 0 18px 34px rgba(29, 59, 86, 0.24);
}

.glass-sliding-door-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.glass-sliding-door-title {
    margin: 0;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.3;
}

.glass-sliding-door-subtitle {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.92rem;
    line-height: 1.5;
}

.glass-sliding-door-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.glass-sliding-door-section {
    padding: 18px;
    border: 1px solid rgba(24, 52, 76, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08);
}

.glass-sliding-door-section-title {
    margin: 0 0 6px;
    color: #17324a;
    font-size: 1rem;
    font-weight: 700;
}

.glass-sliding-door-section-copy {
    margin: 0 0 16px;
    color: #607789;
    font-size: 0.88rem;
    line-height: 1.45;
}

#divGlassSlidingDoorData label {
    color: #17324a;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}

#divGlassSlidingDoorData .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 16px;
}

    #divGlassSlidingDoorData .row:last-child {
        margin-bottom: 0;
    }

#divGlassSlidingDoorData .column,
#divGlassSlidingDoorData .full-width .column {
    display: flex;
    flex-direction: column;
    width: 100% !important;
}

#divGlassSlidingDoorData .full-width {
    margin-bottom: 16px;
}

#divGlassSlidingDoorData input[type="text"],
#divGlassSlidingDoorData input[type="number"],
#divGlassSlidingDoorData select {
    min-height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(32, 62, 89, 0.16);
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    background: #fdfefe;
    color: #10283d;
    box-shadow: inset 0 1px 2px rgba(16, 40, 61, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

    #divGlassSlidingDoorData input[type="text"]:focus,
    #divGlassSlidingDoorData input[type="number"]:focus,
    #divGlassSlidingDoorData select:focus {
        outline: none;
        border-color: #356386;
        box-shadow: 0 0 0 4px rgba(53, 99, 134, 0.12);
        background: #ffffff;
    }

#divGlassSlidingDoorData #TypeGlassSlidingDoor {
    min-height: 52px;
    font-weight: 600;
}

#divGlassSlidingDoorData .dd-container,
#divGlassSlidingDoorData .dd-select,
#divGlassSlidingDoorData .dd-options {
    width: 100% !important;
}

#divGlassSlidingDoorData .dd-select {
    min-height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(32, 62, 89, 0.16) !important;
    background: #fdfefe !important;
    box-shadow: inset 0 1px 2px rgba(16, 40, 61, 0.04);
}

#divGlassSlidingDoorData .dd-selected {
    display: flex !important;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
}

#divGlassSlidingDoorData .dd-selected-image,
#divGlassSlidingDoorData .dd-option-image {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    object-fit: cover;
}

#divGlassSlidingDoorData .dd-selected-text,
#divGlassSlidingDoorData .dd-option-text {
    color: #10283d;
    line-height: normal !important;
}

.glass-sliding-door-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    flex-shrink: 0;
    padding: 18px 28px 28px;
    border-top: 1px solid rgba(24, 52, 76, 0.08);
    background: rgba(244, 248, 251, 0.94);
}

    .glass-sliding-door-footer .column {
        width: 100%;
    }

#btnSaveGlassSlidingDoor,
#divGlassSlidingDoorData .cancel-btn {
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
    font-size: 0.94rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

#btnSaveGlassSlidingDoor {
    background: linear-gradient(180deg, #1f4765 0%, #16364f 100%);
    color: #ffffff;
    box-shadow: 0 14px 24px rgba(22, 54, 79, 0.22);
}

    #btnSaveGlassSlidingDoor:hover {
        transform: translateY(-1px);
        box-shadow: 0 18px 28px rgba(22, 54, 79, 0.28);
    }

#divGlassSlidingDoorData .cancel-btn {
    background: #ffffff;
    color: #17324a;
    border: 1px solid rgba(32, 62, 89, 0.16);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

    #divGlassSlidingDoorData .cancel-btn:hover {
        background: #f5f8fb;
    }


/* ===== Window modal ===== */
#divWindowData.modal {
    padding: 24px;
    background: rgba(8, 15, 24, 0.42);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
}

#divWindowData .modal-content {
    position: relative;
    max-width: 920px;
    width: min(920px, 100%);
    padding: 0;
    border: 0;
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    max-height: 90vh;
    background: linear-gradient(180deg, #f8fbfd 0%, #eef3f7 100%);
    box-shadow: 0 28px 60px rgba(6, 15, 26, 0.28);
}

#divWindowData .popup-content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 28px 28px 22px;
    overflow-y: auto;
    overflow-x: hidden;
}

#divWindowData .custom-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 10px 22px rgba(20, 38, 58, 0.14);
    font-size: 24px;
    color: #17324a;
    cursor: pointer;
}

.window-hero {
    margin-bottom: 20px;
    padding: 22px 22px 18px;
    border-radius: 22px;
    background: linear-gradient(135deg, #1d3b56 0%, #416a89 100%);
    color: #ffffff;
    box-shadow: 0 18px 34px rgba(29, 59, 86, 0.24);
}

.window-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.window-title {
    margin: 0;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.3;
}

.window-subtitle {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.92rem;
    line-height: 1.5;
}

.window-layout {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.window-section {
    padding: 18px;
    border: 1px solid rgba(24, 52, 76, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08);
}

.window-section-title {
    margin: 0 0 6px;
    color: #17324a;
    font-size: 1rem;
    font-weight: 700;
}

.window-section-copy {
    margin: 0 0 16px;
    color: #607789;
    font-size: 0.88rem;
    line-height: 1.45;
}

#divWindowData label {
    color: #17324a;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}

#divWindowData .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0 0 16px;
}

    #divWindowData .row:last-child {
        margin-bottom: 0;
    }

#divWindowData .column,
#divWindowData .full-width .column {
    display: flex;
    flex-direction: column;
    width: 100% !important;
}

#divWindowData .full-width {
    margin-bottom: 16px;
}

#divWindowData input[type="text"],
#divWindowData input[type="number"],
#divWindowData select {
    min-height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(32, 62, 89, 0.16);
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
    background: #fdfefe;
    color: #10283d;
    box-shadow: inset 0 1px 2px rgba(16, 40, 61, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

    #divWindowData input[type="text"]:focus,
    #divWindowData input[type="number"]:focus,
    #divWindowData select:focus {
        outline: none;
        border-color: #356386;
        box-shadow: 0 0 0 4px rgba(53, 99, 134, 0.12);
        background: #ffffff;
    }

#divWindowData #TypeWindow {
    min-height: 52px;
    font-weight: 600;
}

#divWindowData .dd-container,
#divWindowData .dd-select,
#divWindowData .dd-options {
    width: 100% !important;
}

#divWindowData .dd-select {
    min-height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(32, 62, 89, 0.16) !important;
    background: #fdfefe !important;
    box-shadow: inset 0 1px 2px rgba(16, 40, 61, 0.04);
}

#divWindowData .dd-selected {
    display: flex !important;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
}

#divWindowData .dd-selected-image,
#divWindowData .dd-option-image {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    object-fit: cover;
}

#divWindowData .dd-selected-text,
#divWindowData .dd-option-text {
    color: #10283d;
    line-height: normal !important;
}

.window-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    flex-shrink: 0;
    padding: 18px 28px 28px;
    border-top: 1px solid rgba(24, 52, 76, 0.08);
    background: rgba(244, 248, 251, 0.94);
}

    .window-footer .column {
        width: 100%;
    }

#btnSaveWindow,
#divWindowData .cancel-btn {
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
    font-size: 0.94rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

#btnSaveWindow {
    background: linear-gradient(180deg, #1f4765 0%, #16364f 100%);
    color: #ffffff;
    box-shadow: 0 14px 24px rgba(22, 54, 79, 0.22);
}

    #btnSaveWindow:hover {
        transform: translateY(-1px);
        box-shadow: 0 18px 28px rgba(22, 54, 79, 0.28);
    }

#divWindowData .cancel-btn {
    background: #ffffff;
    color: #17324a;
    border: 1px solid rgba(32, 62, 89, 0.16);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

    #divWindowData .cancel-btn:hover {
        background: #f5f8fb;
    }


/* Primary visible buttons */
.grid .grid-button,
button,
.btn {
    background-color: #2e3b1e; /* Dark green for contrast */
    color: #ffffff; /* White text for readability */
    border: none;
}

    /* Hover effect to indicate interactivity */
    .grid .grid-button:hover,
    button:hover,
    .btn:hover {
        background-color: #1f2a12; /* Slightly darker on hover */
    }

    /* Disabled state adjustment */
    .btn-default.disabled,
    .btn.disabled,
    .btn[disabled],
    fieldset[disabled] .btn,
    button[disabled],
    html input[disabled] {
        background-color: #dcdcdc !important; /* light grey */
        color: rgba(0, 0, 0, 0.5) !important;
        cursor: not-allowed;
        opacity: 1;
        box-shadow: none;
    }

.grid .btn-default {
    background-color: darkgray;
}

#Tab-ContentDiv-Walls {
    background: linear-gradient(180deg, #f7f9fc 0%, #e7edf4 100%);
}

#Tab-ContentDiv-Size {
    background: linear-gradient(180deg, #f6faf7 0%, #e4edf0 100%);
}

.size-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 12px;
}

.size-intro {
    padding: 18px 18px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #1d4b3e 0%, #2f6b5d 100%);
    color: #ffffff;
    box-shadow: 0 18px 34px rgba(20, 54, 47, 0.22);
}

    .size-intro h2 {
        margin: 10px 0 0;
        color: #ffffff;
        font-size: 1.15rem;
        line-height: 1.4;
        letter-spacing: 0.01em;
    }

.size-intro-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.size-intro-note {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.88rem;
    line-height: 1.5;
}

.size-section {
    padding: 18px;
    border: 1px solid rgba(23, 43, 63, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.08);
}

.size-section-title {
    margin: 0 0 6px;
    color: #173b33;
    font-size: 1rem;
    font-weight: 700;
}

.size-section-copy {
    margin: 0;
    color: #5c726d;
    font-size: 0.88rem;
    line-height: 1.45;
}

.size-field-list {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.size-field-card {
    padding: 14px;
    border: 1px solid rgba(29, 75, 62, 0.1);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f9f7 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 10px 18px rgba(29, 75, 62, 0.06);
}

.size-field-card.mezzanine-only-field {
    border-color: rgba(32, 87, 70, 0.22);
    background: linear-gradient(180deg, #ffffff 0%, #eef8f3 100%);
}

.size-field-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

    .size-field-meta label {
        margin: 0;
        color: #173b33;
        font-size: 0.95rem;
        font-weight: 700;
    }

.size-field-hint {
    color: #6c827d;
    font-size: 0.78rem;
    line-height: 1.35;
    text-align: right;
}

.size-field-note {
    margin: 10px 0 0;
    color: #58716a;
    font-size: 0.8rem;
    line-height: 1.4;
}

.is-mezzanine-locked {
    opacity: 0.58;
}

.menu-item.is-mezzanine-locked,
.menuMobile-item.is-mezzanine-locked,
.opening-floating-menu.is-mezzanine-locked,
.size-field-card.is-mezzanine-locked {
    cursor: not-allowed;
}

.opening-floating-menu.is-mezzanine-locked .opening-floating-menu-item,
.opening-floating-menu.is-mezzanine-locked .opening-floating-toggle,
.size-field-card.is-mezzanine-locked select,
.size-field-card.is-mezzanine-locked input,
.size-field-card.is-mezzanine-locked label {
    cursor: not-allowed;
}

#Tab-ContentDiv-Size .range-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

#Tab-ContentDiv-Size input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 8px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(90deg, #c8d9d2 0%, #9cbcb2 100%);
    outline: none;
    box-shadow: inset 0 1px 2px rgba(18, 48, 40, 0.18);
}

    #Tab-ContentDiv-Size input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        border: 2px solid #ffffff;
        border-radius: 50%;
        background: linear-gradient(180deg, #2f6b5d 0%, #1d4b3e 100%);
        box-shadow: 0 4px 10px rgba(29, 75, 62, 0.28);
        cursor: pointer;
    }

    #Tab-ContentDiv-Size input[type="range"]::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border: 2px solid #ffffff;
        border-radius: 50%;
        background: linear-gradient(180deg, #2f6b5d 0%, #1d4b3e 100%);
        box-shadow: 0 4px 10px rgba(29, 75, 62, 0.28);
        cursor: pointer;
    }

#Tab-ContentDiv-Size input[type="number"],
#Tab-ContentDiv-Size select {
    min-height: 46px;
    border: 1px solid rgba(29, 75, 62, 0.18) !important;
    border-radius: 14px !important;
    background: #fbfdfc !important;
    color: #173b33;
    box-shadow: none !important;
}

#Tab-ContentDiv-Size input[type="number"] {
    width: 88px;
    padding: 10px 12px;
    font-weight: 700;
    text-align: center;
}

#Tab-ContentDiv-Size select {
    width: 100%;
    padding: 10px 14px;
    font-weight: 600;
}

    #Tab-ContentDiv-Size input[type="number"]:focus,
    #Tab-ContentDiv-Size select:focus {
        border-color: rgba(29, 75, 62, 0.42) !important;
        box-shadow: 0 0 0 3px rgba(47, 107, 93, 0.12) !important;
    }

.size-toggle-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    margin-top: 16px;
    border: 1px solid rgba(29, 75, 62, 0.12);
    border-radius: 16px;
    background: linear-gradient(180deg, #f9fcfb 0%, #eff7f3 100%);
}

.size-overhang-match-card {
    gap: 12px;
}

.size-overhang-checkbox-list {
    display: grid;
    gap: 10px;
}

.size-overhang-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #173b33;
    font-size: 0.9rem;
    font-weight: 600;
}

.size-overhang-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #1d4b3e;
}

.size-toggle-copy {
    flex: 1;
}

    .size-toggle-copy strong {
        display: block;
        color: #173b33;
        font-size: 0.93rem;
        font-weight: 700;
    }

    .size-toggle-copy span {
        display: block;
        margin-top: 4px;
        color: #6c827d;
        font-size: 0.8rem;
        line-height: 1.4;
    }

#Tab-ContentDiv-Size .checkbox-container.size-checkbox {
    margin: 0;
    gap: 10px;
    flex-shrink: 0;
}

    #Tab-ContentDiv-Size .checkbox-container.size-checkbox input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: #2f6b5d;
    }

    #Tab-ContentDiv-Size .checkbox-container.size-checkbox label {
        margin: 0;
        font-size: 0.9rem;
        font-weight: 700;
        color: #173b33;
    }

.size-custombay-helper {
    margin-top: 14px;
}

.size-toggle-card .size-edit-bays-btn {
    flex: 0 0 auto;
}

.size-edit-bays-btn {
    min-height: 46px;
    padding: 10px 16px;
    border: 1px solid rgba(29, 75, 62, 0.12);
    border-radius: 14px;
    background: #ffffff;
    color: #173b33;
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 10px 20px rgba(29, 75, 62, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

    .size-edit-bays-btn:hover {
        background: #f5fbf8;
        transform: translateY(-1px);
        box-shadow: 0 14px 24px rgba(29, 75, 62, 0.12);
    }

.size-bay-list {
    display: grid;
    gap: 16px;
}

.size-bay-section {
    padding: 16px;
    border: 1px solid rgba(29, 75, 62, 0.1);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f9f7 100%);
    box-shadow: 0 12px 24px rgba(29, 75, 62, 0.06);
}

.size-bay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.size-bay-title-wrap {
    min-width: 0;
}

    .size-bay-title-wrap label {
        margin: 0;
        color: #173b33;
        font-size: 0.95rem;
        font-weight: 700;
    }

.size-bay-copy {
    margin-top: 4px;
    color: #6c827d;
    font-size: 0.8rem;
    line-height: 1.4;
}

.size-bay-table-shell {
    padding: 10px;
    border: 1px solid rgba(29, 75, 62, 0.08);
    border-radius: 16px;
    background: rgba(241, 247, 244, 0.8);
    overflow-x: auto;
}

#customBayDiv .dataTables_wrapper {
    width: 100%;
}

#Tab-ContentDiv-Size table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
    margin: 0;
}

    #Tab-ContentDiv-Size table tbody tr {
        background: #ffffff;
        box-shadow: 0 8px 16px rgba(29, 75, 62, 0.08);
    }

    #Tab-ContentDiv-Size table td {
        padding: 10px 8px;
        vertical-align: middle;
    }

        #Tab-ContentDiv-Size table td:first-child {
            border-radius: 14px 0 0 14px;
            min-width: 260px;
        }

        #Tab-ContentDiv-Size table td:nth-child(2) {
            width: 108px;
        }

        #Tab-ContentDiv-Size table td:nth-child(3) {
            width: 108px;
            text-align: center;
        }

        #Tab-ContentDiv-Size table td:last-child {
            border-radius: 0 14px 14px 0;
        }

        #Tab-ContentDiv-Size table td:nth-child(4) {
            min-width: 220px;
            padding-left: 0;
        }

#Tab-ContentDiv-Size .input-wrap {
    width: 84px !important;
    min-height: 42px;
    padding: 8px 10px;
    text-align: center;
    font-weight: 700;
}

#Tab-ContentDiv-Size .btn-group {
    display: flex;
    justify-content: center;
    width: 100%;
}

.bay-wall-toggle-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}

.bay-wall-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-width: 92px;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid rgba(31, 93, 75, 0.16);
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbf8 100%);
    color: #24463b;
    box-shadow: 0 8px 16px rgba(29, 75, 62, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

    .bay-wall-toggle:hover {
        transform: translateY(-1px);
        box-shadow: 0 12px 18px rgba(29, 75, 62, 0.1);
    }

    .bay-wall-toggle.is-open {
        border-color: rgba(178, 76, 57, 0.18);
        background: linear-gradient(180deg, #fff5f1 0%, #ffe9e1 100%);
        color: #8d3f30;
        box-shadow: 0 10px 18px rgba(141, 63, 48, 0.1);
    }

.bay-wall-toggle-label {
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.1;
}

.bay-wall-toggle-state {
    font-size: 0.7rem;
    font-weight: 600;
    opacity: 0.78;
    line-height: 1.1;
}

#Tab-ContentDiv-Size .plus-btn,
#Tab-ContentDiv-Size .minus-btn,
#Tab-ContentDiv-Size button.minus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: 12px;
    font-weight: 700;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

#Tab-ContentDiv-Size .plus-btn {
    min-width: 110px;
    padding: 10px 16px;
    border: 1px solid rgba(29, 75, 62, 0.12);
    background: linear-gradient(180deg, #2f6b5d 0%, #1d4b3e 100%);
    color: #ffffff;
    box-shadow: 0 12px 20px rgba(29, 75, 62, 0.18);
}

    #Tab-ContentDiv-Size .plus-btn:hover {
        background: linear-gradient(180deg, #367766 0%, #205245 100%);
        transform: translateY(-1px);
    }

#Tab-ContentDiv-Size .minus-btn,
#Tab-ContentDiv-Size button.minus {
    min-width: 92px;
    padding: 10px 16px;
    border: 1px solid rgba(166, 54, 54, 0.2);
    background: #fff6f6;
    color: #b13e3e;
}

    #Tab-ContentDiv-Size .minus-btn:hover,
    #Tab-ContentDiv-Size button.minus:hover {
        background: #ffecec;
        transform: translateY(-1px);
    }

@media (max-width: 640px) {
    .size-field-meta,
    .size-bay-header,
    .size-toggle-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .size-field-hint {
        text-align: left;
    }

    #Tab-ContentDiv-Size .range-container {
        flex-wrap: wrap;
    }

    #Tab-ContentDiv-Size input[type="number"] {
        width: 100%;
    }

    #Tab-ContentDiv-Size .plus-btn {
        width: 100%;
    }

    .size-edit-bays-btn {
        width: 100%;
    }
}

#Tab-ContentDiv-Awnings {
    background: linear-gradient(180deg, #f8fafc 0%, #e7edf4 100%);
}

.awnings-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 12px;
}

.awnings-intro {
    padding: 18px 18px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #21425d 0%, #4f6f8a 100%);
    color: #ffffff;
    box-shadow: 0 18px 34px rgba(23, 43, 63, 0.22);
}

    .awnings-intro h2 {
        margin: 10px 0 0;
        color: #ffffff;
        font-size: 1.15rem;
        line-height: 1.4;
        letter-spacing: 0.01em;
    }

.awnings-intro-badge {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 10px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

    .awnings-intro-badge .menu-svg-icon {
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        display: block;
        margin-right: 0;
        color: currentColor;
        overflow: visible;
    }

.awnings-intro-note {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.88rem;
    line-height: 1.5;
}

.awning-card {
    padding: 18px;
    border: 1px solid rgba(23, 43, 63, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.08);
}

.awning-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.awning-card-title h3 {
    margin: 0;
    color: #18344c;
    font-size: 1rem;
    font-weight: 700;
}

.awning-card-title p {
    margin: 6px 0 0;
    color: #5b7183;
    font-size: 0.88rem;
    line-height: 1.45;
}

.awning-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid rgba(35, 71, 101, 0.12);
    border-radius: 14px;
    background: linear-gradient(180deg, #f9fbfd 0%, #edf3f8 100%);
    flex-shrink: 0;
}

#Tab-ContentDiv-Awnings .awning-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #315d80;
}

#Tab-ContentDiv-Awnings .awning-toggle span {
    color: #17324a;
    font-size: 0.9rem;
    font-weight: 700;
}

.awning-options {
    display: grid;
    gap: 14px;
}

.awning-toggle-grid {
    display: grid;
    gap: 12px;
}

.awning-inline-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid rgba(35, 71, 101, 0.12);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
    box-shadow: 0 10px 18px rgba(31, 58, 85, 0.06);
}

#Tab-ContentDiv-Awnings .awning-inline-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #315d80;
}

#Tab-ContentDiv-Awnings .awning-inline-toggle span {
    color: #17324a;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
}

.menu-info-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-left: auto;
    border: 1px solid rgba(49, 93, 128, 0.18);
    border-radius: 50%;
    background: linear-gradient(180deg, #ffffff 0%, #eef5fa 100%);
    color: #2f5c7e;
    font-size: 0.9rem;
    box-shadow: 0 10px 18px rgba(31, 58, 85, 0.1);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

    .menu-info-trigger:hover,
    .menu-info-trigger:focus {
        background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
        color: #17324a;
        transform: translateY(-1px) scale(1.04);
        box-shadow: 0 14px 24px rgba(31, 58, 85, 0.16);
        outline: none;
    }

    .menu-info-trigger i {
        pointer-events: none;
    }

.tooltip.in {
    opacity: 1;
}

.tooltip {
    opacity: 1 !important;
}

.tooltip-inner {
    max-width: 300px;
    padding: 14px 16px;
    border: 1px solid rgba(123, 174, 214, 0.28);
    border-radius: 16px;
    background: linear-gradient(135deg, #16364f 0%, #264f70 100%);
    color: #ffffff;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.55;
    text-align: left;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.26);
}

.tooltip.bottom .tooltip-arrow {
    border-bottom-color: #234a69;
}

.tooltip.top .tooltip-arrow {
    border-top-color: #234a69;
}

.tooltip.left .tooltip-arrow {
    border-left-color: #234a69;
}

.tooltip.right .tooltip-arrow {
    border-right-color: #234a69;
}

.awning-field-list {
    display: grid;
    gap: 14px;
}

.awning-field-card {
    padding: 14px;
    border: 1px solid rgba(35, 71, 101, 0.1);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 10px 18px rgba(31, 58, 85, 0.06);
}

.awning-field-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

    .awning-field-meta label {
        margin: 0;
        color: #17324a;
        font-size: 0.95rem;
        font-weight: 700;
    }

.awning-field-hint {
    color: #6b8296;
    font-size: 0.78rem;
    line-height: 1.35;
    text-align: right;
}

#Tab-ContentDiv-Awnings .range-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

#Tab-ContentDiv-Awnings input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 8px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(90deg, #d4e0ea 0%, #a9c0d4 100%);
    outline: none;
    box-shadow: inset 0 1px 2px rgba(24, 52, 76, 0.18);
}

    #Tab-ContentDiv-Awnings input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        border: 2px solid #ffffff;
        border-radius: 50%;
        background: linear-gradient(180deg, #4f6f8a 0%, #21425d 100%);
        box-shadow: 0 4px 10px rgba(33, 66, 93, 0.28);
        cursor: pointer;
    }

    #Tab-ContentDiv-Awnings input[type="range"]::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border: 2px solid #ffffff;
        border-radius: 50%;
        background: linear-gradient(180deg, #4f6f8a 0%, #21425d 100%);
        box-shadow: 0 4px 10px rgba(33, 66, 93, 0.28);
        cursor: pointer;
    }

#Tab-ContentDiv-Awnings input[type="number"],
#Tab-ContentDiv-Awnings select {
    min-height: 46px;
    border: 1px solid rgba(35, 71, 101, 0.18) !important;
    border-radius: 14px !important;
    background: #fbfcfe !important;
    color: #17324a;
    box-shadow: none !important;
}

#Tab-ContentDiv-Awnings input[type="number"] {
    width: 88px;
    padding: 10px 12px;
    font-weight: 700;
    text-align: center;
}

#Tab-ContentDiv-Awnings select {
    width: 100%;
    padding: 10px 14px;
    font-weight: 600;
}

    #Tab-ContentDiv-Awnings input[type="number"]:focus,
    #Tab-ContentDiv-Awnings select:focus {
        border-color: rgba(35, 71, 101, 0.42) !important;
        box-shadow: 0 0 0 3px rgba(49, 93, 128, 0.12) !important;
    }

@media (max-width: 640px) {
    .awning-card-header,
    .awning-field-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .awning-field-hint {
        text-align: left;
    }

    #Tab-ContentDiv-Awnings .range-container {
        flex-wrap: wrap;
    }

    #Tab-ContentDiv-Awnings input[type="number"] {
        width: 100%;
    }
}

#Tab-ContentDiv-Garaports {
    background: linear-gradient(180deg, #f8fafc 0%, #e7edf4 100%);
}

.garaports-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 12px;
}

.garaports-intro {
    padding: 18px 18px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #21425d 0%, #4f6f8a 100%);
    color: #ffffff;
    box-shadow: 0 18px 34px rgba(23, 43, 63, 0.22);
}

    .garaports-intro h2 {
        margin: 10px 0 0;
        color: #ffffff;
        font-size: 1.15rem;
        line-height: 1.4;
        letter-spacing: 0.01em;
    }

.garaports-intro-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.garaports-intro-note {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.88rem;
    line-height: 1.5;
}

.garaport-card {
    padding: 18px;
    border: 1px solid rgba(23, 43, 63, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.08);
}

.garaport-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.garaport-card-title h3 {
    margin: 0;
    color: #18344c;
    font-size: 1rem;
    font-weight: 700;
}

.garaport-card-title p {
    margin: 6px 0 0;
    color: #5b7183;
    font-size: 0.88rem;
    line-height: 1.45;
}

.garaport-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid rgba(35, 71, 101, 0.12);
    border-radius: 14px;
    background: linear-gradient(180deg, #f9fbfd 0%, #edf3f8 100%);
    flex-shrink: 0;
}

#Tab-ContentDiv-Garaports .garaport-toggle input[type="checkbox"],
#Tab-ContentDiv-Garaports .garaport-inline-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #315d80;
}

#Tab-ContentDiv-Garaports .garaport-toggle span {
    color: #17324a;
    font-size: 0.9rem;
    font-weight: 700;
}

.garaport-options {
    display: grid;
    gap: 14px;
}

.garaport-inline-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid rgba(35, 71, 101, 0.12);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
    box-shadow: 0 10px 18px rgba(31, 58, 85, 0.06);
}

#Tab-ContentDiv-Garaports .garaport-inline-toggle span {
    color: #17324a;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
}

.garaport-field-list {
    display: grid;
    gap: 14px;
}

.garaport-modal-launch {
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.garaport-modal-launch-action {
    display: flex;
    justify-content: flex-end;
    width: 100%;
}

.garaport-field-card {
    padding: 14px;
    border: 1px solid rgba(35, 71, 101, 0.1);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 10px 18px rgba(31, 58, 85, 0.06);
}

.garaport-field-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

    .garaport-field-meta label {
        margin: 0;
        color: #17324a;
        font-size: 0.95rem;
        font-weight: 700;
    }

.garaport-field-hint {
    color: #6b8296;
    font-size: 0.78rem;
    line-height: 1.35;
    text-align: right;
}

#Tab-ContentDiv-Garaports .range-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

#Tab-ContentDiv-Garaports input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 8px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(90deg, #d4e0ea 0%, #a9c0d4 100%);
    outline: none;
    box-shadow: inset 0 1px 2px rgba(24, 52, 76, 0.18);
}

    #Tab-ContentDiv-Garaports input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        border: 2px solid #ffffff;
        border-radius: 50%;
        background: linear-gradient(180deg, #4f6f8a 0%, #21425d 100%);
        box-shadow: 0 4px 10px rgba(33, 66, 93, 0.28);
        cursor: pointer;
    }

    #Tab-ContentDiv-Garaports input[type="range"]::-moz-range-thumb {
        width: 20px;
        height: 20px;
        border: 2px solid #ffffff;
        border-radius: 50%;
        background: linear-gradient(180deg, #4f6f8a 0%, #21425d 100%);
        box-shadow: 0 4px 10px rgba(33, 66, 93, 0.28);
        cursor: pointer;
    }

#Tab-ContentDiv-Garaports input[type="number"],
#Tab-ContentDiv-Garaports select {
    min-height: 46px;
    border: 1px solid rgba(35, 71, 101, 0.18) !important;
    border-radius: 14px !important;
    background: #fbfcfe !important;
    color: #17324a;
    box-shadow: none !important;
}

#Tab-ContentDiv-Garaports input[type="number"] {
    width: 88px;
    padding: 10px 12px;
    font-weight: 700;
    text-align: center;
}

    #Tab-ContentDiv-Garaports input[type="number"]:focus,
    #Tab-ContentDiv-Garaports select:focus {
        border-color: rgba(35, 71, 101, 0.42) !important;
        box-shadow: 0 0 0 3px rgba(49, 93, 128, 0.12) !important;
    }

.garaport-bay-shell {
    padding: 12px;
    border: 1px solid rgba(35, 71, 101, 0.08);
    border-radius: 16px;
    background: rgba(244, 248, 251, 0.8);
}

.garaport-bay-list {
    display: grid;
    gap: 10px;
}

.garaport-bay-actions {
    margin-top: 12px;
}

#Tab-ContentDiv-Garaports .plus-btn,
#Tab-ContentDiv-Garaports .minus-btn,
#Tab-ContentDiv-Garaports button.minus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border-radius: 12px;
    font-weight: 700;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

#Tab-ContentDiv-Garaports .plus-btn {
    min-width: 110px;
    padding: 10px 16px;
    border: 1px solid rgba(35, 71, 101, 0.12);
    background: linear-gradient(180deg, #4f6f8a 0%, #21425d 100%);
    color: #ffffff;
    box-shadow: 0 12px 20px rgba(31, 58, 85, 0.18);
}

    #Tab-ContentDiv-Garaports .plus-btn:hover {
        background: linear-gradient(180deg, #597892 0%, #274b68 100%);
        transform: translateY(-1px);
    }

#Tab-ContentDiv-Garaports .minus-btn,
#Tab-ContentDiv-Garaports button.minus {
    min-width: 42px;
    padding: 10px;
    border: 1px solid rgba(166, 54, 54, 0.2);
    background: #fff6f6;
    color: #b13e3e;
}

    #Tab-ContentDiv-Garaports .minus-btn:hover,
    #Tab-ContentDiv-Garaports button.minus:hover {
        background: #ffecec;
        transform: translateY(-1px);
    }

@media (max-width: 640px) {
    .garaport-card-header,
    .garaport-field-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .garaport-field-hint {
        text-align: left;
    }

    #Tab-ContentDiv-Garaports .range-container {
        flex-wrap: wrap;
    }

    #Tab-ContentDiv-Garaports input[type="number"] {
        width: 100%;
    }

    #Tab-ContentDiv-Garaports .plus-btn {
        width: 100%;
    }
}

#Tab-ContentDiv-Colours {
    background: linear-gradient(180deg, #f8fafc 0%, #e7edf4 100%);
}

.colours-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 10px;
}

.colours-intro {
    padding: 14px 14px 12px;
    border-radius: 18px;
    background: linear-gradient(135deg, #21425d 0%, #4f6f8a 100%);
    color: #ffffff;
    box-shadow: 0 18px 34px rgba(23, 43, 63, 0.22);
}

    .colours-intro h2 {
        margin: 10px 0 0;
        color: #ffffff;
        font-size: 1.15rem;
        line-height: 1.4;
        letter-spacing: 0.01em;
    }

.colours-intro-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.colours-intro-note {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.88rem;
    line-height: 1.5;
}

.colours-section {
    padding: 14px;
    border: 1px solid rgba(23, 43, 63, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.08);
}

.colours-section-title {
    margin: 0 0 6px;
    color: #18344c;
    font-size: 1rem;
    font-weight: 700;
}

.colours-section-copy {
    margin: 0;
    color: #5b7183;
    font-size: 0.88rem;
    line-height: 1.45;
}

.colour-field-grid {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.colour-field-card {
    padding: 10px;
    border: 1px solid rgba(35, 71, 101, 0.1);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 10px 18px rgba(31, 58, 85, 0.06);
}

.colour-field-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
}

    .colour-field-meta label {
        margin: 0;
        color: #17324a;
        font-size: 0.95rem;
        font-weight: 700;
    }

.colour-field-hint {
    color: #6b8296;
    font-size: 0.78rem;
    line-height: 1.35;
    text-align: right;
}

.colour-toggle-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 12px;
    margin-top: 12px;
    border: 1px solid rgba(35, 71, 101, 0.12);
    border-radius: 16px;
    background: linear-gradient(180deg, #f9fbfd 0%, #edf3f8 100%);
}

.colour-toggle-copy {
    flex: 1;
}

    .colour-toggle-copy strong {
        display: block;
        color: #17324a;
        font-size: 0.93rem;
        font-weight: 700;
    }

    .colour-toggle-copy span {
        display: block;
        margin-top: 4px;
        color: #6b8296;
        font-size: 0.8rem;
        line-height: 1.4;
    }

#Tab-ContentDiv-Colours .colour-toggle-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    flex-shrink: 0;
}

    #Tab-ContentDiv-Colours .colour-toggle-check input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin: 0;
        accent-color: #315d80;
    }

    #Tab-ContentDiv-Colours .colour-toggle-check span {
        color: #17324a;
        font-size: 0.9rem;
        font-weight: 700;
    }

#Tab-ContentDiv-Colours .form-group {
    margin: 0;
}

#Tab-ContentDiv-Colours .classic,
#Tab-ContentDiv-Colours .dd-container,
#Tab-ContentDiv-Colours .dd-select,
#Tab-ContentDiv-Colours .dd-options {
    width: 100% !important;
    max-width: 100%;
}

#Tab-ContentDiv-Colours .classic {
    min-height: 40px;
    border: 1px solid rgba(35, 71, 101, 0.18) !important;
    border-radius: 14px !important;
    background: #fbfcfe !important;
    color: #17324a;
    box-shadow: none !important;
}

#Tab-ContentDiv-Colours .dd-select {
    min-height: 40px;
    border: 1px solid rgba(35, 71, 101, 0.18) !important;
    border-radius: 14px !important;
    background: #fbfcfe !important;
    box-shadow: none !important;
    display: flex;
    align-items: center;
    padding: 0 10px;
}

#Tab-ContentDiv-Colours .dd-selected {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 18px);
}

#Tab-ContentDiv-Colours .dd-selected-image,
#Tab-ContentDiv-Colours .dd-option-image {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid rgba(35, 71, 101, 0.12);
    object-fit: cover;
    background: #eef4f8;
}

#Tab-ContentDiv-Colours label.dd-selected-text,
#Tab-ContentDiv-Colours label.dd-option-text {
    margin: 0;
    color: #17324a;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.25 !important;
}

#Tab-ContentDiv-Colours .dd-pointer {
    margin-left: auto;
}

#Tab-ContentDiv-Colours .dd-options {
    margin-top: 6px;
    padding: 6px;
    border: 1px solid rgba(35, 71, 101, 0.12);
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 16px 28px rgba(31, 58, 85, 0.16);
}

    #Tab-ContentDiv-Colours .dd-options li {
        margin: 0;
    }

        #Tab-ContentDiv-Colours .dd-options li a,
        #Tab-ContentDiv-Colours .dd-option {
            display: flex;
            align-items: center;
            gap: 8px;
            min-height: 36px;
            padding: 6px 8px;
            border-radius: 12px;
        }

            #Tab-ContentDiv-Colours .dd-options li a:hover,
            #Tab-ContentDiv-Colours .dd-option:hover {
                background: #eef4f8;
            }

#Tab-ContentDiv-Colours .dd-option-selected {
    background: #edf3f8;
}

#Tab-ContentDiv-Colours #lblSelectedColour {
    display: block;
    margin-top: 6px;
    color: #6b8296;
    font-size: 0.76rem;
    line-height: 1.4;
}

@media (max-width: 640px) {
    .colour-field-meta,
    .colour-toggle-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .colour-field-hint {
        text-align: left;
    }
}

/* Unified tab system for Walls, Size, Awnings, Garaports, Extras, Colours */
#Tab-ContentDiv-Walls,
#Tab-ContentDiv-Size,
#Tab-ContentDiv-Awnings,
#Tab-ContentDiv-Garaports,
#Tab-ContentDiv-Extras,
#Tab-ContentDiv-Colours {
    background: linear-gradient(180deg, #f8fafc 0%, #e7edf4 100%);
}

.walls-panel,
.size-panel,
.awnings-panel,
.garaports-panel,
.extras-panel,
.colours-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 10px;
}

.walls-intro,
.size-intro,
.awnings-intro,
.garaports-intro,
.extras-intro,
.colours-intro {
    padding: 16px 16px 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, #21425d 0%, #4f6f8a 100%);
    color: #ffffff;
    box-shadow: 0 18px 34px rgba(23, 43, 63, 0.22);
}

    .walls-intro h2,
    .size-intro h2,
    .awnings-intro h2,
    .garaports-intro h2,
    .extras-intro h2,
    .colours-intro h2 {
        margin: 10px 0 0;
        color: #ffffff;
        font-size: 1.08rem;
        line-height: 1.38;
        letter-spacing: 0.01em;
    }

.walls-intro-badge,
.size-intro-badge,
.awnings-intro-badge,
.garaports-intro-badge,
.extras-intro-badge,
.colours-intro-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.walls-intro-note,
.size-intro-note,
.awnings-intro-note,
.garaports-intro-note,
.extras-intro-note,
.colours-intro-note {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.84rem;
    line-height: 1.45;
}

.walls-section,
.size-section,
.awning-card,
.garaport-card,
.extras-section,
.colours-section {
    padding: 16px;
    border: 1px solid rgba(23, 43, 63, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 12px 22px rgba(15, 23, 42, 0.08);
}

.walls-section-title,
.size-section-title,
.extras-section-title,
.colours-section-title,
.awning-card-title h3,
.garaport-card-title h3 {
    margin: 0;
    color: #18344c;
    font-size: 0.98rem;
    font-weight: 700;
}

.walls-section-copy,
.size-section-copy,
.extras-section-copy,
.colours-section-copy,
.awning-card-title p,
.garaport-card-title p {
    margin: 6px 0 0;
    color: #5b7183;
    font-size: 0.84rem;
    line-height: 1.42;
}

.size-field-list,
.awning-field-list,
.garaport-field-list,
.colour-field-grid,
.size-bay-list,
.awning-options,
.garaport-options,
.awning-toggle-grid,
.garaport-bay-list {
    gap: 12px;
}

.size-field-card,
.awning-field-card,
.garaport-field-card,
.colour-field-card,
.size-bay-section,
.garaport-bay-shell {
    padding: 12px;
    border: 1px solid rgba(35, 71, 101, 0.1);
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.75), 0 8px 16px rgba(31, 58, 85, 0.06);
}

.size-field-meta,
.awning-field-meta,
.garaport-field-meta,
.colour-field-meta,
.size-bay-header,
.awning-card-header,
.garaport-card-header {
    gap: 10px;
    margin-bottom: 8px;
}

    .size-field-meta label,
    .awning-field-meta label,
    .garaport-field-meta label,
    .colour-field-meta label,
    .size-bay-title-wrap label {
        margin: 0;
        color: #17324a;
        font-size: 0.92rem;
        font-weight: 700;
    }

.size-field-hint,
.awning-field-hint,
.garaport-field-hint,
.colour-field-hint,
.size-bay-copy {
    color: #6b8296;
    font-size: 0.76rem;
    line-height: 1.32;
}

#Tab-ContentDiv-Size .range-container,
#Tab-ContentDiv-Awnings .range-container,
#Tab-ContentDiv-Garaports .range-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

#Tab-ContentDiv-Size input[type="range"],
#Tab-ContentDiv-Awnings input[type="range"],
#Tab-ContentDiv-Garaports input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 8px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(90deg, #d4e0ea 0%, #a9c0d4 100%);
    outline: none;
    box-shadow: inset 0 1px 2px rgba(24, 52, 76, 0.18);
}

    #Tab-ContentDiv-Size input[type="range"]::-webkit-slider-thumb,
    #Tab-ContentDiv-Awnings input[type="range"]::-webkit-slider-thumb,
    #Tab-ContentDiv-Garaports input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 18px;
        height: 18px;
        border: 2px solid #ffffff;
        border-radius: 50%;
        background: linear-gradient(180deg, #4f6f8a 0%, #21425d 100%);
        box-shadow: 0 4px 10px rgba(33, 66, 93, 0.28);
        cursor: pointer;
    }

    #Tab-ContentDiv-Size input[type="range"]::-moz-range-thumb,
    #Tab-ContentDiv-Awnings input[type="range"]::-moz-range-thumb,
    #Tab-ContentDiv-Garaports input[type="range"]::-moz-range-thumb {
        width: 18px;
        height: 18px;
        border: 2px solid #ffffff;
        border-radius: 50%;
        background: linear-gradient(180deg, #4f6f8a 0%, #21425d 100%);
        box-shadow: 0 4px 10px rgba(33, 66, 93, 0.28);
        cursor: pointer;
    }

#Tab-ContentDiv-Size input[type="number"],
#Tab-ContentDiv-Size select,
#Tab-ContentDiv-Awnings input[type="number"],
#Tab-ContentDiv-Awnings select,
#Tab-ContentDiv-Garaports input[type="number"],
#Tab-ContentDiv-Garaports select,
#Tab-ContentDiv-Colours .classic,
#Tab-ContentDiv-Colours .dd-select {
    min-height: 42px;
    border: 1px solid rgba(35, 71, 101, 0.18) !important;
    border-radius: 14px !important;
    background: #fbfcfe !important;
    color: #17324a;
    box-shadow: none !important;
}

#Tab-ContentDiv-Size input[type="number"],
#Tab-ContentDiv-Awnings input[type="number"],
#Tab-ContentDiv-Garaports input[type="number"] {
    width: 82px;
    padding: 8px 10px;
    font-weight: 700;
    text-align: center;
}

#Tab-ContentDiv-Size select,
#Tab-ContentDiv-Awnings select,
#Tab-ContentDiv-Garaports select,
#Tab-ContentDiv-Colours .classic {
    width: 100%;
    padding: 9px 12px;
    font-weight: 600;
}

    #Tab-ContentDiv-Size input[type="number"]:focus,
    #Tab-ContentDiv-Size select:focus,
    #Tab-ContentDiv-Awnings input[type="number"]:focus,
    #Tab-ContentDiv-Awnings select:focus,
    #Tab-ContentDiv-Garaports input[type="number"]:focus,
    #Tab-ContentDiv-Garaports select:focus,
    #Tab-ContentDiv-Colours .classic:focus,
    #Tab-ContentDiv-Colours .dd-select:focus {
        border-color: rgba(35, 71, 101, 0.42) !important;
        box-shadow: 0 0 0 3px rgba(49, 93, 128, 0.12) !important;
    }

.size-toggle-card,
.colour-toggle-card,
.awning-toggle,
.awning-inline-toggle,
.garaport-toggle,
.garaport-inline-toggle {
    border: 1px solid rgba(35, 71, 101, 0.12);
    border-radius: 16px;
    background: linear-gradient(180deg, #f9fbfd 0%, #edf3f8 100%);
}

.size-toggle-card,
.colour-toggle-card,
.awning-inline-toggle,
.garaport-inline-toggle {
    min-height: 54px;
    padding: 12px 14px;
}

.awning-toggle,
.garaport-toggle {
    padding: 9px 13px;
}

.size-toggle-copy strong,
.colour-toggle-copy strong,
#Tab-ContentDiv-Awnings .awning-toggle span,
#Tab-ContentDiv-Awnings .awning-inline-toggle span,
#Tab-ContentDiv-Garaports .garaport-toggle span,
#Tab-ContentDiv-Garaports .garaport-inline-toggle span,
#Tab-ContentDiv-Colours .colour-toggle-check span,
#Tab-ContentDiv-Size .checkbox-container.size-checkbox label {
    color: #17324a;
    font-size: 0.9rem;
    font-weight: 700;
}

.size-toggle-copy span,
.colour-toggle-copy span {
    color: #6b8296;
    font-size: 0.78rem;
    line-height: 1.35;
}

#Tab-ContentDiv-Size .checkbox-container.size-checkbox input[type="checkbox"],
#Tab-ContentDiv-Awnings .awning-toggle input[type="checkbox"],
#Tab-ContentDiv-Awnings .awning-inline-toggle input[type="checkbox"],
#Tab-ContentDiv-Garaports .garaport-toggle input[type="checkbox"],
#Tab-ContentDiv-Garaports .garaport-inline-toggle input[type="checkbox"],
#Tab-ContentDiv-Colours .colour-toggle-check input[type="checkbox"],
#Tab-ContentDiv-Extras .checkbox-container input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #315d80;
}

#Tab-ContentDiv-Size .plus-btn,
#Tab-ContentDiv-Garaports .plus-btn {
    min-width: 102px;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid rgba(35, 71, 101, 0.12);
    border-radius: 12px;
    background: linear-gradient(180deg, #4f6f8a 0%, #21425d 100%);
    color: #ffffff;
    box-shadow: 0 10px 18px rgba(31, 58, 85, 0.18);
}

    #Tab-ContentDiv-Size .plus-btn:hover,
    #Tab-ContentDiv-Garaports .plus-btn:hover {
        background: linear-gradient(180deg, #597892 0%, #274b68 100%);
        transform: translateY(-1px);
    }

#Tab-ContentDiv-Size .minus-btn,
#Tab-ContentDiv-Size button.minus,
#Tab-ContentDiv-Garaports .minus-btn,
#Tab-ContentDiv-Garaports button.minus {
    min-width: 40px;
    min-height: 40px;
    padding: 8px;
    border-radius: 12px;
}

#Tab-ContentDiv-Garaports .garaport-bay-shell {
    overflow-x: auto;
}

#Tab-ContentDiv-Garaports .garaport-bay-list {
    display: grid;
    gap: 10px;
}

    #Tab-ContentDiv-Garaports .garaport-bay-list .range-container {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 82px 40px;
        align-items: center;
        gap: 8px;
        padding: 10px 8px;
        border-radius: 14px;
        background: #ffffff;
        box-shadow: 0 8px 16px rgba(31, 58, 85, 0.08);
    }

    #Tab-ContentDiv-Garaports .garaport-bay-list .input-wrap {
        width: 82px !important;
        min-height: 42px;
        padding: 8px 10px;
        text-align: center;
        font-weight: 700;
    }

    #Tab-ContentDiv-Garaports .garaport-bay-list .btn-group {
        display: flex;
        justify-content: center;
        width: 40px;
    }

#Tab-ContentDiv-Garaports .garaport-bay-actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-start;
}

#Tab-ContentDiv-Walls .option,
#Tab-ContentDiv-Extras .option {
    min-height: 96px;
    padding: 14px 12px;
    border-radius: 16px;
}

    #Tab-ContentDiv-Walls .option span,
    #Tab-ContentDiv-Extras .option span {
        font-size: 0.88rem;
        line-height: 1.3;
    }

#Tab-ContentDiv-Extras .checkbox-container {
    min-height: 56px;
    padding: 14px;
    border-radius: 14px;
}

/* Black/white text only across upgraded tabs */
#Tab-ContentDiv-Walls,
#Tab-ContentDiv-Size,
#Tab-ContentDiv-Awnings,
#Tab-ContentDiv-Garaports,
#Tab-ContentDiv-Extras,
#Tab-ContentDiv-Colours {
    color: #000;
}

    .walls-section-title,
    .size-section-title,
    .extras-section-title,
    .colours-section-title,
    .awning-card-title h3,
    .garaport-card-title h3,
    .size-field-meta label,
    .awning-field-meta label,
    .garaport-field-meta label,
    .colour-field-meta label,
    .size-bay-title-wrap label,
    .size-toggle-copy strong,
    .colour-toggle-copy strong,
    #Tab-ContentDiv-Awnings .awning-toggle span,
    #Tab-ContentDiv-Awnings .awning-inline-toggle span,
    #Tab-ContentDiv-Garaports .garaport-toggle span,
    #Tab-ContentDiv-Garaports .garaport-inline-toggle span,
    #Tab-ContentDiv-Colours .colour-toggle-check span,
    #Tab-ContentDiv-Size .checkbox-container.size-checkbox label,
    #Tab-ContentDiv-Walls .option span,
    #Tab-ContentDiv-Extras .option span,
    #Tab-ContentDiv-Extras .checkbox-container label,
    #Tab-ContentDiv-Colours label.dd-selected-text,
    #Tab-ContentDiv-Colours label.dd-option-text,
    #Tab-ContentDiv-Size input[type="number"],
    #Tab-ContentDiv-Size select,
    #Tab-ContentDiv-Awnings input[type="number"],
    #Tab-ContentDiv-Awnings select,
    #Tab-ContentDiv-Garaports input[type="number"],
    #Tab-ContentDiv-Garaports select,
    #Tab-ContentDiv-Colours .classic,
    #Tab-ContentDiv-Colours .dd-select {
        color: #000 !important;
    }

    .walls-section-copy,
    .size-section-copy,
    .extras-section-copy,
    .colours-section-copy,
    .awning-card-title p,
    .garaport-card-title p,
    .size-field-hint,
    .awning-field-hint,
    .garaport-field-hint,
    .colour-field-hint,
    .size-bay-copy,
    .size-toggle-copy span,
    .colour-toggle-copy span,
    #Tab-ContentDiv-Colours #lblSelectedColour,
    .walls-grid-caption {
        color: #000 !important;
        opacity: 0.72;
    }

@media (max-width: 640px) {
    .walls-panel,
    .size-panel,
    .awnings-panel,
    .garaports-panel,
    .extras-panel,
    .colours-panel {
        gap: 14px;
    }

    .walls-section,
    .size-section,
    .awning-card,
    .garaport-card,
    .extras-section,
    .colours-section,
    .walls-intro,
    .size-intro,
    .awnings-intro,
    .garaports-intro,
    .extras-intro,
    .colours-intro {
        padding: 14px;
    }

    #Tab-ContentDiv-Garaports .garaport-bay-list .range-container {
        grid-template-columns: minmax(0, 1fr);
    }

    #Tab-ContentDiv-Garaports .garaport-bay-list .input-wrap,
    #Tab-ContentDiv-Garaports .garaport-bay-list .btn-group {
        width: 100% !important;
    }
}

.walls-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 12px;
}

.walls-intro {
    padding: 18px 18px 16px;
    border-radius: 18px;
    background: linear-gradient(135deg, #20384f 0%, #44617a 100%);
    color: #ffffff;
    box-shadow: 0 18px 34px rgba(23, 43, 63, 0.22);
}

    .walls-intro h2 {
        margin: 10px 0 0;
        color: #ffffff;
        font-size: 1.15rem;
        line-height: 1.4;
        letter-spacing: 0.01em;
    }

.walls-intro-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.walls-intro-note {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.88rem;
    line-height: 1.5;
}

.walls-section {
    padding: 18px;
    border: 1px solid rgba(23, 43, 63, 0.08);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 14px 26px rgba(15, 23, 42, 0.08);
}

.walls-section-title {
    margin: 0 0 6px;
    color: #18344c;
    font-size: 1rem;
    font-weight: 700;
}

.walls-section-copy {
    margin: 0;
    color: #5b7183;
    font-size: 0.88rem;
    line-height: 1.45;
}

.walls-grid-shell {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%;
    padding: 16px 14px 18px;
    border: 1px solid rgba(35, 71, 101, 0.12);
    border-radius: 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 12px 24px rgba(31, 58, 85, 0.08);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #66839d rgba(210, 221, 231, 0.8);
    touch-action: pan-x;
}

    .walls-grid-shell::-webkit-scrollbar {
        height: 10px;
    }

    .walls-grid-shell::-webkit-scrollbar-track {
        background: rgba(210, 221, 231, 0.8);
        border-radius: 999px;
    }

    .walls-grid-shell::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #90a8bd 0%, #66839d 100%);
        border-radius: 999px;
    }

.walls-grid-stage {
    width: 100%;
    min-width: 100%;
    display: block;
    box-sizing: border-box;
}

#Tab-ContentDiv-Walls .grid {
    --wall-grid-end-count: 2;
    --wall-side-ratio: 1;
    --wall-cell-size: 140px;
    --wall-side-width: 44px;
    --wall-grid-gap: 14px;
    --wall-grid-wrap-padding: 18px;
    --wall-grid-inner-width: calc((var(--wall-grid-end-count) * var(--wall-cell-size)) + ((var(--wall-grid-end-count) - 1) * var(--wall-grid-gap)));
    --wall-grid-end-row-width: calc(var(--wall-grid-inner-width) + (2 * (var(--wall-side-width) + var(--wall-grid-gap))));
    --wall-grid-side-row-width: calc((var(--wall-grid-end-count) * var(--wall-cell-size)) + ((var(--wall-grid-end-count) + 1) * var(--wall-side-width)) + (2 * var(--wall-grid-end-count) * var(--wall-grid-gap)));
    --wall-grid-outer-width: max(var(--wall-grid-end-row-width), var(--wall-grid-side-row-width));
    --wall-grid-wrap-width: calc(var(--wall-grid-outer-width) + (2 * var(--wall-grid-wrap-padding)));
    display: grid !important;
    grid-template-columns: minmax(28px, auto) minmax(var(--wall-grid-wrap-width), 1fr) minmax(28px, auto) !important;
    grid-template-rows: auto auto auto !important;
    align-items: center;
    justify-items: center;
    column-gap: 12px;
    row-gap: 14px;
    width: max(100%, calc(var(--wall-grid-wrap-width) + 56px)) !important;
    min-width: calc(var(--wall-grid-wrap-width) + 56px) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
}

    #Tab-ContentDiv-Walls .grid .grid-front,
    #Tab-ContentDiv-Walls .grid .grid-back {
        grid-column: 2;
        width: 100%;
        margin: 0;
        text-align: center;
    }

    #Tab-ContentDiv-Walls .grid .grid-front {
        grid-row: 1;
    }

    #Tab-ContentDiv-Walls .grid .grid-back {
        grid-row: 3;
    }

    #Tab-ContentDiv-Walls .grid .grid-left,
    #Tab-ContentDiv-Walls .grid .grid-right {
        grid-row: 2;
        position: static !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: auto !important;
        min-width: 28px;
        margin: 0 !important;
        padding: 0;
        overflow: visible;
        z-index: 1;
    }

    #Tab-ContentDiv-Walls .grid .grid-left {
        grid-column: 1;
    }

    #Tab-ContentDiv-Walls .grid .grid-right {
        grid-column: 3;
    }

    #Tab-ContentDiv-Walls .grid .grid-wrap {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        min-width: var(--wall-grid-wrap-width);
        display: flex;
        flex-direction: column;
        gap: var(--wall-grid-gap);
        margin: 0 !important;
        padding: var(--wall-grid-wrap-padding);
        border-radius: 20px;
        box-sizing: border-box;
        background: radial-gradient(circle at center, rgba(68, 97, 122, 0.08) 0%, rgba(68, 97, 122, 0.03) 40%, transparent 72%), linear-gradient(180deg, #eef4f8 0%, #e6edf4 100%);
        box-shadow: inset 0 0 0 1px rgba(35, 71, 101, 0.08);
    }

    #Tab-ContentDiv-Walls .grid .grid-row,
    #Tab-ContentDiv-Walls .grid .grid-column {
        display: flex !important;
        align-items: center;
        margin: 0 !important;
    }

    #Tab-ContentDiv-Walls .grid .grid-row {
        width: var(--wall-grid-end-row-width);
        min-width: var(--wall-grid-end-row-width);
        gap: var(--wall-grid-gap);
        margin-inline: auto !important;
        padding-inline: 0 !important;
        justify-content: center;
    }

        #Tab-ContentDiv-Walls .grid .grid-row .grid-line {
            margin: 0 !important;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #Tab-ContentDiv-Walls .grid .grid-row .grid-line-end-frame {
            flex: 0 0 var(--wall-side-width);
            width: var(--wall-side-width);
            min-width: var(--wall-side-width);
        }

        #Tab-ContentDiv-Walls .grid .grid-row .grid-line-end-bay {
            flex: 0 0 var(--wall-cell-size);
            width: var(--wall-cell-size);
            min-width: var(--wall-cell-size);
        }

        #Tab-ContentDiv-Walls .grid .grid-row .grid-line-end-bay-empty {
            visibility: hidden;
        }

    #Tab-ContentDiv-Walls .grid .grid-column {
        width: var(--wall-grid-side-row-width);
        min-width: var(--wall-grid-side-row-width);
        gap: var(--wall-grid-gap);
        justify-content: flex-start;
        margin-inline: auto !important;
    }

        #Tab-ContentDiv-Walls .grid .grid-column .grid-line {
            flex: 0 0 var(--wall-side-width);
            width: var(--wall-side-width);
            margin: 0 !important;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #Tab-ContentDiv-Walls .grid .grid-column .grid-column-spacer {
            flex: 1 1 0;
            width: 0;
            min-width: var(--wall-cell-size);
            margin: 0 !important;
        }

#Tab-ContentDiv-Walls .legend {
    color: #26455f;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    border: 0;
}

#Tab-ContentDiv-Walls .grid .grid-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    margin-top: 0;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 8px 16px rgba(32, 56, 79, 0.14);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

#Tab-ContentDiv-Walls .grid .grid-row .grid-button {
    height: 18px;
}

#Tab-ContentDiv-Walls .grid .grid-column .grid-button {
    height: clamp(46px, 7vw, 58px);
}

#Tab-ContentDiv-Walls .grid .grid-button-side {
    padding-inline: 4px;
}

#Tab-ContentDiv-Walls .grid .grid-bay-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: clamp(0.72rem, 1.8vw, 0.88rem);
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

#Tab-ContentDiv-Walls .grid .grid-button-lean {
    overflow: hidden;
}

#Tab-ContentDiv-Walls .grid .grid-lean-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    pointer-events: none;
    user-select: none;
    box-sizing: border-box;
}

#Tab-ContentDiv-Walls .grid .grid-button-side.grid-button-lean .grid-lean-label {
    flex-direction: column;
    gap: 2px;
    padding-block: 4px;
    line-height: 1;
}

#Tab-ContentDiv-Walls .grid .grid-button-end.grid-button-lean .grid-lean-label {
    flex-direction: row;
    gap: 4px;
    padding-inline: 4px;
    white-space: nowrap;
    line-height: 1;
}

#Tab-ContentDiv-Walls .grid .grid-lean-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    font-size: clamp(0.44rem, 1.2vw, 0.58rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.9;
}

#Tab-ContentDiv-Walls .grid .grid-lean-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    font-size: clamp(0.56rem, 1.45vw, 0.72rem);
    font-weight: 800;
    letter-spacing: 0.03em;
}

#Tab-ContentDiv-Walls .grid .grid-button-side.btn-primary .grid-bay-number {
    color: #f8fbff;
    text-shadow: 0 1px 0 rgba(10, 24, 37, 0.16);
}

#Tab-ContentDiv-Walls .grid .grid-button-end.btn-primary .grid-bay-number {
    color: #f8fbff;
    text-shadow: 0 1px 0 rgba(10, 24, 37, 0.16);
}

#Tab-ContentDiv-Walls .grid .grid-button-side.btn-default .grid-bay-number {
    color: #486277;
}

#Tab-ContentDiv-Walls .grid .grid-button-end.btn-default .grid-bay-number {
    color: #486277;
}

#Tab-ContentDiv-Walls .grid .grid-button-lean.btn-primary .grid-lean-tag,
#Tab-ContentDiv-Walls .grid .grid-button-lean.btn-primary .grid-lean-number {
    color: #f8fbff;
    text-shadow: 0 1px 0 rgba(10, 24, 37, 0.16);
}

#Tab-ContentDiv-Walls .grid .grid-button-lean.btn-default .grid-lean-tag,
#Tab-ContentDiv-Walls .grid .grid-button-lean.btn-default .grid-lean-number {
    color: #486277;
}

#Tab-ContentDiv-Walls .grid .grid-line-static .grid-button,
#Tab-ContentDiv-Walls .grid .grid-button-placeholder {
    box-shadow: none;
    opacity: 0.65;
}

#Tab-ContentDiv-Walls .grid .grid-column-spacer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#Tab-ContentDiv-Walls .grid .grid-bay-spacer-mark {
    display: block;
    width: 28%;
    min-width: 14px;
    max-width: 30px;
    height: 4px;
    border-radius: 999px;
    background: rgba(54, 84, 110, 0.11);
}

#Tab-ContentDiv-Walls .grid .grid-button:hover:not([disabled]) {
    transform: translateY(-2px);
    box-shadow: 0 12px 20px rgba(32, 56, 79, 0.18);
    filter: brightness(1.04);
}

#Tab-ContentDiv-Walls .grid .grid-button.btn-primary {
    background: linear-gradient(180deg, #315d80 0%, #1e4461 100%);
}

#Tab-ContentDiv-Walls .grid .grid-button.btn-default,
#Tab-ContentDiv-Walls .grid .grid-button.disabled,
#Tab-ContentDiv-Walls .grid .grid-button[disabled] {
    background: linear-gradient(180deg, #dfe6ec 0%, #cfd8e0 100%) !important;
}

.walls-grid-caption {
    margin: 0;
    color: #698093;
    font-size: 0.84rem;
    line-height: 1.45;
    text-align: center;
    max-width: 540px;
    align-self: center;
}

#Tab-ContentDiv-Walls .option-container {
    justify-content: flex-start;
    gap: 16px;
    margin-top: 16px;
}

#Tab-ContentDiv-Walls .option {
    width: calc(50% - 8px);
    min-height: 108px;
    padding: 18px 14px;
    border: 1px solid rgba(35, 71, 101, 0.14);
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
    box-shadow: 0 12px 24px rgba(31, 58, 85, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    #Tab-ContentDiv-Walls .option:hover {
        transform: translateY(-3px);
        border-color: rgba(49, 93, 128, 0.35);
        box-shadow: 0 18px 28px rgba(31, 58, 85, 0.16);
    }

    #Tab-ContentDiv-Walls .option span {
        color: #17324a;
        font-size: 0.94rem;
        font-weight: 700;
        line-height: 1.35;
    }

@media (max-width: 640px) {
    #Tab-ContentDiv-Size table td:nth-child(4) {
        min-width: 180px;
    }

    .bay-wall-toggle-group {
        flex-direction: column;
        align-items: stretch;
    }

    .bay-wall-toggle {
        width: 100%;
    }

    #Tab-ContentDiv-Walls .modal-content {
        overflow: hidden !important;
        height: 100% !important;
        max-height: none !important;
    }

    #Tab-ContentDiv-Walls .popup-content {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        height: 100%;
        max-height: none;
        padding: 52px 16px 18px;
        box-sizing: border-box;
    }

    #Tab-ContentDiv-Walls .walls-section {
        overflow: visible !important;
    }

    #Tab-ContentDiv-Walls .walls-grid-shell {
        padding: 12px 10px 18px;
    }

    #Tab-ContentDiv-Walls .grid {
        --wall-grid-wrap-padding: 14px;
    }

        #Tab-ContentDiv-Walls .grid .grid-row .grid-button {
            height: 16px;
        }

        #Tab-ContentDiv-Walls .grid .grid-column .grid-button {
            height: 48px;
        }

    #Tab-ContentDiv-Walls .option {
        width: 100%;
    }
}

@media (max-width: 390px) {
    #Tab-ContentDiv-Walls .walls-grid-shell {
        padding: 10px 8px 16px;
    }

    #Tab-ContentDiv-Walls .grid {
        row-gap: 12px;
    }

    #Tab-ContentDiv-Walls .grid {
        --wall-grid-wrap-padding: 12px;
    }
}

/* ===============================
        MOBILE & TABLET ONLY FIXES
        =============================== */

/* Tablet + Mobile */
@media (max-width: 1024px) {

    /* Ensure overlay allows scrolling */
    #dialog-Wizard.overlay {
        align-items: flex-start;
        overflow: hidden;
        padding: 16px;
    }

    /* Constrain popup to viewport */
    #dialog-Wizard .popup {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        max-height: calc(100vh - 32px);
        overflow: hidden;
    }

    /* Make inner content scrollable */
    #dialog-Wizard .popup-content {
        max-height: calc(100vh - 80px);
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 0;
    }

    /* Grid spacing tightened for smaller screens */
    #dialog-Wizard .grid {
        margin: 12px;
    }
}

/* Mobile specific */
@media (max-width: 600px) {

    /* Popup nearly full-screen */
    #dialog-Wizard .popup {
        border-radius: 10px;
    }

    /* Stack header cleanly */
    #dialog-Wizard .header-flex {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    /* Reduce title size slightly */
    #dialog-Wizard .title {
        font-size: 18px;
    }

    /* Make grid single-column */
    #dialog-Wizard .grid {
        grid-template-columns: 1fr;
    }

    /* Ensure images fit nicely */
    #dialog-Wizard .choice img {
        max-height: 160px;
        object-fit: contain;
    }

    /* Actions stick nicely inside view */
    #dialog-Wizard .actions-row {
        position: sticky;
        bottom: 0;
        background: white;
        padding-top: 8px;
    }

    #dialog-Wizard .actions {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (max-width: 600px) {

    #divAccessDoorData.modal,
    #divRollerDoorData.modal,
    #divGlassSlidingDoorData.modal,
    #divWindowData.modal {
        align-items: center;
        justify-content: center;
        padding: 10px;
        overflow: hidden;
    }

    #divAccessDoorData .modal-content,
    #divRollerDoorData .modal-content,
    #divGlassSlidingDoorData .modal-content,
    #divWindowData .modal-content {
        display: flex;
        flex-direction: column;
        width: min(90vw, 720px);
        max-width: 100%;
        max-height: 90vh;
        padding: 20px 16px;
        margin: auto;
        overflow: hidden !important;
        border-radius: 12px;
    }

    #divAccessDoorData .popup-content,
    #divRollerDoorData .popup-content,
    #divGlassSlidingDoorData .popup-content,
    #divWindowData .popup-content {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    #divAccessDoorData .row,
    #divRollerDoorData .row,
    #divGlassSlidingDoorData .row,
    #divWindowData .row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    #divAccessDoorData .column,
    #divRollerDoorData .column,
    #divGlassSlidingDoorData .column,
    #divWindowData .column {
        min-width: 100%;
    }

    #divAccessDoorData .dd-container,
    #divAccessDoorData .dd-select,
    #divAccessDoorData .dd-options,
    #divRollerDoorData .dd-container,
    #divRollerDoorData .dd-select,
    #divRollerDoorData .dd-options,
    #divGlassSlidingDoorData .dd-container,
    #divGlassSlidingDoorData .dd-select,
    #divGlassSlidingDoorData .dd-options,
    #divWindowData .dd-container,
    #divWindowData .dd-select,
    #divWindowData .dd-options {
        width: 100% !important;
    }

    #divAccessDoorData .row:last-child,
    #divRollerDoorData .row:last-child,
    #divGlassSlidingDoorData .row:last-child,
    #divWindowData .row:last-child {
        flex-direction: column;
        gap: 10px;
    }

    .roller-door-footer {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .access-door-footer {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .glass-sliding-door-footer {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .window-footer {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    #divAccessDoorData .custom-close,
    #divRollerDoorData .custom-close,
    #divGlassSlidingDoorData .custom-close,
    #divWindowData .custom-close {
        top: 12px;
        right: 12px;
        z-index: 10;
    }
}

@media (min-width: 601px) and (max-width: 1024px) {

    #divAccessDoorData.modal,
    #divRollerDoorData.modal,
    #divGlassSlidingDoorData.modal,
    #divWindowData.modal {
        align-items: center;
        justify-content: center;
        padding: 20px;
        overflow-y: auto;
    }

    #divAccessDoorData .modal-content,
    #divRollerDoorData .modal-content,
    #divGlassSlidingDoorData .modal-content,
    #divWindowData .modal-content {
        display: flex;
        flex-direction: column;
        width: min(100%, 920px);
        max-width: 90%;
        max-height: calc(100vh - 40px);
        padding: 30px;
        margin: auto;
        overflow: hidden !important;
        border-radius: 16px;
    }

    #divAccessDoorData .popup-content,
    #divRollerDoorData .popup-content,
    #divGlassSlidingDoorData .popup-content,
    #divWindowData .popup-content {
        max-height: calc(100vh - 170px);
        overflow-y: auto;
        overflow-x: hidden;
    }

    #divAccessDoorData .row,
    #divRollerDoorData .row,
    #divGlassSlidingDoorData .row,
    #divWindowData .row {
        gap: 18px;
    }

    #divAccessDoorData .dd-container,
    #divAccessDoorData .dd-select,
    #divAccessDoorData .dd-options,
    #divRollerDoorData .dd-container,
    #divRollerDoorData .dd-select,
    #divRollerDoorData .dd-options,
    #divGlassSlidingDoorData .dd-container,
    #divGlassSlidingDoorData .dd-select,
    #divGlassSlidingDoorData .dd-options,
    #divWindowData .dd-container,
    #divWindowData .dd-select,
    #divWindowData .dd-options {
        width: 100% !important;
    }

    .roller-door-footer {
        padding: 18px 20px 20px;
    }

    .access-door-footer {
        padding: 18px 20px 20px;
    }

    .glass-sliding-door-footer {
        padding: 18px 20px 20px;
    }

    .window-footer {
        padding: 18px 20px 20px;
    }
}

.menuMobile-item i,
.menuMobile-item svg {
    width: 2.5rem;
    height: 2.5rem;
    flex: 0 0 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    font-size: 2.5rem;
    line-height: 1;
    color: currentColor;
    overflow: visible;
}

.menuMobile-item svg {
    display: block;
}

.menu-item:hover {
    color: white;
}

:root {
    --menu-bg: rgb(91 91 91 / 80%);
    --menu-border: rgba(255,255,255,0.95);
    --menu-hover: rgba(255,255,255,0.15);
    --radius: 20px;
    --transition: 0.4s cubic-bezier(.2,.8,.2,1);
}

.opening-floating-menu {
    position: fixed;
    left: 14px;
    top: 50px;
    z-index: 97;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 16px;
    border: 2px solid var(--menu-border);
    background: var(--menu-bg);
    backdrop-filter: blur(10px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.22);
    transition: transform var(--transition), box-shadow 0.2s ease;
    user-select: none;
}

.drag-handle {
    cursor: grab;
    min-width: 34px;
    min-height: 34px;
    padding: 7px 8px;
    border-radius: 10px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.opening-floating-menu-inner {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
}

    .opening-floating-menu-inner::-webkit-scrollbar {
        display: none;
    }

.opening-floating-menu-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 8px 10px;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    transition: background 0.2s ease, transform 0.2s ease;
}

.opening-floating-menu-item:hover {
        background: var(--menu-hover);
        transform: translateY(-1px);
    }

    .opening-floating-menu-item.is-active {
        background: rgba(103, 210, 145, 0.24);
        box-shadow: inset 0 0 0 1px rgba(179, 241, 206, 0.65);
    }

    .opening-floating-menu-item img {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    .opening-floating-menu-item span {
        font-size: 12px;
        font-weight: 600;
        line-height: 1.15;
    }

.remove-bay-hover-badge {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1200;
    display: none;
    max-width: 240px;
    padding: 10px 12px;
    border: 1px solid rgba(15, 43, 67, 0.18);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 30px rgba(18, 39, 58, 0.2);
    color: #14314a;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    pointer-events: none;
    backdrop-filter: blur(8px);
}

.opening-floating-toggle {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 2px solid white;
    background: rgb(91 91 91 / 80%);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 0; /* critical fix */
}

    .opening-floating-toggle i {
        font-size: 12px;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.opening-floating-menu.is-collapsed {
    transform: translateX(calc(-100% + 42px));
}

    .opening-floating-menu.is-collapsed .opening-floating-menu-inner {
        opacity: 0;
        width: 0;
        overflow: hidden;
    }

    .opening-floating-menu.is-collapsed .opening-floating-toggle i {
        transform: rotate(180deg);
    }

@media (max-width: 1024px) {
    .opening-floating-menu {
        display: none !important;
    }
}

@media (min-width: 1025px) {
    .opening-floating-menu {
        display: flex !important;
    }
}

.app-root {
    background-color: #000000;
    height: 100%;
    margin: 0;
}

.u-text-center {
    text-align: center;
}

.u-cursor-pointer {
    cursor: pointer;
}

.u-mt-0 {
    margin-top: 0 !important;
}

.opening-modal-icon {
    width: 25px;
}

.qf-error-message {
    color: red;
    display: none;
}

#Tab-ContentDiv-Walls {
    display: none;
}

/* --- Refined Table UI Styling --- */

/* Improved Row Badge */
.bay-row-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    white-space: nowrap;
}

/* Range and Input Wrapping */
.range-container {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* Modern Slider Styling */
input[type="range"].main_menuVertical {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 6px;
    background: #e2e8f0;
    border-radius: 999px;
    outline: none;
    cursor: pointer;
    transition: background 0.2s ease;
}

input[type="range"].main_menuVertical::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #1f5d4b;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform 0.1s ease, background 0.2s ease;
}

input[type="range"].main_menuVertical:hover::-webkit-slider-thumb {
    transform: scale(1.1);
    background: #2d7a64;
}

input[type="range"].main_menuVertical:active::-webkit-slider-thumb {
    transform: scale(0.95);
}

/* Disabled State for Range */
input[type="range"].main_menuVertical:disabled {
    background: #f1f5f9;
    cursor: not-allowed;
    opacity: 0.6;
}

input[type="range"].main_menuVertical:disabled::-webkit-slider-thumb {
    background: #cbd5e1;
    border-color: #f1f5f9;
    cursor: not-allowed;
}

/* Number Input Styling */
.input-wrap {
    width: 80px !important;
    height: 38px;
    padding: 8px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #1e293b;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-wrap:focus {
    border-color: #1f5d4b;
    box-shadow: 0 0 0 3px rgba(31, 93, 75, 0.1);
    outline: none;
}

.input-wrap:disabled {
    background: #f8fafc !important;
    color: #94a3b8 !important;
    border-color: #e2e8f0 !important;
    cursor: not-allowed;
}

/* Buttons Styling */
.minus-btn {
    height: 38px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid #fee2e2;
    background: #fef2f2;
    color: #dc2626;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.minus-btn:hover {
    background: #fee2e2;
    border-color: #fecaca;
    transform: translateY(-1px);
}

.minus-btn:active {
    transform: translateY(0);
    background: #fecaca;
}

/* Bay Override Controls */
.bay-override-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bay-override-control:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.bay-override-control input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #1f5d4b;
}

/* Wall Toggles */
.bay-wall-toggle-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px;
}

.bay-wall-toggle {
    flex: 1;
    min-width: 100px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.bay-wall-toggle:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* Present State (Active) */
.bay-wall-toggle.is-present,
.bay-wall-toggle.active {
    background: #1f5d4b !important;
    border-color: #1f5d4b !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(31, 93, 75, 0.2) !important;
}

.bay-wall-toggle.is-present .bay-wall-toggle-label,
.bay-wall-toggle.active .bay-wall-toggle-label {
    color: #fff !important;
}

.bay-wall-toggle.is-present .bay-wall-toggle-state,
.bay-wall-toggle.active .bay-wall-toggle-state {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Removed State */
.bay-wall-toggle.is-removed {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #64748b !important;
    box-shadow: none !important;
}

.bay-wall-toggle.is-removed .bay-wall-toggle-label {
    color: #94a3b8 !important;
}

.bay-wall-toggle.is-removed .bay-wall-toggle-state {
    color: #dc2626 !important; /* Red to indicate removal */
    font-weight: 700;
}


.bay-wall-toggle-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #1e293b;
    transition: color 0.2s ease;
}

.bay-wall-toggle-state {
    font-size: 0.6875rem;
    font-weight: 500;
    color: #64748b;
    transition: color 0.2s ease;
}

#customBayDiv .size-bay-table-shell {
    overflow-x: auto;
    overflow-y: hidden;
}

#customBayDiv .dataTables_wrapper,
#customBayDiv table.dataTable,
#gridBayPropSideOpenBays,
#gridBayPropFrontOpenBays,
#gridBayPropBackOpenBays {
    width: 100% !important;
}

#customBayDiv table.dataTable {
    table-layout: fixed;
}

#customBayDiv table.dataTable tbody tr {
    border-radius: 16px;
    overflow: hidden;
}

#customBayDiv table.dataTable td {
    background: linear-gradient(180deg, #ffffff 0%, #f7fbf8 100%);
}

#customBayDiv table.dataTable td:first-child {
    width: 40%;
}

#customBayDiv table.dataTable td:nth-child(2) {
    width: 110px;
}

#customBayDiv table.dataTable td:nth-child(3) {
    width: 116px;
}

#customBayDiv table.dataTable td:nth-child(4) {
    width: 30%;
}

#customBayDiv .bay-range-cell {
    align-items: center;
    gap: 12px;
    min-height: 46px;
}

#customBayDiv .bay-range-cell .main_menuVertical {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
    margin: 0;
}

#customBayDiv .bay-override-control {
    display: grid;
    grid-template-columns: 16px auto auto;
    align-items: center;
    column-gap: 10px;
    flex: 0 0 186px;
    min-width: 186px;
    min-height: 46px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid rgba(31, 93, 75, 0.14);
    background: linear-gradient(180deg, #ffffff 0%, #eef6f2 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
}

#customBayDiv .bay-override-control:hover {
    border-color: rgba(31, 93, 75, 0.22);
    background: linear-gradient(180deg, #ffffff 0%, #e8f2ed 100%);
}

#customBayDiv .bay-override-control input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

#customBayDiv .bay-override-control input[type="checkbox"] {
    align-self: center;
    justify-self: center;
}

#customBayDiv .bay-override-control.is-disabled {
    opacity: 0.72;
    background: linear-gradient(180deg, #f8fafb 0%, #eef2f5 100%);
    border-color: rgba(100, 116, 139, 0.16);
}

#customBayDiv .bay-override-copy {
    color: #4d6b62;
    line-height: 1;
}

#customBayDiv .bay-row-badge {
    justify-self: end;
    align-self: center;
    min-width: 62px;
    line-height: 1;
}

#customBayDiv .main_menuVertical:disabled {
    filter: saturate(0.7);
}

#customBayDiv .input-wrap:disabled,
#customBayDiv .main_menuVertical:disabled {
    opacity: 0.52;
    cursor: not-allowed;
}

#customBayDiv .btn-group {
    justify-content: stretch;
}

#customBayDiv .minus-btn {
    width: 100%;
}

#customBayDiv .bay-wall-toggle-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 8px;
    width: 100%;
    padding: 0;
}

#customBayDiv .bay-wall-toggle {
    min-width: 0;
    min-height: 46px;
    justify-content: center;
    border-radius: 12px;
}

#customBayDiv .bay-wall-toggle.is-present,
#customBayDiv .bay-wall-toggle.active {
    background: linear-gradient(180deg, #2b6a5a 0%, #1f5d4b 100%) !important;
    border-color: #1f5d4b !important;
}

#customBayDiv .bay-wall-toggle.is-removed {
    background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
}

#customBayDiv .bay-wall-toggle.is-removed .bay-wall-toggle-state {
    color: #c2410c !important;
}

.bay-wall-toggle.is-locked,
.bay-wall-toggle:disabled {
    cursor: not-allowed;
    opacity: 0.58;
    transform: none !important;
    box-shadow: none !important;
}

#buildingSizeStatusBar {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 96;
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    max-width: calc(100vw - 32px);
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 8px;
    background: rgba(18, 31, 42, 0.88);
    color: #ffffff;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.2;
    pointer-events: none;
}

.awning-overhang-card {
    padding: 14px 16px;
    overflow: hidden;
}

.awning-overhang-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 46px;
    padding: 10px 16px;
    border: 1px solid rgba(29, 75, 62, 0.12);
    border-radius: 14px;
    background: #ffffff;
    color: #173b33;
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 10px 20px rgba(29, 75, 62, 0.08);
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.awning-overhang-button:hover {
    background: #f5fbf8;
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(29, 75, 62, 0.12);
}

#leanToOverhangModal.modal {
    padding: 24px;
    background: rgba(8, 15, 24, 0.42);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
}

.lean-to-overhang-dialog {
    position: relative;
    width: min(920px, 100%);
    max-width: 920px;
    max-height: 90vh;
    padding: 0;
    overflow: hidden !important;
    border: 0;
    border-radius: 28px;
    background: linear-gradient(180deg, #f8fbfd 0%, #eef3f7 100%);
    color: #17324a;
    text-align: left;
    box-shadow: 0 28px 60px rgba(6, 15, 26, 0.28);
    display: flex;
    flex-direction: column;
}

.lean-to-overhang-dialog.scrollDiv {
    overflow: hidden !important;
}

.lean-to-overhang-dialog .popup-content {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 28px 28px 22px;
}

.lean-to-overhang-dialog .popup-content > .custom-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 10px 22px rgba(20, 38, 58, 0.14);
    color: #17324a;
    font-size: 24px;
    cursor: pointer;
}

.lean-to-overhang-hero {
    margin-bottom: 20px;
    padding: 22px 72px 18px 22px;
    border-radius: 22px;
    background: linear-gradient(135deg, #1d3b56 0%, #416a89 100%);
    color: #ffffff;
    box-shadow: 0 18px 34px rgba(29, 59, 86, 0.24);
}

.lean-to-overhang-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lean-to-overhang-hero h3 {
    margin: 0;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.3;
}

.lean-to-overhang-hero p {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.92rem;
    line-height: 1.5;
}

.lean-to-overhang-field-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.lean-to-overhang-field {
    display: grid;
    gap: 14px;
    padding: 18px;
    border: 1px solid rgba(24, 52, 76, 0.08);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08);
}

#leanToOverhangModal label {
    color: #17324a;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}

#leanToOverhangModal .awning-field-hint {
    color: #607789;
    font-size: 0.88rem;
    line-height: 1.45;
}

#leanToOverhangModal .range-container {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(32, 62, 89, 0.12);
    border-radius: 14px;
    background: #f9fbfc;
}

#leanToOverhangModal input[type="range"] {
    flex: 1;
}

#leanToOverhangModal input[type="number"] {
    width: 96px;
    min-width: 96px;
    min-height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(32, 62, 89, 0.16);
    padding: 10px 14px;
    background: #fdfefe;
    color: #10283d;
    font-size: 14px;
    font-weight: 500;
    box-shadow: inset 0 1px 2px rgba(16, 40, 61, 0.04);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

#leanToOverhangModal input[type="number"]:focus {
    outline: none;
    border-color: #356386;
    box-shadow: 0 0 0 4px rgba(53, 99, 134, 0.12);
    background: #ffffff;
}

.lean-to-overhang-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    flex-shrink: 0;
    padding: 18px 28px 28px;
    border-top: 1px solid rgba(24, 52, 76, 0.08);
    background: rgba(244, 248, 251, 0.94);
}

#leanToOverhangModal .add-btn,
#leanToOverhangModal .cancel-btn {
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
    font-size: 0.94rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

#leanToOverhangModal .add-btn {
    background: linear-gradient(180deg, #1f4765 0%, #16364f 100%);
    color: #ffffff;
    box-shadow: 0 14px 24px rgba(22, 54, 79, 0.22);
}

#leanToOverhangModal .add-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 28px rgba(22, 54, 79, 0.28);
}

#leanToOverhangModal .cancel-btn {
    background: #ffffff;
    color: #17324a;
    border: 1px solid rgba(32, 62, 89, 0.16);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

#leanToOverhangModal .cancel-btn:hover {
    background: #f5f8fb;
}

@media (max-width: 1024px), (pointer: coarse) {
    #buildingSizeStatusBar {
        display: none;
    }
}

@media (max-width: 900px) {
    #leanToOverhangModal.modal {
        padding: 14px;
    }

    .lean-to-overhang-dialog {
        width: 100%;
        max-height: calc(100vh - 28px);
    }

    .lean-to-overhang-dialog .popup-content {
        padding: 20px 18px 18px;
    }

    .lean-to-overhang-hero {
        padding: 20px 58px 18px 18px;
    }

    #leanToOverhangModal .range-container {
        flex-wrap: wrap;
    }

    #leanToOverhangModal input[type="number"] {
        width: 100%;
        min-width: 0;
    }

    .lean-to-overhang-footer {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    #customBayDiv table.dataTable {
        table-layout: auto;
    }

    #customBayDiv table.dataTable td:first-child,
    #customBayDiv table.dataTable td:nth-child(2),
    #customBayDiv table.dataTable td:nth-child(3),
    #customBayDiv table.dataTable td:nth-child(4) {
        width: auto;
    }

    #customBayDiv .bay-range-cell {
        flex-direction: column;
        align-items: stretch;
    }

    #customBayDiv .bay-override-control {
        flex: none;
        min-width: 0;
        width: 100%;
        grid-template-columns: 16px auto auto;
        justify-content: normal;
    }
}