/* =========================================
   RAJA GOSTAR HADAF
   RTL Stylesheet — Persian (Farsi) Overrides
   =========================================
   Applied when <html lang="fa" dir="rtl">

   PURPOSE: Make the Persian version a true
   RTL mirror of the English master, with
   identical spacing, proportions, and visual
   rhythm. RTL only affects text alignment,
   icon positions, and image/text order.
   All spacing must match English exactly.
   ========================================= */

/* ── 1. DIRECTION ── */
html[lang="fa"] {
  direction: rtl;
  text-align: right;
}

/* ── 2. TYPOGRAPHY — Line-height & Spacing ──
   Vazirmatn / Persian script needs taller
   line-height than Inter to match visual
   density of the English version.
   ──────────────────────────────────────── */
html[lang="fa"] body {
  font-family: var(--font-persian);
  letter-spacing: 0;
  word-spacing: 0.02em;
  line-height: 1.9;                  /* slightly higher than English 1.6 for optical match */
}

html[lang="fa"] p {
  line-height: 1.95;
  margin-bottom: 0;                  /* let layout-level margins control vertical rhythm */
}

html[lang="fa"] h1,
html[lang="fa"] h2,
html[lang="fa"] h3,
html[lang="fa"] h4,
html[lang="fa"] h5,
html[lang="fa"] h6 {
  letter-spacing: 0;
  line-height: 1.3;
}

html[lang="fa"] .text-display {
  letter-spacing: 0;
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.2;
}

html[lang="fa"] .hero-title {
  letter-spacing: 0;
  font-size: clamp(1.9rem, 4.2vw, 3.5rem);
  line-height: 1.2;
}

html[lang="fa"] .hero-subtitle {
  line-height: 2;
}

html[lang="fa"] .section-title {
  line-height: 1.3;
  letter-spacing: 0;
  margin-bottom: var(--space-5);     /* match English visual gap below titles */
}

html[lang="fa"] .section-subtitle {
  line-height: 2;
}

html[lang="fa"] .page-hero-desc {
  line-height: 2;
}

html[lang="fa"] .page-hero-title {
  line-height: 1.3;
  letter-spacing: 0;
}

/* ── 3. SECTION LABEL RTL ──
   Decorative line flip is handled in main.css (L311-319).
   Only letter-spacing zero is needed here.
   ──────────────────────────────────────── */
html[lang="fa"] .section-label {
  flex-direction: row;
  letter-spacing: 0;
}

/* ── 4. NAVBAR & NAV LINKS RTL ── */
html[lang="fa"] .navbar-inner {
  flex-direction: row;
}
html[lang="fa"] .navbar-nav-links {
  flex-direction: row;
}
html[lang="fa"] .navbar-actions {
  flex-direction: row;
}

/* Dropdown positions in RTL */
html[lang="fa"] .lang-dropdown {
  right: auto;
  left: 0;
}
html[lang="fa"] .nav-dropdown-menu {
  left: auto;
  right: 0;
  text-align: right;
}
html[lang="fa"] .nav-dropdown-item {
  text-align: right;
  flex-direction: row;
  justify-content: flex-start;
}
html[lang="fa"] .nav-dropdown-item i {
  margin-right: 0;
  margin-left: 8px;
}

/* ── 5. MOBILE NAV RTL ── */
html[lang="fa"] .mobile-nav-header {
  flex-direction: row;
}
html[lang="fa"] .mobile-nav-links {
  align-items: flex-start;
  text-align: right;
}
html[lang="fa"] .mobile-nav-link {
  flex-direction: row;
  justify-content: flex-start;
  gap: 12px;
}
html[lang="fa"] .mobile-nav-link i {
  margin-right: 0;
  margin-left: 4px;
}

/* ── 6. HERO SECTION RTL ── */
html[lang="fa"] .hero-actions {
  flex-direction: row;
}
html[lang="fa"] .hero-stats {
  flex-direction: row;
}

/* Mobile: keep hero-actions stacked and right-aligned */
@media (max-width: 576px) {
  html[lang="fa"] .hero-actions {
    flex-direction: column;
    align-items: flex-start;           /* In RTL, flex-start aligns to the right */
  }
  html[lang="fa"] .hero-actions .sadeg-btn {
    align-self: flex-start;
  }
}

/* ── 7. FOOTER RTL ── */
html[lang="fa"] .footer-grid {
  direction: rtl;
  text-align: right;
}
html[lang="fa"] .footer-bottom {
  flex-direction: row;
}
html[lang="fa"] .footer-bottom-links {
  flex-direction: row;
}
html[lang="fa"] .footer-social {
  flex-direction: row;
}
html[lang="fa"] .footer-contact-item {
  flex-direction: row;
  text-align: right;
}
html[lang="fa"] .footer-contact-icon {
  margin-right: 0;
  margin-left: 12px;
}
html[lang="fa"] .footer-link i {
  margin-right: 0;
  margin-left: 8px;
}
html[lang="fa"] .footer-link:hover {
  padding-left: 0;
  padding-right: 4px;
}

/* ── 8. BUTTONS & ICONS RTL ── */
html[lang="fa"] .sadeg-btn {
  flex-direction: row;
}
html[lang="fa"] .sadeg-btn i {
  margin-right: 0;
  margin-left: 8px;
}

/* ── 8.5. WHAT WE DO CARDS RTL (Mobile 2-column) ── */
@media (max-width: 576px) {
  html[lang="fa"] .what-we-do-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }
  html[lang="fa"] .what-card {
    padding: var(--space-3) var(--space-3);
    gap: var(--space-3);
  }
  html[lang="fa"] .what-card-title {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.4;
  }
  html[lang="fa"] .what-card-icon {
    width: 40px;
    height: 40px;
    font-size: 1.15rem;
    flex-shrink: 0;
  }
}

/* ── 8.6. ROUTES GRID RTL (Mobile 2-column) ── */
@media (max-width: 576px) {
  html[lang="fa"] .routes-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  html[lang="fa"] .route-card {
    padding: 0.65rem 0.5rem;
  }
  html[lang="fa"] .route-country {
    font-size: 0.8rem;
    font-weight: 700;
  }
}

/* ── 8.7. INDUSTRIES GRID RTL (Mobile 2-column) ── */
@media (max-width: 576px) {
  html[lang="fa"] .industries-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  html[lang="fa"] .industry-card {
    padding: 0.75rem 0.65rem;
    gap: 0.5rem;
  }
  html[lang="fa"] .industry-card-title {
    font-size: 0.85rem;
    font-weight: 700;
  }
}

/* ── 8.8. FLEET GRID RTL (Mobile 2-column) ── */
@media (max-width: 576px) {
  html[lang="fa"] .fleet-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  html[lang="fa"] .fleet-card {
    padding: 0.75rem 0.65rem;
    gap: 0.5rem;
  }
  html[lang="fa"] .fleet-card-title {
    font-size: 0.82rem;
    font-weight: 700;
  }
}

/* ── 9. SERVICE CARDS RTL ── */
html[lang="fa"] .service-card-bg-num {
  right: auto;
  left: var(--space-6);
}
html[lang="fa"] .service-card-link {
  flex-direction: row;
}
html[lang="fa"] .service-card-link i {
  margin-left: 0;
  margin-right: 6px;
}
html[lang="fa"] .service-card:hover .service-card-link .bi {
  transform: translateX(-4px);
}

/* ── 10. WHY US RTL ── */
/* RTL-specific: badge card appears on the right side instead of left */

html[lang="fa"] .why-us-badge-card {
  top: var(--space-6);
  bottom: auto;
  left: auto;
  right: var(--space-6);
  flex-direction: row;
}

html[lang="fa"] #why-us .section-label {
  margin-bottom: var(--space-4);
}

html[lang="fa"] #why-us .section-title {
  margin-bottom: var(--space-4);
  line-height: 1.35;
}

html[lang="fa"] #why-us .section-subtitle {
  margin-bottom: var(--space-6);
  line-height: 1.9;
}

/* why-us-features layout is identical to main.css — no override needed.
   feature-item hover direction is handled in main.css (L1250).
   Only RTL-specific typography adjustments are kept below. */

html[lang="fa"] .feature-icon {
  flex-shrink: 0;
}

html[lang="fa"] .feature-text h4 {
  line-height: 1.4;
}

html[lang="fa"] .feature-text p {
  line-height: 1.85;
}

html[lang="fa"] #why-us .feature-text h4 {
  font-size: 0.95rem;
  margin-bottom: 2px;
  line-height: 1.35;
}

html[lang="fa"] #why-us .feature-text p {
  font-size: 0.82rem;
  line-height: 1.6;
}


/* ── 11. CONTACT RTL ── */
html[lang="fa"] .contact-info-item {
  flex-direction: row;
}
html[lang="fa"] .contact-info-icon {
  margin-right: 0;
  margin-left: 1rem;
}
html[lang="fa"] .contact-grid {
  direction: rtl;
}

/* ── 12. PORTFOLIO FILTER RTL ── */
html[lang="fa"] .portfolio-filter {
  flex-direction: row;
}

/* ── 13. TIMELINE RTL ── */
html[lang="fa"] .timeline {
  padding-left: 0;
  padding-right: var(--space-8);
}
html[lang="fa"] .timeline::before {
  left: auto;
  right: 0;
}
html[lang="fa"] .timeline-item {
  padding-left: 0;
  padding-right: var(--space-6);
}
html[lang="fa"] .timeline-item::before {
  left: auto;
  right: -5px;
}

/* ── 14. FAQ RTL ── */
html[lang="fa"] .faq-accordion {
  direction: rtl;
}
html[lang="fa"] .faq-question {
  flex-direction: row;
  text-align: right;
}
html[lang="fa"] .faq-icon {
  margin-left: 0;
  margin-right: auto;
}
html[lang="fa"] .faq-answer-inner {
  text-align: right;
}

html[lang="fa"] .mini-faq-header,
html[lang="fa"] .mini-faq-question,
html[lang="fa"] .mini-faq-answer {
  text-align: right;
}

/* ── 15. BACK TO TOP RTL ── */
html[lang="fa"] #back-to-top {
  right: auto;
  left: var(--space-6);
}

/* ── 16. BREADCRUMB RTL ── */
html[lang="fa"] .breadcrumb-sadeg {
  flex-direction: row;
}

/* ── 17. STATS BAR RTL ── */
html[lang="fa"] .stat-item + .stat-item::before {
  left: auto;
  right: 0;
}

/* ── 18. FORM RTL ── */
html[lang="fa"] .form-control {
  text-align: right;
}
html[lang="fa"] .form-label {
  text-align: right;
}

/* ── 19. CONTACT FORM ACTIONS RTL ── */
html[lang="fa"] .contact-form-actions {
  flex-direction: row;
}

/* ── 20. SPINNER RTL ── */
html[lang="fa"] .btn-spinner {
  margin-right: 0;
  margin-left: 0.5rem;
}

/* ─────────────────────────────────────────
   21. SPACING PARITY — Matching English
   ─────────────────────────────────────────
   Bootstrap RTL redefines padding-inline on
   .col-* but keeps the gutter variable names
   identical, so explicit gutter overrides are
   only needed for components Bootstrap touches.
   ──────────────────────────────────────── */

/* Contact form row */
html[lang="fa"] .form-row {
  gap: var(--space-5);
}

/* Turkey presence section — identical top/bottom margin */
html[lang="fa"] .turkey-presence-row {
  margin-top: var(--space-12);
  margin-bottom: var(--space-12);
  padding-top: var(--space-10);
}

/* ── MARQUEE ANIMATION FIX ──
   Bootstrap RTL sets direction:rtl on the document root.
   This propagates into the marquee wrappers and flips the
   overflow clip-edge from left-to-right → right-to-left,
   causing translateX(-50%) to scroll in the wrong direction
   and break the seamless loop.
   Solution: lock both track-wraps to direction:ltr so the
   keyframe coordinate system always matches the animation. */
html[lang="fa"] .testimonials-track-wrap,
html[lang="fa"] .partners-track-wrap {
  direction: ltr;
}
html[lang="fa"] .testimonial-card {
  direction: rtl;
  text-align: right;
}

/* ─────────────────────────────────────────
   22. IMAGE/TEXT COLUMN GAP PARITY
   ─────────────────────────────────────────
   In English, image and text columns use
   Bootstrap g-5 (gap: 3rem). This must be
   preserved identically in Persian RTL so
   the horizontal space between image and
   text block matches exactly.
   ──────────────────────────────────────── */

/* Ensure Bootstrap RTL grid row gaps match LTR */
html[lang="fa"] .row.g-5 {
  --bs-gutter-x: 3rem;
  --bs-gutter-y: 3rem;
}
html[lang="fa"] .row.g-4 {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 1.5rem;
}

/* Services article rows: match English image/text spacing */
html[lang="fa"] article.row {
  gap: 0;                            /* let Bootstrap gutters control the gap */
}

/* ─────────────────────────────────────────
   23. SERVICES PAGE — TEXT BLOCK WIDTH PARITY
   ─────────────────────────────────────────
   Text blocks in service articles should
   fill col-lg-6 identically to English.
   Lists need identical spacing.
   ──────────────────────────────────────── */
html[lang="fa"] article ul {
  margin-top: 1.5rem;
}
html[lang="fa"] article ul li {
  line-height: 1.7;
}
html[lang="fa"] article ul li i {
  flex-shrink: 0;
  margin-left: 0;
  margin-right: 0;
}

/* ─────────────────────────────────────────
   24. ABOUT PAGE SPACING PARITY
   ─────────────────────────────────────────
   All sections: Our Story, Turkey Ops,
   Values, Timeline — matched to English.
   ──────────────────────────────────────── */

/* Story section stats mini-cards */
html[lang="fa"] .row.g-4.mt-3 div[style*="padding:1.25rem"] {
  text-align: center;
}

/* Values section header */
html[lang="fa"] .section-header--center {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Timeline & certifications row */
html[lang="fa"] .row.g-5.mt-4 {
  --bs-gutter-x: 3rem;
  --bs-gutter-y: 3rem;
}

/* Feature items (certifications) identical gap */
html[lang="fa"] div[style*="display:flex;flex-direction:column;gap:1rem"] {
  gap: 1rem;
}

/* ─────────────────────────────────────────
   25. PAGE HERO SPACING PARITY
   ─────────────────────────────────────────
   Inner page hero (services, about, etc.)
   must have identical padding to English.
   ──────────────────────────────────────── */
html[lang="fa"] .page-hero {
  padding-top: calc(var(--navbar-h) + var(--space-16));
  padding-bottom: var(--space-16);
}

html[lang="fa"] .page-hero-badge {
  margin-bottom: var(--space-4);
}

html[lang="fa"] .page-hero-title {
  margin-bottom: var(--space-4);
}

html[lang="fa"] .breadcrumb-sadeg {
  margin-top: var(--space-4);
}

html[lang="fa"] .page-hero--compact {
  padding-top: calc(var(--navbar-h) + 1.75rem) !important;
  padding-bottom: 4.5rem !important;
}

html[lang="fa"] .page-hero--compact .breadcrumb-sadeg {
  margin-top: 0.6rem !important;
}

/* ─────────────────────────────────────────
   26. CTA SECTION PARITY
   ──────────────────────────────────────── */
html[lang="fa"] .cta-actions {
  flex-direction: row;
  justify-content: center;
}
@media (max-width: 576px) {
  html[lang="fa"] .cta-actions {
    flex-direction: column;
    align-items: center;
  }
}

/* ─────────────────────────────────────────
   27. RESPONSIVE — TABLET (≤ 992px)
   ──────────────────────────────────────── */
@media (max-width: 992px) {
  html[lang="fa"] .mobile-nav-link:hover {
    transform: translateX(-4px);
  }

  html[lang="fa"] .why-us-grid {
    gap: var(--space-10);
  }

  html[lang="fa"] .footer-grid {
    gap: var(--space-8);
  }
}

/* ─────────────────────────────────────────
   28. RESPONSIVE — MOBILE (≤ 576px)
   ──────────────────────────────────────── */
@media (max-width: 576px) {
  html[lang="fa"] .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
  html[lang="fa"] .footer-bottom-links {
    justify-content: center;
  }

  /* Contact form & quote form: full width stacked buttons on mobile */
  html[lang="fa"] .contact-form-actions {
    flex-direction: column !important;
    gap: var(--space-3) !important;
    width: 100% !important;
  }
  html[lang="fa"] .contact-form-actions .sadeg-btn {
    width: 100% !important;
    flex: none !important;
    min-width: 100% !important;
    padding: 0.85rem 1.25rem !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    min-height: 50px !important;
    gap: 0.5rem !important;
    justify-content: center !important;
    border-radius: var(--radius-full) !important;
  }

  /* Gallery Grid 2 columns on mobile */
  html[lang="fa"] .gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.65rem !important;
  }
}

/* Fix flat social button icon vertical alignment in Persian */
html[lang="fa"] .flat-social-btn i {
  position: relative;
  top: 3px;
}

/* ── 29. ARTICLE MODAL RTL (Mobile) ── */
@media (max-width: 576px) {
  html[lang="fa"] .article-modal-topbar {
    padding: 1rem 1.25rem;
  }
  html[lang="fa"] .article-modal-scrollable {
    padding: 1.25rem 1.15rem;
  }
  html[lang="fa"] .article-rgh-box {
    padding: 1.15rem 1rem;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
  }
  html[lang="fa"] .article-rgh-box .sadeg-btn {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    min-height: 46px !important;
    border-radius: var(--radius-full) !important;
    white-space: normal !important;
    gap: 0.5rem !important;
  }
}