/* ===== GOOGLE FONTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:wght@400;600&display=swap');

/* ===== BODY BACKGROUND ===== */
body {
    margin: 0;
    min-height: 100vh;
    

    display: flex;
    justify-content: center;
    align-items: flex-start; /* allow scroll */
    padding: 50px 0; /* spacing for small screens */
    background-color: #000000; /* Primary black fallback */
    font-family: 'Open Sans', sans-serif; /* Secondary typeface for body text */
}

/* Animated background layer (bg.jpg) */
#bg-animated {
    position: fixed;
    top: -500;
    left: -500;
    width: 300%;
    height: 300%;
    background: url("/static/bg.jpg") center/cover no-repeat;
    z-index: -2; /* behind overlay and content */
    pointer-events: none;

    opacity: 1;

    transition: transform 10s linear, opacity 5s ease-in-out;
}

/* Overlay static pattern (bg2.png) */
#bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: url("/static/bg2.png") center repeat; */
    z-index: -1; /* above moving bg but behind content */
    pointer-events: none;
}





/* ===== CENTER WRAPPER ===== */
.container {
    max-width: 50vw;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* ===== BLACK GLASS FORM ===== */
#quoteForm {
    background: rgba(0, 0, 0, 0.7);
    padding: 50px;
    border-radius: 12px;
    width: 50%;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all 0.3s ease-in-out; /* smooth transition for step changes */
    height: auto; 
    box-sizing: border-box;
    
}

/* ===== HEADERS ===== */
#quoteForm h2 {
    text-align: center;
    color: #FFFFFF; /* Primary white */
    margin-bottom: 30px;
    font-size: 32px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif; /* Primary typeface for headings */
    transition: color 0.3s ease;
}

/* ===== INPUT GROUPS ===== */
#quoteForm .mb-3 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

#quoteForm .form-control,
#quoteForm .form-select,
#quoteForm textarea,
#quoteForm .form-label {
    width: 50%;
}

#quoteForm .invalid-feedback {
    width: 50%;
    text-align: left;
    color: #dc3545;
    font-family: 'Open Sans', sans-serif;
}

/* ===== INPUTS ===== */
#quoteForm .form-control,
#quoteForm .form-select,
#quoteForm textarea {
    width: 50%;
    background-color: #FFFFFF; /* Primary white */
    color: #000000; /* Primary black */
    border: 1px solid #333333; /* Secondary charcoal grey for subtle borders */
    transition: border 0.3s ease, background-color 0.3s ease;
}

/* ===== LABELS ===== */
#quoteForm .form-label {
    width: 50%;
    text-align: left;
    color: #FFFFFF; /* Primary white */
    margin-bottom: 5px;
    font-family: 'Open Sans', sans-serif;
    transition: color 0.3s ease;
}

/* ===== RADIO & CHECKBOX GROUPS ===== */
#quoteForm .radio-group,
#quoteForm .checkbox-group {
    display: flex;
    flex-direction: column;
    width: 50%;
    margin-top: 5px;
}

#quoteForm input[type="radio"],
#quoteForm input[type="checkbox"] {
    margin-right: 6px;
}

/* Make text white */
#quoteForm label.radio-label,
#quoteForm label.checkbox-label {
    color: #FFFFFF; /* Primary white */
    font-family: 'Open Sans', sans-serif;
}

/* Fix radio group alignment */
#quoteForm .mb-3 > div {
    width: 50%;
    align-self: center;
    text-align: left;
}

/* Stack radio options nicely */
#quoteForm .mb-3 > div input[type="radio"] {
    margin-right: 6px;
}

#quoteForm .mb-3 > div label,
#quoteForm .mb-3 > div {
    color: #FFFFFF; /* Primary white */
}




/* ===== BUTTONS ===== */

.button-row {
    position: absolute;
    left: 20px;
    bottom: 20px; 
    right: 20px;
    min-width: 100%;
    max-width: 40px;
    margin-top: 500px; /* push to bottom */
    margin-bottom: -50px;
    display: flex;
    justify-content: space-between;
    width: 100%;
}



.button-row .next-step:only-child {
    margin-left: auto;
}

.button-row .prev-step:only-child {
    margin-right: auto;
    transition: background-color 0.3s ease, color 0.3s ease;
}


.button-row .btn {
    width: 20%;
}


.back-step {
    margin-left: 10px;
    margin-top: -35px;
    margin-right: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}


.request-step {
    margin-left: 10px;
    margin-top: -35px;
    margin-right: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}



/* ===== STEP TRANSITION ===== */
.form-step {
    display: none;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease-in-out;
}

.form-step.active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .container {
        max-width: 90%;
    }

    #quoteForm .form-control,
    #quoteForm .form-select,
    #quoteForm textarea,
    #quoteForm .form-label,
    .button-row,
    .radio-group,
    .checkbox-group {
        width: 100%;
    }

    .button-row .btn {
        width: 100%;
    }
}

/* ===== RED INVALID ===== */
.form-control.is-invalid,
.form-select.is-invalid,
textarea.is-invalid,
input.is-invalid {
    border: 2px solid #dc3545 !important;
    background-color: #fff5f5;
    transition: all 0.2s ease;
}

.invalid-feedback {
    display: block;
    color: #dc3545;
    font-size: 0.9rem;
    margin-top: 5px;
}

/* Highlight radio/checkbox groups when invalid */
input[type="radio"].is-invalid,
input[type="checkbox"].is-invalid {
    outline: 2px solid #dc3545;
    outline-offset: 2px;
}

/* Red label for invalid radio/checkboxs */
input[type="radio"].is-invalid + label,
input[type="checkbox"].is-invalid + label {
    color: #dc3545;
    font-weight: bold;
}

/* Smooth transitions for all inputs, labels, and form steps */
#quoteForm input,
#quoteForm select,
#quoteForm textarea,
#quoteForm label,
#quoteForm .button-row {
    transition: all 0.3s ease-in-out;
}