/* +IN — language switcher, Instagram, and Arabic/RTL support.
   Additive stylesheet loaded after the original build output; does not
   modify the existing design, only adds new UI and language behavior. */

.ar-only { display: none; }
html[dir="rtl"] .ar-only { display: block; }

.header-tools {
  display: flex;
  align-items: center;
  gap: 18px;
}

.header-social {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: #e4e9df;
  transition: color .25s, transform .25s;
}
.header-social:hover { color: var(--lime); transform: translateY(-2px); }

.lang-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}
.lang-switch span { color: rgba(255, 255, 255, .3); }
.lang-btn {
  background: transparent;
  border: 0;
  color: #aeb8a7;
  padding: 4px 2px;
  font-size: 10px;
  font-weight: 700;
  transition: color .25s;
}
.lang-btn[aria-pressed="true"] { color: var(--lime); }
.lang-btn:hover { color: var(--lime); }

.mobile-menu-utility {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.mobile-menu-utility .lang-switch { font-size: 12px; }
.mobile-menu-utility .lang-btn { font-size: 12px; }
.mobile-social {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: #e4e9df;
}
.mobile-social span { display: none; }

#mobile-talk-link { color: var(--lime); }

.social-rail {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 110;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #d7dfcf;
  transition: color .25s, transform .25s;
}
.social-rail i {
  display: block;
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, transparent, var(--lime));
}
.social-rail:hover { color: var(--lime); transform: translateY(-50%) translateY(-3px); }

@media (max-width: 900px) {
  .social-rail { display: none; }
}

@media (max-width: 700px) {
  .header-tools .header-social,
  .header-tools .lang-switch {
    display: none;
  }
  .header-tools { gap: 0; }
}

.contact-social {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: var(--lime);
  font-size: 13px;
}
.contact-social:hover { opacity: .82; }

.footer-tagline-group { display: flex; flex-direction: column; gap: 2px; }
.footer-tagline-ar { font: 700 14px "Cairo", "Barlow Condensed", sans-serif; color: var(--lime); }

.footer-social {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #a9b7a3;
  font-size: 10px;
  transition: color .25s;
}
.footer-social:hover { color: var(--lime); }

.hero-tagline-ar {
  font: 700 18px "Cairo", "Barlow Condensed", sans-serif;
  color: var(--lime);
  margin: -6px 0 18px;
}

/* Keep the hero, Free Homepage panel and final CTA panel visually fixed in
   RTL: only mirror text direction/alignment inside them, not their physical
   position against the 3D scene / background artwork. */
html[dir="rtl"] .offer-section,
html[dir="rtl"] .portal-section {
  direction: ltr;
}
html[dir="rtl"] .offer-content,
html[dir="rtl"] .portal-content {
  direction: rtl;
}

/* Arabic typography: swap in an Arabic-capable typeface without touching
   the Latin type system used for English. */
html[dir="rtl"] body,
html[dir="rtl"] body * {
  font-family: "Cairo", "Tajawal", Arial, sans-serif !important;
}

html[dir="rtl"] .brand,
html[dir="rtl"] .footer-brand {
  font-family: "Barlow Condensed", Impact, sans-serif !important;
}

@media (max-width: 700px) {
  html[dir="rtl"] .lang-switch#lang-switch,
  html[dir="rtl"] .header-tools .header-social {
    display: none;
  }
}