/* ============================================================
   CORREÇÕES DE MOBILE — carregada por último no base.html
   ------------------------------------------------------------
   Defeitos encontrados validando as páginas em 390x844 com
   navegador real (Playwright). Cada bloco explica o que quebrava.
   Reverter tudo = remover o <link> em base.html.
   ============================================================ */

@media (max-width: 768px) {

    /* ---------- 1. Home: título entrando atrás da navbar ----------
       .hero-section tem padding-top igual à altura do header, mas também
       min-height:100vh com o conteúdo centralizado. No celular o conteúdo
       fica mais alto que o espaço disponível e transborda PARA CIMA — a
       primeira linha do H1 ("Fundos") sumia atrás da barra fixa.
       Deixando a seção crescer com o conteúdo, o padding volta a valer. */
    .hero-section {
        min-height: auto;
        padding-top: calc(var(--header-height, 70px) + 1rem);
        padding-bottom: 2.5rem;
    }

    /* O culpado é o .hero-wrapper: min-height:100vh (844px) dentro de um
       container que já perdeu os 70px do header (774px). Ele ficava 901px de
       altura e, centralizado, transbordava ~63px PARA CIMA — daí o H1 nascer
       em y=39, atrás da barra. Deixando a altura seguir o conteúdo, resolve. */
    .hero-section .hero-wrapper {
        min-height: auto;
        justify-content: flex-start;
    }

    .hero-section .hero-content {
        min-height: auto;
        justify-content: flex-start;
    }

    /* O .container do hero é flex com justify-content:center e altura travada
       em ~100vh menos o header. Conteúdo mais alto que isso é centralizado e
       vaza pelos dois lados — metade sumindo atrás da navbar. Alinhando ao
       topo e soltando a altura, nada mais transborda para cima. */
    .hero-section>.container {
        min-height: auto;
        height: auto;
        justify-content: flex-start;
        align-items: stretch;
    }
}

/* ---------- 2. Planos: selo "20% OFF" sobre o switch ----------
   Em ≤480px o container vira coluna, e .discount-tag é absoluto
   (top:-12px; right:-12px) em relação ao .toggle-option — no empilhamento
   vertical o selo subia por cima do switch. Mantendo o toggle em linha
   (cabe folgado em 390px) o selo volta ao lugar certo. */
@media (max-width: 480px) {
    .pricing-toggle-container {
        flex-direction: row;
        flex-wrap: wrap;
        gap: .75rem;
        width: auto;
        max-width: 100%;
        padding: .9rem 1.1rem;
    }

    .pricing-toggle-container .toggle-option {
        position: relative;
    }

    /* Selo deixa de flutuar: vira etiqueta ao lado do texto "Anual" */
    .pricing-toggle-container .discount-tag {
        position: static;
        display: inline-block;
        margin-left: .4rem;
        animation: none;
        vertical-align: middle;
    }
}

@media (max-width: 768px) {

    /* ---------- 3. Canais: botões do card espremidos ----------
       A linha de ações (Ver Galeria / Twitch / Kick) não quebrava e o
       último botão ficava cortado, ainda por baixo do balão de suporte. */
    .channel-card .channel-actions,
    .streamer-card .card-actions,
    .canal-card .canal-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
    }

    .channel-card .channel-actions>*,
    .streamer-card .card-actions>*,
    .canal-card .canal-actions>* {
        flex: 1 1 auto;
        min-width: 0;
        justify-content: center;
    }

    /* ---------- 4. Balão de suporte tapando conteúdo ----------
       O botão flutuante fica sobre o canto inferior direito e cobria
       botões de ação no fim dos cards. Encolhe e sobe um pouco no
       celular, e o rodapé ganha respiro para não ficar embaixo dele. */
    .support-chat-button,
    .support-chat-toggle,
    #support-chat-button {
        transform: scale(.85);
        transform-origin: bottom right;
    }

    body {
        /* espaço para o balão não cobrir o último elemento da página */
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    footer {
        padding-bottom: 4.5rem;
    }
}

/* ---------- 5. Regras gerais de segurança no mobile ----------
   Evita estouro horizontal por mídia/tabela larga em qualquer página. */
@media (max-width: 768px) {

    img,
    video,
    canvas,
    svg {
        max-width: 100%;
        height: auto;
    }

    table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }

    pre {
        overflow-x: auto;
    }
}