/* RTL overrides for Arabic (html[dir="rtl"]) — covers header/nav/product cards/cart/checkout/footer.
   Not exhaustive: base layout mostly follows dir="rtl" automatically via flexbox; this file
   fixes the spots that hardcode left/right or need mirroring. */

html[dir="rtl"] body {
    text-align: right;
}

html[dir="rtl"] .top-bar .container,
html[dir="rtl"] .header-content,
html[dir="rtl"] .header-actions,
html[dir="rtl"] .footer-bottom,
html[dir="rtl"] .cart-actions,
html[dir="rtl"] .totals-row,
html[dir="rtl"] .summary-item {
    direction: rtl;
}

html[dir="rtl"] .search-bar input {
    text-align: right;
}

html[dir="rtl"] .nav-list .nav-dropdown .dropdown-menu {
    left: auto;
    right: 0;
    text-align: right;
}

html[dir="rtl"] .nav-list .dropdown-menu a .count {
    float: left;
}

html[dir="rtl"] .cart-icon .cart-count,
html[dir="rtl"] .cart-badge {
    right: auto;
    left: -8px;
}

html[dir="rtl"] .account-dropdown-menu {
    right: auto;
    left: 0;
}

html[dir="rtl"] .account-dropdown-menu li a i {
    margin-right: 0;
    margin-left: 6px;
}

html[dir="rtl"] .whatsapp-float,
html[dir="rtl"] .back-to-top {
    right: auto;
    left: 30px;
}

html[dir="rtl"] .main-nav {
    right: auto;
    left: 0;
}

@media (max-width: 992px) {
    html[dir="rtl"] .main-nav {
        transform: translateX(-100%);
    }
    html[dir="rtl"] .main-nav.active {
        transform: translateX(0);
    }
    html[dir="rtl"] .main-nav {
        box-shadow: 8px 0 30px rgba(0,0,0,0.15);
    }
    html[dir="rtl"] .mobile-nav-close {
        align-self: flex-start;
    }
}

html[dir="rtl"] .products-listing .container,
html[dir="rtl"] .checkout-section .container,
html[dir="rtl"] .cart-content {
    direction: rtl;
}

html[dir="rtl"] .footer-grid,
html[dir="rtl"] .footer-links,
html[dir="rtl"] .footer-contact {
    text-align: right;
}

html[dir="rtl"] .footer-contact li i,
html[dir="rtl"] .top-bar-link i {
    margin-left: 5px;
    margin-right: 0;
}

html[dir="rtl"] .product-card,
html[dir="rtl"] .product-info {
    text-align: right;
}

html[dir="rtl"] .product-badge {
    left: auto;
    right: 10px;
}

html[dir="rtl"] .rating {
    direction: ltr;
    display: inline-block;
}

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