/* =============================================================================
   RTL OVERRIDES — Arabic / Right-to-Left Support
   Loaded conditionally when lang="ar" / dir="rtl"
   These selectors use [dir="rtl"] so they are completely safe and only
   activate when the HTML element has dir="rtl".
   ============================================================================= */


/* ── Typography ──────────────────────────────────────────────────────────── */
[dir="rtl"] body {
  font-family: 'Cairo', 'Tajawal', system-ui, sans-serif;
  text-align: right;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
  font-family: 'Cairo', 'Tajawal', system-ui, sans-serif;
  letter-spacing: 0 !important;
}

[dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] span,
[dir="rtl"] label, [dir="rtl"] input, [dir="rtl"] textarea {
  font-family: 'Cairo', 'Tajawal', system-ui, sans-serif;
}


/* ── Bootstrap Margin-Start / Margin-End Flip ────────────────────────────── */
[dir="rtl"] .ms-auto { margin-right: auto !important; margin-left: unset !important; }
[dir="rtl"] .me-auto { margin-left: auto !important;  margin-right: unset !important; }

[dir="rtl"] .ms-0 { margin-right: 0 !important;        margin-left: unset !important; }
[dir="rtl"] .ms-1 { margin-right: 0.25rem !important;  margin-left: unset !important; }
[dir="rtl"] .ms-2 { margin-right: 0.5rem !important;   margin-left: unset !important; }
[dir="rtl"] .ms-3 { margin-right: 1rem !important;     margin-left: unset !important; }
[dir="rtl"] .ms-4 { margin-right: 1.5rem !important;   margin-left: unset !important; }
[dir="rtl"] .ms-5 { margin-right: 3rem !important;     margin-left: unset !important; }

[dir="rtl"] .me-0 { margin-left: 0 !important;         margin-right: unset !important; }
[dir="rtl"] .me-1 { margin-left: 0.25rem !important;   margin-right: unset !important; }
[dir="rtl"] .me-2 { margin-left: 0.5rem !important;    margin-right: unset !important; }
[dir="rtl"] .me-3 { margin-left: 1rem !important;      margin-right: unset !important; }
[dir="rtl"] .me-4 { margin-left: 1.5rem !important;    margin-right: unset !important; }
[dir="rtl"] .me-5 { margin-left: 3rem !important;      margin-right: unset !important; }

/* Responsive margins */
@media (min-width: 768px) {
  [dir="rtl"] .ms-md-auto { margin-right: auto !important; margin-left: unset !important; }
  [dir="rtl"] .me-md-auto { margin-left: auto !important;  margin-right: unset !important; }
  [dir="rtl"] .ms-md-0 { margin-right: 0 !important;       margin-left: unset !important; }
  [dir="rtl"] .ms-md-1 { margin-right: 0.25rem !important; margin-left: unset !important; }
  [dir="rtl"] .ms-md-2 { margin-right: 0.5rem !important;  margin-left: unset !important; }
  [dir="rtl"] .ms-md-3 { margin-right: 1rem !important;    margin-left: unset !important; }
  [dir="rtl"] .ms-md-4 { margin-right: 1.5rem !important;  margin-left: unset !important; }
  [dir="rtl"] .me-md-0 { margin-left: 0 !important;        margin-right: unset !important; }
  [dir="rtl"] .me-md-1 { margin-left: 0.25rem !important;  margin-right: unset !important; }
  [dir="rtl"] .me-md-2 { margin-left: 0.5rem !important;   margin-right: unset !important; }
  [dir="rtl"] .me-md-3 { margin-left: 1rem !important;     margin-right: unset !important; }
  [dir="rtl"] .me-md-4 { margin-left: 1.5rem !important;   margin-right: unset !important; }
}

@media (min-width: 992px) {
  [dir="rtl"] .ms-lg-auto { margin-right: auto !important; margin-left: unset !important; }
  [dir="rtl"] .me-lg-auto { margin-left: auto !important;  margin-right: unset !important; }
  [dir="rtl"] .ms-lg-0 { margin-right: 0 !important;       margin-left: unset !important; }
  [dir="rtl"] .ms-lg-1 { margin-right: 0.25rem !important; margin-left: unset !important; }
  [dir="rtl"] .ms-lg-2 { margin-right: 0.5rem !important;  margin-left: unset !important; }
  [dir="rtl"] .ms-lg-3 { margin-right: 1rem !important;    margin-left: unset !important; }
  [dir="rtl"] .ms-lg-4 { margin-right: 1.5rem !important;  margin-left: unset !important; }
  [dir="rtl"] .me-lg-0 { margin-left: 0 !important;        margin-right: unset !important; }
  [dir="rtl"] .me-lg-1 { margin-left: 0.25rem !important;  margin-right: unset !important; }
  [dir="rtl"] .me-lg-2 { margin-left: 0.5rem !important;   margin-right: unset !important; }
  [dir="rtl"] .me-lg-3 { margin-left: 1rem !important;     margin-right: unset !important; }
  [dir="rtl"] .me-lg-4 { margin-left: 1.5rem !important;   margin-right: unset !important; }
}


/* ── Bootstrap Padding-Start / Padding-End Flip ─────────────────────────── */
[dir="rtl"] .ps-0 { padding-right: 0 !important;        padding-left: unset !important; }
[dir="rtl"] .ps-1 { padding-right: 0.25rem !important;  padding-left: unset !important; }
[dir="rtl"] .ps-2 { padding-right: 0.5rem !important;   padding-left: unset !important; }
[dir="rtl"] .ps-3 { padding-right: 1rem !important;     padding-left: unset !important; }
[dir="rtl"] .ps-4 { padding-right: 1.5rem !important;   padding-left: unset !important; }
[dir="rtl"] .ps-5 { padding-right: 3rem !important;     padding-left: unset !important; }

[dir="rtl"] .pe-0 { padding-left: 0 !important;         padding-right: unset !important; }
[dir="rtl"] .pe-1 { padding-left: 0.25rem !important;   padding-right: unset !important; }
[dir="rtl"] .pe-2 { padding-left: 0.5rem !important;    padding-right: unset !important; }
[dir="rtl"] .pe-3 { padding-left: 1rem !important;      padding-right: unset !important; }
[dir="rtl"] .pe-4 { padding-left: 1.5rem !important;    padding-right: unset !important; }
[dir="rtl"] .pe-5 { padding-left: 3rem !important;      padding-right: unset !important; }


/* ── Bootstrap Text Alignment ────────────────────────────────────────────── */
[dir="rtl"] .text-start    { text-align: right !important; }
[dir="rtl"] .text-end      { text-align: left  !important; }
[dir="rtl"] .text-sm-start { text-align: right !important; }
[dir="rtl"] .text-sm-end   { text-align: left  !important; }

@media (min-width: 768px) {
  [dir="rtl"] .text-md-start { text-align: right !important; }
  [dir="rtl"] .text-md-end   { text-align: left  !important; }
}
@media (min-width: 992px) {
  [dir="rtl"] .text-lg-start { text-align: right !important; }
  [dir="rtl"] .text-lg-end   { text-align: left  !important; }
}
@media (min-width: 1200px) {
  [dir="rtl"] .text-xl-start { text-align: right !important; }
  [dir="rtl"] .text-xl-end   { text-align: left  !important; }
}


/* ── Bootstrap Float ─────────────────────────────────────────────────────── */
[dir="rtl"] .float-start { float: right !important; }
[dir="rtl"] .float-end   { float: left  !important; }


/* ── Bootstrap Border-Start / Border-End ────────────────────────────────── */
[dir="rtl"] .border-start {
  border-right: var(--bs-border-width, 1px) var(--bs-border-style, solid) var(--bs-border-color, #dee2e6) !important;
  border-left: 0 !important;
}
[dir="rtl"] .border-end {
  border-left: var(--bs-border-width, 1px) var(--bs-border-style, solid) var(--bs-border-color, #dee2e6) !important;
  border-right: 0 !important;
}


/* ── Bootstrap Rounded-Start / Rounded-End ──────────────────────────────── */
[dir="rtl"] .rounded-start {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: var(--bs-border-radius, 0.375rem) !important;
  border-bottom-right-radius: var(--bs-border-radius, 0.375rem) !important;
}
[dir="rtl"] .rounded-end {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-top-left-radius: var(--bs-border-radius, 0.375rem) !important;
  border-bottom-left-radius: var(--bs-border-radius, 0.375rem) !important;
}


/* ── Bootstrap Dropdown ──────────────────────────────────────────────────── */
[dir="rtl"] .dropdown-menu {
  text-align: right;
}
[dir="rtl"] .dropdown-menu-end {
  right: auto !important;
  left: 0 !important;
}
[dir="rtl"] .dropdown-item {
  text-align: right;
}


/* ── Bootstrap Navbar ────────────────────────────────────────────────────── */
[dir="rtl"] .navbar-brand {
  margin-left: 1rem;
  margin-right: 0;
}
[dir="rtl"] .navbar-toggler {
  margin-left: 0;
  margin-right: auto;
}
[dir="rtl"] .navbar-collapse {
  text-align: right;
}


/* ── Bootstrap Input Group ───────────────────────────────────────────────── */
[dir="rtl"] .input-group {
  flex-direction: row-reverse;
}
[dir="rtl"] .input-group > .form-control:not(:last-child),
[dir="rtl"] .input-group > .form-select:not(:last-child) {
  border-radius: 0 var(--bs-border-radius, 0.375rem) var(--bs-border-radius, 0.375rem) 0;
  border-right: 0;
  border-left: 1px solid var(--bs-border-color, #dee2e6);
}
[dir="rtl"] .input-group > .input-group-text:first-child,
[dir="rtl"] .input-group > .btn:first-child {
  border-radius: var(--bs-border-radius, 0.375rem) 0 0 var(--bs-border-radius, 0.375rem);
}


/* ── Bootstrap Breadcrumb ────────────────────────────────────────────────── */
[dir="rtl"] .breadcrumb {
  flex-direction: row-reverse;
  justify-content: flex-end;
  padding-right: 0;
}
[dir="rtl"] .breadcrumb-item + .breadcrumb-item {
  padding-left: 0;
  padding-right: var(--bs-breadcrumb-item-padding-x, 0.5rem);
}
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before {
  float: right;
  padding-right: 0;
  padding-left: var(--bs-breadcrumb-item-padding-x, 0.5rem);
  content: "\F285"; /* bootstrap-icons chevron-right, visually reversed */
}


/* ── Bootstrap Offset Columns ────────────────────────────────────────────── */
[dir="rtl"] .offset-1  { margin-right: 8.333333% !important;   margin-left: 0 !important; }
[dir="rtl"] .offset-2  { margin-right: 16.666667% !important;  margin-left: 0 !important; }
[dir="rtl"] .offset-3  { margin-right: 25% !important;         margin-left: 0 !important; }
[dir="rtl"] .offset-4  { margin-right: 33.333333% !important;  margin-left: 0 !important; }
@media (min-width: 768px) {
  [dir="rtl"] .offset-md-1 { margin-right: 8.333333% !important;  margin-left: 0 !important; }
  [dir="rtl"] .offset-md-2 { margin-right: 16.666667% !important; margin-left: 0 !important; }
  [dir="rtl"] .offset-md-3 { margin-right: 25% !important;        margin-left: 0 !important; }
  [dir="rtl"] .offset-md-4 { margin-right: 33.333333% !important; margin-left: 0 !important; }
}
@media (min-width: 992px) {
  [dir="rtl"] .offset-lg-1 { margin-right: 8.333333% !important;  margin-left: 0 !important; }
  [dir="rtl"] .offset-lg-2 { margin-right: 16.666667% !important; margin-left: 0 !important; }
  [dir="rtl"] .offset-lg-3 { margin-right: 25% !important;        margin-left: 0 !important; }
  [dir="rtl"] .offset-lg-4 { margin-right: 33.333333% !important; margin-left: 0 !important; }
}


/* ── Directional Arrow Icons ─────────────────────────────────────────────── */
/* Flip fa-arrow-right / fa-arrow-left inside nav/cta buttons for Arabic */
[dir="rtl"] .btn .fa-arrow-right,
[dir="rtl"] a .fa-arrow-right,
[dir="rtl"] .btn .fa-chevron-right,
[dir="rtl"] a .fa-chevron-right {
  display: inline-block;
  transform: scaleX(-1);
}
[dir="rtl"] .btn .fa-arrow-left,
[dir="rtl"] a .fa-arrow-left,
[dir="rtl"] .btn .fa-chevron-left,
[dir="rtl"] a .fa-chevron-left {
  display: inline-block;
  transform: scaleX(-1);
}


/* ── Alert Border Side ───────────────────────────────────────────────────── */
[dir="rtl"] .alert-success {
  border-left: none !important;
  border-right: 4px solid var(--bs-success) !important;
}
[dir="rtl"] .alert-danger {
  border-left: none !important;
  border-right: 4px solid var(--bs-danger) !important;
}


/* ── Product Quick-Order Button (top-right → top-left in RTL) ────────────── */
[dir="rtl"] .product-quick-order {
  right: auto;
  left: 1rem;
}


/* ── Product Card Badges (top-left → top-right in RTL) ──────────────────── */
[dir="rtl"] .product-compact-badge-hot,
[dir="rtl"] .product-compact-badge-featured,
[dir="rtl"] .product-compact-badge-stock {
  left: auto;
  right: 0.5rem;
}


/* ── Product Modal Badge ─────────────────────────────────────────────────── */
[dir="rtl"] #productModal .product-badge {
  right: auto;
  left: 12px;
}

[dir="rtl"] #productModal .price-content {
  text-align: right;
}


/* ── Hero Floating Decorative Elements ───────────────────────────────────── */
[dir="rtl"] .floating-element-1 {
  right: auto;
  left: -10%;
}
[dir="rtl"] .floating-element-2 {
  left: auto;
  right: -15%;
}
[dir="rtl"] .floating-element-3 {
  right: auto;
  left: -5%;
}


/* ── Hover translateX Effects ────────────────────────────────────────────── */
[dir="rtl"] .feature-item:hover {
  transform: translateX(-5px);
}
[dir="rtl"] .info-item:hover {
  transform: translateX(-5px);
}
[dir="rtl"] .language-selector .dropdown-item:hover {
  transform: translateX(-5px) !important;
}


/* ── Newsletter Input Group ──────────────────────────────────────────────── */
[dir="rtl"] #newsletter-signup .input-group-text {
  border-radius: 0 2rem 2rem 0 !important;
}
[dir="rtl"] #newsletter-signup .form-control {
  border-radius: 2rem 0 0 2rem !important;
}


/* ── btn-gradient Shimmer Animation ─────────────────────────────────────── */
[dir="rtl"] .btn-gradient::before {
  left: auto;
  right: -100%;
}
[dir="rtl"] .btn-gradient:hover::before {
  right: 100%;
  left: auto;
}


/* ── Section Badge / Tag alignment ───────────────────────────────────────── */
[dir="rtl"] .section-badge {
  direction: rtl;
}


/* ── Splide Carousel Arrows (direction handled via JS, icons flip here) ──── */
[dir="rtl"] .splide__arrow--prev svg,
[dir="rtl"] .splide__arrow--next svg {
  transform: scaleX(-1);
}


/* ── Language Selector Fixed Button (bottom-right → bottom-left) ─────────── */
[dir="rtl"] .language-selector {
  right: auto !important;
  left: 20px !important;
}
@media (max-width: 768px) {
  [dir="rtl"] .language-selector {
    right: auto !important;
    left: 15px !important;
  }
}


/* ── Cart FAB (bottom-right → bottom-left) ───────────────────────────────── */
[dir="rtl"] .cart-fab {
  right: auto;
  left: 2rem;
}


/* ── Cart Offcanvas (slide from left in RTL) ────────────────────────────── */
[dir="rtl"] .cart-offcanvas {
  right: auto;
  left: 0;
  box-shadow: 8px 0 40px rgba(0, 0, 0, 0.15);
  transform: translateX(-100%);
}
[dir="rtl"] .cart-offcanvas.active {
  transform: translateX(0);
  box-shadow: 12px 0 50px rgba(0, 0, 0, 0.25);
}
[dir="rtl"] .cart-offcanvas.closing {
  transform: translateX(-100%);
}


/* ── Swiper / Splide RTL Arrow Direction ────────────────────────────────── */
[dir="rtl"] .swiper-button-prev,
[dir="rtl"] .swiper-button-next {
  transform: scaleX(-1);
}


/* ── Category Tile hover overlay arrow ──────────────────────────────────── */
[dir="rtl"] .category-tile-overlay .overlay-arrow {
  transform: scaleX(-1);
}


/* ── General list/icon alignment ────────────────────────────────────────── */
[dir="rtl"] .list-unstyled,
[dir="rtl"] .list-group {
  padding-right: 0;
  padding-left: 0;
  text-align: right;
}

[dir="rtl"] .d-flex.gap-2.align-items-center,
[dir="rtl"] .d-flex.align-items-start.gap-2 {
  flex-direction: row-reverse;
}

/* Keep phone numbers LTR regardless of document direction */
[dir="rtl"] .no-rotate,
[dir="rtl"] [dir="ltr"] {
  direction: ltr;
  unicode-bidi: embed;
  text-align: left;
}


/* ── Form controls ───────────────────────────────────────────────────────── */
[dir="rtl"] .form-control,
[dir="rtl"] .form-select {
  text-align: right;
}
[dir="rtl"] .form-check {
  padding-right: 1.5em;
  padding-left: 0;
}
[dir="rtl"] .form-check-input {
  float: right;
  margin-right: -1.5em;
  margin-left: 0;
}
[dir="rtl"] .form-label {
  display: block;
  text-align: right;
}