/* =========================================================================
   FAME auth surfaces — login, register, forgot password.

   One design shared by three templates and two contexts (the #loginModal
   popup and the standalone /login, /register, /forgot pages):
     modules/users/login/fame-login-form.php
     modules/users/register/templates/default.php
     modules/users/forgot_password/templates/default.php

   Mobile-first. The brand panel is a progressive enhancement that only
   appears when there is room for it (>=992px); everything below that is a
   single readable column.
   ========================================================================= */

.fame-auth {
    --fa-ink: #121f3e;
    --fa-ink-soft: #5b6b86;
    --fa-line: #e3e9f3;
    --fa-blue: var(--fame-blue, #0566e3);
    --fa-field: #f6f9fd;
    --fa-radius: 12px;

    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    background: #fff;
    color: var(--fa-ink);
    text-align: left;
}

.fame-auth *,
.fame-auth *::before,
.fame-auth *::after { box-sizing: border-box; }

/* ---- brand panel (>=992px only) ----------------------------------------- */
.fame-auth-media {
    display: none;
    position: relative;
    min-height: 100%;
    padding: 36px 32px;
    background-color: #0b1b3a;
    background-image: var(--fa-media-img);
    background-size: cover;
    background-position: center;
    color: #fff;
    overflow: hidden;
}

.fame-auth-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(9, 22, 51, .35) 0%, rgba(9, 22, 51, .82) 100%);
}

.fame-auth-media-in {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    gap: 10px;
}

.login-modal .modal-body p.fame-auth-media-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    color: #ffffff;
}

.login-modal .modal-body p.fame-auth-media-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #ffffff;
}

.fame-auth-media-points {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.fame-auth-media-points li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 14.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .9);
}

.fame-auth-media-points svg {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    color: #7ab6ff;
}

/* ---- form side ---------------------------------------------------------- */
.fame-auth-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    padding: 26px 20px 28px;
}

.fame-auth-body-in {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.fame-auth-head { margin-bottom: 20px; }

.fame-auth-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--fa-ink);
    text-align: center;
}

.fame-auth-sub {
    margin: 6px 0 0;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--fa-ink-soft);
}

/* ---- fields ------------------------------------------------------------- */
.fame-auth-form {
    display: grid;
    gap: 15px;
    margin: 0;
}

.fame-auth-field { display: grid; gap: 6px; }

/* Two fields side by side once there is room (first/last name). */
.fame-auth-two {
    display: grid;
    gap: 15px;
    grid-template-columns: 1fr;
}

.fame-auth-label {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--fa-ink);
}

.fame-auth-input {
    width: 100%;
    height: 48px;
    padding: 12px 16px;
    /* 16px keeps iOS Safari from zooming the page on focus. */
    font-size: 16px;
    line-height: 1.4;
    color: var(--fa-ink);
    background: var(--fa-field);
    border: 1px solid var(--fa-line);
    border-radius: var(--fa-radius);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    appearance: none;
}

.fame-auth-input::placeholder { color: #9aa5b9; }

.fame-auth-input:hover { border-color: #cfd9e9; }

.fame-auth-input:focus {
    background: #fff;
    border-color: var(--fa-blue);
    box-shadow: 0 0 0 3px rgba(5, 102, 227, .15);
}

.fame-auth-input:disabled { opacity: .6; cursor: not-allowed; }

/* password field + reveal button */
.fame-auth-pass { position: relative; }
.fame-auth-pass .fame-auth-input { padding-right: 48px; }

.fame-auth-eye {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--fa-ink-soft);
    background: none;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.fame-auth-eye:hover { color: var(--fa-blue); background: rgba(5, 102, 227, .08); }
.fame-auth-eye:focus-visible { outline: 2px solid var(--fa-blue); outline-offset: 1px; }
.fame-auth-eye svg { width: 19px; height: 19px; display: block; }
.fame-auth-eye .fame-auth-eye-off { display: none; }
.fame-auth-eye.is-on .fame-auth-eye-on { display: none; }
.fame-auth-eye.is-on .fame-auth-eye-off { display: block; }

/* ---- remember / forgot row ---------------------------------------------- */
.fame-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.fame-auth-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    color: var(--fa-ink-soft);
    cursor: pointer;
    user-select: none;
}

.fame-auth-check input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--fa-blue);
    cursor: pointer;
}

.fame-auth-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--fa-blue);
    text-decoration: none;
}

.fame-auth-link:hover { text-decoration: underline; }

/* ---- submit ------------------------------------------------------------- */
.fame-auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: var(--fa-blue);
    border: 0;
    border-radius: var(--fa-radius);
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease, transform .12s ease;
}

.fame-auth-submit:hover {
    background: #0455bd;
    box-shadow: 0 10px 22px -10px rgba(5, 102, 227, .85);
}

.fame-auth-submit:active { transform: translateY(1px); }
.fame-auth-submit:focus-visible { outline: 2px solid var(--fa-ink); outline-offset: 2px; }
.fame-auth-submit.disabled,
.fame-auth-submit:disabled { opacity: .65; cursor: not-allowed; box-shadow: none; }

/* ---- alerts + legal ----------------------------------------------------- */
.fame-auth-alert {
    margin: 0;
    padding: 11px 14px;
    font-size: 14px;
    line-height: 1.45;
    border-radius: 10px;
    background: #fdecec;
    border: 1px solid #f6c9c9;
    color: #a11d1d;
}

.fame-auth-legal {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--fa-ink-soft);
}

.fame-auth-legal a { color: var(--fa-blue); text-decoration: none; }
.fame-auth-legal a:hover { text-decoration: underline; }

/* ---- captcha ------------------------------------------------------------ */
/* The captcha module ships its own inline widths/margins — neutralise them so
   the image and its input sit on one tidy row. */
.fame-auth-captcha .mw-captcha,
.fame-auth-captcha .mw-ui-row {
    max-width: none !important;
    margin: 0 !important;
    width: 100%;
}

.fame-auth-captcha .captcha-holder {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fame-auth-captcha .mw-ui-col { width: auto !important; }
.fame-auth-captcha .mw-ui-col:last-child { flex: 1 1 auto; }
.fame-auth-captcha .form-group { margin: 0; }
.fame-auth-captcha .mw-captcha-img { border-radius: 8px; display: block; }

.fame-auth-captcha .mw-captcha-input {
    width: 100%;
    height: 48px;
    padding: 12px 16px;
    font-size: 16px;
    color: var(--fa-ink);
    background: var(--fa-field);
    border: 1px solid var(--fa-line);
    border-radius: var(--fa-radius);
}

.fame-auth-captcha .mw-captcha-input:focus {
    background: #fff;
    border-color: var(--fa-blue);
    box-shadow: 0 0 0 3px rgba(5, 102, 227, .15);
    outline: none;
}

/* ---- social row --------------------------------------------------------- */
.fame-auth-sep {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 14px;
    font-size: 13px;
    color: var(--fa-ink-soft);
}

.fame-auth-sep::before,
.fame-auth-sep::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--fa-line);
}

/* Icon buttons, not five stacked full-width bars — that stack was most of the
   modal's height and pushed the actual form off small screens. */
.fame-auth-socials {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

/* Solid brand fill, white mark. Each modifier only sets --fa-brand; everything
   else is driven from it, so a provider is one line to add or restyle. */
.fame-auth-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 46px;
    color: #fff;
    background: var(--fa-brand, var(--fa-blue));
    border: 1px solid transparent;
    border-radius: var(--fa-radius);
    text-decoration: none;
    box-shadow: 0 2px 6px -3px var(--fa-brand, var(--fa-blue));
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.fame-auth-social svg { width: 20px; height: 20px; display: block; }

/* The mark is painted white explicitly rather than via currentColor: main.css
   carries `.login-modal a { color: #505050 }` (0,2,0), which beats a plain
   `.fame-auth-social` colour inside the popup and left the glyphs dark grey on
   the brand tile. These selectors outrank it, and the Google mark's own
   per-path brand fills lose to a CSS fill (a presentation attribute is the
   weakest source), so no !important is needed anywhere. */
.fame-auth .fame-auth-socials .fame-auth-social { color: #fff; }

.fame-auth .fame-auth-socials .fame-auth-social svg,
.fame-auth .fame-auth-socials .fame-auth-social svg path {
    fill: #fff;
}

.fame-auth-social:hover,
.fame-auth-social:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 10px 20px -8px var(--fa-brand, var(--fa-blue));
}

.fame-auth-social:focus-visible { outline: 2px solid var(--fa-ink); outline-offset: 2px; }

/* ---- tooltip -------------------------------------------------------------
   Bubble + arrow drawn from data-fame-tip, so there is no extra markup and no
   native title tooltip fighting it. Shown on hover and on keyboard focus. */
.fame-auth-social { position: relative; }

.fame-auth-social::after,
.fame-auth-social::before {
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    z-index: 6;
    opacity: 0;
    transform: translate(-50%, 4px);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}

.fame-auth-social::after {
    content: attr(data-fame-tip);
    padding: 7px 11px;
    max-width: 220px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.35;
    white-space: nowrap;
    color: #fff;
    background: #101a30;
    border-radius: 9px;
    box-shadow: 0 10px 22px -10px rgba(4, 8, 22, .75);
}

/* arrow */
.fame-auth-social::before {
    content: "";
    bottom: calc(100% + 4px);
    width: 9px;
    height: 9px;
    background: #101a30;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.fame-auth-social:hover::after,
.fame-auth-social:hover::before,
.fame-auth-social:focus-visible::after,
.fame-auth-social:focus-visible::before {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* The row is centred, so the end tiles would push their bubble past the card
   edge — anchor those to the tile instead of centring on it. */
.fame-auth-socials .fame-auth-social:first-child::after {
    left: 0;
    transform: translate(0, 4px);
}

.fame-auth-socials .fame-auth-social:first-child:hover::after,
.fame-auth-socials .fame-auth-social:first-child:focus-visible::after {
    transform: translate(0, 0);
}

.fame-auth-socials .fame-auth-social:last-child::after {
    left: auto;
    right: 0;
    transform: translate(0, 4px);
}

.fame-auth-socials .fame-auth-social:last-child:hover::after,
.fame-auth-socials .fame-auth-social:last-child:focus-visible::after {
    transform: translate(0, 0);
}

/* A tooltip is a pointer affordance — on touch it only ever appears stuck
   after a tap, so it is dropped there. */
@media (hover: none) {
    .fame-auth-social::after,
    .fame-auth-social::before { display: none; }
}

.fame-auth-social--facebook { --fa-brand: #1877f2; }
.fame-auth-social--twitter  { --fa-brand: #1d9bf0; }
.fame-auth-social--google   { --fa-brand: #db4437; }
.fame-auth-social--github   { --fa-brand: #24292f; }
.fame-auth-social--linkedin { --fa-brand: #0a66c2; }

/* ---- verification panel extras ------------------------------------------ */
/* Channel chips (Email / SMS / WhatsApp) — shown only when the user may pick. */
.fame-auth-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: -6px 0 14px;
}

.fame-auth-chip {
    padding: 7px 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--fa-ink-soft);
    background: #fff;
    border: 1px solid var(--fa-line);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.fame-auth-chip:hover { border-color: var(--fa-blue); color: var(--fa-blue); }

.fame-auth-chip.is-active {
    color: #fff;
    background: var(--fa-blue);
    border-color: var(--fa-blue);
}

.fame-auth-chip:focus-visible { outline: 2px solid var(--fa-blue); outline-offset: 2px; }

/* "Remember this device" under the code boxes. */
.fame-auth-remember { margin: 4px 0 14px; }

/* ---- footer switch ------------------------------------------------------ */
.fame-auth-alt {
    margin: 18px 0 0;
    font-size: 14.5px;
    text-align: center;
    color: var(--fa-ink-soft);
}

.fame-auth-alt a {
    font-weight: 600;
    color: var(--fa-blue);
    text-decoration: none;
}

.fame-auth-alt a:hover { text-decoration: underline; }

.fame-auth-note {
    margin: 14px 0 0;
    padding: 11px 14px;
    font-size: 14px;
    border-radius: 10px;
    background: #eef4ff;
    color: #1c3d73;
}

/* =========================================================================
   Responsive
   ========================================================================= */

/* Small phones — keep the vertical rhythm tight so the submit button is
   reachable without a long scroll. */
@media (max-width: 400px) {
    .fame-auth-body { padding: 20px 16px 22px; }
    .fame-auth-title { font-size: 21px; }
    .fame-auth-form { gap: 13px; }
    .fame-auth-social { width: 48px; height: 44px; }
}

/* Room for two fields on a row. */
@media (min-width: 576px) {
    .fame-auth-two { grid-template-columns: 1fr 1fr; }
    .fame-auth-body { padding: 32px 28px; }
}

/* Brand panel appears — 45/55 split, form gets the larger half. */
@media (min-width: 992px) {
    /* minmax(0, …) is what keeps the split at exactly 45/55 in every pane.
       A bare `fr` is really minmax(auto, Nfr): the column may not shrink below
       its content's min-content width, so a pane whose form is intrinsically
       wider (the captcha row, an unbreakable string, a long label) steals width
       from its neighbour — which is why the brand column changed width between
       login, sign-up and forgot. A 0 minimum lets the ratio always win. */
    .fame-auth {
        grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
        min-height: 560px;
    }

    /* Same reason, one level down: a grid item defaults to min-width:auto, so
       wide content inside either column can still push it out. */
    .fame-auth-media,
    .fame-auth-body { min-width: 0; }
    .fame-auth-media { display: block; }
    .fame-auth-body { padding: 40px 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .fame-auth-submit,
    .fame-auth-social,
    .fame-auth-social::after,
    .fame-auth-social::before,
    .fame-auth-input,
    .fame-auth-eye { transition: none; }
    .fame-auth-submit:active,
    .fame-auth-social:hover { transform: none; }
}

/* =========================================================================
   The #loginModal shell — the popup context
   ========================================================================= */

.login-modal .modal-dialog {
    max-width: 940px;
    width: auto;
    margin: 12px;
}

@media (min-width: 992px) {
    .login-modal .modal-dialog { margin: 1.75rem auto; }
}

.login-modal .modal-content {
    position: relative;
    background: #fff;
    border: 0;
    border-radius: 18px;
    box-shadow: 0 30px 70px rgba(8, 20, 102, .22);
    overflow: hidden;
}

/* The auth surface paints its own edges, so the body must not inset it. */
.login-modal .modal-body { padding: 0; }
.login-modal .modal-header { padding: 0; border: 0; min-height: 0; }

.login-modal .modal-header .form-popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    font-size: 26px;
    line-height: 1;
    color: #4a5875;
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--fame-vl-line, #e3e9f3);
    border-radius: 50%;
    cursor: pointer;
    opacity: 1;
    transition: background-color .15s ease, color .15s ease;
}
.login-modal .modal-header .form-popup-close span {
    margin-top: -5px;
}
.login-modal .modal-header .form-popup-close:hover {
    background: #fff;
    color: #e14f68;
}

/* Height stays flexible — the card is as tall as whichever pane is showing.
   Only a floor is set, so the body cannot collapse to nothing during the
   reload_module() ajax swap and spring back open. */
@media (min-width: 992px) {
    .login-modal .modal-body { min-height: 560px; }
}

/* On a laptop the modal must never exceed the viewport: the surface scrolls
   inside the card instead of the page scrolling behind it. */
@media (min-height: 1px) {
    .login-modal .modal-body {
        max-height: calc(100vh - 24px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Reserve the scrollbar's width whether or not the pane needs one:
           sign-up scrolls and login does not, so without this the columns are
           ~15px narrower on one pane than the other and the brand column
           visibly changes width on every switch. */
        scrollbar-gutter: stable;
    }
}

@media (min-width: 992px) {
    .login-modal .modal-body { max-height: calc(100vh - 3.5rem); }
}

/* The api-sync login handler and the forgot-password module reuse one .alert
   element for both outcomes — colour it by the state class they toggle. */
.fame-auth-alert.alert-success {
    background: #e8f7ee;
    border-color: #b7e4c8;
    color: #1c6b3c;
}

/* ---- popup backdrop ------------------------------------------------------
   Full-screen near-black overlay with the page blurred behind it. Scoped to
   the class fame-auth.js puts on <body> while #loginModal is open, so the
   cart and order modals keep the stock backdrop.
   Opacity is forced to 1 and the darkness carried in the colour's alpha —
   fading the element itself also fades the blur it composites. */
/* Resting state = fully transparent and unblurred. Bootstrap adds .show on the
   next frame (and removes it on close), so the darkness and the blur animate
   in and out together instead of snapping. */
body.fame-auth-modal-open .modal-backdrop {
    background-color: rgba(4, 8, 22, 0);
    opacity: 1;
    /* The blur is set once and never transitioned. Animating backdrop-filter
       forces the compositor to re-snapshot the page every frame, which is what
       made the overlay flicker on open and close; only the tint moves. */
    -webkit-backdrop-filter: blur(8px) saturate(115%);
    backdrop-filter: blur(8px) saturate(115%);
    transition: background-color .28s ease;
    will-change: background-color;
}

body.fame-auth-modal-open .modal-backdrop.show {
    background-color: rgba(4, 8, 22, .72);
}

/* No backdrop-filter support (older Firefox): lean darker so the page behind
   still recedes. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    body.fame-auth-modal-open .modal-backdrop.show {
        background-color: rgba(4, 8, 22, .88);
    }
}

/* =========================================================================
   Motion — open, close, and switching between the three windows
   ========================================================================= */

/* ---- the card ------------------------------------------------------------
   Bootstrap's generic `.fade { opacity: 0 }` utility also lands on .modal
   itself, so the whole overlay was fading on its own .15s clock while the
   dialog ran a different one — two opacity animations over the same pixels,
   which is the flash. The container is pinned opaque and only the dialog
   animates.

   The transition on the container is NOT cosmetic: Bootstrap 4 reads the hide
   duration off the MODAL element (Util.getTransitionDurationFromElement(
   this._element)) and off the DIALOG for show. With `transition: none` here it
   would tear the card away before its own exit finished, so the duration is
   kept and matched to the exit below. */
.modal.login-modal.fade,
.modal.login-modal.fade:not(.show) {
    opacity: 1;
    transition: opacity .22s linear;
}

.modal.login-modal.fade .modal-dialog {
    opacity: 0;
    transform: translateY(20px);
    transition:
        transform .34s cubic-bezier(.22, .92, .28, 1),
        opacity .26s ease-out;
    /* Promote once so the first frame is not a paint-and-composite hitch. */
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.modal.login-modal.fade.show .modal-dialog {
    opacity: 1;
    transform: none;
}

/* Closing is quicker than opening — a slow exit reads as lag. Only the timing
   differs; the resting transform above is the one it returns to. */
.modal.login-modal.fade:not(.show) .modal-dialog {
    transition:
        transform .2s cubic-bezier(.4, 0, 1, 1),
        opacity .18s ease-in;
}

/* ---- contents ------------------------------------------------------------
   Deliberately NOT animated.

   footer_cart.php calls reload_module() on all three modules on show.bs.modal,
   so a moment after the popup opens their markup is replaced over ajax. Any
   entrance animation on the surface therefore plays a SECOND time on the fresh
   elements — which is the left column appearing to swell open after the popup
   is already up. The card's own lift (above) is enough; the contents just
   arrive. Their geometry is reserved below so the ajax gap cannot collapse the
   card either. */

/* ---- switching login <-> register <-> forgot ------------------------------
   Gated on .is-switching, which fame-auth.js sets only when one of the toggle
   links is clicked. Left ungated, the animation also fired the moment the
   modal opened — a third opacity animation stacked on the dialog's own fade,
   which is what made the open flash. */
@keyframes fameAuthSwap {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

.login-modal.is-switching .js-login-window,
.login-modal.is-switching .js-register-window,
.login-modal.is-switching .js-forgot-window {
    animation: fameAuthSwap .3s cubic-bezier(.22, .92, .28, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .modal.login-modal.fade .modal-dialog,
    .modal.login-modal.fade:not(.show) .modal-dialog {
        transition: opacity .12s linear;
        transform: none;
    }
    body.fame-auth-modal-open .modal-backdrop { transition: none; }
    .login-modal.is-switching .js-login-window,
    .login-modal.is-switching .js-register-window,
    .login-modal.is-switching .js-forgot-window {
        animation: none;
    }
}

/* =========================================================================
   6-digit verification panel — shared by the register and login surfaces
   (modules/users/_verify-code-panel.php, driven by assets/js/fame-auth-verify.js).
   ========================================================================= */

/* The form leaves to the left as the panel arrives from the right. */
.fame-auth-body-in.is-sliding-out {
    opacity: 0;
    transform: translateX(-24px);
    transition: opacity .22s ease, transform .22s ease;
}

.fame-auth-verify {
    opacity: 0;
    transform: translateX(28px);
    transition: opacity .28s ease, transform .28s ease;
    /* The panel slides in from the right: without this the offset shows up as
       a horizontal scrollbar on a phone for the length of the animation. */
    max-width: 100%;
    overflow-x: clip;
}
.fame-auth-verify.is-shown { opacity: 1; transform: none; }

/* One box per digit — the pattern people know from banking / 2FA apps.
   GRID, not flex: `grid-auto-flow: column` + `grid-auto-columns: minmax(0, 1fr)`
   splits the row into equal tracks for ANY number of boxes (the code length is
   a setting, 4–8) and a 0 minimum means a track can always shrink — an input's
   intrinsic width (its `size` attribute, or padding a theme rule adds) can
   never push the row past the panel. The gap and the box itself scale with the
   viewport so eight boxes still fit a 320px phone. */
.fame-auth-otp {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: clamp(4px, 1.8vw, 10px);
    width: 100%;
    max-width: 100%;
    margin: 4px 0 14px;
}

/* Specific enough to win over generic `input` rules in the theme / bootstrap:
   a stray width, padding or min-width there is what makes a digit row overflow. */
.fame-auth .fame-auth-otp-input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: clamp(46px, 13vw, 60px);
    padding: 0;
    text-align: center;
    font-size: clamp(17px, 5vw, 24px);
    font-weight: 700;
    color: var(--fa-ink);
    background: #fff;
    border: 1px solid var(--fa-line, #dfe4ee);
    border-radius: clamp(8px, 2.5vw, 12px);
    transition: border-color .15s ease, box-shadow .15s ease;
    -moz-appearance: textfield;
}
.fame-auth-otp-input::-webkit-outer-spin-button,
.fame-auth-otp-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fame-auth-otp-input:focus {
    outline: none;
    border-color: var(--fa-blue);
    box-shadow: 0 0 0 3px rgba(24, 119, 242, .14);
}

.fame-auth-verify-msg {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--fa-muted, #7a869a);
    display: none;
}
.fame-auth-verify-msg.is-shown { display: block; }
.fame-auth-verify-msg.is-error { color: #d64550; }

/* "Resend code" reads as a link but must be a button (it fires an action). */
.fame-auth-linkbtn {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--fa-blue);
    cursor: pointer;
}
.fame-auth-linkbtn:hover:not(:disabled) { text-decoration: underline; }
.fame-auth-linkbtn:disabled { color: var(--fa-muted, #7a869a); cursor: default; }

/* Button loader (register submit, verify, login precheck). */
.fame-auth-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: fame-auth-spin .6s linear infinite;
}
@keyframes fame-auth-spin { to { transform: rotate(360deg); } }
.fame-auth-submit.is-loading { opacity: .85; cursor: progress; }

/* Registration errors, rendered above the form by the script. */
.fame-auth-formerror {
    margin-bottom: 14px;
    padding: 10px 13px;
    border-radius: 10px;
    background: #fdf2f3;
    border: 1px solid #f5c6cb;
    color: #b3323f;
    font-size: 13.5px;
    line-height: 1.45;
}

/* The digit row sizes itself with clamp() above — no per-breakpoint override
   is needed (and a plain `.fame-auth-otp-input` rule here would lose to it). */

@media (prefers-reduced-motion: reduce) {
    .fame-auth-body-in.is-sliding-out,
    .fame-auth-verify { transition: none; }
    .fame-auth-spinner { animation-duration: 1.6s; }
}

/* Only the seconds are red while the resend button counts down. */
.fame-auth-countdown { color: #d64550; font-weight: 700; }

/* "Use a different email" — the way back out of the code panel. */
.fame-auth-verify .fame-auth-linkbtn[data-verify-cancel] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--fa-muted, #7a869a);
    font-weight: 500;
}
.fame-auth-verify .fame-auth-linkbtn[data-verify-cancel]:hover { color: var(--fa-ink, #101a33); }
.fame-auth-verify .fame-auth-linkbtn[data-verify-cancel] svg { width: 15px; height: 15px; }