/* =====================================================
   Arabic-only layer. Loaded after style.rtl.css.

   The directional mirroring (margins, paddings, floats, text-align,
   left/right offsets, border radii...) is NOT done here — it lives in
   style.rtl.css and bootstrap.rtl.min.css, which are generated from the
   LTR originals with rtlcss:

       npx rtlcss public/assets/css/style.css        public/assets/css/style.rtl.css
       npx rtlcss public/assets/css/bootstrap.min.css public/assets/css/bootstrap.rtl.min.css

   Re-run those two commands after editing the LTR source files.

   What belongs in this file: typography and the handful of things a
   mechanical flip cannot know about.
   ===================================================== */

/* ---------- Typography ----------
   The theme's Playfair Display / Inter carry no Arabic glyphs, so the browser
   silently falls back to a system font. Repointing the two theme variables
   swaps the typeface everywhere in one go. */

:root {
    --title-font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
    --body-font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
    --theme-font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

body {
    font-family: var(--body-font);
}

/* Icon fonts must survive the swap above, otherwise every icon turns into a box */
[class^="fa-"],
[class*=" fa-"],
.fab, .fas, .far, .fal,
.fa-solid, .fa-regular, .fa-light, .fa-thin, .fa-sharp {
    font-family: var(--icon-font, "Font Awesome 6 Pro") !important;
}

.fab, .fa-brands {
    font-family: "Font Awesome 6 Brands" !important;
}

.swiper-button-next:after,
.swiper-button-prev:after,
[class^="swiper-"]:after {
    font-family: swiper-icons !important;
}

/* Arabic sits taller than Latin at display sizes and needs more leading */
h1, h2, h3, h4, h5, h6,
.sec-title,
.hero-title,
.box-title,
.blog-title {
    line-height: 1.6;
}

.sub-title,
.breadcumb-title {
    line-height: 1.7;
}

/* ---------- Things a mechanical flip cannot infer ---------- */

/* Arrow glyphs point at a fixed direction; mirror the icon, not the box */
.slider-arrow i,
.th-pagination i,
.simple-btn i,
.action-btn i,
.breadcrumb-item + .breadcrumb-item::before {
    display: inline-block;
    transform: scaleX(-1);
}

/* Latin-only data reads wrong when the field is rtl */
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
.contact-map,
audio {
    direction: ltr;
}

input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"] {
    text-align: right;
}

/* Quran and azkar bodies are always rtl regardless of the UI language */
.ayah-text,
.zikr-text,
.bismillah,
.ayah-tafseer {
    direction: rtl;
    text-align: right;
}

.ayah-text {
    text-align: justify;
}

/* The marquee text in the discount ring is animated left-to-right by GSAP */
.discount-anime {
    direction: ltr;
}

.breadcumb-menu li:after {
    content: "\f104";
}

input, label {
    text-align: right;
}