/* ========================================================= */
/* DESKTOP LAYOUT (Side-by-Side)                             */
/* ========================================================= */

/* Center the entire form and restrict its width */
form.webform-submission-form {
    max-width: 80%;
    margin: 0 auto; 
}

/* Target standard input wrappers, datetime, AND composite internal wrappers */
form.webform-submission-form .form-type-textfield:not([style*="display: none"]):not([style*="display:none"]),
form.webform-submission-form .form-type-email:not([style*="display: none"]):not([style*="display:none"]),
form.webform-submission-form .form-type-tel:not([style*="display: none"]):not([style*="display:none"]),
form.webform-submission-form .form-type-select:not([style*="display: none"]):not([style*="display:none"]),
form.webform-submission-form .form-type-textarea:not([style*="display: none"]):not([style*="display:none"]),
form.webform-submission-form .form-type-datetime:not([style*="display: none"]):not([style*="display:none"]),
form.webform-submission-form .form-type-date:not([style*="display: none"]):not([style*="display:none"]),
form.webform-submission-form .webform-composite .form-item:not([style*="display: none"]):not([style*="display:none"]) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    margin-bottom: 20px !important;
}

/* Fixed width on labels to ensure vertical alignment grid (WIDENED TO 280px) */
form.webform-submission-form .form-type-textfield > label,
form.webform-submission-form .form-type-email > label,
form.webform-submission-form .form-type-tel > label,
form.webform-submission-form .form-type-select > label,
form.webform-submission-form .form-type-textarea > label,
form.webform-submission-form .form-type-datetime > label,
form.webform-submission-form .form-type-date > label,
form.webform-submission-form .webform-composite .form-item > label {
    flex: 0 0 280px !important;
    min-width: 280px !important; 
    max-width: 280px !important;
    text-align: left !important;
    margin-right: 15px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    display: block !important;
    font-weight: bold !important; 
}

/* Fluid design for right-hand inputs */
form.webform-submission-form .form-type-textfield > input,
form.webform-submission-form .form-type-email > input,
form.webform-submission-form .form-type-tel > input,
form.webform-submission-form .form-type-select > select,
form.webform-submission-form .form-type-textarea > textarea,
form.webform-submission-form .form-type-datetime > div,
form.webform-submission-form .form-type-date > input,
form.webform-submission-form .webform-composite .form-item > input,
form.webform-submission-form .webform-composite .form-item > select {
    flex: 1 1 auto !important;
    max-width: 450px !important;
    width: 100% !important;
    min-width: 0 !important; 
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Ensure inner date and time fields sit side-by-side cleanly inside the wrapper */
form.webform-submission-form .form-type-datetime > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important; /* Space between date and time */
}

form.webform-submission-form .form-type-datetime > div .form-item {
    margin: 0 !important; /* Strips default bottom margin off inner date/time elements */
}

/* Align textareas to the top so the label doesn't float in the middle */
form.webform-submission-form .form-type-textarea {
    align-items: flex-start !important;
}

/* Clean up composite wrapper spacing */
form.webform-submission-form fieldset.webform-composite {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

form.webform-submission-form fieldset.webform-composite > legend {
    display: none !important; /* Hides the parent "Address" legend to maintain alignment */
}


/* ========================================================= */
/* RADIO BUTTONS: MAXIMUM OVERRIDE                           */
/* ========================================================= */

/* Target the MAIN wrapper only */
form.webform-submission-form [class*="type-radios"] {
    position: relative !important;
    padding: 0 0 0 295px !important; /* 280px for the label + 15px margin gap */
    margin: 0 0 20px 0 !important;
    border: none !important;
    display: block !important; 
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Force the main label to the left and NUKE the ALL-CAPS styling */
form.webform-submission-form [class*="type-radios"] > legend,
form.webform-submission-form [class*="type-radios"] > legend span,
form.webform-submission-form [class*="type-radios"] > legend .fieldset-legend {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 280px !important;
    max-width: 280px !important;
    text-transform: none !important; 
    font-size: 1rem !important;      
    font-weight: bold !important;    
    color: inherit !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;
}

/* Reset inner wrappers so they don't add extra space */
form.webform-submission-form [class*="type-radios"] .fieldset-wrapper,
form.webform-submission-form [class*="type-radios"] .form-radios {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Force individual radio buttons to drop any double-padding */
form.webform-submission-form [class*="type-radios"] .form-item {
    margin: 0 0 12px 0 !important;
    padding: 0 !important; 
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
}

/* Standardize the individual radio inputs */
form.webform-submission-form input[type="radio"] {
    margin: 2px 12px 0 0 !important;
    flex-shrink: 0 !important;
}

form.webform-submission-form input[type="radio"] + label,
form.webform-submission-form .form-type-radio > label {
    text-transform: none !important;
    font-weight: normal !important;
    font-size: 1rem !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* ========================================================= */
/* CHECKBOX DESKTOP LAYOUT                                   */
/* ========================================================= */

form.webform-submission-form .form-type-checkbox:not([style*="display: none"]):not([style*="display:none"]) {
    margin-left: 295px !important; 
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important; 
    margin-bottom: 20px !important; 
    flex-wrap: nowrap !important; 
}

form.webform-submission-form .form-type-checkbox > input[type="checkbox"] {
    margin-right: 12px !important; 
    margin-top: 4px !important; 
    margin-left: 0 !important; 
    flex-shrink: 0 !important; 
}

form.webform-submission-form .form-type-checkbox > label {
    display: block !important; 
    min-width: auto !important; 
    flex: 1 1 auto !important; 
    margin: 0 !important; 
}


/* ========================================================= */
/* MOBILE RESPONSIVE LAYOUT (Stacked Block Formatting)       */
/* ========================================================= */

@media screen and (max-width: 768px) {
    form.webform-submission-form {
        max-width: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important; 
    }

    form.webform-submission-form .form-item:not([style*="display: none"]):not([style*="display:none"]),
    form.webform-submission-form .js-form-item:not([style*="display: none"]):not([style*="display:none"]) {
        display: block !important; 
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 20px !important;
    }

    /* === FIX: DATE & TIME MOBILE LAYOUT === */
    form.webform-submission-form .form-type-datetime > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important; /* Forces inputs to fill the width */
        gap: 12px !important;
        width: 100% !important;
    }
    
    form.webform-submission-form .form-type-datetime > div .form-item {
        width: 100% !important;
    }

    /* Force time fields to have standard input styling so they aren't invisible */
    form.webform-submission-form input[type="time"],
    form.webform-submission-form input[type="date"] {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        min-height: 40px !important;
        padding: 8px 12px !important;
        border: 1px solid #8e9297 !important; 
        border-radius: 4px !important;
        background-color: #ffffff !important;
    }

    /* === FIX: RADIO BUTTON MOBILE OVERLAP === */
    form.webform-submission-form [class*="type-radios"] {
        padding-left: 0 !important; 
        display: block !important;
    }
    
    /* FULLY clear the absolute positioning by targeting every single span and sub-class */
    form.webform-submission-form [class*="type-radios"] > legend,
    form.webform-submission-form [class*="type-radios"] > legend *,
    form.webform-submission-form [class*="type-radios"] > legend .fieldset-legend {
        position: relative !important; 
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 12px !important;
        display: block !important;
    }
    
    /* Keep the radio buttons aligned */
    form.webform-submission-form [class*="type-radios"] .form-item {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important; 
        margin-bottom: 15px !important;
    }

    /* Standard Inputs */
    form.webform-submission-form label,
    form.webform-submission-form legend {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 8px !important; 
    }

    /* === FIX: PREVENT RADIO/CHECKBOX LABELS FROM WRAPPING === */
    form.webform-submission-form .form-type-radio > label,
    form.webform-submission-form .form-type-checkbox > label,
    form.webform-submission-form input[type="radio"] + label,
    form.webform-submission-form input[type="checkbox"] + label {
        width: auto !important; /* Overrides the 100% rule above */
        max-width: none !important;
        flex: 1 1 auto !important;
        margin: 0 !important;
    }

    form.webform-submission-form input[type="text"],
    form.webform-submission-form input[type="email"],
    form.webform-submission-form input[type="tel"],
    form.webform-submission-form select,
    form.webform-submission-form textarea {
        display: block !important;
        width: 100% !important; 
        max-width: 100% !important;
        box-sizing: border-box !important; 
        margin: 0 !important;
    }
}


/* ========================================================= */
/* SAFER CONDITIONAL LOGIC HIDDEN OVERRIDE                   */
/* ========================================================= */

form.webform-submission-form [style*="display: none"],
form.webform-submission-form [style*="display:none"] {
    display: none !important;
}