/* =============================================================================
   AJ Mall Secure Auth — ajm-auth.css
   All plugin styles. No inline overrides needed.
   ============================================================================= */

/* ── Separator ──────────────────────────────────────────────────────────────── */
.ajm-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 20px;
    color: #111827;
    font-size: 13px;
    font-weight: 500;
}
.ajm-separator::before,
.ajm-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #f1f5f9;
}

/* ── Social Grid ────────────────────────────────────────────────────────────── */
.ajm-social-grid {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-bottom: 20px;
}

.ajm-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    /* Static — no hover animations */
    transition: none !important;
    box-shadow: none !important;
}

.ajm-btn:hover,
.ajm-btn:active,
.ajm-btn:focus {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    transform: none !important;
    box-shadow: none !important;
    outline: 2px solid #e2e8f0;
    outline-offset: 2px;
}

.ajm-btn svg {
    display: block;
    flex-shrink: 0;
    transition: none !important;
    pointer-events: none;
}

/* Hide Apple button by default; JS shows it on Apple devices */
.ajm-btn-apple:not(.ajm-always-show) {
    display: none;
}

/* ── Footer Promo Link ──────────────────────────────────────────────────────── */
.ajm-promo {
    text-align: center;
    margin-top: 22px;
    font-size: 13.5px;
    color: #64748b;
}

.ajm-switch-link {
    color: #111827;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1.5px solid #e2e8f0;
    padding-bottom: 1px;
    margin-left: 4px;
    transition: border-color 0.15s;
}
.ajm-switch-link:hover {
    border-color: #111827;
}

/* ── Hide theme-injected duplicate links ────────────────────────────────────── */
.woocommerce-form-row--submit .em-button-register-mode:not(.ajm-switch-link):not(.ajm-wa-switch-links .em-button),
.woocommerce-form-row--submit .em-button-login-mode:not(.ajm-switch-link):not(.ajm-wa-switch-links .em-button),
.woocommerce-form--register-button .em-button-login-mode:not(.ajm-switch-link):not(.ajm-wa-switch-links .em-button) {
    display: none !important;
}

/* ── z-index: theme floating buttons stay under modals ──────────────────────── */
.floating-buttons {
    z-index: 100 !important;
}
.modal__wrapper,
.modal__content,
.em-modal,
.em-popup {
    z-index: 9999 !important;
}

/* ── intl-tel-input overrides ───────────────────────────────────────────────── */
.iti {
    width: 100%;
    display: block;
}
.iti__flag-container {
    z-index: 10;
}
.ajm-iti-input,
.ajm-phone-input {
    /* enough room for flag + dial code (e.g. 🇱🇧 +961) */
    padding-left: 95px !important;
    padding-bottom: 25px !important;
}
.ajm-input-error {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
}

/* ── WhatsApp OTP Page Specific ─────────────────────────────────────────────── */
.ajm-wa-mode .woocommerce-customer-login:not(.ajm-wa-page),
.ajm-wa-mode .woocommerce-customer-register {
    display: none !important;
}

.ajm-wa-page,
.ajm-lost-password-page,
.woocommerce-customer-login,
.woocommerce-customer-register {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

.ajm-wa-page form,
.ajm-lost-password-page form,
.woocommerce-form-register,
.woocommerce-form-login,
.woocommerce-form.register,
.woocommerce-form.login {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (min-width: 768px) {
    .ajm-wa-page form,
    .ajm-lost-password-page form,
    .woocommerce-form-register,
    .woocommerce-form-login,
    .woocommerce-form.register,
    .woocommerce-form.login {
        max-width: 600px !important;
    }
}


/* Ensure the cols don't restrict us too much */
.ajm-wa-page .em-col,
.ajm-lost-password-page .em-col,
.woocommerce-customer-login .em-col,
.woocommerce-customer-register .em-col {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
}


/* Ensure the standard login doesn't collapse smaller than WA page in popup */
.woocommerce-customer-login {
    min-height: 480px;
}

.ajm-wa-desc {
    margin-top: -15px;
    margin-bottom: 25px;
    color: #64748b;
    font-size: 14px;
    text-align: center;
}

.ajm-otp-field {
    text-align: center;
    letter-spacing: 8px;
    font-size: 24px !important;
    font-weight: 600;
}

.ajm-wa-cta {
    width: 100%;
    margin-top: 15px;
}

@media (max-width: 767px) {
    .ajm-wa-page,
    .ajm-lost-password-page,
    .woocommerce-customer-login,
    .woocommerce-customer-register,
    .ajm-wa-page .em-col,
    .ajm-lost-password-page .em-col,
    .woocommerce-customer-login .em-col,
    .woocommerce-customer-register .em-col {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .ajm-wa-page form,
    .ajm-lost-password-page form,
    .woocommerce-form-register,
    .woocommerce-form-login,
    .woocommerce-form.register,
    .woocommerce-form.login {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px !important; /* tiny bit of breathing room for form fields */
    }
}

/* ── Center action buttons inside popup on Desktop ── */
@media (min-width: 768px) {
    .modal__content .woocommerce-form-row--submit,
    .woocommerce-account .woocommerce-form-row--submit,
    .ajm-wa-page .woocommerce-form-row--submit,
    .ajm-lost-password-page .woocommerce-form-row--submit {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        gap: 15px !important;
        float: none !important;
        width: 100% !important;
    }
    
    .modal__content .woocommerce-form-row--submit .woocommerce-button,
    .modal__content .woocommerce-form-login__submit,
    .modal__content .woocommerce-form-register__submit,
    .woocommerce-account .woocommerce-form-login__submit,
    .woocommerce-account .woocommerce-form-register__submit,
    .modal__content .em-button-register-mode,
    .modal__content .em-button-login-mode,
    .ajm-wa-page button,
    .ajm-lost-password-page button {
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        float: none !important;
    }
}

/* ── Address Page Customizations ───────────────────────────────────────────── */
.woocommerce-edit-address .woocommerce-MyAccount-content > p:first-of-type,
.woocommerce-view-address .woocommerce-MyAccount-content > p:first-of-type {
    display: none !important;
}

/* ── Hide floating buttons on My Account ──────────────────────────────────── */
.woocommerce-account .floating-buttons {
    display: none !important;
}

/* ── Hide Privacy Policy Text everywhere ───────────────────────────────────── */
/* ── Hide Privacy Policy Text everywhere ───────────────────────────────────── */
.woocommerce-privacy-policy-text,
.woocommerce-checkout-privacy-policy-text {
    display: none !important;
}

/* ── Heading Styling ─────────────────────────────────────────────────────── */
.woocommerce-account .woocommerce-customer-login__title,
.modal__content .woocommerce-customer-login__title {
    font-size: 22px !important;
    font-size: 1.375rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    margin-bottom: 30px !important;
    width: 100%;
}

/* -- Final Input Width Override -- */
.ajm-wa-page input,
.ajm-lost-password-page input,
.woocommerce-form-register input,
.woocommerce-form-login input,
.woocommerce-form.register input,
.woocommerce-form.login input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}