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

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

/* Target input wrappers ONLY when they are fully active and visible */
form.webform-submission-form .form-type-textfield:not([hidden]):not([style*="display: none"]),
form.webform-submission-form .form-type-email:not([hidden]):not([style*="display: none"]),
form.webform-submission-form .form-type-tel:not([hidden]):not([style*="display: none"]),
form.webform-submission-form .form-type-select:not([hidden]):not([style*="display: none"]),
form.webform-submission-form .form-type-textarea:not([hidden]):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 */
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 {
    flex: 0 0 200px !important;
    min-width: 200px !important; 
    max-width: 200px !important;
    text-align: left !important;
    margin-right: 15px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    display: block !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 {
    flex: 1 1 auto !important;
    max-width: 450px !important;
    width: 100% !important;
    min-width: 0 !important; 
    box-sizing: border-box !important;
    margin: 0 !important;
}

form.webform-submission-form .form-type-textarea {
    align-items: flex-start !important;
}

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

form.webform-submission-form .form-type-checkbox:not([hidden]):not([style*="display: none"]) {
    margin-left: 215px !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; 
    }

    /* Convert to stacked blocks, but ONLY if the element is not hidden */
    form.webform-submission-form .form-type-textfield:not([hidden]):not([style*="display: none"]),
    form.webform-submission-form .form-type-email:not([hidden]):not([style*="display: none"]),
    form.webform-submission-form .form-type-tel:not([hidden]):not([style*="display: none"]),
    form.webform-submission-form .form-type-select:not([hidden]):not([style*="display: none"]),
    form.webform-submission-form .form-type-textarea:not([hidden]):not([style*="display: none"]),
    form.webform-submission-form .form-item:not([hidden]):not([style*="display: none"]),
    form.webform-submission-form .js-form-item:not([hidden]):not([style*="display: none"]) {
        display: block !important; 
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 20px !important;
    }

    form.webform-submission-form label {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 8px !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;
    }

    form.webform-submission-form .form-type-checkbox:not([hidden]):not([style*="display: none"]) {
        display: flex !important;
        margin-left: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ========================================================= */
/* ABSOLUTE CONDITIONAL LOGIC HIDDEN OVERRIDE                */
/* ========================================================= */

/* If Drupal applies hidden flags via class, attribute, or inline styles, execute display: none */
form.webform-submission-form [hidden],
form.webform-submission-form .js-webform-states-hidden,
form.webform-submission-form .webform-states-hidden,
form.webform-submission-form [style*="display: none"],
form.webform-submission-form [style*="display:none"] {
    display: none !important;
}