/* --- GLOBAL RESET & BACKGROUND --- */
body {
    font-family: 'Effra', sans-serif !important;
    background-color: #ffffff !important; /* Forces solid white to match parent site */
    margin: 0 !important;
    padding: 0 !important;
    color: #1a1a1a !important; /* Default dark text for visibility */
}

/* --- FORM CONTAINER --- */
.form-container, .form-container1 {
    background-color: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* --- ACCORDIONS (DARK GREY WITH WHITE TEXT) --- */
.accordion {
    background-color: #4a4a4e !important; /* Exact shade from your goal image */
    border: 1px solid #333333 !important;
    border-radius: 5px !important;
    margin-bottom: 8px !important;
    width: 100% !important;
    max-width: 600px !important;
    color: #ffffff !important; /* Fixes invisible headers */
}

.accordion-header {
    padding: 15px !important;
    cursor: pointer !important;
    font-weight: bold !important;
    text-align: center !important;
    color: #ffffff !important;
}

.accordion-content {
    background-color: #ffffff !important;
    padding: 15px !important;
    border-top: 1px solid #eeeeee !important;
}

/* --- INPUT LABELS (FORCED VISIBILITY) --- */
label, 
.input-group label, 
#form2 label {
    color: #1a1a1a !important; /* Prevents white-on-white labels */
    font-weight: bold !important;
    display: block !important;
    margin-bottom: 8px !important;
    text-align: left !important;
    background: transparent !important;
}

/* --- TOTAL BAR (DARK GREY) --- */
.total {
    background-color: #4a4a4e !important; /* Matches accordion style */
    color: #ffffff !important;
    font-size: 1.2rem !important;
    font-weight: bold !important;
    text-align: center !important;
    padding: 15px !important;
    width: 100% !important;
    max-width: 600px !important;
    border-radius: 5px !important;
    margin: 15px auto !important;
    box-sizing: border-box !important;
}

/* --- BUTTONS (ASI RED & UNIFIED WIDTH) --- */
.next-button, .submit-button {
    background-color: #C3002F !important; /* Distinct ASI Red */
    color: #ffffff !important;
    width: 100% !important;
    max-width: 600px !important; /* Perfectly aligned width */
    padding: 18px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    text-align: center !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    border: none !important;
    margin: 10px auto !important;
    display: block !important;
}

/* --- CHECKBOX SECTION (FIXED & CENTERED) --- */
.checkbox-container {
    width: 100% !important;
    max-width: 600px !important;
    display: flex !important;
    flex-direction: column !important; /* Vertically aligned for centering */
    align-items: center !important;
    justify-content: center !important;
    margin: 30px auto !important;
    text-align: center !important;
}

.checkbox-container label {
    font-size: 1.5rem !important;
    font-weight: bold !important;
    color: #1a1a1a !important;
    white-space: nowrap !important; /* PREVENTS 3-LINE WRAP */
    margin-bottom: 15px !important;
    background: transparent !important;
}

.checkbox-container input[type="checkbox"] {
    transform: scale(2.2) !important; /* Large, professional-looking tick box */
    accent-color: #C3002F !important;
    cursor: pointer !important;
}

/* --- RESPONSIVE MOBILE FIX --- */
@media screen and (max-width: 768px) {
    .checkbox-container label {
        white-space: normal !important; /* Allows wrap only on very small screens */
        font-size: 1.2rem !important;
    }
}