/* ==========================================================
   CAPTCHA (IbsRecapture) — the base styles of the one CAPTCHA
   component. This file held the glassmorphic auth modal and its
   OTP card until 2026-10-08; both moved to the landing capture
   popup's hq-* skin (AuthModal, OtpCard), and their rules went
   with them. Only the CAPTCHA, which every host shares, is left.
   ========================================================== */

/* ==========================================================
   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.

   Text colours default to the neutral --n* tokens, which read on a
   white card and flip with [data-theme="dark"]. The sign-in / OTP
   dialog (AuthModal, .hq-modal--auth) re-dresses it as one of its
   own fields in home/home-quote-modal.css.
   ========================================================== */
.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. */
[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);
}

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