/* ------------------------------------------------------------------
   UI3 sign in page (Account/SignIn), rendered by _Layout_Auth_UI3.

   A standalone two column screen: the form on the reading side (right
   in rtl) and a brand panel on the other. The page root also carries
   .ac-page, so every field, button, captcha row and alert comes from
   fields-ui3.css / account-ui3.css exactly as it does on the account
   pages - only the shell, the field icons and the brand panel are
   defined here.

   The layout loads no site chrome, so the handful of globals the app
   normally gets from Site.css (the loading pill, the swal stacking)
   are re-declared at the bottom.
   ------------------------------------------------------------------ */

/* ============================ page shell ========================== */
.auth-body {
    margin: 0;
    background: var(--background, #F8FAFC);
    font-family: Vazirmatn, tahoma, sans-serif;
}

/* .ac-page opens with 20px/48px padding and a page background; here the
   two columns run edge to edge instead. */
.auth-page.ac-page {
    padding: 0;
    background: transparent;
}

.auth-wrap {
    display: grid;
    grid-template-columns: minmax(0, 46%) minmax(0, 1fr);
    min-height: 100vh;
}

/* ---------------------------- form side --------------------------- */
.auth-main {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    background: var(--surface, #fff);
}

.auth-card {
    width: 100%;
    max-width: 430px;
}

.auth-logo {
    margin-bottom: 26px;
}

    .auth-logo img {
        height: 44px;
        width: auto;
    }

.auth-title {
    margin: 0 0 6px;
    font-size: 26px;
    line-height: 1.6;
    font-weight: 700;
    color: var(--text, #374151);
}

.auth-sub {
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.9;
    color: var(--text-secondary, #6B7280);
}

/* the fields are stacked, not gridded: one column never needs .ac-grid */
.auth-fields .ac-field + .ac-field {
    margin-top: 16px;
}

/* ------------------------- field decoration ----------------------- */
/*  The box itself (height, radius, colours, focus ring, placeholder)
    is fields-ui3.css's; this only makes room for the leading icon and
    the show/hide button and paints them.                             */
.auth-input {
    position: relative;
    display: flex;
    align-items: center;
}

    .auth-input > i {
        position: absolute;
        right: 14px;
        font-size: 14px;
        color: var(--text-muted, #9CA3AF);
        pointer-events: none;
        transition: color .2s ease;
    }

    .auth-input:focus-within > i {
        color: var(--primary, #C1122F);
    }

.auth-page .auth-input input[type="text"],
.auth-page .auth-input input[type="password"] {
    padding: 0 40px 0 44px;
}

.auth-toggle-pass {
    position: absolute;
    left: 7px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted, #9CA3AF);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

    .auth-toggle-pass:hover {
        background: var(--surface-alt, #F1F5F9);
        color: var(--primary, #C1122F);
    }

/* ---------------------------- extras row -------------------------- */
.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.auth-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 14.5px;
    font-weight: 400;
    color: var(--text-secondary, #6B7280);
    cursor: pointer;
    user-select: none;
}

    .auth-remember input[type="checkbox"] {
        width: 17px;
        height: 17px;
        margin: 0;
        accent-color: var(--primary, #C1122F);
        cursor: pointer;
    }

.auth-link {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--primary, #C1122F);
    text-decoration: none;
}

    .auth-link:hover {
        color: var(--primary-hover, #A10F26);
        text-decoration: underline;
    }

/* ----------------------------- submit ----------------------------- */
/* .ac-actions draws a divider and floats the buttons left; on a single
   column card the primary action is full width instead. */
.auth-page .auth-submit {
    width: 100%;
    margin-top: 22px;
}

.auth-page .auth-submit .fa-spinner {
    display: none;
}

.auth-page .auth-submit.is-busy .fa-spinner {
    display: inline-block;
}

.auth-page .auth-submit.is-busy .auth-submit-icon {
    display: none;
}

/* ----------------------------- footer ----------------------------- */
.auth-foot {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border, #E5E7EB);
    text-align: center;
    font-size: 14.5px;
    line-height: 2;
    color: var(--text-secondary, #6B7280);
}

    .auth-foot a {
        margin-right: 6px;
        color: var(--primary, #C1122F);
        font-weight: 700;
        text-decoration: none;
    }

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

.auth-back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    font-size: 14px;
    color: var(--text-muted, #9CA3AF);
    text-decoration: none;
}

    .auth-back:hover {
        color: var(--primary, #C1122F);
    }

/* --------------------------- brand panel -------------------------- */
.auth-aside {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 56px 52px;
    color: #fff;
    background: linear-gradient(145deg, var(--primary, #C1122F) 0%, #7C0A1D 55%, #3F1420 100%);
}

    /* two soft lights and a faint grid, all in css - the panel must not
       wait on an image to look finished */
    .auth-aside::before,
    .auth-aside::after {
        content: "";
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
    }

    .auth-aside::before {
        width: 520px;
        height: 520px;
        top: -190px;
        left: -140px;
        background: radial-gradient(circle, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 70%);
    }

    .auth-aside::after {
        width: 420px;
        height: 420px;
        bottom: -170px;
        right: -110px;
        background: radial-gradient(circle, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 70%);
    }

.auth-aside-grid {
    position: absolute;
    inset: 0;
    opacity: .16;
    background-image: linear-gradient(to right, rgba(255,255,255,.35) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.35) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
    mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
    pointer-events: none;
}

.auth-aside-inner {
    position: relative;
    z-index: 1;
    max-width: 460px;
    margin: 0 auto;
}

.auth-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 7px 15px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    font-size: 13.5px;
    font-weight: 600;
}

.auth-aside h2 {
    margin: 0 0 14px;
    font-size: 30px;
    line-height: 1.7;
    font-weight: 700;
}

.auth-aside p {
    margin: 0 0 28px;
    font-size: 15.5px;
    line-height: 2.1;
    color: rgba(255,255,255,.86);
}

.auth-points {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .auth-points li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: 15px;
        line-height: 1.95;
        color: rgba(255,255,255,.94);
    }

        .auth-points li + li {
            margin-top: 14px;
        }

    .auth-points i {
        flex: none;
        width: 30px;
        height: 30px;
        margin-top: 3px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: rgba(255,255,255,.16);
        font-size: 13px;
    }

/* --------------------------- responsive --------------------------- */
@media (max-width: 991px) {
    /*  one column, and the rows must NOT split the viewport in half:
        the banner takes what it needs and the form gets the rest.     */
    .auth-wrap {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    /* the brand panel becomes a short banner above the form */
    .auth-aside {
        order: -1;
        min-height: 0;
        padding: 26px 24px;
        text-align: center;
    }

        .auth-aside::before,
        .auth-aside::after {
            display: none;
        }

        .auth-aside h2 {
            font-size: 22px;
            margin-bottom: 0;
        }

        .auth-aside p,
        .auth-points,
        .auth-eyebrow {
            display: none;
        }

    .auth-main {
        padding: 32px 20px 44px;
    }
}

/*  Below 600px account-ui3.css splits the captcha row in two: the image
    and the refresh button on one line, the answer box full width under
    them. That is written for the wide account cards; on this narrow one
    it leaves half a row of empty space beside the image and stretches a
    3 digit box to the width of the password field. Keep the three cells
    on one line here and give the image a shorter track instead - the
    row then reads like every other field on the card. */
@media (max-width: 600px) {
    .auth-page .ac-captcha {
        grid-template-columns: minmax(0, 1fr) 176px 44px;
        grid-template-areas: none;
        max-width: none;
        gap: 8px;
    }

    .auth-page .ac-captcha .ac-captcha-cell,
    .auth-page .ac-captcha-img,
    .auth-page.ac-page button.ac-captcha-refresh {
        grid-area: auto;
    }

    .auth-page .ac-captcha-img {
        width: 100%;
        max-width: none;
    }
}

@media (max-width: 360px) {
    /* the image track gives way first: the answer box must stay usable */
    .auth-page .ac-captcha {
        grid-template-columns: minmax(0, 1fr) 128px 44px;
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .auth-title {
        font-size: 22px;
    }

    .auth-logo img {
        height: 38px;
    }
}

/* ------------------- globals normally in Site.css ------------------ */
.mpLoading {
    position: fixed;
    top: 0;
    padding: 5px 22px;
    border-radius: 0 0 10px 10px;
    background-color: var(--primary, #C1122F);
    color: #fff;
    font-size: 14px;
    z-index: 2000000000;
}

.swal2-container {
    z-index: 2147483647;
}