/* RTL Overrides for Arabic */
[dir="rtl"] {
    text-align: right;
    font-family: 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* Headings and body text default alignment */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] p,
[dir="rtl"] span,
[dir="rtl"] div {
    text-align: start;
}

[dir="rtl"] .section-header-center,
[dir="rtl"] .section-header-center h2,
[dir="rtl"] .section-header-center p {
    text-align: center !important;
}

/* Kicker styling in RTL:
   - Remove text-transform: uppercase (CSS uppercase has no effect on Arabic but
     causes some browsers to switch to a Latin fallback glyph engine, breaking
     letter connection)
   - Remove letter-spacing (spacing disrupts Arabic connected script)
   - Use row-reverse so the dot appears on the right of the text
*/
[dir="rtl"] .kicker {
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding-left: 0;
    flex-direction: row-reverse;
}

[dir="rtl"] .kicker::before {
    left: auto;
    right: 0;
}

/* Sticky WhatsApp Floating Button in RTL */
[dir="rtl"] .sticky-whatsapp {
    right: auto !important;
    left: 28px !important;
    direction: ltr !important;
    padding: 14px 16px !important;
}

[dir="rtl"] .sticky-whatsapp .whatsapp-text {
    margin-left: 0 !important;
    margin-right: 0 !important;
    font-family: inherit;
}

[dir="rtl"] .sticky-whatsapp:hover {
    padding-left: 18px !important;
    padding-right: 26px !important;
}

[dir="rtl"] .sticky-whatsapp:hover .whatsapp-text {
    max-width: 180px !important;
    opacity: 1 !important;
    margin-left: 14px !important;
    margin-right: 0 !important;
}

/* Hero Mosaic Accent */
[dir="rtl"] .hero-mosaic::before {
    right: auto;
    left: -20px;
}

/* Service Tab Buttons RTL */
[dir="rtl"] .service-tabs .tab-btn {
    text-align: right;
}

/* ============================================================
   ARROW DIRECTIONS & ICONS IN RTL
   ============================================================ */
/* Flip right arrows to point to the left in RTL */
[dir="rtl"] .ph-arrow-right,
[dir="rtl"] .link-arrow,
[dir="rtl"] .btn i.ph-arrow-right,
[dir="rtl"] .interactive-link i.ph-arrow-right,
[dir="rtl"] i.ph-arrow-right {
    transform: scaleX(-1);
    display: inline-block;
}

/* Hover animation for interactive cards with arrows in RTL */
[dir="rtl"] .interactive-card:hover .link-arrow,
[dir="rtl"] .interactive-card:hover i.ph-arrow-right,
[dir="rtl"] .btn:hover i.ph-arrow-right {
    transform: scaleX(-1) translateX(6px) !important;
}

/* Interactive Card Alignment */
[dir="rtl"] .interactive-card {
    text-align: right !important;
}

[dir="rtl"] .interactive-link {
    justify-content: flex-start;
}

/* Button with icons gap in RTL */
[dir="rtl"] .btn i,
[dir="rtl"] a.btn i {
    margin-left: 0;
    margin-right: 6px;
}

/* Card bullet points & lists */
[dir="rtl"] .advisory-bullet-list li {
    text-align: right;
}

[dir="rtl"] .advisory-card {
    text-align: right;
}

[dir="rtl"] .advisory-card-header {
    flex-direction: row;
}

/* Timeline Cards */
[dir="rtl"] .anim-left[style*="border-left"],
[dir="rtl"] .anim-right[style*="border-left"],
[dir="rtl"] .fade-in-up[style*="border-left"] {
    border-left: none !important;
    border-right: 4px solid var(--primary) !important;
    border-radius: 10px 0 0 10px !important;
    text-align: right !important;
}

/* Header & Navigation in RTL */
[dir="rtl"] .dropdown {
    left: auto;
    right: 0;
    text-align: right;
}

[dir="rtl"] .dropdown li a {
    text-align: right;
}

/* Contact page icons & info */
[dir="rtl"] .contact-info-item i,
[dir="rtl"] p i.ph-duotone {
    margin-right: 0 !important;
    margin-left: 10px !important;
}

/* Sectors checklist icons in clients.php */
[dir="rtl"] .interactive-card ul li i.ph-check {
    margin-right: 0 !important;
    margin-left: 8px !important;
}