/* =====================================================
   TEMA COPA DO MUNDO 2026 — Know-How Rio v3
   Verde #009C3B + Amarelo #FFDF00
   COBERTURA TOTAL: index, catálogo, admin, vendedor
   ===================================================== */

/* ══ VARIÁVEIS COPA ══════════════════════════════════ */
:root {
  --primary:        #007A2E !important;
  --primary-dark:   #005A22 !important;
  --primary-light:  #00C44A !important;
  --accent:         #FFDF00 !important;
  --accent-light:   #FFE84D !important;
  --accent-dark:    #D4B800 !important;
  --copa-green:     #009C3B;
  --copa-green-dk:  #007A2E;
  --copa-yellow:    #FFDF00;
  --copa-white:     #ffffff;
  --shadow:         0 4px 24px rgba(0,156,59,0.18) !important;
  --gray-900:       #0d2b12 !important;
}

/* ══ BODY GERAL ══════════════════════════════════════ */
body {
  background: #edfaf2 !important;
}

/* ══ LANDING / INDEX ════════════════════════════════ */
body.landing-page {
  background: #032d10 !important;
}

/* ══ HEADER / NAVBAR ════════════════════════════════ */
.site-header,
header.site-header,
.app-header,
.main-header {
  background: rgba(0,100,35,0.97) !important;
  border-bottom: 3px solid #FFDF00 !important;
  border-image: none !important;
}
.site-header.scrolled {
  box-shadow: 0 4px 20px rgba(0,100,35,0.4) !important;
}
.nav-link { color: rgba(255,255,255,0.9) !important; }
.nav-link:hover {
  color: #FFDF00 !important;
  background: rgba(255,223,0,0.15) !important;
}
.nav-link.active {
  color: #FFDF00 !important;
  background: rgba(255,223,0,0.18) !important;
  font-weight: 700 !important;
}
.logo-name {
  background: linear-gradient(105deg,#D4B800 0%,#FFDF00 40%,#fffacc 50%,#FFDF00 60%,#D4B800 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: goldShine 3s linear infinite !important;
}
.logo-sub { color: #FFDF00 !important; }
.cart-badge { background: #FFDF00 !important; color: #007A2E !important; font-weight: 800 !important; }
.btn-login, .btn-account {
  background: #FFDF00 !important;
  color: #007A2E !important;
  font-weight: 800 !important;
  border: none !important;
}
.btn-login:hover, .btn-account:hover {
  background: #FFE84D !important;
}
.account-dropdown-header {
  background: linear-gradient(135deg, #007A2E 0%, #009C3B 100%) !important;
}
.account-dropdown {
  border: 2px solid #FFDF00 !important;
}

/* ══ HERO / LANDING ══════════════════════════════════ */
.landing-brand {
  background: linear-gradient(135deg, #ffffff 30%, #FFDF00 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.landing-brand-badge {
  background: #FFDF00 !important;
  color: #007A2E !important;
  font-weight: 800 !important;
  box-shadow: 0 0 20px rgba(255,223,0,0.5) !important;
}
.landing-headline em { color: #FFDF00 !important; }
.landing-divider { background: #FFDF00 !important; }
.stat-item strong { color: #FFDF00 !important; }
.btn-landing-cta {
  background: linear-gradient(135deg, #009C3B, #FFDF00) !important;
  color: #004d1a !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 32px rgba(0,156,59,0.45) !important;
}
.btn-landing-cta:hover {
  background: linear-gradient(135deg, #007A2E, #FFE84D) !important;
  box-shadow: 0 12px 40px rgba(0,156,59,0.65) !important;
}
/* Orb amarelo */
.hero-orb-2 {
  background: radial-gradient(circle, rgba(255,223,0,0.18) 0%, transparent 70%) !important;
}

/* ══ FOOTER ══════════════════════════════════════════ */
.site-footer, footer {
  background: linear-gradient(180deg, #005A22 0%, #032d10 100%) !important;
  color: #fff !important;
}
.footer-brand-name {
  background: linear-gradient(105deg,#D4B800 0%,#FFDF00 40%,#fffacc 50%,#FFDF00 60%,#D4B800 100%) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: goldShine 3s linear infinite !important;
}

/* ══ FILTROS / PILLS ══════════════════════════════════ */
.filter-pill, .cat-pill, .filter-btn {
  background: #fff !important;
  color: #007A2E !important;
  border: 1.5px solid #009C3B !important;
}
.filter-pill.active, .cat-pill.active, .filter-btn.active {
  background: #009C3B !important;
  color: #fff !important;
}
.filter-pill:hover, .cat-pill:hover {
  background: #FFDF00 !important;
  color: #007A2E !important;
  border-color: #FFDF00 !important;
}

/* ══ BOTÕES GERAIS ═══════════════════════════════════ */
.btn-primary, button.btn-primary, a.btn-primary,
.btn-save, .btn-green, input[type="submit"],
button[class*="btn-primary"] {
  background: #009C3B !important;
  color: #fff !important;
  border-color: #009C3B !important;
}
.btn-primary:hover { background: #007A2E !important; }

/* ══ INPUTS FOCUS ════════════════════════════════════ */
input:focus, select:focus, textarea:focus {
  border-color: #009C3B !important;
  box-shadow: 0 0 0 3px rgba(0,156,59,0.18) !important;
  outline-color: #009C3B !important;
}

/* ══ SCROLLBAR ═══════════════════════════════════════ */
::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: #edfaf2; }
::-webkit-scrollbar-thumb { background: #009C3B; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #007A2E; }

/* ══ SELEÇÃO DE TEXTO ════════════════════════════════ */
::selection { background: #FFDF00; color: #007A2E; }

/* ══ BADGES ══════════════════════════════════════════ */
.badge-primary { background: #009C3B !important; color: #fff !important; }
.section-badge {
  background: rgba(0,156,59,0.12) !important;
  color: #007A2E !important;
  border: 1px solid rgba(0,156,59,0.35) !important;
}

/* ══════════════════════════════════════════════════════
   ADMIN — SIDEBAR COMPLETA VERDE + AMARELO
══════════════════════════════════════════════════════ */
.admin-page {
  background: #f0faf4 !important;
}

/* Sidebar principal */
.admin-sidebar {
  background: linear-gradient(180deg, #006B28 0%, #004d1a 50%, #003612 100%) !important;
  border-right: 3px solid #FFDF00 !important;
  /* Garante que a sidebar não ocupe espaço do banner fixo */
  height: calc(100dvh - 30px) !important;
}

/* Header da sidebar (logo area) */
.sidebar-header {
  background: #004d1a !important;
  border-bottom: 2px solid rgba(255,223,0,0.4) !important;
}

/* Logo ícone na sidebar */
.sidebar-logo i { color: #FFDF00 !important; }
.sidebar-brand { color: #FFDF00 !important; font-weight: 800 !important; }
.sidebar-role { color: rgba(255,223,0,0.75) !important; }

/* Links da sidebar */
.sidebar-link {
  color: rgba(255,255,255,0.82) !important;
  border-radius: 8px !important;
}
.sidebar-link:hover {
  background: rgba(255,223,0,0.15) !important;
  color: #FFDF00 !important;
}
.sidebar-link.active {
  background: #FFDF00 !important;
  color: #004d1a !important;
  font-weight: 700 !important;
  box-shadow: 0 2px 12px rgba(255,223,0,0.4) !important;
}
.sidebar-link i { color: rgba(255,223,0,0.8) !important; }
.sidebar-link.active i { color: #004d1a !important; }
.sidebar-link:hover i { color: #FFDF00 !important; }

/* Seção/grupo na sidebar */
.sidebar-section-title,
.sidebar-group-title,
.nav-section-label {
  color: rgba(255,223,0,0.55) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  font-size: 0.62rem !important;
}

/* Sidebar footer (Atualizar Site, Ver Loja, Sair) */
.sidebar-footer {
  border-top: 1px solid rgba(255,223,0,0.2) !important;
  background: rgba(0,0,0,0.15) !important;
}
.sidebar-footer a,
.sidebar-footer button {
  color: rgba(255,255,255,0.75) !important;
}
.sidebar-footer a:hover,
.sidebar-footer button:hover {
  color: #FFDF00 !important;
  background: rgba(255,223,0,0.12) !important;
}

/* Botão "Atualizar Site" especial */
.btn-atualizar,
.sidebar-footer .btn-primary,
.sidebar-footer button.btn-update,
button#btnAtualizarSite,
.btn-update-site {
  background: linear-gradient(90deg, #FFDF00, #FFE84D) !important;
  color: #004d1a !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 2px 12px rgba(255,223,0,0.4) !important;
}
.btn-atualizar:hover,
.sidebar-footer .btn-primary:hover {
  background: #FFE84D !important;
  box-shadow: 0 4px 20px rgba(255,223,0,0.6) !important;
}

/* ══ ADMIN — TOPBAR / HEADER ════════════════════════ */
.admin-topbar,
.admin-header,
.topbar,
.main-topbar {
  background: #fff !important;
  border-bottom: 2px solid rgba(0,156,59,0.2) !important;
}

/* ══ ADMIN — BANNER FIXO: CORREÇÃO DE LAYOUT ═══════
   O banner copa é position:fixed no admin.
   A sidebar precisa começar abaixo do banner (30px).
   O body recebe padding-top via JS (forcarAdmin).
══════════════════════════════════════════════════ */
body.admin-page {
  /* flex-direction mantém column para o banner fixo não entrar no fluxo */
  flex-wrap: nowrap !important;
}

/* ══ ADMIN — CARDS DO DASHBOARD ════════════════════ */
.stat-card, .kpi-card, .dashboard-card {
  border-top: 4px solid #009C3B !important;
  background: #fff !important;
}
.stat-card:nth-child(2), .kpi-card:nth-child(2) {
  border-top-color: #FFDF00 !important;
}
.stat-card:nth-child(3), .kpi-card:nth-child(3) {
  border-top-color: #009C3B !important;
}
.stat-card:nth-child(4), .kpi-card:nth-child(4) {
  border-top-color: #FFDF00 !important;
}

/* Ícones nos cards */
.stat-card .stat-icon,
.kpi-card .kpi-icon,
.dashboard-card .card-icon {
  color: #009C3B !important;
}

/* ══ ADMIN — TABELAS ════════════════════════════════ */
.admin-table thead,
table.data-table thead,
.table thead {
  background: linear-gradient(90deg, #007A2E, #009C3B) !important;
  color: #FFDF00 !important;
}
.admin-table thead th,
table.data-table thead th,
.table thead th {
  color: #FFDF00 !important;
  border-color: rgba(255,223,0,0.3) !important;
}
.admin-table tbody tr:hover,
table.data-table tbody tr:hover {
  background: rgba(0,156,59,0.06) !important;
}

/* ══ ADMIN — BOTÕES DE AÇÃO ════════════════════════ */
.btn-action-primary,
.btn-emitir-nfe,
.btn-nfe,
button[onclick*="emitirNFe"],
button[onclick*="abrirPedido"] {
  background: #009C3B !important;
  color: #fff !important;
  border-color: #009C3B !important;
}

/* Status badges no admin */
.badge-pago, .status-pago, .badge-success {
  background: #009C3B !important;
  color: #fff !important;
}
.badge-pendente, .status-pendente, .badge-warning {
  background: #FFDF00 !important;
  color: #004d1a !important;
}

/* ══ ADMIN — MODAL ══════════════════════════════════ */
.modal-header,
.modal-title-bar {
  background: linear-gradient(90deg, #007A2E, #009C3B) !important;
  color: #fff !important;
  border-bottom: 2px solid #FFDF00 !important;
}
.modal-header h2, .modal-header h3,
.modal-title-bar h2, .modal-title-bar h3 {
  color: #FFDF00 !important;
}

/* ══════════════════════════════════════════════════════
   VENDEDOR — PAINEL COMPLETO VERDE + AMARELO
══════════════════════════════════════════════════════ */

/* Header do vendedor */
.vendedor-header,
.vendor-header,
.seller-header,
header.vendedor,
.vendedor-page header {
  background: linear-gradient(135deg, #006B28 0%, #009C3B 100%) !important;
  border-bottom: 3px solid #FFDF00 !important;
  color: #fff !important;
}

/* Logo/nome no header do vendedor */
.vendedor-header .logo-name,
.vendor-header .logo-name {
  color: #FFDF00 !important;
  -webkit-text-fill-color: #FFDF00 !important;
}

/* Abas / tabs */
.tab-btn, .tab-button, [role="tab"],
.vendedor-tabs .tab,
.seller-tabs button {
  color: #007A2E !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
}
.tab-btn.active, .tab-button.active,
[role="tab"][aria-selected="true"],
.vendedor-tabs .tab.active {
  background: #009C3B !important;
  color: #fff !important;
  border-color: #009C3B !important;
}
.tab-btn:hover, .tab-button:hover {
  background: rgba(0,156,59,0.1) !important;
  color: #007A2E !important;
}

/* Cards do vendedor */
.vendedor-card, .seller-card,
.pedido-card, .order-card {
  border-left: 4px solid #009C3B !important;
}

/* Botões do vendedor */
.vendedor-page .btn-primary,
.seller-page .btn-primary,
button.btn-solicitar,
button.btn-confirmar {
  background: #009C3B !important;
  color: #fff !important;
}
.vendedor-page .btn-primary:hover {
  background: #007A2E !important;
}

/* Stats/números no painel vendedor */
.vendedor-stat strong,
.seller-stat-value,
.vendor-number {
  color: #009C3B !important;
}

/* ══ BANNER COPA ════════════════════════════════════ */
#copa-top-banner {
  background: linear-gradient(90deg, #004d1a 0%, #007A2E 30%, #009C3B 50%, #007A2E 70%, #004d1a 100%);
  color: #FFDF00;
  text-align: center;
  padding: 7px 12px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  z-index: 9999;
  position: relative;
  border-bottom: 2px solid #FFDF00;
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* ══ BOLAS DE FUTEBOL FLUTUANTES ═════════════════════ */
#copa-balls-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.copa-ball {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: quedaBola linear infinite;
}

@keyframes quedaBola {
  0%   { transform: translateY(-220px) rotate(0deg);   opacity: 0; }
  8%   { opacity: 0.70; }
  90%  { opacity: 0.65; }
  100% { transform: translateY(110vh) rotate(600deg); opacity: 0; }
}

/* ══ GOLDSHINE ANIMATION ════════════════════════════ */
@keyframes goldShine {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ══ FORÇAR REMOÇÃO DE AZUIS ════════════════════════
   Qualquer elemento com bg azul/roxo inline → verde  */
[style*="background: #1A1266"],
[style*="background:#1A1266"],
[style*="background: #1a1266"],
[style*="background-color: #1A1266"],
[style*="background: #07071a"],
[style*="background:#07071a"],
[style*="background: #0a0a16"],
[style*="background:#0a0a16"],
[style*="background: #0f0f2d"],
[style*="background:#0f0f2d"],
[style*="background: rgba(26,18,102"],
[style*="background: rgba(10,10,22"] {
  background: #007A2E !important;
  background-color: #007A2E !important;
}

/* Qualquer texto azul forte */
[style*="color: #1A1266"],
[style*="color:#1A1266"],
[style*="color: #1a1266"] {
  color: #009C3B !important;
}

/* ══ CATALOGO HERO ═══════════════════════════════════ */
.catalog-hero,
.catalogo-hero,
.hero-section.catalog {
  background: linear-gradient(135deg, #007A2E 0%, #032d10 100%) !important;
}

/* ══ PÁGINAS DE PAGAMENTO ════════════════════════════ */
.payment-page,
.pix-page,
.cartao-page,
.checkout-page {
  background: #edfaf2 !important;
}
.payment-header,
.pix-header,
.checkout-header {
  background: linear-gradient(90deg, #007A2E, #009C3B) !important;
  border-bottom: 3px solid #FFDF00 !important;
}