/* Ganhadores - Vem de Cap */
body.page-ganhadores {
  --corPrimaria: #008dca;
  --corSecundaria: #f4b647;
  --corPaletaLigthDark: #000000;
  --corContraContraste: #ffdb4d;
  --tamDivLargura: 345px;
  --tamBorda: 2px;
  --tamBordaDiv: 5px;
  --alturaRatiu: 9;
  --larguraRatiu: 16;
  --larguraRatiuEscolha: 16;
  --alturaRatiuEscolha: 10;
  background-color: #dfdfdf;
  background-image: none;
  color: #000;
}

body.page-ganhadores main { color: #000; }

.winners-page {
  width: 100%;
  background: linear-gradient(0deg, #dfdfdf 0%, #ffffff 100%);
}

.winners-page-inner {
  width: min(100%, 1200px);
  margin: 0 auto;
  padding: 60px 60px 40px;
  position: relative;
}

.winners-page-wave {
  width: 100%;
  padding: 48.5px 60px;
  background-color: #dfdfdf;
  background-image: url('/assets/borda-azul.png');
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

#ganhadores header { position: relative; }

#txtHeader h1 {
  color: var(--corPrimaria) !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 900 !important;
  text-align: center !important;
  font-size: clamp(2rem, 5vw, 3rem) !important;
}

#txtHeader p {
  color: #000 !important;
  text-align: center !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
  margin-top: 0.5rem !important;
}

.edicoes {
  background: radial-gradient(circle, #003bc5 0%, #000a7a 100%) !important;
  border-radius: 38px !important;
  cursor: pointer;
}

.txtEdicao .edicao {
  color: #dfdfdf !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 800 !important;
}

.txtEdicao .desc {
  color: #fff !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 900 !important;
}

.txtEdicao .dataEdicao { color: #fff !important; }

#ganhadores main #etapaSelecionada .tituloEdicaoEscolhida {
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 900 !important;
}

#etapaSelecionada #containerGanhadores .titulo-premio {
  color: var(--corContraContraste) !important;
  font-family: 'Montserrat', Arial, sans-serif !important;
  font-weight: 900 !important;
  text-align: start !important;
}

#bilhete.principal .card h4 #descPremio { color: #ba6700 !important; }

#etapaSelecionada[hidden] { display: none !important; }

@media (max-width: 768px) {
  .winners-page-inner { padding: 40px 1.25rem 30px; }
  .winners-page-wave { padding: 32px 1.25rem; }
  #ganhadores header #img1, #ganhadores header #img2 { height: 80px; width: auto; }
}


#ganhadores h1, #ganhadores h2, #ganhadores h4, #ganhadores p, #ganhadores span {
  margin: 0px !important;
  font-family: "Inter" !important;
  text-align: start;
  color: var(--corContraContraste) !important;
}

#ganhadores {
  min-height: 200px;
  width: 100%;
  height: auto;
}

#txtHeader h1, #txtHeader p {
  color: var(--corPrimaria) !important;
}

#containerGanhadores {
  width: 95%;
  gap: 20px;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

#etapaSelecionada #containerGanhadores .titulo-premio {
  color: var(--corContraContraste) !important;
  font-size: 34px !important;
  width: 100%;
  text-align: start;
}

#ganhadores header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150px;
  max-height: 300px;
  background: transparent;
  width: 100%;
}

#ganhadores header #img1 {
  position: absolute;
  left: 0px;
  top: 0;
  transform: scale(-1);
  aspect-ratio: 3/5;
}

#ganhadores header #img2 {
  position: absolute;
  right: 0px;
  top: 0;
  aspect-ratio: 3/5;
}

#ganhadores img {
  aspect-ratio: var(--larguraRatiuEscolha)/var(--alturaRatiuEscolha);
}

#ganhadores main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  align-items: center;
  width: 100%;
}

#selecaoEtapa {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

#etapaSelecionada {
  width: 100%;
}
#etapaSelecionada img {
  aspect-ratio: var(--larguraRatiu)/var(--alturaRatiu);
}

#ganhadores main #etapaSelecionada .tituloEdicaoEscolhida,
#ganhadores main #etapaSelecionada .dataEdicaoEscolhida {
  color: var(--corPaletaLigthDark) !important;
  text-align: center;
  width: 100%;
}

#ganhadores main #selecionarOutraEtapa {
  font-weight: 700;
  font-size: 20px;
  color: var(--corSecundaria) !important;
  text-decoration: underline;
  cursor: pointer;
  text-align: center;
}

.edicoes {
  background: var(--corPaletaLigthDark);
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  border: 2px solid var(--corPrimaria);
}

.edicoes img {
  width: 30%;
}

.txtEdicao {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.txtEdicao h1,
.txtEdicao h2 {
  width: 98%;
  font-weight: 700;
  font-size: 24px;
  text-align: start;
  color: var(--corContraContraste) !important;
}

.txtEdicao .dataEdicao {
  width: 98%;
  font-weight: 400;
  font-size: 12px;
  color: black !important;
  text-align: start;
  color: var(--corContraContraste) !important;
}

.txtEdicao button {
  border: 1px solid var(--corPrimaria);
  background: transparent;
  width: 98%;
  height: 42px;
  border-radius: 12px;
  cursor: pointer;
}

.txtEdicao button span {
  color: var(--corPrimaria);
  font-weight: 700;
}

#etapaSelecionada {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#etapaSelecionada img {
  width: 95%;
  border-radius: 10px;
}

#etapaSelecionada h1 {
  font-weight: 700;
  font-size: 24px;
}

#etapaSelecionada p {
  font-weight: 400;
  font-size: 18px;
}

.buscar {
  display: flex;
  padding-inline: 5px;
  font-size: 16px;
  background-color: transparent;
  border: 2px solid var(--corPrimaria);
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  width: 95%;
}

#buscarNumBilhete {
  background: transparent;
  border: none;
  outline: none;
  width: 97%;
}

#limparFiltro {
  background: transparent;
  border-radius: 10px;
  color: var(--corPrimaria);
  width: 36px;
  height: 36px;
  border: none;
  cursor: pointer;
}

#buscarNumBilhete:focus {
  outline: none;
  box-shadow: none;
}

.premios {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  width: 100%;
}

#numG {
  display: flex;
  gap: 10px;
}

.msgErroBusca {
  display: none;
}

.etiqueta {
  background-color: var(--corPrimaria);
  color: var(--corContraContraste);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  position: relative;
  height: 22px;
  padding-inline: 10px;
  width: 113px;
}

.etiqueta::before,
.etiqueta::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: var(--corContraContraste);
}

.etiqueta::before {
  left: 0;
  clip-path: ellipse(5px 50% at 0% 50%);
}

.etiqueta::after {
  right: 0;
  clip-path: ellipse(5px 50% at 100% 50%);
}

/*estilização padrao entre os bilhetes principal, cota firos*/
#bilhete #infoBilhete {
  background: transparent !important;
  max-width: 95%;
  margin-top: 20px;
}

#infoGanhador {
  background: transparent !important;
  max-width: 95%;
  margin-bottom: 20px;
}

#bilhete #divisoria {
  position: relative;
  height: 10px;
  width: 100%;
}

/* BILHETE NORMAL */
#bilhete {
  position: relative;
  text-align: center;
  background: var(--corContraContraste);
  position: relative;
  width: var(--tamDivLargura);
  text-align: center;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  -webkit-mask: radial-gradient(circle 35px at left center, transparent 99%, black 100%), radial-gradient(circle 35px at right center, transparent 99%, black 100%), linear-gradient(black, black);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  min-width: 355px;
  border: var(--tamBorda) solid var(--corPrimaria);
}
#bilhete h4 {
  color: var(--corPrimaria) !important;
  text-align: center;
}
#bilhete h4 #descPremio {
  color: var(--corPaletaLigthDark) !important;
}
#bilhete span, #bilhete p {
  color: var(--corPaletaLigthDark) !important;
}

#bilhete::before,
#bilhete::after {
  content: "";
  position: absolute;
  width: 70px; /* dobro do raio do recorte */
  height: 70px;
  border-radius: 50%;
  background: transparent;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  box-sizing: border-box;
  z-index: 1;
}

/* Esquerda: borda direita e topo/inferior para formar meia-lua externa */
#bilhete::before {
  left: -35px; /* metade do tamanho */
  border-style: solid;
  border-width: var(--tamBorda);
  border-color: transparent var(--corPrimaria) var(--corPrimaria) transparent;
}

/* Direita: borda esquerda e topo/inferior */
#bilhete::after {
  right: -35px;
  border-style: solid;
  border-width: var(--tamBorda);
  border-color: var(--corPrimaria) transparent transparent var(--corPrimaria);
}

#bilhete #infoBilhete {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: none;
}

#bilhete #infoGanhador {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.linkReacao {
  border-top: 1px solid var(--corPrimaria);
  border-radius: 10px;
  width: 100%;
  height: 31px;
  display: flex;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
}
.linkReacao button {
  background: none;
  width: 99%;
  height: 99%;
}

hr {
  border: none;
  background: repeating-linear-gradient(to right, var(--corPrimaria) 0 10px, transparent 10px 20px);
  width: 100%;
  height: 1.5px;
}

#bilhete.principal hr {
  border: none;
  background: repeating-linear-gradient(to right, var(--corContraContraste) 0 10px, transparent 10px 20px);
  width: 100%;
  height: 1.5px;
}

/*-------------------------------------------------------*/
/* BILHETE PRINCIPAL COM FUNDO AMARELO */
#bilhete.principal {
  background: var(--corPrimaria);
}

#bilhete.principal #infoBilhete, #bilhete.principal #infoGanhador {
  color: var(--corContraContraste);
}
#bilhete.principal #infoBilhete .linkReacao, #bilhete.principal #infoGanhador .linkReacao {
  padding-block: 10px;
  border-top: 1px solid var(--corPrimaria);
  border-radius: 10px;
  width: 100%;
  height: 31px;
  display: flex;
  justify-content: center;
  text-decoration: none;
  margin-top: 10px;
}

#bilhete.principal .etiqueta {
  background-color: var(--corContraContraste);
  color: var(--corPrimaria);
}

#bilhete.principal .etiqueta::before,
#bilhete.principal .etiqueta::after {
  background: var(--corPrimaria);
}

#bilhete.principal .card h4 {
  color: var(--corPaletaLigthDark) !important;
  text-align: center;
}
#bilhete.principal .card h4 #descPremio {
  color: var(--corContraContraste) !important;
}
#bilhete.principal .card span, #bilhete.principal .card p {
  color: var(--corPaletaLigthDark) !important;
}

#bilhete.principal #divisorBordasConfig {
  border: none;
  height: var(--tamBordaDiv);
  margin: 0 auto;
  background-image: radial-gradient(circle, transparent 60%, var(--corSecundaria) 70%, transparent 1px, transparent), repeating-linear-gradient(90deg, var(--corSecundaria) 0, transparent 3%), linear-gradient(transparent, transparent), radial-gradient(circle, transparent 60%, var(--corSecundaria) 70%, transparent 1px, transparent);
  background-size: var(--tamBordaDiv) var(--tamBordaDiv), calc(100% - var(--tamBordaDiv)) 1px, calc(100% - var(--tamBordaDiv)) 100%, var(--tamBordaDiv) var(--tamBordaDiv);
  background-position: calc(-1 * var(--tamBordaDiv) / 2) 0, calc(var(--tamBordaDiv) / 2) 50%, calc(var(--tamBordaDiv) / 2) 0, calc(100% + var(--tamBordaDiv) / 2) 0;
  background-repeat: no-repeat;
}

/* PAGINAÇÃO */
#paginacao {
  background-color: transparent;
  width: 100%;
  display: none;
  margin-top: 10px;
  align-items: center;
  justify-content: center;
}

#paginacao ul {
  list-style: none;
  display: flex;
  gap: 18px;
  justify-content: center;
}

#paginacao li {
  padding: 5px;
  border: 2px solid var(--corPaletaLigthDark);
  border-radius: 100%;
  width: 42px;
  height: 42px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: var(--corPaletaLigthDark);
}

#paginacao .ativo {
  border: 2px solid var(--corPrimaria);
  color: var(--corPrimaria);
}

#etapaSelecionada #containerGanhadores #ganhadorPrincipal,
#etapaSelecionada #containerGanhadores #ganhadorGiros {
  display: none;
}

#etapaSelecionada .buscar input[type=number]::-webkit-inner-spin-button {
  appearance: none;
}

/*apenas para forcar retirada do site*/
#bilhete .card {
  border: none !important;
}

/*seção de giros*/
#containerGanhadores .etapaGiros {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
#containerGanhadores .etapaGiros .datas {
  display: flex;
  justify-content: space-around;
  width: 100%;
}
#containerGanhadores .etapaGiros .datas .cadaData {
  width: 48%;
  border-radius: 10px;
  background: var(--corSecundaria);
  display: flex;
  flex-direction: column;
  align-items: center;
}
#containerGanhadores .etapaGiros .datas .cadaData p, #containerGanhadores .etapaGiros .datas .cadaData strong {
  color: white;
}

#containerGanhadores #ganhadorGiros #bilhete.Giros #infoBilhete .tituloPremioPrincipal #descPremio {
  color: var(--corSecundaria) !important;
}

#bilhete.Giros .etiqueta {
  background-color: var(--corSecundaria);
  color: var(--corPaletaLigthDark);
}

#bilhete.Giros .etiqueta::before,
#bilhete.Giros .etiqueta::after {
  background: var(--corContraContraste);
}

#resultBusca {
  display: none;
}

#inserindoRodaPe {
  margin: 0;
  padding: 0;
}

#txtRodaPeError {
  color: rgb(242, 72, 72);
  font-weight: 500;
  font-size: 16px;
}

.personalizeAndPainel {
  display: flex;
  flex-direction: column;
  gap: 1px;
}