/* =============================================================
   SpareCom — RTL overrides
   ------------------------------------------------------------
   Pair this file with `bootstrap-rtl.min.css` on Arabic pages.
   It's intentionally minimal: each block fixes a single class
   that the default Bootstrap RTL build does NOT flip correctly.

   Tested against Bootstrap 5.x.
   ============================================================= */

html[dir="rtl"] body {
    text-align: right;
    font-family: 'Tajawal', 'Cairo', 'Segoe UI Arabic', 'Tahoma', sans-serif;
}

/* Numbers should stay LTR even inside RTL layout (Arabic glyphs would flip them) */
html[dir="rtl"] .price,
html[dir="rtl"] .amount,
html[dir="rtl"] .number,
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] .sku,
html[dir="rtl"] .order-id,
html[dir="rtl"] .invoice-number {
    direction: ltr;
    unicode-bidi: embed;
}

/* Dropdowns often rely on absolute positioning that doesn't auto-flip */
html[dir="rtl"] .dropdown-menu {
    left: auto;
    right: 0;
    text-align: right;
}

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

/* Responsive Offcanvas for desktop (must stay in-flow, sticky and visible on >= 1200px) */
@media screen and (min-width: 1200px) {
    html[dir="rtl"] .offcanvas-xl,
    html[dir="rtl"] .filter--offcanvas {
        position: sticky !important;
        top: calc((var(--header-height, 100px) - 48px) + 32px) !important;
        transform: none !important;
        visibility: visible !important;
        width: 100% !important;
        height: auto !important;
        z-index: 10 !important;
        background-color: transparent !important;
        border: 0 !important;
        right: auto !important;
        left: auto !important;
    }
}

/* Mobile Offcanvas drawers (< 1200px) */
@media screen and (max-width: 1199.98px) {
    html[dir="rtl"] .offcanvas-start {
        left: auto !important;
        right: 0 !important;
        transform: translateX(100%) !important;
    }
    html[dir="rtl"] .offcanvas-start.show {
        transform: none !important;
    }
    html[dir="rtl"] .offcanvas-end {
        right: auto !important;
        left: 0 !important;
        transform: translateX(-100%) !important;
    }
    html[dir="rtl"] .offcanvas-end.show {
        transform: none !important;
    }
}

/* Custom check / radio swap */
html[dir="rtl"] .form-check {
    padding-right: 1.5em;
    padding-left: 0;
}
html[dir="rtl"] .form-check-input {
    margin-right: -1.5em;
    margin-left: 0;
}

/* Quick fix for line-awesome icons that have hardcoded left margin */
html[dir="rtl"] .las,
html[dir="rtl"] .lar,
html[dir="rtl"] .lab,
html[dir="rtl"] .fa,
html[dir="rtl"] .fas,
html[dir="rtl"] .far,
html[dir="rtl"] .fab {
    /* let `dir=rtl` handle the natural flip via inline text-align / flex */
}

/* Form required asterisk often sits at end in RTL — nudge it visually */
html[dir="rtl"] .required-asterisk {
    margin-right: 4px;
    margin-left: 0;
}

/* =============================================================
   Banner Slider RTL Adjustments (Prevent text & car overlap)
   ============================================================= */
html[dir="rtl"] .banner-slider-item {
    background-size: contain !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
}

@media screen and (max-width: 991px) {
    html[dir="rtl"] .banner-slider-item {
        background-size: 55% !important;
        background-position: left bottom !important;
    }
}

@media screen and (max-width: 575px) {
    html[dir="rtl"] .banner-slider-item {
        background-size: 65% !important;
        background-position: left bottom !important;
    }
}

html[dir="rtl"] .banner-slider-item__content {
    text-align: right !important;
    position: relative;
    z-index: 5;
}

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

/* =============================================================
   Admin Panel RTL Layout Adjustments (ViserAdmin)
   ============================================================= */
html[dir="rtl"] .sidebar {
    left: auto !important;
    right: 0 !important;
    border-right: none !important;
    border-left: 1px solid #66666675 !important;
}

@media (max-width: 991px) {
    html[dir="rtl"] .sidebar {
        right: -285px !important;
        left: auto !important;
    }
    html[dir="rtl"] .sidebar.open {
        right: 0 !important;
        left: auto !important;
    }
}

html[dir="rtl"] .navbar-wrapper {
    margin-left: 0 !important;
    margin-right: 250px !important;
}

html[dir="rtl"] .body-wrapper {
    margin-left: 0 !important;
    margin-right: 250px !important;
}

@media (max-width: 991px) {
    html[dir="rtl"] .navbar-wrapper {
        margin-right: 0 !important;
    }
    html[dir="rtl"] .body-wrapper {
        margin-right: 0 !important;
    }
}

html[dir="rtl"] .sidebar-menu-item .menu-icon {
    margin-right: 0 !important;
    margin-left: 12px !important;
}

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

html[dir="rtl"] .sidebar-submenu ul li a {
    padding-left: 0 !important;
    padding-right: 45px !important;
}

html[dir="rtl"] .sidebar-submenu ul li a::before {
    left: auto !important;
    right: 25px !important;
}

html[dir="rtl"] .sidebar-submenu ul li a i {
    margin-right: 0 !important;
    margin-left: 8px !important;
}

html[dir="rtl"] .navbar__left .res-sidebar-open-btn {
    margin-right: 0 !important;
    margin-left: 1rem !important;
}

html[dir="rtl"] .navbar-search-field {
    padding-left: 15px !important;
    padding-right: 40px !important;
}

html[dir="rtl"] .navbar-search .la-search {
    left: auto !important;
    right: 15px !important;
}

html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
    float: right !important;
    padding-left: 0.5rem !important;
    padding-right: 0 !important;
}

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

/* Select2 RTL adjustments */
html[dir="rtl"] .select2-container .select2-selection--single .select2-selection__rendered {
    text-align: right;
}
html[dir="rtl"] .select2-results__option {
    text-align: right;
}
html[dir="rtl"] .select2-search__field {
    text-align: right;
    direction: rtl;
}