body.fleetform-login-page {
    background: var(--fleet-background-dark, #121212) !important;
    color: var(--fleet-on-dark, #ffffff);

    /* Standalone branded page. login.php calls wp_head(), which emits the
       active theme's global styles — block themes (e.g. Twenty Twenty-Five)
       inject body font-size/family, a base background, and root-padding side
       insets that bleed in and break this layout. Neutralize them so /login
       renders identically regardless of the tenant's theme. */
    margin: 0 !important;
    padding: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: normal !important;
    --wp--style--root--padding-top: 0 !important;
    --wp--style--root--padding-right: 0 !important;
    --wp--style--root--padding-bottom: 0 !important;
    --wp--style--root--padding-left: 0 !important;
}

/* Scoped border-box reset. Frameworks/themes that ship a global
   `* { box-sizing: border-box }` (e.g. hello-elementor + plugins on production
   sites) make width:100% inputs include their padding. Block themes like
   Twenty Twenty-Five DON'T, so without this the login inputs render as
   content-box and overflow the card ("stretch all the way across"). Scoping
   it here keeps /login identical regardless of the tenant's theme. */
body.fleetform-login-page,
body.fleetform-login-page *,
body.fleetform-login-page *::before,
body.fleetform-login-page *::after {
    box-sizing: border-box;
}

/* Form-control normalize. Production sites inherit these from a global
   framework reset (Elementor/plugins): consistent font, no native UA button
   chrome, zeroed margins. Block themes like Twenty Twenty-Five ship none of
   it, so without this the submit button picks up native UA appearance and
   inherits the theme's oversized Manrope font, and inputs render off. Scope to
   the login page so it's theme-independent. Checkboxes/radios keep their
   native look (login.css's own rules below set the final input/button styles). */
body.fleetform-login-page input,
body.fleetform-login-page button,
body.fleetform-login-page select,
body.fleetform-login-page textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: 1.5;
    margin: 0;
}
body.fleetform-login-page input:not([type="checkbox"]):not([type="radio"]),
body.fleetform-login-page button {
    -webkit-appearance: none;
    appearance: none;
}

.hidden {
    display: none !important;
}

.fleetform-login-wrapper {
    width: 100%;
    max-width: 320px;
    margin: 120px auto 100px auto;
    text-align: center;
    /* fleetform-core#70: this is an armour CONTAINER, whose own spacing the armour now floors at 0-3-0; the --ff-surface-* tokens carry these values through it. */
    --ff-surface-margin-top: 120px;
    --ff-surface-margin-right: auto;
    --ff-surface-margin-bottom: 100px;
    --ff-surface-margin-left: auto;
}

.fleetform-logo {
    max-width: 100%;
    max-height: 80px;
    margin-bottom: 20px;
}

.fleetform-login-box {
    background: var(--fleet-background-panel, #1a1a1a);
    padding: 26px 24px;
    border: 1px solid var(--fleet-button-border-color, #e0a241);
    border-radius: var(--fleet-input-border-radius, 8px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    text-align: left;
    color: var(--fleet-on-panel, #bcbcbc);
}

.fleetform-login-box label {
    font-weight: 600;
    display: block;
    margin: 12px 0 4px;
    /* Explicit size: without it the label inherits the page base font, and
       other stylesheets loaded on the /login route (admin-theme / active
       theme) inflate that base — the labels then rendered ~2x oversized. */
    font-size: 14px;
    line-height: 1.4;
    color: var(--fleet-label-text-color, #e0a241);
}

.fleetform-login-box input[type="text"],
.fleetform-login-box input[type="password"] {
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    margin-bottom: 16px;
    border: 1px solid var(--fleet-button-border-color, #e0a241);
    border-radius: var(--fleet-input-border-radius, 8px);
    background: var(--fleet-background-dark, #121212);
    color: var(--fleet-on-dark, #ffffff);

    /*
     * THE ARMOUR FIELD CONTRACT — same story as the button rules below, and
     * missed in the first pass at fleet-signin-page#38 because that issue was
     * written about buttons. core's armour owns `background-color`, `color`,
     * `border-color` and `width` on every input inside
     * `.fleetform-login-wrapper` through `--ff-field-*`, at 0-3-0. The plain
     * properties above are 0-2-1 and cannot reach the field: the gold border
     * fell back to `currentColor` (white), the dark fill to `transparent`, and
     * `width:100%` to `auto`, which is why the boxes stopped filling the panel.
     */
    --ff-field-bg: var(--fleet-background-dark, #121212);
    --ff-field-fg: var(--fleet-on-dark, #ffffff);
    --ff-field-border: var(--fleet-button-border-color, #e0a241);
    --ff-field-width: 100%;
}

/* iOS Safari zooms the viewport when a focused text field computes under 16px,
   and the user has to pinch back out. TWO separate things put these fields under
   that floor, which is why this is one explicit rule rather than an edit to the
   14px above:

     1. the `font-size: 14px` in the rule above — an ALLOW-LIST of two types, so
        it covers login, lost-password and create-account step 1; and
     2. `font-size: inherit` (the form-control normalize near the top of this
        file) resolving against the armour's container floor on
        `.fleetform-login-wrapper`, which resolves the --fleet-font-size-base
        token.
        That is the route `input[type="email"]` on /create-account takes, because
        it matches NEITHER type in the allow-list above.

   So the floor is stated EXPLICITLY rather than via `inherit`:
   `--fleet-font-size-base` is a TENANT SETTING (14px on parlay), so an
   inheritance-based fix would only be correct for tenants who happen to have set
   16px. And it is a DENY-LIST of the non-text controls rather than a list of the
   text ones, so a field type added to a template later cannot silently reappear
   under the floor — an allow-list of two types is exactly how the email field
   was missed.

   Mobile widths only: desktop has no focus-zoom behaviour and 14px there is the
   intended design. Measured in headless Chrome against the live stylesheets —
   at 375px all 7 fields go 14px -> 16px; at 1280px every field is byte-identical
   with and without this rule.

   NOTE this does NOT contradict core's iOS guard. `fleet-theme-armor.css` still
   applies family and line-height only to form CONTROLS (fleetform-core 756e78c);
   the wrapper rule is a different rule on a CONTAINER, reached by inheritance.

   Submit buttons are deliberately excluded — a button does not trigger focus
   zoom, and its font-size is owned by the `--ff-btn-*` contract above. */
@media (max-width: 767px) {
    body.fleetform-login-page .fleetform-login-box input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]),
    body.fleetform-login-page .fleetform-login-box select,
    body.fleetform-login-page .fleetform-login-box textarea {
        font-size: 16px;
    }
}

.fleetform-login-box input[type="submit"] {
    width: 100%;
    padding: 10px 0;
    background: linear-gradient(to right, var(--fleet-button-gradient-start, #e0a241), var(--fleet-button-gradient-end, #ffcc73));
    border: none;
    color: var(--fleet-button-text-color, #000000);
    font-weight: 600;
    border-radius: var(--fleet-input-border-radius, 8px);
    cursor: pointer;
    transition: background 0.2s ease-in-out;

    /*
     * THE ARMOUR CONTRACT (core >= 1.7.24, fleet-signin-page#38).
     *
     * core's `fleet-theme-armor.css` neutralises every button inside
     * `.fleetform-login-wrapper` through the `--ff-btn-*` custom properties,
     * at specificity 0-3-0 — deliberately un-out-specifiable. The plain
     * `background`/`border`/`color`/`width` above are 0-2-1 and therefore
     * CANNOT reach the button once the armour applies; on 2026-08-25 that
     * turned this gradient into bare white text with no border.
     *
     * Restate the same values through the contract rather than fighting the
     * specificity. Both paths read the SAME `--fleet-button-*` variables, so a
     * tenant palette still drives the colour and the two cannot drift apart.
     * The plain properties stay for the no-armour case (older core, or the
     * button rendered outside a container).
     */
    --ff-btn-bg: transparent;
    --ff-btn-bg-image: linear-gradient(to right, var(--fleet-button-gradient-start, #e0a241), var(--fleet-button-gradient-end, #ffcc73));
    --ff-btn-fg: var(--fleet-button-text-color, #000000);
    --ff-btn-border-style: none;
    --ff-btn-border-width: 0;
    --ff-btn-width: 100%;
    --ff-btn-bg-hover: var(--fleet-button-hover-color, #f2c97d);
    --ff-btn-bg-image-hover: none;

    /*
     * `body.fleetform-login-page input { font-size: inherit }` (line 48) makes
     * this button take its PARENT's size, and the armour's container floor sets
     * that parent to `--fleet-font-size-base` (14px). Before 2026-08-25 the
     * parent was the body at 16px. State it here so the control keeps the size
     * it has always rendered at — and 16px is also the threshold below which
     * iOS Safari zooms the viewport on focus.
     */
    font-size: 16px;
}

.fleetform-login-box input[type="submit"]:hover {
    background: var(--fleet-button-hover-color, #f2c97d);
}

/*
 * Sign-in notices follow the system's surface logic rather than carrying their
 * own colours: ONE accent variable drives both the tint and the rule, so a
 * variant is a single line and the two can never disagree.
 *
 * The text is --fleet-on-panel, which the palette derives from the panel's
 * LUMINANCE — light text on a dark tenant, dark text on a light one. That is
 * what stops this notice going white-on-white when a tenant picks a pale
 * palette, which is exactly how it was reported.
 *
 * TWO background declarations, deliberately. `color-mix()` is unsupported on
 * older browsers, where an invalid declaration is DROPPED — leaving no
 * background at all, which is the unreadable state this rule exists to prevent.
 * The plain panel colour is declared first so the cascade keeps it; the mix
 * overrides it wherever it is understood.
 */
.fleetform-login-message {
    --ff-msg-accent: var(--fleet-button-primary-color, #e0a241);

    background: var(--fleet-background-panel, #1a1a1a);
    background: color-mix(in srgb, var(--ff-msg-accent) 14%, var(--fleet-background-panel, #1a1a1a));
    color: var(--fleet-on-panel, #bcbcbc);
    border: 1px solid color-mix(in srgb, var(--ff-msg-accent) 38%, transparent);
    border-left: 4px solid var(--ff-msg-accent);
    border-radius: var(--fleet-input-border-radius, 8px);
    padding: 12px 14px;
    margin-bottom: 20px;
    text-align: left;
}

/*
 * A confirmation and a failure must not look identical — before this they did,
 * because the template has always emitted `success` and `error` classes that the
 * stylesheet never styled.
 *
 * ⚠️ THE MODIFIERS ARE NAMESPACED, AND THAT IS THE ACTUAL BUG FIX. The bare
 * class `.error` collides with WordPress/theme CSS already on the page:
 * measured live on parlayservices.fleetform.com, a `.fleetform-login-message
 * error` computed to `background rgb(255,255,255)` with `border rgb(214,54,56)`
 * — WordPress's own error red, from a rule that is nowhere in this file. With
 * our text colour on top, that is white on white, which is exactly how the
 * notice was reported. Our stylesheet had NO `.success`/`.error` rule at all, so
 * the foreign one was unopposed. The same class swapped to a namespaced modifier
 * computed correctly in the same page.
 *
 * ⚠️ --fleet-success-color CARRIES A FALLBACK FOR A MEASURED REASON: it is the
 * one colour field parlay has saved BLANK, and `emitRootVars()` skips a blank
 * value, so the variable is genuinely absent on that tenant.
 */
.fleetform-login-message--success {
    --ff-msg-accent: var(--fleet-success-color, #1c7735);
}

.fleetform-login-message--error {
    --ff-msg-accent: var(--fleet-color-delete-hover, #730000);
}

.fleetform-remember-submit {
    display: flex;
    justify-content: space-between;
    align-items: center; /* vertically center "Remember Me" with the Log In button */
    margin-top: 16px;
    gap: 10px;
}

.fleetform-remember-submit .remember-me-label {
    font-size: 14px;
    color: var(--fleet-on-panel, #bcbcbc);
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    flex: 1;
}

.fleetform-remember-submit input[type="submit"] {
    width: 110px;
    padding: 6px 8px;
    background: linear-gradient(to right, var(--fleet-button-gradient-start, #e0a241), var(--fleet-button-gradient-end, #ffcc73));
    border: 1px solid var(--fleet-button-border-color, #e0a241);
    color: var(--fleet-button-text-color, #000000);
    font-weight: bold;
    border-radius: var(--fleet-input-border-radius, 8px);
    cursor: pointer;
    transition: background 0.3s ease;
    white-space: nowrap;

    /* Same armour contract as .fleetform-login-box above — see the note there.
       This is the rule that actually renders the Log In button on the sign-in
       form; it lost its 1px gold border as well as the gradient. */
    --ff-btn-bg: transparent;
    --ff-btn-bg-image: linear-gradient(to right, var(--fleet-button-gradient-start, #e0a241), var(--fleet-button-gradient-end, #ffcc73));
    --ff-btn-fg: var(--fleet-button-text-color, #000000);
    --ff-btn-border: var(--fleet-button-border-color, #e0a241);
    --ff-btn-border-style: solid;
    --ff-btn-border-width: 1px;
    --ff-btn-width: 110px;
    font-size: 16px;
}

.fleetform-password-buttons {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 16px;
    gap: 10px;
}

.password-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.password-buttons button,
.password-buttons input[type="submit"] {
    flex: 1 1 48%;
    min-width: 120px;
    padding: 10px 14px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-radius: var(--fleet-input-border-radius, 8px);
    text-align: center;
}

.fleetform-password-buttons input[type="submit"] {
    max-width: 150px;
}

.fleetform-remember-submit .wp-generate-pw {
    padding: 6px 8px;
    border-radius: var(--fleet-input-border-radius, 8px);
    background: none;
    border: 1px solid var(--fleet-button-border-color, #e0a241);
    color: var(--fleet-button-border-color, #e0a241);
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
}

/* Match WP structure, keep your styles */
.password-input-container {
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
}

.password-input-wrapper {
    flex-grow: 1;
}

.password-input-container input#pass1 {
    width: 100%;
    margin-bottom: 0;
    padding-right: 70px; /* Reserve space for the toggle button */
    overflow: hidden;
    box-sizing: border-box;
}

.password-input-container .wp-hide-pw {
    position: absolute;
    right: 4px;
    inset-block: 0;
    display: flex;
    align-items: center;
    padding: 0 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--fleet-on-dark, #ffffff);
    /* password-field.css paints every state from this token (#76), so white
       now holds on hover/focus instead of turning the theme's pink. */
    --ff-pw-toggle-fg: var(--fleet-on-dark, #ffffff);
}


.password-input-container .dashicons {
    font-size: 18px;
    line-height: 1;
}

.reset-pass-form #pass-strength-result {
    margin-left: auto;
    margin-right: auto;
}

/* The strength meter moved to assets/css/password-field.css (#76), which
   PasswordField::enqueue() loads wherever the control renders. */

.fleetform-login-footer {
    margin-top: 20px;
    text-align: left;
    font-size: 13px;
    color: var(--fleet-on-panel, #bcbcbc);
}

.fleetform-login-footer a {
    color: var(--fleet-accent-color, #f2c97d);
    text-decoration: none;
}

.fleetform-login-footer a:hover {
    color: var(--fleet-button-hover-color, #f2c97d);
}

/* Create Account Page Specific Styles */
.lookup-type-selector {
    margin: 20px 0;
}

.lookup-type-selector label {
    display: inline-block;
    margin-right: 20px;
    font-weight: normal;
    cursor: pointer;
    color: var(--fleet-on-panel, #bcbcbc);
}

.lookup-type-selector input[type="radio"] {
    margin-right: 5px;
    accent-color: var(--fleet-primary-color, #e0a241);
}

/* Create account form elements that need special styling */
.fleetform-login-box p {
    color: var(--fleet-on-panel, #bcbcbc);
    margin-bottom: 16px;
    line-height: 1.5;
    text-align: center;
}

.fleetform-login-box h2 {
    color: var(--fleet-on-panel, #bcbcbc);
    margin-bottom: 16px;
    text-align: center;
    font-size: 24px;
}

/* Add margin below the "Enter your booking number" label */
.fleetform-login-box label[for="lookup_value"] {
    margin-bottom: 16px;
}

/* Customer information completion form styles */
.customer-info-summary {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 12px;
    border-radius: var(--fleet-input-border-radius, 8px);
    margin-bottom: 20px;
    color: var(--fleet-on-panel, #bcbcbc);
}

.required {
    color: #ff6b6b;
    font-weight: bold;
}

.fleetform-login-box small {
    display: block;
    color: color-mix(in srgb, var(--fleet-on-panel, #bcbcbc) 70%, transparent);
    font-size: 12px;
    margin-top: 4px;
    margin-bottom: 16px;
}

.button-secondary {
    background: transparent !important;
    border: 1px solid var(--fleet-button-border-color, #e0a241) !important;
    color: var(--fleet-on-panel, #bcbcbc) !important;
    text-decoration: none !important;
    display: inline-block;
    padding: 10px 20px;
    border-radius: var(--fleet-input-border-radius, 8px);
    margin-top: 10px;
    transition: all 0.2s ease-in-out;
}

.button-secondary:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}