/*personalização do SVG*/
:root {
    /*bordas*/
    --cor-borda-poltrona-bloqueada: lightgray;
    /*Mapa_ônibus*/
    --cor-poltrona-individual-class: #02559D;
    --cor-poltrona-bloqueada: lightgray;
}

#assento_mulher, #assento_individual_class, #assento_livre, #assento_selecionado, #assento_promocional {
    width: 15px;
}

.assento-promocional {
    fill: var(--cor-poltrona-promocao);
}

.assento-livre {
    fill: var(--cor-poltrona-livre);
}

.assento-selecionado {
    fill: var(--cor-poltrona-selecionada);
}

.assento-mulher {
    fill: var(--cor-poltrona-mulher);
}

.assento-individual-class {
    fill: var(--cor-poltrona-individual-class);
}

/* #region cabecalho mapa de poltronas */
.cabecalhoMapaPoltronas {
    padding-top: 0.5rem;
    flex-direction: row;
    justify-content: space-between;
}

.detalheTrechoMapaPoltronas {
    width: auto;
    font-size: 0.7rem;
    font-weight: 600;
}

    .detalheTrechoMapaPoltronas .detalheTrechoMapaPoltronas {
        width: 80vw;
    }

    .detalheTrechoMapaPoltronas .origemDestinoMapa {
        font-weight: 400;
    }

.btnCloseMapaPoltronas {
    width: auto;
    font-size: 1.6rem;
}
/* #endregion */
/* #region body mapa de poltronas */

.iconesPoltronas {
    display: flex;
    text-align: start;
    font-size: 0.75rem;
    margin: 0.5rem 0.5rem 1.1rem 0;
    justify-content: space-between;
    flex-wrap: nowrap;
}

    .iconesPoltronas img {
        height: 1rem;
    }


    .iconesPoltronas div {
        padding-right: 0.1rem;
        color: var(--cor-font-scape-secundaria);
    }

.mapa {
    background-color: white;
}

#labelLivre {
    margin-right: 1rem;
}

#labelPromo {
    margin-right: 1rem;
}

#labelMulher {
    margin-right: 1rem;
}

#labelIndividualClass {
    margin-right: 1rem;
    margin-right: 16px;
}

#labelSelecionado {
    margin-right: 1rem;
}

.collapse {
    padding: 0;
}

.selecaoAndar {
    width: 100%;
    padding-bottom: 0.7rem;
}

.spanVerPisoSuperior {
    margin-right: .3rem;
    font-weight: 500;
    color: var(--cor-font-scape-secundaria);
}

.selecaoAndarMapaPoltronas {
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 79%;
}

    .selecaoAndarMapaPoltronas span {
        font-size: .7rem;
    }

    .selecaoAndarMapaPoltronas button {
        margin-left: .1rem;
    }

.alinharSpanAoBotao {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.botaoPisoMapaPoltrona {
    width: 7rem;
    font-size: .7rem;
    font-weight: 500;
    background-color: var(--cor-botao-secundario);
    color: var(--cor-terciario);
    border-radius: 5px !important;
    margin: 0px !important;
}

    .botaoPisoMapaPoltrona.semSelecao {
        height: 2.2rem !important;
        color: var(--cor-primaria);
        background-color: var(--cor-botao-secundario);
        border: 1px solid var(--cor-primaria);
        margin: 0px !important;
    }

    .botaoPisoMapaPoltrona.selected {
        background-color: var(--cor-font-scape) !important;
        color: var(--cor-terciario);
        height: 2.2rem;
        margin: 0px !important;
    }


.alinharBotoesPiso {
    display: flex;
}

.alinharSpanIcon {
    display: flex;
    align-items: center;
    justify-content: center;
}

#btnPisoInferiorSuperior, #btnPisoInferiorInferior {
    border-radius: 5px 0px 0px 5px !important;
}

#btnPisoSuperiorSuperior, #btnPisoSuperiorInferior {
    border-radius: 0px 5px 5px 0px !important;
}


.contentMapa {
    display: flex;
    justify-content: space-between;
    padding: 0;
}

#txtTotalCompra {
    color: var(--cor-font-primaria);
    font-size: 1.3rem;
    font-weight: 700;
}



.mapaPoltrona .pisoInferior {
    display: none;
    justify-content: space-between;
    align-content: space-between;
    flex-wrap: wrap;
}

.mapaPoltrona .pisoSuperior {
    justify-content: space-between;
    align-content: space-between;
    display: none;
    flex-wrap: wrap;
}

.pisoInferior.selecionado,
.pisoSuperior.selecionado {
    display: flex;
    position: relative;
    padding-top: 0.4rem;
    margin-left: 2rem;
    flex-direction: column;
}

.selected:after {
    content: none !important;
}

.selected:before {
    content: none !important;
}

.ladoEsquerdo {
    margin-top: 1.1%;
    margin-bottom: 1.5%;
}

.mapaPoltrona {
    width: 755px;
    position: relative;
}

.ladoDireito {
    margin-top: 1.5%;
    margin-bottom: 1.5%;
}

    .ladoDireito div, .ladoEsquerdo div {
        flex-flow: nowrap;
    }

.poltrona {
    margin-left: 4px;
    margin-bottom: 4px;
    text-align: center;
    font-size: .8rem;
    height: 36px !important;
    color: transparent;
    background-repeat: no-repeat;
    background-color: transparent;
    width: 36px;
    cursor: default;
    background-position: center;
    background-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .poltrona:hover {
        cursor: default;
    }

.livre:hover {
    cursor: pointer;
}

.ocupada {
    background-image: url(../../../img/Icons/x_poltrona.svg);
    border-radius: 4px;
    border: 1px solid lightgrey;
    cursor: default;
}

.livre {
    color: var(--cor-fonte-poltrona-livre);
    background-color: var(--cor-poltrona-livre);
    background-image: none;
    border: var(--cor-borda-poltrona) solid 1px;
    background-repeat: no-repeat;
    background-attachment: local;
    cursor: pointer;
}

.selecionada {
    color: var(--cor-fonte-poltrona-selecionada);
    background-color: var(--cor-poltrona-selecionada);
    background-repeat: no-repeat;
    background-attachment: local;
    border: var(--cor-borda-poltrona-secundaria) solid 1px
}

.livre.promo {
    color: var(--cor-terciario);
    background-color: var(--cor-poltrona-promocao);
    background-repeat: no-repeat;
    background-attachment: local;
    border: var(--cor-poltrona-promocao) solid 1px
}

    .livre.promo.selecionada {
        color: var(--cor-fonte-poltrona-selecionada);
        background-color: var(--cor-poltrona-selecionada);
        background-repeat: no-repeat;
        background-attachment: local;
        border: var(--cor-poltrona-selecionada) solid 1px
    }


.livre.mulher {
    color: var(--cor-terciario);
    background-color: var(--cor-poltrona-mulher);
    background-repeat: no-repeat;
    background-attachment: local;
}

    .livre.mulher.selecionada {
        color: var(--cor-fonte-poltrona-selecionada);
        background-color: var(--cor-poltrona-selecionada);
        background-repeat: no-repeat;
        background-attachment: local;
    }

    .livre.mulher.promo {
        color: var(--cor-terciario);
        background-color: var(--cor-poltrona-mulher);
        background-repeat: no-repeat;
        background-attachment: local;
    }

        .livre.mulher.promo selecionada {
            color: var(--cor-primaria);
            background-color: var(--cor-poltrona-selecionada);
            background-repeat: no-repeat;
            background-attachment: local;
        }

.livre.individualClass {
    color: var(--cor-terciario);
    background-color: var(--cor-poltrona-individual-class);
    background-repeat: no-repeat;
    background-attachment: local;
}

    .livre.individualClass.selecionada {
        color: var(--cor-fonte-poltrona-selecionada);
        background-color: var(--cor-poltrona-selecionada);
        background-repeat: no-repeat;
        background-attachment: local;
    }

.bloqueada.individualClass {
    color: var(--cor-terciario);
    background-color: var(--cor-poltrona-bloqueada);
    background-repeat: no-repeat;
    background-attachment: local;
    border-color: var(--cor-borda-poltrona-bloqueada);
    cursor: not-allowed !important;
    pointer-events: none;
    background-image: url(../../../img/Icons/cadeado_bloqueado.png);
    background-repeat: no-repeat;
    background-size: 20px;
}
/* #endRregion */
/* #region footer do mapa de poltronas */

.detalhesDoTrecho {
    padding-left: .5%;
    padding-right: .5%;
    padding-bottom: 0.7rem;
}
/* Estilos base (funciona em qualquer tamanho) */
.linhaEmbarqueDesembarque {
    display: flex;
    flex-wrap: wrap; /* Permite quebra de linha em telas pequenas */
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--cor-font-scape-secundaria);
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    gap: 0.3rem; /* Espaço entre embarque e desembarque */
}

/* Adiciona vírgula apenas em telas grandes */
@media (min-width: 1099px) {
    .embarque::after {
        content: ",";
    }
}

/* Quebra em linhas separadas em telas pequenas */
@media (max-width: 1098px) {
    .linhaEmbarqueDesembarque {
        flex-direction: column;
        gap: 0.2rem;
    }
}

.detalhesDoTrecho span {
    padding-left: 0;
    align-self: center;
    font-weight: 400;
}

.resumoTotal {
    display: flex;
    justify-content: right;
    padding-bottom: .5rem
}

#txtTituloCompra {
    color: var(--cor-font-secundaria);
    padding-right: 1rem;
    font-size: 1rem;
    font-weight: 400;
    align-self: flex-end;
}

.tituloAssentosMapa {
    color: var(--cor-primaria);
}

    .tituloAssentosMapa .detalhe {
        color: var(--cor-font-scape-secundaria);
        font-size: .8rem;
    }

.assentosSelecionados {
    display: flex;
    flex-direction: column !important;
    gap: 5px;
    font-size: .8rem;
    font-weight: 500;
    color: var(--cor-primaria);
}

    .assentosSelecionados .row {
        margin-bottom: 0.5rem;
        justify-content: space-between;
    }

    .assentosSelecionados span {
        width: auto;
        font-weight: 400;
        color: var(--cor-font-quartearia);
    }

    .assentosSelecionados img {
        height: 1.3rem;
        margin-right: .7rem;
        margin-left: .5rem;
        width: auto;
    }

    .assentosSelecionados .preco {
        font-weight: 400;
        font-size: .8rem;
    }

#labelMaisPoltrona span {
    margin-bottom: 0.4rem;
}

.maisPoltronas {
    font-size: .8rem;
    color: var(--cor-font-quartearia);
    margin-left: -.2%;
}

#divisoriaMaisPassageiros {
    margin: 0.9rem 0 0.9rem 0;
    height: 1px !important;
    background: var(--cor-detalhes-quarteario);
    margin-left: -1%;
}


.totalCompra {
    text-align: right;
    font-size: .8rem;
    margin-top: .5rem;
}

    .totalCompra span {
        font-size: 1rem;
        font-weight: 400;
    }

.esconder {
    display: none;
}

.mostrar {
    visibility: visible;
}

.footerBotaoMapaPoltronas {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.botaoContinuarMapaPoltrona {
    height: 2.5rem;
    font-size: .8rem;
    font-weight: 600;
    width: 100%;
    background: var(--cor-botao-primario);
    color: var(--cor-letra-botao-primario);
}

    .botaoContinuarMapaPoltrona:disabled {
        background: var(--cor-desativado);
        color: var(--cor-letra-botao-primario);
    }

    .botaoContinuarMapaPoltrona:hover {
        color: var(--cor-letra-botao-primario);
    }
/* #endregion */
.poltronasMaiores {
    display: none;
}

#imgOnibusDesktop {
    position: absolute;
    display: flex;
}

#imgOnibusDesktop_superior {
    position: absolute;
    display: block;
}

.divContinuar {
    align-items: center;
    width: 100%;
    margin: 0.5rem 0.5rem 1rem 0;
}

#assento_ocupado {
    border-radius: 4px;
    border: 1px solid lightgrey;
    width: 15px;
    height: 16px;
}

#assento_livre {
    margin-right: 3px;
}

#assento_selecionado {
    margin-right: 3px;
}

#assento_promocional {
    margin-right: 3px;
}

#assento_mulher {
    margin-right: 3px;
}

#assento_individual_class {
    margin-right: 3px;
}

#seusAssentos {
    font-weight: 600;
    font-size: .9rem;
    margin-bottom: .5rem;
}

#detalhes {
    height: 70%;
}

svg#check {
    width: 20px;
}

    svg#check path {
        fill: var(--cor-botao-secundario) !important;
    }

@media(min-width: 1261px) and (max-width: 1320px) {
    .livre {
        width: 2.2rem !important;
    }
}

@media (max-width: 1330px) {
    .contentMapa {
        flex-direction: column;
    }

    .detalhesDoTrecho {
        display: flex;
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        padding-bottom: 1rem;
    }

    #seusAssentos {
        margin-bottom: 0 !important;
    }

    .tituloAssentosMapa .detalhe {
        margin-top: 0.5rem;
    }

    #detalhes {
        width: 60%;
    }

    #listaAssentos {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
    }

        #listaAssentos row {
            margin-right: 1rem;
        }

    .assentosSelecionados .preco {
    }

    .maisPoltronas {
        margin-top: 0 !important;
    }

    .resumoTotal {
        padding: 0;
        padding-bottom: .5rem;
    }

    .totalCompra {
        margin-top: 0rem !important;
        flex-direction: column;
        justify-content: flex-end;
        width: 30%;
        padding-bottom: 0.4rem;
    }

    .resumoTotal {
        margin: 0 !important;
    }

    .divContinuar {
        margin: 0 !important;
        padding: 0 !important;
    }

    .tituloAssentosMapa {
        margin-top: 0.5rem;
    }

    #labelMaisPoltrona span {
        margin-bottom: 0 !important;
    }

    #divisoriaMaisPassageiros {
        margin-left: -0.4% !important;
    }

    .assentosSelecionados .row {
        width: 45%;
        flex-direction: column;
        align-content: flex-start;
    }

    #divisoriaMaisPassageiros {
        margin: 0.1rem 0 0.7rem 0;
        height: 1px !important;
        background: var(--cor-detalhes-quarteario);
        margin-left: -1%;
    }

    .iconesPoltronas {
        margin: 0.5rem 0.5rem 0.4rem 0;
    }
}

@media (max-width: 820px) and (max-height: 1180px) {

    .cardHorario {
        display: flex;
        margin-top: 1rem;
    }

    table {
        margin-top: -4rem;
        margin-left: -2rem;
        width: 109%;
    }

    .detahesModalidadeHorariosCard {
        width: 0%;
    }

    .detalhesHorariosCard {
        width: 9.1rem;
        padding-right: 2.1rem;
    }

    #imgEmpresa {
        padding-left: 0.5rem;
    }

    .precoTotalPassagens {
        padding-left: 2rem;
    }

    #horaPartida, #horaChegada {
        font-size: 1rem;
    }

    .cidadeChegada, .cidadePartida {
        font-size: .7rem
    }

    .detahesModalidadeHorariosCard {
        font-size: .7rem;
    }

    .cidadePartida_Chegada {
        padding-left: 1.1rem;
        font-size: .7rem
    }

    .filtroOrdenacao {
        justify-content: initial;
        display: flex;
        align-items: center;
    }

    spanSemDisponibilidade {
        font-size: .7rem;
    }

    #imgOnibusDesktop {
        width: 46rem;
    }

    .iconesPoltronas {
        font-size: .75rem;
    }

    .textoDetalhes {
        padding-bottom: 0.5rem;
    }

    #imgOnibusDesktop_superior {
        display: none;
        width: 46rem;
    }

    .mapaPoltrona {
        width: 730px;
    }

    .resumoTotal {
        padding-bottom: 0.5rem;
    }

    .partialFiltros {
        padding-left: 2rem;
    }

    .itensBusca {
        margin-right: 1.9rem;
        margin-left: 1.9rem;
    }

    .Passagem_Horarios {
        flex-direction: row;
    }

    #partialfiltros {
        display: flex;
        flex-direction: column;
    }
}

@media (max-width: 777px) and (max-height: 1024px) {

    .cardHorario {
        display: flex;
    }

    .Passagem_Horarios {
        flex-direction: row;
    }

    #partialfiltros {
        display: flex;
        flex-direction: column;
    }

    table {
        margin-top: -7rem;
        margin-left: -0.19rem;
        width: 100%;
    }

    .detahesModalidadeHorariosCard {
        width: 0%;
    }

    .detalhesHorariosCard {
        width: 9.1rem;
        padding-right: 2.1rem;
    }

    #imgEmpresa {
        padding-left: 0.5rem;
    }

    .precoTotalPassagens {
        padding-left: 2rem;
    }

    #horaPartida, #horaChegada {
        font-size: 1rem;
    }

    .cidadeChegada, .cidadePartida {
        font-size: .7rem
    }

    .detahesModalidadeHorariosCard {
        font-size: .7rem;
    }

    .cidadePartida_Chegada {
        padding-left: 1.1rem;
        font-size: .7rem
    }

    .filtroOrdenacao {
        justify-content: initial;
        display: flex;
        align-items: center;
        margin-top: 0.7rem;
    }

    .spanSemDisponibilidade {
        font-size: .7rem;
    }

    #imgOnibusDesktop {
        width: 44rem;
    }

    .iconesPoltronas {
        font-size: .75rem;
    }

    .textoDetalhes {
        padding-bottom: 0.5rem;
    }

    #imgOnibusDesktop_superior {
        display: none;
        width: 46rem;
        padding-right: 2rem;
    }

    .mapaPoltrona {
        width: 697px;
    }

    .resumoTotal {
        padding-bottom: 0.5rem;
    }

    .partialFiltros {
        padding-left: 2rem;
    }

    .itensBusca {
        margin-right: 2.2rem !important;
        margin-left: 1.9rem !important;
    }

    .ladoDireito, .ladoEsquerdo {
        width: 4%;
    }
}


.icon-bus-ida, icon-bus-volta {
    fill: var(--cor-primaria) !important;
    width: 85%;
}


/*FILTRO GRATUIDADE*/
.escondido {
    display: none;
}

.containerButton {
    padding: 0 0 1rem 1rem;
}

[id^="opcoes-"] {
    position: absolute;
    z-index: 1; /* Garante que as opções fiquem acima da imagem */
}

.buttonStyle {
    height: 1.8rem;
}

#infoLinhaFiltro {
    display: flex;
    font-size: .7rem;
    justify-content: space-between;
    margin: 0 0 0 0.6rem;
    padding-right: .9rem;
}

#botaoExcluir {
    color: var(--cor-botao-letra-secundario);
    border-radius: 5px;
    font-size: .9rem;
    font-weight: 600;
    border-color: var(--cor-borda-terciario);
    width: 7rem;
}

/*PopUp Upgrade*/
.upgradeModalidadePopUp {
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modalUpgradeBody {
    width: 90%;
    align-self: center;
}

.contentUpgradeModal {
    width: 130%;
}

.containerImg {
    padding: 0.4rem 1rem;
}

.close {
    border: none;
    background: none;
    font-size: 1.6rem;
    color: var(--cor-detalhes-primaria);
}

.tituloInfoVendas {
    margin: 0;
    font-weight: bold;
    color: var(--cor-primaria);
}

.subTituloInfoVendas {
    font-weight: bold;
    color: var(--cor-poltrona-livre);
    margin: 0;
}

.containerButtonUpgrade {
    display: flex;
    justify-content: space-between;
    border: 1px solid var(--cor-secundaria);
    background: var(--cor-secundaria);
    padding: 0.3rem;
    border-radius: 0.4rem;
    cursor: pointer;
    margin-top: .7rem;
    margin-bottom: .7rem;
    color: var(--cor-botao-letra-quarteario);
}

.containerInfosInicio {
    justify-content: space-between;
    display: flex;
}

    .containerInfosInicio div {
        margin-bottom: .4rem;
    }

.containerValorDiferenca {
    margin-bottom: 1rem;
}

.containerButtonRecusar {
    display: flex;
    justify-content: space-between;
    border: 1px solid var(--cor-secundaria);
    background: var(--cor-terciario);
    padding: 0.3rem;
    border-radius: 0.4rem;
    cursor: pointer;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.contentUpgradeModal {
    background-color: #EDEDED;
    border: none;
    border-radius: 20px;
}

.headerUpgradeModal {
    flex-direction: column;
    border-bottom: 1px solid #dee2e6;
}

.informacoesViagemSelecionada {
    border: 1px solid var(--cor-primaria);
    border-radius: 5px;
    background-color: var(--cor-terciario);
    height: 100%;
    width: 270px;
}

    .informacoesViagemSelecionada span, .informacoesViagemUpgrade span {
        font-size: smaller;
        color: var(--cor-secundaria);
    }

    .informacoesViagemSelecionada a, .informacoesViagemUpgrade a {
        font-size: smaller;
    }

.tituloQuadroModalidadeSelecionada {
    background: var(--cor-fundo-modalidade-selecionado);
    height: 2rem;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin-top: 0.4rem;
}

.tituloQuadroModalidadeUpgrade {
    background: var(--cor-fundo-modalidade-upgrade);
    height: 2rem;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin-top: 0.4rem;
}

#spansInformacoesSelecionada {
    padding: 0 0.8rem;
}

#spansInformacoesUpgrade {
    padding: 0 0.8rem;
}

.suaEscolhaAtual {
    display: block;
    text-align: center;
    margin: 0.5rem;
    color: var(--cor-poltrona-livre) !important;
    font-size: 1rem !important;
}

.informacoesViagemUpgrade {
    border-radius: 5px;
    background-color: var(--cor-terciario);
    height: 100%;
    width: 270px;
}

.spanSugestaoUpgrade {
    margin-bottom: 0px !important;
}

.precoUpgrade {
    display: block;
    text-align: center;
    margin: 0.5rem 0.5rem 0rem 0.5rem;
    font-size: 1.2rem;
}

.tituloTipoViagemSelecionada, .tituloTipoViagemUpgrade {
    text-align: center;
    color: var(--cor-primaria);
    font-family: "Open Sans",Arial,Helvetica,Sans-Serif !important;
}

.tituloTipoViagemSelecionada {
    background-color: var(--cor-fundo-modalidade-selecionado);
}

.tituloTipoViagemUpgrade {
    background-color: var(--cor-fundo-modalidade-upgrade);
}

.footerUpgrade {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.infoPorPoltrona {
    display: flex;
    justify-content: center;
    font-size: 0.75em;
}
/*Upgrade SVG*/
#arrow-right-modal {
    width: 2rem;
    margin: 0.8rem;
    fill: var(--cor-poltrona-livre);
    stroke: var(--cor-poltrona-livre);
    stroke-width: 3px;
}