/**
 * Mobile Form Field Reordering (BH#63, BH#64, BH#66, BH#70)
 *
 * Uses CSS flexbox order to reorder form fields on mobile without
 * affecting the desktop 2-column layout.
 *
 * The key technique is using `display: contents` on containers to
 * flatten the structure, allowing order to work on individual fields.
 */

/* ==========================================================================
   File Upload Vertical Centering (BH#62)
   Center the "Choose Files" button and text vertically within the input box.
   Applied globally (all breakpoints) since the file input needs alignment
   everywhere. This duplicates a fix in all_forms.css that gets overwritten
   by uSkinned on deploy.
   ========================================================================== */

.umbraco-forms-field.fileupload:not(.checkbox):not(.multiplechoice):not(.title):not(.recaptcha):not(.dataconsent):not(.singlechoice) input[type="file"] {
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
    height: auto !important;
}

/* ==========================================================================
   Mobile Field Reordering - Only applies below 768px
   ========================================================================== */

@media (max-width: 767px) {

    /* Flatten container structure so order works on individual fields */
    .umbraco-forms-fieldset .row-fluid {
        display: flex;
        flex-direction: column;
    }

    .umbraco-forms-fieldset .row-fluid > .umbraco-forms-container {
        display: contents;
    }

    /* Override Bootstrap negative margins and gutter padding on mobile
       so fields have consistent spacing across container boundaries */
    .umbraco-forms-fieldset .row-fluid {
        margin-left: 0;
        margin-right: 0;
    }

    /* ======================================================================
       Personal Details Section - Name Fields (BH#63)
       Desired order: First Name, Middle Name, Last Name, DOB, Gender, Email, Mobile, Home Phone
       ====================================================================== */

    .umbraco-forms-field.firstname { order: 1; }
    .umbraco-forms-field.middlename { order: 2; }
    .umbraco-forms-field.lastname { order: 3; }
    .umbraco-forms-field.dateofbirth { order: 4; }
    .umbraco-forms-field.gender { order: 5; }
    .umbraco-forms-field.email { order: 6; }
    .umbraco-forms-field.mobile { order: 7; }
    .umbraco-forms-field.homephone { order: 8; }
    .umbraco-forms-field.membershiptype { order: 9; } /* Hidden field */

    /* ======================================================================
       Address Section (BH#64)
       Desired order: Address 1, Address 2, City, State, Postcode, Same as Home checkbox
       ====================================================================== */

    .umbraco-forms-field.homeaddress1 { order: 10; }
    .umbraco-forms-field.homeaddress2 { order: 11; }
    .umbraco-forms-field.homecity { order: 12; }
    .umbraco-forms-field.homestate { order: 13; }
    .umbraco-forms-field.homepostcode { order: 14; }
    .umbraco-forms-field.sameashomeaddress { order: 15; margin-top: 0.5rem; }

    /* Postal address fields */
    .umbraco-forms-field.postaladdress1 { order: 16; }
    .umbraco-forms-field.postaladdress2 { order: 17; }
    .umbraco-forms-field.postalcity { order: 18; }
    .umbraco-forms-field.postalstate { order: 19; }
    .umbraco-forms-field.postalpostcode { order: 20; }

    /* ======================================================================
       Beneficiary Section (BH#66)
       Desired order: First Name, Last Name, Relationship, Email, Phone, Address, City, State, Postcode
       ====================================================================== */

    .umbraco-forms-field.beneficiarydescription { order: 21; }
    .umbraco-forms-field.beneficiaryfirstname { order: 22; }
    .umbraco-forms-field.beneficiarylastname { order: 23; }
    .umbraco-forms-field.beneficiaryrelationship { order: 24; }
    .umbraco-forms-field.beneficiaryemail { order: 25; }
    .umbraco-forms-field.beneficiaryphone { order: 26; }
    .umbraco-forms-field.beneficiaryaddress { order: 27; }
    .umbraco-forms-field.beneficiarycity { order: 28; }
    .umbraco-forms-field.beneficiarystate { order: 29; }
    .umbraco-forms-field.beneficiarypostcode { order: 30; }

    /* ======================================================================
       Payment Section (BH#70)
       Desired order: Payment Method, Bank details, Joint Account checkbox last
       ====================================================================== */

    .umbraco-forms-field.directdebitdescription { order: 31; }
    .umbraco-forms-field.paymentmethod { order: 32; }
    .umbraco-forms-field.directdebitagreement { order: 33; }
    .umbraco-forms-field.bankinstitutionname { order: 34; }
    .umbraco-forms-field.bankbsb { order: 35; }
    .umbraco-forms-field.bankaccountname { order: 36; }
    .umbraco-forms-field.bankaccountnumber { order: 37; }
    .umbraco-forms-field.isjointaccount { order: 38; }

    /* ======================================================================
       Signature Section
       ====================================================================== */

    .umbraco-forms-field.fullname { order: 39; }
    .umbraco-forms-field.paymentstaffnumber { order: 40; }
    .umbraco-forms-field.applicationdate { order: 41; }
    .umbraco-forms-field.applicantsignature { order: 42; }
    .umbraco-forms-field.jointaccountholdername { order: 43; }
    .umbraco-forms-field.jointsignature { order: 44; }

    /* ======================================================================
       Professional Details Section
       ====================================================================== */

    .umbraco-forms-field.staffnumber { order: 45; }
    .umbraco-forms-field.dateofemployment { order: 46; }
    .umbraco-forms-field.airline { order: 47; }
    .umbraco-forms-field.airbase { order: 48; }
    .umbraco-forms-field.aircrafttype { order: 49; }
    .umbraco-forms-field.rank { order: 50; }

    /* Associate membership - LWOP and new employer fields (BH#77) */
    .umbraco-forms-field.lwopcommencementdate { order: 51; }
    .umbraco-forms-field.lwopexpectedreturndate { order: 52; }
    .umbraco-forms-field.newemployer { order: 53; }
    .umbraco-forms-field.newemployeraircrafttype { order: 54; }
    .umbraco-forms-field.newemployerrank { order: 55; }

    /* ======================================================================
       Ensure all fields take full width on mobile
       ====================================================================== */

    .umbraco-forms-field {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Override uSkinned's .usn_cmp_form .umbraco-forms-field:last-child { margin-bottom: 0 !important }
       which has specificity (0,2,0). We need (0,3,0) to win. */
    .usn_cmp_form .umbraco-forms-fieldset .umbraco-forms-field {
        margin-bottom: 1.25rem !important;
    }

    /* ======================================================================
       Title and Description fields should maintain their position
       relative to their section
       ====================================================================== */

    .umbraco-forms-field.titleanddescription {
        order: 0 !important; /* Keep section titles at the top */
    }
}
