@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 "PRÊMIOS" — DO JEITO CERTO
   ========================================================= */

#prize-open{
  background:#6c757d !important;   /* cinza normal */
  color:#ffffff !important;
  border:none !important;
  border-radius:10px !important;
}

/* HOVER no PC */
@media (hover:hover){
  #prize-open:hover{
    background:#ff3b3b !important;   /* vermelho ao passar */
    transform: translateY(-2px);
    filter: brightness(1.05);
    box-shadow: 0 14px 30px rgba(0,0,0,.35);
  }
}

/* Clique / toque */
#prize-open:active{
  background:#ff3b3b !important;
  transform: scale(.97);
  filter: brightness(.95);
  box-shadow: 0 8px 16px rgba(0,0,0,.25);
}


/* =========================================================
   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>