@import url('reset/reset.css');

@import url('pages/home.css');
@import url('pages/single.css');
@import url('pages/orderDetails.css');
@import url('pages/campanhas.css');
@import url('pages/comunicados.css');
@import url('pages/termodeuso.css');
@import url('pages/meusnumeros.css');
@import url('pages/cadastrar.css');
@import url('pages/contato.css');
@import url('pages/obrigado.css');
@import url('pages/404.css');
@import url('pages/afiliado.css');
@import url('pages/loginafiliado.css');

@import url('dashboard/login.css');
@import url('dashboard/home.css');
@import url('dashboard/campaigns.css');
@import url('dashboard/orders.css');
@import url('dashboard/statistics.css');
@import url('dashboard/ranking.css');
@import url('dashboard/communications.css');
@import url('dashboard/users.css');
@import url('dashboard/settings.css');
@import url('dashboard/search.css');
@import url('dashboard/newcampaign.css');
@import url('dashboard/editorder.css');
@import url('dashboard/gateways.css');
@import url('dashboard/affiliate.css');
@import url('dashboard/editaffiliate.css');
@import url('dashboard/affiliatesales.css');
@import url('dashboard/winner.css');

@import url('partials/navbar.css');
@import url('partials/footer.css');
@import url('partials/automatic.css');
@import url('partials/promotions.css');
@import url('partials/paymentmodal.css');
@import url('partials/drawtitles.css');
@import url('partials/ranking.css');
@import url('partials/normal.css');
@import url('partials/socials.css');
@import url('partials/animals.css');
@import url('partials/socialsicons.css');
@import url('partials/rouletteoptions.css');

/* (isso aqui é errado: CSS importar HTML, mas vou manter pra não quebrar seu projeto agora) */
@import url('partials/awardsroulette.html');
@import url('partials/awardsboxes.html');
@import url('partials/boxesoptions.html');
@import url('partials/doublechance.html');
@import url('partials/biggerandsmaller.html');

@import url('partials/dashboard/sidebar.html');
@import url('partials/dashboard/menu.html');



/* =========================================================
   AJUSTES GERAIS DE FLUIDEZ
   ========================================================= */

.select,
.spins-content,
.btn-add-to-cart,
#prize-open,
.ck-btn,
.pix-copy,
.pix-toggle button{
  transition:
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    color .18s ease;
  will-change: transform, filter;
  -webkit-tap-highlight-color: transparent;
}


/* =========================================================
   BOTÃO "COMPRAR" PISCANDO SECO (100x0)
   ========================================================= */

@keyframes piscar-seco {
  0%, 49.9% { background-color: #198754 !important; } /* Verde */
  50%, 100% { background-color: #6c757d !important; } /* Cinza */
}

#prize-open {
  animation: piscar-seco 1s infinite !important;
  -webkit-animation: piscar-seco 1s infinite !important;
  transition: none !important; /* <-- Isso aqui mata a transição que atrapalhava o piscar seco */
  color: #ffffff !important;
  border: none !important;
  border-radius: 5px !important; /* Deixei 5px pra ficar igual seu print novo */
  padding: 6px 10px !important;
  font-size: 16px !important;
  font-weight: bold !important;
}

/* HOVER no PC - Deixei verde escuro ao passar o mouse e para de piscar */
@media (hover:hover){
  #prize-open:hover{
    background-color: #146c43 !important; 
    animation-play-state: paused !important;
    transform: translateY(-2px);
  }
}

/* Clique / toque */
#prize-open:active{
  transform: scale(.97);
}


/* =========================================================
   CARDS DE QUANTIDADE (+100, +350…)
   ========================================================= */

@media (hover:hover){
  .select:hover,
  .spins-content:hover{
    background:#2a3442 !important;
    border-color: rgba(255,59,59,.6) !important;
    color:#ffffff !important;

    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0,0,0,.35);
  }
}

.select:active,
.spins-content:active{
  transform: scale(.98);
  filter: brightness(.95);
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
}


/* selecionado */
.select.is-active{
  outline:2px solid rgba(255,59,59,.7);
  box-shadow:0 0 0 4px rgba(255,59,59,.18);
}


/* =========================================================
   BOTÕES DO CHECKOUT / PIX
   ========================================================= */

@media (hover:hover){
  .ck-btn:hover,
  .pix-copy:hover,
  .pix-toggle button:hover{
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0,0,0,.28);
  }
}

.ck-btn:active,
.pix-copy:active,
.pix-toggle button:active{
  transform: scale(.97);
  filter: brightness(.95);
}


/* foco do input */
.ck-row:focus-within{
  border-color:#ff3b3b !important;
  box-shadow:0 0 0 3px rgba(255,59,59,.18);
}


/* scroll suave */
html{
  scroll-behavior:smooth;
}


/* =========================
   TEXTO "ADQUIRA JÁ" PISCANDO
   ========================= */

/* animação de piscar */
@keyframes piscarVermelho {
  0%   { background: #ff3b3b; box-shadow: 0 0 0 rgba(255,59,59,0); }
  50%  { background: #ff0000; box-shadow: 0 0 12px rgba(255,0,0,.8); }
  100% { background: #ff3b3b; box-shadow: 0 0 0 rgba(255,59,59,0); }
}

/* botão/label do "Adquira já" */
.adquira-ja,
.btn-adquira,
.badge-adquira{
  background: #ff3b3b !important;
  color: #fff !important;
  border-radius: 6px;
  padding: 4px 10px;
  font-weight: 600;

  animation: piscarVermelho 1s infinite ease-in-out;
}

/* =========================
   CORRIGIR ALINHAMENTO DAS CAIXAS
   ========================= */

/* container de cada linha */
.box-item,
.roulette-item,
.line-box{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  width: 100% !important;
  box-sizing: border-box;
  padding: 10px 14px !important;
}

/* linhas vermelhas (ganhadores) */
.box-item.red,
.roulette-item.red,
.line-box.red{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  width: 100% !important;
}

/* lado esquerdo (nome do prêmio) */
.box-item .left,
.roulette-item .left,
.line-box .left{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* lado direito (nome do ganhador / disponível) */
.box-item .right,
.roulette-item .right,
.line-box .right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 90px;
}

/* ===== CENTRALIZAR SEM QUEBRAR O RESTO ===== */
.cs-wrap{
  width:100%;
  display:flex;
  justify-content:center;   /* centraliza */
}

.cs-box{
  width:100%;
  max-width:560px;
  margin:0 auto;            /* backup de centralização */
  display:block;
}

/* Se o pai for algum flex estranho, isso garante */
.cs-box *{ box-sizing:border-box; }

/* ===== BOTÕES DAS CAIXAS — FORMATO DA 2ª IMAGEM ===== */

.spins-content{
  border-radius: 14px !important;      /* mais arredondado */
  padding: 10px 14px !important;       /* menor altura */
  min-height: 64px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  gap: 12px;
}

/* lado esquerdo (títulos + preço) */
.spins-content .left{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

/* texto pequeno “A partir de” */
.spins-content .left small{
  font-size: 10px !important;
  opacity: .75;
  line-height: 1;
}

/* título principal */
.spins-content .left h3{
  font-size: 16px !important;
  font-weight: 800;
  line-height: 1.1;
  margin: 0;
}

/* preço */
.spins-content .left span{
  font-size: 12px !important;
  opacity: .9;
}

/* lado direito (recebe X caixas + ícone) */
.spins-content .right{
  display: flex;
  align-items: center;
  gap: 6px;
  text-align: right;
}

/* texto “Recebe X Caixas” */
.spins-content .right strong{
  font-size: 14px !important;
  line-height: 1.1;
}

/* ícone do presente */
.spins-content .right img,
.spins-content .right svg{
  width: 22px;
  height: 22px;
}
/* ===== RESPIRO LATERAL GLOBAL (PC + MOBILE) ===== */

/* container onde ficam os botões */
.spins-single,
.spins-container,
.spins{
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* impede o botão de colar na borda mesmo com width 100% */
.spins-content{
  width: 100%;
  box-sizing: border-box;
}
.ck-country{
  width:40px;
  height:40px;
  border-radius:10px;
  background:#1f2832;
  position:relative;

  /* mata o texto BR, mesmo que ele exista */
  font-size:0 !important;
  color:transparent !important;
  overflow:hidden;
}

/* =========================================================
   CHECKOUT (STEP1/2/3) + LOADING + PIX — BLOCO LIMPO FINAL
   Cole no FINAL do seu CSS
   ========================================================= */

/* trava scroll quando overlay abre */
body.modal-travado{ overflow:hidden !important; }

/* =========================================
   OVERLAYS (Step1/2/3) — abre com .is-open
   ========================================= */
.ck-overlay{
  display:none;
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  background:rgba(0,0,0,.75);
  z-index:2147483647;
}
.ck-overlay.is-open{ display:block; }

/* =========================================
   FULLSCREENS (Loading / Pix) — abre com display:block no JS
   ========================================= */
#ckLoading,
#ckPix{
  display:none;
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  background:rgba(0,0,0,.75);
  z-index:2147483647;
}
#ckPix{ overflow:auto !important; }

/* some o site quando estiver no PIX/Loading */
#pageHome.is-hidden{ display:none !important; }

/* =========================================
   CARD DO MODAL
   ========================================= */
.ck-card{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(560px, 92vw) !important;
  max-width:560px !important;
  background:#1a2330;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  box-shadow:0 18px 60px rgba(0,0,0,.75);
  overflow:hidden;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  color:#e5e7eb;
}

@media (min-width:1024px){
  .ck-card{
    width:520px !important;
    max-width:520px !important;
  }
}

/* =========================================
   HEADER (ícone + título estilo MUI)
   ========================================= */
.ck-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  background:#1f2a38;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.ck-header .left{
  display:flex;
  align-items:center;
  gap:10px;
}
.ck-header .ck-ic{
  display:inline-flex;
  width:20px;
  height:20px;
  color:#fff;
  opacity:.95;
  flex:0 0 auto;
}
.ck-header .ck-title{
  font-family:Roboto, Helvetica, Arial, sans-serif !important;
  font-size:20px !important;
  font-weight:500 !important;
  line-height:1.6 !important;
  letter-spacing:.15px !important;
  color:#fff !important;
}
.ck-close{
  background:transparent;
  border:none;
  color:rgba(255,255,255,.65);
  font-size:22px;
  cursor:pointer;
  line-height:1;
}

/* =========================================
   BODY
   ========================================= */
.ck-body{ padding:14px 16px 16px; }

/* =========================================
   ALERTS
   ========================================= */
.ck-alert{
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:10px;
  padding:12px;
  font-size:13px;
  line-height:1.35;
  border:1px solid rgba(255,255,255,.10);
  margin-bottom:12px;
}
.ck-alert.blue{ background:#133b78; color:#e6f0ff; }
.ck-alert.yellow{ background:#7b5a00; color:#fff; }
.ck-alert.green{ background:#0f6a3b; color:#fff; }
.ck-alert .i{
  width:18px;height:18px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.18);
  font-weight:900;font-size:12px;
  flex:0 0 auto;
}

/* =========================================
   INPUTS BASE
   ========================================= */
.ck-label{
  color:rgba(255,255,255,.70);
  font-size:12px;
  margin:10px 0 6px;
}
.ck-row{
  display:flex;
  align-items:center;
  gap:10px;
  background:#0f1722;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:10px 12px;
  margin-bottom:10px;
}
.ck-input{
  width:100%;
  border:none !important;
  outline:none !important;
  background:transparent !important;
  color:#fff !important;
  font-size:14px;
}
.ck-input::placeholder{ color:rgba(255,255,255,.35); }

/* foco do input */
.ck-row:focus-within{
  border-color:#ff3b3b !important;
  box-shadow:0 0 0 3px rgba(255,59,59,.18);
}

/* =========================================
   TELEFONE (Step1 e Step2) — ÚNICA versão
   Com label dentro (.ck-floating) + bandeira + setinha
   ========================================= */
.ck-row.ck-phone-row{
  position:relative !important;
  height:56px !important;
  padding:0 !important;
  gap:0 !important;
  overflow:hidden !important;

  background:transparent !important;
  border:1px solid rgba(255,255,255,.15) !important;
  border-radius:12px !important;

  display:flex !important;
  align-items:stretch !important;
}

/* label dentro */
.ck-row.ck-phone-row .ck-floating{
  position:absolute !important;
  top:7px !important;
  left:76px !important; /* depois do bloco bandeira */
  font-size:12px !important;
  font-weight:600 !important;
  color:rgba(255,255,255,.45) !important;
  pointer-events:none !important;
  z-index:2 !important;
}
.ck-row.ck-phone-row .ck-floating span{
  color:rgba(255,255,255,.6) !important;
}

/* bloco bandeira */
.ck-row.ck-phone-row .ck-country{
  width:64px !important;
  height:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  padding:0 12px !important;

  background:transparent !important;
  border:0 !important;
  border-right:1px solid rgba(255,255,255,.15) !important;
  border-radius:0 !important;
  flex:0 0 auto;
}

/* bandeira redonda */
.ck-row.ck-phone-row .ck-flag{
  width:18px !important;
  height:18px !important;
  border-radius:999px !important;
  object-fit:cover !important;
  display:block !important;
}
.ck-row.ck-phone-row .ck-caret{
  color:rgba(255,255,255,.55) !important;
  font-weight:900 !important;
  font-size:14px !important;
  line-height:1 !important;
}

/* input com espaço pro label */
.ck-row.ck-phone-row .ck-phone-input{
  flex:1 !important;
  height:100% !important;
  border:0 !important;
  outline:0 !important;
  background:transparent !important;
  color:#fff !important;

  padding:22px 16px 0 16px !important;
  font-size:14px !important;
}
.ck-row.ck-phone-row .ck-phone-input::placeholder{
  color:rgba(255,255,255,.28) !important;
}

/* =========================================
   TERMS
   ========================================= */
.ck-terms{
  font-size:11px;
  color:rgba(255,255,255,.55);
  line-height:1.35;
  margin:10px 0 12px;
}
.ck-terms a{
  color:#ff4a4a;
  text-decoration:none;
  font-weight:900;
}
.ck-terms a:hover{ text-decoration:underline; }

/* =========================================
   BUTTONS
   ========================================= */
.ck-btn{
  width:100%;
  border:none;
  cursor:pointer;
  background:#ff3b3b;
  color:#fff;
  font-weight:900;
  padding:14px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.ck-btn .arrow{
  width:22px;height:22px;border-radius:999px;
  background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;
}

.ck-link{
  display:block;
  text-align:center;
  margin-top:10px;
  color:#ff4a4a;
  font-weight:900;
  text-decoration:none;
  font-size:13px;
}

/* hover/active (PC) */
@media (hover:hover){
  .ck-btn:hover{
    filter:brightness(1.08);
    transform:translateY(-1px);
    box-shadow:0 10px 22px rgba(0,0,0,.28);
  }
}
.ck-btn:active{
  transform:scale(.97);
  filter:brightness(.95);
}

/* =========================================
   LOADING
   ========================================= */
.ck-loading-wrap{
  width:min(720px, 92vw);
  margin:0 auto;
  padding:90px 0 0;
}
.ck-loading-box{
  background:#1f2a38;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:24px 18px;
  color:#fff;
  display:flex;
  align-items:center;
  gap:16px;
  justify-content:center;
}
.ck-dots{ display:flex; gap:8px; align-items:center; }
.ck-dots span{
  width:8px;height:8px;border-radius:999px;
  background:#ff3b3b;
  opacity:.25;
  animation: dot 1s infinite;
}
.ck-dots span:nth-child(2){ animation-delay:.15s; }
.ck-dots span:nth-child(3){ animation-delay:.30s; }
@keyframes dot{
  0%,100%{ opacity:.25; transform:translateY(0); }
  50%{ opacity:1; transform:translateY(-4px); }
}

/* =========================================
   PIX
   ========================================= */
.pix-card{
  width:min(720px, 92vw);
  margin:20px auto 60px;
  background:#1a2330;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 18px 60px rgba(0,0,0,.45);
}
.pix-header{
  padding:16px;
  background:#1f2a38;
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; gap:10px;
  color:#fff; font-weight:900;
}
.pix-body{ padding:16px; color:#e5e7eb; }

.pix-code-row{
  display:flex;
  gap:10px;
  align-items:center;
  background:#0f1722;
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  padding:10px;
  margin:12px 0;
}
.pix-code{
  flex:1;
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-size:12px;
  color:#cbd5e1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pix-copy{
  border:none;
  cursor:pointer;
  background:#ff3b3b;
  color:#fff;
  font-weight:900;
  padding:10px 12px;
  border-radius:10px;
}
@media (hover:hover){
  .pix-copy:hover{
    filter:brightness(1.08);
    transform:translateY(-1px);
    box-shadow:0 10px 22px rgba(0,0,0,.28);
  }
}
.pix-copy:active{ transform:scale(.97); filter:brightness(.95); }

.pix-toggle{
  display:flex;
  justify-content:center;
  margin-top:10px;
}
.pix-toggle button{
  border:none;
  cursor:pointer;
  background:#2a3442;
  color:#fff;
  font-weight:900;
  padding:10px 14px;
  border-radius:10px;
}
@media (hover:hover){
  .pix-toggle button:hover{
    filter:brightness(1.08);
    transform:translateY(-1px);
    box-shadow:0 10px 22px rgba(0,0,0,.28);
  }
}
.pix-toggle button:active{ transform:scale(.97); filter:brightness(.95); }

.pix-qr-wrap{ text-align:center; margin-top:12px; display:none; }
.pix-qr-wrap img{
  width:280px; max-width:80vw;
  background:#fff;
  padding:12px;
  border-radius:10px;
}

.pix-warn{
  margin-top:12px;
  background:#7b5a00;
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  border-radius:10px;
  padding:12px;
  font-size:12px;
  line-height:1.35;
}

/* =========================================
   ANIMAÇÕES / TRANSIÇÕES (geral)
   ========================================= */
.select,
.spins-content,
.btn-add-to-cart,
#prize-open,
.ck-btn,
.pix-copy,
.pix-toggle button{
  transition:
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    color .18s ease;
  will-change: transform, filter;
  -webkit-tap-highlight-color: transparent;
}

/* scroll suave */
html{ scroll-behavior:smooth; }














<style>
/* linha do telefone */
.ck-row.ck-phone-row{
  height:48px;
  display:flex;
  align-items:center;
  overflow:hidden;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.15);
  background:transparent;
  padding:0;
}

/* bloco do país (bandeira + seta) */
.ck-row.ck-phone-row .ck-country{
  height:48px;
  display:flex;
  align-items:center;         /* <<< centraliza vertical */
  justify-content:center;
  gap:10px;
  padding:0 14px;
  border-right:1px solid rgba(255,255,255,.15);
  background:transparent;
}

/* bandeira */
.ck-row.ck-phone-row .ck-flag{
  width:18px;
  height:18px;
  border-radius:999px;
  object-fit:cover;
  display:block;
}

/* seta */
.ck-row.ck-phone-row .ck-caret{
  display:inline-flex;        /* <<< evita descer */
  align-items:center;         /* <<< centraliza */
  line-height:1;              /* <<< não “puxa” pra baixo */
  transform: translateY(-1px);/* <<< micro ajuste */
  color:rgba(255,255,255,.55);
  font-weight:900;
  font-size:14px;
}

/* input */
.ck-row.ck-phone-row .ck-input{
  height:48px;
  flex:1;
  padding:0 14px;
  border:0;
  outline:0;
  background:transparent;
  color:#fff;
  font-size:14px;
}
</style>


/* Animação que faz o bloco todo sumir (fade out) */
@keyframes sumir-suave {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0; } /* Aqui ele fica totalmente invisível */
}

/* O seletor button#prize-open garante que ele vença qualquer outra regra */
button#prize-open {
  /* Largura e Alinhamento */
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  box-sizing: border-box !important;

  /* Cor e Estilo (Borda igual ao seu print) */
  background-color: #198754 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 4px !important;

  /* Espessura (Botão fino) */
  padding: 6px 10px !important;
  margin-top: 10px !important;

  /* Fonte */
  font-size: 16px !important;
  font-weight: bold !important;

  /* A MÁGICA: Aplica a animação de sumir */
  animation: sumir-suave 1.5s ease-in-out infinite !important;
  -webkit-animation: sumir-suave 1.5s ease-in-out infinite !important;
}




/* =========================================================
   LAYOUT CARROSSEL + CARD BRANCO (ESTILO CIVIC)
   ========================================================= */

.container-campanha-moderna {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Área da Imagem */
.carousel-moderno {
    position: relative;
    height: 320px; /* Ajuste conforme sua necessidade */
    width: 100%;
}

.img-item {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    display: none; /* JS controla qual aparece */
}

.img-item.active {
    display: block;
}

/* Card Branco de Baixo */
.card-info-limpo {
    background: #ffffff !important;
    position: relative !important;
    padding: 25px 15px 15px 15px !important;
    text-align: left !important;
    border: none !important;
}

/* Título e Texto */
.titulo-campanha {
    color: #333 !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    margin: 0 0 5px 0 !important;
    text-transform: uppercase;
}

.desc-campanha {
    color: #666 !important;
    font-size: 13px !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-verde {
    width: 10px;
    height: 10px;
    background: #28a745;
    border-radius: 50%;
    display: inline-block;
}

/* Botão "Adquira já!" na divisória */
.badge-flutuante {
    position: absolute !important;
    top: -14px !important; /* Exatamente na emenda */
    left: 15px !important;
    background-color: #198754 !important;
    color: #fff !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    z-index: 100 !important;
    animation: respirar-verde-suave 1.5s ease-in-out infinite !important;
}

@keyframes respirar-verde-suave {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Container da Imagem */
.carousel-moderno {
    position: relative;
    height: 320px;
    width: 100%;
}

.img-single {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 12px 12px 0 0;
}

/* Posicionamento das Setas (Igual ao Civic) */
.carousel-controls {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    z-index: 10;
    pointer-events: none; /* Deixa o clique passar para os ícones */
}

.slide-control {
    pointer-events: auto; /* Ativa o clique apenas nos ícones */
    cursor: pointer;
    color: #ffffff !important; /* Setas brancas */
    font-size: 28px !important;
    text-shadow: 0 0 10px rgba(0,0,0,0.5); /* Sombra para ler no claro */
}

#imageCounter {
    align-self: flex-start;
    position: absolute;
    top: -140px; /* Ajuste para o topo da imagem */
    right: 15px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
}

/* Ajuste do Card Branco */
.card-info-limpo {
    background: #ffffff !important;
    position: relative !important;
    padding: 25px 15px 15px 15px !important;
    border-radius: 0 0 12px 12px;
}

.badge-flutuante {
    position: absolute !important;
    top: -14px !important;
    left: 15px !important;
    z-index: 20 !important;
}

 /* Posicionamento das Setas Finas */
.navegacao-setas {
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;
    width: 100% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    justify-content: space-between !important;
    padding: 0 20px !important; /* Distância da borda da tela */
    z-index: 999 !important; /* Garante que fique acima da foto */
    pointer-events: none !important;
}

.seta-fina {
    pointer-events: auto !important;
    cursor: pointer !important;
    color: #ffffff !important; /* Seta branca */
    font-size: 35px !important; /* Tamanho da seta chevron */
    text-shadow: 0px 0px 10px rgba(0,0,0,0.8) !important; /* Sombra para aparecer em fotos claras */
    transition: transform 0.2s !important;
}

.seta-fina:active {
    transform: scale(0.9);
}

/* Garante que o contador também apareça no topo direito */
.contador-custom {
    position: absolute !important;
    top: 15px !important;
    right: 20px !important;
    background: rgba(0,0,0,0.5) !important;
    color: #fff !important;
    padding: 3px 12px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    z-index: 999 !important;
}

/* =========================================================
   SÓ O AJUSTE DO CARROSSEL (ESTILO CIVIC)
   ========================================================= */

/* Faz a imagem ocupar o espaço lateral que o container cinza rouba */
.container-campanha-moderna {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

/* Imagem colada no topo (quadrada) */
.moldura-carousel, .img-single {
    height: 300px !important;
    border-radius: 0 !important; /* Tira o arredondado que come o topo */
    margin: 0 !important;
}

/* SETAS FINAS NAS LATERAIS */
.navegacao-setas {
    position: absolute !important;
    top: 50% !important;
    width: 100% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    justify-content: space-between !important;
    padding: 0 15px !important;
    z-index: 99 !important;
    pointer-events: none !important;
}

.seta-fina {
    pointer-events: auto !important;
    cursor: pointer !important;
    color: #ffffff !important;
    font-size: 32px !important;
    text-shadow: 0px 0px 8px rgba(0,0,0,0.6) !important;
}

/* Contador no canto da foto */
.contador-custom {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    z-index: 100 !important;
    background: rgba(0,0,0,0.5) !important;
    color: #fff !important;
    padding: 2px 10px !important;
    border-radius: 20px !important;
}

/* Card Branco Limpo Embaixo */
.card-info-limpo {
    background: #ffffff !important;
    padding: 25px 15px 15px 15px !important;
    position: relative !important;
    border-radius: 0 0 12px 12px;
}

/* Adquira Já flutuando na divisa */
.badge-flutuante {
    position: absolute !important;
    top: -14px !important;
    left: 15px !important;
    background-color: #198754 !important;
    z-index: 101 !important;
}

/* Botão Comprar mais fino */
#prize-open {
    opacity: 1 !important;
    width: 100% !important;
    background-color: #198754 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 4px !important; /* Bordas menos arredondadas */
    padding: 6px 10px !important;   /* REDUZIDO: de 12px para 6px */
    font-size: 16px !important;
    font-weight: bold !important;
    margin-top: 5px !important;
}

/* Botão Ver Meus Títulos mais fino */
.btn-ver-meus-titulos {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    background-color: #6c757d !important;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 6px 10px !important;   /* REDUZIDO: para acompanhar o verde */
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    margin: 5px 0 !important;
}

/* =========================================================
   AJUSTE DE ESPAÇAMENTO E ESPESSURA (SÓ CSS)
   ========================================================= */

/* 1. Dá respiro embaixo do Sorteio/Preço */
.date-price {
    margin-bottom: 25px !important; /* Aumenta o espaço para o botão não colar */
    padding-top: 10px !important;
}

/* 2. Deixa o botão COMPRAR mais fino e com espaço embaixo */
#prize-open {
    opacity: 1 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 8px 10px !important;   /* Deixa o botão mais fino */
    margin-bottom: 12px !important; /* Cria o espaço para o botão de baixo */
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}

/* 3. Ajusta o botão Ver Meus Títulos (usando a classe que você já tem) */
.btn-ver-meus-titulos, 
.btn-ver-meus-bilhetes,
[href*="meus-numeros"] {
    display: flex !important;
    padding: 8px 10px !important;   /* Acompanha a finura do verde */
    margin-top: 5px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
}

/* 4. Ajuste dos cards de quantidade (+100, +350...) */
.spins-single, .spins-container {
    margin-top: 20px !important;    /* Afasta os cards dos botões de cima */
}


/* Blindagem para o texto da promoção não sumir ou ficar gigante */
section h2, section span {
    text-shadow: none !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* Garante que o bloco de promoção tenha o respiro certo do botão cinza */
.btn-ver-meus-titulos + section {
    margin-top: 10px !important;
}

.discount-item p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
}

/* Esconde a barra de rolagem caso o celular seja muito pequeno */
.discount-content::-webkit-scrollbar {
    display: none;
}

 /* 1. Container - Força o fundo branco e o alinhamento em 3 colunas */
.content-select {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    padding: 55px 15px 15px 15px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    margin: 15px 10px !important;
    position: relative !important;
}

/* 2. Frase superior centralizada */
.content-select::before {
    content: "Selecione a quantidade de títulos";
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    color: #616161;
    font-size: 15px;
    font-family: sans-serif;
}

/* 3. Cards Individuais - Resolve o problema de ficarem "magros" */
.content-select .select {
    width: 31% !important; /* Força os 3 por linha ocupando espaço real */
    min-width: 0 !important;
    background: #e0e0e0 !important;
    border: none !important;
    border-radius: 8px !important;
    height: 90px !important;
    margin: 5px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important; /* Prende a faixa verde */
}

/* 4. Card Popular (Branco com borda verde) */
.content-select .select.popular {
    background: #ffffff !important;
    border: 2px solid #198754 !important;
}

/* 5. A Faixa "Mais Popular" (Retângulo sólido no topo) */
.content-select .select.popular button, 
.content-select .select.popular .badge-popular {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 22px !important;
    background-color: #198754 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: bold !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 6. Textos (+50 e SELECIONAR) */
.content-select .select h3 {
    font-size: 26px !important;
    color: #000000 !important;
    margin: 8px 0 0 0 !important;
    font-weight: 900 !important;
}

.content-select .select p {
    font-size: 10px !important;
    color: #757575 !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    margin: 0 !important;
}

//* =========================================================
   SOLUÇÃO TOTAL: FAIXA VERDE DE PONTA A PONTA
   ========================================================= */

/* 1. Prepara o card para que nada saia das bordas */
.select.popular {
    position: relative !important;
    padding-top: 25px !important;
    overflow: hidden !important; /* Corta o que sobrar da faixa */
    border: 2px solid #198754 !important;
    background-color: #ffffff !important;
}

/* 2. Força a faixa a ignorar tudo e preencher o topo */
.select.popular button, 
.select.popular .badge-popular {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important; /* Força a encostar na direita */
    width: 100% !important;
    min-width: 100% !important; /* Garante que não encolha */
    
    height: 25px !important;
    background-color: #198754 !important;
    color: #ffffff !important;
    
    /* Alinhamento total do texto */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Reseta qualquer trava do sistema original */
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    float: none !important;
    transform: none !important;
}

/* 3. Garante que o texto "Mais Popular" não quebre em duas linhas */
.select.popular button span, 
.select.popular .badge-popular {
    white-space: nowrap !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

/* Remove setas padrão do campo de número */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
.input-quantity {
    -moz-appearance: textfield;
    outline: none !important;
}

.spins-content {
    transition: transform 0.2s ease-in-out;
}
.spins-content:active {
    transform: scale(0.98);
    opacity: 0.9;
}
.spins-content h4, .spins-content p {
    font-family: 'Arial', sans-serif !important;
}

.social-buttons a {
    transition: transform 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.social-buttons a:active {
    transform: scale(0.95);
}

/* Estica os cards e tira o arredondado de pílula */
.spins-content {
    width: 100% !important;
    max-width: none !important;
    border-radius: 8px !important; /* Deixa reto igual ao print 2 */
    margin: 0 !important;
    border: none !important;
}

/* Garante que o container ocupe a largura toda da tela */
.spins-single {
    width: 100% !important;
    padding: 10px !important;
    box-sizing: border-box !important;
}

/* Ajuste fino dos textos para não colarem na borda */
.spins-content h4 {
    letter-spacing: -0.5px !important;
    text-transform: none !important;
}

.spins-content {
    border-radius: 6px !important; /* Remove o estilo pílula */
    min-height: 55px !important;   /* Deixa o card mais fino */
    width: 100% !important;
    margin: 0 !important;
}

.spins-content .qtd_numbers h4 {
    font-size: 16px !important;
}

.spins-content .price-spin {
    font-size: 13px !important;
}

.body-cotas-premiadas{
  margin-bottom:10px;
  padding:14px;
  background:#efefef;
  border-radius:12px;
  font-family:"Segoe UI",sans-serif;
}

/* HEADER */
.roletas-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.roletas-left{
  display:flex;
  align-items:center;
  gap:8px;
}

.roletas-emoji{font-size:20px;}

.roletas-title{
  margin:0;
  font-size:18px;
  font-weight:900;
}

.roletas-sub{
  margin:0;
  font-size:11px;
  font-weight:600;
  color:#888;
}

.badge-total{
  background:linear-gradient(180deg,#3b5bdb 0%,#2b45a0 100%);
  color:#fff;
  padding:5px 14px;
  border-radius:8px;
  font-weight:800;
  font-size:13px;
}

/* BOTOES */
.roletas-stats{
  display:flex;
  gap:8px;
  margin-top:10px;
}

.stat-btn{
  flex:1;
  text-align:center;
  padding:9px;
  border-radius:8px;
  font-weight:800;
  font-size:14px;
  color:#fff;
}

.stat-green{
  background:linear-gradient(90deg,#1f9d55,#2ecc71);
}

.stat-red{
  background:linear-gradient(90deg,#8b1e1e,#e53935);
}

/* LISTA */
.premio-item-roleta-list{
  display:flex;
  flex-direction:column;
  gap:6px; /* MAIS JUSTO */
  margin-top:10px;
}

.premio-row{
  height:38px; /* MAIS BAIXO */
  border-radius:8px; /* MENOS ARREDONDADO */
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 12px;
}

/* DISPONIVEL */
.premio-row.disponivel{
  background:#e7e7e7;
}

/* SORTEADO */
.premio-row.sorteado{
  background:#000;
}

/* PÍLULA */
.badge-premio{
  border-radius:6px;
  padding:4px 10px;
  font-weight:800;
  font-size:11px;
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.badge-premio.gray{
  background:#94a3b8;
  color:#fff;
}

.badge-premio.white{
  background:#fff;
  color:#000;
}

/* STATUS */
.premio-status{
  font-weight:800;
  font-size:13px;
}

.premio-status.black{ color:#000; }
.premio-status.white{ color:#fff; }

.premio-status .trophy{
  color:#ffc107;
  margin-left:5px;
}

/* BOTAO */
#btnMostrarMaisPremiosRoleta{
  width:100%;
  margin-top:10px;
  height:44px;
  background:linear-gradient(90deg,#1d8cf8,#007bff);
  border:none;
  border-radius:8px;
  color:#fff;
  font-weight:800;
  font-size:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}