/*
 * emarsys-form.css
 * Al Naboodah Group — Emarsys enquiry form styles
 *
 * Everything is scoped under .ef, so nothing leaks into the host page.
 * Keep this as a separate file. Pasting it into a Razor view breaks the page:
 * Razor parses the @ in @container as a code transition.
 *
 * Theming: override the custom properties below from the host stylesheet, e.g.
 *   .ef { --ef-accent: #b8860b; --ef-radius: 0; --ef-border: #333; }
 * Font and text colour are inherited, so the form adopts the site's typography
 * and works on a dark background without changes.
 */
/* ─── Everything is scoped under .ef and inherits type and colour ─────────── */
    .ef {
        /* Override these from the host stylesheet to match any theme. */
        --ef-gap: .75rem;
        --ef-radius: 6px;
        --ef-border: #c9ced6;
        --ef-accent: #0b5cab;
        --ef-error: #b3261e;
        --ef-ok: #1d6b3f;
        --ef-field-bg: transparent;
        --ef-pad: .5rem .65rem;

        container-type: inline-size;
        max-width: 100%;
        font: inherit;
        color: inherit;
        box-sizing: border-box;
    }

    .ef *, .ef *::before, .ef *::after { box-sizing: inherit; }

    .ef fieldset { border: 0; margin: 0 0 1.15rem; padding: 0; min-width: 0; }

    .ef legend {
        padding: 0;
        margin-bottom: .5rem;
        font-size: .78em;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        opacity: .65;
    }

    /* One column by default; two once the container's own box is wide enough. */
    .ef-grid { display: grid; gap: var(--ef-gap); grid-template-columns: 1fr; }

    @container (min-width: 30rem) {
        .ef-grid { grid-template-columns: 1fr 1fr; }
        .ef-row--full { grid-column: 1 / -1; }
        .ef-actions { flex-direction: row; align-items: center; }
        .ef button[data-emarsys-submit] { width: auto; }
    }

    .ef-row { min-width: 0; }

    .ef label { display: block; margin-bottom: .25rem; font-size: .9em; }

    .ef input:not([type="checkbox"]):not([type="radio"]),
    .ef select,
    .ef textarea {
        width: 100%;
        padding: var(--ef-pad);
        border: 1px solid var(--ef-border);
        border-radius: var(--ef-radius);
        background: var(--ef-field-bg);
        color: inherit;
        font: inherit;
        line-height: 1.35;
    }

    .ef textarea { resize: vertical; min-height: 4.5rem; }

    .ef :focus-visible {
        outline: 2px solid var(--ef-accent);
        outline-offset: 1px;
        border-color: var(--ef-accent);
    }

    .ef [aria-invalid="true"] { border-color: var(--ef-error); }

    .ef-field-error { display: block; margin-top: .2rem; color: var(--ef-error); font-size: .8em; }

    .ef-choice-group { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }
    .ef-choice { display: flex; align-items: center; gap: .4rem; }
    .ef-choice label { margin: 0; font-size: .95em; }

    .ef-inline { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: 1.15rem; }
    .ef-inline label { margin: 0; font-size: .9em; }

    .ef-notice { padding: .7rem .9rem; border-radius: var(--ef-radius); font-size: .92em; margin-bottom: 1.15rem; }
    .ef-notice p { margin: 0 0 .3rem; font-weight: 600; }
    .ef-notice ul { margin: 0; padding-left: 1.1rem; }
    .ef-errors { border-left: 3px solid var(--ef-error); background: color-mix(in srgb, var(--ef-error) 8%, transparent); }
    .ef-success { border-left: 3px solid var(--ef-ok); background: color-mix(in srgb, var(--ef-ok) 8%, transparent); }

    .ef-actions { display: flex; flex-direction: column; gap: var(--ef-gap); align-items: flex-start; }

    /* reCAPTCHA v2 has a fixed 304px width. Scale it rather than let it overflow. */
    .ef-captcha { transform-origin: left top; }
    @container (max-width: 21rem) { .ef-captcha { transform: scale(.8); height: 62px; } }

    .ef button[data-emarsys-submit] {
        width: 100%;
        padding: .65rem 1.35rem;
        border: 1px solid transparent;
        border-radius: var(--ef-radius);
        background: var(--ef-accent);
        color: #fff;
        font: inherit;
        cursor: pointer;
    }
    .ef button[data-emarsys-submit][disabled] { cursor: not-allowed; opacity: .55; }

    .ef-status { margin: .6rem 0 0; font-size: .9em; opacity: .75; }

    .ef-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

    /* The flex rules above are author styles and would otherwise beat the browser's
       default [hidden] { display: none }, leaving hidden rows on screen. */
    .ef [hidden] { display: none !important; }