/* styles.css */
.modal {
    display: none;
    position: block;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 20px;
    border: 1px solid #888;
    height: auto;
    max-width: 800px;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

form {
    display: flex;
    flex-direction: column;
}

label {
    margin-top: 10px;
}

input,
textarea {
    margin-bottom: 10px;
    padding: 5px;
}

button {
    margin-top: 10px;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

/* button:hover {
    background-color: #45a049;
} */

.toast {
    position: fixed;
    bottom: 20px;
    left: 20px;
    /* Alterado de 'right' para 'left' */
    background-color: #4CAF50;
    color: white;
    padding: 15px 20px;
    border-radius: 5px;
    font-size: 16px;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    transform: translateY(100%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 300px;
    /* Adicionado para evitar toasts muito largos */
    word-wrap: break-word;
    /* Permite quebra de palavras longas */
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.modal-backdrop {
    display: none !important;
}

.btn-custom-submit {
    right: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 18px;
    background: var(--color1);
    border-radius: 4px;
    border-style: none;
    box-sizing: border-box;
    color: #ffffff;
    cursor: pointer;
    flex-shrink: 0;
    font-family: "Noto Sans", sans-serif !important;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    font-size: 16px;
    transition: background-color 0.5s ease;
    transition: transform 0.3s ease;
}

.btn-custom-submit:hover {
    background-color: #000000;
    border-color: #000000;
    color: white;
    transform: scale(1.05);
}

.btn-custom-orange {
    background-color: var(--color1);
    border-color: #FFA500;
    color: white;
    transition: background-color 0.3s ease;
    /* Transição suave */
    border-radius: 4px;
}

.btn-custom-orange:hover {
    background-color: #000000;
    /* Laranja mais claro no hover */
    border-color: #000000;
    color: white;
}

.btn-custom-orange:active,
.btn-custom-orange.active {
    background-color: #000000 !important;
    /* Laranja mais escuro quando ativo */
    border-color: #000000 !important;
}

.accordion-button {
    background: linear-gradient(to right, rgba(255, 165, 0, 0.1), rgba(0, 0, 0, 0.05));
    color: #000;
    transition: background-color 0.3s ease;
    position: relative;
    /* Para posicionar o ícone */
}

.accordion-button:hover {
    background: linear-gradient(to right, rgba(255, 165, 0, 0.2), rgba(0, 0, 0, 0.1));
}

.accordion-button:not(.collapsed) {
    background: #fff;
    color: #000;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button::after {
    display: none;
    /* Remove o ícone padrão */
}

/* Estilo para o ícone */
.accordion-button .icon {
    position: absolute;
    right: 15px;
    /* Distância da borda direita */
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2em;
    color: #000;
    /* Cor do ícone */
}

.table th,
.table td {
    padding: 0.5rem;
    font-size: 14px;
}

/* Estilo para o ícone de expandir/recolher */
.accordion-button .icon .fas {
    transition: transform 0.2s ease-in-out;
}

.accordion-button.collapsed .icon .fas {
    transform: rotate(0deg);
    /* Rotação inicial do ícone de mais */
}

.accordion-button:not(.collapsed) .icon .fas {
    transform: rotate(45deg);
    /* Rotação do ícone para o sinal de menos */
}

/* Remove a borda dos itens do accordion */
.accordion-item {
    border: none;
}

.laranja {
    color: #FFA500 !important;
}

/* Alinhamento do badge e valor */
.d-flex.flex-column.align-items-center {
    margin-left: auto;
    /* Empurra para a direita */
    margin-right: 2rem;
    /* Espaço entre o valor/badge e o ícone */
}

.nav-tabs .nav-link {
    color: #808080;
    /* Cinza para abas não selecionadas */
}

.nav-tabs .nav-link:hover {
    color: #808080;
    /* Cinza para abas não selecionadas */
}

.nav-tabs .nav-link.active {
    color: #FFA500 !important;
    /* Laranja para aba ativa */
}

.nav-tabs .nav-link.active i {
    color: #FFA500 !important;
    /* Laranja para o ícone da aba ativa */
}

.nav-tabs .nav-link i {
    color: #808080;
    /* Cinza para os ícones das abas não selecionadas */
}

.nav-tabs .nav-link i:hover {
    color: #808080;
    /* Cinza para os ícones das abas não selecionadas */
}

a.nav-link:hover {
    color: #808080 !important;
}

.btn-close:hover {
    background-color: #fff;
}

.checkout-total-price-table {
    width: 100%;
}

.blacked {
    background-color: #000000 !important;
    transition: background-color 0.3s ease;
    transition: transform 0.2s ease-in-out;
}

.blacked:hover {
    background-color: #FFA500 !important;
    transform: scale(1.1);
}

/* Estilo para o botão do carrinho (a tag <a>) */
.carrinho-button {
    /* HERDADO/SOBRESCRITO DE .btn-custom-orange E .btn */
    background-color: var(--color1); /* Laranja padrão */
    border: 2px solid #FFA500;
    color: white;
    border-radius: 4px;

    /* LAYOUT: Ícone em cima, texto embaixo */
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* TIPOGRAFIA E COMPORTAMENTO */
    text-transform: uppercase;
    font-family: "Noto Sans" !important;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;

    /* TRANSIÇÕES: Para efeitos suaves ao interagir */
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, transform 0.2s ease;

    /*
     * Padding padrão para tamanhos de tela médios (entre 768px e 991px)
     * Base: 1rem = 14px (do seu html font-size)
     * 0.5rem = 7px
     * 0.7rem = 9.8px
     */
    padding: 0.5rem 0.7rem;
}

/* Estilo específico para o ícone do carrinho (a tag <i>) */
.carrinho-button i {
    /* Tamanho padrão do ícone (entre 768px e 991px)
     * 1.714rem = ~24px (24px / 14px = 1.714)
     */
    font-size: 1.714rem;
    /* Margem padrão do ícone (entre 768px e 991px)
     * 0.35rem = ~5px
     */
    margin-bottom: 0.35rem;
    color: white;
}

/* Estilo específico para o texto do carrinho (a tag <span> com classe cart-text) */
.carrinho-button .cart-text {
    /* Tamanho padrão do texto (entre 768px e 991px)
     * 0.875rem = ~12.25px (conforme .btn-sm do Bootstrap)
     */
    font-size: 0.875rem;
    font-weight: 700;
    color: white;
    white-space: nowrap; /* Impede que o texto quebre linha */
    line-height: 1; /* Ajusta a altura da linha para maior compactação */
    display: block; /* Garante que o texto seja sempre exibido */
}

/* EFEITOS DE HOVER (passar o mouse) */
.carrinho-button:hover {
    background-color: #000; /* Fundo PRETO ao passar o mouse */
    border-color: #000;     /* Borda PRETA ao passar o mouse */
    transform: translateY(-1px); /* Eleva ligeiramente o botão */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2); /* Adiciona uma sombra sutil */
}

/* EFEITOS DE ACTIVE (clicar) */
.carrinho-button:active {
    transform: translateY(0); /* Retorna à posição original */
    box-shadow: none; /* Remove a sombra ao ser pressionado */
}

/* --- MEDIA QUERIES PARA RESPONSIVIDADE --- */

/* Para telas de até 767px de largura (smartphones grandes e tablets pequenos) */
@media (max-width: 767px) {
    .carrinho-button {
        padding: 0.5rem 0.6rem; /* Aumenta um pouco o padding em relação ao anterior */
    }
    .carrinho-button i {
        font-size: 1.6rem; /* Aumenta o ícone para ~22.4px */
        margin-bottom: 0.3rem; /* Ajusta o espaçamento do ícone */
    }
    .carrinho-button .cart-text {
        font-size: 0.85rem; /* Aumenta o texto para ~11.9px */
    }
}

/* Para telas de até 575px de largura (smartphones muito pequenos) */
@media (max-width: 575px) {
    .carrinho-button {
        padding: 0.4rem 0.5rem; /* Padding ainda um pouco menor para telas bem pequenas */
    }
    .carrinho-button i {
        font-size: 1.5rem; /* Aumenta o ícone para ~21px */
        margin-bottom: 0.2rem; /* Adiciona um pequeno espaçamento */
    }
    .carrinho-button .cart-text {
        font-size: 0.8rem; /* Aumenta o texto para ~11.2px (visível e legível) */
        /* display: block; já definido acima, mas re-confirmando para este breakpoint */
    }
}

/* Para telas maiores (desktops) - Ajusta para ser MENOR do que o padrão */
@media (min-width: 992px) {
    .carrinho-button {
        padding: 4px 6px; /* Padding menor em pixel para desktop */
    }
    .carrinho-button i {
        font-size: 18px; /* Ícone menor em pixel para desktop */
        margin-bottom: 2px; /* Margem menor em pixel */
    }
    .carrinho-button .cart-text {
        font-size: 10px; /* Texto menor em pixel para desktop */
    }
}

/* CONTAINER DAS CARDS */
/* Este estilo é para o container que agrupa todas as cards de consulta.
   Ele usará flexbox para organizá-las lado a lado. */
.consultas-section {
    display: flex; /* Ativa o flexbox para organizar as cards em linha */
    flex-wrap: wrap; /* Permite que as cards quebrem para a próxima linha em telas menores */
    justify-content: center; /* Centraliza as cards horizontalmente */
    align-items: flex-start; /* Alinha as cards pelo topo (importante para que não fiquem desalinhadas) */
    gap: 25px; /* Espaço entre as cards */
    padding: 30px; /* Espaçamento interno ao redor das cards */
    margin: 20px auto; /* Margem superior/inferior e centraliza o bloco de cards */
    max-width: 1200px; /* Largura máxima para o container das cards */
}

/* ESTILO DE CADA CARD INDIVIDUAL */
.consulta-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08); /* Sombra mais suave */
    width: 280px; /* Largura base para cada card. AJUSTADO para menor. */
    flex-shrink: 0; /* Garante que as cards não encolham em layouts flex */
    display: flex; /* Usa flexbox para organizar o conteúdo interno (header, body, footer) */
    flex-direction: column; /* Conteúdo empilhado verticalmente */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição para efeitos de hover */
    margin-bottom: 20px; /* Espaço entre as linhas de cards (se flex-wrap atuar) */
    box-sizing: border-box; /* Garante que padding e border sejam incluídos na largura/altura */
}

.consulta-card:hover {
    transform: translateY(-5px); /* Efeito de "levantar" ao passar o mouse */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* Sombra mais pronunciada no hover */
}

/* Ajustes específicos para o .pricing-table dentro do .consulta-card para torná-lo mais compacto */
.consulta-card > .pricing-table { /* Alvo: o div com a classe pricing-table que é filho direto de consulta-card */
    padding: 15px 15px; /* Reduzido o padding vertical (top/bottom) de 20px para 15px */
    flex-grow: 1; /* Permite que este elemento cresça para preencher o espaço disponível */
    display: flex; /* Torna-o um container flexível também */
    flex-direction: column; /* Organiza seus filhos verticalmente */
    height: 100%; /* Garante que ele preencha a altura do seu pai (.consulta-card) */
}


/* CABEÇALHO DO CARD (CONSULTA) */
.consulta-card .card-header {
    font-size: 11px; /* Fonte ligeiramente menor */
    font-weight: 700;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 4px; /* Margem reduzida */
    text-align: center;
}

/* TÍTULO DO CARD (Leilão Especial Plus) */
.consulta-card .card-title {
    font-size: 20px; /* Título ligeiramente menor */
    font-weight: 800;
    color: var(--color1, #FFA500);
    margin-bottom: 8px; /* Margem reduzida */
    text-align: center;
}

/* CORPO DO CARD COM A LISTA DE ITENS */
.consulta-card .card-body {
    flex-grow: 1; /* Permite que ele ocupe o espaço disponível para a rolagem */
    overflow-y: auto; /* CRUCIAL: Adiciona scroll vertical quando o conteúdo excede a altura */
    max-height: 160px; /* AJUSTADO: Altura máxima reduzida para a área de conteúdo com scroll. */
    padding-right: 15px; /* Mantém espaço para a barra de rolagem */
    margin-bottom: 10px; /* Margem reduzida */
    scrollbar-width: thin; /* Para navegadores Firefox */
    scrollbar-color: var(--color1, #FFA500) #f1f1f1; /* Cor da barra de rolagem para Firefox */
}

/* Personalização da barra de rolagem para navegadores Webkit (Chrome, Safari, Edge) */
.consulta-card .card-body::-webkit-scrollbar {
    width: 8px; /* Largura da barra de rolagem */
}

.consulta-card .card-body::-webkit-scrollbar-track {
    background: #f1f1f1; /* Cor do "caminho" da barra de rolagem */
    border-radius: 10px;
}

.consulta-card .card-body::-webkit-scrollbar-thumb {
    background-color: var(--color1, #FFA500); /* Cor do "polegar" da barra de rolagem */
    border-radius: 10px;
    border: 2px solid #f1f1f1; /* Espaçamento ao redor do polegar */
}

.consulta-card .card-body::-webkit-scrollbar-thumb:hover {
    background-color: #e09b00; /* Cor do polegar ao passar o mouse */
}

/* ESTILOS DA LISTA DE FEATURES (checkmarks) */
.consulta-card .feature-list {
    list-style: none; /* Remove marcadores padrão da lista */
    padding: 0;
    margin: 0;
}

.consulta-card .feature-list li {
    margin-bottom: 6px; /* Espaço reduzido entre cada item da lista */
    font-size: 13px; /* Fonte ligeiramente menor */
    color: #333;
    display: flex; /* Para alinhar o ícone e o texto */
    align-items: center; /* Centraliza verticalmente ícone e texto */
}

.consulta-card .feature-list li i.icon {
    margin-right: 6px; /* Margem reduzida */
    font-size: 14px; /* Ícone ligeiramente menor */
    color: var(--color1, #FFA500); /* Cor dos ícones de checkmark */
    flex-shrink: 0; /* Impede que o ícone encolha se o texto for longo */
}

/* Estilo para itens desabilitados (cinzas na imagem) */
.consulta-card .feature-list li i.icon.fa-circle { /* Assumindo que o cinza é um círculo */
    color: #ccc; /* Cor cinza para itens desabilitados */
}
.consulta-card .feature-list li.disabled {
    color: #999;
    text-decoration: line-through; /* Risca o texto */
}

/* Rodapé do card (contém o preço e o botão) */
.consulta-card .pricing-footer {
    margin-top: auto; /* Empurra o rodapé para o final do card, se o card for flex column */
    padding-top: 10px; /* Adiciona um pequeno padding acima do botão */
}

.consulta-card .pricing-footer h5 { /* Texto do preço */
    margin-top: 10px; /* Margem ajustada */
    margin-bottom: 10px; /* Margem ajustada */
    font-size: 18px; /* Fonte do preço reduzida */
}

/* Botão de ação no final do card */
.consulta-card .btn-custom-submit {
    width: 100%;
    padding: 8px 12px; /* Padding reduzido */
    font-size: 15px; /* Fonte reduzida */
    font-weight: 700;
    border-radius: 8px;
}

/* RESPONSIVIDADE (MEDIA QUERIES) */

/* Para telas de tablets e desktops menores */
@media (max-width: 1024px) {
    .consultas-section {
        padding: 15px;
        gap: 20px;
    }
    .consulta-card {
        width: 250px; /* Largura do card ainda mais reduzida */
    }
    .consulta-card > .pricing-table {
        padding: 15px 15px; /* Padding ajustado para telas menores */
    }
    .consulta-card .card-title {
        font-size: 18px;
        margin-bottom: 8px;
    }
    .consulta-card .card-body {
        max-height: 140px; /* Altura máxima do scroll ajustada para telas menores */
    }
    .consulta-card .feature-list li {
        font-size: 12px;
        margin-bottom: 6px;
    }
    .consulta-card .feature-list li i.icon {
        font-size: 13px;
    }
    .consulta-card .pricing-footer h5 {
        font-size: 16px;
    }
    .consulta-card .btn-custom-submit {
        padding: 7px 10px;
        font-size: 14px;
    }
}

/* Para telas de smartphones (uma card por linha) */
@media (max-width: 768px) {
    .consultas-section {
        flex-direction: column;
        align-items: center;
        padding: 10px;
        gap: 15px;
    }
    .consulta-card {
        width: 95%; /* Ocupa mais largura da tela */
        max-width: 300px; /* Largura máxima reduzida para telas muito pequenas */
    }
    .consulta-card > .pricing-table {
        padding: 15px 10px; /* Padding ajustado para mobile */
    }
    .consulta-card .card-title {
        font-size: 16px;
        margin-bottom: 5px;
    }
    .consulta-card .card-body {
        max-height: 120px; /* Altura máxima do scroll ainda mais reduzida para mobile */
    }
    .consulta-card .feature-list li {
        font-size: 11px;
        margin-bottom: 4px;
    }
    .consulta-card .feature-list li i.icon {
        font-size: 12px;
    }
    .consulta-card .pricing-footer h5 {
        font-size: 14px;
    }
    .consulta-card .btn-custom-submit {
        padding: 6px 8px;
        font-size: 13px;
    }
}

/* SEÇÃO 1: ESTILOS DO MODAL (SUBSTITUA SEUS ESTILOS EXISTENTES PARA .modal, .modal-content, .close) */

/* Estilo do Overlay do Modal (Fundo Escuro) */
.modal { /* Usado para id="fullContentModal" */
    position: fixed; /* Fixa o modal na viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fundo escuro semitransparente */
    display: flex; /* Para centralizar o conteúdo do modal */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Garante que o modal esteja acima de tudo */
    opacity: 0; /* Começa invisível para transição */
    visibility: hidden; /* Esconde completamente quando oculto */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Animação suave */
}

/* Quando o modal não tiver a classe 'hidden' (removida pelo JS), ele aparece */
.modal:not(.hidden) {
    opacity: 1;
    visibility: visible;
}

/* Estilo da Caixa de Conteúdo do Modal */
.modal-content {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px; /* Borda mais arredondada */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Sombra mais pronunciada */
    max-width: 700px; /* Largura máxima para desktops */
    width: 90%; /* Ocupa 90% da largura em telas menores */
    max-height: 90vh; /* Altura máxima de 90% da viewport */
    overflow-y: auto; /* Adiciona barra de rolagem interna se o conteúdo for muito longo */
    position: relative; /* Necessário para posicionar o botão de fechar (x) */
    transform: translateY(-50px); /* Efeito inicial para animação de "subir" */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Animação para o conteúdo do modal */
}

/* Quando o modal não tiver a classe 'hidden', o conteúdo se anima para a posição final */
.modal:not(.hidden) .modal-content {
    transform: translateY(0); /* Retorna à posição original */
    opacity: 1;
}

/* Estilo do Botão de Fechar (o 'x') */
.close { /* Use sua classe existente .close */
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 2em; /* Tamanho maior */
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    transition: color 0.2s ease;
}

.close:hover,
.close:focus {
    color: #333; /* Cor mais escura ao passar o mouse */
}

/* NOVAS CLASSES: Estilos para o Título e Corpo do Modal */
.modal-title {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
    font-size: 1.8em;
}

.modal-body {
    line-height: 1.6;
    color: #555;
}
/* Estilos para tags HTML dentro do corpo do modal (se a descrição tiver HTML) */
.modal-body p { margin-bottom: 1em; }
.modal-body ul { list-style: disc; margin-left: 20px; }
.modal-body ul li { margin-bottom: 0.5em; }