/* ===== Bolão Copa 2026 — tema gramado elegante ===== */

:root {
    --grass-dark: #0b3d1f;
    --grass-mid: #14532d;
    --grass-light: #1e7a40;
    --grass-accent: #4ade80;
    --gold: #fbbf24;
    --pitch-line: rgba(255, 255, 255, .25);
}

/* Mobile-first: base pensada para telas pequenas; ajustes para desktop via media queries */
body {
    font-family: 'Poppins', system-ui, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: #f0fdf4;
    background-color: var(--grass-dark);
    /* faixas de gramado cortado */
    background-image:
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.025) 0 48px,
            rgba(0, 0, 0, 0.06) 48px 96px),
        radial-gradient(ellipse at 50% -20%, rgba(74, 222, 128, .28), transparent 60%),
        linear-gradient(180deg, var(--grass-mid), var(--grass-dark) 70%);
    background-attachment: fixed;
}

@media (min-width: 768px) {
    body {
        background-image:
            repeating-linear-gradient(90deg,
                rgba(255, 255, 255, 0.025) 0 90px,
                rgba(0, 0, 0, 0.06) 90px 180px),
            radial-gradient(ellipse at 50% -20%, rgba(74, 222, 128, .28), transparent 60%),
            linear-gradient(180deg, var(--grass-mid), var(--grass-dark) 70%);
    }
}

/* Efeito de luz de estádio varrendo o gramado (leve, só transform/opacity).
   z-index negativo: fica acima do fundo e abaixo de TODO o conteúdo, sem criar
   stacking contexts em main/nav/footer — assim modal e backdrop do Bootstrap
   empilham nativamente (backdrop 1050 < modal 1055). */
body::before {
    content: "";
    position: fixed;
    inset: -20% -50%;
    pointer-events: none;
    z-index: -1;
    background: linear-gradient(100deg,
        transparent 40%,
        rgba(255, 255, 255, .045) 50%,
        transparent 60%);
    animation: stadium-sweep 14s ease-in-out infinite alternate;
}

@keyframes stadium-sweep {
    from { transform: translateX(-12%); }
    to   { transform: translateX(12%); }
}

@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
}

main { flex: 1 0 auto; min-height: 80vh; }

h1, h2, h3, .display-team { font-family: 'Poppins', sans-serif; font-weight: 700; }

.brand-title {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: .08em;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

/* Cartões sobre o gramado */
.card-grass {
    background: rgba(255, 255, 255, .96);
    color: #14241a;
    border: none;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.card-dark {
    background: rgba(11, 40, 20, .85);
    color: #e5f0e8;
    border: 1px solid rgba(74, 222, 128, .18);
    border-radius: 1rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

.card-dark .card-header {
    background: linear-gradient(135deg, var(--grass-mid), var(--grass-light));
    color: #fff;
    border-radius: 1rem 1rem 0 0;
    font-weight: 600;
    border-bottom: none;
}

.card-dark .form-label { color: #d1fae5; }
.card-dark .form-text { color: #86efac; }
.card-dark .form-control,
.card-dark .form-select {
    background: rgba(255,255,255,.07);
    color: #fff;
    border-color: rgba(74,222,128,.3);
}
.card-dark .form-control:focus,
.card-dark .form-select:focus {
    background: rgba(255,255,255,.12);
    color: #fff;
    border-color: #4ade80;
    box-shadow: 0 0 0 .2rem rgba(74,222,128,.25);
}
.card-dark .form-control::placeholder { color: rgba(255,255,255,.35); }
.card-dark .form-check-label { color: #d1fae5; }
.card-dark .invalid-feedback { color: #fca5a5; }
.card-dark select option { background: #0b3d1f; color: #fff; }

.card-grass .card-header {
    background: linear-gradient(135deg, var(--grass-mid), var(--grass-light));
    color: #fff;
    border-radius: 1rem 1rem 0 0;
    font-weight: 600;
}

/* Placar digital */
.scoreboard {
    background: #0a0f0a;
    border: 3px solid #233a2b;
    border-radius: .75rem;
    box-shadow: inset 0 0 25px rgba(0, 0, 0, .9), 0 8px 24px rgba(0, 0, 0, .4);
    padding: .5rem 1rem;
}

.score-digit, input.score-digit {
    font-family: 'DSEG7 Classic', monospace;
    font-size: clamp(2.6rem, 14vw, 5.5rem);
    line-height: 1.3;
    color: #ffd166;
    text-shadow: 0 0 18px rgba(255, 209, 102, .55);
    background: transparent;
    border: none;
    width: clamp(3rem, 16vw, 6rem);
    height: auto;
    padding: 0;
    text-align: center;
    caret-color: #ffd166;
    animation: digit-glow 2.6s ease-in-out infinite alternate;
}

@keyframes digit-glow {
    from { text-shadow: 0 0 12px rgba(255, 209, 102, .4); }
    to   { text-shadow: 0 0 26px rgba(255, 209, 102, .75); }
}

input.score-digit:focus { outline: 2px solid var(--grass-accent); border-radius: .5rem; }

.score-x {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2rem, 6vw, 3.5rem);
    color: #e5e7eb;
}

/* Split de equipes com versus */
.match-split { display: flex; align-items: stretch; gap: 0; border-radius: 1rem; overflow: hidden; }

.team-side {
    flex: 1;
    padding: 2rem 1rem;
    text-align: center;
    color: #fff;
    position: relative;
}

.team-side img.team-flag {
    width: 72px;
    height: 48px;
    object-fit: cover;
    border-radius: .5rem;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .5);
    transition: transform .25s ease;
}

.team-side:hover img.team-flag { transform: scale(1.06); }

.team-initials {
    width: 72px; height: 72px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; font-weight: 700; color: #fff; letter-spacing: .05em;
    box-shadow: 0 4px 14px rgba(0,0,0,.5);
    transition: transform .25s ease;
    opacity: .92;
}
.team-side:hover .team-initials { transform: scale(1.06); }
@media (min-width: 768px) { .team-initials { width: 96px; height: 96px; font-size: 1.8rem; } }

.versus-badge {
    align-self: center;
    background: #fff;
    color: var(--grass-dark);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.4rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .25), 0 6px 18px rgba(0, 0, 0, .45);
    z-index: 2;
    margin: 0 -24px;
    animation: versus-pulse 3s ease-in-out infinite;
}

@keyframes versus-pulse {
    0%, 100% { box-shadow: 0 0 0 5px rgba(255, 255, 255, .25), 0 6px 18px rgba(0, 0, 0, .45); }
    50%      { box-shadow: 0 0 0 9px rgba(255, 255, 255, .12), 0 6px 18px rgba(0, 0, 0, .45); }
}

@media (min-width: 768px) {
    .team-side img.team-flag { width: 96px; height: 64px; }
    .versus-badge { width: 64px; height: 64px; font-size: 1.8rem; margin: 0 -32px; }
}

/* Toques confortáveis no mobile */
.btn { min-height: 44px; }
.card-grass .card-body { padding: 1rem; }
@media (min-width: 768px) {
    .card-grass .card-body { padding: 1.5rem; }
}

/* Status badges */
.badge-status-pendente   { background: #6b7280; }
.badge-status-temporario { background: #6b7280; }
.badge-status-ativo      { background: #16a34a; }
.badge-status-fechado    { background: #d97706; }
.badge-status-finalizado { background: #2563eb; }

/* Botões */
.btn-grass {
    background: linear-gradient(135deg, #15803d, #16a34a);
    border: none;
    color: #fff;
    font-weight: 600;
}
.btn-grass:hover { background: linear-gradient(135deg, #166534, #15803d); color: #fff; }

.btn-gold {
    background: linear-gradient(135deg, #f59e0b, var(--gold));
    border: none;
    color: #422006;
    font-weight: 700;
}

/* Navbar admin */
.navbar-grass {
    background: rgba(7, 32, 17, .92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--pitch-line);
}

.footer-grass {
    color: rgba(240, 253, 244, .7);
    background: rgba(5, 24, 13, .65);
    border-top: 1px solid var(--pitch-line);
}

/* Botão flutuante de suporte WhatsApp (mobile-first) */
.whatsapp-float {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1050;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 1.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
    transition: transform .2s ease;
}

.whatsapp-float,
.whatsapp-float:hover,
.whatsapp-float:focus { text-decoration: none; }

.whatsapp-float:hover { color: #fff; transform: scale(1.08); }

@media (min-width: 768px) {
    .whatsapp-float { right: 24px; bottom: 24px; width: 60px; height: 60px; }
}

/* Modais têm fundo branco: não herdar a cor clara do body (texto ilegível) */
.modal-content {
    color: #14241a;
}

/* Modal PIX */
.pix-logo-color { color: #32bcad; }
.pix-modal .qr-box {
    background: #fff;
    border-radius: .75rem;
    padding: 1rem;
    display: inline-block;
}

/* Vencedor em destaque */
.winner-row {
    background: linear-gradient(90deg, rgba(251, 191, 36, .18), transparent);
    border-left: 4px solid var(--gold);
}

/* Banner de header da página pública — mesmo ratio do recorte (3:1) */
.header-banner {
    width: 100%;
    max-width: 900px;
    aspect-ratio: 3 / 1;
    object-fit: cover;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

/* Linha central de campo decorativa em headers de página pública */
.pitch-hero {
    position: relative;
    padding: 2.5rem 0;
}
.pitch-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    border-top: 2px solid var(--pitch-line);
    border-bottom: 2px solid var(--pitch-line);
    pointer-events: none;
}

/* ===== Cookie bar ===== */
.cookie-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(11,61,31,.97);
    border-top: 1px solid var(--grass-accent);
    color: #f0fdf4;
    padding: .75rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .5rem;
    z-index: 9999;
    font-size: .85rem;
}

/* ===== Landing page sections ===== */
.landing-hero {
    min-height: 92vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.landing-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 60% 40%, rgba(74,222,128,.18) 0%, transparent 70%);
    pointer-events: none;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(251,191,36,.15);
    border: 1px solid rgba(251,191,36,.4);
    color: #fbbf24;
    border-radius: 2rem;
    padding: .3rem .9rem;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 1.2rem;
}
.hero-title {
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 1.2rem;
}
.hero-title .highlight {
    color: var(--grass-accent);
}
.hero-subtitle {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: rgba(240,253,244,.8);
    max-width: 560px;
    line-height: 1.6;
    margin-bottom: 2rem;
}
.stat-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: .75rem;
    padding: .6rem 1rem;
    min-width: 80px;
}
.stat-pill strong { font-size: 1.1rem; color: var(--grass-accent); }
.stat-pill span   { font-size: .65rem; color: rgba(240,253,244,.6); text-transform: uppercase; letter-spacing:.04em; }

.feature-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 1rem;
    padding: 1.5rem;
    height: 100%;
    transition: transform .2s, border-color .2s;
}
.feature-card:hover {
    transform: translateY(-3px);
    border-color: var(--grass-accent);
}
.feature-icon {
    width: 48px;
    height: 48px;
    background: rgba(74,222,128,.15);
    border-radius: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--grass-accent);
    margin-bottom: 1rem;
}
.step-number {
    width: 36px;
    height: 36px;
    background: var(--grass-accent);
    color: var(--grass-dark);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: .9rem;
    flex-shrink: 0;
}
.pricing-card {
    background: linear-gradient(135deg, rgba(74,222,128,.1), rgba(74,222,128,.03));
    border: 2px solid var(--grass-accent);
    border-radius: 1.5rem;
    padding: 2.5rem;
    text-align: center;
    max-width: 460px;
    margin: 0 auto;
}
.pricing-price {
    font-size: 3.5rem;
    font-weight: 800;
    color: var(--grass-accent);
    line-height: 1;
}
.pricing-price sup { font-size: 1.2rem; vertical-align: top; margin-top: .6rem; display: inline-block; }
.pricing-price sub { font-size: 1rem; color: rgba(240,253,244,.6); }

.section-dark { background: rgba(0,0,0,.25); }
.section-label {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--grass-accent);
    margin-bottom: .5rem;
}
.legal-prose { color: rgba(240,253,244,.85); line-height: 1.8; }
.legal-prose h2 { color: var(--grass-accent); font-size: 1.25rem; margin-top: 2rem; }
.legal-prose h3 { color: #fff; font-size: 1rem; margin-top: 1.5rem; }
.legal-prose a  { color: var(--grass-accent); }