/*
 * The crawler's sign-in screen — the backdrop system of the photo agency's,
 * ported (تسک ۱۴۰۵/۰۷/۲۰/۰۶).
 *
 * The backdrop, its layers, the six colour motions, the six camera moves, their
 * keyframes, durations and easings, the hold that waits for the photograph and
 * the reduced-motion rule are the agency's `agency-login.css`, byte for byte:
 * the task names that file as the reference and forbids a different or
 * replacement animation. `LoginBackgroundManagementTest` reads the numbers out
 * of this file, so a careless edit to one of them fails there. The requirement
 * ids quoted in that part's comments (پس‌زمینه-…، تصویر-حرکت-…) are the agency's
 * own, kept so the two files can still be read side by side.
 *
 * Everything about the page is scoped to `body.fi-login-body`, which only the
 * login page carries — the panel behind the sign-in is untouched by it.
 *
 * Three things it does:
 *
 *   1. Lays a backdrop over the whole viewport: a photograph shown whole over a
 *      blurred copy of itself, or a colour with one of six very slow motions.
 *   2. Turns the sign-in card into dark glass, so the backdrop reads through it
 *      and the form stays legible over the brightest photograph and the darkest
 *      colour alike.
 *   3. Draws the swatch and the thumbnail of «مدیریت پس‌زمینه صفحه ورود».
 *
 * The card is Baligpa's (تسک ۱۰_۰۲، بخش دوم): its width, padding, corner,
 * border, shadow, field and button sizes are the numbers in baligpa-admin's
 * `public/css/panel-login.css`, read out of that file rather than off a
 * screenshot. What stays the crawler's own is what the card says: «سامانه
 * خزنده», «ورود به حساب کاربری» and every field it had.
 */

/* ------------------------------------------------------------------ */
/* 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                                                    */
/*                                                                     */
/* تسک ۱۰_۰۲، بخش دوم: the card is the size of Baligpa's. Until this    */
/* task it was Filament's own — `fi-width-lg`, 32rem wide with 3rem of  */
/* padding — which is why it stood half as wide again as Baligpa's      */
/* 21rem card and nearly twice as tall. Every number below is the one   */
/* in baligpa-admin's `panel-login.css`; `CrawlerLoginCardParityTest`   */
/* reads them out of this file.                                        */
/*                                                                     */
/* The card keeps both of its titles, which Baligpa's has only one of:  */
/* they are set smaller and closer together, so the second costs about  */
/* a line of height rather than the block it used to.                  */
/* ------------------------------------------------------------------ */

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

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

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

/* The gap between the titles and the form. */
body.fi-login-body .fi-simple-page-content {
    gap: 0.8rem;
}

/* «سامانه خزنده» and «ورود به حساب کاربری», one close under the other. */
body.fi-login-body .fi-simple-header {
    gap: 0.1rem;
}

body.fi-login-body .fi-simple-header .fi-logo,
body.fi-login-body .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: 0.85rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: rgba(241, 245, 249, 0.92);
}

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: Baligpa's rhythm between the fields and before the button. */
body.fi-login-body .fi-form,
body.fi-login-body .fi-sc-form {
    gap: 1.4rem;
}

body.fi-login-body .fi-sc,
body.fi-login-body .fi-fo-component-ctn {
    gap: 1.55rem;
}

/* The space between a label and its input. */
body.fi-login-body .fi-fo-field,
body.fi-login-body .fi-fo-field-wrp,
body.fi-login-body .fi-fo-field-label-col,
body.fi-login-body .fi-fo-field-content-col,
body.fi-login-body .fi-fo-field-wrp-label-col,
body.fi-login-body .fi-fo-field-wrp-content-col {
    gap: 0.5rem;
}

/* The last two selectors are the names this Filament gives a label and the
 * words inside it. The words carry a colour of their own, so the label's is not
 * inherited — and with the browser on its light theme they stayed near-black on
 * the dark glass. */
body.fi-login-body .fi-fo-field-wrp-label,
body.fi-login-body .fi-fo-field-wrp-label > *,
body.fi-login-body label,
body.fi-login-body .fi-fo-field-label,
body.fi-login-body .fi-fo-field-label-content {
    font-size: 0.8rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: #e2e8f0;
}

/* The required star, which the light theme draws in a red too dark for
 * glass. */
body.fi-login-body .fi-fo-field-label-required-mark {
    color: #fca5a5;
}

body.fi-login-body .fi-fo-field-wrp-hint,
body.fi-login-body .fi-fo-field-wrp-hint * {
    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);
    box-shadow: none;
}

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

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;
}

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

/* The eye that shows and hides the password — kept, and kept 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 {
    color: rgba(226, 232, 240, 0.85);
}

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

/* «مرا به خاطر بسپار» */
body.fi-login-body .fi-checkbox-input {
    width: 0.95rem;
    height: 0.95rem;
}

body.fi-login-body .fi-fo-field-wrp-hint-actions a,
body.fi-login-body a {
    color: #fcd34d;
}

/* The sign-in button: Baligpa's size. */
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;
}

/* 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-sc-text,
body.fi-login-body .fi-sc-text * {
    color: #e2e8f0;
}

/* ------------------------------------------------------------------ */
/* «مدیریت پس‌زمینه صفحه ورود» — the swatch and the thumbnail           */
/*                                                                     */
/* Every colour row carries a sample, so the list can be read without  */
/* opening anything.                                                   */
/* ------------------------------------------------------------------ */

.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;
}

/* On a phone the card stands 0.9rem off each edge, as Baligpa's does, with the
 * backdrop showing on both sides of it. It is never wider than the screen, and
 * if the screen is too short for it the page scrolls — nothing of the form is
 * hidden to avoid that (تسک ۱۰_۰۲، بند ۱۴). */
@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;
    }
}