/* ===================================================
   China Passage - Arabic RTL (Right-to-Left) Stylesheet
   Applied when <html lang="ar" dir="rtl">
   =================================================== */

html[dir="rtl"] {
  direction: rtl;
  text-align: right;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Tahoma", "Noto Sans Arabic", "Geeza Pro", Arial, sans-serif;
}

html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
}

/* Typography Overrides */
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6,
html[dir="rtl"] .wordmark,
html[dir="rtl"] .commerce-hero h1 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Tahoma", "Noto Sans Arabic", "Geeza Pro", Arial, sans-serif;
}

/* Header & Navigation */
html[dir="rtl"] .header-inner {
  flex-direction: row;
}

html[dir="rtl"] .header-links {
  margin-right: 1.5rem;
  margin-left: auto;
}

html[dir="rtl"] .header-controls {
  margin-right: auto;
  margin-left: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Directional Icons & Arrows */
html[dir="rtl"] .hero-place-cta span,
html[dir="rtl"] .menu-plan span,
html[dir="rtl"] .search-all span,
html[dir="rtl"] a[href] span[aria-hidden="true"] {
  display: inline-block;
  transform: scaleX(-1);
}

/* Pricing & Commerce Grid */
html[dir="rtl"] .card-features li {
  padding-right: 2rem;
  padding-left: 0;
}

html[dir="rtl"] .card-features li svg {
  right: 0;
  left: auto;
}

html[dir="rtl"] .card-price {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

html[dir="rtl"] .card-tag {
  left: 1.5rem;
  right: auto;
}

/* Forms & Inputs */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .search-field input {
  padding-right: 1rem;
  padding-left: 2.5rem;
}

html[dir="rtl"] .search-submit {
  left: 0.5rem;
  right: auto;
}

/* Hero & Carousel */
html[dir="rtl"] .hero-place {
  right: 1.5rem;
  left: auto;
  text-align: right;
}

html[dir="rtl"] .hero-copy {
  text-align: right;
}

/* Language Switcher RTL */
html[dir="rtl"] .lang-dropdown-menu {
  right: auto;
  left: 0;
  text-align: right;
}

/* Banner & Dropdown RTL */
html[dir="rtl"] .lang-suggest-banner {
  direction: rtl;
  text-align: right;
}

html[dir="rtl"] .search-dropdown {
  text-align: right;
  direction: rtl;
}

html[dir="rtl"] .suggestion-heading {
  text-align: right;
}

html[dir="rtl"] .suggestion-option {
  flex-direction: row;
  text-align: right;
}

html[dir="rtl"] .suggestion-copy {
  margin-right: 0.5rem;
  margin-left: 0;
  text-align: right;
}