/* ============================================================
 * © 2026 VARKOS GROUP LLC — Invented by KOS
 * varkos-rtl.css — SOLUZIONE RTL GLOBALE (arabo e altre lingue RTL)
 * ------------------------------------------------------------
 * Un solo file per tutto l'ecosistema. Quando l'utente sceglie l'arabo,
 * varkos-i18n.js imposta document.documentElement.dir='rtl'. Questo CSS
 * sistema allineamenti, punteggiatura, direzione e layout in modo che il
 * testo arabo (e ebraico/farsi/urdu) sia reso correttamente da destra a
 * sinistra — senza rompere il design.
 *
 * Regola d'oro: NON invertiamo i numeri, i prezzi, i codici, le email,
 * gli URL e i loghi (restano LTR anche in pagina RTL, come da standard).
 * ============================================================ */

/* ── Base: quando la pagina è RTL ── */
html[dir="rtl"] body,
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

/* Il testo torna a sinistra solo dove serve la lettura naturale */
html[dir="rtl"] p,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] li,
html[dir="rtl"] span,
html[dir="rtl"] div,
html[dir="rtl"] a,
html[dir="rtl"] label,
html[dir="rtl"] td,
html[dir="rtl"] th {
  text-align: right;
  unicode-bidi: plaintext; /* la punteggiatura segue la direzione del testo → il punto va a fine frase */
}

/* Centrature esplicite restano centrate */
html[dir="rtl"] [style*="text-align:center"],
html[dir="rtl"] [style*="text-align: center"],
html[dir="rtl"] .center,
html[dir="rtl"] .text-center,
html[dir="rtl"] .hero,
html[dir="rtl"] .hero * {
  text-align: center;
}

/* ── LTR forzato per contenuti che NON si invertono ──
 * Numeri, prezzi, codici, email, URL, orari, valute, loghi, brand. */
html[dir="rtl"] [data-price],
html[dir="rtl"] [data-eur],
html[dir="rtl"] .price,
html[dir="rtl"] .plan-price,
html[dir="rtl"] .cta-plan-price,
html[dir="rtl"] code,
html[dir="rtl"] pre,
html[dir="rtl"] .mono,
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] input[type="url"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] .access-input,
html[dir="rtl"] .code-input,
html[dir="rtl"] #access-code,
html[dir="rtl"] #gi-code-inp,
html[dir="rtl"] .logo,
html[dir="rtl"] .brand,
html[dir="rtl"] .nav-logo,
html[dir="rtl"] time,
html[dir="rtl"] .currency,
html[dir="rtl"] a[href^="mailto:"],
html[dir="rtl"] a[href^="http"],
html[dir="rtl"] a[href^="tel:"] {
  direction: ltr !important;
  unicode-bidi: isolate;
  text-align: inherit;
}

/* I prezzi e i numeri restano allineati come nel design (spesso a destra o centro) */
html[dir="rtl"] .price,
html[dir="rtl"] .plan-price {
  display: inline-block;
}

/* ── Navigazione: la barra si specchia ── */
html[dir="rtl"] nav,
html[dir="rtl"] .nav,
html[dir="rtl"] .navbar,
html[dir="rtl"] header {
  direction: rtl;
}

/* ── Flex/grid: inverto la direzione principale dove è esplicita in row ── */
html[dir="rtl"] .row,
html[dir="rtl"] .flex-row,
html[dir="rtl"] .nav-links,
html[dir="rtl"] .footer-cols {
  flex-direction: row-reverse;
}

/* ── Elementi posizionati fixed/absolute a destra/sinistra: li specchio ──
 * Solo per widget noti dell'ecosistema (lang-fab, ecosystem-widget, sphere). */
html[dir="rtl"] #varkos-lang-fab,
html[dir="rtl"] .lang-fab {
  right: auto !important;
  left: 20px !important;
}

/* ── Liste: il bullet va a destra ── */
html[dir="rtl"] ul,
html[dir="rtl"] ol {
  padding-right: 1.2em;
  padding-left: 0;
}

/* ── Input e textarea: cursore e testo da destra ── */
html[dir="rtl"] input:not([type="email"]):not([type="tel"]):not([type="url"]):not([type="number"]),
html[dir="rtl"] textarea {
  text-align: right;
  direction: rtl;
}

/* ── Font arabo: leggibilità migliore ── */
html[dir="rtl"] body {
  font-family: 'Segoe UI', 'Tahoma', 'Arial', system-ui, sans-serif;
  letter-spacing: 0 !important; /* l'arabo non usa letter-spacing, lo azzero */
}

/* Ripristino il letter-spacing sui titoli LTR forzati (loghi, codici) */
html[dir="rtl"] .logo,
html[dir="rtl"] .brand,
html[dir="rtl"] code,
html[dir="rtl"] .mono {
  letter-spacing: normal;
}