/* Slider Tabs Container */
.slider-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 24px;
    direction: rtl;
}

/* Individual Tab Button */
.slider-tab {
    background: #f5f5f5;
    border: none;
    border-radius: 6px 6px 0 0;
    padding: 12px 32px;
    font-size: 1.1rem;
    color: #333;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    outline: none;
}

.slider-tab.active {
    background: #1976d2;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.08);
}

/* Slider Content */
.slider-content {
    display: none;
    background: #fff;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    padding: 32px 24px;
    max-width: 400px;
    margin: 0 auto;
    direction: rtl;
}

.slider-content.active {
    display: block;
    animation: fadeIn 0.3s;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Forms */
.login-form,
#idf_form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}


/* IDF Image */
#idf_form img {
    margin: 16px 0;
    transition: box-shadow 0.2s;
}

#idf_form img:hover {
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.15);
}

/* Responsive */
@media (max-width: 500px) {
    .slider-content {
        padding: 18px 8px;
        max-width: 98vw;
    }

    .slider-tab {
        padding: 10px 12px;
        font-size: 1rem;
    }
}

.nav-tabs .nav-link.active:after {
    background-color: #f2f7ff !important;
    box-shadow: none !important;
}

#loginTab {
    position: relative;
}

#tab-underline {
    border-radius: 2px;
}

html * {
    font-size: 16px;
}

body {
    overflow: hidden;
}

/* Fit-to-screen login: cancel the global html{overflow-y:scroll} (app-custom.css)
   so there's no permanent empty scrollbar; scrolls only if the card is taller than the viewport. */
html {
    overflow-y: auto;
}

/* Login page header - dark navy base with a diagonal shine highlight */
.exit-pass-header {
    background: linear-gradient(140deg, #12235f 0%, #152b78 48%, #3b5fc7 84%, #152b78 100%);
    padding: 24px 22px 36px;
    border-radius: 24px 24px 0 0;
}
.exit-pass-header::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.15), rgba(59, 95, 199, 0.15));
}
.exit-pass-title {
    font-size: clamp(1.2rem, 2.5vw, 1.55rem);
    text-shadow: 0 2px 12px rgba(34, 62, 156, 0.5);
}
.exit-pass-card {
    animation: cardAppear .6s ease both;
    overflow: hidden;
    border-radius: 24px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
@keyframes cardAppear {
    from { opacity: 0; transform: translateY(30px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Login page refinements (moved from inline style in login.php) */
.exit-pass-body {
    padding: 22px 24px 24px;
}

.exit-pass-body br {
    display: none;
}

.exit-pass-header .lang-selector {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    z-index: 2;
    opacity: .75;
    transition: opacity .2s;
}

.exit-pass-header .lang-selector:hover {
    opacity: 1;
}

.nav-tabs {
    border: none;
    margin-bottom: 6px !important;
    flex-wrap: nowrap;
}

.nav-tabs .nav-link {
    border: none;
    color: #7b8fa6;
    font-weight: 500;
    padding: 6px 18px;
}

.nav-tabs .nav-link.active {
    color: var(--ink, #0b1624);
    font-weight: 700;
}

.nav-tabs .nav-link.active::after {
    box-shadow: none !important;
}

#tab-underline {
    background: linear-gradient(90deg, #18a76c, #1b8fd4) !important;
    height: 3px !important;
    border-radius: 3px;
}

.tab-pane.mt-4 {
    margin-top: 10px !important;
}

.exit-pass-body h2 {
    font-size: 1.18rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: #1a3a5c;
}

.gradiant_button.blue_torquoise_gradiant button {
    border-radius: 12px !important;
    font-weight: 700;
    padding: 12px 20px;
}

.exit-pass-body .btn-primary,
.exit-pass-body .btn-success {
    border-radius: 10px;
    font-weight: 600;
}

.exit-pass-body .form-control {
    border-radius: 8px;
}

#otp-form {
    margin-top: 6px;
}

#otp-form .otp-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a3a5c;
    margin-bottom: 10px;
}

#otp-form .otp_div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    direction: ltr;
    margin: 6px auto 0;
}

#otp-form .otp_div input[type="number"] {
    width: 52px;
    height: 58px;
    margin: 0;
    padding: 0;
    font-size: 1.45rem;
    font-weight: 700;
    text-align: center;
    border: 2px solid #d2dbe8;
    border-radius: 12px;
    background: #ffffff;
    color: #103d73;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    appearance: textfield;
    -webkit-appearance: textfield;
}

#otp-form .otp_div input[type="number"]:focus {
    border-color: #1b8fd4;
    box-shadow: 0 0 0 4px rgba(27, 143, 212, 0.16);
    transform: translateY(-1px);
    outline: none;
}

#otp-form .otp_div input::-webkit-outer-spin-button,
#otp-form .otp_div input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

#otp-form .btn-success {
    margin-top: 14px;
    font-size: 1rem;
    padding: 11px 16px;
}

.login-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
}

.login-links a {
    font-size: .96rem;
    color: var(--accent, #18a76c);
    text-decoration: none;
}

.login-links a:hover {
    text-decoration: underline;
}

.login-links a.fw-bold {
    font-size: .99rem;
}

.exit-pass-body hr {
    margin: 10px 0;
    opacity: .4;
}

.exit-pass-card {
    animation: cardAppear .5s ease both;
}

.edu-tooltip-btn {
    padding: .6em 1.5em !important;
}

@keyframes cardAppear {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (max-width: 800px) {
    .spinner_text {
        font-size: 30px !important;
    }
}

@media (max-width: 520px) {
    #otp-form .otp_div {
        gap: 6px;
    }

    #otp-form .otp_div input[type="number"] {
        width: 44px;
        height: 50px;
        font-size: 1.2rem;
        border-radius: 10px;
    }
}

/* Small phones (iPhone SE, Galaxy S series, etc.) */
@media (max-width: 400px) {
    html * {
        font-size: 14px;
    }

    .nav-tabs .nav-link {
        padding: 6px 10px;
        font-size: 0.92rem;
        white-space: nowrap;
    }

    .exit-pass-header {
        padding: 10px 12px 16px;
    }

    .exit-pass-title {
        font-size: 1.05rem;
    }

    .exit-pass-subtitle {
        font-size: 0.82rem;
    }

    .exit-pass-brand img {
        max-width: 100px;
    }

    .exit-pass-body {
        padding: 10px 10px 10px;
    }

    .exit-pass-body h2 {
        font-size: 1rem;
    }

    .edu-tooltip-btn {
        padding: .5em 1em !important;
        font-size: 0.88rem !important;
    }

    .edu-tooltip-btn img {
        height: 20px !important;
    }

    .edu-tooltip-btn .buttonText {
        font-size: 0.85rem;
    }

    .gradiant_button.blue_torquoise_gradiant button {
        padding: 10px 14px;
        font-size: 0.92rem !important;
    }

    .login-links a {
        font-size: 0.85rem;
    }

    #otp-form .otp_div {
        gap: 4px;
    }

    #otp-form .otp_div input[type="number"] {
        width: 38px;
        height: 44px;
        font-size: 1.1rem;
        border-radius: 8px;
    }
}

/* ============================================================
   Login screen (login.php) — one primary method, one alternative.
   A one-time code works for parents, students and teachers; the
   ministry's unified identity only for students and teachers, so
   the code form is the screen and the identity login is a quiet
   outline button under a labelled rule.

   Everything is lg- prefixed and the card header is scoped with
   .lg-head: this stylesheet is shared with l.php and
   external/digital_signature/sign_login.php, which carry
   .exit-pass-header and .login-form but none of the lg- classes.

   Height budget: the whole card lands at ~700px so the footer
   links stay inside a laptop viewport without scrolling.
   ============================================================ */

/* --- card header, tightened (login.php only) --------------- */
.lg-head {
    padding: 17px 22px 21px;
}

.lg-head .exit-pass-title {
    font-size: clamp(1.1rem, 2.2vw, 1.3rem);
}

.lg-head .exit-pass-subtitle {
    font-size: .82rem;
    margin-top: .35rem !important;
}

.lg-head .exit-pass-brand img {
    max-width: 104px;
    margin-top: 5px;
}

/* The card carries min-height: min(88vh, 700px) from certifications.css.
   Step 1 fills it; the shorter code step would otherwise leave a white gap
   under the content. Two auto margins split the slack above the step and
   above the rule, so the block sits centred and the links stay pinned down. */
.lg-body {
    display: flex;
    flex-direction: column;
}

.lg-body .lg-step:not(.d-none) {
    margin-top: auto;
}

.lg-body .lg-rule {
    margin-top: auto;
}

/* A one-screen card (phone_change.php — the cancel link): nothing below the step to pin down, so the
   card hugs its content instead of the 700px login height. Two classes, so it also beats the
   phone-size min-height certifications.css sets on .exit-pass-card. */
.exit-pass-card.lg-card--short {
    min-height: 0;
}

.lg-card--short .lg-body .lg-step:not(.d-none) {
    margin-top: 14px;   /* clear of the header's glow, like the login steps past step 1 */
}

/* --- the intro block --------------------------------------- */
.lg-intro {
    display: grid;
    justify-items: center;
    gap: 7px;
    text-align: center;
    margin-bottom: 18px;
}

.lg-intro__eyebrow {
    margin: 0;
    font-size: .68rem;
    letter-spacing: .17em;
    color: #1f7a5c;
}

.lg-intro__h {
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: -.025em;
    line-height: 1.15;
    color: #16224e;
}

.lg-intro__sub {
    margin: 0;
    font-size: .87rem;
    color: #5d6890;
}

.lg-sent-to {
    color: #16224e;
    direction: ltr;
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/* --- the code form ----------------------------------------- */
.lg-form {
    gap: 12px;
    text-align: start;
}

.lg-f {
    position: relative;
    display: grid;
    gap: 6px;
}

.lg-f .form-label {
    margin-bottom: 0;
    font-size: .8rem;
    color: #3d4c7c;
}

.lg-f .form-control {
    height: 46px;
    border-radius: 11px;
    border-color: #d7e0f2;
    /* the icon sits at the card's start — physical right — while the input
       itself is dir="ltr", so the clearance is a physical padding-right. */
    padding-right: 42px;
    font-variant-numeric: tabular-nums;
}

/* the system's own primary, straight from the tokens — --bs-primary is
   #183188 and --bs-primary-rgb is 67,94,190 (what .btn-primary paints).
   Border takes the deep value, the glow takes the lighter rgb. */
.lg-f .form-control:focus {
    border-color: var(--bs-primary, #183188);
    box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb, 67, 94, 190), .2);
}

.lg-f__ic {
    position: absolute;
    inset-inline-start: 13px;
    bottom: 14px;
    width: 18px;
    height: 18px;
    color: #a9b4cd;
    pointer-events: none;
}

.lg-submit {
    height: 46px;
    border-radius: 12px;
    box-shadow: 0 12px 22px -10px rgba(21, 115, 71, .45);
}

.lg-micro {
    margin: 8px 0 0;
    text-align: center;
    font-size: .77rem;
    line-height: 1.45;
    color: #6a769c;
}

.lg-underline {
    text-decoration: underline;
}

/* --- the alternative --------------------------------------- */
.lg-or {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    margin: 17px 0 13px;
    font-size: .71rem;
    letter-spacing: .13em;
    color: #667189;
}

.lg-or::before,
.lg-or::after {
    content: "";
    height: 1px;
    background: var(--bs-border-color, #e3eaf7);
}

.lg-ghost {
    width: 100%;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #cfdaf0;
    border-radius: 12px;
    background: var(--bs-white-bg, #fff);
    font-family: inherit;
    font-size: .92rem;
    color: #224597;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.lg-ghost:hover {
    border-color: #224597;
    box-shadow: 0 10px 20px -14px rgba(34, 69, 151, .6);
}

.lg-ghost:focus-visible {
    outline: 3px solid var(--bs-primary, #183188);
    outline-offset: 2px;
}

.lg-edu-logo {
    height: 21px;
    width: 21px;
    object-fit: contain;
}

.lg-edu-sep {
    width: 1px;
    height: 19px;
    background: #dde5f5;
}

/* --- footer ------------------------------------------------ */
.lg-rule {
    border: 0;
    border-top: 1px solid var(--bs-border-color, #dce7f1);
    margin: 16px 0 13px;
    opacity: 1;
}

.login-links--row {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
}

/* general-pages.css paints every <a> #3498db !important; the underline is
   forced by app-custom.css:2139, whose own opt-out is the .underline-none
   class carried in the markup. */
.login-links--row a {
    color: #3d4c7c !important;
    font-size: .82rem;
    border-bottom: 1px solid var(--bs-border-color, #dce7f1);
    padding-bottom: 1px;
}

.login-links--row a:hover {
    color: #152b78 !important;
    border-color: #152b78;
}

.login-links--row .lg-dot {
    color: #6a769c;
    opacity: .45;
}

/* --- the login self-repair (#lgFix, assets/js/login_fix.js) -------------
   Shown when the login found nothing: a code proves the phone, then a short
   form hands it to staff. The code and the plain fields carry no
   icon, so they drop the clearance .lg-f keeps for one — a physical
   padding-right, the same side as the rule they override. */
.lg-f .form-control.lf-code {
    padding-right: 12px;
    text-align: center;
    font-size: 1.3rem;
    letter-spacing: .35em;
}

.lg-f .lf-plain {
    height: 46px;
    border-radius: 11px;
    border-color: #d7e0f2;
    padding-right: 12px;
}

.lf-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: #3d4c7c;
    text-decoration: underline;
    cursor: pointer;
}

.lf-link:focus-visible {
    outline: 3px solid var(--bs-primary, #183188);
    outline-offset: 2px;
    border-radius: 4px;
}

/* "לא הגיע הקוד? שלחו בווצאפ" under a code: the link's hit area grows to ~44px without moving the
   lines around it. */
.lg-body .lf-wa {
    margin-top: 14px;
}

.lg-body .lf-wa ~ .lg-micro {
    margin-top: 12px;
}

.lf-wa .lf-link {
    white-space: nowrap;
    padding: 10px 4px;
    margin: -10px -4px;
}

.lf-wa .bi-whatsapp {
    color: #1a9e4b;
}

@media (max-width: 400px) {
    .lg-intro__h {
        font-size: 1.28rem;
    }

    .lg-intro__sub {
        font-size: .82rem;
    }

    .lg-ghost {
        font-size: .85rem;
    }

    .lg-or {
        gap: 10px;
        font-size: .67rem;
    }
}

/* ============================================================
   App-download modal (login.php #downloadAppModal) — ported to the
   download.php visual language.

   The dl-* rules in general-pages.css sit behind `body.download-page`,
   and that selector also kills .bubbles and repaints every <a>, so the
   class cannot be borrowed onto this page. These are the same values,
   re-scoped under lg-.

   Breakpoint note: the QR pane hides at 560px like download.php, NOT
   with .display-pc-only — that helper cuts at 1199px and would strip
   the codes off an ordinary laptop.
   ============================================================ */

.lg-dl {
    border: 1px solid #eaf0fb;
    border-radius: 22px;
    box-shadow: 0 40px 74px -52px rgba(21, 43, 120, .6);
    overflow: hidden;
}

.lg-dl__head {
    position: relative;
    justify-content: center;
    border-bottom: 0;
    padding: 26px 24px 0;
}

.lg-dl__close {
    position: absolute;
    top: 18px;
    inset-inline-end: 18px;
    margin: 0;
}

.lg-dl__title {
    font-size: clamp(1.25rem, 3.4vw, 1.6rem);
    letter-spacing: -.02em;
    color: #16224e;
    text-align: center;
}

/* the highlight is a background on the em itself, never a ::after —
   a negative z-index slides behind the modal surface */
.lg-dl__title em {
    font-style: normal;
    color: #224597;
    white-space: nowrap;
    background-image: linear-gradient(to top,
            transparent .04em,
            rgba(134, 205, 171, .45) .04em,
            rgba(134, 205, 171, .45) .4em,
            transparent .4em);
}

.lg-dl__body {
    padding: 18px 26px 28px;
    text-align: center;
}

.lg-dl__eyebrow {
    margin: 0 0 4px;
    font-size: .72rem;
    letter-spacing: .16em;
    color: #3fae83;
}

.lg-dl__sub {
    margin: 0 0 3px;
    font-size: 1.08rem;
    letter-spacing: -.02em;
    color: #16224e;
}

.lg-dl__note {
    margin: 0;
    font-size: .85rem;
    color: #6a769c;
}

.lg-qrs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
    max-width: 400px;
    margin: 18px auto 0;
}

.lg-qr {
    margin: 0;
    padding: 14px 12px 12px;
    background: var(--bs-white-bg, #fff);
    border: 1px solid #dee7f8;
    border-radius: 20px;
    box-shadow: 0 16px 34px -26px rgba(21, 43, 120, .5);
    display: grid;
    gap: 11px;
    justify-items: center;
    transition: transform .2s ease, border-color .2s ease;
}

.lg-qr:hover {
    transform: translateY(-3px);
    border-color: #224597;
}

.lg-qr__head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .92rem;
    color: #16224e;
}

.lg-qr__head img {
    width: 21px;
    height: 21px;
    flex: none;
}

.lg-qr__code {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    padding: 9px;
    background: #fff;
    border-radius: 12px;
    display: grid;
    place-items: center;
}

.lg-qr__code img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* the two scan-frame corner brackets */
.lg-qr__code::before,
.lg-qr__code::after {
    content: "";
    position: absolute;
    width: 17px;
    height: 17px;
    border: 2.5px solid #86cdab;
    border-radius: 5px;
}

.lg-qr__code::before {
    top: -1px;
    right: -1px;
    border-left: 0;
    border-bottom: 0;
}

.lg-qr__code::after {
    bottom: -1px;
    left: -1px;
    border-right: 0;
    border-top: 0;
}

.lg-qr__foot {
    margin: 0;
    font-size: .74rem;
    color: #6a769c;
    direction: ltr;
}

/* store badges */
.lg-dl__stores {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 22px;
}

.lg-store {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: 196px;
    padding: 11px 20px 11px 16px;
    border-radius: 14px;
    background: #16224e;
    color: #fff !important;
    box-shadow: 0 14px 26px -14px rgba(22, 34, 78, .45);
    transition: transform .2s ease, background .2s ease;
}

.lg-store:hover {
    transform: translateY(-3px);
    background: #0d1739;
    color: #fff !important;
}

.lg-store img {
    width: 30px;
    height: 30px;
    flex: none;
}

.lg-store small {
    display: block;
    font-size: .7rem;
    opacity: .72;
    line-height: 1.2;
}

.lg-store b {
    display: block;
    font-size: 1.02rem;
    letter-spacing: -.01em;
    line-height: 1.25;
    direction: ltr;
    text-align: start;
}

.lg-dl__skip {
    margin: 20px 0 0;
    padding-top: 15px;
    border-top: 1px solid #eef3fb;
}

.lg-dl__skip-btn {
    border: 0;
    background: none;
    padding: 0;
    font-family: inherit;
    font-size: .85rem;
    color: #6a769c;
    text-decoration: underline;
    text-decoration-color: #cdd8ee;
    text-underline-offset: 3px;
    cursor: pointer;
}

.lg-dl__skip-btn:hover {
    color: #152b78;
    text-decoration-color: #152b78;
}

/* a phone does not scan its own screen — same cut-off as download.php */
@media only screen and (max-width: 560px) {
    .lg-dl__scan {
        display: none;
    }

    .lg-dl__body {
        padding: 16px 18px 22px;
    }

    .lg-dl__stores {
        flex-direction: column;
        margin-top: 4px;
    }

    .lg-store {
        min-width: 0;
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   Type scale for the login card and the download modal.

   Two legacy rules in this same file fight every size set above:

     login.css:104   html * { font-size: 16px }
        de-inherits EVERY element that has no rule of its own, so a
        <span> inside a 13px label, an <em> inside a heading and the
        <span class="buttonText"> inside a button all snap back to
        16px. That is the "half the line is bigger" effect.

     login.css:197   .exit-pass-body h2 { font-size: 1.18rem }
        is (0,1,1) and beats a plain (0,1,0) class on the heading.

   So: hand every inline child its parent's size back, and restate the
   scale one specificity step higher. Scale, in rem on a 16px root:
   .70 eyebrow · .8125 label & footer link · .875 lede · .90 ghost
   .9375 field & primary button · 1.5 heading.
   ============================================================ */

.lg-body em,
.lg-body span,
.lg-body b,
.lg-body small,
.lg-body u,
.lg-dl em,
.lg-dl span,
.lg-dl b,
.lg-dl small {
    font-size: inherit;
}

.lg-body .lg-intro__eyebrow {
    font-size: .7rem;
}

.lg-body .lg-intro__h {
    font-size: 1.5rem;
}

.lg-body .lg-intro__sub {
    font-size: .875rem;
}

.lg-body .lg-f .form-label {
    font-size: .8125rem;
}

.lg-body .lg-f .form-control {
    font-size: .9375rem;
}

.lg-body .lg-submit {
    font-size: .9375rem;
}

.lg-body .lg-or {
    font-size: .72rem;
}

.lg-body .lg-ghost {
    font-size: .9rem;
}

.lg-body .lg-micro {
    font-size: .78rem;
}

.lg-body .login-links--row a {
    font-size: .8125rem;
}

/* <b> renders at 900 while everything around it sits at 700, so a bare
   <b> reads as a double emphasis. The phone number is emphasised with
   colour instead. */
.lg-body .lg-sent-to {
    font-weight: inherit;
    color: #16224e;
}

/* the same de-inheriting bites the modal's own inline parts */
.lg-dl .lg-store small {
    font-size: .7rem;
}

.lg-dl .lg-store b {
    font-size: 1.02rem;
}

.lg-dl .lg-qr__head span {
    font-size: inherit;
}

/* Two last de-inheriting holes found by measuring the rendered card:

   login.css:270  #otp-form .btn-success { font-size: 1rem }
      carries an id, so (1,1,0) beats the (0,2,0) scale rule above and
      the code step's button came out a size larger than step one's.

   .login-links has no size of its own, so the • separators between the
   footer links fell back to the html * 16px while the links sat at 13. */

#otp-form .lg-submit {
    font-size: .9375rem;
}

.login-links--row {
    font-size: .8125rem;
}

/* ============================================================
   Type scale, second pass.

   Measured against the page's own base of 16px (body computed):
   13px labels and 15px inputs read a size down from everything
   else on the site. The card now sits on the base instead of
   under it — fields and buttons at 16px, supporting text at 15.
   ============================================================ */

.lg-body .lg-intro__eyebrow {
    font-size: .75rem;
}

.lg-body .lg-intro__h {
    font-size: 1.6rem;
}

.lg-body .lg-intro__sub {
    font-size: .9375rem;
}

.lg-body .lg-f .form-label {
    font-size: .9375rem;
}

.lg-body .lg-f .form-control {
    font-size: 1rem;
}

.lg-body .lg-submit,
#otp-form .lg-submit {
    font-size: 1rem;
}

.lg-body .lg-or {
    font-size: .75rem;
}

.lg-body .lg-ghost {
    font-size: .9375rem;
}

.lg-body .lg-micro {
    font-size: .85rem;
}

.lg-body .login-links--row,
.lg-body .login-links--row a {
    font-size: .84rem;
}

/* the modal was a size down from the page for the same reason */
.lg-dl .lg-dl__eyebrow {
    font-size: .75rem;
}

.lg-dl .lg-dl__sub {
    font-size: 1.15rem;
}

.lg-dl .lg-dl__note {
    font-size: .9rem;
}

.lg-dl .lg-qr__head {
    font-size: .97rem;
}

.lg-dl .lg-qr__foot {
    font-size: .8rem;
}

.lg-dl .lg-store small {
    font-size: .75rem;
}

.lg-dl .lg-store b {
    font-size: 1.08rem;
}

.lg-dl .lg-dl__skip-btn {
    font-size: .9rem;
}

/* ============================================================
   Type scale, third pass — one full step up.
   Fields and primary buttons now sit ABOVE the 16px page base;
   supporting text sits on it. Control heights go 46 -> 50 so the
   larger text keeps its breathing room inside the box.
   ============================================================ */

.lg-body .lg-intro__eyebrow,
.lg-body .lg-or {
    font-size: .8rem;
}

.lg-body .lg-intro__h {
    font-size: 1.75rem;
}

.lg-body .lg-intro__sub,
.lg-body .lg-f .form-label,
.lg-body .lg-ghost {
    font-size: 1rem;
}

.lg-body .lg-f .form-control,
.lg-body .lg-submit,
#otp-form .lg-submit {
    font-size: 1.0625rem;
}

.lg-body .lg-micro,
.lg-body .login-links--row,
.lg-body .login-links--row a {
    font-size: .9rem;
}

.lg-body .lg-f .form-control,
.lg-body .lg-submit,
#otp-form .lg-submit,
.lg-body .lg-ghost {
    height: 50px;
}

.lg-f__ic {
    bottom: 16px;
}

.lg-dl .lg-dl__title {
    font-size: clamp(1.4rem, 3.6vw, 1.8rem);
}

.lg-dl .lg-dl__eyebrow,
.lg-dl .lg-store small {
    font-size: .8rem;
}

.lg-dl .lg-dl__sub {
    font-size: 1.25rem;
}

.lg-dl .lg-dl__note,
.lg-dl .lg-dl__skip-btn {
    font-size: .95rem;
}

.lg-dl .lg-qr__head {
    font-size: 1.02rem;
}

.lg-dl .lg-qr__foot {
    font-size: .85rem;
}

.lg-dl .lg-store b {
    font-size: 1.15rem;
}

/* Larger type costs height; buy some back from the gaps, not the content.
   Measured: 730px -> the number reported in the card-height check below. */
.lg-body {
    padding-top: 15px;
    padding-bottom: 15px;
}

.lg-body .lg-intro {
    margin-bottom: 15px;
}

.lg-body .lg-or {
    margin: 15px 0 11px;
}

.lg-body .lg-rule {
    margin: 14px 0 11px;
}

.lg-head {
    padding: 15px 22px 19px;
}

/* English: the login card pins its own direction (.slider-tabs, .slider-content), so the whole
   form stayed right-to-left even on a page whose <html> says ltr — and this is the first screen
   an English user ever sees. Released for ltr only: an html[dir="ltr"] selector cannot match for
   a Hebrew or Arabic viewer, so both rules above keep deciding there.
   The OTP digits (#otp-form .otp_div) and the phone line (.lg-sent-to) stay ltr in every
   language and are deliberately untouched. */
html[dir="ltr"] .slider-tabs,
html[dir="ltr"] .slider-content {
    direction: ltr;
}

/* ============================================================
   Past step 1 — the code, and the login self-repair (#lgFix).
   Roi, 06/10: "המסך לא נראה ממש טוב, הוא קורס". The card keeps step 1's
   700px (certifications.css, 80vh on a phone), and the later margin pass
   above pinned the rule, so every shorter step dropped to the bottom with a
   white hole over it. Once step 1 is hidden the card hugs what it shows.
   ============================================================ */
.exit-pass-card:has(#lgStep1.d-none) {
    min-height: 0;
}

.exit-pass-card:has(#lgStep1.d-none) .lg-body .lg-step:not(.d-none) {
    margin-top: 14px;
}

.exit-pass-card:has(#lgStep1.d-none) .lg-body .lg-rule {
    margin-top: 20px;
}

.lg-body .lg-intro__h {
    text-wrap: balance;
}

/* The code that came by message: one field (autofill fills it whole), six wide digits. */
.lg-body .lg-f .form-control.lf-code {
    height: 58px;
    padding: 0 12px;
    border-radius: 14px;
    font-size: 1.6rem;
    letter-spacing: .45em;
    text-indent: .45em;
    text-align: center;
    color: #16224e;
}

.lg-body .lg-f .form-control.lf-code::placeholder {
    color: #c3cbe0;
    letter-spacing: .5em;
}

/* "Which of the two?" — the two ways on as two cards: the picked one in navy, its words on the button. */
.lf-opts {
    display: grid;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.lf-opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid #d7e0f2;
    border-radius: 14px;
    background: #fff;
    text-align: start;
    cursor: pointer;
    transition: border-color 160ms cubic-bezier(.4, 0, .2, 1), background-color 160ms cubic-bezier(.4, 0, .2, 1), box-shadow 160ms cubic-bezier(.4, 0, .2, 1);
}

.lf-opt:hover {
    border-color: #a9b8e0;
}

.lf-opt:has(.lf-opt__radio:checked) {
    border-color: #152b78;
    background: rgba(21, 43, 120, .05);
    box-shadow: inset 0 0 0 1px #152b78;
}

.lf-opt:has(.lf-opt__radio:focus-visible) {
    box-shadow: inset 0 0 0 1px #152b78, 0 0 0 2px #fff, 0 0 0 4px #152b78;
}

/* the real radio stays in the page for the keyboard and screen readers; the card shows it */
.lf-opt__radio {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.lf-opt__ic {
    flex: none;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(21, 43, 120, .08);
    color: #152b78;
    transition: background-color 160ms cubic-bezier(.4, 0, .2, 1), color 160ms cubic-bezier(.4, 0, .2, 1);
}

.lg-body .lf-opt__ic .bi {
    font-size: 1.15rem;
}

.lf-opt:has(.lf-opt__radio:checked) .lf-opt__ic {
    background: #152b78;
    color: #fff;
}

.lf-opt__body {
    display: grid;
    gap: 3px;
    min-width: 0;
    flex: 1 1 auto;
}

.lg-body .lf-opt__title {
    font-size: 1rem;
    line-height: 1.3;
    color: #16224e;
}

.lg-body .lf-opt__sub {
    font-size: .875rem;
    line-height: 1.45;
    color: #5d6890;
    text-wrap: pretty;
}

/* the radio's own mark, at the card's end */
.lf-opt::after {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    border: 2px solid #c3cde6;
    border-radius: 50%;
    background: #fff;
    transition: border-color 160ms cubic-bezier(.4, 0, .2, 1), box-shadow 160ms cubic-bezier(.4, 0, .2, 1);
}

.lf-opt:has(.lf-opt__radio:checked)::after {
    border-color: #152b78;
    box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 10px #152b78;
}

.lf-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 10px;
}

.lf-links .lg-dot {
    color: #6a769c;
    opacity: .45;
}

@media (max-width: 400px) {
    .lf-opt {
        padding: 10px 12px;
        gap: 10px;
    }

    .lf-opt__ic {
        width: 34px;
        height: 34px;
        border-radius: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lf-opt,
    .lf-opt__ic,
    .lf-opt::after {
        transition: none;
    }
}

/* --- the app's quick sign-in: face / fingerprint / the phone's code (assets/js/app_quick_signin.js) ---------
   Shown only while the app says this phone is enrolled. Alone at first (html.pg-quick-only hides #lgStep1, marked
   data-pg-quick-hide); after "כניסה בדרך אחרת" or a cancel only its row (#pgQuickRow) stays, above the code login.
   busy = the phone is asking, ok = signed in (green) a moment before the site opens. */
html.pg-quick-only [data-pg-quick-hide] {
    display: none !important;
}
.qk-box {
    display: grid;
    justify-items: center;
    gap: 7px;
}
.qk-emb {
    position: relative;
    width: 104px;
    height: 104px;
    display: grid;
    place-items: center;
    margin-bottom: 6px;
}
.qk-emb::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(var(--bs-primary-rgb, 67, 94, 190), .25);
}
.qk-disc {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bs-primary, #183188);
    color: #fff;
    box-shadow: 0 12px 26px -14px rgba(24, 49, 136, .8);
    transition: background-color .3s ease;
}
.qk-ic {
    display: none;
    font-size: 40px;
    line-height: 1;
    /* the public theme boxes every .bi at 16px: a 40px glyph spilled out of it to one side of the disc */
    width: auto;
    height: auto;
}
.qk-ic::before {
    vertical-align: 0;
}
.qk-box[data-kind="face"] .qk-ic--face,
.qk-box[data-kind="finger"] .qk-ic--finger,
.qk-box[data-kind="bio"] .qk-ic--finger,
.qk-box[data-kind="code"] .qk-ic--code,
.qk-box[data-state="ok"] .qk-ic--ok {
    display: block;
}
.qk-box[data-state="ok"] .qk-ic:not(.qk-ic--ok) {
    display: none;
}
.qk-box[data-state="ok"] .qk-disc {
    background: #18a76c;
}
.qk-box[data-state="busy"] .qk-emb::before {
    animation: qk-pulse 1.4s ease-in-out infinite;
}
@keyframes qk-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.12); opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
    .qk-box[data-state="busy"] .qk-emb::before {
        animation: none;
    }
}
.qk-sub {
    margin-bottom: 12px;
}
.qk-btn {
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qk-l,
.qk-btn__busy,
.qk-btn__ok {
    display: none;
}
.qk-box[data-kind="face"] .qk-l--face,
.qk-box[data-kind="finger"] .qk-l--finger,
.qk-box[data-kind="code"] .qk-l--code,
.qk-box[data-kind="bio"] .qk-l--bio {
    display: inline;
}
.qk-box[data-state="busy"] .qk-btn__idle,
.qk-box[data-state="ok"] .qk-btn__idle {
    display: none;
}
.qk-box[data-state="busy"] .qk-btn__busy,
.qk-box[data-state="ok"] .qk-btn__ok {
    display: inline-flex;
    align-items: center;
    gap: 8px;   /* a gap, not me-2: the admin login loads the LTR theme build, where me-2 sits on the wrong side */
}
.qk-box[data-state="ok"] .qk-btn {
    background: #18a76c;   /* the shorthand: .btn-primary paints a gradient image */
    border-color: #18a76c;
}
.qk-btn[disabled] {
    opacity: 1;
    cursor: default;
}
.qk-other {
    gap: 6px;
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    background: none;
    border: 0;
    padding: 4px 6px;
    font-family: inherit;
    font-size: .92rem;
    color: #224597;
    text-decoration: underline;
    cursor: pointer;
}
.qk-other:focus-visible,
.qk-btn:focus-visible {
    outline: 3px solid var(--bs-primary, #183188);
    outline-offset: 2px;
}
.qk-box--compact {
    margin-bottom: 16px;
}
.qk-box--compact .qk-emb,
.qk-box--compact .qk-title,
.qk-box--compact .qk-sub,
.qk-box--compact .qk-other {
    display: none;
}

/* The app's emblem (פדגוגי's, drawn by app_quick_signin.js): rings round a disc, a scan frame, and in it a face, a
   fingerprint or a lock by what the phone asks for; a line sweeps it. busy = the rings and the line speed up, the
   frame breathes; ok = פגישונים's success animation (startSuccessFlow's): the disc gives way to
   the circled check, which pops into the פ mark (Roi 06/11). .qke--sm sits in the row (#pgQuickRow). */
.qke {
    position: relative;
    width: 176px;
    height: 176px;
    display: grid;
    place-items: center;
    margin-top: -14px;
    margin-bottom: -10px;
}
.qke__ring {
    position: absolute;
    inset: 28px;
    border-radius: 50%;
    border: 1.5px solid rgba(67, 94, 190, .38);
    animation: qke-ripple 3.6s cubic-bezier(.2, .6, .3, 1) infinite;
    transition: border-color .45s;
}
.qke__ring:nth-child(2) {
    animation-delay: 1.2s;
}
.qke__ring:nth-child(3) {
    animation-delay: 2.4s;
}
.qke__disc {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    display: grid;
    place-items: center;
    color: #fff;
    background: radial-gradient(80% 60% at 50% 14%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 62%), linear-gradient(150deg, #5876d8 0%, #2c47a8 46%, #183188 100%);
    box-shadow: 0 22px 38px -16px rgba(24, 49, 136, .7), inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 -12px 26px rgba(10, 20, 70, .35);
    transition: box-shadow .45s, opacity .2s, transform .2s;
}
.qke__disc > * {
    position: relative;
    z-index: 1;
}
.qke__frame {
    position: absolute;
    inset: 15px;
    opacity: .5;
    transition: opacity .3s;
}
.qke__glyph {
    width: 58px;
    height: 58px;
    transition: opacity .3s, transform .3s;
}
.qke__glyph path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: qke-draw 1.25s cubic-bezier(.6, 0, .2, 1) forwards;
}
.qke__glyph path:nth-child(2) { animation-delay: .06s; }
.qke__glyph path:nth-child(3) { animation-delay: .12s; }
.qke__glyph path:nth-child(4) { animation-delay: .18s; }
.qke__glyph path:nth-child(5) { animation-delay: .24s; }
.qke__glyph path:nth-child(6) { animation-delay: .3s; }
.qke__glyph path:nth-child(7) { animation-delay: .36s; }
.qke__glyph path:nth-child(8) { animation-delay: .42s; }
.qke__glyph path:nth-child(9) { animation-delay: .48s; }
.qke__mark {
    position: absolute;
    inset: 0;
    width: 120px;
    height: 120px;
    margin: auto;
    opacity: 0;
    pointer-events: none;
}
.qke__mark--logo {
    padding: 16px;
    box-sizing: border-box;
    border-radius: 50%;
    background: #e8f7f1;
}
.qke__scan {
    position: absolute;
    inset-inline: 16%;
    top: 24%;
    height: 2px;
    border-radius: 2px;
    z-index: 2;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
    box-shadow: 0 0 14px 3px rgba(160, 185, 255, .55);
    animation: qke-scan 3.4s ease-in-out infinite;
}
.qk-box[data-state="busy"] .qke__ring {
    animation-duration: 1.7s;
    border-color: rgba(67, 94, 190, .55);
}
.qk-box[data-state="busy"] .qke__scan {
    animation-duration: 1.15s;
}
.qk-box[data-state="busy"] .qke__frame {
    opacity: .9;
    animation: qke-frame .9s ease-in-out infinite alternate;
}
.qk-box[data-state="busy"] .qke__disc {
    box-shadow: 0 0 0 8px rgba(67, 94, 190, .12), 0 22px 42px -12px rgba(24, 49, 136, .85), inset 0 0 0 1px rgba(255, 255, 255, .25), inset 0 -12px 26px rgba(10, 20, 70, .35);
}
.qk-box[data-state="ok"] .qke__ring {
    border-color: rgba(121, 228, 180, .6);
}
.qk-box[data-state="ok"] .qke__disc {
    opacity: 0;
    transform: scale(.6);
}
.qk-box[data-state="ok"] .qke__glyph {
    opacity: 0;
    transform: scale(.6);
}
.qk-box[data-state="ok"] .qke__frame,
.qk-box[data-state="ok"] .qke__scan {
    opacity: 0;
    animation: none;
}
.qk-box[data-state="ok"] .qke__mark--circle {
    animation: qke-pop .35s cubic-bezier(.34, 1.56, .64, 1) forwards, qke-out .15s .85s forwards;
}
.qk-box[data-state="ok"] .qke__mark--logo {
    animation: qke-pop .35s .85s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
@keyframes qke-ripple {
    0% { transform: scale(.86); opacity: 0; }
    18% { opacity: 1; }
    100% { transform: scale(1.36); opacity: 0; }
}
@keyframes qke-scan {
    0%, 100% { top: 24%; opacity: 0; }
    12% { opacity: .9; }
    50% { top: 74%; opacity: .9; }
    62% { opacity: .9; }
    88% { opacity: 0; }
}
@keyframes qke-frame {
    to { transform: scale(.9); }
}
@keyframes qke-draw {
    to { stroke-dashoffset: 0; }
}
@keyframes qke-pop {
    from { opacity: 0; transform: scale(.4); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes qke-out {
    to { opacity: 0; }
}

/* After "כניסה בדרך אחרת" or a cancel: one row - the emblem, the words, a chevron - instead of the button. */
.qk-row {
    display: none;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px 14px;
    text-align: start;
    font-family: inherit;
    color: inherit;
    background: #fff;
    border: 2px solid #183188;
    border-radius: 20px;
    box-shadow: 0 14px 30px -22px rgba(24, 49, 136, .7);
    cursor: pointer;
    transition: transform .12s;
}
.qk-row:active {
    transform: scale(.98);
}
.qk-row:focus-visible {
    outline: 3px solid var(--bs-primary, #183188);
    outline-offset: 2px;
}
.qk-row[disabled] {
    cursor: default;
    opacity: 1;
    transform: none;
}
/* direct children only: the computer's passkey block (inc/passkey_signin.php) is a .qk-box with .qk-btn buttons too */
.qk-box--compact > .qke,
.qk-box--compact > .qk-btn {
    display: none;
}
.qk-box--compact > .qk-row {
    display: flex;
}
.qke--sm {
    width: 60px;
    height: 60px;
    margin: 0;
    flex: none;
}
.qke--sm .qke__ring {
    inset: 6px;
}
.qke--sm .qke__disc {
    width: 52px;
    height: 52px;
    box-shadow: 0 10px 18px -8px rgba(24, 49, 136, .7), inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.qke--sm .qke__glyph {
    width: 28px;
    height: 28px;
}
.qke--sm .qke__mark {
    width: 52px;
    height: 52px;
}
.qke--sm .qke__mark--logo {
    padding: 7px;
}
.qke--sm .qke__frame {
    inset: 7px;
}
.qke--sm .qke__scan {
    display: none;
}
.qk-row__tx {
    flex: 1;
    min-width: 0;
}
.qk-row__tx b {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: #1b2559;
}
.qk-row__idle,
.qk-row__busy,
.qk-row__ok {
    font-size: .85rem;
    color: #5b6b85;
}
.qk-row__busy,
.qk-row__ok,
.qk-box[data-state="busy"] .qk-row__idle,
.qk-box[data-state="ok"] .qk-row__idle {
    display: none;
}
.qk-box[data-state="busy"] .qk-row__busy,
.qk-box[data-state="ok"] .qk-row__ok {
    display: inline;
}
.qk-row__go {
    flex: none;
    color: #183188;
    font-size: 1.25rem;
    line-height: 1;
    /* the public theme boxes every .bi at 16px */
    width: auto;
    height: auto;
}
.qk-row__go::before {
    vertical-align: 0;
}
html[dir="ltr"] .qk-row__go {
    transform: scaleX(-1);
}
@media (prefers-reduced-motion: reduce) {
    .qke__ring,
    .qke__scan {
        display: none;
    }
    .qke__glyph path {
        animation: none;
        stroke-dashoffset: 0;
    }
    .qk-box[data-state="busy"] .qke__frame {
        animation-duration: 2s;
    }
    .qk-box[data-state="ok"] .qke__mark--circle {
        animation: none;
    }
    .qk-box[data-state="ok"] .qke__mark--logo {
        animation: none;
        opacity: 1;
    }
}

/* --- a computer's quick sign-in: Windows Hello / Touch ID (inc/passkey_signin.php, assets/js/passkey_signin.js) ---
   #pgPasskey: a button for each person this browser holds a passkey for; alone at first like the app's block
   (html.pg-pk-only hides #lgStep1, marked data-pg-quick-hide). #pgPasskeyOffer: right after a code login, alone in
   the card until the person answers. busy / ok on the person's row (or the offer) switch its button's words. */
html.pg-pk-only [data-pg-quick-hide] {
    display: none !important;
}
.pk-people {
    display: grid;
    gap: 14px;
    width: 100%;
}
.pk-person {
    display: grid;
    gap: 6px;
    justify-items: center;
}
.pk-btn__idle,
.pk-btn__busy,
.pk-btn__ok {
    align-items: center;
    gap: 8px;
}
.pk-btn__idle {
    display: inline-flex;
}
.pk-btn__busy,
.pk-btn__ok {
    display: none;
}
.pk-person[data-state="busy"] .pk-btn__idle,
.pk-person[data-state="ok"] .pk-btn__idle,
.pk-offer[data-state="busy"] .pk-btn__idle {
    display: none;
}
.pk-person[data-state="busy"] .pk-btn__busy,
.pk-person[data-state="ok"] .pk-btn__ok,
.pk-offer[data-state="busy"] .pk-btn__busy {
    display: inline-flex;
}
.pk-who {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 10px;
    font-size: .88rem;
    color: #607080;
}
.pk-remove {
    background: none;
    border: 0;
    padding: 2px 4px;
    font-family: inherit;
    font-size: inherit;
    color: #224597;
    text-decoration: underline;
    cursor: pointer;
}
.pk-remove:focus-visible {
    outline: 3px solid var(--bs-primary, #183188);
    outline-offset: 2px;
}
.pk-err {
    width: 100%;
    margin: 4px 0 0;
}
.pk-offer__ask,
.pk-offer__done {
    display: grid;
    gap: 7px;
    justify-items: center;
    width: 100%;
}
.pk-offer__done,
.pk-offer[data-state="ok"] .pk-offer__ask {
    display: none;
}
.pk-offer[data-state="ok"] .pk-offer__done {
    display: grid;
}
.pk-warn {
    margin: 0 0 12px;
    padding: 10px 14px;
    border-radius: 12px;
    background: #fff8e6;
    border: 1px solid #f6d58e;
    color: #6e4a00;
    font-size: .88rem;
    text-align: start;
}

/* ============================================================
   PG-811 — the login page, redone (login.php only: everything here
   hangs on .lg-page, which phone_change.php and shifts/end_confirm.php,
   the other users of the lg- classes, do not carry).

   Roi: "מרגיש מיושן ועמוס". Six lines of headings stood over the
   fields; now the logo and one line sit on a navy band of the page and
   the card holds only the fields. The links moved under the card, where
   the floating buttons (chat, accessibility, language) cannot cover
   them, and the toasts open at the top.
   ============================================================ */
.lg-page {
    --lg-ink: #16224e;
    --lg-label: #2b3a67;
    --lg-muted: #5d6890; /* 5.4:1 on white; #6a769c was 4.48 */
    --lg-line: #dfe6f3;
    --lg-field: #f6f8fd;
    --lg-surface: var(--bs-white-bg, #fff);
    --lg-accent: #2643a8;
    --lg-link: #55618a;
}

html[data-bs-theme=dark] .lg-page {
    --lg-ink: #e7ecf5;
    --lg-label: #c3cbe3;
    --lg-muted: #94a3b8;
    --lg-line: #35354f;
    --lg-field: #171726;
    --lg-surface: #1e1e2d;
    --lg-accent: #8ea2ff;
    --lg-link: #aab4d4;
}

/* the page: a navy band with a curved edge behind the logo, a calm base under the card.
   On the body, so the desktop bubbles (z-index -1) still float over it. */
body:has(.lg-page) {
    background:
        radial-gradient(closest-side, rgba(255, 255, 255, .13), transparent) top center / min(720px, 100%) 300px no-repeat,
        radial-gradient(ellipse 125% 100% at 50% 0%, #2a48b0 0%, #152b78 52%, #0f205e 99.4%, transparent 100%) top center / 100% clamp(300px, 46vh, 430px) no-repeat,
        #eef2fa;
}

html[data-bs-theme=dark] body:has(.lg-page) {
    background:
        radial-gradient(closest-side, rgba(255, 255, 255, .08), transparent) top center / min(720px, 100%) 300px no-repeat,
        radial-gradient(ellipse 125% 100% at 50% 0%, #1d3488 0%, #12215e 52%, #0b163f 99.4%, transparent 100%) top center / 100% clamp(300px, 46vh, 430px) no-repeat,
        #131622;
}

/* anchored to the top, not centred: the shorter code step must not drop the logo down the page.
   !important: certifications.css sets this padding !important up to 768px. */
.exit-pass-page.lg-page {
    flex-direction: column;
    justify-content: flex-start;
    padding: clamp(40px, 10vh, 110px) 16px 40px !important;
}

.lg-top {
    display: grid;
    justify-items: center;
    gap: 12px;
    margin-bottom: 26px;
    text-align: center;
}

/* holds only the language button, which inc/multi_language.php pins to a corner */
.lg-top > .lang-selector {
    position: absolute;
}

.lg-top__logo {
    width: 196px;
    height: auto;
}

/* !important: general-pages.css sets every h1 to 24px (20px under 800px) !important */
.lg-page .lg-top__title {
    margin: 0;
    font-size: 1.375rem !important;
    line-height: 1.4;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .8);
    --pg-dark-ink: rgba(255, 255, 255, .8);
}

.lg-page .exit-pass-card.lg-card {
    max-width: 500px;
    min-height: 0;
    border-radius: 28px;
    background: var(--lg-surface);
    box-shadow: 0 1px 2px rgba(15, 32, 94, .06), 0 28px 56px -28px rgba(15, 32, 94, .5);
}

.lg-page .lg-body {
    padding: 40px 40px 34px;
    background: var(--lg-surface);
    gap: 0;
}

.lg-page .lg-body .lg-step:not(.d-none) {
    margin-top: 0;
}

/* --- fields --- */
.lg-page .lg-form {
    display: grid;
    gap: 20px;
}

.lg-page .lg-f {
    gap: 8px;
}

.lg-page .lg-body .lg-f .form-label {
    font-size: .9375rem;
    color: var(--lg-label);
}

.lg-page .lg-body .lg-f .form-control,
.lg-page .lg-body .lg-f .form-select {
    border-radius: 14px;
    border: 1.5px solid var(--lg-line);
    background-color: var(--lg-field);
    color: var(--lg-ink);
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.lg-page .lg-body .lg-f .form-control:not(.lf-code),
.lg-page .lg-body .lg-f .form-select {
    height: 58px;
    font-size: 1.125rem;
}

/* only a field with an icon keeps room for it; the input is dir="ltr", so the side is physical */
.lg-page .lg-body .lg-f .lg-f__ic ~ .form-control {
    padding-right: 46px;
}

html[dir="ltr"] .lg-page .lg-body .lg-f .lg-f__ic ~ .form-control {
    padding-right: 14px;
    padding-left: 46px;
}

/* the shared focus ring of general-pages.css is for buttons and links; a field shows its own */
.lg-page .lg-body .lg-f .form-control:focus,
.lg-page .lg-body .lg-f .form-control:focus-visible,
.lg-page .lg-body .lg-f .form-select:focus,
.lg-page .lg-body .lg-f .form-select:focus-visible {
    background-color: var(--lg-surface);
    border-color: var(--lg-accent);
    outline: 0 !important;
    box-shadow: 0 0 0 4px rgba(38, 67, 168, .18) !important;
}

.lg-page .lg-f__ic {
    inset-inline-start: 16px;
    bottom: 20px;
    width: 19px;
    height: 19px;
    color: #8c9ac0;
}

.lg-page .lg-body .lg-submit,
.lg-page #otp-form .lg-submit {
    height: 58px;
    border-radius: 14px;
    font-size: 1.125rem;
    box-shadow: 0 16px 26px -16px rgba(21, 115, 71, .7);
}

.lg-page .lg-body .lg-form .lg-submit {
    margin-top: 6px;
}

/* --- the ministry's login: "או" over it, who it is for inside it; a filled navy button, the band's
   navy, so it stands out as the way in for teachers and students (Roi: "שיהיה קצת יותר בולט") --- */
.lg-page .lg-body .lg-or {
    margin: 22px 0 16px;
    gap: 14px;
    font-size: .8125rem;
    letter-spacing: 0;
    color: var(--lg-muted);
}

.lg-page .lg-or::before,
.lg-page .lg-or::after {
    background: var(--lg-line);
}

.lg-page .lg-body .lg-ghost {
    height: auto;
    min-height: 66px;
    padding: 10px 18px;
    gap: 14px;
    border: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, #2a48b0 0%, #152b78 100%);
    box-shadow: 0 16px 26px -16px rgba(21, 43, 120, .8);
    transition: transform .2s ease, box-shadow .2s ease;
}

.lg-page .lg-body .lg-ghost:hover {
    transform: translateY(-1px);
    box-shadow: 0 20px 30px -16px rgba(21, 43, 120, .85);
}

/* the owl on a white disc, which also carries it on the navy */
.lg-page .lg-edu-logo {
    width: 42px;
    height: 42px;
    padding: 6px;
    border-radius: 50%;
    background: #fff;
    flex-shrink: 0;
}

.lg-page .lg-edu-sep {
    display: none;
}

/* the English name of the button is long: it wraps inside the button instead of leaving it */
.lg-ghost__tx {
    display: grid;
    gap: 3px;
    min-width: 0;
    line-height: 1.2;
    text-align: start;
    white-space: normal;
}

.lg-page .lg-body .lg-ghost .buttonText {
    font-size: 1.0625rem;
    color: #fff;
    --pg-dark-ink: #fff;
}

.lg-page .lg-body .lg-ghost .lg-ghost__sub {
    font-size: .8125rem;
    color: rgba(255, 255, 255, .8);
    --pg-dark-ink: rgba(255, 255, 255, .8);
}

/* --- the code step --- */
.lg-page .lg-body .lg-intro {
    gap: 6px;
    margin-bottom: 22px;
}

.lg-page .lg-body .lg-intro__h {
    font-size: 1.5rem;
    color: var(--lg-ink);
}

.lg-page .lg-body .lg-intro__sub {
    font-size: .9375rem;
    color: var(--lg-muted);
}

.lg-page .lg-body .lg-sent-to {
    color: var(--lg-ink);
}

.lg-page #otp-form .otp_div {
    gap: 8px;
    margin: 0 auto;
}

/* the width stays app-custom.css's (52px, 44px under 700px, both !important) */
.lg-page #otp-form .otp_div input[type="number"] {
    height: 60px;
    border-radius: 14px;
    border: 1.5px solid var(--lg-line);
    background: var(--lg-field);
    color: var(--lg-ink);
    font-size: 1.5rem;
}

.lg-page #otp-form .otp_div input[type="number"]:focus,
.lg-page #otp-form .otp_div input[type="number"]:focus-visible {
    background: var(--lg-surface);
    border-color: var(--lg-accent);
    outline: 0 !important;
    box-shadow: 0 0 0 4px rgba(38, 67, 168, .18) !important;
    transform: none;
}

/* on a computer the boxes grow with the card (app-custom.css sets their width !important) */
@media (min-width: 576px) {
    .lg-page #otp-form .otp_div {
        gap: 10px;
    }

    .lg-page #otp-form .otp_div input[type="number"] {
        width: 56px !important;
        max-width: 56px !important;
        height: 66px;
        font-size: 1.625rem;
    }
}

/* !important: app-custom.css gives every .btn margin-top: 5px !important under 1199px */
.lg-page #otp-form .lg-submit {
    margin-top: 22px !important;
}

/* The code's modal (#lgCodeModal) plays the shared success animation (app-custom.css .sa-*), which has no
   reduced-motion rule of its own: here the same frames show, nothing turns, pops or slides. Scoped to this
   modal; the shared component is left as it is. */
@media (prefers-reduced-motion: reduce) {
    #lgCodeModal .sa-icon.sa-spinning,
    #lgCodeModal .sa-icon.sa-pop {
        animation: none;
        opacity: 1;
    }

    #lgCodeModal .sa-reveal.sa-visible {
        animation: none;
        opacity: 1;
    }
}

.lg-page .lg-body .lg-micro {
    margin-top: 16px;
    font-size: .84rem;
    color: var(--lg-muted);
    text-wrap: balance;
}

/* --- the links, under the card: one line on a computer, no dots to dangle at a wrap --- */
.lg-links {
    width: 100%;
    max-width: 680px;
    margin-top: 22px;
}

.lg-page .login-links--row {
    margin: 0;
    gap: 8px 22px;
}

.lg-page .login-links--row a {
    font-size: .8125rem;
    color: var(--lg-link) !important;
    border-bottom: 0;
    padding-bottom: 0;
}

.lg-page .login-links--row a:hover {
    color: var(--lg-ink) !important;
    text-decoration: underline !important;
}

/* --- the corners: toasts at the top (bottom-left sat on the chat button) --- */
body:has(.lg-page) #toastContainer {
    top: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    right: 0 !important;
    margin: 12px auto !important;
    padding: 0 16px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@media (max-width: 575.98px) {
    body:has(.lg-page),
    html[data-bs-theme=dark] body:has(.lg-page) {
        background-size: 100% 240px, 100% 300px, auto;
    }

    /* the bottom room keeps the last link clear of the floating buttons once scrolled down */
    .exit-pass-page.lg-page {
        padding: calc(env(safe-area-inset-top, 0px) + 38px) 16px calc(env(safe-area-inset-bottom, 0px) + 92px) !important;
    }

    .lg-top {
        gap: 10px;
        margin-bottom: 24px;
    }

    .lg-top__logo {
        width: 156px;
    }

    .lg-page .lg-top__title {
        font-size: 1.125rem !important;
    }

    .lg-page .exit-pass-card.lg-card {
        max-width: 100%;
    }

    .lg-page .lg-body {
        padding: 30px 20px 26px;
    }

    .lg-page #otp-form .otp_div {
        gap: 6px;
    }

    .lg-page #otp-form .otp_div input[type="number"] {
        height: 56px;
    }
}

/* ============================================================
   PG-830 — the quick sign-in, brought into PG-811's page
   (#pgQuick: the app's Face ID / fingerprint / phone code;
   #pgPasskey and #pgPasskeyOffer: a computer's Windows Hello /
   Touch ID). Only under .lg-page; M/loginM.php has its own CSS.
   ============================================================ */
.lg-page {
    --qk-row-line: rgba(38, 67, 168, .5);
    --qk-warn-bg: #fff8e6;
    --qk-warn-line: #f6d58e;
    --qk-warn-ink: #6e4a00;
}

html[data-bs-theme=dark] .lg-page {
    --qk-row-line: rgba(142, 162, 255, .45);
    --qk-warn-bg: rgba(245, 158, 11, .1);
    --qk-warn-line: rgba(251, 191, 36, .32);
    --qk-warn-ink: #fcd34d;
}

/* the success frames wait for ok: the dark build fades every img to .8 (app-dark-custom.css), over their 0 */
.lg-page .qk-box .qke__mark {
    opacity: 0;
}

/* --- the quick sign-in's button: the height, corner and navy of PG-811's ministry button --- */
html .lg-page .qk-box .qk-btn,
html .lg-page .qk-box .qk-btn:hover,
html .lg-page .qk-box .qk-btn:focus,
html .lg-page .qk-box .qk-btn:active {
    height: 58px;
    padding: 0 18px;
    border: 0;
    border-radius: 14px;
    font-size: 1.125rem;
    color: #fff;
    --pg-dark-ink: #fff;
    background: linear-gradient(135deg, #2a48b0 0%, #152b78 100%);
    box-shadow: 0 16px 26px -16px rgba(21, 43, 120, .8);
}

/* the lift only on the navy: not on the compact outlined row, nor on the green of ok */
html .lg-page .qk-box:not(.qk-box--compact):not([data-state="ok"]) .qk-btn:hover:not([disabled]) {
    transform: translateY(-1px);
    box-shadow: 0 20px 30px -16px rgba(21, 43, 120, .85);
}

/* the dark build fades every .btn to .8; the navy stands as the ministry button does */
html[data-bs-theme=dark] .lg-page .qk-box .qk-btn {
    opacity: 1;
}

.lg-page .qk-box .qk-btn .bi {
    font-size: 1.25rem;
    line-height: 1;
    width: auto;
    height: auto;
}

.lg-page .qk-box .qk-btn .bi::before {
    vertical-align: 0;
}

.lg-page .pk-btn__idle,
.lg-page .pk-btn__busy,
.lg-page .pk-btn__ok {
    gap: 10px;
}

/* the app's emblem: the dark build greys every text colour, and its face / finger / lock are drawn in currentColor */
.lg-page .qke__disc {
    --pg-dark-ink: #fff;
}

/* --- the computer's emblem: the disc of the app's (.qke__disc), a ring round it --- */
.lg-page .qk-emb {
    width: 128px;
    height: 128px;
    margin-bottom: 2px;
}

.lg-page .qk-emb::before {
    inset: 6px;
    border: 1.5px solid rgba(67, 94, 190, .32);
}

.lg-page .qk-emb::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(67, 94, 190, .14);
}

.lg-page .qk-disc {
    position: relative;
    width: 100px;
    height: 100px;
    color: #fff;
    --pg-dark-ink: #fff;
    background: radial-gradient(80% 60% at 50% 14%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 62%), linear-gradient(150deg, #5876d8 0%, #2c47a8 46%, #183188 100%);
    box-shadow: 0 22px 38px -16px rgba(24, 49, 136, .7), inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 -12px 26px rgba(10, 20, 70, .35);
}

.lg-page .qk-ic {
    font-size: 46px;
}

/* ok: פגישונים's success frames, as the code's modal a moment before and the app's emblem -
   the circled check, which pops into the פ mark */
.lg-page .qk-box[data-state="ok"] .qk-disc {
    background: transparent;
    box-shadow: none;
}

.lg-page .qk-box[data-state="ok"] .qk-emb::before {
    border-color: rgba(121, 228, 180, .6);
}

.lg-page .qk-box[data-state="ok"] .qk-ic {
    display: none;
}

.lg-page .qk-box[data-state="ok"] .qk-disc::before,
.lg-page .qk-box[data-state="ok"] .qk-disc::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    opacity: 0;
}

.lg-page .qk-box[data-state="ok"] .qk-disc::before {
    background: url("/assets/compiled/images/logo_circle_check.svg") center / contain no-repeat;
    animation: qke-pop .35s cubic-bezier(.34, 1.56, .64, 1) forwards, qke-out .15s .85s forwards;
}

.lg-page .qk-box[data-state="ok"] .qk-disc::after {
    background: #e8f7f1 url("/assets/compiled/images/logo_p_check.svg") center / 78% no-repeat;
    animation: qke-pop .35s .85s cubic-bezier(.34, 1.56, .64, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
    .lg-page .qk-box[data-state="ok"] .qk-disc::before {
        animation: none;
    }

    .lg-page .qk-box[data-state="ok"] .qk-disc::after {
        animation: none;
        opacity: 1;
    }

    /* the app's פ mark shows still, as before: the 0 above came after the older reduced-motion rule */
    .lg-page .qk-box[data-state="ok"] .qke__mark--logo {
        opacity: 1;
    }
}

/* --- the words round it: the page's ink, muted and accent, in both themes --- */
.lg-page .qk-box .qk-sub {
    margin-bottom: 14px;
}

.lg-page .qk-other,
.lg-page .pk-remove {
    color: var(--lg-accent);
    --pg-dark-ink: var(--lg-accent);
    text-decoration: none;
}

.lg-page .qk-other:hover,
.lg-page .pk-remove:hover {
    text-decoration: underline;
}

.lg-page .qk-other {
    font-size: .9375rem;
}

.lg-page .pk-who {
    color: var(--lg-muted);
    --pg-dark-ink: var(--lg-muted);
}

.lg-page .pk-who__name {
    color: var(--lg-label);
    --pg-dark-ink: var(--lg-label);
}

.lg-page .pk-warn {
    border-radius: 14px;
    background: var(--qk-warn-bg);
    border-color: var(--qk-warn-line);
    color: var(--qk-warn-ink);
    --pg-dark-ink: var(--qk-warn-ink);
}

/* --- after "כניסה בדרך אחרת" (compact): the quick way stays above the code login as one quiet row, a line under it --- */
.lg-page .qk-box--compact {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--lg-line);
}

/* the app's row (#pgQuickRow) on the page's surface, the field's corner */
.lg-page .qk-row {
    border: 1.5px solid var(--qk-row-line);
    border-radius: 14px;
    background: var(--lg-surface);
    box-shadow: 0 16px 26px -20px rgba(21, 43, 120, .55);
}

.lg-page .qk-row__tx b {
    color: var(--lg-ink);
    --pg-dark-ink: var(--lg-ink);
}

.lg-page .qk-row__idle,
.lg-page .qk-row__busy,
.lg-page .qk-row__ok {
    color: var(--lg-muted);
    --pg-dark-ink: var(--lg-muted);
}

.lg-page .qk-row__go {
    color: var(--lg-accent);
    --pg-dark-ink: var(--lg-accent);
}

/* a computer's person, compact: the same quiet row as the app's - an outlined button; the filled navy stays the ministry button's */
html .lg-page .qk-box--compact .pk-go,
html .lg-page .qk-box--compact .pk-go:hover,
html .lg-page .qk-box--compact .pk-go:focus,
html .lg-page .qk-box--compact .pk-go:active {
    background: var(--lg-surface);
    color: var(--lg-ink);
    --pg-dark-ink: var(--lg-ink);
    border: 1.5px solid var(--qk-row-line);
    box-shadow: 0 16px 26px -20px rgba(21, 43, 120, .55);
}

html .lg-page .qk-box--compact .pk-go .bi {
    color: var(--lg-accent);
    --pg-dark-ink: var(--lg-accent);
}

/* ok: green, as before - after the compact row's colours */
html .lg-page .qk-box[data-state="ok"] .qk-btn {
    color: #fff;
    --pg-dark-ink: #fff;
    background: #18a76c;
    border-color: #18a76c;
    box-shadow: 0 16px 26px -16px rgba(21, 115, 71, .7);
}

html .lg-page .qk-box[data-state="ok"] .qk-btn .bi {
    color: #fff;
    --pg-dark-ink: #fff;
}