/* =============================================================================
   bq-otp.css  —  the verification-code step
   ---------------------------------------------------------------------------
   Mounted by bq-otp.js into both /register and the signup modal, which have
   different type scales and different button styling. Everything below reads
   from custom properties so a host can retune it without overriding rules:

       .bq-otp { --otp-accent: #00529b; --otp-box-size: 56px; }

   The defaults are the /register palette. popup-styles.css narrows the boxes
   for the modal's tighter column; that is the only override either host needs.

   ALIGNMENT: everything from the boxes down is centred — box row, expiry
   caption, verify button, resend line, back link. Only the title and lede
   are ranged left. Keep new elements consistent with whichever group they
   sit in rather than adding a third alignment.
   ========================================================================== */

.bq-otp {
    --otp-accent:     #00529b;
    --otp-ink:        #1a202c;
    --otp-muted:      #4a5568;
    --otp-faint:      #a0aec0;
    --otp-line:       #cdd7e0;
    --otp-bg:         #ffffff;
    --otp-error:      #c5331f;
    --otp-ok:         #15803d;
    --otp-box-size:   56px;
    --otp-box-font:   26px;
    --otp-radius:     8px;
    text-align: left;
}

.bq-otp__title {
    margin: 0 0 8px;
    font-size: 24px; font-weight: 700; line-height: 1.25;
    color: var(--otp-ink); letter-spacing: -.3px;
}
.bq-otp__lede {
    margin: 0 0 22px;
    font-size: 14.5px; line-height: 1.6; color: var(--otp-muted);
}
.bq-otp__lede strong { color: var(--otp-ink); font-weight: 700; word-break: break-all; }

/* --- messages --- */
.bq-otp__msg {
    margin: 0 0 16px; padding: 11px 14px;
    border-radius: 6px; font-size: 13.5px; line-height: 1.5;
    border: 1px solid transparent;
}
.bq-otp__msg--error { background: rgba(197,51,31,.07);  border-color: rgba(197,51,31,.28);  color: var(--otp-error); }
.bq-otp__msg--ok    { background: rgba(21,128,61,.07);  border-color: rgba(21,128,61,.28);  color: var(--otp-ok); }

/* --- the boxes --- */
.bq-otp__boxes {
    display: flex; gap: 12px; justify-content: center;
    margin: 0 0 16px;
}
.bq-otp__box {
    width: var(--otp-box-size); height: var(--otp-box-size);
    flex: 0 0 var(--otp-box-size);
    box-sizing: border-box;
    padding: 0; text-align: center;
    font-family: inherit; font-size: var(--otp-box-font); font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--otp-ink); background: var(--otp-bg);
    border: 1.5px solid var(--otp-line); border-radius: var(--otp-radius);
    transition: border-color .15s, box-shadow .15s, background .15s;
    -moz-appearance: textfield;
}
.bq-otp__box::-webkit-outer-spin-button,
.bq-otp__box::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bq-otp__box:hover:not(:disabled) { border-color: var(--otp-faint); }
.bq-otp__box:focus {
    outline: none;
    border-color: var(--otp-accent);
    box-shadow: 0 0 0 3px rgba(0,82,155,.15);
}
.bq-otp__box:disabled { background: #f7fafc; color: var(--otp-faint); cursor: not-allowed; }

.bq-otp__boxes--locked { opacity: .65; }

/* Wrong code: red edge plus a short shake. Colour alone is not enough — the
   movement is what registers when you are looking at the keyboard. */
.bq-otp__boxes--bad .bq-otp__box { border-color: var(--otp-error); }
.bq-otp__boxes--bad { animation: bqOtpShake .32s ease; }
@keyframes bqOtpShake {
    0%,100% { transform: translateX(0); }
    20%     { transform: translateX(-6px); }
    45%     { transform: translateX(5px); }
    70%     { transform: translateX(-3px); }
}

/* --- expiry --- */
.bq-otp__expiry {
    margin: 0 0 20px;
    font-size: 12.5px; color: var(--otp-faint);
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.bq-otp__expiry--soon { color: var(--otp-error); font-weight: 700; }

/* --- verify --- */
.bq-otp__submit {
    position: relative;
    display: block; width: 100%;
    padding: 13px 20px; margin: 0 0 18px;
    border: 1px solid var(--otp-accent); border-radius: 6px;
    background: var(--otp-accent); color: #fff;
    font-family: inherit; font-size: 15px; font-weight: 700;
    cursor: pointer; transition: background .18s, opacity .18s;
}
.bq-otp__submit:hover:not(:disabled) { background: #00417a; border-color: #00417a; }
.bq-otp__submit:disabled { opacity: .5; cursor: not-allowed; }
.bq-otp__submit.is-busy .bq-otp__submit-label { visibility: hidden; }

.bq-otp__spinner { display: none; }
.bq-otp__submit.is-busy .bq-otp__spinner {
    display: block;
    position: absolute; top: 50%; left: 50%;
    width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px;
    border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
    border-radius: 50%;
    animation: bqOtpSpin .6s linear infinite;
}
@keyframes bqOtpSpin { to { transform: rotate(360deg); } }

/* --- footer actions --- */
.bq-otp__foot { display: flex; flex-direction: column; gap: 6px; }
.bq-otp__resend, .bq-otp__back {
    margin: 0; font-size: 13.5px; color: var(--otp-muted);
    text-align: center;
}
.bq-otp__resend-note { color: var(--otp-faint); font-variant-numeric: tabular-nums; }

.bq-otp__link {
    padding: 0; border: 0; background: none;
    font-family: inherit; font-size: inherit; font-weight: 700;
    color: var(--otp-accent); cursor: pointer; text-decoration: none;
}
.bq-otp__link:hover:not(:disabled) { text-decoration: underline; }
.bq-otp__link:disabled { color: var(--otp-faint); cursor: not-allowed; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
    .bq-otp__boxes--bad { animation: none; }
    .bq-otp__submit.is-busy .bq-otp__spinner { animation-duration: 2s; }
}

@media (max-width: 420px) {
    .bq-otp { --otp-box-size: 48px; --otp-box-font: 22px; }
    .bq-otp__boxes { gap: 9px; }
    .bq-otp__title { font-size: 21px; }
}