/**
 * ANFA Notifications — Frontend Auth Styles
 * Kept intentionally minimal so it inherits the active theme (e.g. Woodmart) form styling.
 */

.anfa-otp-toggle-wrap {
    margin: 6px 0 14px;
    font-size: 0.92em;
}

.anfa-otp-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--wd-primary-color, #2e7d32);
    cursor: pointer;
}

.anfa-otp-toggle::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M20 15.5c-1.25 0-2.45-.2-3.57-.57a1 1 0 0 0-1.02.24l-2.2 2.2a15.05 15.05 0 0 1-6.59-6.58l2.2-2.21a1 1 0 0 0 .25-1.02A11.36 11.36 0 0 1 8.5 4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1c0 9.39 7.61 17 17 17a1 1 0 0 0 1-1v-3.5a1 1 0 0 0-1-1z'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M20 15.5c-1.25 0-2.45-.2-3.57-.57a1 1 0 0 0-1.02.24l-2.2 2.2a15.05 15.05 0 0 1-6.59-6.58l2.2-2.21a1 1 0 0 0 .25-1.02A11.36 11.36 0 0 1 8.5 4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1c0 9.39 7.61 17 17 17a1 1 0 0 0 1-1v-3.5a1 1 0 0 0-1-1z'/></svg>") center/contain no-repeat;
}

.anfa-otp-login {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 14px 16px;
    margin: 10px 0 16px;
}

.anfa-otp-login .anfa-otp-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.anfa-otp-login .anfa-otp-actions .button {
    min-width: 140px;
}

/* Phone input with inline send button */
.anfa-phone-row,
p.anfa-phone-row,
.woocommerce form .form-row.anfa-phone-row {
    display: block !important;
    width: 100% !important;
    float: none !important;
    clear: both;
    margin-bottom: 14px;
}

.anfa-phone-row > label {
    display: block !important;
    margin-bottom: 4px;
}

.anfa-phone-wrap {
    display: flex !important;
    gap: 6px;
    align-items: stretch;
    width: 100% !important;
    box-sizing: border-box;
}

.anfa-phone-wrap > input,
.anfa-phone-wrap > input.anfa-phone-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100%;
    display: block !important;
    direction: ltr !important;
    text-align: left !important;
    unicode-bidi: plaintext;
}

/* Country calling-code select — compact: just flag + +CC */
.anfa-phone-wrap > .anfa-phone-cc,
.anfa-phone-cc {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 110px;
    min-width: 88px;
    min-height: 40px;
    padding-inline: 8px;
    direction: ltr !important;
    text-align: left !important;
    font-size: 0.95em;
    background-color: #fff;
    /* Tabular figures so +CCs align nicely in the dropdown list */
    font-variant-numeric: tabular-nums;
}

.anfa-phone-cc option {
    direction: ltr;
    text-align: left;
}

.anfa-phone-wrap > .button,
.anfa-phone-wrap > button {
    flex: 0 0 auto !important;
    white-space: nowrap;
    padding-inline: 14px;
    min-height: 40px;
    width: auto !important;
    display: inline-block !important;
}

/* OTP code input: wider numeric feel */
.anfa-otp-code {
    letter-spacing: 0.35em;
    font-feature-settings: "tnum" 1;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* Messages */
.anfa-otp-msg {
    margin: 8px 0 0;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.9em;
    line-height: 1.5;
    min-height: 1.2em;
}

.anfa-otp-msg:empty {
    display: none;
}

.anfa-msg-ok {
    background: #e8f7ee;
    border: 1px solid #a9dfbf;
    color: #1e6b3a;
}

.anfa-msg-err {
    background: #fdecea;
    border: 1px solid #f4b7b2;
    color: #8a1e14;
}

.anfa-msg-info {
    background: #eef4fc;
    border: 1px solid #b8d4f3;
    color: #1d4e8a;
}

/* Force LTR on email/phone/password inputs regardless of page direction.
   Include [autocomplete*="password"] so the rule still applies after the
   eye-icon toggles the input type from "password" to "text". */
.anfa-auth-unified input[type="email"],
.anfa-auth-unified input[type="tel"],
.anfa-auth-unified input[type="password"],
.anfa-auth-unified input[autocomplete*="password"] {
    direction: ltr;
    text-align: left;
}

/* Password helper hint shown under the signup password fields */
.anfa-auth-unified .anfa-password-hint {
    display: block;
    margin-top: 4px;
    font-size: 0.82em;
    color: #666;
    line-height: 1.4;
}

/* Password reveal toggle — input is LTR, so keep the eye on the right side */
.anfa-auth-unified .show-password-input,
.anfa-auth-unified .password-input .show-password-input,
.anfa-auth-unified .wd-show-password {
    left: auto !important;
    right: 0.7em !important;
}

/* Message close button — hidden on desktop, visible on mobile for errors */
.anfa-otp-msg .anfa-msg-close {
    display: none;
}

/* "New account" summary — prominent notice with icon so the user can't miss it */
.anfa-auth-summary.anfa-summary-new {
    margin: 0 0 12px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #fff7e6;
    border: 1px solid #ffd591;
    color: #7a4d00;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.5;
}

.anfa-auth-summary.anfa-summary-new::before {
    content: "";
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M12 2 1 21h22L12 2zm0 6 7.5 13h-15L12 8zm-1 4v4h2v-4h-2zm0 6v2h2v-2h-2z'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='currentColor' d='M12 2 1 21h22L12 2zm0 6 7.5 13h-15L12 8zm-1 4v4h2v-4h-2zm0 6v2h2v-2h-2z'/></svg>") center/contain no-repeat;
}

@media (max-width: 768px) {
    .anfa-otp-msg.anfa-msg-err {
        position: fixed;
        inset-inline: 12px;
        bottom: 16px;
        z-index: 9999;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    }
    .anfa-otp-msg.anfa-msg-err .anfa-msg-text {
        flex: 1;
    }
    .anfa-otp-msg.anfa-msg-err .anfa-msg-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 0;
        font-size: 1.4em;
        line-height: 1;
        color: inherit;
        cursor: pointer;
        padding: 2px 8px;
        margin-inline-start: auto;
    }
    /* Keep modal's own message static — it's already in a focused context */
    .anfa-modal-card .anfa-otp-msg.anfa-msg-err {
        position: static;
        box-shadow: none;
        margin: 8px 0 0;
        inset-inline: auto;
        bottom: auto;
        z-index: auto;
    }
    .anfa-modal-card .anfa-otp-msg .anfa-msg-close {
        display: none;
    }
}

/* Verified badge */
.anfa-otp-status.anfa-verified,
.anfa-btn-verify.anfa-verified {
    color: #1e6b3a;
}

.anfa-otp-status {
    display: inline-block;
    margin-inline-start: 8px;
    font-size: 0.9em;
}

/* Lock indication */
.anfa-phone-input.anfa-locked,
.anfa-otp-code.anfa-locked {
    background-color: #f6f7f9;
    color: #555;
    cursor: not-allowed;
}

/* RTL tweaks — keep the phone row rendered in LTR so the sequence reads
   [country select][phone input][button] visually left-to-right, which is
   the universal convention for international phone numbers. */
html[dir="rtl"] .anfa-phone-wrap {
    direction: ltr;
}
html[dir="rtl"] .anfa-phone-wrap > input.anfa-phone-input {
    direction: ltr !important;
    text-align: left !important;
}
html[dir="rtl"] .anfa-phone-cc {
    direction: ltr !important;
    text-align: left !important;
}
html[dir="rtl"] .anfa-otp-code {
    direction: ltr;
}

/* ----------------------------------------------------------------
   OTP verification modal (rendered in wp_footer)
---------------------------------------------------------------- */
.anfa-modal[hidden] { display: none !important; }

.anfa-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.anfa-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.anfa-modal-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    background: #fff;
    color: #222;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
    padding: 22px 22px 18px;
    animation: anfaModalIn 180ms ease-out;
}