/* ─── Email Form Component — reusable across landing pages ──────────────────
 *
 * Companion to `assets2/js/everfit-hubspot-form.js` (the shared form helper).
 * Apply by adding two classes to any v2 landing-page form:
 *
 *   <form class="ef-email-form ..."> with two-layer markup
 *     <div class="input-wrapper ...">
 *       <div class="custom-error-message ...">  ← pill (collapsed by default)
 *         <span></span>                          ← error text goes here
 *       </div>
 *       <div class="input-row ...">
 *         <input class="ef-email-input ..." />
 *       </div>
 *     </div>
 *     <button type="submit" class="..."> with .btn-text + .btn-loader children
 *       <span class="btn-text">Submit</span>
 *       <div class="btn-loader hidden"><div class="loader"></div></div>
 *     </button>
 *   </form>
 *
 * Then bind:
 *   EverfitHubspotForm.bind({ selector: '#my-form', messages: {...} });
 *
 * The helper toggles `.input-error` on `.input-wrapper` and `.is-loading` on
 * the submit button — this stylesheet animates the resulting UI.
 *
 * Specificity strategy:
 *   - Invalid state uses doubled class `.input-error.input-error` (0,4,0) so
 *     it beats the global main.css rule `.hero-form .input-wrapper:has(input.error)`
 *     (0,3,1) for any form that also carries the legacy `.hero-form` class.
 *   - Loader container is scoped with `:not(.hero-form)` so the global
 *     `.hero-form .btn-loader` rule (width: 109px etc.) in main.css keeps
 *     its current visual on legacy hero forms.
 * ─────────────────────────────────────────────────────────────────────────── */


/* ─── Pill (error message bar) ───────────────────────────────────────────────
 * Always rendered in the DOM, collapsed to max-height:0 by default. The
 * helper toggles `.input-error` on the wrapper, which expands the pill via
 * the max-height transition. `display: flex` overrides any `.hidden` Tailwind
 * class that might be added to the pill in markup. */
.ef-email-form .input-wrapper .custom-error-message {
    display: flex;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.ef-email-form .input-wrapper.input-error .custom-error-message {
    /* Mobile pill is h-[30px] — match so transition ends exactly when fully
       expanded (no idle period at end of animation). */
    max-height: 30px;
}
@media (min-width: 768px) {
    .ef-email-form .input-wrapper.input-error .custom-error-message {
        /* md+ pill is md:h-[27px] */
        max-height: 27px;
    }
}


/* ─── Input row — has a ::before backdrop defined in BOTH default and error
 * states so background-color transitions smoothly between them. Default is
 * transparent (no visual). Error state paints a dark navy backdrop so the
 * literal `rgba(235, 83, 2, 0.2)` orange bg renders as dark-brown over it. */
.ef-email-form .input-wrapper .input-row {
    position: relative;
    transition: background-color 0.5s ease;
}
.ef-email-form .input-wrapper .input-row::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: transparent;
    border-radius: inherit;
    z-index: -1;
    transition: background-color 0.5s ease;
}


/* ─── Invalid state — wrapper, input row, and ::before all change color.
 * Wrapper's transition comes from the Tailwind `transition-all duration-300`
 * already on its class list.
 *
 * Doubled class `.input-error.input-error` brings the specificity to (0,4,0)
 * so it beats main.css's `.hero-form .input-wrapper:has(input.error)` (0,3,1)
 * — that rule paints a different (red) invalid state which would otherwise
 * win on legacy forms that also carry the `.hero-form` class. */
.ef-email-form .input-wrapper.input-error.input-error {
    background-color: #EB5302;
    border-color: #EB5302;
}
.ef-email-form .input-wrapper.input-error.input-error .input-row {
    /* Figma literal — composes over ::before's dark backdrop to render as
       dark-brown (matches Figma node 1333:7710 exactly). */
    background-color: rgba(235, 83, 2, 0.2);
}
.ef-email-form .input-wrapper.input-error.input-error .input-row::before {
    /* Dark navy ≈ hero/carousel section bg behind the form. Fills the
       rounded shape via inset:0 + inherit border-radius; z-index:-1 keeps
       it behind the input-row's own bg + content. */
    background-color: rgb(20, 22, 38);
}


/* ─── Autofill suppression — unified rule for any `.ef-email-input` ──────────
 * Chrome/Safari paint a yellow/blue overlay when the user selects an email
 * from autocomplete. We need the input area to render IDENTICALLY to the
 * surrounding wrapper padding — meaning no extra color overlay added by
 * autofill at any state.
 *
 * The input itself is `bg-transparent`, so the wrapper's `bg-white/20`
 * (and `focus-within:bg-white/10`) already shows through. Any box-shadow
 * inset color OTHER than transparent stacks ON TOP of the wrapper bg,
 * creating a "double white" effect — input area visibly brighter than the
 * surrounding wrapper padding.
 *
 * Mirror the proven main.css pattern (line ~5325 for .hero-form): transparent
 * box-shadow + transparent bg + long transition delay to suppress yellow.
 *
 * IMPORTANT — interaction with main.css `.hero-form input:-webkit-autofill`:
 *   For forms with BOTH `.hero-form` AND `.ef-email-form`, both rules apply
 *   with same specificity + !important. Cascade order: component CSS loads
 *   AFTER main.css, so ours wins — but the values are identical (transparent
 *   shadow + bg), so no visual difference. */
.ef-email-form .ef-email-input:-webkit-autofill,
.ef-email-form .ef-email-input:-webkit-autofill:hover,
.ef-email-form .ef-email-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff !important;
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
    background-color: transparent !important;
    transition: background-color 5000s ease-in-out 0s;
}


/* ─── Button loading state ───────────────────────────────────────────────────
 * Helper adds `.is-loading` to the submit button during POST → hide text,
 * show spinner. Generic `button` selector so any submit button inside an
 * `.ef-email-form` is covered (no need to repeat page-specific button class). */
.ef-email-form button.is-loading .btn-text {
    display: none;
}
.ef-email-form button.is-loading .btn-loader {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ─── Loader container — default sizing for non-legacy forms ────────────────
 * Scoped with `:not(.hero-form)` so the global `.hero-form .btn-loader`
 * rule in main.css (width: 109px; height: auto) keeps its current visual
 * on legacy hero forms unchanged. New forms get this sensible default. */
.ef-email-form:not(.hero-form) .btn-loader {
    position: relative;
    margin: 0 auto;
    height: 1.5rem;
}
.ef-email-form:not(.hero-form) .btn-loader .loader {
    box-sizing: border-box;
    display: inline-block;
    height: 1.5rem;
    width: 1.5rem;
    border-radius: 9999px;
    border: 3px solid rgba(0, 0, 0, 0.2);
    border-bottom-color: #000;
    /* @keyframes rotation is defined globally in main.css */
    animation: rotation 1s linear infinite;
}