/* ============================================
   VILLA SAGE — Bilingual EN + AR
   Switch UI + RTL adaptation
   ============================================ */

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-inline-start: 1.2rem;
  margin-inline-end: 0.4rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid rgba(201, 167, 125, 0.25);
  border-radius: 999px;
  background: rgba(22, 32, 27, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  user-select: none;
  transition: border-color 240ms ease, background 240ms ease;
}
.lang-switch:hover { border-color: rgba(201, 167, 125, 0.55); }

.lang-switch button {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(239, 231, 215, 0.55);
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: 0.15rem 0.35rem;
  border-radius: 6px;
  transition: color 200ms ease, transform 200ms ease;
}
.lang-switch button:hover { color: #C9A77D; transform: scale(1.05); }
.lang-switch button.active {
  color: #C9A77D;
  font-weight: 600;
}
.lang-switch button[data-set-lang="ar"] {
  font-family: 'Reem Kufi Fun', 'Tajawal', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.92rem;
  letter-spacing: 0;
}
.lang-switch .divider {
  color: rgba(239, 231, 215, 0.25);
  font-weight: 300;
  pointer-events: none;
}

.booking-nav .lang-switch {
  background: rgba(22, 32, 27, 0.30);
  border-color: rgba(201, 167, 125, 0.18);
}

@media (max-width: 880px) {
  .lang-switch {
    margin-inline-start: auto;
    margin-inline-end: 0.6rem;
    padding: 0.25rem 0.55rem;
    font-size: 0.72rem;
  }
  .lang-switch button { font-size: 0.74rem; padding: 0.1rem 0.25rem; }
  .lang-switch button[data-set-lang="ar"] { font-size: 0.88rem; }
}

/* Default: AR hidden */
[data-lang="ar"] { display: none; }
html[dir="rtl"] [data-lang="en"] { display: none; }
html[dir="rtl"] [data-lang="ar"] { display: initial; }

html[dir="rtl"] p[data-lang="ar"],
html[dir="rtl"] div[data-lang="ar"],
html[dir="rtl"] li[data-lang="ar"],
html[dir="rtl"] h1[data-lang="ar"],
html[dir="rtl"] h2[data-lang="ar"],
html[dir="rtl"] h3[data-lang="ar"],
html[dir="rtl"] h4[data-lang="ar"] { display: block; }

/* RTL typography */
html[dir="rtl"] body {
  font-family: 'Tajawal', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] .hero-title,
html[dir="rtl"] .section-title,
html[dir="rtl"] .subpage-title,
html[dir="rtl"] .booking-title,
html[dir="rtl"] .logo {
  font-family: 'Reem Kufi Fun', 'Tajawal', serif;
  font-style: normal !important;
}
html[dir="rtl"] em,
html[dir="rtl"] i,
html[dir="rtl"] .hero-title em,
html[dir="rtl"] .section-title em,
html[dir="rtl"] .subpage-title em,
html[dir="rtl"] .booking-title em,
html[dir="rtl"] .logo em {
  font-style: normal !important;
  font-family: 'Reem Kufi Fun', 'Tajawal', serif;
  font-weight: 500;
  color: var(--color-accent, #C9A77D);
}

html[dir="rtl"] .eyebrow,
html[dir="rtl"] .hero-eyebrow,
html[dir="rtl"] .form-eyebrow {
  text-transform: none;
  letter-spacing: 0.04em;
  font-family: 'Tajawal', sans-serif;
  font-weight: 500;
}

html[dir="rtl"] .marquee-track { animation-direction: reverse; }

html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] .mpi-price,
html[dir="rtl"] .menu-item-price,
html[dir="rtl"] .dish-price,
html[dir="rtl"] .summary-line span:last-child,
html[dir="rtl"] .repere-stat,
html[dir="rtl"] .counter {
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}
html[dir="rtl"] .step-num { direction: ltr; }
html[dir="rtl"] .stepper { direction: rtl; }
html[dir="rtl"] .pay-icons { direction: ltr; }
html[dir="rtl"] .hero-stamp { direction: rtl; }
html[dir="rtl"] .logo { direction: ltr; }
html[dir="rtl"] .footer-base { direction: ltr; text-align: center; }
html[dir="rtl"] .about-figure-stamp em,
html[dir="rtl"] .about-figure-stamp small {
  direction: ltr;
  display: inline-block;
}
html[dir="rtl"] .mobile-menu { text-align: right; }
html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] textarea,
html[dir="rtl"] select { text-align: right; }
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="date"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] input.card-input,
html[dir="rtl"] input[name="card-number"],
html[dir="rtl"] input[name="card-exp"],
html[dir="rtl"] input[name="card-cvc"] {
  direction: ltr;
  text-align: left;
}
html[dir="rtl"] .pay-trust span { direction: ltr; }
html[dir="rtl"] .scroll-progress {
  right: 0; left: auto;
  transform-origin: right center;
}
html[dir="rtl"] .hero-scroll { direction: ltr; }
html[dir="rtl"] .summary-line { direction: rtl; }
html[dir="rtl"] .summary-line span:last-child { text-align: left; }
html[dir="rtl"] .nav-links { flex-direction: row-reverse; }
html[dir="rtl"] .footer-col { text-align: right; }
html[dir="rtl"] .footer-col h4,
html[dir="rtl"] .footer-col p,
html[dir="rtl"] .footer-col ul,
html[dir="rtl"] .footer-col li { text-align: right; }
html[dir="rtl"] { --line-height-base: 1.85; }
html[dir="rtl"] body, html[dir="rtl"] p { line-height: 1.85; }
html[dir="rtl"] .hero-title,
html[dir="rtl"] .section-title,
html[dir="rtl"] .subpage-title,
html[dir="rtl"] .booking-title { line-height: 1.2; }