/* ==========================================================================
   Internationalisation: language switcher, Arabic typography and RTL.

   Direction comes from <html dir="rtl">. Rules below use CSS logical
   properties or [dir="rtl"] overrides for the Bootstrap 4 physical utility
   classes still used by the templates (.text-lg-left, .mr-*, floats) and for
   the few template components with hard-coded left/right offsets. Nothing
   here duplicates main.css; it only re-expresses direction.
   ========================================================================== */

/* --- Language switcher ------------------------------------------------- */
.header-tools { gap: 14px; }
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}
.lang-switch__form { display: inline; margin: 0; }
.lang-switch__item {
  background: transparent;
  border: 0;
  padding: 4px 6px;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: 4px;
  opacity: .78;
  text-decoration: none;
}
.lang-switch__item:hover,
.lang-switch__item:focus-visible { opacity: 1; text-decoration: underline; }
.lang-switch__item:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lang-switch__item.is-current { opacity: 1; font-weight: 700; cursor: default; text-decoration: none; }
.lang-switch__sep { opacity: .5; }
.lang-switch__item[lang="ar"] { font-family: "Cairo", "Segoe UI", Tahoma, Arial, sans-serif; }

/* First-visit soft hint (browser prefers the other language). A small fixed
   toast so it never shifts the hero under the transparent header. It sits on
   the physical left; the WhatsApp button keeps the right-hand corner. */
.lang-hint {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 1030;
  max-width: calc(100vw - 120px);
  background: #0d5c3a;
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.lang-hint__form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }
.lang-hint .lang-hint__btn {
  background: #fff !important;
  color: #0d5c3a !important;
  border: 0;
  border-radius: 6px;
  padding: 5px 12px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.lang-hint .lang-hint__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* --- Arabic typography ---------------------------------------------------- */
html[lang="ar"] body,
html[lang="ar"] *,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6 {
  font-family: "Cairo", "Segoe UI", Tahoma, "Noto Sans Arabic", Arial, sans-serif;
  letter-spacing: 0 !important;
}
html[lang="ar"] body { line-height: 1.75; }
html[lang="ar"] h1 { line-height: 1.35; font-weight: 700; }
html[lang="ar"] h2, html[lang="ar"] h3 { line-height: 1.45; font-weight: 700; }
html[lang="ar"] p { line-height: 1.85; }
/* Uppercase "stamps" carry no meaning in Arabic script. */
html[lang="ar"] .eyebrow,
html[lang="ar"] .track-record__stamp,
html[lang="ar"] .event-highlight__stamp,
html[lang="ar"] .placement-path__stamp,
html[lang="ar"] .timeframe-guarantee__stamp,
html[lang="ar"] .cta-value { text-transform: none; letter-spacing: 0; }
/* Inherently left-to-right data inside Arabic copy. */
html[lang="ar"] input[type="email"],
html[lang="ar"] input[type="tel"],
html[lang="ar"] input[type="url"],
html[lang="ar"] [dir="ltr"] { direction: ltr; unicode-bidi: isolate; }
html[lang="ar"] input[type="email"],
html[lang="ar"] input[type="tel"] { text-align: start; }
/* Icon fonts must never inherit the Arabic family. */
html[lang="ar"] .fa, html[lang="ar"] .fas, html[lang="ar"] .far, html[lang="ar"] .fab,
html[lang="ar"] [class^="fa-"], html[lang="ar"] [class*=" fa-"] {
  font-family: "Font Awesome 5 Free" !important;
}
html[lang="ar"] .fab { font-family: "Font Awesome 5 Brands" !important; }

/* --- RTL layout overrides ---------------------------------------------- */
[dir="rtl"] { text-align: start; }
[dir="rtl"] .text-lg-left { text-align: right !important; }
@media (min-width: 992px) { [dir="rtl"] .text-lg-left { text-align: right !important; } }
[dir="rtl"] .mr-md-2 { margin-right: 0 !important; margin-left: .5rem !important; }
[dir="rtl"] .ml-auto { margin-left: 0 !important; margin-right: auto !important; }
[dir="rtl"] .mr-auto { margin-right: 0 !important; margin-left: auto !important; }
[dir="rtl"] .close { float: left; }

/* Check-mark lists: icon sits at the inline start. */
[dir="rtl"] ul.styled-list { padding-right: 0; }
[dir="rtl"] ul.styled-list li { padding-left: 0; padding-right: 3rem; }
[dir="rtl"] ul.styled-list li i { left: auto; right: 0; }

/* Form inputs with a leading icon. */
[dir="rtl"] form label .icon { left: auto; right: 15px; }
[dir="rtl"] form input:not([type="checkbox"]):not([type="submit"]),
[dir="rtl"] form textarea,
[dir="rtl"] form select { padding: 12px 50px 12px 18px; }
[dir="rtl"] .landing-popup-dialog form input:not([type="checkbox"]):not([type="submit"]),
[dir="rtl"] .landing-popup-dialog form textarea { padding: 12px 50px 12px 18px; }
[dir="rtl"] .consent-label { text-align: right; }

/* Popup and lightbox controls. */
[dir="rtl"] .landing-popup-close { right: auto; left: 8px; }
[dir="rtl"] .landing-popup-dialog h2 { padding-right: 0; padding-left: 2.5rem; }
[dir="rtl"] .gallery-lightbox__close { right: auto; left: -8px; }
[dir="rtl"] .gallery-lightbox__nav--prev { left: auto; right: 8px; }
[dir="rtl"] .gallery-lightbox__nav--next { right: auto; left: 8px; }

/* Testimonial carousel (slick) — arrows are directional, so they mirror. */
[dir="rtl"] .testimonials .prev,
[dir="rtl"] .testimonials .next { transform: scaleX(-1); }

/* WhatsApp floating button: the campaign-level position is honoured, but the
   label sits on the inline start side in RTL. The logo itself is never flipped. */
[dir="rtl"] .whatsapp-float__label { padding: 0 14px 0 18px; }

/* Header phone: number stays LTR, icon keeps its spacing. */
[dir="rtl"] .header-phone .phone-icon { margin-left: .5rem; margin-right: 0; }

/* Content hub (insights) */
[dir="rtl"] .kh-nav, [dir="rtl"] .kh-breadcrumbs { direction: rtl; }

@media (max-width: 767.98px) {
  .lang-switch { font-size: 13px; }
  .lang-hint { bottom: 92px; max-width: calc(100vw - 32px); }
}