/* ==========================================================
   AUTH MODAL SYSTEM — Glassmorphic login/OTP/signup modals
   Adapted from Medical Insurance design reference
   ========================================================== */

/* Auth tokens now live in theme.tokens.css (single source of truth) */

/* ==========================================================
   OVERLAY
   ========================================================== */
.auth-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    animation: authModalFadeIn 0.3s ease;
}

.auth-modal-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: var(--auth-overlay-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================
   GLASS CARD
   ========================================================== */
.auth-modal {
    position: relative;
    width: var(--auth-card-width);
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 40px);
    border-radius: var(--auth-card-radius);
    background: var(--auth-glass-bg);
    border: 1px solid var(--auth-glass-border);
    box-shadow: var(--auth-glass-shadow);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    padding: 24px 36px 28px;
    overflow: hidden;
    animation: authModalScaleIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Scrollable content area — on short viewports the card content scrolls
   instead of clipping behind the modal's overflow:hidden. Keeps the flex
   column context the cards rely on (.auth-spacer etc.). */
.auth-modal__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--auth-glass-border) transparent;
    scrollbar-gutter: stable;
}

/* Gradient border overlay */
.auth-modal::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--auth-card-radius);
    padding: 1px;
    background: linear-gradient(135deg,
    color-mix(in srgb, var(--n0) 80%, transparent) 0%,
    transparent 50%,
    color-mix(in srgb, var(--n0) 40%, transparent) 100%);
    -webkit-mask: linear-gradient(var(--n0) 0 0) content-box,
    linear-gradient(var(--n0) 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* ==========================================================
   BLUR CIRCLES (decorative background)
   ========================================================== */
.auth-modal__blur-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: var(--auth-card-radius);
    pointer-events: none;
    z-index: 0;
}

.auth-modal__blur-circle {
    position: absolute;
    width: 338px;
    height: 338px;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
}

.auth-modal__blur-circle--1 {
    background: var(--brand-primary);
    top: -100px;
    left: -80px;
    opacity: 0.5;
}

.auth-modal__blur-circle--2 {
    background: var(--brand-primary-light);
    top: -102px;
    left: 209px;
    mix-blend-mode: hard-light;
    opacity: 0.4;
}

.auth-modal__blur-circle--3 {
    background: var(--brand-primary-dark);
    top: 272px;
    left: -85px;
    mix-blend-mode: hard-light;
    opacity: 0.35;
}

.auth-modal__blur-circle--4 {
    background: var(--brand-primary-lighter);
    top: -82px;
    left: -78px;
    mix-blend-mode: hard-light;
    opacity: 0.3;
}

.auth-modal__blur-circle--5 {
    background: var(--brand-primary-hover);
    top: -128px;
    left: -138px;
    mix-blend-mode: hard-light;
    opacity: 0.35;
}

.auth-modal__blur-circle--6 {
    background: var(--brand-primary-border);
    top: 256px;
    left: 253px;
    mix-blend-mode: hard-light;
    opacity: 0.25;
}

/* ==========================================================
   DECORATIVE IMAGES
   ========================================================== */
.auth-modal__decor {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.auth-modal__decor--leaf {
    top: -78px;
    right: -99px;
    width: 475px;
    height: 403px;
    opacity: 0.3;
}

/* ==========================================================
   HEADER ROW (close + logo)
   ========================================================== */
.auth-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    margin-bottom: 0;
}

.auth-modal__close {
    background: color-mix(in srgb, var(--n0) 12%, transparent);
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--auth-text-primary);
    opacity: 0.8;
    transition: opacity 0.2s, background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.auth-modal__close:hover {
    opacity: 1;
    background: color-mix(in srgb, var(--n0) 20%, transparent);
}

.auth-modal__close svg {
    width: 18px;
    height: 18px;
}

.auth-modal__logo {
    padding: 0;
    pointer-events: none;
}

.auth-modal__logo img {
    width: 32px;
    height: 28px;
    opacity: 0.7;
}

/* ==========================================================
   TYPOGRAPHY
   ========================================================== */
.auth-modal__title {
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    color: var(--auth-text-primary);
    text-align: center;
    letter-spacing: -0.5px;
    margin: 0;
    position: relative;
    z-index: 2;
}

.auth-modal__subtitle {
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--auth-text-muted);
    text-align: center;
    letter-spacing: -0.08px;
    margin: 4px 0 14px 0;
    position: relative;
    z-index: 2;
}

.auth-modal__subtitle strong {
    font-weight: 500;
    color: var(--auth-text-primary);
}

/* ==========================================================
   INPUT GROUPS
   ========================================================== */

/* Select dropdown */

/* Error message */

/* Alert banner — form-level error / warning */

/* ==========================================================
   CAPTCHA ROW
   ========================================================== */
/* ==========================================================
   IBS-RECAPTURE — single CAPTCHA component used everywhere
   (search forms + register form + OTP step-up). Renders as a
   regular form field with a plain <input> for the answer plus
   a small canvas as a visual prefix on the same row.

   Two hosts, two palettes. The auth modal is glass over a dark
   backdrop; the wizard renders the same component inside a white
   .card (background: var(--n0)). Every stylesheet loads on every page
   now (App.razor's head), so these rules cannot rely on which sheet
   is present; text colours here
   default to the neutral --n* tokens, which read on a white card
   and flip with [data-theme="dark"], and are overridden to the
   --auth-input-* glass tokens under .auth-modal. The label used
   to take the glass token unconditionally, which rendered it
   50%-white on a white card — invisible in the wizard.
   ========================================================== */
.ibs-recapture {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.ibs-recapture__label {
    font-size: 13px;
    color: var(--n700);
    margin-inline-start: 4px;
}

.ibs-recapture__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ibs-recapture__canvas {
    flex: 0 0 160px;
    height: 52px;
    border: 1px solid var(--auth-input-border);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--auth-input-bg);
    user-select: none;
}

.ibs-recapture__canvas img,
.ibs-recapture__canvas canvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.ibs-recapture__input-slot {
    flex: 1;
    min-width: 0;
}

/* Answer field — a plain <input>, NOT a MudBlazor masked field. MudMask owns
   the caret and restores it through an async JS round trip, which reorders
   characters on an iOS soft keyboard (typing 1234 produced 4321). Here the
   browser owns the caret, exactly as it does for the OTP box. */
.ibs-recapture__field {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding-inline-end: 4px;
    border: 1px solid var(--n40);
    border-radius: 8px;
    transition: border-color 0.15s ease;
}

.ibs-recapture__field:hover {
    border-color: var(--n80);
}

.ibs-recapture__field:focus-within {
    border-color: var(--brand-primary-border, var(--brand-green-light));
}

.ibs-recapture__field--error,
.ibs-recapture__field--error:hover,
.ibs-recapture__field--error:focus-within {
    border-color: var(--auth-error);
}

/* Dark mode needs the border re-pointed at a LIGHT neutral, exactly as
   ibs-style.css does for the MudBlazor field this replaced
   ([data-theme="dark"] .ibs-input .mud-input-outlined { --wf-border-default:
   var(--n600) }). Without this the border is --n40 (#33334d in the wizard's
   dark scale) on a --n10 card (#1e1e34) — 1.33:1, no perceptible edge.
   Declared before the .auth-modal block so the modal's glass border still
   wins there on equal specificity. */
[data-theme="dark"] .ibs-recapture__field {
    border-color: var(--n600);
}

[data-theme="dark"] .ibs-recapture__field:hover {
    border-color: var(--n500);
}

[data-theme="dark"] .ibs-recapture__field--error,
[data-theme="dark"] .ibs-recapture__field--error:hover {
    border-color: var(--auth-error);
}

.ibs-recapture__answer {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 12px;
    border: 0;
    background: transparent;
    outline: none;
    font-family: inherit;
    /* 16px minimum — anything smaller makes iOS Safari zoom the page on focus. */
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 3px;
    color: var(--n900);
    /* LTR comes from dir="ltr" on the element itself (pinned by a test); centred
       so the code reads well and the Arabic placeholder still sits right. */
    text-align: center;
}

.ibs-recapture__answer::placeholder {
    color: var(--n300, var(--text-muted));
    opacity: 1;
    font-weight: 400;
    letter-spacing: normal;
}

.ibs-recapture__answer:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* 44x44, not 36 — refresh is destructive (it wipes the typed answer and swaps
   the image), and the MudBlazor adornment it replaces was a 48x48 hit area, so
   36 would have shrunk a no-undo control below Apple's 44pt target. It fits
   inside the 52px-tall field. */
.ibs-recapture__refresh {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--brand-green);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.ibs-recapture__refresh:hover:not(:disabled) {
    background: color-mix(in srgb, var(--brand-green) 12%, transparent);
}

.ibs-recapture__refresh:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ibs-recapture__error {
    margin: 6px 4px 0;
    font-size: 12px;
    color: var(--auth-error);
}

/* Glass overrides — only inside the auth modal, where the backdrop is dark. */
.auth-modal .ibs-recapture__label {
    color: var(--auth-input-placeholder);
}

.auth-modal .ibs-recapture__field {
    background: var(--auth-input-bg);
    border-color: var(--auth-input-border);
}

.auth-modal .ibs-recapture__field:hover,
.auth-modal .ibs-recapture__field:focus-within {
    border-color: var(--brand-green);
}

.auth-modal .ibs-recapture__field--error,
.auth-modal .ibs-recapture__field--error:hover,
.auth-modal .ibs-recapture__field--error:focus-within {
    border-color: var(--auth-error);
}

.auth-modal .ibs-recapture__answer {
    color: var(--auth-input-text);
}

.auth-modal .ibs-recapture__answer::placeholder {
    color: var(--auth-input-placeholder);
}

.auth-modal .ibs-recapture__refresh {
    color: var(--auth-input-text);
}

[data-theme="dark"] .ibs-recapture__canvas {
    background: var(--auth-input-bg);
    border-color: var(--auth-input-border);
}

/* ==========================================================
   CAPTCHA GATE — wraps insurance-search forms behind a CAPTCHA.
   Standalone styles (no auth-modal overlay) so it lays out
   correctly inside any wizard step that wraps its content in
   <CaptchaGate>. Reuses the .auth-captcha-row* styles above
   for the canvas + input + refresh row.
   ========================================================== */

/* ==========================================================
   PRIMARY BUTTON
   ========================================================== */
.auth-btn {
    width: 100%;
    height: 46px;
    background: var(--brand-primary);
    border-radius: var(--auth-btn-radius);
    font-weight: 600;
    font-size: 15px;
    color: var(--n0);
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
    letter-spacing: 0.01em;
    position: relative;
    z-index: 2;
    margin-top: 16px;
}

.auth-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    background: var(--brand-primary-hover);
}

.auth-btn:active {
    transform: translateY(0);
}

.auth-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.auth-btn--loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0.85;
    pointer-events: none;
}

.auth-btn__spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2.5px solid color-mix(in srgb, var(--n0) 40%, transparent);
    border-top-color: var(--n0);
    border-radius: 50%;
    animation: authBtnSpin 0.6s linear infinite;
    flex-shrink: 0;
}

@keyframes authBtnSpin {
    to {
        transform: rotate(360deg);
    }
}

/* ==========================================================
   FOOTER LINKS
   ========================================================== */

/* ==========================================================
   TERMS & CONDITIONS ROW (SignUp)
   ========================================================== */
/* No margin-bottom: the Next button's own margin-top provides the gap, and
   the row must stay compact — it pushed the card past the viewport height
   on 768px laptops (125% scaling) when it carried extra margin. */

/* Spacer to push footer content down */

/* ==========================================================
   OTP INPUT
   ========================================================== */
/* OTP single input */
.auth-otp-single {
    display: block;
    width: 100%;
    max-width: 260px;
    height: 64px;
    flex-shrink: 0;
    margin: 24px auto 0;
    background: var(--auth-input-bg);
    border: 1px solid var(--auth-input-border);
    border-radius: var(--auth-input-radius);
    color: var(--auth-text-primary);
    font-family: inherit;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    direction: ltr;
    letter-spacing: 16px;
    text-indent: 8px; /* compensate the trailing letter-spacing so digits sit centered */
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-otp-single:focus {
    outline: none;
    border-color: var(--brand-green);
    box-shadow: var(--shadow-md);
}

.auth-otp-single--filled {
    border-color: var(--brand-green);
}

.auth-otp-single--error {
    border: 1.5px solid var(--auth-error);
}

.auth-otp-single:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* OTP action buttons (Confirm / Cancel) */
.auth-otp-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.auth-otp-actions .auth-btn {
    width: auto;
    flex: 1;
    margin-top: 0;}

.auth-btn--ghost {
    background: transparent;
    color: var(--auth-text-primary);
    border: 1px solid var(--auth-input-border);
}

.auth-btn--ghost:hover {
    background: var(--auth-input-bg);
    color: var(--auth-text-primary);
    box-shadow: none;
    transform: translateY(-1px);
}

/* OTP Status */
.auth-otp-status {
    min-height: 24px;
    margin-top: 16px;
    text-align: center;
    font-size: 14px;
    color: var(--auth-text-secondary);
    position: relative;
    z-index: 2;
}

.auth-otp-status__error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--auth-error);
}

.auth-otp-status__error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--n20);
    flex-shrink: 0;
}

/* OTP Timer */
.auth-otp-timer {
    font-weight: 500;
    font-size: 16px;
    color: var(--auth-text-primary);
    text-align: center;
    margin-top: 16px;
    letter-spacing: -0.08px;
    position: relative;
    z-index: 2;
}

.auth-otp-timer strong {
    font-weight: 700;
}

/* OTP Resend button */
.auth-otp-resend {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    position: relative;
    z-index: 2;
}

.auth-otp-resend button {
    background: none;
    border: none;
    color: var(--auth-text-primary);
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.auth-otp-resend button:hover {
    opacity: 0.8;
}

/* ==========================================================
   PASSWORD VALIDATION HINTS
   ========================================================== */

/* ==========================================================
   ROW LAYOUT (side-by-side fields)
   ========================================================== */

/* ==========================================================
   ANIMATIONS
   ========================================================== */
@keyframes authModalFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes authModalScaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ==========================================================
   DARK MODE
   ========================================================== */
[data-theme="dark"] .auth-modal {
    --auth-glass-bg: color-mix(in srgb, var(--n800) 35%, transparent);
    --auth-glass-border: color-mix(in srgb, var(--n0) 15%, transparent);
    background: var(--auth-glass-bg);
    border-color: var(--auth-glass-border);
}

[data-theme="dark"] .auth-btn {
    background: var(--brand-primary-light);
    color: var(--n0);
}

[data-theme="dark"] .auth-btn:hover {
    background: var(--brand-primary);
}

[data-theme="dark"] .auth-btn--ghost {
    background: transparent;
    color: var(--auth-text-primary);
}

[data-theme="dark"] .auth-btn--ghost:hover {
    background: var(--auth-input-bg);
}

/* ==========================================================
   RTL
   ========================================================== */
[dir="rtl"] .auth-modal__header {
    flex-direction: row-reverse;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 560px) {
    .auth-modal {
        width: 100%;
        max-width: 100%;
        border-radius: 20px;
        padding: 20px 20px 24px;
    }

    .auth-modal__blur-circle {
        width: 200px;
        height: 200px;
    }

    .auth-modal__title {
        font-size: 24px;
        line-height: 32px;
    }

    }

/* ==========================================================
   LOGIN REQUIRED PAGE — shown when unauthenticated user
   accesses a protected service page
   ========================================================== */

/* Dark mode */

/* Responsive */

/* ==========================================================
   MUDBLAZOR OVERRIDES — Auth glass modal context
   ========================================================== */

/* Input control spacing & stacking — compact for auth */
.auth-modal .mud-input-control {
    position: relative;
    z-index: 2;
    margin-top: 0;
    margin-bottom: 0;
}

.auth-modal .mud-input-control-input-container {
    margin-top: 0 !important;
}

/* Outlined input — glass background & border */
.auth-modal .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--auth-input-border);
    border-radius: var(--auth-input-radius);
}

.auth-modal .mud-input.mud-input-outlined {
    border-radius: var(--auth-input-radius);
    background: var(--auth-input-bg);
}

/* Input text — white on glass */
.auth-modal .mud-input-slot.mud-input-root {
    color: var(--auth-input-text) !important;
}

/* Placeholder — muted white on glass */
.auth-modal .mud-input-root-outlined::placeholder {
    color: var(--auth-input-placeholder) !important;
}

/* Adornment icon — visible on glass */
.auth-modal .mud-input-adornment-start .mud-icon-root {
    color: var(--auth-text-muted) !important;
}

/* Label — white on glass with text shadow for readability */
.auth-modal .mud-input-label {
    color: var(--auth-text-primary) !important;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.auth-modal .mud-input-label-inputcontrol {
    color: var(--auth-text-primary) !important;
}

/* Helper text (e.g. "10/10" counter) — light on glass */
.auth-modal .mud-input-helper-text {
    color: var(--auth-text-muted) !important;
}

/* Focus state */
.auth-modal .mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--brand-green) !important;
    box-shadow: var(--shadow-md);
}

/* Hover state */
.auth-modal .mud-input-outlined:hover:not(.mud-disabled) .mud-input-outlined-border {
    border-color: var(--brand-green);
}

/* Error state */
.auth-modal .mud-input-error .mud-input-outlined-border {
    border-color: var(--auth-error) !important;
}

.auth-modal .mud-input-helper-text.mud-input-error {
    color: var(--auth-error);
    font-size: 13px;
}

/* Adornment icon — password toggle */
.auth-modal .mud-input-adornment-end .mud-icon-button {
    color: var(--auth-text-muted);
}

.auth-modal .mud-input-adornment-end .mud-icon-button:hover {
    color: var(--auth-text-primary);
}

/* Saved-data autofill — keep the glass look after a Chrome/Safari pick.
   Chrome paints autofilled fields with a built-in yellow/blue tint that
   `background-color` can't override; the canonical fix is a giant inset
   box-shadow that masks it, plus -webkit-text-fill-color for the text
   (because the autofill paint overrides `color`). The long transition
   delays Chrome's initial yellow flash. */
.auth-modal .mud-input.mud-input-outlined input:-webkit-autofill,
.auth-modal .mud-input.mud-input-outlined input:-webkit-autofill:hover,
.auth-modal .mud-input.mud-input-outlined input:-webkit-autofill:focus,
.auth-modal .mud-input.mud-input-outlined input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--auth-input-bg) inset !important;
    box-shadow: 0 0 0 1000px var(--auth-input-bg) inset !important;
    -webkit-text-fill-color: var(--auth-input-text) !important;
    caret-color: var(--auth-input-text);
    border-radius: var(--auth-input-radius);
    transition: background-color 600000s ease-in-out 0s;
}

/* Primary button — glass-themed CTA */

/* Button spinner */

/* Dark mode — MudBlazor inputs inherit auth tokens (already glass-compatible) */
[data-theme="dark"] .auth-modal .mud-input.mud-input-outlined {
    background: var(--auth-input-bg);
}

[data-theme="dark"] .auth-modal .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--auth-input-border);
}

[data-theme="dark"] .auth-modal .mud-input-slot.mud-input-root {
    color: var(--auth-input-text) !important;
}

/* ==========================================================
   AUTH CARD — Login page specific components
   ========================================================== */

/* Brand icon badge — identity anchor above title */
.auth-card__icon-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 14px;
    background: color-mix(in srgb, var(--brand-primary) 25%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 50%, transparent);
    margin: 0 auto 8px;
    position: relative;
    z-index: 2;
    color: var(--auth-text-primary);
}

.auth-card__icon-badge .mud-icon-root {
    font-size: 30px;
}