/* ==========================================================================
   Katre.nl — Arabic RTL overrides
   Loaded only when html[dir="rtl"] (current locale = ar).
   Mirrors the charity theme without changing color or spacing tokens.
   ========================================================================== */

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

html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

/* --------- Typography: Arabic web-safe stack on top of theme fonts --------- */
html[dir="rtl"],
html[dir="rtl"] body,
html[dir="rtl"] .alt-font,
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"] a,
html[dir="rtl"] span,
html[dir="rtl"] li,
html[dir="rtl"] button,
html[dir="rtl"] .btn,
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] label {
    font-family: "Noto Naskh Arabic", "Segoe UI", "Tahoma", "Arial", sans-serif !important;
}

/* --------- Bootstrap utility flips --------- */
html[dir="rtl"] .text-start { text-align: right !important; }
html[dir="rtl"] .text-end   { text-align: left  !important; }

html[dir="rtl"] .float-start { float: right !important; }
html[dir="rtl"] .float-end   { float: left  !important; }

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

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

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

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

/* --------- Navbar / dropdowns --------- */
html[dir="rtl"] .navbar-nav { flex-direction: row-reverse; }
html[dir="rtl"] .dropdown-menu { text-align: right; }
html[dir="rtl"] .dropdown-menu-end { left: 0; right: auto; }
html[dir="rtl"] .navbar-toggler.float-start { float: right !important; }

/* Theme-specific: charity nav/header alignment */
html[dir="rtl"] .header-button,
html[dir="rtl"] .header-icon ul {
    flex-direction: row-reverse;
}

/* --------- Footer --------- */
html[dir="rtl"] footer .text-sm-start { text-align: right !important; }
html[dir="rtl"] footer .text-lg-start { text-align: right !important; }
html[dir="rtl"] footer .text-lg-end   { text-align: left  !important; }
html[dir="rtl"] .footer-navbar { padding-right: 0; }
html[dir="rtl"] .footer-navbar .nav-item { margin-right: 0; margin-left: 1rem; }

/* --------- Buttons --------- */
html[dir="rtl"] .btn-box-shadow {
    /* mirror shadow side */
    box-shadow: -8px 10px 20px 0 rgba(44, 187, 209, 0.3) !important;
}
html[dir="rtl"] .btn i.fa,
html[dir="rtl"] .btn i.fa-solid,
html[dir="rtl"] .btn i.feather {
    margin-right: 0;
    margin-left: 0.4rem;
}

/* --------- Hero / page-title alignment (LTR theme uses left-anchored hero) --- */
html[dir="rtl"] .ipad-top-space-margin .container .row > div {
    text-align: right;
}
html[dir="rtl"] .page-title-extra-large h1,
html[dir="rtl"] .page-title-extra-large h2 {
    text-align: right !important;
}

/* --------- Breadcrumb separators (theme uses bullets with margin) --------- */
html[dir="rtl"] .ms-15px { margin-right: 15px !important; margin-left: 0 !important; }
html[dir="rtl"] .me-15px { margin-left: 15px !important; margin-right: 0 !important; }
html[dir="rtl"] .ms-10px { margin-right: 10px !important; margin-left: 0 !important; }
html[dir="rtl"] .me-10px { margin-left: 10px !important; margin-right: 0 !important; }

/* --------- Swiper carousels: keep LTR DOM order, mirror visually --------- */
html[dir="rtl"] .swiper {
    direction: ltr;
}
html[dir="rtl"] .swiper .swiper-slide {
    direction: rtl;
    text-align: right;
}

/* --------- WhatsApp floating button (theme positions bottom-right) --------- */
html[dir="rtl"] #whatsapp-btn {
    right: auto;
    left: 20px;
}

/* --------- Forms --------- */
html[dir="rtl"] .form-control,
html[dir="rtl"] .form-select,
html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] textarea {
    text-align: right;
    direction: rtl;
}
/* Email/tel/number stay LTR for readability of @ and digits */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"] {
    direction: ltr;
    text-align: right;
}

/* --------- Tables / list bullets --------- */
html[dir="rtl"] ul, html[dir="rtl"] ol {
    padding-right: 1.25rem;
    padding-left: 0;
}

/* --------- Text utilities for "outside box" decorative offsets --------- */
html[dir="rtl"] .outside-box-right-35 { right: auto; left: -35px; }
html[dir="rtl"] .outside-box-left-35  { left: auto;  right: -35px; }

/* --------- Cookie / scroll-progress widgets --------- */
html[dir="rtl"] .scroll-progress {
    right: auto !important;
    left: 25px !important;
}