/* AUTO-GENERATED from mph-html-design/css/rtl.css by scripts/sync-design.mjs.
   Do not edit here - edit the design file and re-run `npm run sync:design`.
*/

/* ==========================================================================
   Muscat Private Hospital - Arabic / RTL overlay
   Loaded after style.css on the pages under /ar/. Only mirrors direction and
   swaps physical offsets; it never restyles a component, so the Arabic site
   stays visually identical to the English one apart from being flipped.
   ========================================================================== */

/*
 * The last piece of the sideways-scroll fix above.
 *
 * LTR and RTL are not symmetrical about overflow. In LTR, content hanging off
 * the left edge is simply unreachable - it adds nothing to `scrollWidth`. In
 * RTL the scroll origin is the right edge, so the same overflow becomes real
 * scrollable width. The mega-menu panel sits at left: -75px in Arabic and
 * left: -65px in English; identical geometry, but only Arabic got a scrollbar
 * for it.
 *
 * `clip` rather than `hidden` on purpose: `hidden` would make this a scroll
 * container and break the sticky header, `clip` does not.
 *
 * On the root element, not on `body`: overflow set on `body` only reaches the
 * viewport by propagation, and that did not clamp `scrollWidth` here - the
 * measurement was unchanged at 1515px. The root has no such indirection.
 */
html[dir="rtl"] {
    overflow-x: clip;
}

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

/* Arabic needs a little more leading than the Latin setting. */
html[dir="rtl"] p,
html[dir="rtl"] li,
html[dir="rtl"] .section-desc,
html[dir="rtl"] .feats p,
html[dir="rtl"] .emerg__cta .big {
    line-height: 1.9;
}

/* Latin fragments kept inside Arabic copy (numbers, e-mail, URLs). */
html[dir="rtl"] .ltr,
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"] {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
}

/* --- Header / navigation ------------------------------------------------ */
html[dir="rtl"] .top-header-content,
html[dir="rtl"] .navbar,
html[dir="rtl"] .nav-menu,
html[dir="rtl"] .top-header-left,
html[dir="rtl"] .top-header-right {
    flex-direction: row-reverse;
}

/*
 * The panel is centred on its nav item by `left: 50%` plus a
 * `translateX(-50%)`, and that centring is direction-agnostic - it already
 * does the right thing under RTL, mirrored along with the nav item it hangs
 * from. The override that used to live here re-anchored it to `right: 0`
 * without clearing the transform, so the panel was pinned to the right edge
 * and then shoved half its own width (570px) further left again, landing
 * off-screen at left: -1174px.
 *
 * That mattered more than an invisible panel should. RTL scrolls from the
 * right, so anything spilling off to the left becomes real scrollable width:
 * every Arabic page scrolled sideways by 1174px because of a panel you cannot
 * see until you hover it. Re-anchoring to the item and clearing the transform
 * only halved it; letting the base centring stand removes it.
 *
 * So: no positioning override here on purpose. Do not re-add one without
 * checking `document.documentElement.scrollWidth` on an Arabic page.
 */

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

/* --- Floating elements: mirror to the opposite corner ------------------- */
html[dir="rtl"] .floating-appointment-fab {
    left: auto;
    right: 24px;
}

@media (max-width: 640px) {
    html[dir="rtl"] .floating-appointment-fab {
        left: auto;
        right: 14px;
    }
}

/* The widget stack is injected with inline styles pinned right; flip it. */
html[dir="rtl"] .mphw-stack {
    right: auto !important;
    left: 20px !important;
}

/* --- Directional icons and arrows --------------------------------------- */
html[dir="rtl"] .icon-circle svg,
html[dir="rtl"] .arw,
html[dir="rtl"] .new-about-btn-secondary,
html[dir="rtl"] .btn-pill-navy .icon-circle {
    transform: scaleX(-1);
}

html[dir="rtl"] .emerg__acts .btn:hover .arw {
    transform: scaleX(-1) translateX(3px);
}

/* --- Emergency band ----------------------------------------------------- */
html[dir="rtl"] .emerg-mph3 .shead {
    direction: rtl;
}

html[dir="rtl"] .emerg-mph3 .shead__mark::after {
    order: -1;
}

html[dir="rtl"] .feats > article {
    border-left: 0;
    border-right: 1px solid rgba(1, 84, 133, 0.16);
    padding-left: clamp(20px, 2vw, 30px);
    padding-right: clamp(20px, 2vw, 30px);
}

html[dir="rtl"] .feats > article:first-child {
    border-right: 0;
    padding-right: 0;
}

html[dir="rtl"] .feats > article:last-child {
    padding-left: 0;
}

@media (max-width: 1100px) {
    html[dir="rtl"] .feats > article:nth-child(odd) {
        border-right: 0;
        padding-right: 0;
    }
}

@media (max-width: 700px) {
    html[dir="rtl"] .feats > article {
        border-right: 0;
        padding-right: 0;
        padding-left: 0;
    }
}

/* Cards that carry a left accent rule need it on the right instead. */
html[dir="rtl"] .contact-emergency-strip {
    border-left-width: 1px;
}

/* --- Marquee ------------------------------------------------------------ */
/* The insurance track translates negatively, which in RTL would run it
   off-screen the wrong way; reverse it so it scrolls with the reading flow. */
html[dir="rtl"] .insurance-partners-marquee {
    animation-direction: reverse;
}

/* --- Doctors carousel ---------------------------------------------------- */
/* The track is laid out RTL by the document direction, so the paging step is
   applied in the opposite sense; js/doctors-carousel.js reads this flag. */
html[dir="rtl"] .doctors-track {
    --rtl: 1;
}

html[dir="rtl"] .doctors-nav--prev svg,
html[dir="rtl"] .doctors-nav--next svg {
    transform: scaleX(-1);
}

/* --- Lists and list markers --------------------------------------------- */
html[dir="rtl"] ul,
html[dir="rtl"] ol {
    padding-right: 1.2em;
    padding-left: 0;
}

html[dir="rtl"] .ab-checks li,
html[dir="rtl"] .dr-roles li {
    padding-right: 0;
}

/* --- Forms -------------------------------------------------------------- */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    text-align: right;
    direction: rtl;
}

html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="email"] {
    text-align: left;
    direction: ltr;
}

/* --- Footer ------------------------------------------------------------- */
html[dir="rtl"] .footer-grid,
html[dir="rtl"] .footer-bottom {
    text-align: right;
}

/* --- Hero slider arrows -------------------------------------------------- */
/* Mirror the edge positions and flip the chevrons. */
html[dir="rtl"] .hero-slider-nav--prev {
    left: auto;
    right: max(16px, calc((100% - 1260px) / 4));
}

html[dir="rtl"] .hero-slider-nav--next {
    right: auto;
    left: max(16px, calc((100% - 1260px) / 4));
}

html[dir="rtl"] .hero-slider-nav svg {
    transform: scaleX(-1);
}

@media (max-width: 900px) {
    html[dir="rtl"] .hero-slider-nav--prev { left: auto; right: 10px; }
    html[dir="rtl"] .hero-slider-nav--next { right: auto; left: 10px; }
}

/* --- Carousel stage arrows ------------------------------------------------ */
html[dir="rtl"] .carousel-stage-nav--prev { left: auto; right: -56px; }
html[dir="rtl"] .carousel-stage-nav--next { right: auto; left: -56px; }
html[dir="rtl"] .carousel-stage-nav svg { transform: scaleX(-1); }

@media (max-width: 1420px) {
    html[dir="rtl"] .carousel-stage-nav--prev { left: auto; right: 8px; }
    html[dir="rtl"] .carousel-stage-nav--next { right: auto; left: 8px; }
}