/* ==========================================================================
   TABLE OF CONTENTS
   ==========================================================================
   1. BASE & UTILITY STYLES
   2. FORM & VALIDATION STYLES
   3. LAYOUT & CONTAINER CONFIGURATIONS
   4. COMPONENT ACTIONS & FOOTER
   5. CONTAINER QUERIES & BREAKPOINTS
   ========================================================================== */


/* ==========================================================================
   1. BASE & UTILITY STYLES
   ========================================================================== */

.modal-title {
    color: white !important;
}

.modal-header {
    background-color: #343838 !important;
}

br {
    clear: both;
}

hr {
    /*opacity: 1;*/
    border-top: 2px solid var(--Secondary300);
}

.requestQuote hr {
    margin: 24px 0 43px 0;
}

.dp-block {
    display: block;
}

.dp-none {
    display: none;
}


/* ==========================================================================
   2. FORM & VALIDATION STYLES
   ========================================================================== */

#field {
    margin-left: .5em;
    float: left;
}

input.error {
    border: 1px solid red;
}

label.error {
    background: url('/images/required.png') no-repeat;
    background-size: 15px 15px;
    padding-left: 16px;
    margin-left: .3em;
    font-size: small;
    color: red;
}

label.valid {
    background: url('images/checked.gif') no-repeat;
    display: block;
    width: 16px;
    height: 16px;
}

label.btn2 {
    margin-bottom: 0;
    align-content: center;
}

.requestQuote .cb-container {
    font-size: inherit;
}


/* ==========================================================================
   3. LAYOUT & CONTAINER CONFIGURATIONS
   ========================================================================== */

/* Defines the element that will serve as a reference for dimensions.
   'inline-size' allows responding to changes in the element's width. */
#gandalf,
.requestQuote {
    width: 100%;
    box-sizing: border-box;
    /* Defines this div as a horizontal size container */
    container-type: inline-size;
    container-name: quoteContainer;
}

/* Basic row and form container setup */
.c-row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.c-form-row-2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1rem; /* Spacing between items equivalent to gap-3 (16px) */
    box-sizing: border-box;
    margin-bottom: 1rem; /* Optional bottom margin to separate from the next row */
}

    /* All direct child elements expand to 100% width in mobile/default view */
    .c-form-row-2 > * {
        width: 100%;
        box-sizing: border-box;
    }


/* ==========================================================================
   4. COMPONENT ACTIONS & FOOTER
   ========================================================================== */

/* BASE STATE (Small containers < 376px) */
.c-footer-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    width: 100%;
}

    /* In stacked view (column), elements span full width */
    .c-footer-actions > a,
    .c-footer-actions > button {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }


/* ==========================================================================
   5. CONTAINER QUERIES & BREAKPOINTS
   ========================================================================== */

/* Small Custom State: When the container measures >= 376px */
@container quoteContainer (min-width: 376px) {
    .c-footer-actions {
        flex-direction: row;
        align-items: center; /* Vertically aligns buttons without stretching them */
        justify-content: space-between; /* Maintains left and right spacing */
    }
        /* Restores natural width for links and buttons. 'width: auto' and 'inline-block' prevent horizontal stretching */
        .c-footer-actions > a,
        .c-footer-actions > button {
            width: auto !important;
            max-width: fit-content;
            display: inline-block;
        }

    .c-form-row-2 {
        flex-direction: row; /* Places the 2 elements horizontally */
    }
        /* 
           Calculates exact width: 
           50% of total minus half the gap so both fit perfectly.
        */
        .c-form-row-2 > * {
            flex: 1 1 calc(50% - 0.5rem);
            max-width: calc(50% - 0.5rem);
        }
}