/* =========================
   FORM ERRORS (shared)
========================= */

.field-error {
    color: #dc3545;
    font-size: 14px;
    margin-top: 8px;
    text-align: center;

    opacity: 0;
    max-height: 0;
    overflow: hidden;

    transition: opacity .3s ease,
    max-height .3s ease,
    margin-top .3s ease;
}

.field-error.show {
    opacity: 1;
    max-height: 60px;
    margin-top: 10px;
}

/* =========================
   OTP COMPONENT
========================= */

.otp-wrapper {
    direction: ltr;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.otp-box {
    width: 48px;
    height: 52px;
    text-align: center;
    font-size: 18px;

    border: 1px solid #ddd;
    border-radius: 10px;
    outline: none;

    transition: border-color .2s ease;
    caret-color: transparent;
}

.otp-box:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}

.otp-box.filled {
    border-color: #22c55e;
}

/* =========================
   OTP ACTIONS
========================= */

.otp-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.otp-actions button {
    flex: 1;
}

/* =========================
   TIMER / RESEND
========================= */

#resend-btn {
    transition: opacity .25s ease;
}

#timer-wrapper {
    transition: opacity .3s ease;
}

#timer-wrapper.faded {
    opacity: .4;
}

/* fallback if timer is inline */
#otp-timer {
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

/* =========================
   AUTH PAGE OVERRIDES
   (only if needed)
========================= */

.auth-field-error {
    font-size: 16px;
}