/*
 * OP-3406: CTA "Comprar ingressos" flutuante.
 *
 * O nó continua sendo o mesmo `.div-total-submit` do CarrinhoWidget: nada é
 * clonado nem movido no DOM, só muda o posicionamento. Assim os ids
 * (#botao-comprar, #total_geral), o onclick, os hidden inputs do form e o
 * botão "Continuar" seguem valendo exatamente como antes.
 *
 * O wrapper reserva a altura natural do bloco enquanto ele flutua, para a
 * página não encolher no meio do scroll. O recuo interno da barra e o
 * deslocamento inferior são escritos pelo cta-flutuante.js.
 */

/* O wrapper virou o item flex da linha no lugar do bloco do total, então
   precisa da mesma largura cheia — sem isso ele encolheria para o conteúdo.
   Recebe também o fundo do bloco porque a calha do Bootstrap (`.row > *`)
   recua o conteúdo ~10px de cada lado: sem o fundo aqui, essa calha aparece
   como duas faixas brancas ao lado do CTA, tanto ancorado quanto no espaço
   reservado enquanto ele flutua. */
.bd-cta-wrapper {
    position: relative;
    width: 100%;
    background-color: #F5F5F5;
}

/* Barra colada na base da viewport e ocupando a largura inteira: qualquer
   recuo lateral ou inferior deixaria o conteúdo da página aparecer por baixo
   dela durante a rolagem. O alinhamento do total e do botão com a coluna de
   conteúdo é feito pelo recuo interno, escrito pelo JS. */
.div-total-submit.bd-cta-flutuante {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 900;
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    padding: 12px 20px;
    border-radius: 0;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.18);
}

.div-total-submit.bd-cta-flutuante .box-total {
    margin-bottom: 0;
    white-space: nowrap;
}

.div-total-submit.bd-cta-flutuante .box-total,
.div-total-submit.bd-cta-flutuante .box-total span,
.div-total-submit.bd-cta-flutuante .box-total #total_geral {
    font-size: 28px !important;
    line-height: 100%;
}

.div-total-submit.bd-cta-flutuante .botoes-submit-cart {
    margin: 0;
    padding: 0;
    min-height: 0;
}

@media (max-width: 767px) {
    .div-total-submit.bd-cta-flutuante {
        justify-content: space-between;
        gap: 12px;
        padding: 12px 16px;
    }

    .div-total-submit.bd-cta-flutuante .box-total,
    .div-total-submit.bd-cta-flutuante .box-total span,
    .div-total-submit.bd-cta-flutuante .box-total #total_geral {
        font-size: 20px !important;
    }

    /* No fluxo normal o botão é block e ocupa a linha inteira; na barra ele
       divide espaço com o total, então volta a dimensionar pelo conteúdo.
       O nowrap evita o rótulo quebrar em duas linhas e engordar a barra. */
    .div-total-submit.bd-cta-flutuante .botoes-submit-cart button,
    .div-total-submit.bd-cta-flutuante .botoes-submit-cart .btn {
        width: auto !important;
        display: inline-block !important;
        padding: 12px 16px !important;
        margin: 0 !important;
        white-space: nowrap;
    }
}

@media print {
    .div-total-submit.bd-cta-flutuante {
        position: static;
        box-shadow: none;
    }
}