.oftimor-auth-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
}
.oftimor-auth-overlay[aria-hidden="false"] {
    opacity: 1;
    pointer-events: auto;
}

.oftimor-auth-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 18, 32, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.oftimor-auth-overlay__card {
    position: relative;
    background: #fff;
    color: #0F1220;
    max-width: 460px;
    width: 100%;
    /* .oftimor-auth-overlay__card is ITSELF a flex item of
     * .oftimor-auth-overlay (display:flex, see above). v1.1.2 gave every
     * *descendant* of this card min-width:0 (line ~84) but never gave the
     * card its own min-width:0 — flex items default to min-width:auto, so
     * this card refused to shrink below its own min-content width and kept
     * pushing past the viewport on 390/360px phones even after v1.1.2,
     * silently cropped by this card's own overflow-x:hidden. Same bug
     * pattern as the nested .ofa-auth-container fix, one level higher.
     * Root-caused 2026-07-26 (§5 Design 18:31 v1.1.2 recheck, still clipped).
     */
    min-width: 0;
    box-sizing: border-box;
    border-radius: 12px;
    padding: 28px 28px 22px;
    box-shadow: 0 24px 60px rgba(15, 18, 32, 0.28);
    transform: translateY(8px);
    transition: transform 160ms ease;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overflow-x: hidden;
}

/* The unified-auth login/register templates (.ofa-auth-container /
 * .ofa-auth-card) were built for a full-width page section and switch
 * layout at *viewport* breakpoints (e.g. max-width:480px). Nested here
 * inside a fixed max-width:460px modal card, that viewport breakpoint
 * does not reliably match the modal's actual available width (e.g. a
 * wide desktop viewport still renders the "desktop" auth-card layout
 * inside a narrow modal), which bled content past the card's right
 * edge and got clipped by the viewport on phones. Force the nested
 * card to respect the modal's real width regardless of the viewport
 * size that its own media queries key off. Root-caused + fixed
 * 2026-07-26 (§5 Design 17:18/17:30 phone-modal-clipping report).
 */
.oftimor-auth-overlay__card .ofa-auth-container,
.oftimor-auth-overlay__card .ofa-auth-card {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    /* .ofa-auth-container is `display:flex` (auth-styles.css), which makes
     * .ofa-auth-card a flex item. Flex items default to min-width:auto,
     * i.e. they refuse to shrink below their own CONTENT's min-content
     * size (e.g. the 6 fixed-width .ofa-code-digit OTP boxes, ~290-330px
     * across). max-width:100% only caps the ceiling — it does not stop
     * this content-driven floor from pushing the card wider than the
     * modal, which then gets silently cropped by this card's
     * overflow-x:hidden. min-width:0 is the standard fix: it lets the
     * item actually shrink to the space available instead of to its
     * content's natural minimum. Root-caused 2026-07-26 against Design's
     * repeated 390px/360px clipping report after the v1.1.1 fix.
     */
    min-width: 0;
}
.oftimor-auth-overlay__card .ofa-auth-container {
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
}
/* !important is required here, not stylistic: this selector and
 * unified-auth's own `.ofa-auth-card` rule (auth-styles.css) both have
 * identical specificity (one class selector). Without !important the
 * winner is whichever stylesheet's `wp_enqueue_scripts` callback happens
 * to run last (unified-auth registers its CSS as a *virtual* inline
 * handle with wp_register_style(..., false, ...), so there is no real
 * dependency edge tying the two together — the print order is
 * activation-order-dependent, not guaranteed). `.ofa-auth-card` ships
 * `width:100%` + `padding:40px 32px` with the browser default
 * content-box, which on a narrow phone adds ~66px (32px*2 padding + 2px
 * border) OUTSIDE the intended 100%-of-modal width — the card silently
 * pushes ~66px past the card's own overflow-x:hidden edge and gets
 * cropped, matching Design's 2026-07-26 19:56 hard-reload finding
 * (whole card + Sign Up/WhatsApp tabs + Continue button all clipped at
 * the same right-hand offset on 390px/360px, not just one flex row).
 * !important removes the load-order dependency entirely so this modal
 * is never at the mercy of plugin activation order again.
 * Root-caused 2026-07-26 (§5 Design 19:56 hard-reload recheck). */
.oftimor-auth-overlay__card * {
    box-sizing: border-box !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
.oftimor-auth-overlay[aria-hidden="false"] .oftimor-auth-overlay__card {
    transform: translateY(0);
}

/* Defense-in-depth for the OTP digit row and channel tabs, the two rigid
 * (fixed-width / flex:1-with-min-content) rows most likely to still be
 * tight on very narrow phones (360-390px) even after the min-width:0 fix
 * above. flex-wrap:wrap is a no-cost fallback: it only activates if the
 * row still doesn't fit, wrapping to a second line instead of clipping.
 */
.oftimor-auth-overlay__card .ofa-code-inputs {
    flex-wrap: wrap;
    row-gap: 8px;
}
.oftimor-auth-overlay__card .ofa-code-digit {
    box-sizing: border-box; /* auth-styles.css leaves this content-box; the
        2px border was adding real px on top of the stated width/height,
        eating into the already-tight OTP row on narrow phones. */
}
.oftimor-auth-overlay__card .ofa-tabs .ofa-tab,
.oftimor-auth-overlay__card .ofa-tab {
    white-space: normal;
    text-align: center;
}
/* auth-styles.css sets .ofa-divider span (e.g. "or use a one-time code")
 * to white-space:nowrap; it is not a flex item itself so it does not
 * trigger the min-width:auto bug above, but its nowrap text can still be
 * the widest single line in the card on very narrow phones. Let it wrap
 * as defense-in-depth instead of relying on it always fitting. */
.oftimor-auth-overlay__card .ofa-divider span {
    white-space: normal;
}

.oftimor-auth-overlay__close {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: 0;
    font-size: 1.6rem;
    line-height: 1;
    padding: 6px 10px;
    cursor: pointer;
    color: #6B7180;
}
.oftimor-auth-overlay__close:hover { color: #0F1220; }

.oftimor-auth-overlay__title {
    font-size: 1.35rem;
    margin: 0 0 16px;
    letter-spacing: -0.005em;
}

/* ===== Tabs (Log In / Sign Up) ===== */
.oftimor-auth-overlay__tabs {
    display: flex;
    gap: 4px;
    background: #f3f5fb;
    padding: 4px;
    border-radius: 999px;
    margin: 0 0 18px;
}
.oftimor-auth-overlay__tab {
    flex: 1;
    background: transparent;
    border: 0;
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 600;
    color: #6B7180;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.oftimor-auth-overlay__tab.is-active {
    background: #fff;
    color: #1F2B5E;
    box-shadow: 0 1px 4px rgba(15, 18, 32, 0.08);
}
.oftimor-auth-overlay__tab:hover:not(.is-active) {
    color: #0F1220;
}
.oftimor-auth-overlay__panel { display: none; }
.oftimor-auth-overlay__panel.is-active { display: block; }

.oftimor-auth-overlay__body :where(input, button, select, textarea) {
    font: inherit;
}
.oftimor-auth-overlay__body input[type="text"],
.oftimor-auth-overlay__body input[type="email"],
.oftimor-auth-overlay__body input[type="tel"],
.oftimor-auth-overlay__body input[type="password"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #D8DBE5;
    border-radius: 6px;
    box-sizing: border-box;
}

.oftimor-auth-overlay__hint,
.oftimor-auth-overlay__fallback {
    margin: 14px 0 0;
    font-size: 0.85rem;
    color: #6B7180;
    text-align: center;
}

/* Floating sign-in / account button */
.oftimor-auth-overlay-fab {
    position: fixed;
    top: 12px;
    right: 16px;
    z-index: 99998;
    background: #1F2B5E;
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 9px 16px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(15, 18, 32, 0.18);
    font-size: 0.9rem;
    text-decoration: none;
    line-height: 1.2;
}
.oftimor-auth-overlay-fab:hover { background: #273476; }
.oftimor-auth-overlay-fab[data-state="account"] {
    background: #fff;
    color: #1F2B5E;
    border: 1px solid #1F2B5E;
}

@media (max-width: 480px) {
    .oftimor-auth-overlay__card { padding: 20px 18px; border-radius: 10px; }
    .oftimor-auth-overlay-fab { top: 8px; right: 10px; padding: 7px 12px; font-size: 0.85rem; }
}

@media (prefers-reduced-motion: reduce) {
    .oftimor-auth-overlay,
    .oftimor-auth-overlay__card { transition: none; }
}