/* =====================================================================
   Identity (login) + OTP screens.

   Ported from the Figma handoff in "Onboarding flow design":
     - src/App.tsx -> WebIdentityPage  (login card, 948px, form + onboarding)
     - src/App.tsx -> WebOtpPage       (OTP card, 560px)

   Scoped to #pnlIdentity / #pnlOtp so the Personal / Work / Attachment
   steps keep their existing design.
   ===================================================================== */

:root {
    --ob-ink: #020b19;
    --ob-muted: #4b5565;
    --ob-orange: #ff7701;
    --ob-navy: #081f70;
    --ob-chip: #f0f4f8;
    --ob-line: #c7c8cc;
    --ob-err: #fb2424;
    --ob-err-otp: #e5484d;
    --ob-field-border: rgba(0, 0, 0, 0.27);
    --ob-radius-card: 21px;
    --ob-font-ar: 'Baloo Bhaijaan 2', 'Cairo', sans-serif;
    --ob-font-en: 'Ping LCG', 'Hanken Grotesk', 'Roboto', sans-serif;
}

/* ---------------------------------------------------------------------
   Shell: both screens are pre-steps, so the tracker sidebar collapses
   and the form container becomes a full-width canvas.
   ------------------------------------------------------------------ */
.main-grid:has(#pnlIdentity.identity-screen-active),
.main-grid:has(#pnlOtp.otp-screen-active) {
    display: flex !important;
    max-width: none !important;
}

.main-grid:has(#pnlIdentity.identity-screen-active) > .tracker-sidebar,
.main-grid:has(#pnlOtp.otp-screen-active) > .tracker-sidebar {
    display: none !important;
}

.main-grid:has(#pnlIdentity.identity-screen-active) > .form-panel-container,
.main-grid:has(#pnlOtp.otp-screen-active) > .form-panel-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Header: white bar, logo on one side, language pill on the other. The bar is
   pulled out to the viewport edges - .iframe-container caps itself at 1440px,
   which would otherwise leave the page background showing beside it. */
.iframe-container:has(#pnlIdentity.identity-screen-active),
.iframe-container:has(#pnlOtp.otp-screen-active) {
    max-width: none !important;
}

.iframe-container:has(#pnlIdentity.identity-screen-active) .top-header,
.iframe-container:has(#pnlOtp.otp-screen-active) .top-header {
    min-height: 72px;
    height: 72px;
    padding: 0 clamp(24px, 7vw, 120px) !important;
    background: #fff !important;
    box-shadow: none !important;
    border-bottom: 1px solid #edf0f3;
}

/* Desktop: the card is centred in the page, as in the handoff's
   `main flex flex-1 items-center justify-center`.

   .iframe-container's min-height:100vh is dropped here on purpose. Inside an
   iframe, 100vh is the height this page just reported to its parent, so
   centring against it would feed the reported height back into the layout.
   A fixed band keeps the centring stable. */
@media (min-width: 992px) {
    .iframe-container:has(#pnlIdentity.identity-screen-active),
    .iframe-container:has(#pnlOtp.otp-screen-active) {
        min-height: 0;
    }

    /* Match the header content edges to the centred 948px Identity card.
       The 64px minimum mirrors .main-grid while the card is viewport-limited. */
    .iframe-container:has(#pnlIdentity.identity-screen-active) .top-header {
        padding-inline: max(64px, calc((85% - 948px) / 2)) !important;
    }

    .main-grid:has(#pnlIdentity.identity-screen-active),
    .main-grid:has(#pnlOtp.otp-screen-active) {
        align-items: center;
        min-height: 700px;
    }
}

/* Identity / OTP keep a compact logo slot in the header. */
.brand-logo-ob {
    display: none;
}

.iframe-container:has(#pnlIdentity.identity-screen-active) .top-header > .brand-logo,
.iframe-container:has(#pnlOtp.otp-screen-active) .top-header > .brand-logo {
    display: none !important;
}

.iframe-container:has(#pnlIdentity.identity-screen-active) .brand-logo-ob,
.iframe-container:has(#pnlOtp.otp-screen-active) .brand-logo-ob {
    --ob-logo-w: 70px;
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: var(--ob-logo-w);
    height: calc(var(--ob-logo-w) * 0.5176); /* 33.164 / 64.075 */
    overflow: hidden;
}

/* Center the PNG's visible mark; its transparent padding stays outside the slot. */
.brand-logo-ob .brand-logo {
    position: absolute;
    display: block;
    width: auto;
    height: calc(var(--ob-logo-w) * 1.4);
    max-width: none;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* The handoff header is just the logo and the language switch, over a flat
   canvas - no tagline and no decorative wave. */
.iframe-container:has(#pnlIdentity.identity-screen-active) .header-tagline,
.iframe-container:has(#pnlIdentity.identity-screen-active) .header-tagline-mobile,
.iframe-container:has(#pnlIdentity.identity-screen-active) .bg-svg-bottom,
.iframe-container:has(#pnlOtp.otp-screen-active) .header-tagline,
.iframe-container:has(#pnlOtp.otp-screen-active) .header-tagline-mobile,
.iframe-container:has(#pnlOtp.otp-screen-active) .bg-svg-bottom {
    display: none !important;
}

/* Design uses a neutral rounded chip for the language switch. This app's
   switch also carries a flag and a word, so it stays a pill rather than
   the handoff's 40px circle. */
.iframe-container:has(#pnlIdentity.identity-screen-active) .lang-toggle,
.iframe-container:has(#pnlOtp.otp-screen-active) .lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: auto;
    min-width: 40px;
    height: 40px;
    padding: 0 14px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--ob-chip) !important;
    box-shadow: none !important;
    color: var(--ob-muted) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.iframe-container:has(#pnlIdentity.identity-screen-active) .lang-toggle img,
.iframe-container:has(#pnlOtp.otp-screen-active) .lang-toggle img {
    width: 16px !important;
    height: 16px !important;
}

/* Phone header, per the handoff: flat (no rule under it), tighter side padding,
   a bigger wordmark and a white outlined language chip. */
@media (max-width: 991.98px) {
    /* The handoff's phone canvas is plain white, so the header stops reading as
       a separate band. */
    .iframe-container:has(#pnlIdentity.identity-screen-active),
    .iframe-container:has(#pnlOtp.otp-screen-active) {
        background: #fff;
    }

    .iframe-container:has(#pnlIdentity.identity-screen-active) .top-header,
    .iframe-container:has(#pnlOtp.otp-screen-active) .top-header {
        height: auto;
        min-height: 64px;
        padding: 12px 16px !important;
        border-bottom: 0;
    }

    .iframe-container:has(#pnlIdentity.identity-screen-active) .brand-logo-ob,
    .iframe-container:has(#pnlOtp.otp-screen-active) .brand-logo-ob {
        --ob-logo-w: 70px;
    }

    .iframe-container:has(#pnlIdentity.identity-screen-active) .lang-toggle,
    .iframe-container:has(#pnlOtp.otp-screen-active) .lang-toggle {
        background: #fff !important;
        border: 1px solid rgba(16, 16, 16, .08) !important;
    }
}

/* =====================================================================
   LOGIN  (WebIdentityPage)
   ===================================================================== */

/* No canvas colour of its own: the card sits directly on the page background,
   and .main-grid already supplies the outer spacing. */
#pnlIdentity {
    width: 100% !important;
    display: block;
    padding: 0;
    background: transparent;
}

#pnlIdentity,
#pnlIdentity * {
    box-sizing: border-box !important;
}

/* Card order is fixed LTR (form first, onboarding second) in both
   languages - matches the handoff. */
#pnlIdentity .identity-login-card {
    direction: ltr;
    display: flex;
    align-items: stretch;
    gap: 32px;
    width: 100%;
    max-width: 948px;
    margin: 0 auto;
    padding: 16px 16px 16px 32px;
    background: #fff;
    border-radius: var(--ob-radius-card);
}

/* ---------------- form side ---------------- */
#pnlIdentity .identity-form-side {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 16px;
}

#pnlIdentity .identity-form-inner {
    width: 100%;
}

#pnlIdentity .identity-title {
    margin: 0;
    font-size: 32px;
    line-height: 1.16;
    font-weight: 700;
    color: var(--ob-ink);
}

#pnlIdentity .identity-subtitle {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    color: var(--ob-muted);
}

#pnlIdentity .identity-fields {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#pnlIdentity .identity-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Field: 1px inset ring, 2px orange on focus, red when invalid. */
#pnlIdentity .identity-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    height: 56px;
    width: 100%;
    padding: 0 14px;
    background: #fff;
    border: 0;
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px var(--ob-field-border);
    transition: box-shadow .15s ease;
}

#pnlIdentity .identity-input-wrap:focus-within {
    box-shadow: inset 0 0 0 2px rgba(255, 119, 1, .7);
}

#pnlIdentity .identity-input-wrap.has-error,
#pnlIdentity .identity-input-wrap.has-error:focus-within {
    box-shadow: inset 0 0 0 2px rgba(251, 36, 36, .7);
}

#pnlIdentity .identity-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 16px;
    color: rgba(0, 0, 0, .87);
    direction: ltr;
    text-align: start;
}

#pnlIdentity .identity-input:focus {
    outline: 0;
    box-shadow: none;
}

/* Floating label - driven by :placeholder-shown, no JS needed. */
#pnlIdentity .identity-label {
    position: absolute;
    z-index: 2;
    top: 50%;
    inset-inline-start: 12px;
    transform: translateY(-50%);
    padding: 0 4px;
    background: #fff;
    font-size: 14px;
    /* Tall enough that the floated label's white box straddles - and hides -
       the field's top border instead of sitting just above it. */
    line-height: 16px;
    color: rgba(0, 0, 0, .6);
    pointer-events: none;
    transition: top .15s ease, font-size .15s ease, color .15s ease, inset-inline-start .15s ease, transform .15s ease;
}

/* .is-filled is set from script: :placeholder-shown alone misses values that
   arrive from browser autofill or from a script rather than from typing. */
#pnlIdentity .identity-input:focus ~ .identity-label,
#pnlIdentity .identity-input:not(:placeholder-shown) ~ .identity-label,
#pnlIdentity .identity-input-wrap.is-filled .identity-label {
    top: -8px;
    inset-inline-start: 10px;
    transform: none;
    font-size: 12px;
}

#pnlIdentity .identity-input:focus ~ .identity-label {
    color: var(--ob-orange);
}

#pnlIdentity .identity-input-wrap.has-error .identity-label {
    color: var(--ob-err) !important;
}

#pnlIdentity .identity-error {
    display: block;
    padding: 0 14px;
    font-size: 12px;
    line-height: 18px;
    color: var(--ob-err);
}

#pnlIdentity .identity-error:empty {
    display: none;
}

/* Primary CTA: orange pill, dimmed until both fields are valid. */
#pnlIdentity .identity-actions {
    margin-top: 24px;
}

#pnlIdentity .identity-start-btn {
    display: block;
    width: 100%;
    height: 52px;
    border: 0;
    border-radius: 48px;
    background: var(--ob-orange);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    opacity: .3;
    transition: opacity .15s ease, filter .15s ease;
}

#pnlIdentity .identity-start-btn.is-ready {
    opacity: 1;
}

#pnlIdentity .identity-start-btn.is-ready:hover {
    filter: brightness(1.05);
}

#pnlIdentity .identity-start-btn.is-ready:active {
    filter: brightness(.95);
}

#pnlIdentity .identity-terms {
    margin: 24px 0 0;
    text-align: center;
    font-size: 12px;
    line-height: 24px;
    font-weight: 500;
    color: var(--ob-ink);
}

#pnlIdentity .identity-terms a {
    color: var(--ob-navy);
    font-weight: 700;
    text-decoration: underline;
}

/* ---------------- onboarding side ---------------- */
#pnlIdentity .identity-promo {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    padding: 32px;
    background: var(--ob-chip);
    border-radius: 16px;
}

#pnlIdentity .identity-promo-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

#pnlIdentity .identity-promo-img {
    display: block;
    height: 150px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    animation: obFloaty 6s ease-in-out infinite;
}

@keyframes obFloaty {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
    #pnlIdentity .identity-promo-img { animation: none; }
}

#pnlIdentity .identity-promo-title {
    margin: 0;
    font-size: 20px;
    line-height: 32px;
    font-weight: 800;
    color: #0b0e1e;
}

#pnlIdentity .identity-steps {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 320px;
}

#pnlIdentity .identity-steps-heading {
    margin: 0;
    font-size: 12px;
    line-height: 32px;
    font-weight: 800;
    color: #0b0e1e;
    text-align: start;
}

/* Desktop keeps the plain heading; the clock chip is a phone-only treatment. */
#pnlIdentity .identity-steps-clock {
    display: none;
}

/* The intro CTA, its terms line and the header's back chevron exist only in
   the phone's two-view flow; the desktop card shows everything at once. */
#pnlIdentity .identity-intro-actions,
.identity-back-btn {
    display: none;
}

.identity-back-btn {
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
    cursor: pointer;
}

.identity-back-btn svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* Chevron points back along the reading direction. */
html[dir="rtl"] .identity-back-btn svg {
    transform: scaleX(-1);
}

.identity-back-btn:active {
    transform: scale(.95);
}

#pnlIdentity .identity-steps-list {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
}

#pnlIdentity .identity-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
}

#pnlIdentity .identity-step-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 999px;
}

#pnlIdentity .identity-step-icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

#pnlIdentity .identity-step-label {
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    color: var(--ob-ink);
}

#pnlIdentity .identity-step-sep {
    height: 1px;
    width: 100%;
    margin: 4px 0;
    background: rgba(199, 200, 204, .5);
}

/* ---------------- language ---------------- */
#pnlIdentity.identity-lang-ar .identity-form-side,
#pnlIdentity.identity-lang-ar .identity-promo {
    direction: rtl;
    font-family: var(--ob-font-ar);
}

#pnlIdentity.identity-lang-ar .identity-title,
#pnlIdentity.identity-lang-ar .identity-subtitle {
    text-align: right;
}

#pnlIdentity.identity-lang-en .identity-form-side,
#pnlIdentity.identity-lang-en .identity-promo {
    direction: ltr;
    font-family: var(--ob-font-en);
}

#pnlIdentity.identity-lang-en .identity-title,
#pnlIdentity.identity-lang-en .identity-subtitle {
    text-align: left;
}

#pnlIdentity .identity-promo-ar { display: block; }
#pnlIdentity .identity-promo-en { display: none; }
#pnlIdentity.identity-lang-en .identity-promo-ar { display: none; }
#pnlIdentity.identity-lang-en .identity-promo-en { display: block; }

/* ---------------- responsive ---------------- */

/* Tablet: the two columns no longer fit side by side, but the card is kept. */
@media (min-width: 992px) and (max-width: 1100px) {
    #pnlIdentity .identity-login-card {
        gap: 20px;
        padding: 16px;
    }

    #pnlIdentity .identity-form-side {
        padding: 16px 8px;
    }

    #pnlIdentity .identity-title {
        font-size: 26px;
    }
}

/* Phone / tablet: the handoff drops the card and the onboarding panel and
   turns the screen into a plain full-width form with the CTA at the bottom. */
@media (max-width: 991.98px) {
    /* A transformed ancestor becomes the containing block for position: fixed.
       Disable the shared card entrance transform on mobile so the Identity CTA
       is fixed to the actual viewport. */
    .main-grid:has(#pnlIdentity.identity-screen-active) > .form-panel-container {
        animation: none !important;
        transform: none !important;
    }

    /* Handoff caps the phone column at 440px and centres it; .main-grid supplies
       16px of the screen's 24px inset, so the card tops up the remaining 8px. */
    #pnlIdentity .identity-login-card {
        flex-direction: column;
        max-width: 440px;
        margin: 0 auto;
        gap: 0;
        padding: 0 8px;
        background: transparent;
        border-radius: 0;
    }

    /* Two views in one panel: intro (hero + steps + "start") then the fields.
       The class on #pnlIdentity decides which one is on screen. */
    /* Flows top to bottom; space is reserved below so the fixed mobile CTA never
       covers the final step or the terms line. */
    #pnlIdentity .identity-promo {
        order: -1;
        display: flex;
        gap: 0;
        padding: 0 0 calc(132px + env(safe-area-inset-bottom, 0px));
        background: transparent;
        border-radius: 0;
    }

    #pnlIdentity.identity-step-form .identity-promo {
        display: none;
    }

    #pnlIdentity.identity-step-intro .identity-form-side {
        display: none;
    }

    #pnlIdentity .identity-form-side {
        padding: 24px 0 0;
        justify-content: flex-start;
    }

    /* Keep enough content height for short screens; the extra bottom padding
       below also reserves the fixed CTA's footprint while scrolling. */
    #pnlIdentity .identity-form-inner {
        display: flex;
        flex-direction: column;
        min-height: 500px;
        padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    }

    #pnlIdentity .identity-title {
        font-size: 24px;
        line-height: 37px;
    }

    /* Intro view: CTA and terms sit at the bottom, under the steps. */
    /* .identity-promo centres its children, so this block has to claim the
       full width or the CTA shrinks to its label. */
    #pnlIdentity .identity-intro-actions {
        display: flex;
        flex-direction: column;
        position: fixed;
        z-index: 1000;
        left: 50%;
        bottom: max(16px, env(safe-area-inset-bottom, 0px));
        width: min(calc(100vw - 48px), 424px);
        align-self: stretch;
        margin-top: 0;
        transform: translateX(-50%);
    }

    #pnlIdentity .identity-intro-btn {
        display: block;
        width: 100%;
        height: 52px;
        border: 0;
        border-radius: 48px;
        background: var(--ob-orange);
        color: #fff;
        font: inherit;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 6px 20px rgba(2, 11, 25, .14);
        transition: filter .15s ease;
    }

    #pnlIdentity .identity-intro-btn:hover {
        filter: brightness(1.05);
    }

    #pnlIdentity .identity-intro-btn:active {
        filter: brightness(.95);
    }

    /* Back chevron next to the wordmark, shown only on the identity screen's
       fields view. identity-screen-active is required because the step class
       survives on the hidden panel once the OTP screen takes over, and that
       screen has its own back button inside the card. */
    .iframe-container:has(#pnlIdentity.identity-screen-active.identity-step-form) .identity-back-btn {
        display: flex;
    }

    #pnlIdentity .identity-promo-head {
        margin-top: 16px;
        gap: 16px;
    }

    /* The handoff's mt-14 on the hero separates it from an inline header; this
       page has a real 70px header bar above it, so the extra gap is dropped. */
    #pnlIdentity .identity-promo-img {
        margin-top: 0;
        height: 157px;
    }

    #pnlIdentity .identity-promo-title {
        font-size: 20px;
        line-height: 32px;
    }

    #pnlIdentity .identity-steps {
        margin-top: 28px;
        max-width: none;
    }

    /* Heading becomes the pill from the handoff: clock + label on a #f0f4f8 chip. */
    #pnlIdentity .identity-steps-heading {
        display: inline-flex;
        align-items: center;
        align-self: flex-start;
        gap: 6px;
        padding: 8px 12px;
        border-radius: 999px;
        background: var(--ob-chip);
        font-size: 12px;
        line-height: 16px;
        font-weight: 700;
        color: var(--ob-navy);
    }

    #pnlIdentity .identity-steps-clock {
        display: block;
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
    }

    #pnlIdentity .identity-steps-clock svg {
        display: block;
        width: 16px;
        height: 16px;
    }

    #pnlIdentity .identity-steps-list {
        margin-top: 20px;
    }

    #pnlIdentity .identity-step-icon {
        background: var(--ob-chip);
    }

    #pnlIdentity .identity-step-label {
        font-size: 15px;
        font-weight: 500;
    }

    #pnlIdentity .identity-step-sep {
        background: #f0f0f0;
    }

    #pnlIdentity .identity-subtitle {
        margin-top: 6px;
    }

    #pnlIdentity .identity-fields {
        margin-top: 24px;
    }

    #pnlIdentity .identity-actions {
        display: flex;
        flex-direction: column;
        position: fixed;
        z-index: 1000;
        left: 50%;
        bottom: max(16px, env(safe-area-inset-bottom, 0px));
        width: min(calc(100vw - 48px), 424px);
        margin-top: 0;
        padding-top: 0;
        transform: translateX(-50%);
    }

    /* Mobile shows the terms once only, below the first "Get Started" CTA. */
    #pnlIdentity .identity-actions .identity-terms {
        display: none;
    }

    #pnlIdentity .identity-start-btn {
        font-size: 14px;
        box-shadow: 0 6px 20px rgba(2, 11, 25, .14);
    }

    #pnlIdentity .identity-terms {
        margin-top: 16px;
        color: var(--ob-muted);
    }
}

/* =====================================================================
   OTP  (WebOtpPage)
   ===================================================================== */

#pnlOtp {
    width: 100%;
    padding: 0;
    background: transparent;
}

#pnlOtp,
#pnlOtp * {
    box-sizing: border-box;
}

#pnlOtp.otp-lang-ar { direction: rtl; font-family: var(--ob-font-ar); }
#pnlOtp.otp-lang-en { direction: ltr; font-family: var(--ob-font-en); }

#pnlOtp .otp-popup-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 48px;
    background: #fff;
    border-radius: var(--ob-radius-card);
}

/* Round back chevron pinned to the card's top inline-start corner. */
#pnlOtp .otp-back-btn {
    position: absolute;
    top: 24px;
    inset-inline-start: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid #f0f0f0;
    border-radius: 999px;
    background: #f7f7f7;
    color: var(--ob-ink);
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    transition: background-color .15s ease;
}

#pnlOtp .otp-back-btn:hover {
    background: #ececec;
}

#pnlOtp .otp-back-btn::before {
    content: "";
    width: 10px;
    height: 10px;
    border-left: 2px solid var(--ob-ink);
    border-bottom: 2px solid var(--ob-ink);
    transform: rotate(45deg);
    margin-inline-start: 3px;
}

#pnlOtp.otp-lang-ar .otp-back-btn::before {
    transform: rotate(-135deg);
    margin-inline-start: 0;
    margin-inline-end: 3px;
}

#pnlOtp .otp-head {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: start;
}

#pnlOtp .otp-popup-title {
    margin: 0;
    font-size: 24px;
    line-height: 37px;
    font-weight: 700;
    color: var(--ob-ink);
}

#pnlOtp .otp-description {
    margin: 0;
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    color: var(--ob-muted);
}

#pnlOtp .otp-mobile {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: var(--ob-ink);
    direction: ltr;
    unicode-bidi: embed;
}

#pnlOtp .otp-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

/* Hidden mirror of the six boxes; posted back to the server. Kept at its
   static position - an off-screen offset would widen the RTL page. */
#pnlOtp .otp-hidden-value {
    position: absolute !important;
    left: auto !important;
    right: auto !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}

#pnlOtp .otp-code-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    direction: ltr;
}

#pnlOtp .otp-digit {
    width: 60px;
    height: 60px;
    padding: 0;
    background: #fff;
    border: 1px solid rgba(16, 16, 16, .28);
    border-radius: 12px;
    outline: 0;
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    color: var(--ob-ink);
    caret-color: var(--ob-orange);
    transition: border-color .15s ease;

    /* Empty boxes carry the design's 10x2 grey dash, painted as a background
       so it disappears the moment a digit is typed. */
    background-image: linear-gradient(var(--ob-line), var(--ob-line));
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 2px;
}

#pnlOtp .otp-digit:focus,
#pnlOtp .otp-digit.has-value,
#pnlOtp .otp-digit:not(:placeholder-shown) {
    background-image: none;
}

#pnlOtp .otp-digit:focus {
    border-color: var(--ob-orange);
}

#pnlOtp .otp-code-wrap.has-error .otp-digit {
    border-color: var(--ob-err-otp);
}

#pnlOtp .otp-error {
    margin: 0;
    text-align: center;
    font-size: 13px;
    line-height: 20px;
    color: var(--ob-err-otp);
}

#pnlOtp .otp-error:empty {
    display: none;
}

#pnlOtp .otp-resend-row {
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    color: var(--ob-muted);
}

#pnlOtp .otp-countdown {
    display: inline-block;
    color: var(--ob-orange);
    font-weight: 700;
    unicode-bidi: isolate;
}

#pnlOtp.otp-lang-ar .otp-countdown {
    direction: rtl;
}

#pnlOtp.otp-lang-en .otp-countdown {
    direction: ltr;
}

#pnlOtp .otp-resend-link {
    display: none;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ob-orange);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

#pnlOtp .otp-resend-link:hover {
    text-decoration: underline;
    color: var(--ob-orange);
}

/* Countdown hides itself once it reaches zero, then the link appears. */
#pnlOtp .otp-resend-row.is-ready .otp-countdown-text { display: none; }
#pnlOtp .otp-resend-row.is-ready .otp-resend-link { display: inline-block; }

#pnlOtp .otp-popup-actions {
    margin-top: 8px;
}

#pnlOtp .otp-popup-next {
    display: block;
    width: 100%;
    height: 52px;
    border: 0;
    border-radius: 999px;
    background: var(--ob-orange);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    opacity: .3;
    transition: opacity .15s ease, filter .15s ease;
}

#pnlOtp .otp-popup-next.is-ready {
    opacity: 1;
}

#pnlOtp .otp-popup-next.is-ready:hover {
    filter: brightness(1.05);
}

#pnlOtp .otp-popup-next.is-ready:active {
    filter: brightness(.95);
}

/* Phone / tablet: same as the login screen - no card, CTA at the bottom, and
   the back chevron flows at the top instead of being pinned to a card corner. */
@media (max-width: 991.98px) {
    /* Keep the fixed OTP CTA relative to the viewport, not the animated card. */
    .main-grid:has(#pnlOtp.otp-screen-active) > .form-panel-container {
        animation: none !important;
        transform: none !important;
    }

    #pnlOtp .otp-popup-card {
        max-width: 440px;
        margin: 0 auto;
        padding: 24px 0 calc(92px + env(safe-area-inset-bottom, 0px));
        border-radius: 0;
        background: transparent;
        gap: 20px;
        min-height: 520px;
    }

    #pnlOtp .otp-popup-next {
        font-size: 14px;
    }

    #pnlOtp .otp-back-btn {
        position: static;
        align-self: flex-start;
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
    }

    #pnlOtp .otp-head {
        margin-top: 0;
    }

    #pnlOtp .otp-code-wrap {
        width: 100%;
        gap: 8px;
    }

    /* Six boxes have to share the phone width, so they flex down from 60px
       and stay square. */
    #pnlOtp .otp-digit {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
        max-width: 60px;
        height: auto;
        aspect-ratio: 1;
        font-size: 20px;
    }

    #pnlOtp .otp-popup-actions {
        position: fixed;
        z-index: 1000;
        left: 50%;
        bottom: max(16px, env(safe-area-inset-bottom, 0px));
        width: min(calc(100vw - 32px), 440px);
        margin-top: 0;
        transform: translateX(-50%);
    }

    #pnlOtp .otp-popup-next {
        box-shadow: 0 6px 20px rgba(2, 11, 25, .14);
    }
}