/*
 * One box per digit - the widget assets/js/otp_boxes.js builds.
 *
 * SELF-CONTAINED ON PURPOSE. This is loaded by the B2B login page, which has its
 * own theme, as well as by the two sub-agent screens, which use the --tc-*
 * system in b2b_two_column.css. So every colour is declared here on .otp-boxes
 * itself rather than read from :root - a page-level :root cannot clobber it, and
 * dropping the stylesheet onto a new page needs nothing else.
 *
 * To restyle for a page, override --otp-* on .otp-boxes in that page's own CSS.
 */

.otp-boxes {
    --otp-gold: #d4af37;
    --otp-gold-light: #f3e5ab;
    --otp-glow: rgba(212, 175, 55, 0.35);
    --otp-field-bg: rgba(15, 23, 42, 0.75);
    --otp-border: rgba(148, 163, 184, 0.22);
    --otp-text: #e2e8f0;
    --otp-danger: rgba(239, 68, 68, 0.65);
    --otp-danger-text: #fca5a5;

    display: flex;
    gap: 0.5rem;
    width: 100%;
}

.otp-box {
    /* Flexible rather than fixed: these sit in everything from a full-width
       login card to a col-md-3 column, and shrinking together beats wrapping. */
    flex: 1 1 0;
    min-width: 0;
    max-width: 3.4rem;
    height: 3.2rem;
    padding: 0;
    border-radius: 12px;
    border: 1px solid var(--otp-border);
    background: var(--otp-field-bg);
    color: var(--otp-text);
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    transition: all 0.15s ease;
    -moz-appearance: textfield;
    appearance: none;
}

.otp-box::-webkit-outer-spin-button,
.otp-box::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.otp-box:focus {
    outline: none;
    border-color: var(--otp-gold);
    background: rgba(212, 175, 55, 0.08);
    box-shadow: 0 0 0 3px var(--otp-glow);
}

/* A box that already holds a digit keeps a gold edge, so how far along the code
   is can be read at a glance without counting. */
.otp-box.is-filled {
    border-color: rgba(212, 175, 55, 0.55);
    color: var(--otp-gold-light);
}

.otp-boxes.is-error .otp-box {
    border-color: var(--otp-danger);
    color: var(--otp-danger-text);
    background: rgba(239, 68, 68, 0.08);
}

/* One shake on a wrong code - felt as well as read, and over quickly. */
@keyframes otp-boxes-shake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(3px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}
.otp-boxes.shake { animation: otp-boxes-shake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }

@media (prefers-reduced-motion: reduce) {
    .otp-boxes.shake { animation: none; }
}

/* enhance() leaves the original input in place as a hidden field, so a wrapper
   built to position an icon over a text box has nothing left to position. */
.input-wrapper.is-otp-boxed .input-icon { display: none; }

@media (max-width: 575.98px) {
    .otp-boxes { gap: 0.35rem; }
    .otp-box { height: 2.8rem; font-size: 1.05rem; border-radius: 10px; }
}