/* ═══════════════════════════════════════════════════════
   TEMA FESTIVO — Copa do Mundo 2026 + São João
   Para remover: exclua este arquivo + festivo.php
   ═══════════════════════════════════════════════════════ */

/* ── 1. Variáveis de cor ─────────────────────────────── */
html.tema-festivo {
    --vinho:       #007a32;
    --vinho-claro: #e6f7ee;
    --fundo:       #f0faf4;
    --sucesso:     #f9d71c;
}

/* ── 2. Banner animado no topo ───────────────────────── */
#banner-festivo {
    display: none;
}

html.tema-festivo #banner-festivo {
    display: block;
    background: linear-gradient(270deg, #006629, #002776, #009c3b, #f9d71c, #009c3b, #002776, #006629);
    background-size: 400% 100%;
    animation: banner-ondula 6s ease infinite;
    color: #fff;
    text-align: center;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 1.5px;
    padding: 10px 10px 6px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5);
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
}

/* Faixa de bandeirolas embaixo do banner */
html.tema-festivo #banner-festivo::after {
    content: '';
    display: block;
    height: 5px;
    margin-top: 7px;
    margin-left: -10px;
    width: calc(100% + 20px);
    background: repeating-linear-gradient(
        90deg,
        #009c3b 0,   #009c3b 10px,
        #f9d71c 10px,#f9d71c 20px,
        #002776 20px,#002776 30px,
        #fff    30px,#fff    40px
    );
}

@keyframes banner-ondula {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ── 3. Header verde Brasil ──────────────────────────── */
html.tema-festivo header {
    background: linear-gradient(150deg, #005822 0%, #009c3b 100%);
    border-bottom: 3px solid #f9d71c;
}

html.tema-festivo .mes-titulo {
    color: #f9d71c;
    text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}

html.tema-festivo .header-count {
    color: rgba(255,255,255,0.8);
}

html.tema-festivo .btn-nav {
    background: rgba(255,255,255,0.15);
    color: #f9d71c;
    border: 1px solid rgba(249,215,28,0.45);
}

html.tema-festivo .btn-nav:hover {
    background: #f9d71c;
    color: #005822;
}

html.tema-festivo .btn-hoje {
    background: #f9d71c;
    color: #005822;
}

html.tema-festivo .search-wrap input {
    background-color: rgba(255,255,255,0.13);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.5)' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    border-color: rgba(249,215,28,0.35);
    color: #fff;
}

html.tema-festivo .search-wrap input::placeholder {
    color: rgba(255,255,255,0.55);
}

html.tema-festivo .search-wrap input:focus {
    border-color: #f9d71c;
    background-color: rgba(255,255,255,0.22);
}

/* ── 4. Seção Hoje ───────────────────────────────────── */
html.tema-festivo .hoje-section {
    background: linear-gradient(135deg, #e0f5e9, #c8edda);
    border-bottom-color: rgba(0,100,40,0.2);
}

html.tema-festivo .hoje-label { color: #005822; }
html.tema-festivo .hoje-hora  { color: #006629; }
html.tema-festivo .hoje-item  { border-top-color: rgba(0,100,40,0.1); }

/* ── 5. Cards ────────────────────────────────────────── */
html.tema-festivo .card-evento {
    border-left-color: #009c3b;
}

/* ── 6. FAB amarelo copa ─────────────────────────────── */
html.tema-festivo .fab {
    background: #f9d71c;
    color: #005822;
    box-shadow: 0 4px 18px rgba(249,215,28,0.6);
}

/* ── 7. Bolas flutuantes ─────────────────────────────── */
.bola-copa {
    position: fixed;
    font-size: var(--bola-size, 24px);
    bottom: -70px;
    left: var(--bola-left, 50%);
    pointer-events: none;
    user-select: none;
    z-index: 0;
    opacity: 0;
    animation: bola-sobe var(--bola-dur, 10s) ease-in var(--bola-delay, 0s) infinite;
}

@keyframes bola-sobe {
    0%   { transform: translateY(0) rotate(0deg);     opacity: 0; }
    8%   { opacity: 0.45; }
    85%  { opacity: 0.3; }
    100% { transform: translateY(-110vh) rotate(600deg); opacity: 0; }
}

/* ── 8. Botão toggle ─────────────────────────────────── */
#btn-tema-festivo {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 50px;
    height: 50px;
    background: #fff;
    border: 2px solid #dde;
    border-radius: 50%;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 800;
    box-shadow: 0 3px 10px rgba(0,0,0,0.15);
    transition: all 0.25s;
    padding: 0;
    line-height: 1;
}

html.tema-festivo #btn-tema-festivo {
    background: #006629;
    border-color: #f9d71c;
    animation: btn-brilha 2.5s ease-in-out infinite;
}

@keyframes btn-brilha {
    0%,100% { box-shadow: 0 3px 10px rgba(0,0,0,.15); }
    50%     { box-shadow: 0 3px 22px rgba(249,215,28,.7); }
}

/* ── 9. Desktop ──────────────────────────────────────── */
@media (min-width: 501px) {
    #btn-tema-festivo { left: calc(50% - 220px); }
}