/**
 * ListDome — compact registration layout
 * v0.1.345
 * Scope: native Listeo Register tab inside #sign-in-dialog only.
 * Layout only; native inputs, names, validation, AJAX and Turnstile stay intact.
 */

@media (min-width: 720px) {
    /*
     * IMPORTANT: Listeo puts the real registration fields inside
     * .listeo-register-form-fields-container. THAT is the grid root.
     * The form itself must stay untouched because it also contains nonce,
     * submit/OTP and notification elements outside the fields container.
     */
    #sign-in-dialog form#register.listeo-registration-form.ld-reg-compact
    > .listeo-register-form-fields-container.ld-reg-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        column-gap: 12px !important;
        row-gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
        clear: both !important;
        align-items: start !important;
    }

    /* Default every direct native item to a safe full-width row. */
    #sign-in-dialog form#register.listeo-registration-form.ld-reg-compact
    > .listeo-register-form-fields-container.ld-reg-grid > * {
        grid-column: 1 / -1 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Flatten only structural wrappers; never clone or replace controls. */
    #sign-in-dialog form#register.listeo-registration-form.ld-reg-compact
    > .listeo-register-form-fields-container.ld-reg-grid > .password-field-wrapper,
    #sign-in-dialog form#register.listeo-registration-form.ld-reg-compact
    > .listeo-register-form-fields-container.ld-reg-grid > #listeo-core-registration-fields,
    #sign-in-dialog form#register.listeo-registration-form.ld-reg-compact
    > .listeo-register-form-fields-container.ld-reg-grid > #listeo-core-registration-fields > [id^="listeo-core-registration-"] {
        display: contents !important;
    }

    /* Native role selector. */
    #sign-in-dialog form#register.ld-reg-compact
    > .listeo-register-form-fields-container.ld-reg-grid > .account-type {
        order: 10 !important;
        grid-column: 1 / -1 !important;
    }

    #sign-in-dialog form#register.ld-reg-compact
    > .listeo-register-form-fields-container.ld-reg-grid > .clearfix {
        order: 11 !important;
        grid-column: 1 / -1 !important;
        display: none !important;
    }

    /* Email / username / password remain full width. */
    #sign-in-dialog form#register.ld-reg-compact .ld-reg-username {
        order: 15 !important;
        grid-column: 1 / -1 !important;
    }
    #sign-in-dialog form#register.ld-reg-compact .ld-reg-email {
        order: 20 !important;
        grid-column: 1 / -1 !important;
    }
    #sign-in-dialog form#register.ld-reg-compact .ld-reg-password {
        order: 30 !important;
        grid-column: 1 / -1 !important;
    }
    #sign-in-dialog form#register.ld-reg-compact .password-strength-requirements {
        order: 31 !important;
        grid-column: 1 / -1 !important;
    }

    /* ALL account types: First Name | Last Name. */
    #sign-in-dialog form#register.ld-reg-compact
    > .listeo-register-form-fields-container.ld-reg-grid > .ld-reg-first {
        order: 40 !important;
        grid-column: 1 / 2 !important;
    }
    #sign-in-dialog form#register.ld-reg-compact
    > .listeo-register-form-fields-container.ld-reg-grid > .ld-reg-last {
        order: 40 !important;
        grid-column: 2 / 3 !important;
    }

    /* BUSINESS: VAT | Country, then Phone | Cloudflare. */
    #sign-in-dialog form#register.ld-reg-owner .ld-reg-vat {
        order: 50 !important;
        grid-column: 1 / 2 !important;
    }
    #sign-in-dialog form#register.ld-reg-owner .ld-reg-country {
        order: 50 !important;
        grid-column: 2 / 3 !important;
    }
    #sign-in-dialog form#register.ld-reg-owner .ld-reg-phone {
        order: 60 !important;
        grid-column: 1 / 2 !important;
    }
    #sign-in-dialog form#register.ld-reg-owner .ld-reg-turnstile {
        order: 60 !important;
        grid-column: 2 / 3 !important;
        align-self: center !important;
        justify-self: stretch !important;
    }

    /* User: only First/Last are paired. Any configured User custom fields and
       Cloudflare remain native full-width rows. */
    #sign-in-dialog form#register.ld-reg-user .ld-reg-phone,
    #sign-in-dialog form#register.ld-reg-user .ld-reg-vat,
    #sign-in-dialog form#register.ld-reg-user .ld-reg-country,
    #sign-in-dialog form#register.ld-reg-user .ld-reg-custom-other {
        order: 50 !important;
        grid-column: 1 / -1 !important;
    }
    #sign-in-dialog form#register.ld-reg-user .ld-reg-turnstile {
        order: 60 !important;
        grid-column: 1 / -1 !important;
    }

    /* Any future Business custom field stays safe/full width. */
    #sign-in-dialog form#register.ld-reg-owner .ld-reg-custom-other {
        order: 65 !important;
        grid-column: 1 / -1 !important;
    }

    /* Privacy / Terms stay full width below verification. */
    #sign-in-dialog form#register.ld-reg-compact
    > .listeo-register-form-fields-container.ld-reg-grid > .checkboxes {
        order: 70 !important;
        grid-column: 1 / -1 !important;
    }

    /* Remove old vertical margins from the cells controlled by the grid. */
    #sign-in-dialog form#register.ld-reg-compact .ld-reg-first,
    #sign-in-dialog form#register.ld-reg-compact .ld-reg-last,
    #sign-in-dialog form#register.ld-reg-compact .ld-reg-phone,
    #sign-in-dialog form#register.ld-reg-compact .ld-reg-vat,
    #sign-in-dialog form#register.ld-reg-compact .ld-reg-country,
    #sign-in-dialog form#register.ld-reg-compact .ld-reg-turnstile,
    #sign-in-dialog form#register.ld-reg-compact .ld-reg-email,
    #sign-in-dialog form#register.ld-reg-compact .ld-reg-password {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    #sign-in-dialog form#register.ld-reg-compact .ld-reg-first label,
    #sign-in-dialog form#register.ld-reg-compact .ld-reg-last label,
    #sign-in-dialog form#register.ld-reg-compact .ld-reg-phone,
    #sign-in-dialog form#register.ld-reg-compact .ld-reg-vat,
    #sign-in-dialog form#register.ld-reg-compact .ld-reg-country {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #sign-in-dialog form#register.ld-reg-compact .ld-reg-first input,
    #sign-in-dialog form#register.ld-reg-compact .ld-reg-last input,
    #sign-in-dialog form#register.ld-reg-compact .ld-reg-phone input,
    #sign-in-dialog form#register.ld-reg-compact .ld-reg-vat input,
    #sign-in-dialog form#register.ld-reg-compact .ld-reg-country input,
    #sign-in-dialog form#register.ld-reg-compact .ld-reg-country select {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* Cloudflare keeps its real widget/iframe. We only place its existing
       container in the second grid cell; no scaling, cloning or recreation. */
    #sign-in-dialog form#register.ld-reg-owner .ld-reg-turnstile .cf-turnstile,
    #sign-in-dialog form#register.ld-reg-owner .ld-reg-turnstile[class*="turnstile"],
    #sign-in-dialog form#register.ld-reg-owner .ld-reg-turnstile [class*="turnstile"] {
        margin: 0 !important;
        max-width: 100% !important;
    }
}

/* Narrow screens: proven native stacked layout. */
@media (max-width: 719px) {
    #sign-in-dialog form#register.listeo-registration-form
    > .listeo-register-form-fields-container.ld-reg-grid {
        display: block !important;
    }
}