/* ================================================= */
/* CSS FINAL E DEFINITIVO PARA O CARRINHO            */
/* ================================================= */

/* Trava a rolagem da página principal quando o carrinho está aberto */
body.carrinho-ativo {
  overflow: hidden;
}

/* --- ESTRUTURA PRINCIPAL DO CONTAINER --- */
.carrinho-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 1001;
  transform: translateX(100%);
  transition: transform 0.4s ease;
  display: flex;
  flex-direction: column;
}

.carrinho-container.aberto {
  transform: translateX(0);
}

.carrinho-conteudo {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* --- CABEÇALHO --- */
.carrinho-header-novo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.carrinho-header-novo h1 {
  flex-grow: 1;
  text-align: center;
  margin: 0;
  font-size: 1.2em;
  padding-right: 40px;
  /* Compensa o botão de voltar */
}

.btn-voltar {
  background: none;
  border: none;
  font-size: 1.5em;
  cursor: pointer;
  width: 40px;
}

/* --- LAYOUTS INTERNOS (CHEIO E VAZIO) --- */
.carrinho-cheio {
  display: none;
  /* Começa escondido */
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden;
}

.carrinho-cheio.visivel {
  display: flex;
}

.carrinho-main {
  flex-grow: 1;
  /* Faz o conteúdo crescer e ocupar o espaço */
  overflow-y: auto;
  /* Apenas o conteúdo rola */
  padding: 10px;
  background-color: #f8f9fa;
  -webkit-overflow-scrolling: touch;
}

.carrinho-footer-novo {
  flex-shrink: 0;
  /* Impede que o rodapé encolha */
  padding: 15px;
  background-color: white;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.carrinho-vazio {
  display: none;
  /* Começa escondido */
  flex-grow: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #888;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

.carrinho-vazio.visivel {
  display: flex;
}

.icone-vazio {
  font-size: 4em;
  margin-bottom: 20px;
  opacity: 0.5;
}

/* --- SEÇÕES E COMPONENTES INTERNOS --- */
.secao-carrinho {
  background-color: #fff;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 10px;
  border: 1px solid #f0f0f0;
}

.secao-carrinho h2 {
  margin: 0 0 15px;
  font-size: 1.1em;
  font-weight: 600;
}

.secao-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.btn-link {
  color: var(--cor-secundaria);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9em;
}

/* TIPO DE PEDIDO */
.opcoes-toggle {
  display: flex;
  gap: 10px;
}

.toggle-label {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  font-weight: 500;
}

.toggle-label.active {
  border-color: var(--cor-secundaria);
  background-color: #fff8fb;
  color: var(--cor-secundaria);
}

.toggle-label input {
  display: none;
}

/* SEÇÃO EMPRESA */
.secao-empresa {
  display: flex;
  align-items: center;
  gap: 10px;
}

.secao-empresa img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.empresa-info {
  flex-grow: 1;
}

.empresa-info strong {
  display: block;
}

.empresa-info span {
  font-size: 0.9em;
  color: #777;
}

.btn-voltar-loja {
  background: none;
  border: 1px solid #ddd;
  color: var(--cor-texto-escuro);
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
}

/* SLIDER DE ENDEREÇOS */
.enderecos-slider {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  padding-bottom: 10px;
  scrollbar-width: none;
}

.enderecos-slider::-webkit-scrollbar {
  display: none;
}

.endereco-card-carrinho {
  flex: 0 0 70%;
  max-width: 250px;
  border: 2px solid #ddd;
  padding: 10px;
  border-radius: 8px;
  cursor: pointer;
}

.endereco-card-carrinho.selecionado {
  border-color: var(--cor-secundaria);
}

.endereco-card-carrinho strong {
  display: block;
  margin-bottom: 5px;
}

.endereco-card-carrinho p {
  font-size: 0.9em;
  color: #666;
  margin: 0;
  line-height: 1.4;
}

/* VALORES DO PEDIDO */
.valores-pedido {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.linha-valor {
  display: flex;
  justify-content: space-between;
}

.linha-valor.total {
  font-weight: 700;
  font-size: 1.1em;
}

hr {
  border: none;
  border-top: 1px solid #f0f0f0;
  margin: 5px 0;
}

/* ITENS INDIVIDUAIS DO CARRINHO */
.lista-itens-carrinho {
  display: flex;
  flex-direction: column;
}

.item-carrinho-card {
  border-bottom: 1px solid #f0f0f0;
  padding: 15px 0;
}

.item-carrinho-card:last-child {
  border-bottom: none;
  padding-bottom: 5px;
}

.item-carrinho-card:first-child {
  padding-top: 5px;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.item-nome {
  font-weight: 600;
}

.header-direita-item {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #888;
}

.item-header .fa-chevron-down {
  transition: transform 0.3s;
}

.item-body {
  display: none;
  padding-top: 15px;
  margin-top: 15px;
  border-top: 1px dashed #eee;
}

.item-carrinho-card.expandido .item-body {
  display: block;
}

.item-carrinho-card.expandido .fa-chevron-down {
  transform: rotate(180deg);
}

.item-obs {
  font-size: 0.85em;
  color: #666;
  margin: 0 0 10px 0;
}

.item-controles {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-remover-item {
  background: none;
  border: 1px solid #ddd;
  color: var(--cor-erro);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.item-quantidade {
  display: flex;
  align-items: center;
  gap: 15px;
}

.btn-qtd-carrinho {
  background: none;
  border: none;
  font-size: 1.5em;
  font-weight: 500;
  color: var(--cor-primaria);
  cursor: pointer;
  padding: 0 5px;
}

/* BOTÃO PRINCIPAL DO RODAPÉ */
.btn-continuar {
  width: 100%;
  padding: 18px;
  border: none;
  border-radius: 8px;
  background-color: var(--cor-secundaria);
  color: #fff;
  font-size: 1.1em;
  font-weight: 700;
  cursor: pointer;
}

/* ESTILOS DA PÁGINA DE PAGAMENTO */
.opcoes-pagamento {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.opcao-pagamento {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
}

.opcao-pagamento.selecionado {
  border-color: var(--cor-secundaria);
  background-color: #fff8fb;
}

.opcao-pagamento i {
  font-size: 1.5em;
  color: #555;
  width: 25px;
  text-align: center;
}

.opcao-pagamento span {
  flex-grow: 1;
  font-weight: 500;
}

.opcao-pagamento input {
  display: none;
}

.campo-troco {
  display: none;
  margin: 10px 0 0 40px;
}

.campo-troco.visivel {
  display: block;
}

.campo-troco input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

#observacao-pedido {
  width: 100%;
  min-height: 80px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  resize: vertical;
}

.total-pagamento {
  text-align: center;
  margin-bottom: 10px;
}

.total-pagamento span {
  color: #555;
}

.total-pagamento strong {
  display: block;
  font-size: 1.5em;
  color: var(--cor-texto-escuro);
}