/**
 * RTL layout fixes for Arabic (dir="rtl").
 * Bootstrap 5.0 LTR CSS does not mirror flex/margin utilities; these rules align the header and base typography.
 */

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;600;700&display=swap");

[dir="rtl"] body {
    font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

/* LTR fragments (phone, email) inside RTL UI */
[dir="rtl"] .text-ltr {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
}

/* --- Topbar --- */
[dir="rtl"] .topbar .row.align-items-center {
    flex-direction: row-reverse;
}

[dir="rtl"] .topbar .col-lg-8 .d-flex.flex-wrap {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

[dir="rtl"] .topbar a .me-2 {
    margin-right: 0 !important;
    margin-left: 0.5rem !important;
}

[dir="rtl"] .topbar a.me-4 {
    margin-right: 0 !important;
    margin-left: 1.5rem !important;
}

[dir="rtl"] .topbar a.text-muted.me-0 {
    margin-left: 0 !important;
}

/* Bootstrap text alignment: mirror lg breakpoints */
[dir="rtl"] .text-lg-start {
    text-align: right !important;
}

[dir="rtl"] .text-lg-end {
    text-align: left !important;
}

/* --- Navbar: logo on the right, links on the left --- */
[dir="rtl"] .navbar.navbar-expand-lg > .container,
[dir="rtl"] .navbar.navbar-expand-lg > .container-fluid {
    flex-direction: row-reverse;
}

[dir="rtl"] .navbar .navbar-nav.ms-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}

[dir="rtl"] .navbar .nav-link .me-1 {
    margin-right: 0 !important;
    margin-left: 0.25rem !important;
}

/* Nav underline corners (template uses left/right) */
[dir="rtl"] .navbar .navbar-nav .nav-item::before {
    left: auto;
    right: 0;
}

[dir="rtl"] .navbar .navbar-nav .nav-item::after {
    right: auto;
    left: 0;
}

/* Dropdown animation origin under RTL */
[dir="rtl"] .navbar .nav-item .dropdown-menu {
    transform-origin: top right;
}

/* Text alignment utilities (Bootstrap) */
[dir="rtl"] .text-start {
    text-align: right !important;
}

[dir="rtl"] .text-end {
    text-align: left !important;
}

/* Back to top button */
[dir="rtl"] .back-to-top {
    right: auto !important;
    left: 30px;
}

/* --- Products filter bar (index / product pages): Arabic must not clip ---
   Browsers often treat inputs as LTR; Bootstrap form-select positions the caret on the physical right. */
[dir="rtl"] .filter-container #category-filter,
[dir="rtl"] .filter-container #product-search {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .filter-container .form-select {
    min-width: 0;
    padding-inline-start: 1rem;
    padding-inline-end: 2.75rem;
    background-position: left 0.75rem center;
}

[dir="rtl"] .filter-container .product-search-group {
    min-width: 0;
}

/* DOM order is [addon][input]; in RTL flex places addon on the right, input on the left — mirror radii + shared edge */
[dir="rtl"] .filter-container .product-search-group .input-group-text {
    border-radius: 0 999px 999px 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-left: 0;
}

[dir="rtl"] .filter-container .product-search-group .form-control {
    border-radius: 999px 0 0 999px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-right: 0;
}

[dir="rtl"] .filter-container .product-search-group .form-control:focus {
    border-left: 1px solid rgba(0, 0, 0, 0.12);
    border-right: 0;
}

/* --- Hero carousel (Arabic): caption must stay inside slide; avoid horizontal clip --- */
[dir="rtl"] .header-carousel .hero-carousel-btns {
    justify-content: flex-start;
}