/* ==========================================================================
   SEEYOUSOON SUPER-APP — MULTILINGUAL ARABIC RTL SUITE (S-RTL-UI: S1 & S2)
   Flawless bidirectional layout, directional icon flips & preservation of
   western price numerals and map controls.
   Section 8 Compliant: Zero CDN, zero inline styles, strictly < 500 lines.
   ========================================================================== */

/* 1. Global Document RTL Direction */
html[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

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

/* 2. Topbar & Header Mirroring (S1) */
html[dir="rtl"] .hem-topbar-row {
  flex-direction: row-reverse;
}

html[dir="rtl"] .hem-brand {
  margin-left: 0;
  margin-right: auto;
}

html[dir="rtl"] .hem-topbar-actions {
  flex-direction: row-reverse;
}

/* Back buttons & directional chevrons */
html[dir="rtl"] .admin-btn-back svg,
html[dir="rtl"] .q-btn-back svg,
html[dir="rtl"] .auth-btn-back svg,
html[dir="rtl"] .sheet-btn-back svg {
  transform: rotate(180deg);
}

html[dir="rtl"] .sidebar-link-chevron svg,
html[dir="rtl"] .q-role-chevron svg,
html[dir="rtl"] .menu-item-chevron svg {
  transform: rotate(180deg);
}

/* 3. Sliding Sidebar Drawer Mirroring (Opens from Right in RTL) */
html[dir="rtl"] .sidebar-drawer {
  left: auto;
  right: 0;
  transform: translateX(100%);
  border-right: none;
  border-left: 1px solid rgba(168, 85, 247, 0.25);
  box-shadow: -10px 0 35px rgba(0, 0, 0, 0.7);
}

html[dir="rtl"] .sidebar-drawer.open,
html[dir="rtl"] .sidebar-drawer.is-open {
  transform: translateX(0);
}

html[dir="rtl"] .sidebar-drawer-header {
  flex-direction: row-reverse;
}

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

html[dir="rtl"] .sidebar-link-icon {
  margin-right: 0;
  margin-left: 12px;
}

/* 4. Search Bar & Form Input Mirroring */
html[dir="rtl"] .sheet-search-input,
html[dir="rtl"] .b-search-input,
html[dir="rtl"] .menu-search-input {
  text-align: right;
  padding-left: 16px;
  padding-right: 44px;
}

html[dir="rtl"] .sheet-search-icon,
html[dir="rtl"] .b-search-icon,
html[dir="rtl"] .menu-search-icon {
  left: auto;
  right: 14px;
}

html[dir="rtl"] .sheet-search-clear {
  right: auto;
  left: 12px;
}

/* 5. Category Chips & Horizontal Sliders */
html[dir="rtl"] .b-category-chips,
html[dir="rtl"] .admin-sector-nav,
html[dir="rtl"] .sector-subtabs-scroll {
  flex-direction: row;
}

html[dir="rtl"] .b-chip,
html[dir="rtl"] .admin-sector-btn {
  flex-direction: row;
}

/* 6. Taxi Booking Sheet (S2) */
html[dir="rtl"] .taxi-tier-card {
  flex-direction: row-reverse;
  text-align: right;
}

html[dir="rtl"] .taxi-tier-info {
  text-align: right;
}

html[dir="rtl"] .taxi-tier-price {
  text-align: left;
  direction: ltr; /* Prices like 149 kr stay standard */
}

html[dir="rtl"] .taxi-addr-input {
  text-align: right;
}

html[dir="rtl"] .taxi-addr-dot {
  margin-left: 12px;
  margin-right: 0;
}

/* 7. Numbers & Tabular Currency Protection */
html[dir="rtl"] .tabular-nums,
html[dir="rtl"] .num-tabular,
html[dir="rtl"] .bundle-price-row.total,
html[dir="rtl"] .admin-stat-val,
html[dir="rtl"] .taxi-price-tag {
  direction: ltr;
  display: inline-block;
  unicode-bidi: embed;
}

/* 8. Map UI Controls (Retain right-handed ergonomical placement) */
html[dir="rtl"] .map-controls-group {
  right: 16px;
  left: auto;
}

html[dir="rtl"] .live-capsule-container {
  left: 16px;
  right: 16px;
}

/* 9. Cards, Dialogs & Modals */
html[dir="rtl"] .sos-card,
html[dir="rtl"] .bundle-screen,
html[dir="rtl"] .admin-card {
  text-align: right;
}

html[dir="rtl"] .sos-close-btn {
  right: auto;
  left: 18px;
}

html[dir="rtl"] .sos-service-item {
  flex-direction: row;
}

html[dir="rtl"] .bundle-hero-badge {
  flex-direction: row-reverse;
}

html[dir="rtl"] .bundle-item {
  flex-direction: row;
}

html[dir="rtl"] .bundle-price-row {
  flex-direction: row;
}

/* 10. Language Selector Group */
.lang-selector-group {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border, rgba(168, 85, 247, 0.18));
  border-radius: var(--radius-pill, 9999px);
  padding: 2px;
  gap: 2px;
}

.btn-lang-tab {
  padding: 4px 10px;
  border-radius: var(--radius-pill, 9999px);
  border: none;
  background: transparent;
  color: var(--paper-muted, #9ca3af);
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-lang-tab.active {
  background: linear-gradient(135deg, var(--indigo, #6366f1), var(--purple, #a855f7));
  color: #fff;
}