/**
 * Arabic Language Styles - Resalate Theme
 * Comprehensive RTL Support for Arabic Language
 * Font: Cairo (Google Fonts)
 */

/* ==========================================================================
   1. BASE RTL & FONT STYLES
   ========================================================================== */

/* Global Arabic Font Application */
html[lang="ar"],
html[lang="ar"] body,
html[lang="ar"] * {
    font-family: 'Cairo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* RTL Body Styles */
body.rtl,
html[dir="rtl"] body,
html[lang="ar"] body {
    font-family: 'Cairo', sans-serif !important;
    direction: rtl;
    text-align: right;
    line-height: 1.8;
}

/* Typography Improvements for Arabic */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4,
html[lang="ar"] h5,
html[lang="ar"] h6 {
    font-family: 'Cairo', sans-serif !important;
    font-weight: 700;
    line-height: 1.5;
}

html[lang="ar"] p,
html[lang="ar"] span,
html[lang="ar"] a,
html[lang="ar"] li {
    font-family: 'Cairo', sans-serif !important;
    letter-spacing: 0;
    word-spacing: 2px;
}

/* ==========================================================================
   2. HEADER & NAVIGATION RTL
   ========================================================================== */

/* Main Header */
html[dir="rtl"] header,
html[lang="ar"] header {
    direction: rtl;
}

/* Logo positioning */
html[dir="rtl"] header .logo,
html[dir="rtl"] header a[href*="home"],
html[lang="ar"] header .logo {
    margin-left: auto;
    margin-right: 0;
}

/* Desktop Navigation */
html[dir="rtl"] header nav ul,
html[lang="ar"] header nav ul {
    padding-right: 0;
    padding-left: 0;
    flex-direction: row-reverse;
}

html[dir="rtl"] header nav ul li,
html[lang="ar"] header nav ul li {
    margin-left: 0;
    margin-right: 1rem;
}

/* Dropdown menus */
html[dir="rtl"] header .dropdown,
html[lang="ar"] header .dropdown {
    left: auto;
    right: 0;
}

html[dir="rtl"] header [class*="dropdown"],
html[lang="ar"] header [class*="dropdown"] {
    left: auto !important;
    right: 0 !important;
}

/* Header buttons/icons group */
html[dir="rtl"] header .flex.items-center.gap-2,
html[dir="rtl"] header .flex.items-center.gap-3,
html[dir="rtl"] header .flex.items-center.gap-4,
html[lang="ar"] header .flex.items-center.gap-2,
html[lang="ar"] header .flex.items-center.gap-3,
html[lang="ar"] header .flex.items-center.gap-4 {
    flex-direction: row-reverse;
}

/* Mobile Menu Button */
html[dir="rtl"] #openMenu,
html[dir="rtl"] .menu-toggle,
html[lang="ar"] #openMenu,
html[lang="ar"] .menu-toggle {
    margin-right: auto;
    margin-left: 0;
}

/* Mobile Menu Slide */
html[dir="rtl"] #mobileMenu,
html[dir="rtl"] #navbarList,
html[dir="rtl"] .navbar-list,
html[lang="ar"] #mobileMenu,
html[lang="ar"] #navbarList,
html[lang="ar"] .navbar-list {
    right: auto !important;
    left: -100% !important;
}

html[dir="rtl"] #mobileMenu.open,
html[dir="rtl"] #mobileMenu[style*="right: 0"],
html[dir="rtl"] #navbarList.right-0,
html[dir="rtl"] .navbar-list.right-0,
html[lang="ar"] #mobileMenu.open,
html[lang="ar"] #navbarList.right-0,
html[lang="ar"] .navbar-list.right-0 {
    left: 0 !important;
    right: auto !important;
}

/* User menu in header */
html[dir="rtl"] .user-menu,
html[dir="rtl"] #userMenu,
html[lang="ar"] .user-menu,
html[lang="ar"] #userMenu {
    left: 0 !important;
    right: auto !important;
}

/* Notification dropdown */
html[dir="rtl"] .notification-dropdown,
html[dir="rtl"] #notificationDropdown,
html[dir="rtl"] #notifMenu,
html[lang="ar"] .notification-dropdown,
html[lang="ar"] #notificationDropdown,
html[lang="ar"] #notifMenu {
    left: 0 !important;
    right: auto !important;
}

/* Notification items */
html[dir="rtl"] #notifMenu li,
html[dir="rtl"] #notifMenu a,
html[lang="ar"] #notifMenu li,
html[lang="ar"] #notifMenu a {
    text-align: right;
}

/* Notification mark as read button */
html[dir="rtl"] #notifMenu form.absolute,
html[lang="ar"] #notifMenu form.absolute {
    right: auto !important;
    left: 0.75rem !important;
}

/* Notification badge position */
html[dir="rtl"] .absolute.-bottom-1.-right-1,
html[lang="ar"] .absolute.-bottom-1.-right-1 {
    right: auto !important;
    left: -0.25rem !important;
}

/* Language Switcher */
html[dir="rtl"] .language-switcher,
html[lang="ar"] .language-switcher {
    direction: ltr;
    margin-right: auto;
    margin-left: 1rem;
}

html[dir="rtl"] .language-switcher .lang-dropdown,
html[lang="ar"] .language-switcher .lang-dropdown {
    right: auto;
    left: 0;
}

/* ==========================================================================
   3. DASHBOARD SIDEBAR RTL
   ========================================================================== */

/* Sidebar hidden state - keep text alignment only */
html[dir="rtl"] #sidebar.-translate-x-full,
html[lang="ar"] #sidebar.-translate-x-full {
    text-align: right;
}

/* Sidebar visible state */
html[dir="rtl"] #sidebar.translate-x-0,
html[dir="rtl"] #sidebar.sidebar-open,
html[lang="ar"] #sidebar.translate-x-0,
html[lang="ar"] #sidebar.sidebar-open {
    text-align: right;
}

/* Sidebar toggle button */
html[dir="rtl"] .toggler,
html[dir="rtl"] #sidebarToggle,
html[lang="ar"] .toggler,
html[lang="ar"] #sidebarToggle {
    left: auto;
    right: 100%;
}

html[dir="rtl"] .toggler svg,
html[lang="ar"] .toggler svg {
    transform: scaleX(-1);
}

/* Sidebar close button */
html[dir="rtl"] #closeSidebar,
html[lang="ar"] #closeSidebar {
    margin-right: auto;
    margin-left: 0;
    left: 1rem;
    right: auto;
}

/* Sidebar navigation items */
html[dir="rtl"] #sidebar nav a,
html[dir="rtl"] #sidebar nav .nav-link,
html[lang="ar"] #sidebar nav a,
html[lang="ar"] #sidebar nav .nav-link {
    flex-direction: row;
    text-align: right;
}

html[dir="rtl"] #sidebar nav a i,
html[dir="rtl"] #sidebar nav a svg,
html[lang="ar"] #sidebar nav a i,
html[lang="ar"] #sidebar nav a svg {
    margin-left: 0.75rem;
    margin-right: 0;
}

/* Active sidebar item indicator */
html[dir="rtl"] #sidebar nav a.active::before,
html[dir="rtl"] #sidebar nav .active::before,
html[lang="ar"] #sidebar nav a.active::before {
    left: auto;
    right: 0;
}

/* Sidebar user profile section */
html[dir="rtl"] #sidebar .user-profile,
html[dir="rtl"] #sidebar .profile-section,
html[lang="ar"] #sidebar .user-profile {
    text-align: right;
}

/* Dashboard main content - adjust margin for RTL sidebar */
html[dir="rtl"] .dashboard-content,
html[dir="rtl"] .main-content,
html[lang="ar"] .dashboard-content,
html[lang="ar"] .main-content {
    margin-right: 0;
    margin-left: 0;
}

@media (min-width: 768px) {
    html[dir="rtl"] .dashboard-content,
    html[dir="rtl"] .main-content,
    html[lang="ar"] .dashboard-content,
    html[lang="ar"] .main-content {
        margin-right: 16rem;
        margin-left: 0;
    }

    html[dir="rtl"] #sidebar,
    html[lang="ar"] #sidebar {
        transform: none !important;
    }
}

/* ==========================================================================
   4. FORM ELEMENTS RTL
   ========================================================================== */

/* Input fields */
html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input[type="search"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select {
    text-align: right;
    direction: rtl;
    font-family: 'Cairo', sans-serif !important;
}

html[dir="rtl"] input::placeholder,
html[dir="rtl"] textarea::placeholder,
html[lang="ar"] input::placeholder,
html[lang="ar"] textarea::placeholder {
    text-align: right;
    font-family: 'Cairo', sans-serif !important;
}

/* Form labels */
html[dir="rtl"] label,
html[lang="ar"] label {
    text-align: right;
    display: block;
}

/* Checkbox and radio */
html[dir="rtl"] input[type="checkbox"],
html[dir="rtl"] input[type="radio"],
html[lang="ar"] input[type="checkbox"],
html[lang="ar"] input[type="radio"] {
    margin-left: 0.5rem;
    margin-right: 0;
}

html[dir="rtl"] input[type="checkbox"] + label,
html[dir="rtl"] input[type="radio"] + label,
html[lang="ar"] input[type="checkbox"] + label,
html[lang="ar"] input[type="radio"] + label {
    display: inline;
    margin-right: 0.25rem;
}

/* Form groups with icons */
html[dir="rtl"] .input-group,
html[dir="rtl"] .form-group,
html[lang="ar"] .input-group,
html[lang="ar"] .form-group {
    text-align: right;
}

html[dir="rtl"] .input-group i,
html[dir="rtl"] .form-group i,
html[lang="ar"] .input-group i,
html[lang="ar"] .form-group i {
    left: auto;
    right: 1rem;
}

html[dir="rtl"] .input-group input,
html[dir="rtl"] .form-group input,
html[lang="ar"] .input-group input,
html[lang="ar"] .form-group input {
    padding-left: 1rem;
    padding-right: 3rem;
}

/* Select dropdown arrow */
html[dir="rtl"] select,
html[lang="ar"] select {
    background-position: left 0.75rem center !important;
    padding-left: 2.5rem;
    padding-right: 1rem;
}

/* Form validation icons */
html[dir="rtl"] .form-control.is-valid ~ .valid-feedback,
html[dir="rtl"] .form-control.is-invalid ~ .invalid-feedback,
html[lang="ar"] .form-control.is-valid ~ .valid-feedback,
html[lang="ar"] .form-control.is-invalid ~ .invalid-feedback {
    text-align: right;
}

/* ==========================================================================
   5. BUTTONS RTL
   ========================================================================== */

html[dir="rtl"] button,
html[dir="rtl"] .btn,
html[dir="rtl"] input[type="submit"],
html[dir="rtl"] input[type="button"],
html[lang="ar"] button,
html[lang="ar"] .btn {
    font-family: 'Cairo', sans-serif !important;
}

/* Button with icon */
html[dir="rtl"] .btn i,
html[dir="rtl"] button i,
html[lang="ar"] .btn i,
html[lang="ar"] button i {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* Button groups */
html[dir="rtl"] .btn-group,
html[lang="ar"] .btn-group {
    flex-direction: row-reverse;
}

/* ==========================================================================
   6. TAILWIND UTILITIES RTL OVERRIDE
   ========================================================================== */

/* Text alignment */
html[dir="rtl"] .text-left,
html[lang="ar"] .text-left {
    text-align: right !important;
}

html[dir="rtl"] .text-right,
html[lang="ar"] .text-right {
    text-align: left !important;
}

/* Float */
html[dir="rtl"] .float-left,
html[lang="ar"] .float-left {
    float: right !important;
}

html[dir="rtl"] .float-right,
html[lang="ar"] .float-right {
    float: left !important;
}

/* Margins */
html[dir="rtl"] .ml-auto,
html[lang="ar"] .ml-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}

html[dir="rtl"] .mr-auto,
html[lang="ar"] .mr-auto {
    margin-right: 0 !important;
    margin-left: auto !important;
}

html[dir="rtl"] .ml-1, html[dir="rtl"] .ml-2, html[dir="rtl"] .ml-3, html[dir="rtl"] .ml-4, html[dir="rtl"] .ml-5, html[dir="rtl"] .ml-6, html[dir="rtl"] .ml-8,
html[lang="ar"] .ml-1, html[lang="ar"] .ml-2, html[lang="ar"] .ml-3, html[lang="ar"] .ml-4, html[lang="ar"] .ml-5, html[lang="ar"] .ml-6, html[lang="ar"] .ml-8 {
    margin-left: 0 !important;
}

html[dir="rtl"] .mr-1, html[dir="rtl"] .mr-2, html[dir="rtl"] .mr-3, html[dir="rtl"] .mr-4, html[dir="rtl"] .mr-5, html[dir="rtl"] .mr-6, html[dir="rtl"] .mr-8,
html[lang="ar"] .mr-1, html[lang="ar"] .mr-2, html[lang="ar"] .mr-3, html[lang="ar"] .mr-4, html[lang="ar"] .mr-5, html[lang="ar"] .mr-6, html[lang="ar"] .mr-8 {
    margin-right: 0 !important;
}

/* Swap ml and mr values */
html[dir="rtl"] .ml-1, html[lang="ar"] .ml-1 { margin-right: 0.25rem !important; }
html[dir="rtl"] .ml-2, html[lang="ar"] .ml-2 { margin-right: 0.5rem !important; }
html[dir="rtl"] .ml-3, html[lang="ar"] .ml-3 { margin-right: 0.75rem !important; }
html[dir="rtl"] .ml-4, html[lang="ar"] .ml-4 { margin-right: 1rem !important; }
html[dir="rtl"] .ml-5, html[lang="ar"] .ml-5 { margin-right: 1.25rem !important; }
html[dir="rtl"] .ml-6, html[lang="ar"] .ml-6 { margin-right: 1.5rem !important; }
html[dir="rtl"] .ml-8, html[lang="ar"] .ml-8 { margin-right: 2rem !important; }

html[dir="rtl"] .mr-1, html[lang="ar"] .mr-1 { margin-left: 0.25rem !important; }
html[dir="rtl"] .mr-2, html[lang="ar"] .mr-2 { margin-left: 0.5rem !important; }
html[dir="rtl"] .mr-3, html[lang="ar"] .mr-3 { margin-left: 0.75rem !important; }
html[dir="rtl"] .mr-4, html[lang="ar"] .mr-4 { margin-left: 1rem !important; }
html[dir="rtl"] .mr-5, html[lang="ar"] .mr-5 { margin-left: 1.25rem !important; }
html[dir="rtl"] .mr-6, html[lang="ar"] .mr-6 { margin-left: 1.5rem !important; }
html[dir="rtl"] .mr-8, html[lang="ar"] .mr-8 { margin-left: 2rem !important; }

/* Padding */
html[dir="rtl"] .pl-1, html[dir="rtl"] .pl-2, html[dir="rtl"] .pl-3, html[dir="rtl"] .pl-4, html[dir="rtl"] .pl-5, html[dir="rtl"] .pl-6, html[dir="rtl"] .pl-8,
html[lang="ar"] .pl-1, html[lang="ar"] .pl-2, html[lang="ar"] .pl-3, html[lang="ar"] .pl-4, html[lang="ar"] .pl-5, html[lang="ar"] .pl-6, html[lang="ar"] .pl-8 {
    padding-left: 0 !important;
}

html[dir="rtl"] .pr-1, html[dir="rtl"] .pr-2, html[dir="rtl"] .pr-3, html[dir="rtl"] .pr-4, html[dir="rtl"] .pr-5, html[dir="rtl"] .pr-6, html[dir="rtl"] .pr-8,
html[lang="ar"] .pr-1, html[lang="ar"] .pr-2, html[lang="ar"] .pr-3, html[lang="ar"] .pr-4, html[lang="ar"] .pr-5, html[lang="ar"] .pr-6, html[lang="ar"] .pr-8 {
    padding-right: 0 !important;
}

/* Swap pl and pr values */
html[dir="rtl"] .pl-1, html[lang="ar"] .pl-1 { padding-right: 0.25rem !important; }
html[dir="rtl"] .pl-2, html[lang="ar"] .pl-2 { padding-right: 0.5rem !important; }
html[dir="rtl"] .pl-3, html[lang="ar"] .pl-3 { padding-right: 0.75rem !important; }
html[dir="rtl"] .pl-4, html[lang="ar"] .pl-4 { padding-right: 1rem !important; }
html[dir="rtl"] .pl-5, html[lang="ar"] .pl-5 { padding-right: 1.25rem !important; }
html[dir="rtl"] .pl-6, html[lang="ar"] .pl-6 { padding-right: 1.5rem !important; }
html[dir="rtl"] .pl-8, html[lang="ar"] .pl-8 { padding-right: 2rem !important; }

html[dir="rtl"] .pr-1, html[lang="ar"] .pr-1 { padding-left: 0.25rem !important; }
html[dir="rtl"] .pr-2, html[lang="ar"] .pr-2 { padding-left: 0.5rem !important; }
html[dir="rtl"] .pr-3, html[lang="ar"] .pr-3 { padding-left: 0.75rem !important; }
html[dir="rtl"] .pr-4, html[lang="ar"] .pr-4 { padding-left: 1rem !important; }
html[dir="rtl"] .pr-5, html[lang="ar"] .pr-5 { padding-left: 1.25rem !important; }
html[dir="rtl"] .pr-6, html[lang="ar"] .pr-6 { padding-left: 1.5rem !important; }
html[dir="rtl"] .pr-8, html[lang="ar"] .pr-8 { padding-left: 2rem !important; }

/* Position */
html[dir="rtl"] .left-0,
html[lang="ar"] .left-0 {
    left: auto !important;
    right: 0 !important;
}

html[dir="rtl"] .right-0,
html[lang="ar"] .right-0 {
    right: auto !important;
    left: 0 !important;
}

html[dir="rtl"] .left-4,
html[lang="ar"] .left-4 {
    left: auto !important;
    right: 1rem !important;
}

html[dir="rtl"] .right-4,
html[lang="ar"] .right-4 {
    right: auto !important;
    left: 1rem !important;
}

/* Border radius */
html[dir="rtl"] .rounded-l,
html[dir="rtl"] .rounded-l-lg,
html[dir="rtl"] .rounded-l-xl,
html[lang="ar"] .rounded-l,
html[lang="ar"] .rounded-l-lg,
html[lang="ar"] .rounded-l-xl {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 0.5rem !important;
    border-bottom-right-radius: 0.5rem !important;
}

html[dir="rtl"] .rounded-r,
html[dir="rtl"] .rounded-r-lg,
html[dir="rtl"] .rounded-r-xl,
html[lang="ar"] .rounded-r,
html[lang="ar"] .rounded-r-lg,
html[lang="ar"] .rounded-r-xl {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 0.5rem !important;
    border-bottom-left-radius: 0.5rem !important;
}

/* Border */
html[dir="rtl"] .border-l,
html[dir="rtl"] .border-l-2,
html[dir="rtl"] .border-l-4,
html[lang="ar"] .border-l,
html[lang="ar"] .border-l-2,
html[lang="ar"] .border-l-4 {
    border-left: none !important;
    border-right-width: 4px !important;
    border-right-style: solid !important;
}

html[dir="rtl"] .border-r,
html[dir="rtl"] .border-r-2,
html[dir="rtl"] .border-r-4,
html[lang="ar"] .border-r,
html[lang="ar"] .border-r-2,
html[lang="ar"] .border-r-4 {
    border-right: none !important;
    border-left-width: 4px !important;
    border-left-style: solid !important;
}

/* ==========================================================================
   7. FLEX & GRID RTL
   ========================================================================== */

/* Flex containers that need RTL reversal */
html[dir="rtl"] .flex-row,
html[lang="ar"] .flex-row {
    flex-direction: row-reverse;
}

/* Keep flex-row-reverse as is (it becomes normal in RTL) */
html[dir="rtl"] .flex-row-reverse,
html[lang="ar"] .flex-row-reverse {
    flex-direction: row;
}

/* Icons in flex containers */
html[dir="rtl"] .flex.items-center i,
html[dir="rtl"] .flex.items-start i,
html[dir="rtl"] .flex.gap-2 i,
html[dir="rtl"] .flex.gap-3 i,
html[lang="ar"] .flex.items-center i,
html[lang="ar"] .flex.items-start i {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* Space utilities */
html[dir="rtl"] .space-x-1 > * + *,
html[dir="rtl"] .space-x-2 > * + *,
html[dir="rtl"] .space-x-3 > * + *,
html[dir="rtl"] .space-x-4 > * + *,
html[lang="ar"] .space-x-1 > * + *,
html[lang="ar"] .space-x-2 > * + *,
html[lang="ar"] .space-x-3 > * + *,
html[lang="ar"] .space-x-4 > * + * {
    margin-left: 0 !important;
}

html[dir="rtl"] .space-x-1 > * + *, html[lang="ar"] .space-x-1 > * + * { margin-right: 0.25rem !important; }
html[dir="rtl"] .space-x-2 > * + *, html[lang="ar"] .space-x-2 > * + * { margin-right: 0.5rem !important; }
html[dir="rtl"] .space-x-3 > * + *, html[lang="ar"] .space-x-3 > * + * { margin-right: 0.75rem !important; }
html[dir="rtl"] .space-x-4 > * + *, html[lang="ar"] .space-x-4 > * + * { margin-right: 1rem !important; }

/* Grid - maintain structure but align right */
html[dir="rtl"] .grid,
html[lang="ar"] .grid {
    direction: rtl;
}

/* ==========================================================================
   8. CARDS & BOXES RTL
   ========================================================================== */

/* Card content alignment */
html[dir="rtl"] .card,
html[dir="rtl"] .bg-white.rounded-lg,
html[dir="rtl"] .bg-white.rounded-xl,
html[dir="rtl"] .bg-white.shadow,
html[lang="ar"] .card,
html[lang="ar"] .bg-white.rounded-lg,
html[lang="ar"] .bg-white.rounded-xl,
html[lang="ar"] .bg-white.shadow {
    text-align: right;
}

/* Card header with icon */
html[dir="rtl"] .card-header i,
html[dir="rtl"] .card .flex i,
html[lang="ar"] .card-header i,
html[lang="ar"] .card .flex i {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* Info boxes / stat cards */
html[dir="rtl"] .stat-card,
html[dir="rtl"] .info-box,
html[lang="ar"] .stat-card,
html[lang="ar"] .info-box {
    text-align: right;
}

html[dir="rtl"] .stat-card i,
html[dir="rtl"] .info-box i,
html[lang="ar"] .stat-card i,
html[lang="ar"] .info-box i {
    margin-left: 1rem;
    margin-right: 0;
}

/* ==========================================================================
   9. TABLES RTL
   ========================================================================== */

html[dir="rtl"] table,
html[lang="ar"] table {
    direction: rtl;
}

html[dir="rtl"] table th,
html[dir="rtl"] table td,
html[lang="ar"] table th,
html[lang="ar"] table td {
    text-align: right;
}

html[dir="rtl"] table th:first-child,
html[dir="rtl"] table td:first-child,
html[lang="ar"] table th:first-child,
html[lang="ar"] table td:first-child {
    border-top-left-radius: 0;
    border-top-right-radius: 0.5rem;
}

html[dir="rtl"] table th:last-child,
html[dir="rtl"] table td:last-child,
html[lang="ar"] table th:last-child,
html[lang="ar"] table td:last-child {
    border-top-right-radius: 0;
    border-top-left-radius: 0.5rem;
}

/* Table action buttons */
html[dir="rtl"] table .actions,
html[dir="rtl"] table .btn-group,
html[lang="ar"] table .actions,
html[lang="ar"] table .btn-group {
    text-align: left;
}

/* ==========================================================================
   10. LISTS RTL
   ========================================================================== */

html[dir="rtl"] ul,
html[dir="rtl"] ol,
html[lang="ar"] ul,
html[lang="ar"] ol {
    padding-right: 1.5rem;
    padding-left: 0;
}

html[dir="rtl"] li,
html[lang="ar"] li {
    text-align: right;
}

/* List with icons */
html[dir="rtl"] li i,
html[dir="rtl"] li svg,
html[lang="ar"] li i,
html[lang="ar"] li svg {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* ==========================================================================
   11. NOTIFICATIONS & ALERTS RTL
   ========================================================================== */

html[dir="rtl"] .notification-item,
html[dir="rtl"] .alert,
html[dir="rtl"] .notice,
html[lang="ar"] .notification-item,
html[lang="ar"] .alert,
html[lang="ar"] .notice {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .notification-item .flex,
html[lang="ar"] .notification-item .flex {
    flex-direction: row;
}

html[dir="rtl"] .alert i,
html[dir="rtl"] .notice i,
html[lang="ar"] .alert i,
html[lang="ar"] .notice i {
    margin-left: 0.75rem;
    margin-right: 0;
}

/* Close button on alerts */
html[dir="rtl"] .alert .close,
html[dir="rtl"] .notice .close,
html[lang="ar"] .alert .close,
html[lang="ar"] .notice .close {
    left: 1rem;
    right: auto;
}

/* ==========================================================================
   12. MODALS & POPUPS RTL
   ========================================================================== */

html[dir="rtl"] .modal-content,
html[dir="rtl"] .popup-content,
html[lang="ar"] .modal-content,
html[lang="ar"] .popup-content {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] .modal-header,
html[dir="rtl"] .popup-header,
html[lang="ar"] .modal-header,
html[lang="ar"] .popup-header {
    flex-direction: row-reverse;
}

html[dir="rtl"] .modal-close,
html[dir="rtl"] .popup-close,
html[lang="ar"] .modal-close,
html[lang="ar"] .popup-close {
    left: 1rem;
    right: auto;
}

/* ==========================================================================
   13. PAGINATION RTL
   ========================================================================== */

html[dir="rtl"] .pagination,
html[lang="ar"] .pagination {
    flex-direction: row-reverse;
}

html[dir="rtl"] .pagination .prev,
html[lang="ar"] .pagination .prev {
    transform: scaleX(-1);
}

html[dir="rtl"] .pagination .next,
html[lang="ar"] .pagination .next {
    transform: scaleX(-1);
}

/* ==========================================================================
   14. FOOTER RTL
   ========================================================================== */

html[dir="rtl"] footer,
html[lang="ar"] footer {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] footer .grid,
html[lang="ar"] footer .grid {
    direction: rtl;
}

/* Footer columns */
html[dir="rtl"] footer .footer-column,
html[dir="rtl"] footer [class*="col"],
html[lang="ar"] footer .footer-column,
html[lang="ar"] footer [class*="col"] {
    text-align: right;
}

/* Social media icons */
html[dir="rtl"] footer .social-icons,
html[dir="rtl"] footer .flex.gap-3,
html[lang="ar"] footer .social-icons,
html[lang="ar"] footer .flex.gap-3 {
    justify-content: flex-start;
}

html[dir="rtl"] footer .social-icons a,
html[dir="rtl"] footer .flex.gap-3 a,
html[lang="ar"] footer .social-icons a,
html[lang="ar"] footer .flex.gap-3 a {
    margin-left: 0.75rem;
    margin-right: 0;
}

/* ==========================================================================
   15. HOMEPAGE SECTIONS RTL
   ========================================================================== */

/* Hero Section */
html[dir="rtl"] .hero-section,
html[dir="rtl"] .hero-content,
html[lang="ar"] .hero-section,
html[lang="ar"] .hero-content {
    text-align: right;
}

/* Feature sections */
html[dir="rtl"] .feature-section,
html[dir="rtl"] .features,
html[lang="ar"] .feature-section,
html[lang="ar"] .features {
    text-align: right;
}

html[dir="rtl"] .feature-item i,
html[lang="ar"] .feature-item i {
    margin-left: 1rem;
    margin-right: 0;
}

/* Section headings */
html[dir="rtl"] .section-title,
html[dir="rtl"] .section-heading,
html[lang="ar"] .section-title,
html[lang="ar"] .section-heading {
    text-align: right;
}

/* Swiper/Carousel */
html[dir="rtl"] .swiper,
html[lang="ar"] .swiper {
    direction: rtl;
}

html[dir="rtl"] .swiper-button-prev,
html[lang="ar"] .swiper-button-prev {
    right: 10px;
    left: auto;
}

html[dir="rtl"] .swiper-button-next,
html[lang="ar"] .swiper-button-next {
    left: 10px;
    right: auto;
}

/* ==========================================================================
   16. LOGIN & REGISTER PAGES RTL
   ========================================================================== */

html[dir="rtl"] .login-page,
html[dir="rtl"] .register-page,
html[dir="rtl"] .auth-page,
html[dir="rtl"] .form-box,
html[lang="ar"] .login-page,
html[lang="ar"] .register-page,
html[lang="ar"] .auth-page,
html[lang="ar"] .form-box {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .login-form,
html[dir="rtl"] .register-form,
html[dir="rtl"] .auth-form,
html[dir="rtl"] #loginform,
html[dir="rtl"] .masjid-login-form,
html[lang="ar"] .login-form,
html[lang="ar"] .register-form,
html[lang="ar"] .auth-form,
html[lang="ar"] #loginform,
html[lang="ar"] .masjid-login-form {
    text-align: right;
}

/* Toggle password position in RTL */
html[dir="rtl"] .toggle-password,
html[lang="ar"] .toggle-password {
    right: auto !important;
    left: 0.75rem !important;
}

/* Form input with toggle - add padding to left instead of right */
html[dir="rtl"] .input-container input[type="password"],
html[lang="ar"] .input-container input[type="password"] {
    padding-right: 1rem !important;
    padding-left: 2.5rem !important;
}

/* Submit button row */
html[dir="rtl"] .submit-btn,
html[lang="ar"] .submit-btn {
    flex-direction: row-reverse;
}

/* Form links */
html[dir="rtl"] .auth-links,
html[dir="rtl"] .form-links,
html[dir="rtl"] .login-link,
html[lang="ar"] .auth-links,
html[lang="ar"] .form-links,
html[lang="ar"] .login-link {
    text-align: right;
}

/* Remember me checkbox */
html[dir="rtl"] .remember-me,
html[lang="ar"] .remember-me {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* Input container */
html[dir="rtl"] .input-container,
html[dir="rtl"] .inputs-wrapper,
html[lang="ar"] .input-container,
html[lang="ar"] .inputs-wrapper {
    text-align: right;
}

/* ==========================================================================
   17. BREADCRUMBS RTL
   ========================================================================== */

html[dir="rtl"] .breadcrumb,
html[dir="rtl"] .breadcrumbs,
html[lang="ar"] .breadcrumb,
html[lang="ar"] .breadcrumbs {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

html[dir="rtl"] .breadcrumb-separator,
html[dir="rtl"] .breadcrumb i,
html[lang="ar"] .breadcrumb-separator,
html[lang="ar"] .breadcrumb i {
    transform: scaleX(-1);
}

/* ==========================================================================
   18. ICONS RTL FLIP
   ========================================================================== */

/* Directional icons that need flipping */
html[dir="rtl"] .icon-arrow-left,
html[dir="rtl"] .fa-arrow-left,
html[dir="rtl"] .fa-chevron-left,
html[dir="rtl"] .fa-angle-left,
html[lang="ar"] .icon-arrow-left,
html[lang="ar"] .fa-arrow-left,
html[lang="ar"] .fa-chevron-left,
html[lang="ar"] .fa-angle-left {
    transform: scaleX(-1);
}

html[dir="rtl"] .icon-arrow-right,
html[dir="rtl"] .fa-arrow-right,
html[dir="rtl"] .fa-chevron-right,
html[dir="rtl"] .fa-angle-right,
html[lang="ar"] .icon-arrow-right,
html[lang="ar"] .fa-arrow-right,
html[lang="ar"] .fa-chevron-right,
html[lang="ar"] .fa-angle-right {
    transform: scaleX(-1);
}

/* ==========================================================================
   19. SPECIAL ELEMENTS
   ========================================================================== */

/* Better Arabic Number Display */
html[dir="rtl"] .number,
html[dir="rtl"] .price,
html[dir="rtl"] .counter,
html[dir="rtl"] .amount,
html[lang="ar"] .number,
html[lang="ar"] .price,
html[lang="ar"] .counter,
html[lang="ar"] .amount {
    direction: ltr;
    display: inline-block;
}

/* Phone numbers */
html[dir="rtl"] .phone,
html[dir="rtl"] [type="tel"],
html[lang="ar"] .phone,
html[lang="ar"] [type="tel"] {
    direction: ltr;
    text-align: right;
}

/* Email addresses */
html[dir="rtl"] .email,
html[dir="rtl"] [type="email"],
html[lang="ar"] .email,
html[lang="ar"] [type="email"] {
    direction: ltr;
    text-align: right;
}

/* URLs */
html[dir="rtl"] .url,
html[dir="rtl"] [type="url"],
html[lang="ar"] .url,
html[lang="ar"] [type="url"] {
    direction: ltr;
    text-align: right;
}

/* Better Readability */
html[lang="ar"] .lead,
html[lang="ar"] .description {
    line-height: 2;
    font-size: 1.1em;
}

/* Quran Verses - Special Styling */
html[lang="ar"] .quran-verse,
html[lang="ar"] .ayah,
html[lang="ar"] .verse {
    font-family: 'Cairo', sans-serif !important;
    font-size: 1.3em;
    line-height: 2.2;
    text-align: center;
    color: #1a5276;
}

/* ==========================================================================
   20. DASHBOARD SPECIFIC PAGES RTL
   ========================================================================== */

/* Dashboard main container - sidebar + content */
/* Removed flex-direction rules - using default behavior */

/* Dashboard wrapper (content area next to sidebar) */
html[dir="rtl"] .wrapper.flex-1,
html[dir="rtl"] main .flex-1,
html[lang="ar"] .wrapper.flex-1,
html[lang="ar"] main .flex-1 {
    text-align: right;
}

/* Dashboard header */
html[dir="rtl"] .dashboard-header,
html[lang="ar"] .dashboard-header {
    flex-direction: row-reverse;
}

/* Dashboard stats grid */
html[dir="rtl"] .dashboard-stats,
html[dir="rtl"] .stats-grid,
html[lang="ar"] .dashboard-stats,
html[lang="ar"] .stats-grid {
    direction: rtl;
}

/* Upload forms */
html[dir="rtl"] .upload-form,
html[dir="rtl"] .file-upload,
html[lang="ar"] .upload-form,
html[lang="ar"] .file-upload {
    text-align: right;
}

/* Dashboard input wrappers */
html[dir="rtl"] .input-wrapper,
html[dir="rtl"] #account-info,
html[lang="ar"] .input-wrapper,
html[lang="ar"] #account-info {
    text-align: right;
}

/* Dashboard form head content */
html[dir="rtl"] .head-content,
html[lang="ar"] .head-content {
    text-align: right;
}

/* Multilingual content wrapper */
html[dir="rtl"] .ml-content-wrapper,
html[dir="rtl"] [data-ml-field],
html[lang="ar"] .ml-content-wrapper,
html[lang="ar"] [data-ml-field] {
    text-align: right;
}

/* Data lists */
html[dir="rtl"] .data-list,
html[dir="rtl"] .item-list,
html[lang="ar"] .data-list,
html[lang="ar"] .item-list {
    text-align: right;
}

html[dir="rtl"] .data-list .item,
html[dir="rtl"] .item-list .item,
html[lang="ar"] .data-list .item,
html[lang="ar"] .item-list .item {
    flex-direction: row-reverse;
}

/* Action buttons in lists */
html[dir="rtl"] .item-actions,
html[dir="rtl"] .list-actions,
html[lang="ar"] .item-actions,
html[lang="ar"] .list-actions {
    margin-right: auto;
    margin-left: 0;
}

/* Followers/Following lists */
html[dir="rtl"] .follower-item,
html[dir="rtl"] .following-item,
html[lang="ar"] .follower-item,
html[lang="ar"] .following-item {
    flex-direction: row;
}

/* User profile page */
html[dir="rtl"] .user-profile,
html[lang="ar"] .user-profile {
    direction: rtl;
    text-align: right;
}

/* Justify end becomes justify start in RTL */
html[dir="rtl"] .justify-end,
html[lang="ar"] .justify-end {
    justify-content: flex-start !important;
}

/* Grid columns alignment for RTL */
html[dir="rtl"] .grid.md\\:grid-cols-2,
html[dir="rtl"] .grid.grid-cols-2,
html[lang="ar"] .grid.md\\:grid-cols-2,
html[lang="ar"] .grid.grid-cols-2 {
    direction: rtl;
}

/* ==========================================================================
   21. MASJID PROFILE PAGE RTL
   ========================================================================== */

html[dir="rtl"] .masjid-profile,
html[dir="rtl"] .profile-page,
html[lang="ar"] .masjid-profile,
html[lang="ar"] .profile-page {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .profile-header,
html[lang="ar"] .profile-header {
    flex-direction: row-reverse;
}

html[dir="rtl"] .profile-info,
html[lang="ar"] .profile-info {
    text-align: right;
}

/* ==========================================================================
   22. DONATIONS PAGE RTL
   ========================================================================== */

html[dir="rtl"] .donation-card,
html[dir="rtl"] .donation-item,
html[lang="ar"] .donation-card,
html[lang="ar"] .donation-item {
    text-align: right;
}

html[dir="rtl"] .donation-progress,
html[lang="ar"] .donation-progress {
    direction: rtl;
}

html[dir="rtl"] .progress-bar,
html[lang="ar"] .progress-bar {
    direction: ltr;
}

/* ==========================================================================
   23. CONTACT PAGE RTL
   ========================================================================== */

html[dir="rtl"] .contact-page,
html[dir="rtl"] .contact-form,
html[lang="ar"] .contact-page,
html[lang="ar"] .contact-form {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .contact-info,
html[lang="ar"] .contact-info {
    text-align: right;
}

html[dir="rtl"] .contact-info i,
html[lang="ar"] .contact-info i {
    margin-left: 0.75rem;
    margin-right: 0;
}

/* ==========================================================================
   24. RESPONSIVE RTL ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    /* Mobile sidebar */
    html[dir="rtl"] #sidebar,
    html[lang="ar"] #sidebar {
        right: 0 !important;
        left: auto !important;
    }

    html[dir="rtl"] #sidebar.-translate-x-full,
    html[lang="ar"] #sidebar.-translate-x-full {
        text-align: right;
    }

    html[dir="rtl"] #sidebar.sidebar-open,
    html[dir="rtl"] #sidebar.open,
    html[lang="ar"] #sidebar.sidebar-open,
    html[lang="ar"] #sidebar.open {
        text-align: right;
    }

    /* Mobile menu */
    html[dir="rtl"] #mobileMenu,
    html[lang="ar"] #mobileMenu {
        right: auto !important;
        left: -100% !important;
    }

    html[dir="rtl"] #mobileMenu.open,
    html[lang="ar"] #mobileMenu.open {
        left: 0 !important;
        right: auto !important;
    }

    /* Mobile navigation */
    html[dir="rtl"] .mobile-nav,
    html[lang="ar"] .mobile-nav {
        text-align: right;
    }

    /* Stack grids properly */
    html[dir="rtl"] .grid,
    html[lang="ar"] .grid {
        direction: rtl;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* Tablet adjustments */
    html[dir="rtl"] .dashboard-content,
    html[lang="ar"] .dashboard-content {
        margin-right: 16rem;
        margin-left: 0;
    }
}

@media (min-width: 1025px) {
    /* Desktop - sidebar always visible on right */
    html[dir="rtl"] #sidebar,
    html[lang="ar"] #sidebar {
        transform: none !important;
        right: 0 !important;
        left: auto !important;
    }

    html[dir="rtl"] .dashboard-content,
    html[lang="ar"] .dashboard-content {
        margin-right: 16rem;
        margin-left: 0;
    }
}

/* ==========================================================================
   25. PRINT STYLES RTL
   ========================================================================== */

@media print {
    html[dir="rtl"],
    html[lang="ar"] {
        direction: rtl;
        text-align: right;
    }
}

/* ==========================================================================
   26. BODY.RTL SELECTORS - WordPress RTL Class Support
   ========================================================================== */

/* WordPress adds body.rtl class for RTL languages - more reliable targeting */

/* Sidebar nav items */
body.rtl #sidebar nav a {
    text-align: right;
}

/* Form elements */
body.rtl input,
body.rtl textarea,
body.rtl select {
    text-align: right;
}

body.rtl label {
    text-align: right;
    display: block;
}

/* Flex containers general - removed */

/* Cards and content boxes */
body.rtl .input-wrapper,
body.rtl .head-content,
body.rtl .wrapper.flex-1 {
    text-align: right;
}

/* Buttons with icons */
body.rtl button i,
body.rtl .btn i,
body.rtl a i {
    margin-left: 0.5rem !important;
    margin-right: 0 !important;
}

/* Toggle password button positioning */
body.rtl .toggle-password,
body.rtl button.toggle-password {
    right: auto !important;
    left: 0.75rem !important;
}

/* Header dropdown menus */
body.rtl #userMenu,
body.rtl #notifMenu {
    left: 0 !important;
    right: auto !important;
}

/* Dashboard header flex - removed */

/* Grid alignment */
body.rtl .grid {
    direction: rtl;
}

/* Lists */
body.rtl ul,
body.rtl ol {
    padding-right: 1.5rem;
    padding-left: 0;
}

/* Mobile sidebar adjustments */
@media (max-width: 767px) {
    body.rtl #sidebar {
        right: 0 !important;
        left: auto !important;
    }

    body.rtl #sidebar.-translate-x-full {
        text-align: right;
    }

    body.rtl #sidebar.sidebar-open {
        text-align: right;
    }
}

/* Desktop sidebar - always on right */
@media (min-width: 768px) {
    body.rtl #sidebar {
        right: 0 !important;
        left: auto !important;
        transform: none !important;
    }
}

/* ========================================
   27. Masjid Details Page RTL
   ======================================== */

body.rtl .masjid-details .hero-banner .text-box {
    text-align: right;
}

body.rtl .masjid-details .hero-banner .text-box ul.flex.flex-wrap.items-center.gap-3 {
    padding: 0;
}

body.rtl li i, body.rtl li svg,
html[dir="rtl"] li i, html[dir="rtl"] li svg,
html[lang="ar"] li i, html[lang="ar"] li svg {
    margin-left: 0;
    margin-right: 0;
}