/* styles/rtl.css
   ==========================================================================
   Overrides de DIREÇÃO para as páginas geradas em idiomas RTL (hoje: hebraico).
   Carregado por último, só nas páginas sob /he/, por scripts/build-i18n.js.

   POR QUE UM ARQUIVO GLOBAL E NÃO CLASSES TRADUZIDAS
   O dicionário de tradução NÃO troca classes utilitárias (mr-2 → ms-2). Se
   trocasse, metade dos ícones inverteria e a outra metade não — o Tailwind aqui
   é o Play CDN (JIT em runtime) e as classes físicas continuam existindo no HTML
   francês, que é a fonte. A inversão precisa ser uma regra única, aplicada a
   TODAS as ocorrências de uma vez. É este arquivo.

   O QUE JÁ FUNCIONA DE GRAÇA COM dir="rtl" (não mexer):
   - flexbox e grid invertem sozinhos;
   - `gap-*` é agnóstico de direção (e o layout usa muito mais gap que space-x);
   - `text-center`, paddings simétricos, `left:0;right:0`.

   O QUE PRECISA DE AJUDA (é o que está abaixo):
   - margens/paddings FÍSICOS (mr-/ml-/pr-/pl-);
   - bordas decorativas laterais e cantos arredondados assimétricos;
   - posicionamento absoluto (left/right);
   - ícones de seta, que são semanticamente direcionais;
   - conteúdo LTR embutido (preço, e-mail, telefone, URL);
   - fonte com glifos hebraicos.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tipografia
   Poppins e Dancing Script não têm bloco hebraico — sem isto o texto cai num
   fallback do sistema, diferente em cada plataforma.
   -------------------------------------------------------------------------- */
[dir="rtl"] body,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea,
[dir="rtl"] button {
    font-family: 'Heebo', 'Arial Hebrew', Arial, 'Segoe UI', sans-serif;
}

/* A classe .handwritten do francês é uma cursiva decorativa (Dancing Script).
   O hebraico não tem cursiva conectada tipográfica: imitá-la fica ilegível.
   Mantemos o destaque (peso + gradiente já vêm de .gradient-text-pp) e
   descartamos a cursiva. */
[dir="rtl"] .handwritten {
    font-family: 'Secular One', 'Heebo', sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   2. Margens e paddings físicos → espelhados
   Cobre as ~150 ocorrências de mr-/ml-/pr-/pl- das páginas do funil sem tocar
   no HTML francês. A escala é a do Tailwind (0.25rem por unidade).
   -------------------------------------------------------------------------- */
[dir="rtl"] .mr-1 { margin-right: 0; margin-left: 0.25rem; }
[dir="rtl"] .mr-2 { margin-right: 0; margin-left: 0.5rem; }
[dir="rtl"] .mr-3 { margin-right: 0; margin-left: 0.75rem; }
[dir="rtl"] .mr-4 { margin-right: 0; margin-left: 1rem; }
[dir="rtl"] .ml-1 { margin-left: 0; margin-right: 0.25rem; }
[dir="rtl"] .ml-2 { margin-left: 0; margin-right: 0.5rem; }
[dir="rtl"] .ml-3 { margin-left: 0; margin-right: 0.75rem; }
[dir="rtl"] .ml-4 { margin-left: 0; margin-right: 1rem; }
[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }
[dir="rtl"] .mr-auto { margin-right: 0; margin-left: auto; }

[dir="rtl"] .pr-1 { padding-right: 0; padding-left: 0.25rem; }
[dir="rtl"] .pr-2 { padding-right: 0; padding-left: 0.5rem; }
[dir="rtl"] .pr-3 { padding-right: 0; padding-left: 0.75rem; }
[dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1rem; }
[dir="rtl"] .pl-1 { padding-left: 0; padding-right: 0.25rem; }
[dir="rtl"] .pl-2 { padding-left: 0; padding-right: 0.5rem; }
[dir="rtl"] .pl-3 { padding-left: 0; padding-right: 0.75rem; }
[dir="rtl"] .pl-4 { padding-left: 0; padding-right: 1rem; }

/* --------------------------------------------------------------------------
   3. Alinhamento de texto
   -------------------------------------------------------------------------- */
[dir="rtl"] .text-left  { text-align: right; }
[dir="rtl"] .text-right { text-align: left; }

/* --------------------------------------------------------------------------
   4. Bordas decorativas laterais e cantos assimétricos
   Ex.: o aviso amarelo do step 2 usa border-l-4 + rounded-r-lg.
   -------------------------------------------------------------------------- */
[dir="rtl"] .border-l,
[dir="rtl"] .border-l-2,
[dir="rtl"] .border-l-4,
[dir="rtl"] .border-l-8 { border-left-width: 0; }
[dir="rtl"] .border-l   { border-right-width: 1px; }
[dir="rtl"] .border-l-2 { border-right-width: 2px; }
[dir="rtl"] .border-l-4 { border-right-width: 4px; }
[dir="rtl"] .border-l-8 { border-right-width: 8px; }

[dir="rtl"] .border-r,
[dir="rtl"] .border-r-2,
[dir="rtl"] .border-r-4,
[dir="rtl"] .border-r-8 { border-right-width: 0; }
[dir="rtl"] .border-r   { border-left-width: 1px; }
[dir="rtl"] .border-r-2 { border-left-width: 2px; }
[dir="rtl"] .border-r-4 { border-left-width: 4px; }
[dir="rtl"] .border-r-8 { border-left-width: 8px; }

[dir="rtl"] .rounded-r-lg  { border-radius: 0.5rem 0 0 0.5rem; }
[dir="rtl"] .rounded-l-lg  { border-radius: 0 0.5rem 0.5rem 0; }
[dir="rtl"] .rounded-r-xl  { border-radius: 0.75rem 0 0 0.75rem; }
[dir="rtl"] .rounded-l-xl  { border-radius: 0 0.75rem 0.75rem 0; }

/* --------------------------------------------------------------------------
   5. Posicionamento absoluto
   Ex.: o badge "OFFRE" no canto do botão de pagar (absolute right-4).
   -------------------------------------------------------------------------- */
[dir="rtl"] .absolute.right-0 { right: auto; left: 0; }
[dir="rtl"] .absolute.right-1 { right: auto; left: 0.25rem; }
[dir="rtl"] .absolute.right-2 { right: auto; left: 0.5rem; }
[dir="rtl"] .absolute.right-3 { right: auto; left: 0.75rem; }
[dir="rtl"] .absolute.right-4 { right: auto; left: 1rem; }
[dir="rtl"] .absolute.left-0  { left: auto; right: 0; }
[dir="rtl"] .absolute.left-1  { left: auto; right: 0.25rem; }
[dir="rtl"] .absolute.left-2  { left: auto; right: 0.5rem; }
[dir="rtl"] .absolute.left-3  { left: auto; right: 0.75rem; }
[dir="rtl"] .absolute.left-4  { left: auto; right: 1rem; }

/* --------------------------------------------------------------------------
   6. Setas — semanticamente direcionais
   "Continuer →" tem de virar "← להמשיך". Font Awesome não faz isso sozinho.
   Espelhamos o GLIFO em vez de trocar a classe (que está no HTML francês).
   -------------------------------------------------------------------------- */
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-chevron-right,
[dir="rtl"] .fa-chevron-left,
[dir="rtl"] .fa-angle-right,
[dir="rtl"] .fa-angle-left,
[dir="rtl"] .fa-long-arrow-right,
[dir="rtl"] .fa-long-arrow-left,
[dir="rtl"] .fa-caret-right,
[dir="rtl"] .fa-caret-left {
    transform: scaleX(-1);
}
/* Ícones NÃO direcionais que por acaso apontam para um lado (play, share,
   sign-out) não podem ser espelhados — ficariam apontando ao contrário do
   esperado universalmente. */
[dir="rtl"] .fa-play,
[dir="rtl"] .fa-forward,
[dir="rtl"] .fa-backward,
[dir="rtl"] .fa-share,
[dir="rtl"] .fa-share-alt,
[dir="rtl"] .fa-external-link-alt,
[dir="rtl"] .fa-sign-out-alt {
    transform: none;
}

/* --------------------------------------------------------------------------
   7. Conteúdo LTR dentro de texto RTL
   Preço, e-mail, telefone, URL, código promo e a letra em formato Suno
   ([Verse 1], [Male]) precisam de isolamento bidi, senão o algoritmo
   bidirecional joga a pontuação para o lado errado.
   -------------------------------------------------------------------------- */
[dir="rtl"] .ltr,
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"],
[dir="rtl"] .price,
[dir="rtl"] code,
[dir="rtl"] .countdown {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
}
/* O campo de e-mail/telefone escreve em latim mas fica alinhado ao lado do
   texto RTL — comportamento esperado em formulários israelenses. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"] {
    text-align: right;
}

/* Letra da música: hebraica, mas com tags Suno em inglês entre colchetes.
   `dir:auto` por parágrafo seria ideal; em textarea usamos rtl + isolate. */
[dir="rtl"] #generatedLyrics,
[dir="rtl"] #lyricsText,
[dir="rtl"] .lyrics,
[dir="rtl"] .lyrics-text {
    direction: rtl;
    text-align: right;
    unicode-bidi: plaintext;
}

/* --------------------------------------------------------------------------
   8. Formulários e componentes específicos do funil
   -------------------------------------------------------------------------- */
[dir="rtl"] .form-input,
[dir="rtl"] .form-label { text-align: right; }

/* Barra de progresso dos 3 passos: a linha entre os círculos é simétrica,
   mas o preenchimento (se houver) precisa começar do outro lado. */
[dir="rtl"] .step-line { direction: rtl; }

/* Scroll horizontal dos chips de gênero: em RTL começa à direita. */
[dir="rtl"] #genrePills { direction: rtl; }

/* Select nativo: a seta do browser já acompanha o dir; só garantimos o padding
   do lado certo para o texto não passar por baixo dela. */
[dir="rtl"] select.form-input {
    padding-right: 12px;
    padding-left: 32px;
    background-position: left 0.5rem center;
}

/* --------------------------------------------------------------------------
   9. Animações com deslocamento horizontal
   O shake é simétrico (±4px), então funciona igual. Slides direcionais, não.
   -------------------------------------------------------------------------- */
[dir="rtl"] .slide-in-right { animation-name: slide-in-left; }
[dir="rtl"] .slide-in-left  { animation-name: slide-in-right; }