/* Tenmeya Auth Styles - WordPress Override Version */
/* 
   Brand Colors:
   Primary: #00D38D (green)
   Secondary: #00B8FB (blue)
   Accent: #091333 (dark navy)
   Muted: #767C8E
   Border: #D7D6D8

   IMPORTANT: Uses high specificity selectors to override WordPress/WooCommerce defaults
*/

@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2:wght@400;500;600;700&display=swap');

/* ===== Reset & Base ===== */
body.tenmeya-auth-page *,
body.tenmeya-auth-page *::before,
body.tenmeya-auth-page *::after {
    box-sizing: border-box !important;
    margin: 0;
    padding: 0;
}

body.tenmeya-auth-page {
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Baloo Bhaijaan 2', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background: linear-gradient(180deg, #E3F7FF 0%, #FFFFFF 100%) !important;
    min-height: 100vh !important;
    color: #091333 !important;
    -webkit-font-smoothing: antialiased;
    direction: ltr !important;
}

body.tenmeya-auth-page.rtl {
    direction: rtl !important;
}

/* ===== Layout Wrapper ===== */
body.tenmeya-auth-page .tenmeya-auth-wrapper {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ===== Header ===== */
body.tenmeya-auth-page .tenmeya-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 0 !important;
    margin-bottom: 24px !important;
    width: 100% !important;
    flex-direction: row !important;
}

/* RTL: Let direction:rtl naturally swap the header elements */
/* No need for row-reverse - the :dir(rtl) or direction:rtl handles flex ordering */

body.tenmeya-auth-page .tenmeya-back-btn {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    background: rgba(9, 19, 51, 0.05) !important;
    color: #091333 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    border: none !important;
}

body.tenmeya-auth-page .tenmeya-back-btn:hover {
    background: rgba(9, 19, 51, 0.1) !important;
    text-decoration: none !important;
}

/* Arrow keeps pointing left in RTL - back is always left visually */
body.tenmeya-auth-page.rtl .tenmeya-back-btn svg {
    transform: none !important;
}

/* Language Toggle */
body.tenmeya-auth-page .tenmeya-lang-toggle {
    display: flex !important;
    background: rgba(9, 19, 51, 0.05) !important;
    border-radius: 10px !important;
    padding: 4px !important;
    gap: 4px !important;
}

body.tenmeya-auth-page .tenmeya-lang-btn {
    padding: 8px 12px !important;
    border: none !important;
    background: transparent !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #767C8E !important;
    transition: all 0.2s ease !important;
    line-height: 1 !important;
    text-transform: none !important;
    box-shadow: none !important;
}

body.tenmeya-auth-page .tenmeya-lang-btn.active {
    background: #fff !important;
    color: #091333 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

body.tenmeya-auth-page .tenmeya-lang-btn:hover:not(.active) {
    color: #091333 !important;
}

/* ===== Main Content ===== */
body.tenmeya-auth-page .tenmeya-auth-main {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px 0 !important;
    width: 100% !important;
}

/* ===== Auth Card ===== */
body.tenmeya-auth-page .tenmeya-auth-card {
    background: #fff !important;
    border-radius: 24px !important;
    box-shadow: 0 4px 24px rgba(9, 19, 51, 0.08) !important;
    width: 100% !important;
    max-width: 420px !important;
    padding: 32px 24px !important;
    position: relative !important;
}

/* ===== Screens ===== */
body.tenmeya-auth-page .tenmeya-screen {
    display: none !important;
    animation: tenmeya-fadeSlideIn 0.3s ease !important;
}

body.tenmeya-auth-page .tenmeya-screen.active {
    display: block !important;
}

@keyframes tenmeya-fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Screen Header ===== */
body.tenmeya-auth-page .tenmeya-screen-header {
    margin-bottom: 24px !important;
    text-align: left !important;
}

body.tenmeya-auth-page.rtl .tenmeya-screen-header {
    text-align: right !important;
}

body.tenmeya-auth-page .tenmeya-text-center {
    text-align: center !important;
}

/* Center text should stay centered in RTL too */
body.tenmeya-auth-page.rtl .tenmeya-text-center {
    text-align: center !important;
}

body.tenmeya-auth-page .tenmeya-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #091333 !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.2 !important;
    text-align: inherit !important;
}

body.tenmeya-auth-page .tenmeya-subtitle {
    font-size: 15px !important;
    color: #767C8E !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    text-align: inherit !important;
}

/* ===== Form Elements ===== */
body.tenmeya-auth-page .tenmeya-form-group {
    margin-bottom: 16px !important;
    width: 100% !important;
}

body.tenmeya-auth-page .tenmeya-form-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
}

body.tenmeya-auth-page.rtl .tenmeya-form-row {
    flex-direction: row-reverse !important;
}

/* Fix for uneven spacing: Remove margin from form-groups inside a row */
body.tenmeya-auth-page .tenmeya-form-row .tenmeya-form-group {
    margin-bottom: 0 !important;
}

body.tenmeya-auth-page .tenmeya-form-half {
    flex: 1 !important;
    min-width: 0 !important;
}

body.tenmeya-auth-page .tenmeya-input {
    width: 100% !important;
    height: 48px !important;
    padding: 0 16px !important;
    border: 1px solid #D7D6D8 !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-family: inherit !important;
    color: #091333 !important;
    background: #fff !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

body.tenmeya-auth-page .tenmeya-input:focus {
    border-color: #00D38D !important;
    box-shadow: 0 0 0 3px rgba(0, 211, 141, 0.15) !important;
}

body.tenmeya-auth-page .tenmeya-input::placeholder {
    color: #ADB0BB !important;
}

/* RTL: Text inputs should have RTL text direction */
body.tenmeya-auth-page.rtl .tenmeya-input {
    text-align: right !important;
    direction: rtl !important;
}

/* Email and Phone inputs will now follow standard RTL direction (right-aligned) as requested */
/* Removed forced LTR rules */

/* Phone Input - FIXED ORDER */
body.tenmeya-auth-page .tenmeya-phone-input-wrapper {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    width: 100% !important;
}

body.tenmeya-auth-page.rtl .tenmeya-phone-input-wrapper {
    flex-direction: row-reverse !important;
}

body.tenmeya-auth-page .tenmeya-country-select {
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    flex-shrink: 0 !important;
    height: 48px !important;
    padding: 0 32px 0 12px !important;
    border: 1px solid #D7D6D8 !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-family: inherit !important;
    color: #091333 !important;
    background-color: #F8FAFC !important;
    cursor: pointer !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23767C8E' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    box-shadow: none !important;
    order: 0 !important;
}

body.tenmeya-auth-page.rtl .tenmeya-country-select {
    order: 1 !important;
    padding: 0 12px 0 32px !important;
    background-position: left 12px center !important;
}

body.tenmeya-auth-page .tenmeya-country-select:focus {
    border-color: #00D38D !important;
}

body.tenmeya-auth-page .tenmeya-phone-input-wrapper .tenmeya-phone-input {
    flex: 1 !important;
    order: 1 !important;
}

body.tenmeya-auth-page.rtl .tenmeya-phone-input-wrapper .tenmeya-phone-input {
    order: 0 !important;
}

/* ===== Buttons ===== */
body.tenmeya-auth-page .tenmeya-btn {
    width: 100% !important;
    height: 48px !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-transform: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    line-height: 1 !important;
    padding: 0 24px !important;
}

body.tenmeya-auth-page .tenmeya-btn-primary {
    background: #00D38D !important;
    color: #fff !important;
}

body.tenmeya-auth-page .tenmeya-btn-primary:hover:not(:disabled) {
    background: #00BF7F !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 211, 141, 0.3) !important;
}

body.tenmeya-auth-page .tenmeya-btn-primary:disabled {
    background: #E2E8F0 !important;
    color: #94A3B8 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Link Button - NO BORDER */
body.tenmeya-auth-page .tenmeya-link-btn {
    width: 100% !important;
    padding: 12px !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #00B8FB !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: color 0.2s !important;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
    display: block;
}

body.tenmeya-auth-page .tenmeya-link-btn span {
    color: inherit !important;
}

body.tenmeya-auth-page .tenmeya-link-btn:hover {
    color: #00A3E0 !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    text-decoration: none !important;
}

/* Text Link - NO BORDER */
body.tenmeya-auth-page .tenmeya-text-link {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    font-size: inherit !important;
    font-weight: 600 !important;
    color: #00D38D !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin-left: 4px !important;
    text-decoration: none !important;
    box-shadow: none !important;
    outline: none !important;
    display: inline !important;
}

body.tenmeya-auth-page .tenmeya-text-link:hover {
    text-decoration: underline !important;
    background: none !important;
    border: none !important;
}

body.tenmeya-auth-page.rtl .tenmeya-text-link {
    margin-left: 0 !important;
    margin-right: 4px !important;
}

/* ===== Divider ===== */
body.tenmeya-auth-page .tenmeya-divider {
    display: flex;
    align-items: center !important;
    gap: 16px !important;
    margin: 20px 0 !important;
    width: 100% !important;
}

body.tenmeya-auth-page .tenmeya-divider::before,
body.tenmeya-auth-page .tenmeya-divider::after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: rgba(9, 19, 51, 0.1) !important;
}

body.tenmeya-auth-page .tenmeya-divider span {
    font-size: 13px !important;
    color: #767C8E !important;
}

/* ===== Footer Link ===== */
body.tenmeya-auth-page .tenmeya-footer-link {
    text-align: center !important;
    margin-top: 24px !important;
    font-size: 14px !important;
    color: #767C8E !important;
    display: block !important;
}

body.tenmeya-auth-page.rtl .tenmeya-footer-link {
    direction: rtl !important;
}

/* ===== OTP Screen ===== */
body.tenmeya-auth-page .tenmeya-otp-icon {
    width: 64px !important;
    height: 64px !important;
    margin: 0 auto 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 211, 141, 0.1) !important;
    border-radius: 50% !important;
    color: #00D38D !important;
}

/* OTP Inputs */
body.tenmeya-auth-page .tenmeya-otp-inputs {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
    /* Force LTR for OTP - numbers should always fill left to right */
    direction: ltr !important;
}

body.tenmeya-auth-page .tenmeya-otp-digit {
    width: 56px !important;
    height: 56px !important;
    border: 2px solid #D7D6D8 !important;
    border-radius: 12px !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    text-align: center !important;
    color: #091333 !important;
    background: #fff !important;
    outline: none !important;
    transition: all 0.2s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    /* Ensure digits display correctly and cursor is visible in RTL mode */
    direction: ltr !important;
    caret-color: #00D38D !important;
}

body.tenmeya-auth-page .tenmeya-otp-digit:focus {
    border-color: #00D38D !important;
    box-shadow: 0 0 0 3px rgba(0, 211, 141, 0.15) !important;
}

body.tenmeya-auth-page .tenmeya-otp-digit.filled {
    border-color: #00D38D !important;
    background: rgba(0, 211, 141, 0.05) !important;
}

/* Channel Indicator */
body.tenmeya-auth-page .tenmeya-channel-indicator {
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
    font-size: 13px !important;
    color: #767C8E !important;
}

body.tenmeya-auth-page .tenmeya-channel-icon {
    color: #25D366 !important;
    display: flex !important;
}

body.tenmeya-auth-page .tenmeya-channel-indicator.sms .tenmeya-channel-icon {
    color: #00B8FB !important;
}

/* Resend Section */
body.tenmeya-auth-page .tenmeya-resend-section {
    text-align: center !important;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}

body.tenmeya-auth-page .tenmeya-resend-timer {
    font-size: 14px !important;
    color: #767C8E !important;
    margin: 0 !important;
}

body.tenmeya-auth-page .tenmeya-resend-timer strong {
    color: #091333 !important;
}

/* Cleaner Text Links for Resend */
body.tenmeya-auth-page .tenmeya-resend-links {
    font-size: 14px !important;
    color: #767C8E !important;
    margin: 0 !important;
}

body.tenmeya-auth-page .tenmeya-resend-link {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #00D38D !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
    font-family: inherit !important;
}

body.tenmeya-auth-page .tenmeya-resend-link:hover {
    color: #00BF7F !important;
    text-decoration: underline !important;
}

body.tenmeya-auth-page .tenmeya-resend-link.tenmeya-resend-sms {
    color: #00B8FB !important;
}

body.tenmeya-auth-page .tenmeya-resend-link.tenmeya-resend-sms:hover {
    color: #00A3E0 !important;
}

body.tenmeya-auth-page .tenmeya-resend-sep {
    margin: 0 6px !important;
    color: #767C8E !important;
}

body.tenmeya-auth-page .tenmeya-channel-sms {
    color: #00B8FB !important;
}

body.tenmeya-auth-page .tenmeya-channel-sms:hover {
    background: rgba(0, 184, 251, 0.08) !important;
    border-color: #00B8FB !important;
}

/* Tip Box */
body.tenmeya-auth-page .tenmeya-tip-box {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 16px !important;
    padding: 12px 16px !important;
    background: #FFF8E1 !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    color: #856404 !important;
}

body.tenmeya-auth-page .tenmeya-tip-box svg {
    flex-shrink: 0 !important;
    color: #FFC107 !important;
}

/* ===== Toast ===== */
body.tenmeya-auth-page .tenmeya-toast {
    position: fixed !important;
    bottom: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(100px) !important;
    padding: 14px 24px !important;
    background: #091333 !important;
    color: #fff !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
    opacity: 0 !important;
    transition: all 0.3s ease !important;
    z-index: 10000 !important;
}

body.tenmeya-auth-page .tenmeya-toast.show {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
}

body.tenmeya-auth-page .tenmeya-toast.success {
    background: #00D38D !important;
}

body.tenmeya-auth-page .tenmeya-toast.error {
    background: #E21313 !important;
}

body.tenmeya-auth-page .tenmeya-toast.info {
    background: #00B8FB !important;
}

/* ===== Checkout User Info ===== */
.tenmeya-checkout-user-info {
    margin-bottom: 2em;
    padding: 24px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.tenmeya-checkout-user-info h3 {
    margin: 0 0 16px 0;
    font-size: 18px;
    font-weight: 700;
    color: #091333;
    border-bottom: 1px solid #F1F5F9;
    padding-bottom: 12px;
}

.tenmeya-user-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tenmeya-user-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    /* Increased padding slightly more */
    border-bottom: 1px solid #F1F5F9;
}

.tenmeya-user-detail-row:last-child {
    border-bottom: none;
}

.tenmeya-user-label {
    font-weight: 500;
    color: #64748B;
    /* Slate 500 */
    font-size: 14px;
}

.tenmeya-user-value {
    font-weight: 600;
    color: #091333;
    font-size: 15px;
}

.tenmeya-not-you {
    margin-top: 16px;
    text-align: center;
    font-size: 13px;
}

.tenmeya-not-you a {
    color: #00B8FB;
    text-decoration: none;
}

.tenmeya-not-you a:hover {
    text-decoration: underline;
}

/* ===== Loading Spinner ===== */
body.tenmeya-auth-page .tenmeya-btn.loading {
    pointer-events: none !important;
}

body.tenmeya-auth-page .tenmeya-btn.loading::after {
    content: '' !important;
    width: 18px !important;
    height: 18px !important;
    border: 2px solid transparent !important;
    border-top-color: currentColor !important;
    border-radius: 50% !important;
    animation: tenmeya-spin 0.8s linear infinite !important;
}

@keyframes tenmeya-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== Responsive ===== */
@media (max-width: 600px) {
    body.tenmeya-auth-page .tenmeya-auth-wrapper {
        padding: 12px !important;
    }

    body.tenmeya-auth-page .tenmeya-auth-card {
        padding: 24px 20px !important;
        border-radius: 20px !important;
    }

    body.tenmeya-auth-page .tenmeya-title {
        font-size: 22px !important;
    }

    body.tenmeya-auth-page .tenmeya-form-row {
        flex-direction: column !important;
        gap: 16px !important;
    }

    body.tenmeya-auth-page.rtl .tenmeya-form-row {
        flex-direction: column !important;
    }

    body.tenmeya-auth-page .tenmeya-otp-digit {
        width: 48px !important;
        height: 48px !important;
        font-size: 20px !important;
    }

    body.tenmeya-auth-page .tenmeya-otp-inputs {
        gap: 8px !important;
    }

    /* Mobile-optimized country code dropdown - SIDE BY SIDE */
    body.tenmeya-auth-page .tenmeya-phone-input-wrapper {
        flex-direction: row !important;
        gap: 8px !important;
    }

    body.tenmeya-auth-page.rtl .tenmeya-phone-input-wrapper {
        flex-direction: row !important;
        /* RTL handles the order naturally */
    }

    body.tenmeya-auth-page .tenmeya-country-select {
        width: 110px !important;
        min-width: 110px !important;
        max-width: 110px !important;
        height: 56px !important;
        font-size: 16px !important;
        /* Slightly larger text */
        padding: 0 32px 0 12px !important;
        /* Standard padding */
        background-position: right 12px center !important;
        background-size: 12px !important;
        order: 0 !important;
    }

    body.tenmeya-auth-page.rtl .tenmeya-country-select {
        padding: 0 12px 0 32px !important;
        background-position: left 12px center !important;
        order: 0 !important;
        /* RTL direction swaps visual order */
    }

    body.tenmeya-auth-page .tenmeya-phone-input-wrapper .tenmeya-phone-input {
        width: auto !important;
        flex: 1 !important;
        height: 56px !important;
        font-size: 16px !important;
        order: 1 !important;
    }

    body.tenmeya-auth-page.rtl .tenmeya-phone-input-wrapper .tenmeya-phone-input {
        order: 1 !important;
    }
}

/* Fix: Hide lingering billing country field if fields are disabled via CartFlows/Theme */
body.woocommerce-checkout #billing_country_field,
#billing_country_field {
    display: none !important;
}

/* Ensure User Info box fits well in column layout */
.tenmeya-checkout-user-info {
    margin-bottom: 24px;
    width: 100%;
    /* Ensure it doesn't overflow if column is narrow */
    max-width: 100%;
    box-sizing: border-box;
}