/* rtl.css — Ajustes de derecha a izquierda para las páginas en ÁRABE (/ar/…).
   Se carga DESPUÉS del CSS de cada página, solo en las páginas con
   <html dir="rtl">. No afecta a en/es/fr/de.
   Idea: con dir="rtl" el navegador ya invierte filas, rejillas y alineación de
   texto. Aquí solo se corrige lo que está escrito con "izquierda/derecha"
   fijos (márgenes, bordes, posiciones) y la tipografía árabe. */

/* ── Tipografía ──
   DM Sans no tiene letras árabes; se usa Noto Sans Arabic y el resto cae a DM Sans
   para cifras y marcas en latino. El espaciado entre letras rompe la unión de
   las letras árabes, por eso se anula. */
html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] summary {
  font-family: 'Noto Sans Arabic', 'DM Sans', 'Segoe UI', Tahoma, sans-serif;
}
html[dir="rtl"] *,
html[dir="rtl"] *::before,
html[dir="rtl"] *::after {
  letter-spacing: 0 !important;
}

/* Campos que siempre se escriben de izquierda a derecha (correo, teléfono, tarjeta) */
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="number"] {
  direction: ltr;
  text-align: right;
}

/* ── Selector de idioma ── */
html[dir="rtl"] .lang-menu { right: auto; left: 0; }

/* ── Botón de WhatsApp y aviso de cookies (se espejan) ── */
html[dir="rtl"] .whatsapp-btn { right: auto; left: 28px; }
html[dir="rtl"] .whatsapp-tooltip { right: auto; left: 70px; }
html[dir="rtl"] .whatsapp-tooltip::after {
  right: auto; left: -6px;
  border-left: none; border-right-color: #fff; border-left-color: transparent;
}
html[dir="rtl"] .cookie-popup { left: auto; right: 24px; }

/* ── Tarjetas de eventos (portada) ── */
html[dir="rtl"] .fav { right: auto; left: 10px; }

/* ── Tarjetas de clubs ── */
html[dir="rtl"] .cc-badge { left: auto; right: 18px; }

/* ── Ficha de evento ── */
html[dir="rtl"] .event-aside { padding-right: 0; padding-left: 40px; }
html[dir="rtl"] .event-main {
  padding-left: 0; padding-right: 40px;
  border-left: none; border-right: 1px solid rgba(255,255,255,0.06);
}
html[dir="rtl"] .faq-q { text-align: right; }

/* ── Ficha de club (club.html) ── */
html[dir="rtl"] .gallery-header h2 { margin-right: 0; margin-left: auto; }

/* ── Calendario ── */
html[dir="rtl"] .cal-venue-col,
html[dir="rtl"] .cal-venue { border-right: none; border-left: 1px solid rgba(255,255,255,0.06); }
html[dir="rtl"] .cal-day-head,
html[dir="rtl"] .cal-cell { border-right: none; border-left: 1px solid rgba(255,255,255,0.04); }
html[dir="rtl"] .cal-intro-card-label { left: auto; right: 10px; }
html[dir="rtl"] .date-picker { left: auto; right: 200px; }

/* ── Pago (checkout) ── */
html[dir="rtl"] .co-card-input input { padding-right: 14px; padding-left: 80px; }
html[dir="rtl"] .co-card-icons { right: auto; left: 12px; }

/* ── Flechas: se espejan para que apunten hacia donde se lee en árabe ──
   (volver, continuar, semana anterior/siguiente, galería). Se localizan por
   el dibujo de la flecha, así también valen las generadas por JavaScript. */
html[dir="rtl"] svg:has(> path[d^="M5 12h14"]),
html[dir="rtl"] svg:has(> path[d^="M19 12H5"]),
html[dir="rtl"] svg:has(> path[d="M15 18l-6-6 6-6"]),
html[dir="rtl"] svg:has(> path[d="M9 18l6-6-6-6"]) {
  transform: scaleX(-1);
}

/* ── Móvil ── */
@media (max-width: 768px) {
  html[dir="rtl"] .whatsapp-btn { right: auto; left: 20px; }
  html[dir="rtl"] .cookie-popup { left: 16px; right: 16px; }
  html[dir="rtl"] .date-picker { left: 16px; right: auto; }
  html[dir="rtl"] .event-aside { padding-left: 0; }
  html[dir="rtl"] .event-main { padding-right: 0; border-right: none; }
}