/* ============================================================
   EtqanShop — Design 2a — otp.css
   OTP (One-Time Password) verification page styles.
   All values resolve to tokens in global.css. No raw hex.
   ============================================================ */

/* ============================================================
   Page wrapper — vertically centres the card between header
   and footer with a soft warm-tinted background.
   ============================================================ */

.otp-section {
    min-height: calc(100vh - var(--header-height) - 200px);
    display: flex;
    align-items: center;
    padding-block: clamp(48px, 8vw, 96px);
    /* background:
        radial-gradient(ellipse 70% 60% at 15% 20%, rgba(201, 169, 120, 0.08), transparent 55%),
        radial-gradient(ellipse 60% 50% at 85% 80%, rgba(61, 31, 71, 0.06), transparent 55%),
        var(--color-bg-alt); */
}

/* ============================================================
   Card
   ============================================================ */

.otp-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    padding: clamp(32px, 5vw, 56px) clamp(24px, 5vw, 56px);
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
    text-align: center;
}

/* ============================================================
   Icon badge at the top of the card
   ============================================================ */

.otp-card__icon {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-circle);
    background: linear-gradient(135deg, var(--color-gold-mist), var(--color-bg-soft));
    border: 2px solid var(--color-gold-line);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    margin-bottom: var(--space-lg);
    font-size: 2rem;
    color: var(--color-gold-deep);
}

/* ============================================================
   Heading & description
   ============================================================ */

.otp-card__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-snug);
    color: var(--color-text);
    margin: 0 0 var(--space-md);
}

.otp-card__desc {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    line-height: var(--lh-relaxed);
    margin: 0 0 var(--space-2xl);
    max-width: 38ch;
    margin-inline: auto;
    margin-bottom: var(--space-2xl);
}

.otp-card__desc strong {
    color: var(--color-text);
    font-weight: var(--fw-semibold);
}

/* ============================================================
   OTP digit inputs row
   ============================================================ */

.otp-inputs {
    display: flex;
    gap: var(--space-sm);
    justify-content: center;
    margin-bottom: var(--space-xl);
}

.otp-inputs__digit {
    width: 100%;
    height: 54px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    color: var(--color-text);
    text-align: center;
    caret-color: var(--color-gold-deep);
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast);
    /* remove browser number spinners */
    -moz-appearance: textfield;
}

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

.otp-inputs__digit:focus {
    outline: none;
    border-color: var(--color-gold-deep);
    box-shadow: var(--shadow-focus);
    background: var(--color-gold-mist);
}

.otp-inputs__digit.is-filled {
    border-color: var(--color-gold);
    background: var(--color-gold-mist);
}

.otp-inputs__digit.is-error {
    border-color: var(--color-danger);
    background: var(--color-danger-bg);
    animation: shake 300ms ease;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }
}

/* Responsive: tighten on very narrow screens */
@media (max-width: 400px) {
    .otp-inputs__digit {
        font-size: var(--fs-lg);
        border-radius: var(--radius-md);
    }

    .otp-inputs {
        gap: var(--space-xs);
    }
}

/* ============================================================
   Verify button — full-width gold CTA
   ============================================================ */

.otp-card__actions {
    margin-bottom: var(--space-lg);
}

.btn-otp-verify {
    width: 100%;
    min-height: 52px;
    font-size: var(--fs-md);
    letter-spacing: var(--ls-wider);
}

/* ============================================================
   Resend row
   ============================================================ */

.otp-resend {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.otp-resend__btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-gold-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: transparent;
    transition:
        color var(--transition-fast),
        text-decoration-color var(--transition-fast);
}

.otp-resend__btn:hover,
.otp-resend__btn:focus-visible {
    color: var(--color-purple);
    text-decoration-color: currentColor;
    outline: none;
}

.otp-resend__btn:focus-visible {
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-xs);
}

.otp-resend__btn:disabled {
    color: var(--color-text-faint);
    cursor: not-allowed;
    text-decoration: none;
}

/* Countdown timer shown while resend is on cooldown */
.otp-resend__timer {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-faint);
}



/* Password Recovery */


/* Email input with icon prefix */
.password-form .form-group {
    text-align: start;
    margin-bottom: var(--space-lg);
}

.password-input-wrap {
    position: relative;
}

.password-input-wrap i {
    position: absolute;
    inset-inline-start: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-faint);
    font-size: var(--fs-base);
    pointer-events: none;
}

.password-input-wrap .form-control {
    padding-inline-start: calc(var(--space-md) + 1.25rem + var(--space-sm));
    min-height: 52px;
    border-radius: var(--radius-lg);
}

/* Recover button */
.password-card__actions {
    margin-bottom: var(--space-lg);
}

.btn-recover {
    font-size: var(--fs-md);
    letter-spacing: var(--ls-wider);
    gap: var(--space-sm);
}

/* Sign-in link row */
.password-signin {
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
    margin: 0;
}

.password-signin a {
    color: var(--color-gold-deep);
    font-weight: var(--fw-semibold);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: transparent;
    transition:
        color var(--transition-fast),
        text-decoration-color var(--transition-fast);
}

.password-signin a:hover,
.password-signin a:focus-visible {
    color: var(--color-purple);
    text-decoration-color: currentColor;
    outline: none;
}

.password-signin a:focus-visible {
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-xs);
}