/* ==========================================================================
   Capa RTL · mercados que se leen de derecha a izquierda (hoy: Israel / hebreo)
   --------------------------------------------------------------------------
   Se carga SOLO en esos mercados, DESPUÉS del CSS oficial de la plantilla.
   Regla de porting de la casa: el CSS de cada plantilla es VERBATIM y no se
   toca; lo específico de RTL vive aquí, aislado.

   Qué hace: el navegador ya invierte el flujo con dir="rtl"; lo que hay que
   corregir a mano son (1) los valores direccionales escritos con left/right
   fijos, (2) los elementos que deben seguir en LTR (números, URLs, marcas
   latinas) y (3) los iconos/flechas que apuntan a un lado.
   ========================================================================== */

/* --- 1 · Tipografía y base ------------------------------------------------ */
[dir='rtl'] body,
[dir='rtl'] input,
[dir='rtl'] button,
[dir='rtl'] textarea {
  font-family: 'Inter', 'Noto Sans Hebrew', 'Arial Hebrew', Arial, sans-serif;
}

/* El texto se alinea a la derecha; los bloques centrados se respetan. */
[dir='rtl'] body { text-align: right; }
[dir='rtl'] .head,
[dir='rtl'] .hero-cta,
[dir='rtl'] .band,
[dir='rtl'] .promo,
[dir='rtl'] .trust,
[dir='rtl'] .best-overall,
[dir='rtl'] .sticky,
[dir='rtl'] .cta-btn,
[dir='rtl'] .f-legal { text-align: center; }

/* --- 2 · Listas y viñetas ------------------------------------------------- */
[dir='rtl'] ul,
[dir='rtl'] ol { padding-right: 1.2em; padding-left: 0; }
[dir='rtl'] li { text-align: right; }

/* Las listas de PROS/CONS y bullets llevan el icono pegado al borde inicial. */
[dir='rtl'] .pros li,
[dir='rtl'] .cons li,
[dir='rtl'] .check-list li,
[dir='rtl'] .hero-bullets li {
  padding-right: 1.6em;
  padding-left: 0;
  background-position: right center;
}

/* --- 3 · Elementos que NO se invierten ------------------------------------ */
/* Números, puntuaciones, precios, URLs y marcas latinas se leen en LTR aunque
   la página vaya en RTL: invertirlos los haría ilegibles. */
[dir='rtl'] .score,
[dir='rtl'] .rating,
[dir='rtl'] .rate-num,
[dir='rtl'] .stars,
[dir='rtl'] .trustrate,
[dir='rtl'] .reviews-count,
[dir='rtl'] time,
[dir='rtl'] .wordmark,
[dir='rtl'] a[href^='http'] {
  direction: ltr;
  unicode-bidi: isolate;
}
/* …pero siguen colocados en el lado correcto del bloque. */
[dir='rtl'] .score,
[dir='rtl'] .rating { text-align: center; }

/* --- 4 · Flechas e iconos direccionales ----------------------------------- */
/* Una flecha "→" en RTL debe apuntar al otro lado. */
[dir='rtl'] .cta-btn::after,
[dir='rtl'] .arrow,
[dir='rtl'] .chev { transform: scaleX(-1); display: inline-block; }

/* --- 5 · Tablas ----------------------------------------------------------- */
[dir='rtl'] table { direction: rtl; }
[dir='rtl'] th,
[dir='rtl'] td { text-align: right; }
[dir='rtl'] th:first-child,
[dir='rtl'] td:first-child { text-align: right; }
/* La columna de ✓/✗ se mantiene centrada. */
[dir='rtl'] td.yes,
[dir='rtl'] td.no,
[dir='rtl'] .cmp-table td:not(:first-child) { text-align: center; }

/* --- 6 · Sidebar y columnas del editorial --------------------------------- */
/* El grid ya se invierte solo; solo hay que devolver los márgenes. */
[dir='rtl'] .side,
[dir='rtl'] .sidebar { margin-left: 0; margin-right: 24px; }
@media (max-width: 920px) {
  [dir='rtl'] .side,
  [dir='rtl'] .sidebar { margin-right: 0; }
}

/* --- 7 · Barra fija inferior ---------------------------------------------- */
[dir='rtl'] .sticky .s-left { flex-direction: row-reverse; }

/* --- 8 · Comillas y citas ------------------------------------------------- */
[dir='rtl'] blockquote,
[dir='rtl'] .quote { border-right: 3px solid currentColor; border-left: 0; padding-right: 14px; padding-left: 0; }