/* ═══════════════════════════════════════════════
   SPRACHUMSCHALTER + RECHTS-NACH-LINKS (Arabisch)
   ═══════════════════════════════════════════════ */

/* Rückfall: schwebt oben rechts, wenn die Seite keine Navigationsleiste hat */
#langSwitcher {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 9000;
  font-family: 'Lato', Arial, sans-serif;
}
body.rtl #langSwitcher { right: auto; left: 14px; }

/* Normalfall: sitzt in der Navigation neben "Reservieren" */
#langSwitcher.inline {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  z-index: 200;
  /* inline-flex, sonst nimmt das div als Block die ganze Zeilenbreite ein */
  display: inline-flex;
  align-items: center;
  width: auto;
  flex-shrink: 0;
  /* Kein eigener Rand: .nav-right hat bereits gap:10px */
  margin: 0;
}
/* Nur wo der Elternteil keinen Abstand mitbringt (Impressum-Kopfzeile) */
#langSwitcher.inline.needs-gap { margin-right: 12px; }
body.rtl #langSwitcher.inline.needs-gap { margin-right: 0; margin-left: 12px; }

/* In der Navigation ist der Platz knapp: nur Flagge zeigen.
   Das Sprachkürzel erst, wenn die Leiste breit genug ist. */
#langSwitcher.inline .lang-sw-btn span { display: none; }
@media (min-width: 1200px) {
  #langSwitcher.inline .lang-sw-btn span { display: inline; }
}

.lang-sw-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  background: rgba(12, 6, 4, .82);
  border: 1px solid rgba(201, 168, 76, .35);
  border-radius: 50px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: border-color .2s, background .2s;
}
.lang-sw-btn:hover { border-color: #c9a84c; background: rgba(201, 168, 76, .14); }
.lang-sw-btn img {
  width: 22px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  display: block;
}
.lang-sw-btn span {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: #c9a84c;
}
.lang-sw-btn svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: rgba(201, 168, 76, .7);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s;
}
#langSwitcher.open .lang-sw-btn svg { transform: rotate(180deg); }

.lang-sw-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 165px;
  background: rgba(14, 8, 6, .97);
  border: 1px solid rgba(201, 168, 76, .3);
  border-radius: 12px;
  padding: 5px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}
body.rtl .lang-sw-list { right: auto; left: 0; }
#langSwitcher.open .lang-sw-list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lang-sw-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  color: #f0ebe4;
  font-size: .84rem;
  transition: background .15s;
}
body.rtl .lang-sw-item { text-align: right; }
.lang-sw-item:hover { background: rgba(201, 168, 76, .13); }
.lang-sw-item.active { background: rgba(201, 168, 76, .18); color: #c9a84c; font-weight: 700; }
.lang-sw-item img {
  width: 24px;
  height: 18px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  #langSwitcher { top: 10px; right: 10px; }
  body.rtl #langSwitcher { right: auto; left: 10px; }
  .lang-sw-btn { padding: 6px 8px; gap: 5px; }
  /* Auf schmalen Geräten teilt sich der Platz mit Logo und Hamburger:
     Sprachkürzel weglassen, Flagge genügt */
  .lang-sw-btn span { display: none; }
  #langSwitcher.inline { margin-right: 8px; }
  body.rtl #langSwitcher.inline { margin-right: 0; margin-left: 8px; }
}

/* ── Arabisch: Rechts-nach-Links ──────────────────────────────
   Nur Ausrichtung und Laufrichtung drehen. Bilder, Logos und
   Zahlenblöcke bleiben unangetastet.                          */

body.rtl {
  direction: rtl;
  text-align: right;
  font-family: 'Amiri', 'Lato', Arial, sans-serif;
}

/* Flex-Reihen spiegeln, damit Symbol und Text die Seite tauschen */
body.rtl .nav-links,
body.rtl .footer-grid,
body.rtl .hero-btns,
body.rtl .card-actions,
body.rtl .contact-item,
body.rtl .info-row { direction: rtl; }

/* Elemente, die ausdrücklich links-nach-rechts bleiben:
   Preise, Telefonnummern, Zeiten, E-Mail-Adressen und Zahlen */
body.rtl .price,
body.rtl .menu-card-price,
body.rtl [href^="tel:"],
body.rtl [href^="mailto:"],
body.rtl time,
body.rtl .hours-time {
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}

/* Linksbündige Textblöcke im RTL-Modus rechtsbündig setzen */
body.rtl p,
body.rtl h1,
body.rtl h2,
body.rtl h3,
body.rtl h4,
body.rtl li,
body.rtl label { text-align: inherit; }

/* Mittig gesetzte Bereiche bleiben mittig */
body.rtl [style*="text-align:center"],
body.rtl [style*="text-align: center"],
body.rtl .text-center { text-align: center !important; }

/* Formularfelder: Eingaberichtung mitdrehen */
body.rtl input:not([type="tel"]):not([type="email"]),
body.rtl textarea { direction: rtl; text-align: right; }
body.rtl input[type="tel"],
body.rtl input[type="email"] { direction: ltr; text-align: left; }