
/* =========================================================
   FRONT CAMPANHA - ESTILO REFERÊNCIA
   Mantém toda a lógica PHP/checkout existente.
   ========================================================= */

:root{
  --rbo-blue:#103f92;
  --rbo-blue-2:#1b4aa7;
  --rbo-blue-soft:#cfe5fb;
  --rbo-gray:#737d86;
  --rbo-page:#dfe4ea;
  --rbo-card:#fff;
  --rbo-black:#050505;
}

html,body{
  background:var(--rbo-page)!important;
  font-family:Montserrat,"Public Sans",sans-serif!important;
}

.container.app-main{
  width:100%!important;
  max-width:520px!important;
  margin:0 auto!important;
  padding:0 18px 28px!important;
}

/* HERO */
.campanha-header{
  position:relative!important;
  border-radius:0 0 0 0!important;
  overflow:hidden!important;
  margin:0!important;
  background:#111!important;
  box-shadow:none!important;
}
.campanha-header .SorteioTpl_imagemContainer__2-pl4{
  width:100%!important;
  height:auto!important;
  display:block!important;
}
.campanha-header .custom-image{
  width:100%!important;
  height:250px!important;
}
.campanha-header .SorteioTpl_imagem__2GXxI{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.campanha-header .custom-content-wrapper{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  z-index:5!important;
  padding:30px 8px 8px!important;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.88))!important;
}
.campanha-header .custom-badge-display{
  position:absolute!important;
  left:8px!important;
  bottom:59px!important;
  z-index:7!important;
}
.campanha-header .custom-badge-display .badge{
  border-radius:5px!important;
  background:#0d6efd!important;
  padding:5px 7px!important;
  font-size:8px!important;
  text-transform:none!important;
}
.campanha-header .SorteioTpl_title__3RLtu{
  margin:0!important;
  color:#fff!important;
  font-size:14px!important;
  line-height:1.15!important;
  font-weight:800!important;
  text-transform:uppercase!important;
}
.campanha-header .SorteioTpl_descricao__1b7iL{
  color:#fff!important;
  opacity:.9!important;
  font-size:10px!important;
  line-height:1.1!important;
  text-transform:uppercase!important;
}
.campanha-header .custom-content-wrapper .btn{
  margin-top:6px!important;
  height:25px!important;
  border-radius:0!important;
  background:#171717!important;
  font-size:10px!important;
  font-weight:700!important;
}

/* faixa preço */
.container.app-main > .app-card.card:first-of-type,
.container.app-main .app-card.card{
  box-shadow:none;
}
.container.app-main .item.d-flex.align-items-center.font-xs{
  min-height:30px!important;
  justify-content:center!important;
  gap:8px!important;
  background:#dfe4ea!important;
  color:#111!important;
  font-size:10px!important;
  font-weight:500!important;
}
.container.app-main .item.d-flex.align-items-center.font-xs .tag{
  background:#000!important;
  color:#fff!important;
  border-radius:4px!important;
  font-size:14px!important;
  line-height:1!important;
  padding:4px 7px!important;
  font-weight:800!important;
}

/* Ações referência */
.rbo-old-ranking{display:none!important;}
.rbo-ref-action-bars{
  display:flex;
  flex-direction:column;
  gap:3px;
  margin:0 0 4px;
}
.rbo-ref-action{
  width:100%;
  height:27px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  border-radius:3px;
  color:#fff;
  font-size:12px;
  font-weight:700;
}
.rbo-ref-action-blue{background:var(--rbo-blue)!important;}
.rbo-ref-action-gray{background:#727b82!important;}
.rbo-ref-action-icon{font-size:14px;line-height:1;}

/* Quanto mais títulos */
.rbo-ref-chances{
  border:0!important;
  border-radius:14px!important;
  background:#fff!important;
  margin:5px 0 6px!important;
}
.rbo-ref-chances .card-body{
  padding:7px 10px!important;
}
.rbo-ref-chances p{
  margin:0!important;
  font-size:9px!important;
  color:#656d78!important;
}

/* COMBOS */
.app-vendas-express{
  margin-top:0!important;
}
.vendasExpressNumsSelect.v2{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:3px!important;
  width:100%!important;
}
.vendasExpressNumsSelect.v2 .item{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  overflow:visible!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
}
.vendasExpressNumsSelect.v2 .item .item-content{
  width:100%!important;
  height:72px!important;
  min-height:72px!important;
  border-radius:6px!important;
  border:1px solid #000!important;
  background:#000!important;
  color:#fff!important;
  padding:7px 3px 5px!important;
  justify-content:center!important;
  position:relative!important;
}
.vendasExpressNumsSelect.v2 .item .item-content h3{
  margin:0!important;
  color:#fff!important;
  font-size:24px!important;
  line-height:1!important;
  font-weight:800!important;
}
.vendasExpressNumsSelect.v2 .item .item-content .item-content-plus{
  font-size:15px!important;
  color:inherit!important;
}
.vendasExpressNumsSelect.v2 .item .item-content .rbo-combo-price{
  margin-top:4px!important;
  color:#fff!important;
  font-size:9px!important;
  line-height:1!important;
}
.vendasExpressNumsSelect.v2 .item .item-content .item-content-txt{
  margin-top:4px!important;
  color:#fff!important;
  font-size:9px!important;
  line-height:1!important;
}
.vendasExpressNumsSelect.v2 .item:nth-child(2){
  position:relative!important;
  border:0!important;
}
.vendasExpressNumsSelect.v2 .item:nth-child(2) > .px-2{
  display:block!important;
  width:74px!important;
  top:-1px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  z-index:6!important;
  background:#0b45a2!important;
  border-radius:0 0 5px 5px!important;
  font-size:7px!important;
}
.vendasExpressNumsSelect.v2 .item:nth-child(2) .item-content{
  background:#cfe5fb!important;
  border:1px solid #0b45a2!important;
  color:#071a33!important;
}
.vendasExpressNumsSelect.v2 .item:nth-child(2) .item-content h3,
.vendasExpressNumsSelect.v2 .item:nth-child(2) .item-content .rbo-combo-price,
.vendasExpressNumsSelect.v2 .item:nth-child(2) .item-content .item-content-txt{
  color:#071a33!important;
}

/* seletor de quantidade + comprar */
.app-vendas-express .d-flex.w-100.justify-content-center.items-center{
  display:grid!important;
  grid-template-columns:1fr 1.25fr!important;
  gap:4px!important;
  margin-top:4px!important;
}
.vendasExpressNums{
  margin:0!important;
  border:1px solid #d3dae3!important;
  border-radius:6px!important;
  background:#fff!important;
}
.vendasExpressNums .card-body{
  height:48px!important;
  padding:4px 7px!important;
}
.vendasExpressNums .qty{
  height:34px!important;
  border:0!important;
  box-shadow:none!important;
  background:#fff!important;
  color:#111!important;
  font-size:13px!important;
}
.vendasExpressNums .numeroChange svg{
  width:20px!important;
  height:20px!important;
  color:#7f8b9b!important;
}
.app-vendas-express .btn-custom{
  height:48px!important;
  margin:0!important;
  border-radius:5px!important;
  background:var(--rbo-blue-2)!important;
  color:#fff!important;
  font-size:12px!important;
  font-weight:700!important;
}
.app-vendas-express .btn-custom .me-4{
  margin:0 auto!important;
}
.app-vendas-express .btn-custom svg{
  width:22px!important;
  height:22px!important;
  margin-right:8px!important;
}
.app-vendas-express .btn-custom #total{
  opacity:1!important;
  font-size:14px!important;
  font-weight:800!important;
}

/* descrição/regulamento */
.app-title h1{
  font-family:Montserrat,"Public Sans",sans-serif!important;
}
.accordion,
.accordion-item,
.accordion-button,
.app-card{
  border-radius:10px!important;
}

/* Roletas */
.app-title:has(h1){
  margin-top:7px;
}
.app-title h1{
  font-size:16px!important;
  font-weight:700!important;
}
.app-title-desc{
  font-size:10px!important;
}
button.pulsando.btn.w-100.text-center.mb-1.text-white,
button.btn.w-100.text-center.mb-1.text-white{
  min-height:54px!important;
  border-radius:12px!important;
  background:linear-gradient(90deg,#123f97 0%,#123f97 52%,#5ea7ef 100%)!important;
  border:0!important;
  box-shadow:none!important;
  padding:5px 12px!important;
}
button.pulsando.btn.w-100.text-center.mb-1.text-white .row,
button.btn.w-100.text-center.mb-1.text-white .row{
  margin:0!important;
}
button.pulsando.btn.w-100.text-center.mb-1.text-white .col.text-start,
button.btn.w-100.text-center.mb-1.text-white .col.text-start{
  line-height:1.05!important;
}
button.pulsando.btn.w-100.text-center.mb-1.text-white .fs-6,
button.btn.w-100.text-center.mb-1.text-white .fs-6{
  font-size:16px!important;
  font-weight:800!important;
}
button.pulsando.btn.w-100.text-center.mb-1.text-white .col-auto.d-flex,
button.btn.w-100.text-center.mb-1.text-white .col-auto.d-flex{
  font-size:13px!important;
  line-height:1.05!important;
  font-weight:800!important;
}
button.pulsando.btn.w-100.text-center.mb-1.text-white small,
button.btn.w-100.text-center.mb-1.text-white small{
  font-size:7px!important;
}

/* seção maior/menor quando usuário clicar */
#rbo-menor-maior-section{
  scroll-margin-top:80px;
}
#rbo-menor-maior-section + .card{
  border-radius:10px!important;
  border:1px solid #d7dce2!important;
  background:#fff!important;
}

/* desktop mantém coluna estreita como referência */
@media(min-width:768px){
  .container.app-main{max-width:600px!important;}
  .campanha-header .custom-image{height:335px!important;}
}

/* mobile idêntico à proporção da captura */
@media(max-width:600px){
  .container.app-main{
    max-width:520px!important;
    padding:0 18px 24px!important;
  }
  .campanha-header .custom-image{
    height:250px!important;
  }
  .vendasExpressNumsSelect.v2 .item .item-content{
    height:72px!important;
    min-height:72px!important;
  }
}

/* =========================================================
   AJUSTE V2 - PROPORÇÕES MAIS PRÓXIMAS DA REFERÊNCIA
   Comparação visual:
   - hero mais alto e encostado nas laterais
   - barra de progresso escondida
   - combos um pouco maiores
   - seletor/comprar mais alto
   - roletas mais finas
   - compartilhamento sem ficar flutuando/duplicando
   - grupo/suporte não cobrem o conteúdo
   ========================================================= */

/* Cabeçalho mais próximo do azul da referência */
.app-header{
  background:#103f92!important;
  box-shadow:none!important;
}
.navbar{
  background:#103f92!important;
}

/* HERO: na referência ele ocupa praticamente toda a largura */
@media(max-width:600px){
  .container.app-main{
    padding-left:16px!important;
    padding-right:16px!important;
  }

  .campanha-header{
    width:calc(100% + 32px)!important;
    margin-left:-16px!important;
    margin-right:-16px!important;
    border-radius:0 0 0 0!important;
  }

  .campanha-header .custom-image{
    height:310px!important;
    min-height:310px!important;
  }

  .campanha-header .custom-content-wrapper{
    padding:42px 14px 12px!important;
  }

  .campanha-header .custom-badge-display{
    left:14px!important;
    bottom:92px!important;
  }

  .campanha-header .SorteioTpl_title__3RLtu{
    font-size:17px!important;
    line-height:1.12!important;
  }

  .campanha-header .SorteioTpl_descricao__1b7iL{
    font-size:12px!important;
    line-height:1.12!important;
  }

  .campanha-header .custom-content-wrapper .btn{
    height:36px!important;
    min-height:36px!important;
    font-size:12px!important;
  }
}

/* A referência mostrada não tem a barra de progresso entre imagem e preço */
.campanha-buscas{
  display:none!important;
}

/* Preço */
.container.app-main .item.d-flex.align-items-center.font-xs{
  min-height:42px!important;
  font-size:13px!important;
}
.container.app-main .item.d-flex.align-items-center.font-xs .tag{
  font-size:18px!important;
  padding:5px 9px!important;
  border-radius:6px!important;
}

/* Menor/Maior e Prêmios */
.rbo-ref-action-bars{
  gap:4px!important;
  margin-bottom:7px!important;
}
.rbo-ref-action{
  height:42px!important;
  border-radius:5px!important;
  font-size:15px!important;
}
.rbo-ref-action-icon{
  font-size:17px!important;
}

/* Também normaliza o botão de prêmio antigo, quando ele for renderizado */
.app-premios,
.app-ranking,
[class*="premios"] > .btn,
button[data-bs-target="#modal-premios"]{
  min-height:42px;
}

/* aviso branco */
.rbo-ref-chances{
  border-radius:18px!important;
  margin:7px 0 9px!important;
}
.rbo-ref-chances .card-body{
  padding:11px 12px!important;
}
.rbo-ref-chances p{
  font-size:12px!important;
}

/* COMBOS: no print referência são mais altos */
.vendasExpressNumsSelect.v2{
  gap:4px!important;
}
.vendasExpressNumsSelect.v2 .item .item-content{
  height:80px!important;
  min-height:80px!important;
  padding:10px 4px 6px!important;
  border-radius:7px!important;
}
.vendasExpressNumsSelect.v2 .item .item-content h3{
  font-size:28px!important;
}
.vendasExpressNumsSelect.v2 .item .item-content .item-content-plus{
  font-size:17px!important;
}
.vendasExpressNumsSelect.v2 .item .item-content .rbo-combo-price{
  font-size:11px!important;
  margin-top:6px!important;
}
.vendasExpressNumsSelect.v2 .item .item-content .item-content-txt{
  font-size:10px!important;
  margin-top:6px!important;
}

/* Quantidade e Quero participar */
.app-vendas-express .d-flex.w-100.justify-content-center.items-center{
  grid-template-columns:1fr 1.35fr!important;
  gap:5px!important;
  margin-top:6px!important;
}
.vendasExpressNums .card-body{
  height:62px!important;
  padding:6px 9px!important;
}
.vendasExpressNums .qty{
  height:48px!important;
  font-size:18px!important;
}
.vendasExpressNums .numeroChange svg{
  width:25px!important;
  height:25px!important;
}
.app-vendas-express .btn-custom{
  height:62px!important;
  border-radius:6px!important;
  font-size:15px!important;
}
.app-vendas-express .btn-custom svg{
  width:27px!important;
  height:27px!important;
}
.app-vendas-express .btn-custom #total{
  font-size:18px!important;
}

/* Descrição/Regulamento igual ao botão branco da referência */
.app-descricao-completa{
  margin-top:7px!important;
}
.app-descricao-completa .app-card{
  min-height:43px!important;
  border:0!important;
  border-radius:18px!important;
  background:#fff!important;
}
.app-descricao-completa--titulo{
  width:100%!important;
  min-height:43px!important;
  padding:8px 12px!important;
  text-align:center!important;
  font-size:14px!important;
  font-weight:800!important;
  color:#212b38!important;
}

/* Título da seção das roletas */
.app-title{
  margin-top:10px!important;
  margin-bottom:7px!important;
}
.app-title h1{
  font-size:18px!important;
  line-height:1.1!important;
}
.app-title-desc{
  font-size:11px!important;
}

/* ROLETA: na referência os cards são mais finos */
button.pulsando.btn.w-100.text-center.mb-1.text-white,
button.btn.w-100.text-center.mb-1.text-white{
  height:72px!important;
  min-height:72px!important;
  max-height:72px!important;
  border-radius:13px!important;
  padding:8px 14px!important;
  overflow:hidden!important;
  margin-bottom:6px!important;
}
button.pulsando.btn.w-100.text-center.mb-1.text-white .row,
button.btn.w-100.text-center.mb-1.text-white .row{
  height:100%!important;
  align-items:center!important;
}
button.pulsando.btn.w-100.text-center.mb-1.text-white .col.text-start,
button.btn.w-100.text-center.mb-1.text-white .col.text-start{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  line-height:1!important;
}
button.pulsando.btn.w-100.text-center.mb-1.text-white .col.text-start > div,
button.btn.w-100.text-center.mb-1.text-white .col.text-start > div{
  margin-bottom:2px!important;
  line-height:1!important;
}
button.pulsando.btn.w-100.text-center.mb-1.text-white .col.text-start > div:first-child,
button.btn.w-100.text-center.mb-1.text-white .col.text-start > div:first-child{
  font-size:10px!important;
}
button.pulsando.btn.w-100.text-center.mb-1.text-white .fs-6,
button.btn.w-100.text-center.mb-1.text-white .fs-6{
  font-size:18px!important;
  line-height:1!important;
}
button.pulsando.btn.w-100.text-center.mb-1.text-white .col-auto.d-flex,
button.btn.w-100.text-center.mb-1.text-white .col-auto.d-flex{
  font-size:15px!important;
  line-height:1.05!important;
  max-width:47%!important;
  text-align:right!important;
}
button.pulsando.btn.w-100.text-center.mb-1.text-white .col-auto[style*="font-size: 30px"],
button.btn.w-100.text-center.mb-1.text-white .col-auto[style*="font-size: 30px"]{
  font-size:25px!important;
}
button.pulsando.btn.w-100.text-center.mb-1.text-white small,
button.btn.w-100.text-center.mb-1.text-white small{
  font-size:8px!important;
  line-height:1!important;
}

/* Compartilhamento:
   no print de referência os ícones ficam centralizados no fluxo da página,
   não sobrepostos ao conteúdo */
.sorteio_sorteioShare__247_t{
  position:static!important;
  inset:auto!important;
  width:100%!important;
  display:flex!important;
  justify-content:center!important;
  margin:10px auto 8px!important;
  z-index:auto!important;
}
.sorteio_sorteioShare__247_t .campanha-share{
  width:auto!important;
  justify-content:center!important;
  margin:0 auto!important;
}
.sorteio_sorteioShare__247_t .item{
  justify-content:center!important;
}

/* evita os botões flutuantes grandes cobrindo a tela */
.whatsapp-grupo,
.telegram-grupo,
.instagram-grupo,
.suporte{
  display:none!important;
}

/* Footer mais curto */
.app footer,
footer{
  min-height:0!important;
  padding-top:12px!important;
  padding-bottom:12px!important;
  margin-top:8px!important;
}

/* Ajuste para iPhones menores */
@media(max-width:390px){
  .campanha-header .custom-image{
    height:292px!important;
    min-height:292px!important;
  }

  .vendasExpressNumsSelect.v2 .item .item-content{
    height:76px!important;
    min-height:76px!important;
  }

  .vendasExpressNumsSelect.v2 .item .item-content h3{
    font-size:25px!important;
  }

  .vendasExpressNums .card-body,
  .app-vendas-express .btn-custom{
    height:58px!important;
  }

  button.pulsando.btn.w-100.text-center.mb-1.text-white,
  button.btn.w-100.text-center.mb-1.text-white{
    height:68px!important;
    min-height:68px!important;
    max-height:68px!important;
  }
}

/* =========================================================
   V3 - CORREÇÕES PEDIDAS
   - Meus títulos
   - Prêmios mais fino/arredondado
   - Redes sociais somente no final
   - Mais popular azul e legível
   ========================================================= */

/* MEUS TÍTULOS:
   fica dentro da imagem, com margem lateral e sem estourar a largura */
.campanha-header .custom-content-wrapper .rbo-my-titles{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:calc(100% - 28px)!important;
    max-width:calc(100% - 28px)!important;
    height:42px!important;
    min-height:42px!important;
    margin:10px 14px 0!important;
    padding:0 12px!important;
    box-sizing:border-box!important;
    border-radius:0!important;
    background:#171717!important;
    color:#fff!important;
    font-size:14px!important;
    line-height:1!important;
    overflow:hidden!important;
}

/* PRÊMIOS: cinza mais fino e mais arredondado */
.rbo-ref-action-gray{
    height:34px!important;
    min-height:34px!important;
    border-radius:9px!important;
    background:#747f88!important;
    font-size:14px!important;
}
.rbo-ref-action-gray .rbo-ref-action-icon{
    font-size:17px!important;
}

/* Mantém Menor/Maior ligeiramente mais alto que Prêmios */
.rbo-ref-action-blue{
    height:39px!important;
    min-height:39px!important;
    border-radius:7px!important;
}

/* MAIS POPULAR:
   removemos os inline styles antigos e agora o azul fica sempre visível */
.vendasExpressNumsSelect.v2 .rbo-most-popular{
    position:relative!important;
    border:0!important;
    overflow:visible!important;
    background:transparent!important;
    mask-image:none!important;
    -webkit-mask-image:none!important;
}

.vendasExpressNumsSelect.v2 .rbo-most-popular .rbo-most-popular-label{
    position:absolute!important;
    top:0!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    z-index:9!important;
    width:86px!important;
    height:18px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0 5px!important;
    border-radius:0 0 8px 8px!important;
    background:#103f92!important;
    color:#fff!important;
    font-family:Montserrat,"Public Sans",sans-serif!important;
    font-size:8px!important;
    font-weight:500!important;
    line-height:1!important;
}

.vendasExpressNumsSelect.v2 .rbo-most-popular .item-content{
    background:#c9e5ff!important;
    border:2px solid #103f92!important;
    color:#112c54!important;
    box-shadow:none!important;
}

.vendasExpressNumsSelect.v2 .rbo-most-popular .item-content h3,
.vendasExpressNumsSelect.v2 .rbo-most-popular .item-content .item-content-plus,
.vendasExpressNumsSelect.v2 .rbo-most-popular .item-content .rbo-combo-price,
.vendasExpressNumsSelect.v2 .rbo-most-popular .item-content .item-content-txt{
    color:#112c54!important;
    opacity:1!important;
    visibility:visible!important;
    text-shadow:none!important;
}

/* Neutraliza qualquer regra antiga que tentava estilizar o segundo item */
.vendasExpressNumsSelect.v2 .item:nth-child(2) > .px-2{
    display:none!important;
}
.vendasExpressNumsSelect.v2 .item:nth-child(2).rbo-most-popular .item-content{
    background:#c9e5ff!important;
    border:2px solid #103f92!important;
    color:#112c54!important;
}

/* REDES SOCIAIS:
   só aparecem depois de todo o conteúdo porque o JS move o bloco para o final */
.sorteio_sorteioShare__247_t,
.sorteio_sorteioShare__247_t.rbo-share-at-bottom{
    position:static!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    inset:auto!important;
    width:100%!important;
    max-width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    margin:18px auto 8px!important;
    padding:0!important;
    z-index:1!important;
}

.sorteio_sorteioShare__247_t .campanha-share{
    width:100%!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    margin:0!important;
}

.sorteio_sorteioShare__247_t .campanha-share .item{
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    gap:5px!important;
}

/* Grupo / Telegram / Instagram / Suporte continuam escondidos para não cobrir conteúdo */
.sorteio_sorteioShare__247_t .whatsapp-grupo,
.sorteio_sorteioShare__247_t .telegram-grupo,
.sorteio_sorteioShare__247_t .instagram-grupo,
.sorteio_sorteioShare__247_t .suporte{
    display:none!important;
}

/* celular */
@media(max-width:600px){
    .campanha-header .custom-content-wrapper .rbo-my-titles{
        width:calc(100% - 30px)!important;
        max-width:calc(100% - 30px)!important;
        height:40px!important;
        min-height:40px!important;
        margin:9px 15px 0!important;
        font-size:13px!important;
    }

    .rbo-ref-action-gray{
        height:33px!important;
        min-height:33px!important;
        border-radius:9px!important;
        font-size:13px!important;
    }

    .rbo-ref-action-blue{
        height:38px!important;
        min-height:38px!important;
    }

    .vendasExpressNumsSelect.v2 .rbo-most-popular .rbo-most-popular-label{
        width:82px!important;
        height:17px!important;
        font-size:7.5px!important;
    }
}

/* =========================================================
   V4 - CORREÇÃO ESTRUTURAL
   1. "Meus títulos" fora da imagem, como faixa fina no rodapé
   2. Quantidade + "Quero participar" sempre lado a lado
   ========================================================= */

/* o overlay volta a conter somente título/subtítulo */
.campanha-header .custom-content-wrapper{
    padding:42px 14px 12px!important;
}

/* remove qualquer regra antiga do botão que ficava dentro da imagem */
.campanha-header .custom-content-wrapper .rbo-my-titles{
    display:none!important;
}

/* faixa verdadeira, imediatamente ABAIXO da imagem */
.rbo-my-titles-strip{
    width:100%!important;
    max-width:100%!important;
    height:42px!important;
    min-height:42px!important;

    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:8px!important;

    margin:0!important;
    padding:0 12px!important;

    border:0!important;
    border-radius:0!important;
    outline:0!important;

    background:#171717!important;
    color:#fff!important;

    font-family:Montserrat,"Public Sans",sans-serif!important;
    font-size:14px!important;
    line-height:1!important;
    font-weight:700!important;

    box-shadow:none!important;
    cursor:pointer!important;
}

.rbo-my-titles-strip svg{
    width:18px!important;
    height:18px!important;
    flex:0 0 18px!important;
}

/* Como o hero fica full-bleed no celular, a faixa acompanha exatamente a largura dele */
@media(max-width:600px){
    .rbo-my-titles-strip{
        width:calc(100% + 32px)!important;
        max-width:none!important;
        margin-left:-16px!important;
        margin-right:-16px!important;
        height:41px!important;
        min-height:41px!important;
        font-size:13px!important;
    }
}

/* =========================================================
   QUANTIDADE + QUERO PARTICIPAR
   Força grid porque .d-flex do style2.css usa !important
   ========================================================= */
.app-vendas-express .rbo-buy-row{
    display:grid!important;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1.35fr)!important;
    align-items:stretch!important;
    justify-content:stretch!important;

    width:100%!important;
    gap:6px!important;
    margin:0!important;
}

/* elimina margens bootstrap que empurravam um item para baixo */
.app-vendas-express .rbo-buy-row > .vendasExpressNums,
.app-vendas-express .rbo-buy-row > .btn-custom{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:62px!important;
    min-height:62px!important;

    margin:0!important;
    padding-top:0!important;
    padding-bottom:0!important;

    align-self:stretch!important;
}

/* seletor da quantidade */
.app-vendas-express .rbo-buy-row > .vendasExpressNums{
    border-radius:7px!important;
    overflow:hidden!important;
}
.app-vendas-express .rbo-buy-row > .vendasExpressNums .card-body{
    width:100%!important;
    height:62px!important;
    min-height:62px!important;
    padding:6px 8px!important;
}

/* botão de compra */
.app-vendas-express .rbo-buy-row > .btn-custom{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;

    border-radius:6px!important;
    background:#103f92!important;
    color:#fff!important;
}
.app-vendas-express .rbo-buy-row > .btn-custom > .d-flex{
    width:100%!important;
    height:100%!important;
    justify-content:center!important;
}
.app-vendas-express .rbo-buy-row > .btn-custom .me-4{
    margin:0!important;
    gap:8px!important;
}
.app-vendas-express .rbo-buy-row > .btn-custom .col.pe-0.text-nowrap{
    font-size:15px!important;
}
.app-vendas-express .rbo-buy-row > .btn-custom #total{
    font-size:17px!important;
    font-weight:800!important;
    opacity:1!important;
}

/* celular mantém na MESMA LINHA */
@media(max-width:600px){
    .app-vendas-express .rbo-buy-row{
        display:grid!important;
        grid-template-columns:minmax(0, 1fr) minmax(0, 1.35fr)!important;
        gap:6px!important;
    }

    .app-vendas-express .rbo-buy-row > .vendasExpressNums,
    .app-vendas-express .rbo-buy-row > .btn-custom,
    .app-vendas-express .rbo-buy-row > .vendasExpressNums .card-body{
        height:62px!important;
        min-height:62px!important;
    }
}

/* iPhone menor: ainda lado a lado, apenas reduz texto */
@media(max-width:390px){
    .app-vendas-express .rbo-buy-row{
        grid-template-columns:minmax(0, .95fr) minmax(0, 1.35fr)!important;
        gap:5px!important;
    }

    .app-vendas-express .rbo-buy-row > .btn-custom .col.pe-0.text-nowrap{
        font-size:13px!important;
    }

    .app-vendas-express .rbo-buy-row > .btn-custom #total{
        font-size:15px!important;
    }
}

/* =========================================================
   V5 - SOMENTE CORREÇÃO DO BOTÃO "QUERO PARTICIPAR"
   O <span id="add_to_cart"> vazio estava ocupando a 2ª coluna
   do grid quando o visitante não estava logado.
   ========================================================= */

.app-vendas-express .rbo-buy-row > span#add_to_cart{
    display:none!important;
}

/* força exatamente os dois elementos visíveis na mesma linha */
.app-vendas-express .rbo-buy-row{
    display:grid!important;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1.35fr)!important;
    grid-template-rows:62px!important;
    column-gap:6px!important;
    row-gap:0!important;
    align-items:stretch!important;
}

.app-vendas-express .rbo-buy-row > .vendasExpressNums{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    margin:0!important;
}

.app-vendas-express .rbo-buy-row > button.btn-custom{
    grid-column:2!important;
    grid-row:1!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    height:62px!important;
    min-height:62px!important;
}

/* evita qualquer regra bootstrap/tema empurrar o botão */
.app-vendas-express .rbo-buy-row > button.btn-custom.w-100,
.app-vendas-express .rbo-buy-row > button.btn-custom.mb-2{
    width:100%!important;
    margin-bottom:0!important;
}

@media(max-width:600px){
    .app-vendas-express .rbo-buy-row{
        grid-template-columns:minmax(0, 1fr) minmax(0, 1.35fr)!important;
        grid-template-rows:62px!important;
    }
}

@media(max-width:390px){
    .app-vendas-express .rbo-buy-row{
        grid-template-columns:minmax(0, .95fr) minmax(0, 1.35fr)!important;
        grid-template-rows:60px!important;
        column-gap:5px!important;
    }

    .app-vendas-express .rbo-buy-row > button.btn-custom,
    .app-vendas-express .rbo-buy-row > .vendasExpressNums,
    .app-vendas-express .rbo-buy-row > .vendasExpressNums .card-body{
        height:60px!important;
        min-height:60px!important;
    }
}



/* =========================================================
   V6 - COMPACTAÇÃO/ALINHAMENTO FINAL
   Referência: primeira imagem enviada em 28/08.
   Objetivo: aproximar blocos sem alterar lógica nem conteúdo.
   ========================================================= */

/* fluxo principal mais "fechado" */
.container.app-main{
    padding-bottom:18px!important;
}

/* elimina sobras de margin do Bootstrap nos cards principais */
.container.app-main > .app-card.card,
.container.app-main .app-vendas-express .app-card.card{
    margin-top:0!important;
}

/* faixa Meus títulos encosta no hero e no preço */
.rbo-my-titles-strip{
    margin-bottom:0!important;
}

/* "Por apenas" mais próximo da faixa de títulos e das ações */
.container.app-main .item.d-flex.align-items-center.font-xs{
    margin:0!important;
    min-height:38px!important;
}

/* Menor/Maior + Prêmios: quase sem espaço entre eles */
.rbo-ref-action-bars{
    gap:2px!important;
    margin:2px 0 3px!important;
}
.rbo-ref-action{
    margin:0!important;
}

/* aviso branco fica logo abaixo das ações */
.rbo-ref-chances{
    margin:3px 0 4px!important;
}
.rbo-ref-chances .card-body{
    padding:9px 10px!important;
}

/* bloco dos combos sem margem extra externa */
.app-vendas-express{
    margin-top:0!important;
    margin-bottom:0!important;
}
.vendasExpressNumsSelect.v2{
    gap:3px!important;
    margin:0!important;
}

/* linhas dos combos próximas, mantendo o tamanho atual */
.vendasExpressNumsSelect.v2 .item{
    margin:0!important;
}

/* quantidade + comprar encosta nos combos */
.app-vendas-express .rbo-buy-row{
    margin-top:4px!important;
    margin-bottom:0!important;
    column-gap:5px!important;
}

/* remove mb-2 original do seletor, que criava espaço desnecessário */
.app-vendas-express .rbo-buy-row > .vendasExpressNums{
    margin-bottom:0!important;
}
.app-vendas-express .rbo-buy-row > button.btn-custom{
    margin-bottom:0!important;
}

/* descrição/regulamento fica logo depois do botão de compra */
.app-descricao-completa{
    margin-top:5px!important;
    margin-bottom:0!important;
}
.app-descricao-completa .app-card{
    margin-top:0!important;
    margin-bottom:0!important;
}

/* título da roleta mais próximo da descrição */
.app-title{
    margin-top:6px!important;
    margin-bottom:4px!important;
}
.app-title h1{
    margin-top:0!important;
    margin-bottom:0!important;
}

/* cards de roleta quase colados, como na referência */
button.pulsando.btn.w-100.text-center.mb-1.text-white,
button.btn.w-100.text-center.mb-1.text-white{
    margin-top:0!important;
    margin-bottom:4px!important;
}

/* remove margens verticais internas que podem vir do Bootstrap */
button.pulsando.btn.w-100.text-center.mb-1.text-white .row,
button.btn.w-100.text-center.mb-1.text-white .row{
    margin-top:0!important;
    margin-bottom:0!important;
}

/* compartilhamento logo após a última roleta */
.sorteio_sorteioShare__247_t,
.sorteio_sorteioShare__247_t.rbo-share-at-bottom{
    margin:7px auto 4px!important;
}

/* mobile: proporção mais próxima da primeira imagem */
@media(max-width:600px){
    .container.app-main{
        padding-left:14px!important;
        padding-right:14px!important;
        padding-bottom:16px!important;
    }

    /* hero e faixa continuam full-bleed apesar do padding menor */
    .campanha-header{
        width:calc(100% + 28px)!important;
        margin-left:-14px!important;
        margin-right:-14px!important;
    }

    .rbo-my-titles-strip{
        width:calc(100% + 28px)!important;
        max-width:none!important;
        margin-left:-14px!important;
        margin-right:-14px!important;
    }

    .container.app-main .item.d-flex.align-items-center.font-xs{
        min-height:36px!important;
    }

    .rbo-ref-action-bars{
        margin:2px 0 3px!important;
    }

    .rbo-ref-chances{
        margin:3px 0 4px!important;
    }

    .app-vendas-express .rbo-buy-row{
        margin-top:4px!important;
        column-gap:4px!important;
    }

    .app-descricao-completa{
        margin-top:4px!important;
    }

    .app-title{
        margin-top:5px!important;
        margin-bottom:3px!important;
    }

    button.pulsando.btn.w-100.text-center.mb-1.text-white,
    button.btn.w-100.text-center.mb-1.text-white{
        margin-bottom:3px!important;
    }

    .sorteio_sorteioShare__247_t,
    .sorteio_sorteioShare__247_t.rbo-share-at-bottom{
        margin:6px auto 3px!important;
    }
}



/* =========================================================
   V7 - ROLETA MAIS JUNTA + QUANTIDADE SEM CORTE
   - Reduz espaços externos entre os cards de roleta
   - Aproxima título/roletas/redes sociais
   - Impede números grandes de serem cortados no seletor
   ========================================================= */

/* ---------- ROLETA: elimina margens Bootstrap dos wrappers ---------- */
.rbo-roletas-list{
    margin-top:0!important;
    margin-bottom:4px!important;
    padding:0!important;
}

.rbo-roleta-item{
    margin:0 0 3px!important;
    padding:0!important;
}

.rbo-roleta-item:last-child{
    margin-bottom:0!important;
}

.rbo-roleta-item > button.pulsando.btn,
.rbo-roleta-item > button.btn{
    width:100%!important;
    margin:0!important;
}

/* aproxima o título da primeira roleta */
.rbo-roletas-title{
    margin-top:4px!important;
    margin-bottom:3px!important;
    padding:0!important;
}

.rbo-roletas-title h1{
    margin:0!important;
}

/* fallback caso algum bloco antigo ainda venha sem as classes novas */
.app-title.mb-2:has(+ .rbo-roletas-list){
    margin-bottom:3px!important;
}

/* ---------- QUANTIDADE: nunca corta número grande ---------- */
.app-vendas-express .rbo-buy-row > .vendasExpressNums{
    min-width:0!important;
    overflow:hidden!important;
}

.app-vendas-express .rbo-buy-row > .vendasExpressNums .card-body{
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr) 34px!important;
    align-items:center!important;
    justify-content:stretch!important;
    column-gap:4px!important;
    width:100%!important;
    min-width:0!important;
    overflow:hidden!important;
    padding:6px 7px!important;
}

.app-vendas-express .rbo-buy-row > .vendasExpressNums .left,
.app-vendas-express .rbo-buy-row > .vendasExpressNums .right{
    width:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
}

.app-vendas-express .rbo-buy-row > .vendasExpressNums .center{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
}

.app-vendas-express .rbo-buy-row > .vendasExpressNums .qty{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:44px!important;
    margin:0!important;
    padding:0 2px!important;
    border:0!important;
    box-shadow:none!important;
    background:#fff!important;
    color:#111!important;
    text-align:center!important;
    line-height:44px!important;
    font-size:18px!important;
    font-weight:500!important;
    letter-spacing:-.25px!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:nowrap!important;
    -webkit-text-fill-color:#111!important;
}

/* ícones não invadem o campo central */
.app-vendas-express .rbo-buy-row > .vendasExpressNums .numeroChange,
.app-vendas-express .rbo-buy-row > .vendasExpressNums .numeroChange svg{
    flex:0 0 auto!important;
}

/* reforça a compactação do trecho inferior */
.app-descricao-completa{
    margin-top:3px!important;
}
.app-title{
    margin-top:4px!important;
    margin-bottom:3px!important;
}
.sorteio_sorteioShare__247_t,
.sorteio_sorteioShare__247_t.rbo-share-at-bottom{
    margin-top:5px!important;
}

/* mobile */
@media(max-width:600px){
    .rbo-roletas-list{
        margin-bottom:3px!important;
    }

    .rbo-roleta-item{
        margin-bottom:2px!important;
    }

    .rbo-roletas-title{
        margin-top:3px!important;
        margin-bottom:2px!important;
    }

    .app-vendas-express .rbo-buy-row > .vendasExpressNums .card-body{
        grid-template-columns:32px minmax(0,1fr) 32px!important;
        column-gap:3px!important;
        padding-left:6px!important;
        padding-right:6px!important;
    }

    .app-vendas-express .rbo-buy-row > .vendasExpressNums .left,
    .app-vendas-express .rbo-buy-row > .vendasExpressNums .right{
        width:32px!important;
        min-width:32px!important;
        max-width:32px!important;
    }

    .app-vendas-express .rbo-buy-row > .vendasExpressNums .qty{
        font-size:17px!important;
    }
}

/* iPhone estreito: reduz um pouco para 6+ dígitos continuarem visíveis */
@media(max-width:390px){
    .app-vendas-express .rbo-buy-row > .vendasExpressNums .card-body{
        grid-template-columns:29px minmax(0,1fr) 29px!important;
        column-gap:2px!important;
        padding-left:5px!important;
        padding-right:5px!important;
    }

    .app-vendas-express .rbo-buy-row > .vendasExpressNums .left,
    .app-vendas-express .rbo-buy-row > .vendasExpressNums .right{
        width:29px!important;
        min-width:29px!important;
        max-width:29px!important;
    }

    .app-vendas-express .rbo-buy-row > .vendasExpressNums .numeroChange svg{
        width:23px!important;
        height:23px!important;
    }

    .app-vendas-express .rbo-buy-row > .vendasExpressNums .qty{
        font-size:15px!important;
        letter-spacing:-.5px!important;
    }
}



/* =========================================================
   V8 - BORDA INTERNA NO VALOR DA QUANTIDADE
   Referência: arco/borda arredondada apenas ao redor do número
   entre os botões - e +.
   ========================================================= */

.app-vendas-express .rbo-buy-row > .vendasExpressNums .center{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0 3px!important;
    overflow:visible!important;
}

.app-vendas-express .rbo-buy-row > .vendasExpressNums .qty{
    width:100%!important;
    max-width:120px!important;
    min-width:0!important;

    height:46px!important;
    min-height:46px!important;

    margin:0 auto!important;
    padding:0 8px!important;

    border:1.5px solid #d5dbe4!important;
    border-radius:8px!important;

    background:#fff!important;
    color:#111!important;

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.9),
        0 1px 1px rgba(0,0,0,.02)!important;

    text-align:center!important;
    line-height:44px!important;
    font-size:18px!important;
    font-weight:500!important;
    letter-spacing:-.2px!important;

    outline:none!important;
    -webkit-appearance:none!important;
    appearance:none!important;
}

/* mantém a moldura externa branca sem "engolir" a borda do campo */
.app-vendas-express .rbo-buy-row > .vendasExpressNums .card-body{
    background:#fff!important;
}

/* números grandes continuam cabendo dentro do arco */
@media(max-width:600px){
    .app-vendas-express .rbo-buy-row > .vendasExpressNums .qty{
        max-width:118px!important;
        height:44px!important;
        min-height:44px!important;
        line-height:42px!important;
        font-size:17px!important;
        padding-left:5px!important;
        padding-right:5px!important;
    }
}

@media(max-width:390px){
    .app-vendas-express .rbo-buy-row > .vendasExpressNums .qty{
        max-width:104px!important;
        font-size:15px!important;
        letter-spacing:-.45px!important;
        padding-left:3px!important;
        padding-right:3px!important;
    }
}



/* =========================================================
   V9 - CORREÇÃO MAIS POPULAR SEM SOBREPOR +100
   O selo fica no topo do card e o valor recebe espaço próprio.
   ========================================================= */

.vendasExpressNumsSelect.v2 .rbo-most-popular .rbo-most-popular-label{
    top:0!important;
    height:18px!important;
    z-index:10!important;
}

/* reserva espaço real para o selo; assim ele não cobre o +100 */
.vendasExpressNumsSelect.v2 .rbo-most-popular .item-content{
    padding-top:20px!important;
    padding-bottom:4px!important;
}

/* mantém o número logo abaixo do selo, sem encostar */
.vendasExpressNumsSelect.v2 .rbo-most-popular .item-content h3{
    margin-top:0!important;
    margin-bottom:0!important;
    line-height:.95!important;
}

/* compacta levemente preço/texto para continuar cabendo no mesmo card */
.vendasExpressNumsSelect.v2 .rbo-most-popular .item-content .rbo-combo-price{
    margin-top:3px!important;
}

.vendasExpressNumsSelect.v2 .rbo-most-popular .item-content .item-content-txt{
    margin-top:3px!important;
}

@media(max-width:390px){
    .vendasExpressNumsSelect.v2 .rbo-most-popular .item-content{
        padding-top:19px!important;
        padding-bottom:3px!important;
    }
}



/* =========================================================
   V10 - DESCE O +100
   Mantém o selo "Mais popular" no topo e força o valor +100
   a começar abaixo dele, sem sobreposição.
   ========================================================= */

.vendasExpressNumsSelect.v2 .rbo-most-popular .item-content{
    padding-top:22px!important;
}

/* desloca SOMENTE o valor +100 para baixo */
.vendasExpressNumsSelect.v2 .rbo-most-popular .item-content h3{
    position:relative!important;
    top:4px!important;
    margin-top:0!important;
    margin-bottom:4px!important;
    line-height:.95!important;
}

/* mantém preço e selecionar logo abaixo */
.vendasExpressNumsSelect.v2 .rbo-most-popular .item-content .rbo-combo-price{
    margin-top:4px!important;
}

.vendasExpressNumsSelect.v2 .rbo-most-popular .item-content .item-content-txt{
    margin-top:3px!important;
}

@media(max-width:390px){
    .vendasExpressNumsSelect.v2 .rbo-most-popular .item-content{
        padding-top:21px!important;
    }

    .vendasExpressNumsSelect.v2 .rbo-most-popular .item-content h3{
        top:4px!important;
        margin-bottom:3px!important;
    }
}



/* =========================================================
   V11 - CENTRALIZA +100 E AFina SELO
   - Selo menor e mais fino
   - +100 fica abaixo do selo, mas centralizado no card
   ========================================================= */

.vendasExpressNumsSelect.v2 .rbo-most-popular .rbo-most-popular-label{
    top:0!important;
    width:80px!important;
    height:15px!important;
    padding:0 4px!important;
    border-radius:0 0 7px 7px!important;
    font-size:7.5px!important;
    line-height:15px!important;
}

/* reduz o espaço extra que estava jogando o conteúdo muito para baixo */
.vendasExpressNumsSelect.v2 .rbo-most-popular .item-content{
    padding-top:16px!important;
    padding-bottom:4px!important;
}

/* +100 logo abaixo do selo, porém centralizado */
.vendasExpressNumsSelect.v2 .rbo-most-popular .item-content h3{
    position:relative!important;
    top:1px!important;
    margin-top:0!important;
    margin-bottom:2px!important;
    line-height:1!important;
}

/* mantém o restante alinhado */
.vendasExpressNumsSelect.v2 .rbo-most-popular .item-content .rbo-combo-price{
    margin-top:3px!important;
}

.vendasExpressNumsSelect.v2 .rbo-most-popular .item-content .item-content-txt{
    margin-top:3px!important;
}

@media(max-width:390px){
    .vendasExpressNumsSelect.v2 .rbo-most-popular .rbo-most-popular-label{
        width:76px!important;
        height:14px!important;
        font-size:7px!important;
        line-height:14px!important;
    }

    .vendasExpressNumsSelect.v2 .rbo-most-popular .item-content{
        padding-top:15px!important;
    }

    .vendasExpressNumsSelect.v2 .rbo-most-popular .item-content h3{
        top:1px!important;
    }
}

