/* ================================================
   PAPITO'S PRIME — restaurante.css
   Tema TERRACOTA/BRASA do Restaurante & Gastrobar.
   Sobrescreve variáveis de base.css/flipbook.css.
   Inclui: bloco-seção, acordeão, prato do dia.
   ================================================ */

/* ---------- OVERRIDE DE VARIÁVEIS ---------- */
:root {
  --dourado:        #C4644F;
  --dourado-claro:  #E8845A;
  --dourado-escuro: #8B3A2A;
  --preto-suave:    #130D0B;
  --preto-card:     #1E1109;
  --sombra-dourada: 0 0 30px rgba(196, 100, 79, 0.15);
}

body {
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(196,100,79,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(139,58,42,0.04) 0%, transparent 50%);
}

/* Override da capa com cor terracota */
.pagina.capa {
  background-image: radial-gradient(ellipse at center, rgba(196,100,79,0.10) 0%, transparent 70%);
}

@keyframes brilhoCapa {
  from { filter: drop-shadow(0 0 15px rgba(196, 100, 79, 0.25)); }
  to   { filter: drop-shadow(0 0 32px rgba(196, 100, 79, 0.55)); }
}

/* Override extras-box com cor terracota */
.extras-box {
  background: rgba(196, 100, 79, 0.06) !important;
  border-color: rgba(196, 100, 79, 0.22) !important;
}

/* Garante scroll interno da página se necessário */
.pagina { overflow-y: auto !important; }

/* ---------- TAG NO HEADER ---------- */
.tag-rest {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dourado);
  border: 1px solid rgba(196,100,79,0.40);
  padding: 4px 10px;
  border-radius: 2px;
  font-family: var(--fonte-corpo);
  font-weight: 700;
}

/* ---------- BLOCO-SEÇÃO — separador visual ---------- */
.bloco-secao {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(196,100,79,0.10);
  border-left: 3px solid var(--dourado);
  padding: 6px 10px 6px 12px;
  border-radius: 0 4px 4px 0;
  margin-bottom: 6px;
  margin-top: 10px;
  flex-shrink: 0;
}

.bloco-secao:first-child { margin-top: 0; }

.bloco-secao .bloco-icone {
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}

.bloco-secao .bloco-titulo {
  font-family: var(--fonte-titulo);
  font-size: clamp(12px, 1.8vw, 17px);
  font-weight: 700;
  color: var(--dourado);
  letter-spacing: 2px;
  text-transform: uppercase;
}

.bloco-secao .bloco-sub {
  font-size: 9px;
  color: rgba(232,132,90,0.65);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-left: auto;
  white-space: nowrap;
}

/* ---------- SUB-RÓTULOS ---------- */
.sub-label {
  font-size: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dourado-escuro);
  font-weight: 700;
  padding: 5px 0 2px;
  border-top: 1px solid rgba(196,100,79,0.18);
  margin-top: 4px;
  flex-shrink: 0;
}

.sub-label:first-child { border-top: none; margin-top: 0; padding-top: 0; }

.serve-tag {
  font-size: 8px;
  color: rgba(136,136,136,0.85);
  font-style: italic;
}

/* ---------- PRATO DO DIA ---------- */
.item-cardapio.destaque-hoje .item-nome {
  color: var(--dourado-claro);
  font-weight: 700;
}

.item-cardapio.item-opacidade { opacity: 0.62; }

.prato-hoje-badge {
  display: inline-block;
  background: var(--dourado-escuro);
  color: #fff;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 2px;
  margin-right: 4px;
}

.dia-label {
  display: block;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(232,132,90,0.80);
  margin-bottom: 1px;
}

/* ---------- ITEM EXPANSÍVEL — trigger do acordeão ---------- */
.item-expansivel {
  cursor: pointer;
  transition: background 0.2s;
  border-radius: 3px;
}

.item-expansivel:hover  { background: rgba(196,100,79,0.08); }
.item-expansivel:active { background: rgba(196,100,79,0.14); }

.expansivel-cta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dourado);
  font-weight: 700;
  white-space: nowrap;
}

.expansivel-cta .seta-anim {
  display: inline-block;
  transition: transform 0.25s;
  font-style: normal;
}

.item-expansivel:hover .seta-anim { transform: translateY(2px); }

/* ---------- ACORDEÃO INLINE ---------- */
.item-expansivel.aberto .seta-anim {
  transform: rotate(180deg) !important;
}

.item-expansivel.aberto {
  background: rgba(196,100,79,0.10);
  border-radius: 3px 3px 0 0;
}

.acordeao-painel {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1),
    opacity    0.35s ease;
  opacity: 0;
}

.acordeao-painel.aberto {
  max-height: 600px;
  opacity: 1;
}

.acordeao-inner {
  background: rgba(26, 15, 12, 0.85);
  border: 1px solid rgba(196,100,79,0.28);
  border-top: 2px solid var(--dourado);
  border-radius: 0 0 6px 6px;
  margin-bottom: 4px;
  overflow: hidden;
}

.acordeao-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(196,100,79,0.10);
  animation: acordeaoSlide 0.3s ease both;
}

.acordeao-item:last-child { border-bottom: none; }

@keyframes acordeaoSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.acordeao-item-nome {
  font-size: 13px;
  font-weight: 700;
  color: var(--branco);
}

.acordeao-item-desc {
  font-size: 10px;
  color: var(--cinza);
  font-style: italic;
  margin-top: 2px;
}

.acordeao-item-preco {
  font-family: var(--fonte-titulo);
  font-size: 15px;
  font-weight: 700;
  color: var(--dourado);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ======================================================
   PRATO DO DIA — painéis de opções de preço
   Visual distinto do acordeão dos pratos principais:
   usa borda pontilhada + tag colorida em vez de sólida.
   ====================================================== */

/* Cursor pointer nos itens expansíveis do prato do dia */
.pd-expansivel {
  cursor: pointer;
  transition: background 0.2s;
  border-radius: 3px;
}

.pd-expansivel:hover  { background: rgba(196,100,79,0.10); }
.pd-expansivel:active { background: rgba(196,100,79,0.18); }
.pd-expansivel:focus  { outline: 1px dashed rgba(196,100,79,0.5); outline-offset: 2px; }

/* CTA "VER OPÇÕES" abaixo do preço */
.pd-cta {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 7px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(232,132,90,0.80);
  font-weight: 700;
  white-space: nowrap;
  justify-content: flex-end;
  margin-top: 2px;
}

.pd-seta {
  display: inline-block;
  font-style: normal;
  transition: transform 0.25s;
}

/* Quando aberto: rotaciona a setinha */
.pd-expansivel.pd-aberto .pd-seta {
  transform: rotate(180deg);
}

/* Fundo levemente destacado quando aberto */
.pd-expansivel.pd-aberto {
  background: rgba(196,100,79,0.12);
  border-radius: 3px 3px 0 0;
}

/* ---- Painel recolhido ---- */
.pd-painel {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height 0.40s cubic-bezier(0.4, 0, 0.2, 1),
    opacity    0.30s ease;
  opacity: 0;
}

.pd-painel.aberto {
  max-height: 400px;
  opacity: 1;
}

/* ---- Container interno ----
   Visual diferente: borda PONTILHADA (vs sólida do acordeão)
   e fundo ligeiramente mais quente                          */
.pd-inner {
  border: 1px dashed rgba(196,100,79,0.45);
  border-top: none;
  border-radius: 0 0 6px 6px;
  background: rgba(30, 12, 8, 0.80);
  margin-bottom: 4px;
  overflow: hidden;
}

/* Borda lateral especial para o prato do DIA atual */
.pd-painel-hoje .pd-inner {
  border-color: rgba(232,132,90,0.65);
  border-left: 3px solid var(--dourado-claro);
}

/* ---- Cada linha de opção ---- */
.pd-opcao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  border-bottom: 1px solid rgba(196,100,79,0.08);
  animation: pdSlide 0.28s ease both;
}

.pd-opcao:last-child { border-bottom: none; }

@keyframes pdSlide {
  from { opacity: 0; transform: translateX(-6px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Primeira opção (menor preço) levemente destacada */
.pd-opcao-destaque { background: rgba(196,100,79,0.06); }

.pd-opcao-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--branco);
}

.pd-opcao-preco {
  font-family: var(--fonte-titulo);
  font-size: 13px;
  font-weight: 700;
  color: var(--dourado-claro);
  white-space: nowrap;
}