body {
    background-color: var(--background-color);
    font-family: 'Poppins', sans-serif;
}

.material-symbols-outlined {
    font-size: 24px; /* Ajusta o tamanho do ícone, se necessário */
    vertical-align: middle; /* Alinha verticalmente o ícone com o texto */
}

.margin-edit {
    margin-bottom: 1.5rem;
}

/* CARD 1 */
.image-container {
    position: relative;
    display: flex;
    align-items: flex-end; /* Isso empurrará o texto para o fundo do contêiner */
    justify-content: flex-start; /* Isso manterá o texto à esquerda */
}

.overlay-text {
    position: absolute; 
    z-index: 1;
    background-color: #FFF;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
    bottom: -1%; /* Posicionado a 10% do fundo do container da imagem */
    left: 3%; /* Posicionado a 3% da esquerda do container da imagem */    
}

.text-cota-gray {
    color: #808080;
}

.text-cota-dark {
    color: #373435;
}


.card-custom {
    border: none;
    overflow: hidden;
    border-radius: 10px;
    position: relative;
}

.card-custom img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.card-body-custom {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    padding: 20px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.flex-row-custom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 10px;
}

.flex-row-custom .text-custom {
    margin: 0;
}

.flex-row-custom .text-custom small {
    background-color: #FFF;
    padding: 5px 5px;
    border-radius: 5px;
    color: #000;
    font-weight: 500;
}

.title-custom {
    font-size: 16px;
    font-weight: bold;
    align-self: flex-start;
    margin-bottom: 0.1rem;
}

p.text-custom {
    margin-bottom: 0.5rem;
}

.text-custom {
    font-size: 12px;
    margin-bottom: 0.17rem;
}

.text-custom small {
    background-color: #FFF;
    padding: 3px 10px;
    border-radius: 10px;
    color: #000;
    font-size: 11px;
}

.btn-custom {
    background-color: #FFF;
    color: #808080;
    border: none;
    border-radius: 10px;
    padding: 8px 8px;
    font-weight: bold;
    transition: 0.3s;
    font-size: 14px;
    text-decoration: none;
}

.btn-custom:hover {
    background-color: var(--primary-color);
}

/* SHARE CONTAINER */
.share-container-desc {
text-align: center;
margin-bottom: 0.5rem;
margin: 1rem 0 0.5rem 0;
}

.share-container-desc p {
color: var(--text-color);
font-size: 0.9rem; /* Diminui o tamanho da fonte */
margin-bottom: 0.5rem; /* Diminui a margem inferior */
}

.links-media-desc {
display: flex;
justify-content: center;
align-items: center;
}

.links-media-desc a {
text-decoration: none;
}

.icon-circle-desc {
background-color: #ffffff; 
border-radius: 50%; 
padding: 6px; /* Diminui o padding */
font-size: 18px; /* Diminui o tamanho da fonte */
color: #000000;
transition: 0.3s; 
display: inline-block; 
width: 32px; /* Diminui a largura */
height: 32px; /* Diminui a altura */
text-align: center; 
line-height: 18px; /* Ajusta a altura da linha */
margin: 0 4px; /* Diminui a margem lateral */
}

.icon-circle-desc:hover {
background-color: #e0e0e0;  
color: #000000;
}

i.fab {
color: black; 
font-size: 18px; /* Diminui o tamanho da fonte dos ícones */
}

.icon-container i.fab {
    color: #fff;
}

/* Super Combo */
.super-combo-section {
background-color: var(--super-combo-section);
padding: 40px 0;
text-align: center;
border-radius: 10px;
border: 1px solid var(--cotas-selection-border);
}

.super-combo-section h2 {
font-size: 36px;
color: var(--text-color);
margin-bottom: 15px;
}

.super-combo-section p {
font-size: 18px;
color: var(--text-color);
margin-bottom: 15px;
}

.combo-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 0 0.5rem;
}

.combo-buttons button {
background: none;
color: var(--text-color);
border: 1px solid var(--secondary-color);
border-radius: 5px;
padding: 5px 20px;
font-size: 12px;
cursor: pointer;
transition: background-color 0.3s;
margin: 5px; /* Espaçamento entre os botões */
flex: 0 0 calc(50% - 10px); /* Subtraia duas vezes a margem horizontal de um botão */
text-align: center; /* Para o texto do botão ficar centralizado */
}

.combo-buttons button:hover {
background-color: var(--primary-color);
color: #2B2B2B;
}

/* Media query para adaptar a fonte em celulares */
@media (max-width: 768px) {
.share-container-desc p {
    font-size: 0.8rem;
}

.super-combo-section {
    padding: 15px 0; /* redução do preenchimento para celulares */
}

.combo-buttons button {
    font-size: 12px; /* diminuição do tamanho da fonte para celulares */
    padding: 5px;
}

.super-combo-section h2 {
    font-size: 1rem;
    margin-bottom: 0.1rem;
}

.super-combo-section p {
    font-size: 11px; /* opcional: adaptação para o parágrafo */
    margin-bottom: 0.5rem;
}

.overlay-text {
    position: absolute; 
    z-index: 1;
    background-color: #FFF;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
    bottom: -2%; /* Ajuste conforme necessário */
    left: 3%; /* Ajuste conforme necessário */
}
}

/* Carousel */
.carousel-control-prev-icon,
.carousel-control-next-icon {
background-size: 120%; /* Aumenta o tamanho do ícone */
filter: drop-shadow(2px 2px 2px black); /* Aumenta a "espessura" adicionando uma sombra */
}

/* Estilos adicionais para centralizar e aumentar a área de clique, se necessário */
.carousel-control-prev, 
.carousel-control-next {
width: 10%; /* Aumenta a largura da área clicável */
}

.carousel-indicators {
bottom: 10px; /* Aumente este valor para subir os indicadores */
}

.carousel-indicators [data-bs-target] {
width: 10px;
height: 10px;
border-radius: 50%;
}

.carousel-indicators .active {
background-color: #000; /* Cor preta para o indicador ativo */
}

@media (max-width: 768px) {
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-size: 80%; /* Ainda menor em dispositivos móveis */
    filter: drop-shadow(1px 1px 1px black); /* Sombras mais leves para menos espessura */
}

.carousel-control-prev, 
.carousel-control-next {
    width: 15%; /* Aumenta ligeiramente a área clicável para mais facilidade no toque */
}
}


/* Cotas premiadas */
.cota-premiada-section,
.cota-master-section,
.cota-diamante-section {
background-color: var(--cotas-selection);
padding: 20px 0;
text-align: center;
border-radius: 10px;
border: 1px solid var(--cotas-selection-border);
margin-bottom: 20px;
}

.cota-premiada-section h2,
.cota-master-section h2,
.cota-diamante-section h2 {
font-size: 1.2rem;
color: var(--text-color);
margin-bottom: 10px;
}

.cota-premiada-section .subtitle-cotas {
margin: 0.5rem 0;
}

.cota-premiada-section p,
.cota-master-section p,
.cota-diamante-section p {
font-size: 0.9rem;
color: var(--text-color);
margin-bottom: 10px;
}

.cotas-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 5px;
}

.cota-section-header {
    display: flex;
    flex-direction: column;
    position: relative;
    top: -70px;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: -50px;
}

.cota-section-header img{
    width: 300px;
    height: 135px;
    border-radius: 50%;
    position: relative;   /* permite deslocamento */
    top: -15px;           /* puxa 20 px para cima (ajuste à vontade) */
}

.cota-section-header h2 {
display: flex;
align-items: center;
justify-content: center;
position: relative;
top: -40px;
font-size: 1.2rem;
color: var(--text-color);
margin: 0;
text-align: center;
}

.cota-section-header p {
display: flex;
align-items: center;
justify-content: center;
position: relative;
top: -40px;
font-size: 0.9rem;
color: var(--text-color);
margin: 0;
text-align: left;
}

.cota-card {
border-radius: 10px;
padding: 0 5px;
width: calc(50% - 20px);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
margin-bottom: 0;
}

.cota-value {
font-size: 0.7rem;
color: var(--cota-card-text);
padding: 5px;
border-radius: 3px 3px 0 0;
width: 100%;
text-align: left;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
}

.cota-master .cota-value, .cota-diamante .cota-value, .cota-master .cota-percentual-liberacao, .cota-diamante .cota-percentual-liberacao, .cota-master .cota-percentual-liberacao .material-icons, .cota-diamante .cota-percentual-liberacao .material-icons {
color: var(--cota-card-text-2);
}

.cota-message {
display: flex;
align-items: center;
font-size: 0.6rem;
color: #fff;
}

.cota-message .material-symbols-outlined {
font-size: 10px;
margin-right: 2px;
}

.cota-info {
display: flex;
width: 100%;
height: 25px;
background-color: #fff;
padding: 0 0 0 5px;
align-items: center;
justify-content: space-between;
border-radius: 6px;
margin-bottom: 10px;
}

.cota-number {
font-weight: bold;
font-size: 0.8rem;
display: flex;
align-items: center;
color: #000;
}

.cota-number .material-symbols-outlined {
color: #000;
margin-right: 5px;
font-size: 16px;
}

.cota-status-container {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(to right, #32cd33, #33ee11);
border-radius: 5px;
padding: 0 10px;
height: 100%;
flex-shrink: 0;
}

.cota-status-content {
display: flex;
align-items: center;
height: 100%;
}

.cota-status-dot {
width: 6px;
height: 6px;
background-color: white;
border-radius: 50%;
margin-right: 5px;
}

.cota-status {
color: #fff;
font-size: 0.7rem;
font-weight: bold;
}

.cota-premiada {
background-color: var(--cota-card-background);
}

.cota-master {
background: linear-gradient(to right, #E3BB39, #977128);
}

.cota-diamante {
background: linear-gradient(to right, #0069FE, #00A9FD);
}

.ver-mais-button.cota-premiada {
background-color: #5B5A58;
}

.ver-mais-button.cota-master {
background-color: #8B0000;
}

.ver-mais-button.cota-diamante {
background-color: #4682B4;
}

.ver-mais-button {
color: #fff;
border: none;
border-radius: 12px;
padding: 3px 10px;
font-size: 0.9rem;
font-weight: bold;
cursor: pointer;
margin: 0.313rem 0 2rem 0;
transition: background-color 0.3s;
}

.ver-mais-button:hover {
opacity: 0.8;
}

.cota-encontrada {
box-shadow: 0 0 10px rgba(255, 4, 0, 0.5); /* Sombra vermelha */
background: linear-gradient(to right, #FF0036, #FD0C15); /* Fundo degradê */
}

.cota-status-container.encontrada {
background: linear-gradient(to right, #800000, #FF0000); /* Novo gradiente para encontrada */
}

.cota-status.encontrada {
color: #FFF; /* Cor do texto encontrada */
}

.cota-number.encontrada {
font-style: italic;
text-decoration: line-through;
}

#cotasModal .cota-encontrada .cota-value {
color: #FFF; 
}


@media (max-width: 768px) {
.cota-premiada-section h2,
.cota-master-section h2,
.cota-diamante-section h2 {
    font-size: 1rem;
    margin-bottom: 0.1rem;
}

.cota-premiada-section p,
.cota-master-section p,
.cota-diamante-section p {
    font-size: 0.7rem;
}

.cota-card {
    width: calc(50% - 10px);
}

.cota-value {
    font-size: 0.5rem;
}

.cota-message {
    font-size: 0.4rem;
}

.cota-number {
    font-size: 0.6rem;
}

.cota-status {
    font-size: 0.5rem;
}

.ver-mais-button {
    font-size: 0.6rem;
    padding: 3px 10px;
}
}

/*Lista de cotas encontradas*/
.cota-encontrada-section {
background-color: var(--cotas-selection);
padding: 0 0 20px 0;
text-align: left;
border-radius: 10px;
border: 1px solid var(--cotas-selection-border);
margin-bottom: 20px;
}

.cota-encontrada-header {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 5px;
padding: 0 1rem 0 0;
}

.title-bar-cotas {
position: relative;
top: -20px; /* Posiciona a barra de título para cima */
}

.cota-encontrada-header img {
width: 170px;
height: 170px;
border-radius: 50%;
position: relative;
top: -50px; /* Posiciona a imagem para cima */
}

.cota-encontrada-header h2 {
font-size: 1.2rem;
line-height: 1.05;
color: var(--text-color);
margin: 0;
}

.cota-encontrada-header p {
font-size: 0.6rem;
color: var(--text-color);
margin-top: 0.5rem;
}

.cota-encontrada-separator {
position: relative;
top: -50px; /* Posiciona o separador para cima */
border: none;
border-top: 3px solid #595959;
margin: 0 1rem 0rem 1rem;
}

.cota-encontrada-separator-bilhete {
position: relative;
top: -50px; /* Posiciona o separador para cima */
border: none;
border-top: 3px solid #595959;
margin: 0 1rem -2.5rem 1rem;
}

.cotas-encontradas-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 5px;
padding: 0 1rem;
}

.cota-card-encontrada {
position: relative;
top: -30px;
border-radius: 15px;
padding: 0.5rem 0.5rem;
width: 100%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
margin-bottom: 10px;
background-color: var(--cota-card-background);
}

.cota-value-encontrada {
font-size: 0.7rem;
color: var(--cota-card-text);
padding: 5px 5px 5px 10px;
border-radius: 3px 3px 0 0;
width: 100%;
text-align: left;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
}

.cota-info-encontrada {
display: flex;
width: 100%;
height: 40px;
background-color: #fff;
padding: 0 0 0 5px;
align-items: center;
justify-content: space-between;
border-radius: 11px;
margin-bottom: 0;
}

.cota-number-encontrada {
font-weight: bold;
font-size: 1rem;
display: flex;
align-items: center;
color: #000;
}

.cota-number-encontrada .material-symbols-outlined {
color: #000;
margin: 0 5px;
}

.cota-status-container-encontrada {
display: flex;
align-items: center;
justify-content: center;
background-color: #FF0000;
border-radius: 10px;
padding: 0 10px;
height: 100%;
flex-shrink: 0;
}

.cota-status-content-encontrada {
display: flex;
align-items: center;
height: 100%;
}

.cota-status-dot-encontrada {
width: 6px;
height: 6px;
background-color: white;
border-radius: 50%;
margin-right: 5px;
}

.cota-status-encontrada {
color: #fff;
font-size: 0.8rem;
font-weight: bold;
}

.cota-user-encontrada {
display: flex;
align-items: center;
font-size: 0.8rem;
color: var(--cota-card-text);
margin-top: 5px;
padding: 0 0 0 7px;
}

.cota-user-encontrada .material-symbols-outlined {
font-size: 1rem;
margin-right: 5px;
}

.cota-percentual-liberacao {
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
color: var(--cota-card-text);
margin: 0;
}

.cota-percentual-liberacao .material-icons {
color: var(--cota-card-text);
font-size: 0.8rem;
margin-right: 0.1rem;
}

@media (max-width: 768px) {
.cota-percentual-liberacao {
    font-size: 0.5rem;
}

.cota-percentual-liberacao .material-icons {
    font-size: 0.5rem;
}
}

.cota-encontrada .cota-value {
color: #fff;
}

/* Seleção Cotas */
.form-numbers {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

.cotas-selection-section {
background-color: var(--cotas-selection);
padding: 1rem 0.6rem 0.3rem 0.6rem;
text-align: center;
border-radius: 10px;
border: 1px solid var(--cotas-selection-border);
color: #FFF;
}

.cotas-selection-section h2 {
font-size: 20px;
margin-bottom: 10px;
}

.title-escolha {
font-size: 18px;
font-weight: normal;
color: var(--text-color);
}

.number {
color: var(--quick-add-buttons-text);
}

#number-display {
font-size: 1.2rem;
color: var(--selector-button-modified-text);
}

#number-text {
color: #999999;
}

.number-selector-modified {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--number-selector-modified);
border-radius: 8px; /* Ajustando o arredondamento */
padding: 10px 5px;
max-width: 400px;
margin: auto;
width: 100%;
}

.selector-button-modified {
background-color: var(--selector-button-modified);
color: var(--selector-button-modified-text);
border: none;
width: 33px; /* Ajustando o tamanho */
height: 33px;
border-radius: 5px; /* Ajustando o arredondamento */
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
cursor: pointer;
transition: background-color 0.3s;
}

.selector-button-modified:hover {
background-color: #e5e5e5;
}

.number-display-modified {
flex: 1;
background-color: var(--selector-button-modified);
color: var(--selector-button-modified-text);
border: none;
border-radius: 5px; /* Ajustando o arredondamento */
padding: 5px 10px;
text-align: center;
font-size: 16px;
outline: none;
margin-left: 10px;
margin-right: 10px;
}


.quick-add-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colunas iguais */
    gap: 5px; /* Espaçamento entre os botões */
}

.quick-add-buttons button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--quick-add-buttons);
    color: var(--quick-add-buttons-text);
    border: none;
    border-radius: 5px;
    padding: 15px 30px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.quick-add-buttons button:hover {
    background-color: var(--number-selector-hover);
    color: var(--text-color);
}

.quick-add-buttons button .number:hover {
    color: var(--text-color);
}

.quick-add-buttons .popular-button {
color: #FFFFFF;
border: 3px solid var(--secondary-color);
border-radius: 5px;
position: relative;
justify-content: flex-start;
overflow: hidden; /* Para garantir que o conteúdo fique dentro do botão */
}

.quick-add-buttons .popular-button:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(white, white) padding-box,
            linear-gradient(45deg, var(--secondary-color), transparent, var(--secondary-color)) border-box;
background-size: 200% 200%;
z-index: 0;
animation: borderHighlight 3s linear infinite;
filter: blur(0px);
}

@keyframes borderHighlight {
0% {
    background-position: 0% 0%;
}
50% {
    background-position: 100% 100%;
    filter: blur(5px);
}
100% {
    background-position: 200% 200%;
    filter: blur(0px);
}
}

.quick-add-buttons .popular-button:after {
content: "";
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, var(--secondary-color), transparent, var(--secondary-color), transparent);
background-size: 200% 200%;
z-index: 0;
animation: contentHighlight 3s linear infinite;
filter: blur(0px);
}

@keyframes contentHighlight {
0% {
    background-position: 0% 0%;
}
50% {
    background-position: 100% 100%;
    filter: blur(5px);
}
100% {
    background-position: 200% 200%;
    filter: blur(5px);
}
}

.quick-add-buttons .popular-button .popular-badge {
position: absolute;
bottom: 7px;
left: 50%;
transform: translate(-50%, 50%);
background: var(--secondary-color);
color: #FFFFFF;
padding: 1px 15px;
font-size: 12px;
border-radius: 10px;
white-space: nowrap;
z-index: 2;
font-weight: bold;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
margin-top: 1rem;
}

.quick-add-buttons .popular-button .number {
color: #fff;
font-weight: bold;
margin-bottom: 0.7rem;
position: relative;
z-index: 2;
animation: numberZoom 3s linear infinite;
}

@keyframes numberZoom {
0% {
    transform: scale(1);
    color: var(--secondary-color);
}
50% {
    transform: scale(1.5);
    color: var(--background-color);
}
100% {
    transform: scale(1);
    color: var(--secondary-color);
}
}

.number {
font-size: 36px;
}

.label {
font-size: 10px;
color: var(--quick-add-buttons-text);
}

/* Ajuste para telas menores */
@media (max-width: 768px) {
.title-escolha {
    font-size: 0.9rem;
    font-weight: normal;
}

.number {
    font-size: 24px;
}

.label {
    font-size: 7px;
}

.quick-add-buttons .popular-button .popular-badge {
    font-size: 10px;
    padding: 1px 5px;
    bottom: 6px;
}
}


@media (max-width: 480px) {
    .quick-add-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 0px;
        justify-content: space-between;
        /* Garante espaçamento uniforme entre os botões */
    }

    .quick-add-buttons button {
        flex: 1 0 calc(33.33% - 10px);
        /* Define todos os botões com 1/3 da largura */
        padding: 5px;
        font-size: 14px;
        margin: 5px;
        box-sizing: border-box;
        /* Garante que padding e border não afetem o tamanho */
        height: 65px;
        /* Define uma altura fixa para todos os botões */
        text-align: center;
        /* Centraliza o texto horizontalmente */
    }
}

.total-value-section {
display: none;
justify-content: space-between;
align-items: flex-start;
padding: 10px;
color: var(--text-color);
}

.total-amount-section {
text-align: right;
}

.total-label, .total-amount {
font-size: 14px;
}

.discount-message {
color: var(--text-color);
font-size: 10px;
}


/* Estilos para dispositivos móveis */
@media (max-width: 768px) {
.number-selector-container {
    padding: 5px 15px;
}

.number-selector-button {
    width: 30px;
    height: 30px;
    font-size: 18px;
}

.number-display {
    font-size: 16px;
    padding: 3px 10px;
}
}

/* Finalizar compra */
@keyframes pulsar {
0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
}
50% {
    transform: scale(1.05);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}
100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}
}

.checkout-button-container {
display: flex;
justify-content: center;
align-items: center;
padding: 5px;
}

.checkout-button {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background: linear-gradient(to right, #32cd33, #33ee11);
color: white;
font-size: 20px;
font-weight: bold;
border: none;
border-radius: 10px;
cursor: pointer;
transition: background-color 0.3s;
width: 100%;
animation: pulsar 2s infinite;
}

.checkout-button:hover {
background-color: #29B05E;
animation: none;
}

.checkout-button .left-content {
display: flex;
align-items: center;
gap: 10px;
}

.checkout-button .right-content {
display: flex;
align-items: center;
}

.checkout-button .material-symbols-outlined {
font-size: 24px;
}

.checkout-button .total-amount {
font-size: 20px;
font-weight: bold;
}

@media (max-width: 768px) {
.checkout-button {
    padding: 15px 20px;
}

.checkout-button .left-content {
    font-size: 1rem;
}

.checkout-button .total-amount {
    font-size: 1rem;
}
}

/* Descrição */
.description-section {
background-color: var(--cotas-selection);
padding: 10px;
border-radius: 10px;
border: 1px solid var(--cotas-selection-border);
color: var(--text-color);
display: flex;
flex-direction: column;
align-items: flex-start; 
max-height: 200px; 
overflow-y: auto;
width: 100%;
box-sizing: border-box;
font-size: 0.8rem;
}

.description-section h2 {
margin-top: 0;
color: var(--text-color);
font-size: 1rem;
text-align: center;
width: 100%;
}

.description-section p {
color: #B0B0B0;
text-align: left;
margin-left: 15px;
}

@media (min-width: 768px) {
.description-section {
    padding: 20px;
    font-size: 0.8rem;
}

.description-section h2 {
    font-size: 28px;
}

.description-section p {
    font-size: 0.8rem;
}
}

/* Style the scrollbar track */
.description-section::-webkit-scrollbar-track {
background-color: #595959;
border-radius: 10px;
}

/* Style the scrollbar thumb */
.description-section::-webkit-scrollbar-thumb {
background-color: var(--secondary-color);
border-radius: 10px;
border: none;
}

/* Adjust the width of the scrollbar */
.description-section::-webkit-scrollbar {
width: 10px;
}

/* For Firefox */
.description-section {
scrollbar-width: thin;
scrollbar-color: var(--secondary-color) #595959;
}

/* Regras */
.action-card {
background-color: var(--action-card-background);
border: 5px solid var(--primary-color);
border-radius: 25px;
display: flex;
align-items: center;
padding: 0px 10px;
margin-bottom: 0.7rem;
}

.action-card:nth-child(2n) {
border: 5px solid var(--secondary-color);
}

.action-number {
font-size: 100px;
margin: 0px 50px 0px 30px;
flex-shrink: 0;
background-image: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
color: transparent;
background-clip: text;
-webkit-background-clip: text;
}

.action-card:first-of-type .action-number {
margin: 0px 80px 0px 30px; /* Margem específica para o primeiro .action-number dentro do .action-card */
}

.action-card:last-of-type .action-number {
margin: 0px 55px 0px 20px; /* Margem específica para o último .action-number dentro do .action-card */
}

.action-content {
color: var(--action-card-text);
}

.action-content h3 {
font-size: 1rem;
margin: 0;
margin-bottom: 10px;
font-weight: bold;  /* Tornando o h3 em negrito */
}

.action-content p {
font-size: 14px;
margin: 0;
}

/* Media Query para telas menores que 768 pixels */
@media (max-width: 767px) {
.action-number {
    font-size: 80px;
    margin: 0px 30px 0px 20px;  /* Ajustando a margem para mobile */
}

.action-card:first-of-type .action-number {
    margin: 0px 50px 0px 20px; /* Margem específica para o primeiro .action-number dentro do .action-card */
}

.action-card:last-of-type .action-number {
    margin: 0px 25px 0px 20px; /* Margem específica para o último .action-number dentro do .action-card */
}

.action-content h3 {
    font-size: 1rem; /* Reduzindo o tamanho da fonte do h3 para mobile */
}

.action-content p {
    font-size: 10px; /* Reduzindo o tamanho da fonte do parágrafo para mobile */
}
}

.bold {
font-weight: bold;
}

/* Ranking de Compradores */
.ranking-section {
background-color: var(--super-combo-section);
padding: 20px 0;
text-align: center;
border-radius: 10px;
border: 1px solid var(--cotas-selection-border);
}

.ranking-title {
font-size: 28px;
color: #ffffff;
margin-bottom: 1rem; /* Espaço abaixo do título */
}

.ranking-cards-container {
display: flex;
justify-content: center; /* Espaço entre os cartões */
flex-wrap: wrap;
width: 100%; /* Largura total */
}

.ranking-card {
border-radius: 10px; /* Bordas arredondadas */
width: calc(100% / 3 - 40px); /* Divide o espaço em três, subtraindo o espaço entre eles */
margin: 0.5rem; /* Espaço entre os cartões */
overflow: hidden; /* Mantém tudo dentro das bordas arredondadas */
padding: 0.4rem;
}

/* Cores específicas para cada cartão de ranking */
.first-card {
background-color: #FFCC00; /* Ouro para o 1º lugar */
}

.second-card {
background-image: linear-gradient(to right, #CFCFCF, #FAFAFA);
}

.third-card {
background-image: linear-gradient(to right, #CF6C39, #FAC18E);
}

.trophy-section, .info-section {
padding: 10px 5%; /* 5% de padding em ambos os lados */
margin: 0 auto; /* Centraliza dentro do cartão */
width: 100%; /* Largura das seções */
border-radius: 10px;
}

.trophy-section {
display: flex;
align-items: center; /* Alinha verticalmente */
justify-content: center; /* Alinha horizontalmente */
border-top-left-radius: 10px; /* Arredondamento apenas na parte superior */
border-top-right-radius: 10px;
padding: 10px;
margin-bottom: 5px;
}

.info-section {
background-color: #333333; /* Cor de fundo para a seção de informações */
color: #FFF;
}

.name {
font-size: 0.8rem; /* Tamanho do nome */
font-weight: bold;
}

.tickets {
font-size: 0.6rem; /* Tamanho do texto */
}

/* Configurações para os ícones do FontAwesome */
.trophy-section i {
color: #cfa22e;
font-size: 2rem; /* Tamanho do ícone */
}

.position {
font-weight: bold; /* Deixa o texto em negrito */
margin-left: 10px; /* Espaço entre o ícone e o texto */
}

.first-trophy {
background-image: linear-gradient(to right, #FFFF62, #FFFF06);
}

.second-trophy {
background-image: linear-gradient(to right, #FEFEFE, #FEFEFE);
}

.third-trophy {
background-image: linear-gradient(to right, #D06F3C, #D06F3C);
}

@media (max-width: 768px) {
.ranking-cards-container {
    justify-content: center;
}

.ranking-title {
    font-size: 1rem;
}

.position {
    font-size: 0.6rem;
    margin-left: 0.3rem;
}

.ranking-card {
    width: 30%; /* Ajuste para a largura desejada */
    margin: 0.2rem; /* Ajuste para o espaçamento desejado */
}

.trophy-section, .info-section {
    padding: 5px 5%; /* Ajuste para o padding desejado */
}

.trophy-section i {
    font-size: 1rem; /* Ajuste para o tamanho do ícone */
}

.name {
    font-size: 0.5rem;
}

.tickets {
    font-size: 0.6rem; /* Ajuste para o tamanho do texto */
}
}

/* Premiação para ranking de compradores */
.premiacao-section {
display: flex;
flex-direction: column;
margin: 0 auto;
width: 100%;
}
.premiacao-item {
position: relative;
padding: 0.3rem;
color: black;
font-weight: bold;
font-size: 1rem;
text-align: center;
overflow: hidden;
border-radius: 5px;
background-clip: padding-box; /* Isso garante que o fundo se aplique apenas até a borda interna */
}

.premiacao-info {
position: relative;
padding: 0.1rem;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
z-index: 2;
color: black;
font-weight: bold;
font-size: 1rem;
background-clip: padding-box;
gap: 0.2rem;
}

/* Estilos específicos para as cores de fundo dos itens de premiação */
.first .premiacao-info {
background-image: linear-gradient(
    to right, 
    var(--super-combo-section) 5%, 
    rgba(255, 217, 0, 0.9) 25%, 
    rgba(255, 217, 0, 0.9) 75%, 
    var(--super-combo-section) 95%
);
}

.second .premiacao-info {
background-image: linear-gradient(
    to right, 
    var(--super-combo-section) 5%, 
    rgba(192, 192, 192, 0.9) 25%, 
    rgba(192, 192, 192, 0.9) 75%, 
    var(--super-combo-section) 95%
);
}

.third .premiacao-info {
background-image: linear-gradient(
    to right, 
    var(--super-combo-section) 5%, 
    rgba(205, 127, 50, 0.9) 25%, 
    rgba(205, 127, 50, 0.9) 75%, 
    var(--super-combo-section) 95%
);
}

.premiacao-info .position, 
.premiacao-info .reward {
color: black;
font-weight: bold;
font-size: 1rem;
}

@media (max-width: 768px) {
.premiacao-item {
    font-size: 0.6rem;
}

.premiacao-info .position {
    margin-right: 0.2rem;
}

.premiacao-info .position, .premiacao-info .reward {
    font-size: 0.6rem;
}
}

button.sorteada {
background-color: red;
text-decoration: line-through;
text-decoration-thickness: 2px; /* Ajuste a espessura da linha conforme necessário */
}

.winner-section {
    background-color: var(--cotas-selection);
    border-radius: 25px;
    border: 1px solid var(--cotas-selection-border);
    padding: 20px 0;
    margin-bottom: 1rem;
}

.winner-title {
    color: var(--text-color);
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
}

.winner-title span {
    display: block;
    font-size: 16px;
    margin-top: 0px;
}

.winner-card {
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 15px;
    display: flex;
    align-items: start;
    margin: 20px;
}

.winner-image {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    margin-right: 20px;
    margin-left: 0px;
}

.winner-details {
    flex-grow: 1;
}

.winner-name {
    color: white;
    font-size: 14px;
    margin: 0 0 10px 0;
    font-weight: bold;
}

.winner-prize {
    color: var(--winner-prize-text);
    font-size: 12px;
    margin: 10px 0;
    padding: 4px;
    border-radius: 5px;
    background: linear-gradient(to right, #FFFFFF, var(--background-color));
}

.info {
    font-size: 12px;
    margin: 6px 0;
    padding: 4px;
    border-radius: 5px;
    background: #FFF;
    color: #000;
    display: inline-block;
    margin-right: 10px;
    font-weight: bold;
}

.date-info {
    margin-left: auto;
}

.text-custom-3 {
    background-color: #0095D8;
    padding: 5px 6px;
    border-radius: 5px;
    width: fit-content;
    font-size: 10px;
}

/* Media query para dispositivos móveis */
@media (max-width: 768px) {
    .winner-title {
        font-size: 1.2rem; /* Diminuindo o tamanho da fonte do título */
    }

    .winner-title span {
        font-size: 12px; /* Diminuindo o tamanho da fonte do sub-título */
    }

    .winner-card {
        padding: 5px; /* Reduzindo o padding */
    }

    .winner-image {
        width: 80px;
        height: 100px; /* Reduzindo o tamanho da imagem */
        margin: 5px 5px 5px 0px;
    }

    .winner-name {
        font-size: 14px; /* Diminuindo o tamanho da fonte do nome */
        margin: 15px 0 3px 0;
    }

    .winner-prize {
        font-size: 10px; /* Diminuindo o tamanho da fonte do prêmio */
        margin-top: 0px;
        margin-bottom: 3px;
    }

    .info {
        font-size: 7px; /* Diminuindo o tamanho da fonte das informações */
        margin-top: 0px;
    }
}

#cotasModal, #encontradosModal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    animation: fadeInBackground 0.5s ease-out forwards;
}

#cotasModal .modal-content,
#encontradosModal .modal-content {
    background-color: #fefefe;
    width: 90%;
    max-width: 600px;
    border-radius: 15px;
    position: relative;
    overflow-y: scroll;
    max-height: 90%;
    padding: 2rem 0 2rem 0;
    animation: zoomIn 0.5s ease-out forwards;
}

@keyframes fadeInBackground {
    from { background-color: rgba(0, 0, 0, 0); }
    to { background-color: rgba(0, 0, 0, 0.4); }
}

@keyframes zoomIn {
    from { transform: scale(0.7); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

#cotasModal .modal-content::-webkit-scrollbar,
#encontradosModal .modal-content::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* Tornar a barra de rolagem transparente */
}

body.modal-open {
    overflow: hidden;
}

/* Overlay com desfoque */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(5px);
    z-index: 1;
    display: none;
}

/* Mostrar overlay quando modal for aberto */
.modal-open .overlay {
    display: block;
}

.close {
    position: absolute;
    top: 10px;
    right: 15px;
    color: red;
    font-size: 28px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-weight: bold;
    cursor: pointer;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#cotasModal .modal-content {
    background-color: var(--cotas-selection);
    border-radius: 15px;
}

#cotasModal .subtitle-cotas {
    font-size: 1.2rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--text-color);
}

#cotasModal .cota-premiada-section,
#cotasModal .cota-master-section,
#cotasModal .cota-diamante-section {
    background-color: var(--cotas-selection);
    padding: 20px 0;
    text-align: center;
    border-radius: 10px;
    border: 1px solid var(--cotas-selection-border);
    margin-bottom: 20px;
}

#cotasModal .cota-premiada-section h2,
#cotasModal .cota-master-section h2,
#cotasModal .cota-diamante-section h2 {
    font-size: 1.2rem;
    color: var(--text-color);
    margin-bottom: 10px;
}

#cotasModal .subtitle-cotas {
    margin: 0;
    text-align: center;
}

#cotasModal .subdesc-cotas {
    line-height: 1.1;
    text-align: center;
    color: var(--text-color);
}

#cotasModal .cota-premiada-section p,
#cotasModal .cota-master-section p,
#cotasModal .cota-diamante-section p {
    font-size: 0.9rem;
    color: var(--text-color);
    margin-bottom: 10px;
}

#cotasModal .cotas-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    padding: 0 0.5rem;
}

#cotasModal .cota-section-header {
    display: flex;
    align-items: center;
    gap: 10px; /* Espaçamento entre a imagem e o texto */
    padding: 0;
    margin-bottom: -1rem; /* Espaçamento inferior para separar da linha */
}

#cotasModal .cota-section-header img {
    position: relative;
    top: -60px; /* Posiciona a imagem para cima */
    left: -20px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

#cotasModal .cota-section-header h2 {
    position: relative;
    top: -50px; /* Posiciona o título para cima */
    left: -30px;
    font-size: 1.2rem;
    color: var(--text-color);
    margin: 0;
    text-align: left;
}

#cotasModal .cota-section-header p {
    position: relative;
    top: -50px; /* Posiciona o título para cima */
    left: -30px;
    font-size: 0.9rem;
    color: var(--text-color);
    margin: 0;
    text-align: left;
}

@media (max-width: 768px) {
    #cotasModal .cota-section-header h2 {
        font-size: 0.8rem;
    }

    #cotasModal .cota-section-header p {
        font-size: 0.6rem;
    }

    #cotasModal .cota-encontrada-separator-bilhete {
        top: -40px;
    }
}

#cotasModal .cota-card {
    border-radius: 10px;
    padding: 0 5px;
    width: calc(50% - 20px);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

#cotasModal .cota-value {
    font-size: 0.7rem;
    color: var(--modal-bilhete-text);
    padding: 5px;
    border-radius: 3px 3px 0 0;
    width: 100%;
    text-align: left;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#cotasModal .cota-master .cota-value, #cotasModal .cota-diamante .cota-value,
#cotasModal .cota-master .cota-percentual-liberacao, #cotasModal .cota-diamante .cota-percentual-liberacao,
#cotasModal .cota-master .material-icons, #cotasModal .cota-diamante .material-icons {
    color: #fff;
}

#cotasModal .cota-message {
    display: flex;
    align-items: center;
    font-size: 0.6rem;
    color: #fff;
}

#cotasModal .cota-message .material-symbols-outlined {
    font-size: 10px;
    margin-right: 2px;
}

#cotasModal .cota-info {
    display: flex;
    width: 100%;
    height: 25px;
    background-color: #fff;
    padding: 0 0 0 5px;
    align-items: center;
    justify-content: space-between;
    border-radius: 6px;
    margin-bottom: 10px;
}

#cotasModal .cota-number {
    font-weight: bold;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    color: #000;
}

#cotasModal .cota-number .material-symbols-outlined {
    color: #000;
    margin-right: 5px;
    font-size: 16px;
}

#cotasModal .cota-status-container {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right, #32cd33, #33ee11);
    border-radius: 5px;
    padding: 0 10px;
    height: 100%;
    flex-shrink: 0;
}

#cotasModal .cota-status-content {
    display: flex;
    align-items: center;
    height: 100%;
}

#cotasModal .cota-status-dot {
    width: 6px;
    height: 6px;
    background-color: white;
    border-radius: 50%;
    margin-right: 5px;
}

#cotasModal .cota-status {
    color: #fff;
    font-size: 0.7rem;
    font-weight: bold;
}

#cotasModal .cota-premiada {
    background-color: var(--modal-bilhete);
}

#cotasModal .cota-master {
    background: linear-gradient(to right, #E3BB39, #977128);
}

#cotasModal .cota-diamante {
    background: linear-gradient(to right, #0069FE, #00A9FD);
}

#cotasModal .ver-mais-button.cota-premiada {
    background-color: var(--modal-bilhete);
    color: var(--modal-bilhete-text);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    margin: 0 auto;
    margin-top: 5px;
}

#cotasModal .ver-mais-button.cota-master {
    background-color: #8B0000;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    margin: 0 auto;
    margin-top: 5px;
}

#cotasModal .ver-mais-button.cota-diamante {
    background-color: #4682B4;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%;
    margin: 0 auto;
    margin-top: 5px;
}

#cotasModal .ver-mais-button {
    border: none;
    border-radius: 12px;
    padding: 3px 10px;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    margin: 0.313rem 0 2rem 0;
    transition: background-color 0.3s;
}

#cotasModal .ver-mais-button:hover {
    opacity: 0.8;
}

#cotasModal .cota-encontrada {
    box-shadow: 0 0 10px rgba(255, 4, 0, 0.5); /* Sombra vermelha */
    background: linear-gradient(to right, #FF0036, #FD0C15); /* Fundo degradê */
}

#cotasModal .cota-status-container.encontrada {
    background: linear-gradient(to right, #800000, #FF0000); /* Novo gradiente para encontrada */
}

#cotasModal .cota-status.encontrada {
    color: #FFF; /* Cor do texto encontrada */
}

#cotasModal .cota-number.encontrada {
    font-style: italic;
    text-decoration: line-through;
}

@media (max-width: 768px) {
    #cotasModal .cota-premiada-section h2,
    #cotasModal .cota-master-section h2,
    #cotasModal .cota-diamante-section h2 {
        font-size: 1rem;
        margin-bottom: 0.1rem;
    }

    #cotasModal .cota-premiada-section p,
    #cotasModal .cota-master-section p,
    #cotasModal .cota-diamante-section p {
        font-size: 0.7rem;
    }

    #cotasModal .cota-card {
        width: calc(50% - 10px);
    }

    #cotasModal .cota-value {
        font-size: 0.5rem;
    }

    #cotasModal .cota-message {
        font-size: 0.4rem;
    }

    #cotasModal .cota-number {
        font-size: 0.6rem;
    }

    #cotasModal .cota-status {
        font-size: 0.5rem;
    }

    #cotasModal .ver-mais-button {
        font-size: 0.6rem;
        padding: 3px 10px;
    }
}

@media (max-width: 768px) {
    #cotasModal .subtitle-cotas {
        font-size: 1rem;
        margin-top: 1.5rem;
        margin-bottom: 0.5rem;
    }

    #cotasModal .material-icons {
        font-size: 0.5rem;
    }

    #cotasModal .cota-percentual-liberacao {
        font-size: 0.5rem;
    }

    #cotasModal .cotas-container:last-child {
        margin-bottom: 1rem;
    }

    #cotasModal .subdesc-cotas {
        font-size: 0.7rem;
    }
}

#cotasModal .subtitle-cotas:first-child {
    margin-bottom: 0.5rem;
}

/*Lista de cotas encontradas*/
#encontradosModal .modal-content {
    background-color: var(--cotas-selection);
    border-radius: 15px;
}

#encontradosModal .cota-encontrada-section {
    background-color: var(--cotas-selection);
    padding: 0 0 20px 0;
    text-align: left;
    border-radius: 25px;
    border: 1px solid var(--cotas-selection-border);
    margin-bottom: 20px;
}

#encontradosModal .cota-encontrada-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    padding: 0 1rem 0 0;
}

#encontradosModal .title-bar-cotas {
    position: relative;
    top: -20px;
}

#encontradosModal .cota-encontrada-header img {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    position: relative;
    top: -50px;
}

#encontradosModal .cota-encontrada-header h2 {
    font-size: 1.2rem;
    line-height: 1.05;
    color: var(--text-color);
    margin: 0;
}

#encontradosModal .cota-encontrada-header p {
    font-size: 0.6rem;
    color: var(--text-color);
    margin-top: 0.5rem;
}

@media (max-width: 768px) {
    #encontradosModal .cota-encontrada-header h2 {
        font-size: 0.8rem;
    }

    #encontradosModal .cota-encontrada-header p {
        font-size: 0.6rem;
    }


}

#encontradosModal .cota-encontrada-separator {
    position: relative;
    top: -50px; /* Posiciona o separador para cima */
    border: none;
    border-top: 3px solid #595959;
    margin: 0 1rem 0rem 1rem;
}

#encontradosModal .cota-encontrada-separator-bilhete {
    position: relative;
    top: -50px; /* Posiciona o separador para cima */
    border: none;
    border-top: 3px solid #595959;
    margin: -3rem 1rem -1.5rem 1rem;
    width: 100%;
}

#encontradosModal .cotas-encontradas-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    padding: 0 1rem;
}

#encontradosModal .cota-card-encontrada {
    position: relative;
    top: -30px;
    border-radius: 15px;
    padding: 0.5rem 0.5rem;
    width: 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    background-color: var(--cota-card-background); /* Fundo para cotas encontradas */
}

#encontradosModal .cota-value-encontrada {
    font-size: 0.7rem;
    color: var(--cota-card-text);
    padding: 5px 5px 5px 10px;
    border-radius: 3px 3px 0 0;
    width: 100%;
    text-align: left;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#encontradosModal .cota-info-encontrada {
    display: flex;
    width: 100%;
    height: 40px;
    background-color: var(--cota-card-text);
    padding: 0 0 0 5px;
    align-items: center;
    justify-content: space-between;
    border-radius: 11px;
    margin-bottom: 0;
}

#encontradosModal .cota-number-encontrada {
    font-weight: bold;
    font-size: 1rem;
    display: flex;
    align-items: center;
    color: #000;
}

#encontradosModal .cota-number-encontrada .material-symbols-outlined {
    color: #000;
    margin: 0 5px;
}

#encontradosModal .cota-status-container-encontrada {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FF0000;
    border-radius: 10px;
    padding: 0 10px;
    height: 100%;
    flex-shrink: 0;
}

#encontradosModal .cota-status-content-encontrada {
    display: flex;
    align-items: center;
    height: 100%;
}

#encontradosModal .cota-status-dot-encontrada {
    width: 6px;
    height: 6px;
    background-color: white;
    border-radius: 50%;
    margin-right: 5px;
}

#encontradosModal .cota-status-encontrada {
    color: #fff;
    font-size: 0.8rem;
    font-weight: bold;
}

#encontradosModal .cota-user-encontrada {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    color: #fff;
    margin-top: 5px;
    padding: 0 0 0 7px;
}

#encontradosModal .cota-user-encontrada .material-symbols-outlined {
    font-size: 1rem;
    margin-right: 5px;
}

#encontradosModal .cota-percentual-liberacao {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: #fff;
    margin: 0;
}

#encontradosModal .cota-percentual-liberacao .material-icons {
    font-size: 0.8rem;
    margin-right: 0.1rem;
}

#encontradosModal .message-not-winner {
    font-size: 0.8rem;
    color: var(--text-color);
    text-align: center;
}

.hidden-cota {
    display: none;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { transform: translateY(-20%); }
    to { transform: translateY(0); }
}

.button-container {
    display: flex;
    width: 100%;
    gap: 0.7rem;
    margin: 0 0 0 0;
}

.button-container .custom-button {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: var(--custom-button);
    color: #fff;
    border-radius: 15px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: background-color 0.3s;
    flex: 1;
}

.button-container .custom-button:hover {
    background-color: var(--number-selector-hover);
}

.button-container .custom-button .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--custom-button-back);
    padding: 0.5rem;
    border-radius: 8px;
    margin-right: 0.5rem;
}

.button-container .custom-button .icon .material-icons {
    margin-right: 0;
    color: var(--secondary-color); /* Cor laranja para o ícone */
    font-size: 24px;
}

.button-container .custom-button .text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.button-container .custom-button .text-container .title {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 0; /* Remover margem inferior */
    color: var(--custom-button-title);
}

.button-container .custom-button .text-container .subtitle {
    font-size: 0.9rem;
    margin-top: -6px; /* Ajuste de margem superior para aproximar do título */
    color: var(--custom-button-subtitle);
}

.message-not-winner {
    font-size: 0.8rem;
    color: var(--text-color);
    text-align: center;
}

.interlaced-percentage-container {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    padding: 0px 0;
    font-family: 'Roboto', sans-serif;
}

/* Barra principal */
.interlaced-percentage-bar {
    flex: 1;
    height: 30px;
    background: linear-gradient(to right, #e3e3e3, #f7f7f7); /* Branco e cinza */
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center; /* Centraliza o texto */
}

/* Preenchimento da barra */
.interlaced-percentage-fill {
    height: 100%;
    background: linear-gradient(
        to right,
        var(--primary-color, #ff7f50),
        var(--secondary-color, #ffd700)
    );
    position: absolute;
    top: 0;
    left: 0;
    width: 0; /* Inicialmente sem largura */
    transition: width 0.5s ease-in-out;
    z-index: 1;
    border-radius: 10px 0 0 10px; /* Arredondar apenas a parte preenchida */
}

/* Padrão entrelaçado */
.interlaced-pattern {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.2),
        rgba(255, 255, 255, 0.2) 10px,
        transparent 10px,
        transparent 20px
    );
    z-index: 2;
    mix-blend-mode: overlay;
}

/* Texto de porcentagem */
.interlaced-percentage-text {
    position: relative;
    font-size: 1.4rem;
    font-weight: bold;
    color: white;
    text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.7), /* Sombra principal */
                0px 6px 12px rgba(0, 0, 0, 0.5); /* Sombra adicional para mais profundidade */
    z-index: 3;
}

/* Section ranking diario */
.ranking-title {
    margin-bottom: 15px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.btn-custom-ranking{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    color: #fff;
    border: none;
    border-radius: 25px;
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-custom-ranking:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.btn-custom-ranking .material-symbols-outlined {
    margin-right: 8px;
}

.btn-glow {
    animation: glowEffect 2s infinite;
}



/* ranking diario */

/* Estilizando o scrollbar para o ranking modal */
#ranking-modal .modal-content::-webkit-scrollbar {
    width: 8px; /* Largura do scroll */
    background-color: #f4f4f4; /* Cor do fundo do scroll */
    border-radius: 10px; /* Arredondamento para suavizar */
}

#ranking-modal .modal-content::-webkit-scrollbar-thumb {
    background-color: #B6FE41; /* Cor do scroll */
    border-radius: 10px; /* Arredondamento para suavizar */
    border: 2px solid #FFF; /* Espaço ao redor do scroll */
}

#ranking-modal .modal-content::-webkit-scrollbar-thumb:hover {
    background-color: #54D636; /* Cor ao passar o mouse */
}

#ranking-modal .modal-content::-webkit-scrollbar-track {
    background-color: #eaeaea; /* Cor do trilho */
    border-radius: 10px; /* Arredondamento do trilho */
}

/* Para Firefox */
#ranking-modal .modal-content {
    scrollbar-width: thin; /* Espessura do scroll */
    scrollbar-color: #B6FE41 #eaeaea; /* Cor do scroll e do trilho */
}

/* Efeito ao passar o mouse no Firefox */
#ranking-modal .modal-content:hover {
    scrollbar-color: #54D636 #f4f4f4;
}

/* Modal Container */
#ranking-modal {
    display: none; /* O modal começa escondido */
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    justify-content: center;
    align-items: center;
}

/* Modal Content */
#ranking-modal .modal-content {
    background-color: #fff;
    width: 90%;
    max-width: 600px;
    border-radius: 15px;
    padding: 20px;
    position: relative;
    overflow-y: auto;
    max-height: 90%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Modal Header */
#ranking-modal .modal-header {
    display: flex;
    align-items: center;
    margin-top: 1rem;
}

#ranking-modal .modal-header .header-left img {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

#ranking-modal .modal-header .header-right {
    flex-grow: 1;
    margin-left: 20px;
    text-align: left;
}

#ranking-modal .modal-header .header-right h1 {
    font-size: 24px;
    margin: 0;
    color: #333;
}

#ranking-modal .modal-header .header-right p {
    font-size: 16px;
    margin: 0;
    color: #333;
}

#ranking-modal .modal-header .sorteio-info {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

/* Centralized Date Section */
#ranking-modal .date-section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 20px 0 40px 0;
}

#ranking-modal .date-section .date {
    background-color: #368922;
    color: #fff;
    padding: 5px 15px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: bold;
}

#ranking-modal .date-section .ranking-period {
    margin-top: 10px; /* Espaçamento entre a data e o período */
    background-color: #4CAF50; /* Cor de fundo similar, mas levemente diferente da data */
    color: #fff; /* Cor do texto */
    padding: 5px 15px; /* Espaçamento interno */
    border-radius: 10px; /* Bordas arredondadas */
    font-size: 14px; /* Tamanho do texto */
    font-weight: 500; /* Peso do texto */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Leve sombra para destacar */
    text-align: center; /* Centraliza o texto */
    width: fit-content; /* Ajusta o tamanho ao conteúdo */
}

/* Close Button */
#ranking-modal .close {
    position: absolute;
    top: 10px;
    right: 15px;
    background: #fff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: red;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1050; /* Certifique-se de que está acima de outros elementos */
    visibility: visible; /* Garante que está visível */
}

#ranking-modal .close:hover {
    color: #333;
}

/* Top Comprador Section */
#ranking-modal .top-comprador {
    position: relative;
    margin-bottom: 0;
}

#ranking-modal .top-comprador .badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #B6FE41;
    color: #378A23;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 15px;
    border-radius: 7px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    text-align: center;
    z-index: 1;
}

#ranking-modal .top-comprador .ranking-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-radius: 15px;
    background-color: #54D636;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

#ranking-modal .top-comprador .ranking-item .buyer-name {
    color: #FFFBEA; /* Cor personalizada */
    font-weight: bold;
    margin: 0;
}

#ranking-modal .top-comprador .ranking-item .buyer-phone {
    color: #E9FFE8; /* Outra cor para destaque */
    font-weight: bold;
    margin: 0;
}

#ranking-modal .top-comprador .ranking-item .tickets {
    color: #FFFBEA; /* Destaque */
    margin: 0;
}

/* Ranking List Items */
#ranking-modal .ranking-list {
    margin-top: 0;
}

#ranking-modal .ranking-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 10px;
    background-color: #f4f4f4;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#ranking-modal .ranking-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

#ranking-modal .ranking-item .position {
    font-size: 24px;
    margin: 0 20px 0 0;
    font-weight: bold;
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background-color: #4A4A4A; /* Cor padrão */
    color: #fff;
    border: 2px solid #4A4A4A;
}

#ranking-modal .ranking-item .buyer-info {
    flex-grow: 1;
    margin: 0;
}

#ranking-modal .ranking-item .buyer-name {
    font-size: 18px;
    font-weight: bold;
    color: #4A4A4A;
    margin: 0;
}

#ranking-modal .ranking-item .buyer-phone {
    font-size: 14px;
    color: #4A4A4A;
    margin: 0;
}

#ranking-modal .ranking-item .tickets {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    color: #4A4A4A;
    margin: 0;
}

/* Ajuste para o Top Comprador */
#ranking-modal .ranking-item.top-rank {
    background-color: #54D636;
    color: #fff;
    border: 2px solid #3CBF2A;
}

#ranking-modal .ranking-item.top-rank .position {
    background-color: #B6FE41;
    color: #fff;
    border: 2px solid #B6FE41;
}

/* Responsivo para Celulares */
@media (max-width: 768px) {
    #ranking-modal .modal-content {
        padding: 10px;
    }

    #ranking-modal .modal-header .header-left img {
        width: 60px;
        height: 60px;
    }

    #ranking-modal .modal-header .header-right h1 {
        font-size: 18px; /* Tamanho reduzido para o título */
    }

    #ranking-modal .modal-header .header-right p {
        font-size: 12px; /* Subtítulo reduzido */
    }

    #ranking-modal .date-section .date {
        font-size: 12px; /* Data reduzida */
        padding: 3px 10px;
    }

    #ranking-modal .ranking-item {
        padding: 8px; /* Margens menores */
    }

    #ranking-modal .ranking-item .position {
        font-size: 16px; /* Número da posição menor */
        width: 30px; /* Tamanho reduzido */
        height: 30px; /* Tamanho reduzido */
    }

    #ranking-modal .ranking-item .buyer-name {
        font-size: 14px; /* Nome menor */
    }

    #ranking-modal .ranking-item .buyer-phone {
        font-size: 12px; /* Telefone menor */
    }

    #ranking-modal .ranking-item .tickets {
        font-size: 12px; /* Número de bilhetes menor */
    }

    #ranking-modal .top-comprador .ranking-item {
        padding: 10px; /* Reduz o espaçamento interno */
    }

    #ranking-modal .top-comprador .ranking-item .buyer-name {
        font-size: 14px; /* Nome menor no top comprador */
    }

    #ranking-modal .top-comprador .ranking-item .buyer-phone {
        font-size: 12px; /* Telefone menor no top comprador */
    }

    #ranking-modal .top-comprador .ranking-item .tickets {
        font-size: 12px; /* Número de bilhetes menor no top comprador */
    }

    /* Botão Fechar */
    #ranking-modal .close {
        width: 25px; /* Botão menor */
        height: 25px; /* Botão menor */
        font-size: 20px; /* Ícone reduzido */
    }

    #ranking-modal .date-section .ranking-period {
        font-size: 0.5rem;
    }
}

.btn-ranking-large {
    width: 100%;
    font-size: 1rem; /* Tamanho do texto */
    font-weight: bold;
    padding: 15px 30px; /* Tamanho do botão */
    border: none;
    border-radius: 8px; /* Cantos arredondados */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-ranking-large i {
    margin-right: 10px; /* Espaço entre o ícone e o texto */
}


@media (max-width: 768px) {
    .btn-ranking-large {
        padding: 10px 30px;
    }
}

/* Caixinha */
.instant-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.instant-section .instant-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 12px;
    color: white;
    font-size: 0.8rem;
    padding-top: 16px;
    padding-bottom: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.instant-section .content-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 20px;
}

.instant-section .left {
    font-size: 1rem;
    font-weight: bold;
}

.instant-section .left span {
    display: block;
    font-size: 0.75rem;
    font-weight: normal;
    opacity: 0.9;
}

.instant-section .right {
    text-align: right;
    font-weight: bold;
    font-size: 0.8rem;
    white-space: nowrap;
}

.instant-section .instant-icon {
    font-size: 1.2rem;
    margin-left: 6px;
    vertical-align: middle;
}

.instant-section .footer {
    background: rgba(255, 255, 255, 0.12);
    width: 100%;
    text-align: left;
    padding: 6px 20px;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.85);
    border-radius: 0 0 12px 12px;
    margin-top: 12px;
}

@media (max-width: 576px) {
    .instant-section {
        align-items: stretch;
    }

    .instant-section .instant-card {
        width: 100%;
        max-width: 100%;
        margin: 0;
    }
}

.cota-winner {
    padding: 2px 5px 2px 3px;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--cota-card-text);
    font-weight: bold;
}

.cota-winner .material-symbols-outlined {
    font-size: 18px;
}

/* Regra original (continua valendo p/ quem NÃO tem ganhador) */
.cota-card .cota-info {
    margin-bottom: 10px;
}

/* Se o título foi encontrado (ganhador exibido) diminui o espaçamento  */
.cota-card.cota-encontrada .cota-info {
    margin-bottom: 2px;
    /* ou 0 se quiser colado */
}

/* (opcional) ajusta a distância do bloco que mostra o nome */

@media (max-width: 768px) {

    .cota-card .cota-winner .material-symbols-outlined {
        font-size: 0.8rem;
    }


    .cota-card .cota-winner {
        font-size: 0.5rem;
    }
}

/* ================================================================
   CAIXINHAS PREMIADAS
   (usa as mesmas variáveis de cor já declaradas em :root)
   ================================================================ */

/* Bloco principal da seção */
.caixinha-section {
    background-color: var(--cotas-selection);
    padding: 20px 0;
    text-align: center;
    border-radius: 10px;
    border: 1px solid var(--cotas-selection-border);
    margin-bottom: 20px;
}

/* Título e subtítulo */
.caixinha-section h2 {
    font-size: 1.2rem;
    color: var(--text-color);
    margin-bottom: 10px;
}
.caixinha-section p {
    font-size: .9rem;
    color: var(--text-color);
    margin-bottom: 10px;
}

/* Contêiner das caixinhas */
.caixinha-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
}

/* ---------------- CARD ---------------- */
.caixinha-card {
    border-radius: 10px;
    padding: 0 5px;
    width: calc(50% - 20px);      /* duas por linha */
    box-shadow: 0 0 10px rgba(0,0,0,.1);
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    background-color: var(--cota-card-background);
}

/* Descrição do prêmio */
.caixinha-value{
    font-size: 0.7rem;
    color: var(--cota-card-text);
    padding: 5px;
    border-radius: 3px 3px 0 0;
    width: 100%;
    text-align: left;
    font-weight: bold;
}

/* ---- BLOCO STATUS (sem número) ---- */
.caixinha-info-only-status {
    width: 100%;
    height: 25px;
    background-color: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

/* Container colorido (“Disponível” / “Encontrado”) */
.caixinha-status-container {
    background: linear-gradient(to right,#32cd33,#33ee11); /* verde padrão */
    padding: 0 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    height: 100%;
}
.caixinha-status-content {
    display: flex;
    align-items: center;
}
.caixinha-status-dot {
    width: 6px; height: 6px;
    background-color: #fff;
    border-radius: 50%;
    margin-right: 5px;
}
.caixinha-status {
    color: #fff;
    font-size: .7rem;
    font-weight: bold;
}

/* ------------ QUANDO FOI ENCONTRADA ------------- */
.caixinha-card.caixinha-encontrada {
    background: linear-gradient(to right,#FF0036,#FD0C15);
    box-shadow: 0 0 10px rgba(255,4,0,.5);
}
.caixinha-card.caixinha-encontrada .caixinha-status-container {
    background: linear-gradient(to right,#800000,#FF0000);
}
.caixinha-card.caixinha-encontrada .caixinha-value {
    color: #fff;
}

/* Nome do ganhador (mostra só se encontrada) */
.caixinha-winner {
    padding: 2px 5px;
    font-size: .7rem;
    font-weight: bold;
    color: var(--cota-card-text);
    display: flex;
    align-items: center;
    gap: 4px;
}
.caixinha-winner .material-symbols-outlined {
    font-size: 18px;
}

/* ---------------- RESPONSIVO ---------------- */
@media (max-width:768px){
    .caixinha-card         { width: calc(50% - 10px); }
    .caixinha-value        { font-size: .5rem; }
    .caixinha-status       { font-size: .5rem; }
    .caixinha-winner       { font-size: .5rem; }
    .caixinha-winner .material-symbols-outlined { font-size: .8rem; }
}

.premio-icon{
    color: #fff;
}
.premio-icon .material-symbols-outlined{
    font-size:18px;              /* ajuste de tamanho */
    color:var(--primary-color);  /* mude se quiser outra cor para o pictograma */
}

/* (opcional) se quiser manter o contraste mesmo quando “Encontrada” */
.caixinha-encontrada .premio-icon{
    background:#fff;             /* continua branca */
    color:#FF0036;               /* ou a cor que preferir */
}