/* ============================================================
   1. CARDS DE PRODUTOS (Bolos, Doces e Modelos)
   ============================================================ */
/* ===== CARD ROSA PADRÃO (SEU FAVORITO) ===== */
.card {
    width: 100%;
    max-width: 1200px;
    background: #FAD5DC;
    border-radius: 18px;
    padding: 20px; /* Substituí a variável por valor fixo para não dar erro */
    margin: 20px auto;
}

/* ===== CARDS DE PRODUTOS (CARROSSEL) ===== */
.container-bolos, .container-modelos, .container-doces {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    padding: 20px 10px;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.container-bolos::-webkit-scrollbar { display: none; }

.bolo-card {
    min-width: 280px;
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    overflow: hidden;
    text-align: center;
    padding-bottom: 20px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.bolo-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

/* ============================================================
   2. BOTÕES DE AÇÃO (Eu Quero / Selecionar)
   ============================================================ */
.btn-escolha {
  background: #783606;
  color: #fff;
  border: none;
  border-radius: 25px;
  padding: 10px 25px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  width: 100%; /* Botão larguinho em cima */
  transition: all 0.3s ease;

}

.btn-eu-quero:hover {
  background: #5a2904;
  transform: scale(1.02);
}

/* Quando o botão for selecionado (via JavaScript) */
.btn-eu-quero.ativo {
  background: #e91e63 !important; /* Rosa forte para destacar */
  color: #fff !important;
  box-shadow: 0 0 10px rgba(233, 30, 99, 0.5);
}

/* ===== ÁREA DE CONTEÚDO ===== */
.conteudo {
  width: 100%;
  padding: var(--space-sm) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ===== TÍTULO ===== */
.card h3 {
  color: #783606;
  font-size: 25px;
  margin-bottom: 20px;
}


/* ===== CHECKBOX ===== */
.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
  color: #783606;
}
/* ============================================================
   3. MODAIS (Termos, Erros e Alertas)
   ============================================================ */
/* ===== TEXTO AVISO ===== */
.aviso {
  font-size: 12px;
  color: #783606;
  margin-top: 10px;
}

/* Faltava este bloco para o modal aparecer na tela! */
.modal {
    display: none;      /* Mantém escondido até o JS agir */
    position: fixed;    /* Faz ele ficar parado na frente da tela */
    z-index: 10000;     /* Garante que fique acima de todos os cards */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6); /* Escurece o fundo do site */
    overflow: auto;     /* Permite rolar se o texto for grande no celular */
}

/* Caixa Branca do Modal */
.modal-conteudo {
    position: relative;
    background-color: #fff;
    margin: 15% auto;
    padding: 8px; /* Aumentei um pouco o respiro interno */
    border-radius: 18px;
    width: 85%;
    max-width: 450px;
    text-align: left; /* Alinha o título e textos para a esquerda */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Título centralizado (opcional, se quiser manter só o título no meio) */
.modal-conteudo h2 {
    text-align: center;
    font-size: 20px;
    color: #783606;
}

/* Estilo da Linha (HR) */
.modal-conteudo hr {
    border: 0;
    border-top: 1px solid #eee;
    margin: 15px 0; /* Afasta a linha do título e do texto debaixo */
}

/* O parágrafo "Por se tratar de um produto..." */
.modal-conteudo p {
    text-align: left;
    margin-bottom: 20px; /* DISTÂNCIA: Afasta este texto da lista de bolinhas */
    color: #333;
    line-height: 1.4;
}

/* Estilo da Lista (UL) */
.modal-conteudo ul {
    text-align: left;
    padding-left: 25px; /* ESPAÇO DA BOLINHA: Cria o recuo para as bolinhas não sumirem */
    margin: 0;
}

/* Espaçamento entre os itens da lista (LI) */
.modal-conteudo li {
    margin-bottom: 12px; /* Espaço entre cada frase da lista */
    color: #555;
    font-size: 14px;
}

/* Botão centralizado */
#entendiBtn {
    display: block; /* Transforma em bloco para aceitar margin auto */
    margin: 25px auto 0; /* Centraliza o botão e afasta da lista */
    background-color: #783606;
    color: white;
    padding: 12px 30px;
    border: none;
    border-radius: 18px;
    cursor: pointer;
}

/* Estilo do botão de fechar (X) */
.fechar {
    position: absolute;  /* Permite colocar no canto exato */
    right: 20px;         /* Distância da borda direita */
    top: 10px;           /* Distância do topo */
    color: #783606;      /* Cor combinando com seu site */
    font-size: 30px;     /* Tamanho do X */
    font-weight: bold;
    cursor: pointer;
    line-height: 1;      /* Evita que o X empurre o texto para baixo */
}
/* ============================================================
   4. ELEMENTOS DE SELEÇÃO (Massa, Recheio, Complementos)
   ============================================================ */

/* ===== RECHEIOS ===== */

.recheios-container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.recheios-box {
  background: #CEC6DB;
  border-radius: 16px;
  padding: var(--space-md);
  flex: 1;
  min-width: 250px;
}

.recheios-box label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #783606;
  margin-bottom: 10px;
  cursor: pointer;
}

.recheios-box input {
  accent-color: #783606;
}

.recheios-box .extra {
  color: #783606;
  font-weight: bold;
}


/* ===== COMPLEMENTO ===== */

.complemento-container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.complemento-box {
  background: #CEC6DB;
  border-radius: 16px;
  padding: var(--space-md);
  flex: 1;
  min-width: 260px;
}

.complemento-box label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: #783606;
  margin-bottom: 10px;
  cursor: pointer;
}

.complemento-box input {
  accent-color: #783606;
}

.complemento-box .extra {
  font-weight: bold;
  color: #783606;
}

/* ===== SEÇÃO TOPO E EMBALAGEM ===== */
.secao-branca {
    background: #fff;
    padding: 0;
}

.card-topo {
    max-width: 1200px;
    margin: 20px auto !important;
    background: #FAD5DC;
    border-radius: 18px;
    padding: 20px;
}

.topo-grid {
    display: flex;
    flex-wrap: wrap; /* Permite quebrar linha no celular se necessário */
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
}
.coluna-topo, .coluna-embalagem {
    flex: 1; /* Faz as duas crescerem igual */
    min-width: 300px; /* Evita que fiquem muito espremidas */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centraliza o conteúdo dentro da coluna */
    text-align: center;
}

.coluna-topo h3, .coluna-embalagem h3 {
    color: #783606;
    font-size: 25px;
    margin-bottom: 19px;
}

/* Estilo específico para o card de embalagem ficar bonito em 50% */
.coluna-embalagem h3 {
    color: #783606;
    font-size: 25px;
    margin-bottom: 15px
}  

.topo-cards {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.topo-item {
    background: #CEC6DB;
    border-radius: 18px;
    padding: 12px;
    width: 160px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 280px; /* Mantém todos do mesmo tamanho */
}

.topo-item img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 10px;
    border: 3px solid #783606;
}

.topo-item.embalagem {
    width: 100%;
    max-width: 200px; /* Limita a largura do card interno para não ficar largo demais */
    background: #fdf2f4; /* Um tom rosa clarinho para combinar */
    padding: 20px;
    border-radius: 18px;
    border: 1px solid #FAD5DC;
   
    align-items: center;    /* Centraliza na horizontal */
    justify-content: center; /* Centraliza na vertical se houver altura fixa */
}

.topo-item .valor {
    font-size: 25px;
    font-weight: bold;
    color: #783606;
    margin-bottom: 10px;    /* Espaço entre o preço e o botão abaixo */
    display: block;         /* Garante que ocupe a linha toda para centralizar */
    width: 100%;
    
}


/* ================= BLOCO AZUL total ================= */
.secao-total {
    width: 100%;
    background-color: #c9d9d3;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 30px; /* Garante alinhamento vertical */
    padding: 20px 0;    /* Espaçamento interno real */
    margin-bottom: 20px; /* 1. ESPAÇO ENTRE BLOCO AZUL E ROSA */
    
}



.total-info {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #783606;
    font-size: 28px;
    font-weight: bold;
  
}

/* Container interno para garantir que fiquem lado a lado */
.total-card {
    display: flex;
    flex-direction: row; /* 2. ESCRITA E BOTÃO LADO A LADO */
    align-items: center;
    justify-content: center;
    gap: 0px; /* Distância entre o preço e o botão */
    width: 50%;
    max-width: 1200px;
}


.total-info img {
    width: 25px;
}

.btn-fechar {
    background: #783606;
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap; /* Impede o texto do botão de quebrar */
}


.lixeira-padrao {
    transition: transform 0.2s ease;
}

.lixeira-padrao:hover {
    transform: scale(1.2); /* Dá um leve zoom ao passar o mouse */
    opacity: 0.8;
}
   

.intropreco {
  display: block;
  width: fit-content;
  margin: 40px auto;
  
  justify-content: center;
  
}

.intropreco h2 {
    font-size: 38px;
    color: #783606;
    margin-bottom: 15px;
    text-align: left;
    font-weight: 700;
    margin-bottom: 15;
}

.intropreco ul {
    list-style: none;
    padding: 0;
    text-align: left;
}

.intropreco li {
    margin-bottom: 8px;
    font-size: 25px;
    color: #783606;
    text-align: justify;
}