/*
 * Arabic / RTL fixes for the public site.
 *
 * Loaded last, and only when the locale is right-to-left (see web/layouts/app.blade.php),
 * on top of bootstrap.rtl.min.css and the generated base/shortcodes/theme-style/style *.rtl.css files.
 * Everything here is something those builds cannot express automatically.
 */

/* ---- Arabic typography ------------------------------------------------------------------
 * Arabic is a connected script: any letter-spacing (the theme uses negative tracking on
 * headings) pulls the joined letters apart or on top of each other. */
body.rtl,
body.rtl *,
body.rtl *::before,
body.rtl *::after {
    letter-spacing: normal !important;
}

/* Elementor sets the highlighted part of section titles in Playfair Display italic. That font
 * is Latin-only and Arabic has no italic, so the browser fakes a slant. */
body.rtl .title-sub {
    font-style: normal !important;
}

/* ---- Marquees (testimonials, client logos) ----------------------------------------------
 * animate.css scrolls a marquee row with translateX(0 -> -50%). The row holds its items twice, and
 * in RTL it is anchored to the right edge and overflows to the left, so moving it further left
 * scrolls everything out of view and leaves a blank strip. Mirror the movement (same name, so it
 * replaces animate.css's keyframes for every marquee). */
@keyframes marquee {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(50%);
    }
}

/* ---- Hero slider ------------------------------------------------------------------------
 * The hero photos are art-directed: dark area on the left, the doctor on the right. Mirroring the
 * text column would put it on top of the doctor, and the photo itself must not be flipped (it
 * contains lettering). So the column stays where it is; only its text runs right-to-left. */
body.rtl .banner-slider .swiper-slide {
    direction: ltr;
}

body.rtl .banner-slider .banner-content {
    direction: rtl;
}

body.rtl .slider-img {
    background-position: top left;
}

/* ---- Form fields ------------------------------------------------------------------------
 * Browsers force direction:ltr on email/tel/url inputs (what is typed is left-to-right data), which
 * also left-aligns the Arabic placeholder, right where the mirrored send button sits. Keep the
 * data LTR but align it, and the placeholder, to the right. */
body.rtl :is(input[type="email"], input[type="tel"], input[type="url"]) {
    direction: ltr;
    text-align: right;
}

/* ---- Direction-dependent icons and shapes -----------------------------------------------
 * Icon-font arrows are glyphs, so they are not mirrored with the layout. Flip the ::before
 * (not the <i>), because the theme animates the <i> itself on button hover. */
body.rtl :is(.flaticon-right-arrow-1, .flaticon-right-up)::before {
    display: inline-block;
    transform: scaleX(-1);
}

/* The hero slider arrows are drawn by the theme itself (next = →, prev = ←) and, unlike stock
 * Swiper, do not swap in RTL. There "next" sits on the left and moves left. */
body.rtl .swiper.banner-slider .swiper-button-next:after {
    transform: rotate(180deg);
}

body.rtl .swiper.banner-slider .swiper-button-prev:after {
    transform: none;
}

/* The concave corner behind the service-card button is an inline SVG path drawn for the
 * bottom-right corner; its container is already moved to the left, the path is not. */
body.rtl .shape-item-icon svg {
    transform: scaleX(-1);
}

/* ---- Elementor corner cut-outs ----------------------------------------------------------
 * Elementor already moves these elements to the other side under body.rtl, but the radial
 * gradient that draws the rounded cut-out still points at the old corner. Generated by running
 * rtlcss over the gradient declarations of post-1472 / 13845 / 5850 / 6767. */
body.rtl .elementor-1472 .elementor-element.elementor-element-3295a88 > .elementor-widget-container,
body.rtl .elementor-1472 .elementor-element.elementor-element-0b3648c > .elementor-widget-container,
body.rtl .elementor-13845 .elementor-element.elementor-element-7c9ef21 > .elementor-widget-container,
body.rtl .elementor-5850 .elementor-element.elementor-element-9022a6a > .elementor-widget-container,
body.rtl .elementor-6767 .elementor-element.elementor-element-49f3049 > .elementor-widget-container {
    background-image: radial-gradient(at top right, #FFFFFF00 70%, #FFFFFF 72%);
}

body.rtl .elementor-13845 .elementor-element.elementor-element-3df6d5e > .elementor-widget-container,
body.rtl .elementor-5850 .elementor-element.elementor-element-3424fa9 > .elementor-widget-container,
body.rtl .elementor-6767 .elementor-element.elementor-element-100c78c > .elementor-widget-container {
    background-image: radial-gradient(at top left, #FFFFFF00 70%, #FFFFFF 72%);
}