/**
 * Moda — RTL (Right-to-Left) Overrides
 * This file is loaded ONLY when dir="rtl" is set on <html>.
 * 
 * IMPORTANT: dir="rtl" on <html> automatically reverses flex-row direction.
 * DO NOT add flex-direction: row-reverse — it would cancel the native reversal.
 * Only override directional properties like borders, paddings, margins.
 */

/* ===========================
   Global / Typography
   =========================== */


/* ===========================
   Navbar — text alignment only
   Native dir=rtl handles flex reversal
   We use row-reverse to "un-reverse" the main items (Logo, Menu, Actions)
   so the Logo stays Left and Icons stay Right.
   =========================== */
html[dir="rtl"] .navbar__inner,
html[dir="rtl"] .navbar__actions {
    flex-direction: row-reverse !important;
}



/* ===========================
   Mega Menu — border/padding fixes only
   Native dir=rtl handles flex reversal automatically
   =========================== */
html[dir="rtl"] .mega-menu__sidebar {
    border-right: none !important;
    border-left: 1px solid #eee !important;
}

html[dir="rtl"] .mega-menu__sidebar-item {
    text-align: right !important;
}

html[dir="rtl"] .mega-menu__pane-details {
    text-align: right !important;
}

html[dir="rtl"] .mega-menu__sub-link:hover {
    padding-left: 0 !important;
    padding-right: 5px !important;
}

/* Chevron arrows in sidebar — flip for RTL */
html[dir="rtl"] .mega-menu__sidebar-item i,
html[dir="rtl"] .mega-menu__sidebar-item svg {
    transform: scaleX(-1) !important;
}

/* ===========================
   Admin Sidebar
   =========================== */
html[dir="rtl"] .admin-sidebar {
    border-right: none !important;
    border-left: 1px solid var(--color-gray-200, #eee) !important;
}

html[dir="rtl"] .admin-nav__link {
    text-align: right !important;
}

html[dir="rtl"] .admin-nav__badge {
    margin-left: 0 !important;
    margin-right: auto !important;
}

html[dir="rtl"] .admin-user {
    text-align: right !important;
}

/* ===========================
   Admin Header & Cards
   =========================== */
html[dir="rtl"] .admin-header {
    text-align: right !important;
}

html[dir="rtl"] .admin-card__header {
    text-align: right !important;
}

/* ===========================
   Branch Sidebar
   =========================== */
html[dir="rtl"] .branch-sidebar {
    left: auto !important;
    right: 0 !important;
    border-right: none !important;
    border-left: 1px solid rgba(255,255,255,0.1) !important;
}

@media (min-width: 769px) {
    html[dir="rtl"] .branch-main {
        margin-left: 0 !important;
        margin-right: 260px !important;
    }
}

html[dir="rtl"] .branch-nav__link {
    text-align: right !important;
}

html[dir="rtl"] .branch-nav__badge {
    margin-left: 0 !important;
    margin-right: auto !important;
}

html[dir="rtl"] .branch-user {
    text-align: right !important;
}

/* ===========================
   Tables
   =========================== */
html[dir="rtl"] .admin-table th,
html[dir="rtl"] .admin-table td {
    text-align: right !important;
}

/* ===========================
   Forms
   =========================== */
html[dir="rtl"] .form-group label,
html[dir="rtl"] .form-control,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea {
    text-align: right !important;
}

html[dir="rtl"] .form-group {
    text-align: right !important;
}

/* ===========================
   Product Filter Sidebar - RTL Fixes
=========================== */
html[dir="rtl"] .filter-sidebar {
    padding-right: 5px !important;
    padding-left: 20px !important;
}

/* ===========================
   Product Grid & Cards
=========================== */
html[dir="rtl"] .product-card__info {
    text-align: right !important;
}

/* ===========================
   Stats Grid
   =========================== */
html[dir="rtl"] .admin-stat {
    text-align: right !important;
}

/* ===========================
   Footer — New 3-Column Layout
   =========================== */
html[dir="rtl"] .footer {
    text-align: right !important;
}

html[dir="rtl"] .footer__col--contact {
    text-align: right !important;
}

html[dir="rtl"] .footer__col--brand {
    text-align: center !important;
}

html[dir="rtl"] .footer__col--track {
    justify-content: flex-start !important;
}

@media (max-width: 991px) {
    html[dir="rtl"] .footer__col--track {
        justify-content: center !important;
    }
}

/* ===========================
   Checkout & Cart
   =========================== */
html[dir="rtl"] .checkout-section {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

html[dir="rtl"] .checkout-layout,
html[dir="rtl"] .checkout-card,
html[dir="rtl"] .checkout-summary__card {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

html[dir="rtl"] .cart-item__info {
    text-align: right !important;
}

/* ===========================
   Toasts / Notifications
   =========================== */
html[dir="rtl"] .toast-notification {
    text-align: right !important;
}

html[dir="rtl"] .toast-container {
    left: 20px !important;
    right: auto !important;
}

/* ===========================
   Hero Section
   =========================== */
html[dir="rtl"] .hero__content-inner {
    text-align: right !important;
}

/* ===========================
   Featured / Trends Section
   =========================== */

html[dir="rtl"] .trends-card__content {
    text-align: right !important;
}

/* ===========================
   Product Detail Page
   =========================== */
html[dir="rtl"] .product-detail__info {
    text-align: right !important;
}

/* ===========================
   Info list items (admin dashboard)
   =========================== */
html[dir="rtl"] .info-list__item {
    text-align: right !important;
}

/* ===========================
   Chevron Arrows (flip for RTL)
   =========================== */
html[dir="rtl"] .feather-chevron-right,
html[dir="rtl"] .feather-arrow-right {
    transform: scaleX(-1) !important;
}

/* ===========================
   Language Switcher
   =========================== */
.lang-switcher-btn {
    background: rgba(201, 162, 77, 0.1);
    border-radius: 6px;
    color: #C9A24D !important;
    transition: all 0.3s;
}

.lang-switcher-btn:hover {
    background: #C9A24D;
    color: white !important;
}

/* ===========================
   Filter Sidebar (Categories page)
   =========================== */
html[dir="rtl"] .filter-sidebar {
    text-align: right !important;
}

html[dir="rtl"] .filter-sidebar__section {
    text-align: right !important;
}

/* ===========================
   TikTok Promo
   =========================== */
html[dir="rtl"] .tiktok-promo__content {
    text-align: right !important;
}

/* ===========================
   Scrolling Ticker RTL
   =========================== */
html[dir="rtl"] .ticker__container,
html[dir="rtl"] .ticker__track {
    direction: ltr !important;
}

html[dir="rtl"] .ticker__track {
    animation: ticker-scroll-rtl 40s linear infinite !important;
}

@keyframes ticker-scroll-rtl {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

/* ===========================
   Hero Slider — Center Alignment
   =========================== */
html[dir="rtl"] .hero {
    text-align: center !important;
}

html[dir="rtl"] .hero__content-inner {
    text-align: center !important;
}

/* ===========================
   Shop Toolbar (Products Page)
   =========================== */
html[dir="rtl"] .shop-toolbar {
    flex-direction: row-reverse !important;
}

html[dir="rtl"] .toolbar-select {
    padding: 8px 12px 8px 32px !important;
    background-position: left 8px center !important;
}

@media (max-width: 768px) {
    html[dir="rtl"] .toolbar-label {
        left: auto !important;
        right: 8px !important;
    }
    
    html[dir="rtl"] .toolbar-select {
        padding-left: 12px !important;
        padding-right: 45px !important;
        text-align: right !important;
    }

    /* Tracking Timeline RTL for Mobile */
    html[dir="rtl"] .tracking-timeline {
        padding-left: 0 !important;
        padding-right: 20px !important;
    }

    html[dir="rtl"] .tracking-progress-container {
        left: auto !important;
        right: 42px !important;
    }

    html[dir="rtl"] .tracking-step__content {
        text-align: right !important;
    }

    html[dir="rtl"] .step-badge {
        right: auto !important;
        left: 0 !important;
    }
}