/* Container que centraliza o conteúdo */
    #container-purchase {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;
        margin-bottom: 15em;
    }

    #card-purchase.reduced {
        transform: translateX(-10%);
        transition: transform 0.3s ease;
    }

    /* Estiliza o título alinhado à esquerda */
    .card-title {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 10px; /* Espaço entre o título e o card */
        text-align: center; /* Alinha o título à esquerda */
        width: 300px; /* Define a largura do título */
        color: var(--text-phase-by);
    }

    #card-purchase {
        background-color: white;
        border-radius: 15px; /* Bordas arredondadas */
        padding: 22px;
        width: 65%; /* Largura do card */
        height: 80%; /* Altura do card */
        box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3); /* Sombra leve */
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Garante que o conteúdo esteja no topo */
        align-items: flex-sta   rt; /* Alinha o conteúdo à esquerda */
        box-sizing: border-box; /* Inclui padding no cálculo da altura/largura */
    }

    #card-purchase .container-plan {
        width: 92%; /* Ajusta para ocupar toda a largura do card */
        max-height: 100%; /* Limita a altura ao espaço disponível no card */
        font-size: 0.9rem; /* Reduz o tamanho do texto */
        line-height: 1.3; /* Ajusta o espaçamento entre linhas */
        padding: 2px;
        box-sizing: border-box; /* Inclui padding no cálculo de largura/altura */
        margin-top: 10px;
    }

    .wizard-wrapper {
        display: flex;
        justify-content: center; /* Centraliza o conteúdo no centro da tela */
        position: relative;
        width: 100%; /* Ocupa 100% da largura disponível */
      }

      .wizard {
        display: flex;
        justify-content: space-between; /* Espaça as etapas uniformemente */
        align-items: center;
        position: relative;
        width: 90%; /* Ajuste a largura da wizard conforme necessário */
        gap: 40px; /* Aumenta o espaço entre as etapas */
      }

      .line {
        position: absolute;
        left: 5px;
        right: 0;
        top: 40%; /* Centraliza a linha na altura das etapas */
        transform: translateY(-50%); /* Ajuste fino para centralizar a linha */
        height: 5px;
        background-color: #ddd;
        transition: background-color 0.3s;
        width: 95%;
        /* color: var(--phase-step-by); */
      }

      .step-container {
        display: flex;
        flex-direction: column;
        align-items: center; /* Alinha os elementos ao centro */
        position: relative; /* Necessário para o alinhamento correto da linha */
      }

      .step {
        position: relative;
        width: 50px;
        height: 50px;
        background-color: #ddd;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        transition: background-color 0.3s, transform 0.3s;
      }

      .step.active {
        background-color: var(--phase-step-by);
        transform: scale(1.1);
        color: white;
      }

      .step-title {
        margin-top: 5px; /* Espaço entre a etapa e o título */
        font-size: 14px;
        color: #333; /* Cor do título */
        text-align: center;
      }

      .content {
        margin-top: 20px;
        text-align: center;
        font-size: 18px;
      }

      .step-content {
        display: none;
      }

      .step-content.active {
        display: block;
      }


      .form-adress,
      .form-data {
        margin: auto;
        padding: 30px;
        border-radius: 10px;
    }

    label {
        display: block;
        margin-bottom: 8px;
        font-weight: bold;
        text-align: left;
        color: #333;
    }

    .error {
        color: red;
        font-weight: bold;
        margin-top: 10px;
        text-align: left;
    }

    #card-purchase .form-control {
        width: 100%;
        padding: 15px;
        font-size: 1rem;
        border-radius: 10px;
        box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
        background-color: #F7F7F7;
        color: #555;
        transition: box-shadow 0.3s ease, transform 0.2s ease;
        border: none !important;
    }

    #card-purchase .form-control-sm {
        width: 100%;
        padding: 10px;
        border-radius: 10px;
        box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
        background-color: #F7F7F7;
        color: #555;
        transition: box-shadow 0.3s ease, transform 0.2s ease;
        border: none !important;
    }

    #card-purchase .label-sm {
        font-size: 15px;
    }

    #card-purchase .form-control:focus {
        border-color: #9C7EE3 !important;
        box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
        color: var(--bs-body-color);
        background-color: var(--bs-body-bg);
        border-color: #86b7fe;
        outline: 0;
        box-shadow: 0 0 0 .25rem rgba(216, 166, 242, 0.25);
    }

    .form-group {
        margin-bottom: 20px;
    }

    /* Close button */
    .close {
        background-color: #9C7EE3;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 5px;
        cursor: pointer;
    }

    .close:hover {
        background-color: #7a5fca;
    }

    #endereco-fields {
        display: none; /* Esconde os campos de endereço inicialmente */
    }

    /* Flexbox para organizar os campos lado a lado */
    .flex-row {
        display: flex;
        gap: 10px; /* Espaçamento entre os campos */
        flex-wrap: wrap; /* Para que em telas menores os campos se ajustem */
    }

    .flex-item {
        flex: 1;
        min-width: 150px; /* Define a largura mínima dos campos */
    }


    .form-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 30px;
      }

    .btn-purchase {
        padding: 5px 0;
        border: none;
        border-radius: 5px;
        font-size: 16px;
        cursor: pointer;
        text-align: center;
    }

    .btn-secondary {
        background-color: #B9B9B9;
        color: white;
        width: 20%; /* Ocupa 40% do container */
    }

    .btn-primary {
        background-color: var(--btn-phase-continue-by);
        color: white;
        width: 70%; /* Ocupa 60% do container */
    }

    .btn-primary:hover{
        background-color: var(--btn-phase-continue-hover-by);
        color: white;
        width: 70%;
    }

    .btn:disabled {
        background-color: #ddd;
        cursor: not-allowed;
    }

    .is-invalid {
        border: 2px solid #ff4d4d;
        background-color: #ffe6e6;
    }

    /* #container-purchase #cart-section {
        position: absolute;
    } */

    button:disabled {
        background-color: #d3d3d3; /* Cor de fundo para o botão desabilitado */
        color: #a9a9a9; /* Cor do texto para o botão desabilitado */
        cursor: not-allowed; /* Cursor de "não permitido" para indicar estado desabilitado */
        opacity: 0.6; /* Opacidade reduzida para aparência desabilitada */
    }

    .hr-purchase{
        width: 100%;
    }

    .form {
        padding: 25px;
      }


      /* Estilos gerais para o modal de termos */
.terms-modal {
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.terms-modal-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #ddd;
    padding: 16px 24px;
    border-radius: 8px 8px 0 0;
}

.terms-modal-body {
    padding: 24px;
}

.terms-modal-footer {
    border-top: 1px solid #ddd;
    padding: 16px;
    border-radius: 0 0 8px 8px;
}

/* Introdução */
.terms-intro {
    font-size: 1rem;
    margin-bottom: 24px;
    color: #555;
}

/* Existing purchase modal styling (uses system color variables) */
#existingPurchaseModal .modal-content.existing-purchase-modal {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}


#existingPurchaseModal .modal-body {
    background-color: #fff; /* keep body white for readability */
    padding: 18px 20px;
    color: #333;
}

#existingPurchaseModal .modal-body p#existingPurchaseText {
    font-size: 0.98rem;
    margin-bottom: 8px;
}

#existingPurchaseModal .small.text-muted {
    color: rgba(0,0,0,0.6);
}

#existingPurchaseModal #existingPurchaseCartItems li{
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 6px;
    background: linear-gradient(90deg, rgba(161,25,113,0.06) 0%, rgba(0,0,0,0.02) 100%);
    display:flex;
    justify-content:space-between;
    align-items:center;
}

/* Keep existing purchase modal footer centered and buttons side-by-side */
#existingPurchaseModal .modal-footer {
    padding: 14px 20px;
    display:flex !important;
    gap:10px;
    justify-content:center; /* center buttons horizontally */
    align-items:center;     /* align them vertically */
    flex-wrap:nowrap;       /* keep buttons in one row when possible */
    border-top:1px solid rgba(0,0,0,0.05);
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.98));
}

/* Ensure buttons inside this footer don't expand to full width */
#existingPurchaseModal .modal-footer .btn {
    width: auto;
}

#existingPurchaseModal .btn-purchase.btn-outline-secondary {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.24);
    color: #333;
}

#existingPurchaseModal .btn-purchase.btn-primary {
    background: var(--btn-phase-continue-by);
    border: none;
    color: white;
}

/* Make modal content responsive and readable on mobile */
@media (max-width: 576px){
    #existingPurchaseModal .modal-dialog { max-width: 92%; }
    #existingPurchaseModal #existingPurchaseSummary { font-size: 0.95rem; }
}

/* Estilos dos cards */
.terms-card {
    border: 1px solid #ddd;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    height: 300px;
    overflow-y: auto;
    margin-bottom: 16px;
}

.terms-card-body {
    padding: 16px;
}

.terms-card-title {
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 1rem;
}

.terms-card-text {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #333;
    white-space: pre-line;
}

.scrollable-content {
    max-height: 600px;
    overflow-y: auto;
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 10px;
    white-space: pre-line;
    text-align: left; /* Alinha o texto à esquerda */
}

/* Checkbox */
.terms-checkbox {
    margin-top: 16px;
}

.terms-checkbox .form-check-label {
    font-size: 0.95rem;
    color: #555;
}

.accept-all-checkbox {
    margin-right: 6px; /* ou o valor que quiser */
}


.payment-container {
    max-width: 600px;
    margin: 0 auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.payment-title {
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}

.accordion-button {
    border: none;
    border-bottom: 1px solid #ddd;
    margin-bottom: 15px;
    border-radius: 8px 8px 0 0; /* Arredonda apenas os cantos superiores */
}

.accordion-button:not(.collapsed) {
    color: #333;
    background-color: var(--payment_options);
}

.accordion-button.collapsed {
    background-color: transparent;
    color: #333;
}

.accordion-button:focus {
    border-color: transparent;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(216, 166, 242, 0.25);
}

.accordion-header {
    margin-bottom: 15px;
}

.collapse-content {
    margin-top: 10px;
    background: transparent;
    border-radius: 5px;
    padding: 15px;
}

.accordion-item {
    border: none
}

.nav-tabs {
    justify-content: flex-end;
    position: relative;
}

.nav-tabs-sub {
    justify-content: left;
    position: relative;
    gap: 1%;
}

/* Torna as abas mais arredondadas nos cantos superiores e reta na parte inferior */
.nav-tabs .nav-link {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom: 2px solid transparent;
    padding: 8px 8px;
    position: relative;
    z-index: 1; /* Para garantir que a aba atual esteja em cima das anteriores */
    color: #B9B9B9; /* Cor do título das abas não ativas */
    border: 1px solid #B9B9B9; /* Borda cinza para abas não ativas */
    cursor: pointer;
}

.nav-tabs-sub .nav-link-sub {
    padding: 6px 6px;
    position: relative;
    z-index: 1; /* Para garantir que a aba atual esteja em cima das anteriores */
    border: none;
    cursor: pointer;
    background-color: var(--btn-terms-tabs);
    color: var(--phase-terms-by);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    margin-top: 1em;
}

.nav-tabs-sub .nav-link-sub.active {
    z-index: 2;

}

.nav-tabs-sub .nav-link-sub:hover {
    z-index: 2;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: scale(1.05);
}

/* Altera a cor da aba ativa */
.nav-tabs .nav-link.active {
    background-color: var(--phase-card-by);
    color: white;
    border-color: var(--phase-card-by);
    z-index: 0;
}

/* Altera a cor da aba quando passa o mouse */
.nav-tabs .nav-link:hover {
    background-color: var(--phase-card-hover-by);
    color: white;

}

.custom-modal {
    display: none; /* Inicialmente invisível */
    position: fixed;
    z-index: 1050; /* Garanta que esteja acima do fade */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7); /* Começa pequeno */
    width: 100%;
    max-width: 60em;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    height: auto; /* Altura automática */
    padding: 10px; /* Espaçamento extra nas bordas */
    box-sizing: border-box; /* Para garantir que o padding seja contabilizado corretamente */
    opacity: 0; /* Começa invisível */
    pointer-events: none; /* Impede interação quando invisível */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Transições suaves */
}


.custom-modal.show {
    display: block; /* Exibe o modal */
    opacity: 1; /* Fica totalmente visível */
    transform: translate(-50%, -50%) scale(1); /* Modal cresce até o tamanho original */
    pointer-events: all; /* Permite interação quando visível */
}

.custom-modal-content {
    padding: 20px;
    padding-top: 2em;
    flex-grow: 1; /* Faz o conteúdo crescer para ocupar o espaço restante */
    overflow: visible; /* Impede a rolagem, fazendo o conteúdo se ajustar */
}

.custom-modal-body {
    padding-top: 2em;
    flex-grow: 1; /* O conteúdo do body ocupa o espaço restante */
}

.custom-modal-header,
.custom-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-modal-header {
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 10px; /* Distância extra entre o header e o conteúdo */
}

.custom-modal-footer {
    border-top: 1px solid #e5e5e5;
    padding-top: 2em;
    margin-top: auto; /* Faz com que o footer se mova para o fim do modal */
    flex-shrink: 0; /* Garante que o footer não encolha */
}

/* Responsividade para telas menores */
@media (max-width: 768px) {
    .custom-modal {
        max-width: 90%; /* Modal ocupa mais espaço na tela */
        height: auto; /* Altura automática para se ajustar ao conteúdo */
        padding: 10px; /* Menos padding nas telas pequenas */
    }

    .custom-modal-content {
        padding: 10px; /* Menos padding no conteúdo em telas pequenas */
    }

    .custom-modal-header {
        flex-direction: column; /* Coloca o header em formato coluna */
        align-items: flex-start; /* Alinha os itens do header à esquerda */
        padding-bottom: 5px;
    }

    .custom-modal-footer {
        padding-top: 1em; /* Menos padding no footer */
    }

    .close-btn {
        font-size: 18px; /* Botão de fechamento menor */
    }

    #card-purchase {
        width: 90%;
        max-width: 90%;
        position: relative;
        overflow: hidden; /* Evita que os elementos internos saiam */
    }

    #container-purchase {
        margin-top: 5em;
    }

    .form,
    .form-adress {
        padding: 0;
        margin-bottom: 1em;
    }

    .wizard {
        display: flex;
        justify-content: space-between;
        position: relative;
        width: 100%;
        gap: 2%;
        max-width: 100%;
        align-items: stretch;
    }

    #card-purchase.reduced {
        transform: translateX(0%);
    }
}

/* Responsividade para telas muito pequenas (como celulares em modo retrato) */
@media (max-width: 480px) {
    .custom-modal {
        max-width: 100%; /* Modal ocupa toda a largura da tela */
        height: auto; /* Altura ajustada ao conteúdo */
    }

    .custom-modal-content {
        padding: 10px; /* Ajusta o padding do conteúdo */
    }

    .custom-modal-header {
        padding-bottom: 5px; /* Menos espaçamento entre o header e o conteúdo */
    }

    .custom-modal-footer {
        padding-top: 1em; /* Menos espaçamento no footer */
    }

    .close-btn {
        font-size: 16px; /* Botão de fechamento menor */
    }

    #card-purchase.reduced {
        transform: translateX(0%);
    }
}

.close-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

.modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1040;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-backdrop.show {
    display: block; /* Fundo aparece */
    opacity: 1; /* Fundo fica visível */
}

.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #ccc;
    border-top-color: #007bff; /* Cor do spinner */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#card-purchase .slider-mobile {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    display: block;
}

#card-purchase .slick-track {
    width: 100% !important;
    display: flex !important;
}

/* Para celulares (menos que 768px) */
@media (max-width: 767px) {
    #card-purchase .slick-slide {
        min-width: 85% !important;
        max-width: 85% !important;
    }

    #card-purchase .vertical-card {
        min-width: 85% !important;
        max-width: 85% !important;
    }

    #card-purchase .quantity-container {
        width: 65% !important;
    }
    #card-purchase .amount{
        font-size: 70px !important;
    }
}

/* Para tablets (768px até 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    #card-purchase .slick-slide {
        min-width: 100% !important;
        max-width: 100% !important;
    }

    #card-purchase .vertical-card {
        min-width: 92% !important;
        max-width: 100% !important;
    }


}

/* Para telas maiores que 1024px (por exemplo, desktops) */
@media (min-width: 1025px) {

    #card-purchase .vertical-card {
        min-width: 100% !important;
        max-width: 100% !important;
    }

}

#card-purchase .btn.btn-buy {
    font-size: 15px;
}
@media (max-width: 768px) {
    .form-row {
        flex-direction: column !important; /* Faz os itens ficarem um abaixo do outro */
        align-items: center !important; /* Centraliza os itens */
    }

    .form-group {
        width: 100%; /* Garante que cada item ocupe toda a largura */
        text-align: center; /* Centraliza o texto */
        margin: 0.5rem 0; /* Adiciona um espaçamento entre os itens */
    }
}

#card-purchase .quantity-container {
    width: 80% !important;
}

@media (min-width: 768px) {
    #card-purchase .quantity-container {
        width: 60% !important;
    }

}

.btn-add {
    padding: 10px 20px;
    border: 1px solid #A11971;
    border-radius: 8px;
    background-color: #f3f4f6;
    color: #333;
    font-weight: 500;
    transition: all 0.3s ease; /* Transição suave para todos os estilos */
}

/* Efeito de Hover */
.btn-add:hover {
    background-color: #f3f4f6;
    border-color: #A11971;
    color: #A11971; /* Altera a cor do texto no hover */
    transform: scale(1.05); /* Aumenta o tamanho do botão em 10% */
}

/* Estado Selecionado */
.btn-add.selected {
    background-color: #BF9CFF;
    color: #fff;
    border-color: #BF9CFF;
    transition: background-color 0.4s ease, border-color 0.4s ease; /* Transição suave para a cor de fundo e borda */
}

.btn-delete-all {
    padding: 10px 20px;
    border: 1px solid red;
    border-radius: 8px;
    background-color: #f3f4f6;
    color: red;
    font-weight: 500;
    transition: all 0.3s ease; /* Transição suave para todos os estilos */
}

/* Efeito de Hover */
.btn-delete-all:hover {
    background-color: #f3f4f6;
    border-color: red;
    color: red; /* Altera a cor do texto no hover */
    transform: scale(1.05); /* Aumenta o tamanho do botão em 10% */
}

/* Estado Selecionado */
.btn-delete-all.selected {
    background-color: #BF9CFF;
    color: #fff;
    border-color: red;
    transition: background-color 0.4s ease, border-color 0.4s ease; /* Transição suave para a cor de fundo e borda */
}

.duedate-card,
.effective-date-card {
    border: 2px solid var(--duedate_options); /* Contorno roxo */
    border-radius: 10px;
    padding: 15px; /* Diminui o padding para deixar o card menor */
    display: flex; /* Usa flexbox para centralizar o conteúdo */
    align-items: center; /* Alinha verticalmente */
    justify-content: center; /* Alinha horizontalmente */
    transition: all 0.3s ease;
    cursor: pointer;
    margin: 0 auto; /* Centraliza o card */
    width: 5em; /* Define uma largura fixa para os cards */
    height: 2em; /* Define uma altura fixa para os cards */
    font-size: 1.2em; /* Ajusta o tamanho da fonte, se necessário */
}

.duedate-card:hover,
.effective-date-card:hover {
    background-color: var(--duedate_options); /* Fundo roxo ao passar o mouse */
    color: white;
    transform: scale(1.05); /* Aumenta o card */
}

.duedate-card.selected,
.effective-date-card.selected {
    background-color: var(--duedate_options); /* Fundo roxo ao selecionar */
    color: white;
}

/* Approved request visual highlight */
.effective-date-card.approved-request {
    border-color: #810E56; /* green border */
    box-shadow: 0 6px 18px rgba(46,125,50,0.12);
}
.effective-date-card.approved-request .effective-date-card-body { font-weight: 800; font-size: 80%; }

/* transient animation when a new approved request card is inserted dynamically */
.effective-date-card.approved-request.approved-inserted {
    animation: slideInScale 0.5s ease-out;
    transform-origin: center top;
}

@keyframes slideInScale {
    0% { opacity: 0; transform: translateY(-20px) scale(0.9); }
    60% { transform: translateY(4px) scale(1.02); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}


/* Centraliza os cards dentro do container */
.row {
    display: flex;
    /* justify-content: center; Centraliza os itens */
    flex-wrap: wrap; /* Permite que os cards se movam para a linha seguinte, se necessário */
}

.is-invalid {
    background-color: #f8d7da !important; /* fundo vermelho claro */
    border-color: #dc3545 !important;     /* borda vermelha */
    color: #721c24 !important;            /* texto vermelho escuro */
}

.text-danger {
    color: red;
    font-weight: bold;
}

.checkbox-label input[type="checkbox"] {
    display: none; /* Oculta o checkbox original */
}

.payment-checkbox {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    margin-right: 10px;
    position: relative;
    background-color: #fff;
}

.success-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.success-icon {
    font-size: 80px;
    color: #28a745; /* Verde */
}

.btn-pdf {
    border-radius: 15px;
    background-color: var(--btn-pdf-cart);
    color: white;
    width: 60%;
    margin-top: 5%;
}

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

.left-align {
    text-align: left;  /* Garante que o texto ficará alinhado à esquerda */
    margin-left: 0;    /* Remover qualquer margem à esquerda, caso tenha sido adicionada */
}

.form-check-input {
    /* height: 22px; */
    transform: scale(1.2); /* Aumenta o tamanho do checkbox */
    background-color: var(--btn-person-border-by); /* Cor lilás de fundo */
    border-color: var(--btn-person-by); /* Cor lilás na borda */
}

.form-check-input:checked {
    background-color: var(--btn-person-by); /* Cor lilás mais forte quando o checkbox estiver selecionado */
    border-color: var(--btn-person-by);
}

.form-check-label {
    font-weight: normal; /* Garante que o texto não fique em negrito */
}

.btn-import{
    border-radius: 15px;
    background-color: #A60069;
    color: white;
}

.btn-download{
    border-radius: 15px;
    background-color: #ffffff;
    border-color: #A60069;
    color: #A60069;
}

.btn-import:hover{
    background-color: #810E56;
    color: white;
}

.btn-download:hover{
    background-color: #efe7f5;
    border-color: #A60069;
    color: #A60069;
}

.modal-footer{
    display: inline !important;
}

.small-label {
    font-size: 0.85rem;
    font-weight: 600;
}

.dependents input {
    font-size: 0.9rem;
    padding: 4px 8px;
}

.spinner-border {
    animation: spin 0.75s linear infinite !important;
    color: #A60069 !important; /* Cor do spinner */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.responsive-container {
    display: flex;
    flex-direction: column; /* Mobile: um em cima do outro */
    align-items: flex-start;
}

/* Para telas maiores (desktop), exibir lado a lado */
@media (min-width: 768px) {
    .responsive-container {
        flex-direction: row; /* Desktop: na mesma linha */
        justify-content: space-between;
        align-items: center;
    }
}

.input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    pointer-events: none;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    height: 100%;
    z-index: 10; /* ADICIONE ISSO */
}


.card-brand-logo {
    width: 3em;
    height: auto;
    opacity: 1;
    transition: transform 0.5s ease, opacity 0.5s ease;
    transform-origin: center;
}

.card-brand-logo.show {
    opacity: 1;
    transform: scale(1);
}
.invalid-card {
    border: 2px solid #dc3545 !important;
    background-color: #ffeef0;
}

/*  */

.payment-options {
    /* margin-bottom: 1.5rem; */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza conteúdo horizontalmente */
}

.option-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center; /* Centraliza cada opção */
}

@media (min-width: 600px) {
    .option-group {
        flex-direction: row;
    }
}

@media screen and (max-width: 600px) {
    .option {
        max-width: 17em  !important;
        min-width: 17em  !important;
    }

}

.option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid #ccc;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    min-width: 260px; /* ajuda na uniformidade visual */
    justify-content: center; /* centraliza o texto dentro da opção */
    text-align: center;
}

.option:hover {
    background-color: #f9f9f9;
    border-color: #999;
}

.option input[type="radio"] {
    accent-color: #810E56;
    transform: scale(1.2);
}

.total-pay-wrapper {
    display: flex;
    justify-content: center; /* Centraliza os itens horizontalmente */
    align-items: center; /* Alinha os itens verticalmente */
}

@media (max-width: 768px) {
    .total-pay-wrapper {
        flex-direction: column;
    }

    .total-pay {
        min-width: 16em;
    }

}

.total-pay {
    margin: 1rem;              /* Centraliza horizontalmente */
    max-width: 300px;               /* Define uma largura menor */
    background-color: #EFEFEF;
    border: 1px solid #EFEFEF;
    color: #810E56;
    padding: 10px 14px;             /* Um pouco mais compacto */
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    text-align: center;
    font-size: 0.95rem;
}


.total-pay .label {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 4px;
}

.total-pay .value {
    font-size: 1.4rem;
    font-weight: bold;
}

.payment-alert {
    background: #F5F8FA;
    border: 1px solid #D0D5DB;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    max-width: 800px;
    margin: auto;
}

.payment-alert h5 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #810E56;
    margin-bottom: 1rem;
}

.payment-alert p {
    color: #4a5568;
    margin-bottom: 2rem;
}

.qr-code-box {
    padding: 1rem;
    background: white;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    display: inline-block;
}
.copy-box {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    max-width: 100%;
    width: 100%;
  }

  .copy-box input,
  .copy-box textarea {
    width: 100%;
    max-width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 0.375rem;
    box-sizing: border-box;
  }

  .copy-box .btn-copy {
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 0.375rem;
    background-color: #f8f9fa;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    width: 100%;
  }

  @media (min-width: 576px) {
    .copy-box {
      flex-direction: row;
      align-items: center;
    }

    .copy-box .btn-copy {
      width: auto;
    }
  }


.btn-copy {
    background-color: #e2e8f0;
    border: none;
    border-radius: 8px;
    padding: 0 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s;
    white-space: nowrap;
}

.btn-copy:hover {
    background-color: #cbd5e0;
}

.btn-boleto {
    background-color: #A60069;
    color: white;
    border-radius: 8px;
    padding: 0.6rem 1.2rem;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.3s;
}

.btn-boleto:hover {
    background-color: #810E56;
}

.form-label-title {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: #810E56;
    text-align: center;
}

.error {
    border: 1px solid red !important;  /* Adiciona a borda vermelha */
}

/* Estilo para a mensagem de erro */
.error-message {
    color: red;
    font-size: 12px;
    margin-top: 5px;
}

/* Aplica também para campos de input, select, e textarea */
input.error, select.error, textarea.error {
    border: 1px solid red !important;
    background-color: #ffe6e6 !important;
}

.error-icon {
    color: red;  /* Define a cor vermelha para o ícone */
    font-size: 16px;  /* Ajuste o tamanho do ícone conforme necessário */
}

.btn-download-terms {
    background-color: var(--btn-download-terms);
    color: #fff;
}

.btn-download-terms:hover {
    background-color: var(--btn-download-terms-hover);
    color: #fff;
}

.tooltip-text {
    visibility: hidden;
    background-color: #ffffff;
    border: 1px solid #810E56;
    color: #810E56;
    text-align: center;
    border-radius: 4px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    font-size: 15px;
    bottom: 125%; /* acima do elemento */
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s;
}

.effective-date-card:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

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

#resumo-compra {
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    margin: 20px auto;
    /* max-width: 900px; */
    /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    border: 1px solid #810E56;
}

.resumo-titulo {
    font-size: 28px;
    color: #810E56;
    border-bottom: 3px solid #eee;
    padding-bottom: 12px;
    margin-bottom: 30px;
}

/* ----------------- Resumo Grid ----------------- */
.resumo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .resumo-grid {
        grid-template-columns: 1fr;
    }
}

/* ----------------- Resumo Box (cards) ----------------- */
.resumo-box {
    background-color: #fafafa;
    border: 1px solid #e0e0e0;
    padding: 22px;
    border-radius: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.resumo-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.resumo-box h3 {
    font-size: 20px;
    color: #810E56;
    margin-bottom: 16px;
    border-bottom: 2px solid #ddd;
    padding-bottom: 6px;
}

/* --------- Empresa (linha única) --------- */
.resumo-empresa .empresa-dados {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.empresa-dados p {
    margin: 0;
    font-size: 0.95rem;
}

/* --------- Responsáveis (cards em grid flexível) --------- */
.resumo-responsaveis {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 8px;
}

.responsavel-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 14px 18px;
    flex: 1 1 260px; /* mínimo 260px, expande conforme espaço */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.responsavel-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.responsavel-card h4 {
    margin: 0 0 8px;
    color: #810E56;
    font-weight: 700;
    font-size: 1.05rem;
}

.responsavel-card p {
    margin: 4px 0;
    font-size: 0.9rem;
    color: #444;
}

/* Mensagem para card vazio */
.responsavel-card.vazio {
    text-align: center;
    color: #888;
    font-style: italic;
}

/* --------- Beneficiários --------- */
.resumo-box p {
    margin: 8px 0;
    line-height: 1.5;
    font-size: 0.95rem;
}

/* --------- Planos (lista de cards) --------- */
.plano-lista {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 12px;
}

@media (min-width: 600px) {
    .plano-lista {
        grid-template-columns: 1fr 1fr;
    }
}

.plano-card {
    background: #fff;
    border-radius: 10px;
    border-left: 5px solid #810E56;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.plano-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.plano-header {
    background: #810E56;
    color: #fff;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.plano-titulo {
    font-size: 1rem;
    font-weight: 600;
}

.plano-vidas {
    font-size: 0.9rem;
    background: #fafafa;
    color: #810E56;
    padding: 4px 8px;
    border-radius: 6px;
}

.plano-conteudo {
    padding: 12px 16px;
}

.plano-conteudo p {
    margin: 6px 0;
    font-size: 0.9rem;
    color: #333;
}

.plano-conteudo .desconto {
    color: #d04747; /* vermelho suave para desconto */
    font-weight: 600;
}

/* --------- Totais Gerais --------- */
.totais-gerais {
    margin-top: 18px;
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.total-linha {
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
}

.total-linha .label {
    font-weight: 600;
    color: #333;
}

.total-linha .valor {
    font-weight: 700;
    color: #059669; /* verde suave */
}

.total-linha .desconto {
    color: #d04747; /* vermelho suave */
}

.pdf-header {
  /* Remove o text-align: center e força alinhamento à esquerda */
  text-align: left;
  margin-bottom: 20px;

  /* Opcional: adicione padding se desejar espaçamento interno */
  padding-left: 0;
}

.pdf-logo {
  /* Ajuste de tamanho máximo para o logo */
  max-width: 150px;
  height: auto;

  /* Garante que não haja margem automática */
  display: inline-block;
}

/* Rodapé do PDF */
.pdf-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 1122px; /* aproximadamente 297mm a 96dpi para A4 */
    padding: 40px;
    box-sizing: border-box;
}

.pdf-content {
    flex-grow: 1;
}

.pdf-footer {
    text-align: center;
    font-size: 0.85rem;
    color: white;
    background-color: #810E56;
    padding: 10px;
    margin-top: auto;
}

/* Evitar quebra de página em elementos importantes */
.avoid-break {
  page-break-inside: avoid;
  -webkit-column-break-inside: avoid;
  -moz-page-break-inside: avoid;
}

#company-name-display {
    font-weight: bold;
    color: #A60069 !important;
    margin-bottom: 1em;
    align-items: left;
    text-align: left;
}

.toggle-header {
    background-color: #810E56;
    color: white;
    padding: 12px 20px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    cursor: pointer;
    font-size: 18px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.2s ease;
    margin: 0 -30px 0 -30px;
}

.toggle-header:hover {
    background-color: #A11971;
}

.toggle-header-out {
    border-top: 1px solid #A11971;
    border-bottom: none; /* Remove a borda inferior */
    color: #A11971;
    padding: 12px 20px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    cursor: pointer;
    font-size: 18px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.2s ease;
    margin: 0 -30px 0 -30px;
}

.pj-dependent{
    margin: 0 -15px 0 -15px;
}

.form-data-cnpj {
    margin: 0 auto;
    padding: 30px;
    background-color: #fff;
    border: 1px solid #A60069;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.card-body-bordered {
    border: 1px solid #A11971;
    border-top: none;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    padding: 16px;
    margin: 0 -30px 0 -30px;
}

.pj-holder-name{
    color: #A11971;
}

.btn-add-pj {
    padding: 10px 20px;
    border-radius: 8px;
    background-color: #A11971;
    color: #fff;
    font-weight: 500;
    transition: all 0.3s ease; /* Transição suave para todos os estilos */
}

/* Efeito de Hover */
.btn-add-pj:hover {
    background-color: #810E56;
    color: #fff;
    transform: scale(1.05); /* Aumenta o tamanho do botão em 10% */
}

#btnToggleBenef{
    color: #A11971;
    border: 1px solid #A11971;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease; /* Transição suave para todos os estilos */
}