/*
 * Baligpa's sign-in screen, as the photo agency draws its own
 * (تسک ۱۴۰۵/۰۷/۱۹/۱۰-ورود، بند ۲ و ۳).
 *
 * Everything here is scoped to `body.fi-login-body`, which only the login page
 * carries (App\Filament\Pages\Auth\Login::getExtraBodyAttributes) — the panel
 * behind the sign-in and its other simple pages are untouched by every rule.
 *
 * The backdrop section — the default dark, the six colour motions, the six
 * camera moves of a photograph, the hold until the photograph is decoded and
 * the reduced-motion rule — is the agency's `public/css/agency-login.css`
 * copied value for value: durations, directions, scales, translations and
 * easings are not retuned here, so the two screens move identically.
 *
 * The card section is the agency's card re-expressed for this panel's
 * Filament v3 markup (the agency is on a newer Filament whose classes and
 * spacing differ), measured against the agency page until the two match:
 * a 21rem glass card, 1rem radius, the same border, shadow, blur, type sizes,
 * input and button heights. Identity stays Baligpa's: the name on the card is
 * this panel's own brand.
 */

/* ------------------------------------------------------------------ */
/* The backdrop                                                        */
/* ------------------------------------------------------------------ */

body.fi-login-body {
    background: #0b1120;
}

.fi-login-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    /* Behind the form and deaf to the pointer: it shows, it never takes a click
     * or a keystroke meant for the card (تسک ۱۰_۰۲، بند ۶). */
    pointer-events: none;
    /* The default the page falls back to when nothing is active, a file cannot
     * be reached, or the database will not answer (پس‌زمینه-۱۴). It is the
     * panel's own dark, and it is under every other backdrop as well — so a
     * photograph that fails to load leaves a considered dark screen rather than
     * a white one. */
    background-color: #0b1120;
}

/*
 * تسک ۱۰_۰۲ — a photograph is two layers of the same file.
 *
 * Showing a picture whole and covering the whole viewport with it cannot both
 * be had from one layer on a screen of other proportions, so there are two, and
 * which does which is not a matter of taste:
 *
 *   1. `-photo-fill`, behind: `cover`, blurred and a little darkened. It may be
 *      cropped — it only fills what the picture leaves over, so there is never
 *      an empty band beside or above it.
 *   2. `-photo-layer`, in front: `contain`, centred, sharp. All four edges of
 *      the picture are inside the viewport at every size, its proportions are
 *      its own, and it is never enlarged past the space there is.
 *
 * Until this task the one layer was `cover` and held 8% to 16% larger than the
 * viewport for the camera moves, which is what cut the masthead and the edges
 * off a picture composed to be seen whole.
 */
.fi-login-backdrop-photo-fill,
.fi-login-backdrop-photo-layer {
    position: absolute;
    display: block;
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none;
}

.fi-login-backdrop-photo-fill {
    /* Larger than the viewport by more than the blur reaches, so the soft,
     * see-through rim a blur leaves at its own edge is always off screen. In
     * pixels rather than per cent: the blur is in pixels too, and a phone is
     * not wide enough for a percentage to cover it. */
    inset: -4rem;
    background-size: cover;
    /* The blur is here and nowhere else — not on the picture, not on the page,
     * not on the form. One static layer, rasterised once. */
    filter: blur(24px) brightness(0.7) saturate(1.1);
    backface-visibility: hidden;
}

.fi-login-backdrop-photo-layer {
    inset: 0;
    background-size: contain;
}

.fi-login-backdrop-tinted {
    background-color: var(--login-backdrop-tone, #0b1120);
}

/*
 * حرکت-اصلاح-۰۱: the move waits for the picture, and for nothing else.
 *
 * A CSS animation starts the instant the element is parsed, which is well
 * before the photograph behind it has arrived. The first seconds of the move
 * were therefore spent on an empty layer, and the picture appeared partway
 * through — which is the «تأخیر» half of the complaint, and the only way the
 * backdrop could ever be seen to jump into place.
 *
 * The browser half sets this attribute the moment the layer is parsed and drops
 * it the moment the file is decoded (or has plainly failed, or has taken too
 * long), so the move begins on the frame the photograph becomes visible.
 * Nothing sets it without JavaScript, so a browser that runs none simply gets
 * the move from parse, as before — the hold can never be what stills the
 * backdrop.
 */
.fi-login-backdrop-photo-fill[data-photo-pending] {
    animation-play-state: paused;
}

/* The soft layers the motions move. They are transparent by default: a motion
 * class decides which of them it uses and what each one looks like. */
.fi-login-backdrop-layer {
    position: absolute;
    display: block;
    inset: -20%;
    pointer-events: none;
    opacity: 0;
}

/* A wash of white and of black, mixed from the chosen colour, so every motion
 * is a variation of that colour rather than a second colour laid over it. */
.fi-login-backdrop-tinted .fi-login-backdrop-layer-a {
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 60%);
}

.fi-login-backdrop-tinted .fi-login-backdrop-layer-b {
    background: radial-gradient(circle at 70% 65%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 62%);
}

.fi-login-backdrop-tinted .fi-login-backdrop-layer-c {
    background: radial-gradient(circle at 50% 80%, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0) 65%);
}

/* ------------------------------------------------------------------ */
/* The six motions (پس‌زمینه-۰۸)                                       */
/*                                                                     */
/* All six are slow enough to be felt rather than watched: the fastest  */
/* is a forty-second cycle and most are over a minute. Each animates    */
/* only `transform` and `opacity`, which the compositor can do without  */
/* laying the page out again — so nothing here slows the form down, and */
/* typing into it is unaffected (پس‌زمینه-۱۲).                          */
/* ------------------------------------------------------------------ */

/* ۱ | موج آرام — a very slow swell across the colour. */
.fi-login-motion-tide .fi-login-backdrop-layer-a {
    opacity: 1;
    animation: fi-login-tide 54s ease-in-out infinite;
}

.fi-login-motion-tide .fi-login-backdrop-layer-c {
    opacity: 0.7;
    animation: fi-login-tide 72s ease-in-out infinite reverse;
}

@keyframes fi-login-tide {
    0% {
        transform: translate3d(-6%, 2%, 0) scale(1.08);
    }

    50% {
        transform: translate3d(6%, -3%, 0) scale(1.14);
    }

    100% {
        transform: translate3d(-6%, 2%, 0) scale(1.08);
    }
}

/* ۲ | پرشدن و خالی‌شدن آرام — the colour enters from one side, fills, and
 * leaves by the other. */
.fi-login-motion-sweep .fi-login-backdrop-layer-a {
    opacity: 1;
    background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.24) 45%, rgba(255, 255, 255, 0) 100%);
    animation: fi-login-sweep 66s linear infinite;
}

@keyframes fi-login-sweep {
    0% {
        transform: translate3d(-70%, 0, 0);
    }

    100% {
        transform: translate3d(70%, 0, 0);
    }
}

/* ۳ | جریان آرام رنگ — a shade of the same colour drifting through. */
.fi-login-motion-flow .fi-login-backdrop-layer-b {
    opacity: 1;
    animation: fi-login-flow 78s ease-in-out infinite;
}

.fi-login-motion-flow .fi-login-backdrop-layer-c {
    opacity: 0.65;
    animation: fi-login-flow 96s ease-in-out infinite reverse;
}

@keyframes fi-login-flow {
    0% {
        transform: translate3d(-8%, -4%, 0) scale(1.1);
    }

    33% {
        transform: translate3d(5%, 6%, 0) scale(1.16);
    }

    66% {
        transform: translate3d(8%, -6%, 0) scale(1.12);
    }

    100% {
        transform: translate3d(-8%, -4%, 0) scale(1.1);
    }
}

/* ۴ | تنفس رنگ — the brightness of parts of the backdrop rising and falling on
 * a very slow rhythm. Opacity only, and between 0.35 and 0.75, so it is a
 * breath and never a blink (پس‌زمینه-۰۹). */
.fi-login-motion-breathe .fi-login-backdrop-layer-a {
    animation: fi-login-breathe 42s ease-in-out infinite;
}

.fi-login-motion-breathe .fi-login-backdrop-layer-c {
    animation: fi-login-breathe 58s ease-in-out infinite reverse;
}

@keyframes fi-login-breathe {
    0% {
        opacity: 0.35;
        transform: scale(1.04);
    }

    50% {
        opacity: 0.75;
        transform: scale(1.12);
    }

    100% {
        opacity: 0.35;
        transform: scale(1.04);
    }
}

/* ۵ | هاله شناور — one or two big soft haloes moving very slowly. */
.fi-login-motion-halo .fi-login-backdrop-layer-a {
    opacity: 0.9;
    animation: fi-login-halo-one 84s ease-in-out infinite;
}

.fi-login-motion-halo .fi-login-backdrop-layer-b {
    opacity: 0.8;
    animation: fi-login-halo-two 102s ease-in-out infinite;
}

@keyframes fi-login-halo-one {
    0% {
        transform: translate3d(-10%, -6%, 0) scale(1.05);
    }

    50% {
        transform: translate3d(8%, 8%, 0) scale(1.18);
    }

    100% {
        transform: translate3d(-10%, -6%, 0) scale(1.05);
    }
}

@keyframes fi-login-halo-two {
    0% {
        transform: translate3d(9%, 7%, 0) scale(1.12);
    }

    50% {
        transform: translate3d(-7%, -5%, 0) scale(1.02);
    }

    100% {
        transform: translate3d(9%, 7%, 0) scale(1.12);
    }
}

/* ۶ | حرکت لایه‌ای آرام — three very soft layers at different speeds, for a
 * gentle sense of depth. */
.fi-login-motion-layers .fi-login-backdrop-layer-a {
    opacity: 0.9;
    animation: fi-login-layer-slow 76s ease-in-out infinite;
}

.fi-login-motion-layers .fi-login-backdrop-layer-b {
    opacity: 0.75;
    animation: fi-login-layer-slow 108s ease-in-out infinite reverse;
}

.fi-login-motion-layers .fi-login-backdrop-layer-c {
    opacity: 0.6;
    animation: fi-login-layer-drift 132s linear infinite;
}

@keyframes fi-login-layer-slow {
    0% {
        transform: translate3d(-5%, 3%, 0) scale(1.06);
    }

    50% {
        transform: translate3d(5%, -3%, 0) scale(1.14);
    }

    100% {
        transform: translate3d(-5%, 3%, 0) scale(1.06);
    }
}

@keyframes fi-login-layer-drift {
    0% {
        transform: translate3d(-4%, 0, 0) scale(1.1);
    }

    50% {
        transform: translate3d(4%, 2%, 0) scale(1.1);
    }

    100% {
        transform: translate3d(-4%, 0, 0) scale(1.1);
    }
}

/* ------------------------------------------------------------------ */
/* The six camera moves for a photograph (تصویر-حرکت-۰۱ … ۰۵)          */
/*                                                                     */
/* تسک ۱۰_۰۲: off by default — a photograph is shown still. They are    */
/* kept for `LOGIN_BACKDROP_PHOTO_MOTION`, and they move the blurred    */
/* fill only: the picture in front is never scaled or panned, because   */
/* a picture that moves has to be cropped to hide its edges.            */
/*                                                                     */
/* A photograph used to be shown still. It now gets one of these, drawn */
/* fresh on every load, so the same picture is very likely two          */
/* different moves on two visits (تصویر-حرکت-۰۳).                       */
/*                                                                     */
/* Each runs a single `transform`, returns to exactly where it started, */
/* and never leaves the margin the layer's resting `scale(1.08)` buys — */
/* the maximum travel below is 2% of the layer against a 3% overhang at */
/* the tightest zoom, so the picture covers the viewport at every       */
/* instant (تصویر-حرکت-۰۵).                                             */
/*                                                                     */
/* ## Two things they were doing wrong (حرکت-اصلاح-۰۱ … ۰۳)            */
/*                                                                     */
/* They were built as a there-and-back with one `ease-in-out` laid over */
/* the whole cycle, over seventy to a hundred and ten seconds. That has */
/* two consequences nobody wants, and between them they are the three   */
/* complaints this correction exists for:                               */
/*                                                                     */
/*   * `ease-in-out` leaves the picture at a standstill at 0%. So the   */
/*     move opened on several seconds of nothing, and a person signing  */
/*     in was gone before it became visible — «حرکت با تأخیر زیادی      */
/*     شروع می‌شود».                                                     */
/*   * The same easing brings it back to a standstill at the halfway    */
/*     turn, forty-odd seconds in, which is read as the motion having   */
/*     stopped for good — «پس از مدت کوتاهی متوقف می‌شود».               */
/*                                                                     */
/* So each move now begins in the middle of its travel, at the point of */
/* its greatest speed, and the easing is per-segment rather than over   */
/* the whole cycle:                                                     */
/*                                                                     */
/*      0% ─ 25%   from mid-travel out to one end        `ease-out`     */
/*     25% ─ 75%   the full sweep across to the other    `ease-in-out`  */
/*     75% ─ 100%  back to mid-travel, gathering speed   `ease-in`      */
/*                                                                     */
/* `ease-in` and `ease-out` are each other's mirror, so the speed at    */
/* 100% is exactly the speed at 0% and the loop point cannot be seen —  */
/* the picture passes through it rather than landing on it (الزام ۵).   */
/* The two turns keep their easing, which is what stops the reversal    */
/* being a jolt (الزام ۴).                                              */
/*                                                                     */
/* Every duration is a quarter of what it was: the fastest cycle is     */
/* under twenty seconds and the slowest under thirty, where they were   */
/* seventy-eight and a hundred and ten (الزام ۳). The travel itself is  */
/* unchanged, so the move is the same move, four times as alive.        */
/* ------------------------------------------------------------------ */

/* ۱ | حرکت افقی آرام — the frame walks across the picture and back. */
.fi-login-photo-motion-pan-x .fi-login-backdrop-photo-fill {
    animation: fi-login-photo-pan-x 19.5s linear infinite;
}

@keyframes fi-login-photo-pan-x {
    0% {
        transform: scale(1.1) translate3d(0%, 0%, 0);
        animation-timing-function: ease-out;
    }

    25% {
        transform: scale(1.1) translate3d(2%, 0%, 0);
        animation-timing-function: ease-in-out;
    }

    75% {
        transform: scale(1.1) translate3d(-2%, 0%, 0);
        animation-timing-function: ease-in;
    }

    100% {
        transform: scale(1.1) translate3d(0%, 0%, 0);
    }
}

/* ۲ | حرکت عمودی آرام — the same, up and down. */
.fi-login-photo-motion-pan-y .fi-login-backdrop-photo-fill {
    animation: fi-login-photo-pan-y 21.5s linear infinite;
}

@keyframes fi-login-photo-pan-y {
    0% {
        transform: scale(1.1) translate3d(0%, 0%, 0);
        animation-timing-function: ease-out;
    }

    25% {
        transform: scale(1.1) translate3d(0%, 2%, 0);
        animation-timing-function: ease-in-out;
    }

    75% {
        transform: scale(1.1) translate3d(0%, -2%, 0);
        animation-timing-function: ease-in;
    }

    100% {
        transform: scale(1.1) translate3d(0%, 0%, 0);
    }
}

/* ۳ | بزرگ‌نمایی آرام — the picture grows very slightly and settles back. It
 * opens halfway through the push, already growing. */
.fi-login-photo-motion-zoom-in .fi-login-backdrop-photo-fill {
    animation: fi-login-photo-zoom-in 23s linear infinite;
}

@keyframes fi-login-photo-zoom-in {
    0% {
        transform: scale(1.11);
        animation-timing-function: ease-out;
    }

    25% {
        transform: scale(1.16);
        animation-timing-function: ease-in-out;
    }

    75% {
        transform: scale(1.06);
        animation-timing-function: ease-in;
    }

    100% {
        transform: scale(1.11);
    }
}

/* ۴ | کوچک‌نمایی آرام — the same move begun from the other end, so a load that
 * draws it opens already easing out rather than already pushing in. */
.fi-login-photo-motion-zoom-out .fi-login-backdrop-photo-fill {
    animation: fi-login-photo-zoom-out 23s linear infinite;
}

@keyframes fi-login-photo-zoom-out {
    0% {
        transform: scale(1.11);
        animation-timing-function: ease-out;
    }

    25% {
        transform: scale(1.06);
        animation-timing-function: ease-in-out;
    }

    75% {
        transform: scale(1.16);
        animation-timing-function: ease-in;
    }

    100% {
        transform: scale(1.11);
    }
}

/* ۵ | حرکت مورب آرام — across and down together, which reads differently from
 * either of them alone. */
.fi-login-photo-motion-drift .fi-login-backdrop-photo-fill {
    animation: fi-login-photo-drift 26s linear infinite;
}

@keyframes fi-login-photo-drift {
    0% {
        transform: scale(1.1) translate3d(0%, 0%, 0);
        animation-timing-function: ease-out;
    }

    25% {
        transform: scale(1.1) translate3d(1.8%, 1.4%, 0);
        animation-timing-function: ease-in-out;
    }

    75% {
        transform: scale(1.1) translate3d(-1.8%, -1.4%, 0);
        animation-timing-function: ease-in;
    }

    100% {
        transform: scale(1.1) translate3d(0%, 0%, 0);
    }
}

/* ۶ | حرکت سینمایی ترکیبی — a slow push in with a drift across it, which is the
 * one that reads as a camera rather than as an effect. */
.fi-login-photo-motion-cinematic .fi-login-backdrop-photo-fill {
    animation: fi-login-photo-cinematic 27.5s linear infinite;
}

@keyframes fi-login-photo-cinematic {
    0% {
        transform: scale(1.11) translate3d(0%, 0%, 0);
        animation-timing-function: ease-out;
    }

    25% {
        transform: scale(1.16) translate3d(-1.4%, 0.9%, 0);
        animation-timing-function: ease-in-out;
    }

    75% {
        transform: scale(1.06) translate3d(1.4%, -0.9%, 0);
        animation-timing-function: ease-in;
    }

    100% {
        transform: scale(1.11) translate3d(0%, 0%, 0);
    }
}

/*
 * پس‌زمینه-۱۳ و حرکت-مشترک-۰۲: a device asking for less motion gets none, of
 * either kind. The chosen colour is still the chosen colour and the chosen
 * photograph is still the chosen photograph — both are simply shown still,
 * which is what the task asks for rather than a different backdrop.
 */
@media (prefers-reduced-motion: reduce) {
    .fi-login-backdrop-layer {
        animation: none !important;
        transform: none !important;
        opacity: 0.35;
    }

    /* The fill simply stops; the picture in front of it never moved. */
    .fi-login-backdrop-photo-fill {
        animation: none !important;
        transform: none !important;
    }
}

/* ------------------------------------------------------------------ */
/* The sign-in card                                                    */
/* ------------------------------------------------------------------ */

body.fi-login-body .fi-simple-layout {
    position: relative;
    z-index: 1;
    background: transparent;
}

body.fi-login-body .fi-simple-main-ctn {
    background: transparent;
}

/* The agency's card: 21rem wide (336px), centred, dark glass. */
body.fi-login-body .fi-simple-main {
    max-width: 21rem;
    width: 100%;
    margin-top: 4rem;
    margin-bottom: 4rem;
    padding: 0.95rem 1.1rem 1.15rem;
    border-radius: 1rem;
    color: #f8fafc;
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.65), 0 2px 10px rgba(0, 0, 0, 0.3);
    --tw-ring-shadow: 0 0 #0000;
}

/* The gap between the brand and the form (Filament v3 puts 1.5rem there). */
body.fi-login-body .fi-simple-page > section {
    row-gap: 1.7rem;
}

body.fi-login-body .fi-simple-header .fi-logo {
    margin-bottom: 0;
    font-size: 1.1rem;
    line-height: 1.25rem;
    color: #f8fafc;
}

body.fi-login-body .fi-simple-header-heading {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #f8fafc;
}

body.fi-login-body .fi-simple-header-subheading {
    font-size: 0.8rem;
    line-height: 1.7;
    color: rgba(226, 232, 240, 0.85);
}

/* The form: the agency's tighter rhythm between fields and before the button. */
body.fi-login-body .fi-form {
    row-gap: 1.4rem;
}

body.fi-login-body .fi-form .fi-fo-component-ctn {
    row-gap: 1.55rem;
}

body.fi-login-body .fi-fo-field-wrp > .grid,
body.fi-login-body .fi-fo-field-wrp .grid.gap-y-2 {
    row-gap: 0.5rem;
}

body.fi-login-body .fi-fo-field-wrp-label,
body.fi-login-body .fi-fo-field-wrp-label > span,
body.fi-login-body .fi-fo-field-wrp-label span,
body.fi-login-body label {
    font-size: 0.8rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: #e2e8f0;
}

body.fi-login-body .fi-fo-field-wrp-label sup {
    color: #f87171;
}

body.fi-login-body .fi-fo-field-wrp-hint,
body.fi-login-body .fi-fo-field-wrp-hint *,
body.fi-login-body .fi-fo-field-wrp-helper-text {
    font-size: 0.75rem;
    color: rgba(226, 232, 240, 0.8);
}

body.fi-login-body .fi-input-wrp {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
    --tw-ring-color: rgba(255, 255, 255, 0.22);
    /* Filament v3 draws its ring with high-specificity utilities
     * (`[&:not(:has(...))]:focus-within:ring-2`); the agency's card has none,
     * so these two shadows are stated outright. */
    box-shadow: none !important;
}

body.fi-login-body .fi-input-wrp:focus-within {
    border-color: rgba(245, 158, 11, 0.85);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.35) !important;
}

body.fi-login-body .fi-input-wrp-prefix,
body.fi-login-body .fi-input-wrp-suffix {
    border-color: rgba(255, 255, 255, 0.12);
}

body.fi-login-body .fi-input,
body.fi-login-body .fi-input-wrp input {
    font-size: 0.85rem;
    line-height: 1.5rem;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    color: #f8fafc;
    background: transparent;
}

body.fi-login-body input::placeholder {
    color: rgba(226, 232, 240, 0.55);
}

/* Chrome paints an autofilled field white-on-yellow; keep it on the glass. */
body.fi-login-body .fi-input-wrp input:-webkit-autofill {
    -webkit-text-fill-color: #f8fafc;
    -webkit-box-shadow: 0 0 0 1000px rgba(30, 41, 59, 0.92) inset;
    caret-color: #f8fafc;
    transition: background-color 9999s ease-out 0s;
}

/* The eye that shows and hides the password — kept, and legible on glass. */
body.fi-login-body .fi-input-wrp-suffix .fi-icon-btn,
body.fi-login-body .fi-input-wrp-prefix .fi-icon-btn,
body.fi-login-body .fi-input-wrp-suffix .fi-icon-btn svg,
body.fi-login-body .fi-input-wrp-prefix .fi-icon-btn svg {
    color: rgba(226, 232, 240, 0.85);
}

body.fi-login-body .fi-input-wrp-suffix .fi-icon-btn:hover,
body.fi-login-body .fi-input-wrp-suffix .fi-icon-btn:hover svg,
body.fi-login-body .fi-input-wrp-prefix .fi-icon-btn:hover svg {
    color: #f8fafc;
}

/* «مرا به خاطر بسپار» */
body.fi-login-body .fi-checkbox-input {
    width: 0.95rem;
    height: 0.95rem;
    background-color: rgba(255, 255, 255, 0.05);
    --tw-ring-color: rgba(255, 255, 255, 0.25);
}

body.fi-login-body .fi-checkbox-input:checked {
    background-color: #e17100;
}

body.fi-login-body a {
    color: #fcd34d;
}

/* The sign-in button: the agency's size, its amber, its dark label. */
body.fi-login-body .fi-form-actions .fi-btn,
body.fi-login-body button[type='submit'].fi-btn {
    font-size: 0.85rem;
    line-height: 1.2rem;
    font-weight: 500;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    background-color: #e17100;
    color: #461901;
}

body.fi-login-body .fi-form-actions .fi-btn:hover,
body.fi-login-body button[type='submit'].fi-btn:hover {
    background-color: #fe9a00;
}

body.fi-login-body .fi-form-actions .fi-btn:focus-visible {
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.55);
}

body.fi-login-body .fi-form-actions .fi-btn .fi-btn-label,
body.fi-login-body .fi-form-actions .fi-btn svg {
    color: #461901;
}

body.fi-login-body .fi-form-actions .fi-btn[disabled],
body.fi-login-body .fi-form-actions .fi-btn.opacity-70 {
    opacity: 0.7;
    cursor: wait;
}

/* Validation and the failed-sign-in message read on glass without changing a
 * word of what they say. */
body.fi-login-body .fi-fo-field-wrp-error-message {
    color: #fca5a5;
    font-size: 0.75rem;
}

body.fi-login-body .fi-input-wrp[class*='ring-danger'] {
    box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.75) !important;
}

/* Why the operator is back at this screen (the idle sign-out notice). */
body.fi-login-body .fi-login-notice {
    margin-bottom: 0.85rem !important;
    padding: 0.6rem 0.75rem !important;
    border-radius: 0.6rem !important;
    border: 1px solid rgba(251, 191, 36, 0.45) !important;
    background: rgba(251, 191, 36, 0.14) !important;
    color: #fde68a;
    font-size: 0.8rem !important;
    line-height: 1.8 !important;
}

/* ------------------------------------------------------------------ */
/* «پس‌زمینه‌های صفحه ورود» — the swatch and the thumbnail              */
/* ------------------------------------------------------------------ */

.fi-login-bg-swatch {
    display: inline-block;
    width: 2.75rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    border: 1px solid rgba(148, 163, 184, 0.55);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.15);
    vertical-align: middle;
}

.fi-login-bg-swatch-lg {
    width: 6rem;
    height: 2.25rem;
}

.fi-login-bg-preview {
    border-radius: 0.375rem;
    object-fit: cover;
    border: 1px solid rgba(148, 163, 184, 0.45);
}

/* ------------------------------------------------------------------ */
/* Tablet and phone                                                    */
/*                                                                     */
/* The backdrop is fixed to the viewport and the motions only ever      */
/* translate inside an element that hides its own overflow, so nothing  */
/* here can push the page sideways.                                     */
/* ------------------------------------------------------------------ */

body.fi-login-body {
    overflow-x: hidden;
}

@media (max-width: 640px) {
    body.fi-login-body .fi-simple-main {
        max-width: calc(100% - 1.8rem);
        margin-left: 0.9rem;
        margin-right: 0.9rem;
        padding: 1rem 1.1rem 1.25rem;
    }

    body.fi-login-body .fi-simple-header-heading {
        font-size: 1rem;
    }
}