/*Section cards css expecificos da pagina fica aqui, e o global fica com b2c.css*/

/* Classes attraction-card proprias para o card desse página */

.attraction-content {
    padding: 16px;
    text-align: start;
}
/* Nesta página o card nao usa transforme */
.attraction-card:hover {
    transform: none;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* Expecifico paar essa pagina, para o botão (+info e comprar) fique lado a lado */
/*.attraction-footer {
    flex-direction: row;
}

.attraction-footer-top {
    width: auto;
}*/
/* Botao grande comprar */
.btn-buy-full {
    color: var(--color-text-white) !important;
}

.btn-buy-full:hover {
    color: var(--color-text-white);
}

/* Titulo do modal */
.modal-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}
.modal-header {
    width: 100%;
}
/* ignora o css de eventos, assim o conteudo preenche mais o modal */
.modal-content {
    align-items: stretch; 
}
/* Estilo do Botão fechar */
.modal-header .close {
    color: var(--text-dark);
    cursor: pointer;
    border-radius: 50%;
}


/* Bloqueia o scroll no fundo do site */
body.modal-open {
    overflow: hidden !important;
    position: fixed;
    width: 100%;
}

/* Força o scroll a aparecer dentro do modal se ele for alto */
.modal {
    overflow-y: auto !important;
}

/* Garante que o dialog ocupe a altura correta para o scrollable funcionar */
.modal-dialog-scrollable {
    max-height: calc(100% - 1rem);
}

.modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 1rem);
    overflow: hidden;
}
@media (max-width: 768px) {
    .section-date-calendar .datepicker {
        min-width: 300px
    }
}
/* Foi necessario para o designer ser apenas para desktop */
@media (min-width: 768px) {
    .time-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    /* paddibng modal */
    .modal-body {
        padding: 20px 50px;
    }

}
/* Max width para o calendario apenas para esse modal */
@media (min-width:768px) and (max-width: 991px) {
    .section-date-calendar .datepicker {
        min-width: 400px;
    }
}