@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

/* Some as setinhas do input number */
.qtd-row input[type="number"]::-webkit-outer-spin-button,
.qtd-row input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.qtd-row input[type="number"]{
  -moz-appearance: textfield; /* Firefox */
  appearance: textfield;      /* Padrão */
}

/* ===== Header/Hero da Rifa + Slider ===== */
.rifa-hero{
  position:relative; border-radius:14px; overflow:hidden;
  background:#000; box-shadow:0 8px 22px rgba(0,0,0,.35);
}

/* Slider genérico (ajustado p/ rifa) */
.slider, .rifa-slider{ position:relative }
.slides{ display:flex; transition:transform .35s ease }
.slide{ min-width:100%; aspect-ratio:16/9; background:#000 }
.slide img{ width:100%; height:100%; object-fit:cover !important; object-position:center; display:block }

.slider .nav, .rifa-slider .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,.45); color:#fff; border:0;
  width:30px; height:30px; border-radius:999px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.slider .prev, .rifa-slider .prev{ left:8px }
.slider .next, .rifa-slider .next{ right:8px }

.slider .dots, .rifa-slider .dots{
  position:absolute; left:0; right:0; bottom:8px;
  display:flex; justify-content:center; gap:6px;
}
.slider .dot, .rifa-slider .dot{
  width:7px; height:7px; border-radius:999px; border:1px solid rgba(255,255,255,.7);
  background:transparent; cursor:pointer;
}
.slider .dot.active, .rifa-slider .dot.active{ background:#fff }

.price-chip{
  position:absolute; left:10px; top:10px;
  background:var(--brand); color:#0b0f14;
  font-weight:900; padding:4px 8px; border-radius:10px; letter-spacing:.2px;
}

/* Faixa informativa abaixo do slider */
.rifa-strip{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--panel); color:var(--text);
  padding:8px 12px; border:1px solid var(--border); border-radius:12px; margin-top:10px;
  font-size:.95rem;
}
.rifa-strip .strip-left{ display:flex; align-items:center; gap:8px; font-weight:700 }
.rifa-pill{
  background:#17321f; color:#e9ffe7; border:1px solid var(--border);
  padding:2px 8px; border-radius:999px; font-weight:800;
}

/* Abas/segmentos */
.seg-tabs{ margin:10px 0 8px }
.seg-tabs .tab{
  width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
  font-weight:900; border-radius:10px; border:1px solid var(--border);
  padding:10px 12px; background:var(--panel); color:var(--text); text-decoration:none; cursor:pointer;
}
.seg-tabs .tab.active{ background:var(--brand); color:#0b0f14; border-color:transparent }
.seg-tabs .tab.muted{ opacity:.8 }

/* Dica */
.hint{ text-align:center; color:var(--muted); font-weight:700; margin:6px 0 8px }

/* Packs */
.pack-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
.pack-grid.big .pack{
  background:var(--panel-2); border:1px solid var(--border); color:var(--text);
  padding:14px 10px; border-radius:12px; font-weight:900; text-align:center; position:relative;
}
.pack-grid .pack small{ color:#cbd5e1; opacity:.9; display:block; font-weight:700; margin-top:2px }
.pack-grid .pack.popular{ outline:2px solid var(--brand); background:#0f2016 }
.pack-grid .pack .tag-pop{
  width:100%; position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  background:var(--brand); color:#0b0f14; font-size:.7rem; padding:2px 6px; border-radius:999px; font-weight:900;
}

.pack-grid .pack--promo{
  grid-column: span 2;
  display:flex;
  align-items:center;
  justify-content:center;
}

@media (max-width:640px){
  .pack-grid{ grid-template-columns:1fr 1fr; }
  .pack-grid .pack--promo{ grid-column: span 2; }
}

/* Quantidade + CTA */
.qtd-row{
  display:grid; grid-template-columns:48px 1fr 48px; gap:8px; margin-top:8px;
}
.qtd-row .box{
  background:var(--panel-2); border:1px solid var(--border); color:var(--text);
  display:flex; align-items:center; justify-content:center; height:44px; border-radius:12px; font-weight:900; font-size:18px;
}
.qtd-row input{
  height:44px; border-radius:12px; border:1px solid var(--border); background:var(--panel); color:var(--text);
  text-align:center; font-weight:900; font-size:16px;
}

.cta-wrap{ display:grid; grid-template-columns:1fr; gap:8px; margin-top:10px }
.cta-big{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--brand); color:#0b0f14; border:0; border-radius:12px; padding:12px 14px; width:100%;
  font-weight:900; text-decoration:none; font-size:1rem;
}
.cta-big .price{ background:#0b0f14; color:#fff; padding:4px 8px; border-radius:8px; font-weight:900 }
.rifa-actions .btn-icon,
.rifa-actions .btn-icon:visited{ color:#111; text-decoration:none }

/* Listas (ranking, prêmios, fallback) */
.ranking{ list-style:none; padding:0; margin:0 }
.ranking li{
  display:grid; grid-template-columns:40px 1fr auto; align-items:center; gap:8px;
  padding:10px 6px; border-bottom:1px dashed var(--border);
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  font-weight: 100;
}
.ranking li .pos{ font-weight:900; color:var(--brand); font-size:1.05rem }
.ranking li .nome{ font-weight:700 }
.ranking li .qtd{ color:var(--muted); font-weight:700 }
.ranking li.none{ display:block; text-align:center; color:var(--muted); border:0; padding:12px 0 }

.premios-list{ list-style:none; padding:0; margin:0 }
.premios-list li{
  display:grid; grid-template-columns:40px 1fr auto; align-items:center; gap:8px;
  padding:10px 6px; border-bottom:1px dashed var(--border);
}
.premios-list li .pos{ font-weight:900; color:var(--brand) }
.premios-list li .bilhete{ color:var(--muted); font-weight:700 }
.premios-list li.achou .desc{ text-decoration:line-through; opacity:.75 }

.list-premios{ list-style:none; padding:0; margin:0; display:grid; gap:6px }
.list-premios li{ display:flex; gap:8px; align-items:center; padding:8px 10px; border-radius:8px; color:#fff }
.list-premios li.nao{ background:#16a34a } .list-premios li.achou{ background:#ef4444 }
.badge-n{ font-weight:900 } .desc{ font-weight:700 }

/* Modal de login compacto e bonitinho */
#modal-login .auth-mini{
  max-width: 420px;
  padding: 14px 14px 16px;
}
#modal-login .modal-head{
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
#modal-login .modal-head .title{
  display:flex; align-items:center; gap:8px; font-weight:900;
}
#modal-login .form label{
  display:block; font-weight:700; margin:10px 0 6px;
}
#modal-login .form input{
  width:100%;
}
#modal-login .actions{
  display:flex; gap:8px; justify-content:flex-end; margin-top:10px;
}
#modal-login .alert{ margin-top:8px; }

.modal{
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.6);
  padding: 16px;
  z-index: 1000;
}
.modal[aria-hidden="false"]{ display: flex; }

.modal .modal-card{
  width: 100%;
  max-width: 520px;
  margin: 0;              /* tira qualquer deslocamento para baixo */
}

/* Só cosmético pra mini-form */
.modal .auth-mini .actions{ display:flex; gap:8px; justify-content:flex-end; }

.tab-mini{flex:1;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:#0e1520;color:var(--text);font-weight:700}
.tab-mini.is-active{border-color:#22c55e;background:#122217;color:#22c55e}

/* === Auth inline (login + cadastro) === */
.modal-card.auth-mini{
  width: min(560px, 94vw);
  margin: 0 auto;
}

/* labels */
.auth-mini .form label{
  display:block;
  font-weight:800;
  color:var(--text);
  margin:10px 0 6px;
}

/* campos: input/select iguais em todo o modal */
.auth-mini .form label > input,
.auth-mini .form label > select,
.auth-mini .form input[type="email"],
.auth-mini .form input[type="password"],
.auth-mini .form input[type="text"],
.auth-mini .form input[type="tel"],
.auth-mini .form input[type="number"]{
  display:block;
  width:100%;
  height:46px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#0e1520;          /* fundo dos campos no tema dark */
  color:var(--text);
  outline:0;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

/* placeholder mais suave */
.auth-mini .form input::placeholder{
  color:#9aa4b2; opacity:.85;
}

/* foco (verde do site) */
.auth-mini .form input:focus,
.auth-mini .form select:focus{
  border-color:#22c55e;
  background:#0b111a;
  box-shadow:0 0 0 3px rgba(34,197,94,.15);
}

/* mensagens e ações */
.auth-mini .alert{ margin-top:10px; }
.auth-mini .form .actions{
  display:flex; gap:10px; justify-content:flex-end; margin-top:12px;
}

/* abas (Entrar | Criar conta) */
.tab-mini{
  flex:1; padding:8px 10px; border:1px solid var(--border);
  border-radius:999px; background:#0e1520; color:var(--text); font-weight:700;
}
.tab-mini.is-active{
  border-color:#22c55e; background:#092b16; color:#22c55e;
}

/* grid do cadastro responde melhor no mobile */
@media (max-width:520px){
  .auth-mini .grid2{ display:grid; grid-template-columns:1fr; gap:8px; }
}