/* =========================================================================
   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;
    /* Fixed 925px, centred; max-width lets it shrink to the screen on phones. */
    width: 925px;
    max-width: 100%;
    margin: 0 auto;
    background: #fff;
    /* Rounded on the surface itself, so the popup AND the standalone /login,
       /register, /forgot pages get the same corners; overflow clips the brand
       panel's photo to them. */
    border-radius: 20px;
    overflow: hidden;
    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: left 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%);
}

/* Image-only panel (login): no text, so no darkening overlay. */
.fame-auth-media--plain::after { display: none; }

.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: 20px;
}

.fame-auth-body-in {
    width: 100%;
}

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

.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;
    /* iOS WebKit (Safari AND Chrome on iPhone) needs the prefix, or it paints
       its own inset border / rounded corners over ours. */
    -webkit-appearance: none;
    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; }

/* leading icon inside a field (login: envelope / padlock) */
.fame-auth-inwrap { position: relative; }
.fame-auth-inwrap .fame-auth-input { padding-left: 46px; }
.fame-auth-ico {
    position: absolute;
    top: 50%;
    left: 16px;
    width: 19px;
    height: 19px;
    transform: translateY(-50%);
    color: var(--fa-ink-soft);
    pointer-events: none;
    transition: color .15s ease;
}
.fame-auth-input:focus + .fame-auth-ico { color: var(--fa-blue); }

/* 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 ------------------------------------------------------ */
/* Trust strip under the login form: icon + label, three across. */
.fame-auth-trust {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 12px;
    margin: 0;
    padding: 18px 0 0;
}
.fame-auth-trust li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--fa-ink);
    white-space: nowrap;
}
.fame-auth-trust svg {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    color: #4b6ea9;
}

.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, 40fr);
        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: 30px; }
}

@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;
    /* Same 20px as .fame-auth, so card and surface share one corner. */
    border-radius: 20px;
    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;
    margin: 0;
    padding: 0;
    font-size: 26px;
    line-height: 1;
    color: #4a5875;
    background: rgba(255, 255, 255, .9);
    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;
    }
}

/* iPhone: 100vh is the LARGE viewport (address bar and toolbar hidden), so the
   card's bottom, and the Sign In button with it, sat behind Chrome's bottom
   bar and could not be reached. The dynamic unit follows the bars as they
   show and hide. */
@supports (height: 100dvh) {
    .login-modal .modal-body { max-height: calc(100dvh - 24px); }
}

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

/* Phones: keep the card clear of the notch and the home indicator. */
@media (max-width: 991.98px) {
    .login-modal .modal-dialog {
        margin-top: max(12px, env(safe-area-inset-top));
        margin-bottom: max(12px, env(safe-area-inset-bottom));
    }
}

/* The modal container itself must scroll with momentum on iOS, or a drag on
   the card scrolls the page underneath instead. */
.login-modal { -webkit-overflow-scrolling: touch; }

/* 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);
    }
}

/* iOS (Safari and Chrome on iPhone share WebKit): a full-screen backdrop blur
   over a long page is re-rasterised on every scroll and address-bar change,
   which stutters and can leave the card half-painted. Solid tint there. */
@supports (-webkit-touch-callout: none) {
    body.fame-auth-modal-open .modal-backdrop {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        will-change: auto;
    }
    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;
    -webkit-appearance: none;
    -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; }

/* ---- compact surface (checkout login step) ------------------------------ */
/* The same form inside a narrower host (the checkout grid's main column):
   one column at every width, no brand panel, card chrome to match the
   checkout cards around it. */
.fame-auth--compact {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    border: 1px solid var(--fa-line);
    border-radius: 14px;
    overflow: hidden;
}
.fame-auth--compact .fame-auth-media { display: none !important; }
.fame-auth--compact .fame-auth-body { min-width: 0; }
@media (min-width: 992px) {
    .fame-auth--compact .fame-auth-body { padding: 34px 36px; }
    .fame-auth--compact .fame-auth-body-in { max-width: 520px; margin: 0 auto; }
}

/* ---------------------------------------------------------------------------
   Brand panel — the left half of the login / register / forgot surfaces
   (modules/users/_brand-panel.php). It replaced a flat JPG that had every word
   baked in: the copy is markup now, so it is crisp, translatable and
   selectable; only the photo is a file (--fa-media-img on .fame-auth).
   Visibility is still .fame-auth-media's business — hidden under 992px and in
   compact mode — so display is only set inside the 992px query below.
--------------------------------------------------------------------------- */
.fame-auth-brand {
    flex-direction: column;
    padding: 70px 28px;
    background-color: #0a3f8f;
    /* The artwork IS the panel: the blue side, the exam tiles, the handwriting,
       the books and the stethoscope are all in the picture. Only the headline,
       sub-line and cards are markup, placed over its empty left half. The
       picture fills the panel; a taller panel (register) crops its sides. */
    background-repeat: no-repeat;
    background-size: cover;
    /* Anchor right: when the column is taller than the photo's ratio, cover
       trims the sides, and the plain blue on the left is what should go — not
       the "Learn Practice Succeed" tiles on the right. */
    background-position: right bottom;
}

/* Register: its form is far taller than the artwork, so cover would blow the
   picture up and crop the tiles, the books and the tagline away. Fit it to the
   panel's width and anchor it at the bottom instead; the flat blue above it
   blends in through a top fade (.fame-auth-media--plain turns ::after off, so
   it is switched back on here). */
.fame-auth-brand--register,
.fame-auth-brand--trial {
    background-color: #0c3577;
    background-size: 100% auto;
    background-position: center bottom;
}

/* Same box as the picture (its aspect ratio, full width, bottom-anchored), so
   the fade always covers exactly the picture's top strip — whatever height the
   form gives the panel. */
.fame-auth-brand--register::after,
.fame-auth-brand--trial::after {
    content: "";
    display: block;
    position: absolute;
    top: auto;   /* the base ::after rule sets inset:0 — without this, top wins over bottom */
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    aspect-ratio: 492 / 560;
    pointer-events: none;
    background: linear-gradient(to bottom, #0c3577 0%, rgba(12, 53, 119, 0) 26%);
}

/* …and the copy moves up into the flat blue above the picture. */
.fame-auth-brand--register .fame-auth-brand-copy,
.fame-auth-brand--trial .fame-auth-brand-copy { margin: 0 0 auto; }

/* The copy sits centred in the picture's empty left half — clear of the exam
   tiles at the top and the handwriting along the bottom — and above the fade. */
.fame-auth-brand-copy {
    position: relative;
    z-index: 1;
    margin: auto 0;
}

/* The handwritten tagline at the panel's foot (design: assets/img/Screenshot_1.png):
   two script lines, the second stepped to the right, a blue swoosh rising under
   it. The popup loads no web font, so it falls through the common system script
   faces. ".fame-auth … p." out-ranks the modal's generic paragraph rule. */
.fame-auth .fame-auth-brand p.fame-auth-brand-tag {
    position: relative;
    z-index: 1;
    margin: 10px 0 0;
    text-align: left;
    font-family: "Segoe Script", "Bradley Hand", "Brush Script MT", "Snell Roundhand", cursive;
    font-size: 21px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: .01em;
    color: #fff;
    text-shadow: 0 2px 10px rgba(4, 20, 48, .45);
    transform: rotate(-20deg);
}

.fame-auth-brand-tag span { display: block; }
.fame-auth-brand-tag span + span { padding-left: 44px; }

/* The swoosh: a curved bottom border, tilted so its right end lifts. */
.fame-auth-brand-tag::after {
    content: "";
    display: block;
    width: 150px;
    height: 10px;
    margin: 2px 0 0 78px;
    border-bottom: 3px solid #5eb0ff;
    border-radius: 0 0 60% 60% / 0 0 100% 100%;
    transform: rotate(-4deg);
}

/* Logo above the headline. The PNG is 113px square; shown smaller so the
   headline stays the loudest thing in the panel. */
.fame-auth-brand-logo-wrap {
    display: flex;
    margin: 0 0 20px;
    padding-left: 25px;
}

.fame-auth-brand-logo {
    display: block;
    width: 100px;
    height: 100px;
    margin: 0;
}

/* The paragraph selectors below carry ".fame-auth … p." so they out-rank the
   modal's generic ".login-modal .modal-body p" (16px, #333, centred) from
   main_tabler.css — the same trick .fame-auth-media-title uses above. */
.fame-auth .fame-auth-brand p.fame-auth-brand-title {
    margin: 0 0 10px;
    text-align: left;
    font-size: 34px;
    font-weight: 600;
    line-height: 30px;
    letter-spacing: -.01em;
    color: #fff;
}

.fame-auth-brand-title span {
    display: block;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.25;
}

.fame-auth .fame-auth-brand p.fame-auth-brand-text {
    max-width: 330px;
    margin: 0 0 20px;
    text-align: left;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color: #EBF4FF;
}

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

.fame-auth-brand-points li {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 330px;
    padding: 5px 15px 5px 5px;
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 10px;
    background: linear-gradient(
        90deg,
        rgba(98, 180, 255, 0.20) 0%,
        rgba(33, 90, 150, 0.20) 29.81%,
        rgba(33, 95, 162, 0.20) 100%
    );
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
    color: #fff;
}

.fame-auth-brand-ico {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 100px;
    background: #3e9ef9;
}

.fame-auth-brand-ico svg {
    width: 20px;
    height: 20px;
    color: #fff;
}

@media (min-width: 992px) {
    /* .fame-auth-media turns the panel on at this width with display:block;
       the brand layout needs a column flex. */
    .fame-auth-brand { display: flex; }
}

/* Narrow desktops: trim the panel so the form keeps its width. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .fame-auth-brand { padding: 22px 22px 20px; gap: 12px; }
    .fame-auth-brand-logo-wrap { margin-bottom: 11px; }
    .fame-auth-brand-logo { width: 60px; height: 60px; }
    .fame-auth .fame-auth-brand p.fame-auth-brand-tag { margin-top: 14px; font-size: 18px; }
    .fame-auth-brand-tag::after { width: 130px; margin-left: 66px; }
    .fame-auth .fame-auth-brand p.fame-auth-brand-title { font-size: 27px; }
    .fame-auth-brand-title span { font-size: 20px; }
    .fame-auth .fame-auth-brand p.fame-auth-brand-text { margin-bottom: 11px; font-size: 14px; }
    .fame-auth-brand-points li { padding: 8px 10px; font-size: 12.5px; }
}

/* ---- "We're verifying it's you" ------------------------------------------
   The country hold, shown in place of the sign-in form in the same card.
   There is no form here and nothing to press: the clock is the content, so it
   is the biggest thing on it, and the wait reads as care rather than a wall. */
.fame-hold { text-align: center; padding: 8px 4px 4px; }
.fame-hold-ico {
    width: 58px; height: 58px; margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(24, 119, 242, .10); color: #1877F2;
}
.fame-hold-ico svg { width: 30px; height: 30px; }
.fame-hold-title { margin: 0 0 8px; font-size: 21px; font-weight: 800; color: #0f2033; }
/* The move, as two flags with their country names: "Pakistan → United
   Kingdom". The flag is the site's own intl-tel-input sprite — the same one
   the Security tab's Country / City column uses — so both screens draw a
   country the same way. */
.fame-hold-route {
    margin: 0 auto 14px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px;
    font-size: 14px; font-weight: 600; color: #0f2033;
}
.fame-hold-route[hidden] { display: none; }
.fame-hold-place {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 12px 6px 8px;
    border: 1px solid #e6ebf3; border-radius: 999px; background: #f8fafc;
}
.fame-hold-flag {
    flex: 0 0 auto; width: 22px; height: 16px;
    border-radius: 2px; box-shadow: 0 0 0 1px rgba(15, 32, 51, .08);
    background-size: cover;
}
.fame-hold-place-name { white-space: nowrap; }
.fame-hold-arrow { color: #1877F2; font-size: 20px; line-height: 1; }

.fame-hold-text { margin: 0 auto 18px; max-width: 34em; font-size: 14px; line-height: 1.6; color: #4b5b73; }
.fame-hold-clock {
    font-size: 40px; font-weight: 800; letter-spacing: .04em;
    color: #0f2033; font-variant-numeric: tabular-nums;
    line-height: 1.1; margin-bottom: 8px;
}
.fame-hold.is-done .fame-hold-clock { color: #1e7d52; }
.fame-hold-until { margin: 0 0 20px; font-size: 13px; color: #6b7a90; }
.fame-hold-back {
    border: 1px solid #e6ebf3; border-radius: 10px;
    padding: 10px 18px; background: #fff; color: #4b5b73;
    font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.fame-hold-back:hover { background: #f1f5f9; color: #0f2033; }