/**
 * Professional RTL Stylesheet
 * Supports seamless switching between Arabic (RTL) and English (LTR)
 * Developed by Satr Technology (سطر للتقنية)
 */

/* 1. Arabic & English Font Integration */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* Apply Arabic font when dir="rtl" */
html[dir="rtl"],
html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] .font-sans {
    font-family: 'Cairo', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif !important;
    text-align: right;
}

html[dir="ltr"],
html[dir="ltr"] body,
html[dir="ltr"] button,
html[dir="ltr"] input,
html[dir="ltr"] select,
html[dir="ltr"] textarea {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
    text-align: left;
}

/* 2. Mirrored Cart Drawer for RTL */
html[dir="rtl"] #cartDropdown {
    left: 0 !important;
    right: auto !important;
}

html[dir="rtl"] #cartDropdown.translate-x-full {
    transform: translateX(-100%) !important;
}

html[dir="rtl"] #cartDropdown.translate-x-0 {
    transform: translateX(0) !important;
}

/* 3. Mobile Navigation Drawer for RTL */
html[dir="rtl"] #mobileNavDrawer {
    right: 0 !important;
    left: auto !important;
}

html[dir="rtl"] #mobileNavDrawer.-translate-x-full {
    transform: translateX(100%) !important;
}

html[dir="rtl"] #mobileNavDrawer.translate-x-0 {
    transform: translateX(0) !important;
}

/* 4. Toast Notifications Positioning */
html[dir="rtl"] .store-toast-notification {
    left: 1.5rem !important;
    right: auto !important;
    animation: slideInLeft 0.3s ease-out !important;
}

@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 5. Directional Icon Flipping */
html[dir="rtl"] .rtl-flip,
html[dir="rtl"] .ri-arrow-right-line,
html[dir="rtl"] .ri-arrow-right-s-line,
html[dir="rtl"] .ri-arrow-left-line.flip-rtl {
    transform: scaleX(-1);
    display: inline-block;
}

/* 6. Admin Portal Sidebar for RTL */
html[dir="rtl"] .admin-sidebar {
    border-left-width: 1px !important;
    border-right-width: 0 !important;
}

html[dir="rtl"] .sidebar-active {
    border-right-width: 0 !important;
    border-left: 4px solid #8B4513 !important;
}

/* 7. Header & Dropdowns adjustments */
html[dir="rtl"] .header-dropdown {
    right: auto !important;
    left: 0 !important;
}

/* 8. Form Fields & Badges in RTL */
html[dir="rtl"] .badge-start {
    right: 0.75rem !important;
    left: auto !important;
}

html[dir="rtl"] .badge-end {
    left: 0.75rem !important;
    right: auto !important;
}

/* 9. Quick View Modal & Drawers */
html[dir="rtl"] .modal-close-btn {
    left: 1.5rem !important;
    right: auto !important;
}

/* 10. Table alignments */
html[dir="rtl"] table th,
html[dir="rtl"] table td {
    text-align: right;
}

html[dir="rtl"] table th:last-child,
html[dir="rtl"] table td:last-child {
    text-align: left;
}

/* 11. Prevent any horizontal overflow */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* 12. Language Switcher Button */
.lang-switcher-btn {
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    user-select: none;
}
.lang-switcher-btn:hover {
    transform: translateY(-1px);
}