.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    transition: transform 0.3s ease;
    width: 100%; /* Garante que o container ocupe toda a largura disponível */
}

#cart-section {
    position: fixed;
    top: 13%;
    right: 0;
    width: 22%;
    height: 70%;
    background-color: #ffffff;
    border: 1px solid var(--border-cart);
    border-right: none;
    border-radius: 15px 0 0 15px;
    box-shadow: -3px 5px 5px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    padding: 20px;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#cart-section .bottom {
    margin-top: auto; /* Faz a div.bottom ficar no final */
    margin-bottom: 25px;
}

#cart-section.open {
    transform: translateX(0); /* Faz o carrinho deslizar para dentro da tela */
}

#toggle-cart-button {
    position: fixed;
    right: -5px;
    top: 5em;
    /* font-size: 20px; */
    padding: 10px;
    background-color: white;
    border: 1px solid var(--btn-buy-cart);
    border-radius: 15px 0 0 15px;
    color: var(--btn-buy-cart);
    z-index: 10;
    transition: transform 0.3s ease;
    border-right: none;
}

.btn-trash i {
    font-size: 0.9rem; /* Tamanho menor */
    color: var(--btn-trash-cart); /* Cor personalizada */
    background: transparent; /* Sem fundo */
}

.btn-trash:hover {
    transform: scale(1.1);
}

/* Remover borda do card */
.list-group-item {
    border: none; /* Remove a borda do item */
}

/* Alterando o botão de excluir para ter um tamanho adequado */
.btn-sm {
    padding: 0.25rem 0.5rem;
}

/* Botão "mais" */
.btn-decrement,
.btn-increment,
.btn-decrement:hover,
.btn-increment:hover {
    background-color: var(--btn-add-cart); /* Cor do botão */
    color: white; /* Cor do texto */
    font-size: 1rem;
    height: 25px;
    display: flex; /* Usando flexbox */
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    padding: 0 10px; /* Ajuste o padding se necessário */
    border: none; /* Opcional, se você quiser remover a borda */
    border-radius: 4px; /* Opcional, para bordas arredondadas */
}

.quantity-buttons {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ffd3ef;
    border-radius: 5px;
    gap: 5px;
    height: 25px;
}

@media (min-width: 768px) and (max-width: 1024px) {

    #cart-section {
        top: 20%;
    }
}

/* Ajustes gerais para mobile */
@media (max-width: 768px) {
    #cart-section {
        width: 100%; /* Carrinho ocupa toda a largura */
        height: 80%; /* Define altura para o carrinho */
        bottom: 0; /* Posiciona no rodapé */
        border-radius: 15px 15px 0 0; /* Canto arredondado no topo */
        border: 1px solid #810E56;
        transform: translateY(100%); /* Esconde o carrinho fora da tela */
        transition: transform 0.3s ease; /* Animação suave */
        position: fixed;
        z-index: 1000;
    }

    #cart-section.open {
        transform: translateY(0); /* Faz o carrinho deslizar para cima */
    }

    #toggle-cart-button {
        position: fixed; /* Fixa na tela */
        align-items: center;
        justify-content: center;
        z-index: 1; /* Certifica que o botão está acima de outros elementos */
        border: 2px solid #810E56;
    }


    #toggle-cart-button i {
        font-size: 20px; /* Tamanho do ícone */
    }

    .quantity-buttons input {
        width: 50px; /* Reduz largura do input */
    }

    .btn-sm {
        font-size: 0.9rem; /* Ajusta tamanho dos botões */
    }

}

@media (max-width: 576px) {
    #cart-section {
        height: 90%; /* Aumenta altura em telas menores */
    }


    .btn {
        font-size: 0.8rem;
        padding: 5px 10px;
    }

      #cart-section.open {
        transform: translateY(0); /* Faz o carrinho deslizar para cima */
    }
}
/* Ajustes gerais para os cards na seção de planos */

/* Ajustes para telas pequenas (menor que 768px) */
@media (max-width: 768px) {
    .quantity-buttons input {
        width: 50px; /* Ajusta o tamanho do input */
    }

    .btn-sm {
        font-size: 0.9rem; /* Ajusta o tamanho dos botões */
    }
}

/* Ajustes para telas muito pequenas (menor que 576px) */
@media (max-width: 576px) {
    .quantity-buttons input {
        width: 40px; /* Ajusta o tamanho do input */
    }

    .btn-sm {
        font-size: 0.8rem; /* Ajuste do botão */
    }
}

/* Contêiner para os botões */
.button-container {
    display: flex;
    flex-direction: column;
    gap: 0; /* Remove o gap entre os botões */

}

/* Botão para ver detalhes do plano */
.btn-details {
    width: 100%; /* Ocupa 100% da largura */
    background-color: var(--btn-details-cart); /* Cor meio transparente */
    color: #494949;
    border-radius: 15px 15px 0 0; /* Bordas arredondadas no topo */
    padding: 15px;
    display: flex;
    height: 20px;
    justify-content: center; /* Centraliza horizontalmente o texto e o ícone */
    align-items: center;
    border-top: 1px solid #B599FF; /* Borda no topo */
    font-size: 16px;
    margin-bottom: 0; /* Remove o espaçamento inferior */
    cursor: pointer;
    transition: all 0.3s ease; /* Transição suave */
    text-align: center; /* Centraliza o texto */
}

.btn-details:hover {
    background-color: var(--btn-details-hover-cart); /* Cor meio transparente (25% opacidade) */
    border-top: 1px solid #B599FF; /* Borda no topo com a cor sólida */
}

.btn-continue:hover {
    background-color: var(--btn-continue-hover-cart);
    color: white;
}


.btn-details span {
    flex-grow: 1; /* Faz o texto ocupar o espaço restante */
    text-align: center;
    font-size: 15px;
}

.btn-details span i {
    margin-left: 10px;
}

/* Botão "Continuar Compra" */
.btn-continue {
    width: 100%; /* Ocupa 100% da largura */
    background-color: var(--btn-continue-cart);
    color: white;
    border-radius:  0 0 15px 15px;
    font-size: 18px;
    border: none;
    height: 45px;
    text-align: center;
}

/* Estilo para o ícone de seta */
.fas.fa-arrow-up {
    font-size: 18px;
}

.plan-details-card {
    position: absolute; /* Posiciona o card em relação ao botão inicial */
    bottom: 100%; /* Exibe o card acima do botão */
    left: 0; /* Alinha à esquerda */
    width: 100%; /* Faz com que o card ocupe toda a largura do botão */
    z-index: 3; /* Garante que o card fique acima de outros elementos */
    background-color: var(--btn-details-background-cart); /* Fundo semitransparente */
    border-radius: 15px 15px 0 0;
    max-height: 0; /* Inicialmente oculto */
    opacity: 0; /* Invisível inicialmente */
    overflow-y: auto;
    transition: max-height 0.6s ease, opacity 0.1s ease; /* Transição suave */
}

/* Classe que exibe o card */
.plan-details-card.show {
    max-height: 500px; /* Ajuste conforme necessário */
    opacity: 1;
}


/* Animação de transição para o card */
@keyframes slideIn {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Classe que esconde o card */
.hidden {
    display: none;
}

.plan-details-card .card-detail {
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
    margin-bottom: 20px;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    pointer-events: auto;
}

.icon-spacing {
    margin-right: 10px; /* Espaço entre os ícones */
}

#cart-items .list-group-item {
    font-size: 0.9rem;  /* Reduz o tamanho da fonte */
    padding: 5px 10px;   /* Reduz o padding */
}

#cart-items .quantity-buttons button {
    font-size: 1rem;  /* Reduz o tamanho dos botões */
    padding: 2px 8px;
}

#cart-items .btn-trash {
    font-size: 0.75rem;  /* Reduz o tamanho do ícone de lixeira */
    padding: 2px 6px;
}

.beneficiary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
}
.title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.discount-highlight {
    color: #28a745;
    font-weight: bold;
    animation: pulse 1s infinite alternate;
}

#cart-plan-link-1 {
    text-decoration: none;
    color: var(--title-cart);
}

#cart-plan-link-1:hover {
    text-decoration: none;
}


.tooltip-container {
    position: relative;
    display: inline-block;
    cursor: help;
}

.tooltip-container .asterisk {
    color: var(--title-asterisk);
    font-weight: bold;
    margin-left: 4px;
    font-size: 1.5rem; /* Aumenta o tamanho (ajuste conforme necessário) */
    line-height: 1;     /* Garante alinhamento vertical */
}

.tooltip-container .tooltip-text {
    visibility: hidden;
    opacity: 0;
    width: 220px;
    background-color: #333;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* aparece acima */
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.3s;
    font-size: 0.875rem;
    pointer-events: none; /* evita clique */
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}



@keyframes pulse {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(1.01);
        opacity: 0.8;
    }
}

.juridica-header {
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    background-color: #A60069 !important;
    color: white;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.juridica-wrapper {
    background: #fdf1f9;
    border-top-left-radius: 15px !important;
    border-top-right-radius: 15px !important;
    border: 1px solid #A60069 !important;
        max-width: 800px;         /* define a largura desejada */
    margin: 0 auto;           /* centraliza horizontalmente */
}

.juridica-wrapper .row {
    font-size: 0.9rem;
}

.juridica-wrapper i.fa-chevron-down {
    transition: transform 0.3s ease;
}

.juridica-header.collapsed i.fa-chevron-down {
    transform: rotate(-90deg);
}

.btn-trash-pj{
    color: #fff;
}

.btn-trash-pj:hover{
    transform: scale(1.1);
}
/* Garante que o botão sempre esteja visível acima de tudo */
#toggle-cart-button {
    z-index: 9999 !important;
    display: flex; /* Garante visibilidade */
    align-items: center;
    justify-content: center;
}

/* Em telas pequenas, reforça posição fixa do botão */
@media (max-width: 768px) {
    #toggle-cart-button {
        bottom: 100px; /* Eleva o botão para não ser encoberto pelo carrinho */
        top: auto !important; /* Remove top se necessário */
    }
}