/* ============================================================
   HERTZ ADVERTISING — RTL / ARABIC OVERRIDES
   Loaded ONLY on /ar/ pages, AFTER style.css.
   Scope everything under [dir="rtl"] so it never affects EN.
   ============================================================ */

/* ----- Arabic typography ----- */
[dir="rtl"] body,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] button,
[dir="rtl"] select {
    font-family: 'Cairo', 'Tajawal', 'Poppins', sans-serif;
}

/* ----- Global direction ----- */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

/* Keep latin/number runs (phones, emails) readable */
[dir="rtl"] .ltr,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"] {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
/* Let RTL flow order the nav naturally: first item (الرئيسية) sits
   rightmost, then من نحن, خدماتنا … toward the left. No reverse needed. */
[dir="rtl"] nav .nav-links {
    flex-direction: row;
}
[dir="rtl"] .dropdown-menu {
    left: auto;
    right: 0;
    text-align: right;
    transform: translateX(0) translateY(-8px);
}
[dir="rtl"] .dropdown:hover .dropdown-menu {
    transform: translateX(0) translateY(0);
}
[dir="rtl"] .dropdown-menu a {
    flex-direction: row-reverse;
}
[dir="rtl"] .dropdown > a svg {
    margin-left: 0;
    margin-right: 2px;
}
[dir="rtl"] .dm-icon {
    margin-left: 0.5rem;
    margin-right: 0;
}
/* Horizontal arrows inside buttons/CTAs point the correct way in RTL
   (forward = leftward in Arabic). Covers every button class on the site. */
[dir="rtl"] .cta-header-button svg,
[dir="rtl"] .cta-button svg,
[dir="rtl"] .btn svg,
[dir="rtl"] .btn-primary svg,
[dir="rtl"] .btn-secondary svg,
[dir="rtl"] .btn-white svg,
[dir="rtl"] .btn-large svg,
[dir="rtl"] .process-more svg,
[dir="rtl"] .blog-read-more svg,
[dir="rtl"] .section-cta a svg,
[dir="rtl"] .action-btn svg {
    transform: scaleX(-1);
}
/* …but NOT the non-directional icons (paper-plane send, phone call,
   download) — those keep their natural orientation. */
[dir="rtl"] .contact-form-page button[type="submit"] svg,
[dir="rtl"] a[href^="tel:"] svg,
[dir="rtl"] .download-btn svg {
    transform: none;
}

/* ============================================================
   HERO + SECTION CONTENT
   ============================================================ */
[dir="rtl"] .hero-content,
[dir="rtl"] .page-header-content,
[dir="rtl"] .service-page-hero-content {
    text-align: center;
}
[dir="rtl"] .hero-buttons {
    flex-direction: row-reverse;
}

/* Feature lists / checkmarks flip side */
[dir="rtl"] .service-feature-item {
    flex-direction: row-reverse;
    text-align: right;
}
[dir="rtl"] .feature-check {
    margin-left: 0.6rem;
    margin-right: 0;
}

/* Service-card corner arrow → top-left, moving left on hover */
[dir="rtl"] .service-card-arrow {
    right: auto;
    left: 1.75rem;
}
[dir="rtl"] .service-card:hover .service-card-arrow {
    transform: translate(-3px, -3px);
}

/* ============================================================
   GRIDS — keep layout, just realign text
   ============================================================ */
[dir="rtl"] .service-overview-text,
[dir="rtl"] .about-text,
[dir="rtl"] .value-card,
[dir="rtl"] .service-card,
[dir="rtl"] .process-step {
    text-align: right;
}

/* ============================================================
   FLOATING SOCIAL SIDEBAR — pin to the left edge in RTL
   ============================================================ */
[dir="rtl"] .social-sidebar {
    right: auto;
    left: 0;
    /* Sidebar sits on the left edge. The column is RTL, so cross-axis flex-end
       resolves to the LEFT — that pins each item's outer edge to the screen edge
       so icons hug the left and pills grow rightward. */
    align-items: flex-end;
}
[dir="rtl"] .social-sidebar__item {
    /* round the right corners and tuck against the left edge */
    border-radius: 0 10px 10px 0;
    border-right: 1px solid rgba(255,255,255,0.1);
    border-left: none;
    /* The container is RTL, so `row` would run right-to-left and place the icon
       (first child) on the inner/right side. Use row-reverse to flip it back so
       the icon hugs the outer LEFT edge and the label expands rightward. */
    flex-direction: row-reverse;
}
[dir="rtl"] .social-sidebar__item:hover {
    padding-left: 0.6rem;
    padding-right: 1rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
[dir="rtl"] footer .footer-grid,
[dir="rtl"] .footer-grid {
    direction: rtl;
}
[dir="rtl"] .footer-section {
    text-align: right;
}
[dir="rtl"] .footer-social {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* ============================================================
   FORMS
   ============================================================ */
[dir="rtl"] .contact-form-page label,
[dir="rtl"] .contact-form-page input,
[dir="rtl"] .contact-form-page textarea {
    text-align: right;
}

/* ============================================================
   LANGUAGE SWITCHER
   ============================================================ */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: #fff;
    opacity: 0.85;
    transition: opacity 0.2s ease;
    margin-inline-start: 0.75rem;
}
.lang-switch:hover { opacity: 1; }

/* ============================================================
   MOBILE — keep the language switcher on the physical left,
   logo centered (mirrors the LTR mobile header layout)
   ============================================================ */
@media (max-width: 768px) {
    .header-actions {
        grid-column: 3;
        justify-self: end;
    }
    .hamburger {
        grid-column: 1;
        justify-self: start;
    }
}

/* ============================================================
   HDES v1.0 — ARABIC READABILITY
   Arabic glyphs are taller (marks above/below), so the Latin
   line-heights read as cramped when text wraps. More breathing room.
   ============================================================ */
[dir="rtl"] body { line-height: 2; }
[dir="rtl"] .service-page-hero-content > p,
[dir="rtl"] .section-intro { line-height: 2.3; }
[dir="rtl"] .hero-trust { line-height: 2.1; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { line-height: 1.5; }
[dir="rtl"] .value-card p,
[dir="rtl"] .why-item p,
[dir="rtl"] .process-step p,
[dir="rtl"] .faq-item p,
[dir="rtl"] .assurance-card p,
[dir="rtl"] .case-card p,
[dir="rtl"] .pkg-tagline,
[dir="rtl"] .pkg-features li { line-height: 2; }

/* ============================================================
   HDES v1.0 — RTL OVERRIDES for promoted + new components.
   The plan cards and conversion components live in the global
   style.css (LTR). Mirror their directional bits here.
   ============================================================ */

/* Plan feature list: checkmark on the physical right */
[dir="rtl"] .pkg-features li { padding-left: 0; padding-right: 1.6rem; }
[dir="rtl"] .pkg-features li svg { left: auto; right: 0; }

/* Breadcrumb reads naturally in RTL */
[dir="rtl"] .breadcrumb ol { text-align: right; }

/* Directional arrows inside the new CTAs mirror */
[dir="rtl"] .hero-cta-row .btn-primary svg { transform: scaleX(-1); }

/* Case-study / testimonial cards align to the start (right) */
[dir="rtl"] .case-client,
[dir="rtl"] .testi-card cite { text-align: right; }

/* Sticky CTA already uses logical inset-inline; nothing to flip. */