/* =========================================================
   Language switcher + translations (js/i18n.js)
   ========================================================= */
html.i18n-loading body { visibility: hidden; }

.lang-switch { position: relative; display: flex; align-items: center; }
.lang-switch--desktop { margin-left: .9rem; }
.lang-switch--mobile { display: none; }
.lang-switch__toggle {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  height: 38px;
  padding: 0 .75rem;
  border: 1px solid rgba(15, 16, 17, .18);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .22s var(--ease), background .22s var(--ease), color .22s var(--ease);
}
.lang-switch__toggle:hover,
.lang-switch.is-open .lang-switch__toggle { border-color: var(--brand-gold); color: var(--brand-gold); }
.lang-switch__icon { width: 17px; height: 17px; flex-shrink: 0; }
.lang-switch__caret {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  transition: transform .22s var(--ease);
}
.lang-switch.is-open .lang-switch__caret { transform: translateY(2px) rotate(-135deg); }
.lang-switch__menu {
  position: absolute;
  top: calc(100% + .6rem);
  right: 0;
  min-width: 190px;
  padding: .45rem;
  background: var(--paper);
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 6px;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  z-index: 1200;
}
.lang-switch.is-open .lang-switch__menu { opacity: 1; visibility: visible; transform: none; }
.lang-switch__option {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  padding: .6rem .7rem;
  border: 0;
  border-radius: 4px;
  background: none;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  text-align: start;
  cursor: pointer;
  transition: background .18s var(--ease), color .18s var(--ease);
}
.lang-switch__option:hover { background: rgba(222, 85, 10, .08); color: var(--brand-gold); }
.lang-switch__option.is-active { color: var(--brand-gold); }
.lang-switch__option.is-active::after { content: "✓"; margin-inline-start: auto; font-size: .85rem; }
.lang-switch__option-short {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 24px;
  border-radius: 4px;
  background: rgba(15, 16, 17, .06);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
}
.lang-switch__option.is-active .lang-switch__option-short { background: var(--brand-gold); color: #fff; }
.lang-switch__option[lang="ar"] { font-family: "Cairo", var(--font-body); font-size: 1.05rem; }

/* Transparent / dark header: match the white nav text */
body.has-hero-transparent .site-header .lang-switch__toggle {
  color: #fff;
  border-color: rgba(255, 255, 255, .35);
}
body.has-hero-transparent .site-header .lang-switch__toggle:hover,
body.has-hero-transparent .site-header .lang-switch.is-open .lang-switch__toggle { color: var(--brand-gold); border-color: var(--brand-gold); }

@media (max-width: 960px) {
  .lang-switch--mobile {
    display: flex;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-self: center;
  }
  .lang-switch--mobile .lang-switch__toggle { height: 34px; padding: 0 .55rem; gap: .3rem; font-size: .7rem; }
  .lang-switch--mobile .lang-switch__caret { display: none; }
  body.menu-open .lang-switch--mobile .lang-switch__toggle { color: #fff; border-color: rgba(255, 255, 255, .35); }
}

.mobile-menu__lang { margin-top: 1.75rem; }
.mobile-menu__lang-options { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.mobile-menu__lang-option,
.site-chrome-reset .mobile-menu__lang-option {
  padding: .55rem .95rem;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: none;
  color: #fff;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.mobile-menu__lang-option[lang="ar"] { font-family: "Cairo", var(--font-body); font-size: 1.05rem; }
.mobile-menu__lang-option.is-active,
.site-chrome-reset .mobile-menu__lang-option.is-active {
  background: var(--brand-gold);
  border-color: var(--brand-gold);
  color: #fff;
}

/* ---------- Arabic typography ---------- */
html[lang="ar"] {
  --font-display: "Cairo", "Archivo Black", system-ui, sans-serif;
  --font-serif: "Cairo", "Fraunces", Georgia, serif;
  --font-body: "Cairo", "Manrope", system-ui, sans-serif;
}
html[lang="ar"] body,
html[lang="ar"] body * { letter-spacing: 0 !important; }
html[lang="ar"] .text-serif,
html[lang="ar"] em,
html[lang="ar"] i:not([data-lucide]):not(.bi) { font-style: normal; }
html[lang="ar"] .hero__title,
html[lang="ar"] .section__title,
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { font-weight: 800; }
html[lang="ar"] .header__link,
html[lang="ar"] .mobile-menu__link,
html[lang="ar"] .btn,
html[lang="ar"] .kicker { text-transform: none; }
html[lang="ar"] .header__link { font-size: .95rem; }
html[lang="ar"] .side-rail { writing-mode: vertical-rl; }
html[lang="ar"] .side-rail__label { transform: rotate(180deg); display: inline-block; }

/* ---------- Right-to-left layout fixes ---------- */
html[dir="rtl"] .header__submenu { left: auto; right: 100%; }
html[dir="rtl"] .header__dropdown-caret { transform: rotate(180deg); }
html[dir="rtl"] .lang-switch__menu { right: auto; left: 0; }
html[dir="rtl"] .lang-switch--desktop { margin-left: 0; margin-right: .9rem; }
html[dir="rtl"] .header__phone-cta { margin-left: 0; margin-right: .35rem; }
html[dir="rtl"] .side-rail {
  right: auto;
  left: -1px;
  border-radius: 0 2px 2px 0;
  box-shadow: 2px 0 16px #00000040;
}
html[dir="rtl"] .whatsapp-float { right: auto; left: 1.25rem; }
html[dir="rtl"] .estimator__option-check { right: auto; left: 1rem; }
html[dir="rtl"] .estimator__next { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .site-chrome-reset .site-footer .footer__link:hover { transform: translate(-3px); }
html[dir="rtl"] .hero-nav.prev,
html[dir="rtl"] .hero-nav.next,
html[dir="rtl"] .ba-arrow,
html[dir="rtl"] [data-lucide="arrow-right"],
html[dir="rtl"] [data-lucide="arrow-left"],
html[dir="rtl"] [data-lucide="chevron-right"],
html[dir="rtl"] [data-lucide="chevron-left"],
html[dir="rtl"] [data-lucide="arrow-up-right"] { transform: scaleX(-1); }
html[dir="rtl"] .estimator__next-arrow,
html[dir="rtl"] .estimator__back-arrow { display: inline-block; transform: scaleX(-1); }
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] .footer__contact-item a,
html[dir="rtl"] .header__phone-cta,
html[dir="rtl"] .footer__callband-phone,
html[dir="rtl"] .mobile-menu__phone,
html[dir="rtl"] .mobile-menu__email { direction: ltr; unicode-bidi: isolate; }