/**
 * FEF Login / Register — Enhancements
 * -----------------------------------
 * Loads AFTER fef-loginregister.css. Adds:
 *   • full mobile responsiveness for the form, tabs, OTP panels and
 *     logged-in account card;
 *   • OTP expiry countdown + resend-cooldown UI;
 *   • channel/status hints used by the notifications layer.
 *
 * Nothing here overrides existing colours/spacing you set in Elementor —
 * it only adds new elements and tightens layout on small screens.
 */

/* ================================================================
   OTP countdown + resend cooldown
   ================================================================ */
.fef-lr-otp-timer,
.fef-lr-otp-cooldown {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #64748b;
    margin-top: 10px;
}
.fef-lr-otp-timer .fef-lr-otp-countdown {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #2563eb;
    min-width: 44px;
    text-align: center;
}
.fef-lr-otp-timer.fef-lr-otp-expiring .fef-lr-otp-countdown {
    color: #dc2626;
}
.fef-lr-otp-timer.fef-lr-otp-expired {
    color: #dc2626;
}

/* Resend link disabled while cooling down */
.fef-lr-otp-resend-link.fef-lr-otp-resend-wait,
.fef-lr-otp-resend.fef-lr-otp-resend-wait {
    pointer-events: none;
    opacity: 0.55;
    cursor: default;
}
.fef-lr-otp-resend-count {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* A spike/lock notice bubble (rendered by the enhancement JS on error) */
.fef-lr-otp-lock-note {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    font-size: 13px;
    line-height: 1.5;
}

/* Segmented OTP feel — big, centred, monospace regardless of theme */
.fef-lr-otp-input,
.fef-lr-otp-code {
    ime-mode: disabled;
}
.fef-lr-otp-input::-webkit-outer-spin-button,
.fef-lr-otp-input::-webkit-inner-spin-button,
.fef-lr-otp-code::-webkit-outer-spin-button,
.fef-lr-otp-code::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Small "which channel" hint under the OTP mobile field */
.fef-lr-otp-channel-hint {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #94a3b8;
}

/* ================================================================
   MOBILE RESPONSIVENESS
   The base stylesheet caps the card at 420px and uses fixed 32/28px
   padding. On small screens we let it go full-width and shrink the
   padding, stack the remember/forgot row, and make tap targets bigger.
   ================================================================ */
@media (max-width: 600px) {

    .fef-lr-form,
    .fef-lr-success,
    .fef-lr-otp-panel,
    .fef-lr-cp-guest,
    .fef-lr-verify-banner {
        max-width: 100%;
        padding-left: 18px;
        padding-right: 18px;
    }
    .fef-lr-form,
    .fef-lr-success,
    .fef-lr-otp-panel,
    .fef-lr-cp-guest {
        padding-top: 22px;
        padding-bottom: 22px;
    }

    .fef-lr-title { font-size: 21px; }
    .fef-lr-subtitle { font-size: 13px; }

    /* Bigger, comfier inputs & buttons for thumbs. 16px font stops iOS
       from zooming in on focus. */
    .fef-lr-field input,
    .fef-lr-otp-input,
    .fef-lr-otp-code {
        font-size: 16px;
        padding-top: 13px;
        padding-bottom: 13px;
    }
    .fef-lr-submit,
    .fef-lr-otp-send-btn,
    .fef-lr-otp-verify-btn,
    .fef-lr-continue-btn,
    .fef-lr-btn-primary,
    .fef-lr-btn-secondary {
        padding-top: 15px;
        padding-bottom: 15px;
        font-size: 15px;
    }

    /* Remember / forgot stacks instead of squeezing */
    .fef-lr-row-inline {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .fef-lr-forgot { margin-left: 0; }

    /* Account actions stack full-width */
    .fef-lr-account-actions {
        flex-direction: column;
    }
    .fef-lr-btn-primary,
    .fef-lr-btn-secondary {
        width: 100%;
    }

    /* Tabs keep side-by-side but tighten */
    .fef-lr-tab { padding: 12px 8px; font-size: 13px; }

    /* Captcha row wraps nicely */
    .fef-lr-captcha-code-row { flex-wrap: wrap; }
    .fef-lr-captcha-text input[name="captcha_answer_text"] { max-width: 100%; }

    /* Larger eye tap target */
    .fef-lr-eye { padding: 12px; font-size: 17px; }

    /* OTP code spacing looks better slightly tighter on phones */
    .fef-lr-otp-input { letter-spacing: 6px; font-size: 20px; }
    .fef-lr-otp-code  { letter-spacing: 4px; }
}

@media (max-width: 380px) {
    .fef-lr-form,
    .fef-lr-success,
    .fef-lr-otp-panel {
        padding-left: 14px;
        padding-right: 14px;
    }
    .fef-lr-otp-input { letter-spacing: 4px; }
}

/* Respect users who don't want the countdown pulsing, etc. */
@media (prefers-reduced-motion: reduce) {
    .fef-lr-otp-timer,
    .fef-lr-otp-cooldown { transition: none !important; }
}