@keyframes anfaModalIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.anfa-modal-close {
    position: absolute !important;
    top: 10px;
    right: auto;
    left: 0 !important;
    inset-inline-end: auto;
    inset-inline-start: auto;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: #555;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.anfa-modal-close:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #111;
}
.anfa-modal-close:focus-visible {
    outline: 2px solid var(--wd-primary-color, #2e7d32);
    outline-offset: 2px;
}

.anfa-modal-title {
    margin: 0 0 6px;
    font-size: 1.15em;
    font-weight: 700;
    padding-left: 40px;
}

.anfa-modal-sub {
    margin: 0 0 14px;
    color: #555;
    font-size: 0.93em;
    line-height: 1.55;
}

.anfa-modal-otp-row {
    margin: 0 0 10px;
}

.anfa-modal-otp-row > label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
}

.anfa-modal-otp {
    width: 100%;
    min-height: 44px;
    font-size: 1.2em;
}

.anfa-modal-actions {
    margin: 14px 0 6px;
}

.anfa-modal-actions .anfa-modal-verify {
    width: 100%;
    min-height: 44px;
    font-weight: 600;
}

.anfa-modal-resend-wrap {
    margin: 6px 0 0;
    text-align: center;
}

.anfa-modal-resend {
    background: transparent;
    border: none;
    color: var(--wd-primary-color, #2e7d32);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    font-size: 0.9em;
    padding: 6px 8px;
}

.anfa-modal-resend[disabled] {
    color: #999;
    cursor: default;
    text-decoration: none;
}

body.anfa-modal-open {
    overflow: hidden;
}

/* ----------------------------------------------------------------
   Register form: hide the default WC email + password rows so the
   user sees only the phone field. The JS also hides these (belt &
   braces), and :has() is a modern-only nice-to-have.
---------------------------------------------------------------- */
form.register .woocommerce-form-row:has(input[type="password"]),
form.woocommerce-form-register .woocommerce-form-row:has(input[type="password"]),
form.register .form-row:has(input[type="password"]),
form.woocommerce-form-register .form-row:has(input[type="password"]) {
    display: none !important;
}

form.register .woocommerce-password-strength,
form.register .woocommerce-password-hint,
form.woocommerce-form-register .woocommerce-password-strength,
form.woocommerce-form-register .woocommerce-password-hint {
    display: none !important;
}

/* ----------------------------------------------------------------
   Unified auth flow
---------------------------------------------------------------- */
.anfa-auth-unified {
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.02);
}

.anfa-auth-methods {
    display: flex;
    gap: 8px;
    margin: 0 0 12px;
}

.anfa-auth-method {
    appearance: none;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #fff;
    color: inherit;
    padding: 8px 12px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.92em;
}

.anfa-auth-method.is-active {
    background: var(--wd-primary-color, #2e7d32);
    border-color: var(--wd-primary-color, #2e7d32);
    color: #fff;
}

.anfa-auth-summary {
    margin: 0 0 10px;
    font-size: 0.92em;
    color: #444;
}

.anfa-auth-unified input[readonly] {
    background: #f6f7f9;
    color: #444;
    cursor: default;
}

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

.anfa-auth-actions .button {
    min-width: 130px;
}

/* Hide native WC rows when unified flow is active */
form.anfa-unified-host .anfa-hidden-legacy-row {
    display: none !important;
}

.anfa-hidden-register-col {
    display: none !important;
}

.anfa-unified-login-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}