/* ==========================================================================
   Brera Bistro — tema por cima do styles.css herdado do motor de pedidos.
   Wine bar contemporâneo: quase-preto quente, dourado suave, serif elegante.
   ========================================================================== */

:root {
  --bg: #151011;
  --panel: #1e1618;
  --panel-strong: #261c1e;
  --line: #4a383c;
  --line-soft: rgba(255, 244, 230, 0.09);
  --text: #f4ece1;
  --muted: #b9aba3;
  --accent: #cfa968;
  --accent-strong: #e0be7d;
  --green: #8fc9a8;
  --danger: #d97b6c;
  --shadow: rgba(0, 0, 0, 0.42);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  background:
    linear-gradient(180deg, rgba(21, 16, 17, 0.86), #151011 42rem),
    url("media/brera/salao-janelas.webp") center top / cover fixed;
}

/* Tipografia display: do Bebas condensado para serif elegante do bistrô */
.hero-title,
.section-heading h2,
.brand-story-copy h2,
.about-section h2,
.poster-copy h2,
.drawer-header h2,
.modal-header h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
}

.hero-title,
.hero-copy h1 {
  font-size: clamp(2.1rem, 3.4vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

.hero-title span {
  white-space: normal;
}

.hero-logo {
  max-width: min(320px, 72vw);
}

.hero-callout {
  color: var(--accent-strong);
}

/* brasas do Machado não fazem sentido no bistrô */
.hero-ember-layer,
.ember {
  display: none !important;
}

/* foto no lugar do vídeo do hero */
img.hero-video {
  object-fit: cover;
  filter: saturate(0.92) brightness(0.85);
}

.brand-story-media img {
  border-radius: 6px;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Botões: do pill rústico do Machado para o traço fino e sério do Brera
   -------------------------------------------------------------------------- */

.primary-action,
.ghost-action,
.copy-action,
.header-cart,
.floating-cart,
.menu-tabs button,
.product-card button {
  border-radius: 2px;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: none;
}

.primary-action {
  background: var(--accent);
  color: #1c1517;
}

.primary-action:hover {
  background: var(--accent-strong);
}

.ghost-action,
.copy-action {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent-strong);
}

.ghost-action:hover,
.copy-action:hover {
  background: var(--accent);
  color: #1c1517;
}

/* Sacola: era verde-menta; vira contorno dourado discreto */
.header-cart,
.floating-cart {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent-strong);
}

.header-cart strong,
.floating-cart span {
  background: var(--accent);
  color: #1c1517;
  border-radius: 2px;
}

/* pin de mapa: sem laranja Machado */
.map-pin-icon::before {
  background: linear-gradient(135deg, var(--accent-strong), var(--accent)) !important;
  border-color: rgba(244, 236, 225, 0.85) !important;
}

/* Painéis e cards com cantos mais discretos */
.hero-facts div,
.quick-strip article,
.product-card,
.drawer-panel,
.modal-card,
.customize-modal .modal-card,
.steps-grid article,
.status-shortcut-card,
.location-card {
  border-radius: 6px;
}

.product-card img {
  border-radius: 4px;
}

/* Abas do cardápio: linha, não pílula */
.menu-tabs button {
  border-radius: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--muted);
}

.menu-tabs button.is-active {
  color: var(--accent-strong);
  border-bottom-color: var(--accent);
  background: transparent;
}

/* --------------------------------------------------------------------------
   Seções do meio: escala e estilo Brera (os tamanhos herdados eram
   calibrados para a Bebas condensada do Machado)
   -------------------------------------------------------------------------- */

.section-heading h2,
.brand-story-copy h2,
.poster-copy h2,
.about-section h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1.18;
  letter-spacing: 0.02em;
  color: var(--text);
  text-shadow: none;
}

/* "A casa": copy equilibrada + fotos lado a lado bem aproveitadas */
.brand-story-section {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.6rem, 4vw, 3.2rem);
  align-items: center;
}

.brand-story-copy p {
  font-size: 1.02rem;
  color: var(--muted);
  max-width: 44ch;
}

.brand-story-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: stretch;
}

.brand-story-media img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 4px;
}

@media (max-width: 860px) {
  .brand-story-section {
    grid-template-columns: 1fr;
  }
}

/* "Como pedir": números discretos em dourado, sem laranja */
.steps-grid article {
  padding: 1.6rem 1.5rem;
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
}

.steps-grid span {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent-strong);
  border-radius: 2px;
  width: 2rem;
  height: 2rem;
  font-weight: 600;
  font-size: 0.85rem;
}

/* Card "Acompanhar pedido": sereno, sem gradiente nem fonte condensada */
.status-shortcut-card {
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: none;
}

.status-shortcut-card img {
  width: 2.6rem;
  height: 2.6rem;
  opacity: 0.9;
}

.status-shortcut-card strong {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: none;
}

.status-shortcut-card em {
  background: var(--accent);
  color: #1c1517;
  border-radius: 2px;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.status-shortcut-card:hover em {
  background: var(--accent-strong);
}

/* Hero centralizado (o grid do Machado tinha 2 colunas; a direita ficou vazia) */
.hero-section {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
}

.hero-copy {
  width: min(52rem, 100%);
  margin: 0 auto;
  text-align: center;
}

.hero-copy .hero-logo {
  margin-left: auto;
  margin-right: auto;
}

.hero-actions,
.hero-facts {
  justify-content: center;
}

.hero-facts {
  margin-left: auto;
  margin-right: auto;
}

/* Popup de boas-vindas */
.launch-popup-panel {
  border-radius: 6px;
}

.launch-popup-panel h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.03em;
}

.launch-popup-panel img {
  border-radius: 4px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
}

.launch-popup-text {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0.9rem 0 1.1rem;
}

/* Ícones de status (SVG linha dourada): respiro e sem fundo chapado */
.status-shortcut-card img,
.order-status-section img {
  filter: none;
}