/*
|--------------------------------------------------------------------------
| Right-to-left overrides
|--------------------------------------------------------------------------
|
| Loaded only when the active locale is Arabic.
|
| The main stylesheet is authored left-to-right. Because the layout sets
| dir="rtl" on <html>, flexbox and grid already lay out right-to-left, so this
| file only needs to correct the *physical* declarations that direction
| swapping does not touch:
|
|   - left / right offsets and insets
|   - text-align
|   - background-position
|   - scaleX on directional icons and hover transforms
|   - inputs that must stay LTR (tel, email, url, number)
|
*/

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

/* =========================================================
   1. TEXT ALIGNMENT
   ========================================================== */

html[dir='rtl'] body,
html[dir='rtl'] h1, html[dir='rtl'] h2, html[dir='rtl'] h3,
html[dir='rtl'] h4, html[dir='rtl'] h5, html[dir='rtl'] h6,
html[dir='rtl'] p, html[dir='rtl'] li, html[dir='rtl'] td,
html[dir='rtl'] th, html[dir='rtl'] label, html[dir='rtl'] figcaption {
    text-align: right;
}

html[dir='rtl'] .text-start { text-align: right !important; }
html[dir='rtl'] .text-end   { text-align: left !important; }

/* Latin-only blocks that must stay left-aligned inside an Arabic page */
html[dir='rtl'] [dir='ltr'],
html[dir='rtl'] .ltr {
    text-align: left;
    direction: ltr;
    unicode-bidi: isolate;
}

/* Lists */

html[dir='rtl'] ul, html[dir='rtl'] ol {
    padding-left: 0;
    padding-right: 20px;
}

html[dir='rtl'] .footer-column ul,
html[dir='rtl'] .mobile-navigation {
    padding-right: 0;
}

/* =========================================================
   2. PHYSICAL OFFSETS  (left <-> right)
   ========================================================== */

/* Navigation underline indicator */

html[dir='rtl'] .nav-link::after {
    left: auto;
    right: 0;
}

html[dir='rtl'] .product-tabs .nav-tabs .nav-link.active::after {
    left: auto;
    right: 0;
}

/* Section / page eyebrow leading rule */

html[dir='rtl'] .section-eyebrow::before,
html[dir='rtl'] .page-hero-eyebrow::before {
    left: auto;
    right: 0;
}

/* Hero eyebrow tick */

html[dir='rtl'] .hero-eyebrow > span {
    left: auto;
    right: 0;
}

/* Footer link hover rule */

html[dir='rtl'] .footer-column ul li a::before {
    left: auto;
    right: 0;
}

/* Card arrow pill anchored to the trailing edge */

html[dir='rtl'] .round-arrow {
    left: auto;
    right: 0;
}

/* Back-to-top lives on the left in RTL */

html[dir='rtl'] .back-to-top {
    right: auto;
    left: 25px;
}


/* Floating WhatsApp sits on the left in RTL */
html[dir='rtl'] .floating-whatsapp {
    right: auto;
    left: 25px;
}

/* Contact card icon badge */

html[dir='rtl'] .contact-card__icon,
html[dir='rtl'] .contact-icon {
    left: auto;
    right: 0;
}

/* Lightbox controls */

html[dir='rtl'] .lightbox-close {
    left: 28px;
    right: auto;
}

html[dir='rtl'] .lightbox-nav-next {
    left: 24px;
    right: auto;
}

html[dir='rtl'] .lightbox-nav-prev {
    left: auto;
    right: 24px;
}

/* Search overlay close button */

html[dir='rtl'] .search-close {
    left: 28px;
    right: auto;
}

/* =========================================================
   3. DIRECTIONAL ICONS
   ========================================================== */

/* Any arrow that encodes "forward" flips, because "forward" is leftward
   when reading right-to-left. */

html[dir='rtl'] .bi-arrow-right,
html[dir='rtl'] .bi-arrow-left,
html[dir='rtl'] .bi-arrow-up-right,
html[dir='rtl'] .bi-chevron-right,
html[dir='rtl'] .bi-chevron-left {
    transform: scaleX(-1);
}

/* The back-to-top arrow points up in both directions */
html[dir='rtl'] .back-to-top .bi-arrow-up {
    transform: none;
}

/* Brand mark is always LTR */
html[dir='rtl'] .brand-logo,
html[dir='rtl'] .footer-brand img {
    direction: ltr;
}

/* =========================================================
   4. MARQUEE
   ========================================================== */

html[dir='rtl'] .marquee-track,
html[dir='rtl'] .marquee-inner {
    direction: rtl;
}

/* =========================================================
   5. FORMS
   ========================================================== */

html[dir='rtl'] input,
html[dir='rtl'] select,
html[dir='rtl'] textarea {
    text-align: right;
}

html[dir='rtl'] input::placeholder,
html[dir='rtl'] textarea::placeholder {
    text-align: right;
    opacity: 1;
}

/* Native select arrow moves to the mirrored side */
html[dir='rtl'] select {
    background-position: left 14px center;
    padding-left: 40px;
    padding-right: 16px;
}

/* Values that are read left-to-right stay left-to-right */

html[dir='rtl'] input[type='tel'],
html[dir='rtl'] input[type='email'],
html[dir='rtl'] input[type='url'],
html[dir='rtl'] input[type='number'],
html[dir='rtl'] input[type='search'] {
    direction: ltr;
    text-align: left;
    unicode-bidi: isolate;
}

html[dir='rtl'] textarea {
    line-height: 1.9;
}

/* =========================================================
   6. NUMBERED LISTS
   ========================================================== */

/* Mobile menu counters and ordered step numbers */
html[dir='rtl'] .mobile-navigation a span {
    margin-left: 0;
    margin-right: 14px;
}

html[dir='rtl'] .process-step__number,
html[dir='rtl'] .feature-number {
    margin-left: 0;
    margin-right: auto;
}

/* =========================================================
   7. MISC
   ========================================================== */

/* Scrollable spec tables scroll from the inline start edge */
html[dir='rtl'] .specs-wrapper,
html[dir='rtl'] .table-responsive {
    direction: rtl;
}

/* Dropdown carets */
html[dir='rtl'] .caret,
html[dir='rtl'] .bi-chevron-down {
    transform: none;
}

/* Print: never mirror the layout */
@media print {
    html[dir='rtl'] {
        direction: ltr;
    }
}