.mortgage-chart-wrapper { font-family: Arial, sans-serif; margin: 20px; }
.mortgage-chart-wrapper .form-group { margin-bottom: 10px; }
.mortgage-chart-wrapper label { display: inline-block; width: 140px; }
.mortgage-chart-wrapper input { width: 120px; }
.mortgage-chart-wrapper #mortgageChart { max-width: 500px; margin-top: 20px; }

.form-floating {

    & input {
        border-top-right-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
    }
}

.sidebar .row .col-auto {
    width: 100%;

    & input {

        width: 100%;
    }
}

.sidebar h3 {
    text-align: center;

}



.sidebar {

    & .accordion {

        background-color: transparent;
        border: 0;

        & .accordion-item {
    
            background-color: var(--body-bg);
            border: 1px solid var(--box-border);
            border-radius: var(--border-radius);
            overflow: hidden;

            & .accordion-header {

                
                border-radius: var(--border-radius);

                & button {

                    /*margin: 15px;*/
                    background-color: var(--box-border) !important;
                    border-radius: var(--border-radius) !important;

                    &:focus {
                        background-color: var(--box-border) !important;
                    }

                    &:hover {
                        background-color: var(--button-hover);
                    }

                    &:active {
                        background-color: var(--button-hover) !important;
                    }
                }
            }
        }
    }

    & button {

        background-color: var(--box-border) !important;

        &:hover {
            background-color: var(--button-hover);
        }

    }

}

.property-units {
    padding: 40px 20px;
    background: #f9f9f9;
}
            
.property-units h2 {
    margin-bottom: 30px;
    text-align: center;
}

.units-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    max-width: 100%; /* CRITICAL - prevents overflow */
    width: 100%; /* Fill parent container */
    margin: 0 auto;
    box-sizing: border-box; /* Include padding in width */
}

.unit-card {
    background: white;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    box-sizing: border-box; /* CRITICAL - prevents overflow */
    min-width: 0; /* Allows grid items to shrink below min-content */
}
            
.unit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.unit-number {
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.unit-details {
    display: flex;
    gap: 20px;
    margin-bottom: 16px;
    padding: 12px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.unit-beds, .unit-baths {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.unit-beds strong, .unit-baths strong {
    font-size: 24px;
    color: #333;
}

.unit-price {
    font-size: 28px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 16px;
}

.unit-price .per-month {
    font-size: 16px;
    font-weight: 400;
    color: #666;
}

.unit-cta {
    width: 100%;
    padding: 12px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.unit-cta:hover {
    background: #2980b9;
}

.special-offer {
    display: flex;
    justify-content: center;
    padding: 30px 0;
}
.special-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 50px;

    background: var(--button-gradient);
    /*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
    color: var(--button-text);
    border-radius: 12px;
}
.special-badge:hover {
    color: var(--button-text-hover);
    background: var(--button-gradient-hover);
}
.special-number {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
}

.special-unit {
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 8px;
}

.list-group {

    & .list-group-item {

        background-color: var(--button);

        &:hover { background-color: var(--button-hover); }
        &:active { background-color: var(--button-hover); }

        & .row.align-items-center,
        & .flex-row.d-flex,
        & .row.justify-content-between {

            width: 100%;

            & .col,
            & .col-auto {

                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0px;
                margin: 0px;

                &.success {
                    color: var(--success) !important;
                    background-color: var(--success-light) !important;
                    border-radius: var(--border-radius);
                    & * { color: var(--success) !important; }
                }
            }

        }
    }
}

button.next,
button.submit,
a.nav-link[href="#global-search-offcanvas"],
a.nav-link[href="#register-new-user-offcanvas"] {
    color: var(--button-text) !important;
    background: var(--button-gradient) !important;
    & * { color: var(--button-text) !important; }
}
button.next:hover,
button.submit:hover,
a.nav-link[href="#global-search-offcanvas"]:hover,
a.nav-link[href="#register-new-user-offcanvas"]:hover {
    color: var(--button-text-hover) !important;
    background: var(--button-gradient-hover) !important;
    & * { color: var(--button-text-hover) !important; }
}
button.next:active,
button.submit:active,
a.nav-link[href="#global-search-offcanvas"]:active,
a.nav-link[href="#register-new-user-offcanvas"]:active {
    color: var(--button-text-active) !important;
    background: var(--button-gradient-active) !important;
    transform: scale(0.99) translateY(2px) !important;
    & * { color: var(--button-text-active) !important; }
}