/* --- Base Styles (Mobile-First Foundation) --- */
/*
  These styles are the default, applying to all screen sizes,
  with a strong emphasis on optimal mobile experience.
*/
:root {
  /* Define main colors for easy management */
  --primary-color: #198754; /* A vibrant orange for actions/branding */
  --primary-dark: #e64a19;
  --text-color-dark: #333;
  --text-color-medium: #555;
  --text-color-light: #777;
  --background-light: #f8f8f8;
  --card-background: #fff;
  --border-color: #eee;
  --shadow-light: rgba(0,0,0,0.05);
  --shadow-medium: rgba(0,0,0,0.08);
  --border-radius-small: 8px;
  --border-radius-medium: 12px;
}

html {
    font-size: 14px; /* Define a base de 16px para 1rem */
}

body {
  margin: 0;
  font-family: 'Roboto', sans-serif; /* Ensure Roboto is imported from Google Fonts */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--background-light);
  color: var(--text-color-dark);
  line-height: 1.6;
  overflow-x: hidden; /* Prevent horizontal scroll on small devices */
  overscroll-behavior: contain; /* Prevents body scrolling when modal/drawer is open */
  padding-bottom: 0; /* Default, will be adjusted by fixed elements */

}

*, *::before, *::after {
  box-sizing: border-box; /* Crucial for consistent sizing */
}

/* --- Typography Basics (Mobile-First) --- */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-color-dark);
  margin-top: 0;
  margin-bottom: 0.6em; /* Use em for vertical spacing relative to font-size */
  font-weight: normal;
}

h1 { font-size: 1.8rem; } /* Base for main titles */
h2 { font-size: 1.5rem; } /* Mobile heading size */
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

p {
  font-size: 1rem;
  margin-bottom: 0.8em;
}

/* Ajuste para elementos small dentro de labels ou outros contextos */
small {
    font-size: 0.85rem; /* Garante que o texto pequeno seja legível */
    color: var(--text-color-light);
}

/* --- Input Field Styles --- */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
textarea {
  width: 100%;
  padding: 0.75em; /* 12px */
  margin-bottom: 1em; /* 15px */
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-small);
  font-size: 1rem;
  color: var(--text-color-dark);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
textarea:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(255, 87, 34, 0.2);
}

/* Ajuste para inputs de quantidade (stepper) */
.input-group input[type="number"] {
    max-width: none; /* Remove max-width para flexibilidade */
    width: 4em; /* Ajusta a largura para ser relativa à fonte */
    flex-shrink: 0; /* Evita que o input encolha demais */
    margin-bottom: 0; /* Remove margem inferior para alinhar no input-group */
}
.input-group .btn {
    padding: 0.5em 0.8em; /* Ajusta padding dos botões do stepper */
    font-size: 1rem; /* Garante tamanho de fonte legível para os botões */
}

/* --- Bootstrap Container Padding for Mobile --- */
/* Override Bootstrap's default container padding for smaller screens if needed */
.container {
    padding-left: 1rem; /* 16px */
    padding-right: 1rem; /* 16px */
}

/* --- App Header/Navbar (Mobile-First) --- */
.app-header {
  background-color: var(--card-background);
  padding: 1rem 1.25rem; /* 15px 20px */
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 5px var(--shadow-light);
  position: sticky; /* Stays at top when scrolling */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 500; /* Below modals, above content */
  box-sizing: border-box;
}

.app-header .header-container {
  max-width: 1200px; /* Limit width of content inside header on large screens */
  margin: 0 auto; /* Center content */
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%; /* Ensure it takes full width of parent */
}

.app-header .header-left {
  display: flex;
  align-items: center;
  gap: 0.6em; /* Space between logo and potential title */
}

.app-header .header-logo {
  max-height: 2.5rem; /* 40px - Adjust logo size for mobile */
  width: auto;
  object-fit: contain;
}

.app-header .header-left h1 {
  font-size: 1.2rem; /* Size for restaurant name if uncommented */
  margin: 0; /* Remove default margin from h1 */
  color: var(--text-color-dark);
}

.app-header .nav-icon { /* For general navigation icons (e.g., menu button) */
  font-size: 1.5rem;
  color: var(--text-color-medium);
  cursor: pointer;
}

.app-header .header-right {
  display: flex;
  align-items: center;
}

.app-header .meus-pedidos-btn {
  background-color: var(--primary-color);
  color: var(--card-background);
  padding: 0.5em 0.9em; /* 8px 15px */
  border-radius: var(--border-radius-small);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background-color 0.2s ease, transform 0.1s ease;
  white-space: nowrap;
}

.app-header .meus-pedidos-btn:hover {
  background-color: var(--primary-dark);
  transform: translateY(-1px);
}

/* Estilos para o rodapé */


/* --- Bottom Tab Bar (Main Navigation - Mobile-First) --- */
.bottom-tab-bar {
  background-color: var(--card-background);
  border-top: 1px solid var(--border-color);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 0.5em 0; /* 8px 0 */
  box-shadow: 0 -2px 5px var(--shadow-light);
  z-index: 900; /* Above regular content, below modals */
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--text-color-light);
  font-size: 0.75rem;
  padding: 0.3em; /* 5px */
  flex: 1; /* Distributes items evenly */
  transition: color 0.2s ease;
}

.tab-item i { /* For icon font, e.g., Font Awesome, Material Icons */
  font-size: 1.3rem;
  margin-bottom: 0.25em; /* 4px */
}

.tab-item.active {
  color: var(--primary-color);
}

.tab-item:hover {
  color: var(--primary-color);
}

/* Adjust body padding for fixed bottom tab bar */
body.has-bottom-tab-bar {
    padding-bottom: 70px; /* Example: height of bottom tab bar */
}

.closed-message {
  color: #c62828;
  font-size: 0.9rem;
  margin-top: 0.25rem;
  font-weight: bold;
}



.promo-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background-color: #233f24;
  color: #fff;
  font-weight: bold;
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  z-index: 5;
}

.product-card {
  position: relative;
  overflow: hidden;
}


/* --- Category Navigation (Horizontal Scroll - Mobile-First) --- */
.category-nav {
  position: sticky;
  top: 60px; /* Ajuste conforme altura do header */
  z-index: 900;
  background-color: #fff;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #ddd;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE/Edge */
}

.category-nav::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.category-nav ul {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  padding: 0;
  margin: 0;
  list-style: none;
  overflow-x: auto;
}

.category-nav li {
  white-space: nowrap;
  flex-shrink: 0;
}

.categoria-link {
  display: inline-block;
  text-decoration: none;
  color: #333;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background-color: #f2f2f2;
  font-weight: 300;
  transition: background-color 0.2s, color 0.2s;
  font-size: 1rem;
}

.categoria-link:hover {
  background-color: #e4e4e4;
}

.categoria-link.active {
  background-color: var(--primary-color);
  color: #fff;
  font-weight: 600;
}


/* --- Menu Section / Category Block --- */
.menu-section {
  padding: 1.25rem 1.25rem; /* Padding ligeiramente reduzido para mais compactação */
  margin-bottom: 1.25rem; /* Espaçamento consistente entre as seções */
  background-color: var(--card-background);
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  border-radius: var(--border-radius-medium);
  border: 1px solid var(--border-color);
  max-width: 900px; /* Mantém a largura máxima para centralizar */
  margin-left: auto;
  margin-right: auto;
}

.menu-section h3 {
  font-size: 1.4rem; /* Fonte um pouco menor */
  font-weight: 700;
  color: var(--text-color-dark);
  margin-bottom: 0.5em; /* Espaço reduzido abaixo do título */
  line-height: 1.2; /* Espaçamento entre linhas mais compacto */
  letter-spacing: -0.01em; /* Ajuste sutil no espaçamento entre letras */
}

.menu-section p { /* For category description */
  font-size: 0.88rem; /* Fonte um pouco menor para a descrição */
  color: var(--text-color-medium);
  line-height: 1.4; /* Espaçamento entre linhas mais compacto */
  margin-bottom: 1em; /* Espaçamento reduzido após a descrição */
}

/* --- Individual Product Card (Generic & Pizza - Mobile-First) --- */
.product-listing-container {
    padding: 1rem; /* Add some padding around the product list */
}

.product-card {
  display: flex;
  align-items: center;
  gap: 1em; /* 15px */
  background-color: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-small);
  margin-bottom: 1em; /* 15px */
  padding: 0.75em; /* 12px */
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
  cursor: pointer; /* Default to clickable for modals */
}

.product-card:last-child {
  margin-bottom: 0;
}
a.product-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.product-card.unavailable {
  opacity: 0.6;
  cursor: not-allowed !important;
}

.product-card.unavailable:hover {
  transform: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.product-card img {
  width: 5.625rem; /* 90px */
  height: 5.625rem; /* 90px */
  border-radius: var(--border-radius-small);
  object-fit: cover;
  flex-shrink: 0;
}

.product-card .product-details {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.product-card .product-details h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-color-dark);
  margin-bottom: 0.3em; /* 5px */
}

.product-card .product-details p {
  font-size: 0.85rem;
  color: var(--text-color-medium);
  line-height: 1.4;
  margin-bottom: 0.5em; /* 8px */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Price Styling (Standard & Promotional) --- */
.product-card .product-details > p:has(span.product-price) { /* Target the paragraph that contains price spans */
  display: flex;
  align-items: baseline;
  gap: 0.5em; /* 8px */
  margin-bottom: 0.6em; /* 10px */
  flex-wrap: wrap;
}

.product-card .product-price {
  font-size: 1rem;
  font-weight: bold;
  color: var(--text-color-dark);
  text-decoration: line-through;
  opacity: 0.7;
}

.product-card .product-price.promo {
  font-size: 1.15rem;
  color: var(--primary-color);
  text-decoration: none;
  font-weight: bold;
  opacity: 1;
}

/* Specific adjustment for when there's only one price (no promo) */
.product-card .product-details > p > .product-price:not(.promo):last-child:first-child {
  font-size: 1.15rem;
  color: var(--primary-color);
  text-decoration: none;
  opacity: 1;
}

/* Status message for unavailable products */
.product-card .unavailable-message {
  color: #F44336;
  font-weight: bold;
  font-size: 0.85rem;
  margin-top: 0.3em; /* 5px */
  margin-bottom: 0;
}

/* --- Adicionais Info Tag --- */
.product-card .adicionais-info {
  font-size: 0.8em;
  color: var(--text-color-light);
  margin-top: 0.3em; /* 5px */
  margin-bottom: 0.6em; /* 10px */
}

/* --- Product Actions (Form & Button) --- */
.product-card .product-actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6em; /* 10px */
}

.product-card .product-actions form {
  display: flex;
  align-items: center;
  gap: 0.5em; /* 8px */
  width: 100%;
  justify-content: flex-end;
}

.product-card .product-actions input[type="number"] {
  width: 3.75em; /* 60px */
  padding: 0.5em 0.3em; /* 8px 5px */
  border-radius: var(--border-radius-small);
  border: 1px solid var(--border-color);
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-color-dark);
}

.product-card .product-actions input[type="number"]:disabled {
  background-color: var(--background-light);
  cursor: not-allowed;
  opacity: 0.7;
}

.product-card .product-actions button {
  background-color: var(--primary-color);
  color: var(--card-background);
  padding: 0.5em 1em; /* 8px 15px */
  border-radius: var(--border-radius-small);
  font-size: 0.9rem;
  font-weight: bold;
  transition: background-color 0.2s ease, transform 0.1s ease;
  flex-shrink: 0;
}

.product-card .product-actions button:hover {
  background-color: var(--primary-dark);
}

.product-card .product-actions button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
  transform: none;
}
.product-card.bloqueado {
  cursor: not-allowed;
  position: relative;
}

/* --- Fixed Bottom Bar for Product/Pizza Pages --- */
.fixed-bottom-bar {
    position: fixed; /* Mantém o elemento fixo na tela */
    bottom: 0; /* Alinha na parte inferior */
    left: 0;
    width: 100%;
    background-color: #ffffff; /* Fundo branco para contrastar */
    /* Sombra mais pronunciada para o efeito flutuante */
    box-shadow: 0 -6px 15px rgba(0, 0, 0, 0.2); /* Aumentei o blur e a opacidade */
    /* Cantos arredondados na parte superior para um visual de "card" */
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    padding: 1rem 0; /* 15px 0 */
    z-index: 1000; /* Garante que fique acima de outros conteúdos */
}

/* Adiciona um padding na parte inferior do body para que o conteúdo não fique escondido atrás da barra fixa */
body.has-fixed-bottom-bar {
    padding-bottom: 90px; /* Ajuste este valor conforme a altura da sua barra fixa */
}

.fixed-bottom-bar .container {
    display: flex; /* Garante que o preço e o botão fiquem lado a lado */
    justify-content: space-between; /* Espaço entre os elementos */
    align-items: center; /* Alinha verticalmente */
    padding: 0 1rem; /* 15px de padding nas laterais */
}

.fixed-bottom-bar .total-price-display {
    text-align: left;
    flex-shrink: 0; /* Evita que o texto encolha */
    margin-right: 1em; /* 15px */
}

.fixed-bottom-bar .total-price-display h4 {
    color: var(--text-color-dark); /* Cor para o preço total */
    font-weight: bold; /* Deixa o preço mais evidente */
    font-size: 1.4rem; /* Tamanho da fonte para o total */
    margin-bottom: 0;
}

.fixed-bottom-bar .btn-lg {
    max-width: 250px; /* Limita a largura do botão em telas maiores */
    padding: 0.75em 1.5em; /* 12px 25px */
    border-radius: var(--border-radius-small); /* 8px */
    font-size: 1.1rem; /* Aumenta um pouco a fonte do botão */
    flex-grow: 1; /* Permite que o botão cresça */
}

/* --- App Message Container (Fixed Top) --- */
.app-message-container {
    position: fixed; /* Fixa na tela */
    top: 1.25rem; /* 20px - Distância do topo */
    left: 50%; /* Centraliza horizontalmente */
    transform: translateX(-50%); /* Ajusta para centralização perfeita */
    z-index: 1050; /* Garante que fique acima da maioria dos elementos */
    width: 90%; /* Largura responsiva */
    max-width: 400px; /* Largura máxima para desktops */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra para efeito de card */
    border-radius: var(--border-radius-small); /* 8px - Cantos arredondados */
    overflow: hidden;
    transition: opacity 0.5s ease-out; /* Transição suave para aparecer/desaparecer */
}

.app-message {
    padding: 1em 1.25rem; /* 15px 20px */
    margin-bottom: 0;
    text-align: center;
    font-weight: bold;
    color: #fff;
    border: 1px solid transparent;
}

.app-message.success {
    background-color: #198754; /* Verde do Bootstrap para sucesso */
    border-color: #198754;
}

.app-message.error {
    background-color: #dc3545; /* Vermelho do Bootstrap para erro */
    border-color: #dc3545;
}

/* === MEDIA QUERY FOR LARGER SCREENS (Tablets and Desktops) === */
/*
  These styles override the mobile-first defaults for screens
  wider than 480px, optimizing for more screen real estate.
*/
@media (min-width: 481px) {
  body {
    font-size: 16px; /* Base font size for larger screens */
  }

  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.8rem; }
  h3 { font-size: 1.5rem; }
  h4 { font-size: 1.2rem; }

  /* App Header */
  .app-header {
    padding: 1.125rem 2.5rem; /* 18px 40px */
  }

  .app-header .header-logo {
    max-height: 3.125rem; /* 50px */
  }

  .app-header .header-left h1 {
    font-size: 1.5rem;
  }

  .app-header .meus-pedidos-btn {
    padding: 0.6em 1.25em; /* 10px 20px */
    font-size: 1rem;
  }



  /* Category Navigation */
  .category-nav {
    padding: 0.75em 0; /* 12px 0 */
    justify-content: center;
    overflow-x: hidden; /* No horizontal scroll on desktop */
    top: 4.25rem; /* Adjust top positioning for desktop header height (68px) */
    box-shadow: 0 2px 8px var(--shadow-medium);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }



  .category-nav ul {
    justify-content: center;
    padding: 0 1.875rem; /* 30px */
    gap: 1em; /* 15px */
  }

  .category-nav .categoria-link {
    padding: 0.6em 1.25em; /* 10px 20px */
    font-size: 1rem;
  }

/* Restaurant Info */




  /* Delivery Bar */
  .delivery-bar {
    padding: 0.9em 1.875rem; /* 15px 30px */
    top: 8.125rem; /* Adjust for larger header/nav on desktop (130px) */
    justify-content: center;
    gap: 1.875em; /* 30px */
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }

  .delivery-bar .status {
    font-size: 1.05rem;
  }

  .delivery-bar .info-item.info-link {
    font-size: 1rem;
  }

  /* Menu Section */
  .menu-section {
    padding: 1.5rem 1.875rem; /* Padding ajustado para telas maiores */
    margin-bottom: 1.5rem;
  }
  .menu-section h3 {
    font-size: 1.8rem; /* Ajuste para telas maiores */
    margin-bottom: 0.8em;
    line-height: 1.3;
  }
  .menu-section p {
    font-size: 0.95rem; /* Ajuste para telas maiores */
    margin-bottom: 1.2em;
    line-height: 1.5;
  }

  /* Product Card */
  .product-card {
    padding: 1.25em; /* 20px - Aumentado para mais respiro interno */
    gap: 1.5em; /* 24px - Mais espaço entre imagem e detalhes */
    margin-bottom: 1.5em; /* 24px - Espaçamento entre os cards */
  }

  .product-card img {
    width: 7.5rem; /* 120px - Imagem ligeiramente maior */
    height: 7.5rem; /* 120px */
  }

  .product-card .product-details h4 {
    font-size: 1.35rem; /* Título do produto um pouco maior */
    line-height: 1.3; /* Linha mais compacta para o título */
  }

  .product-card .product-details p {
    font-size: 0.95rem; /* Descrição um pouco maior para melhor legibilidade */
    line-height: 1.5; /* Espaçamento de linha padrão para descrições */
    margin-bottom: 0.8em; /* Ajuste o espaçamento abaixo da descrição */
  }

  .product-card .product-details > p { /* Parágrafo que contém os preços */
    gap: 0.8em; /* 12px - Mais espaço entre os preços */
    margin-bottom: 1em; /* 16px - Espaçamento abaixo do preço */
  }

  .product-card .product-price {
    font-size: 1.1rem; /* Preço normal ligeiramente maior */
  }

  .product-card .product-price.promo {
    font-size: 1.3rem; /* Preço promocional mais destacado */
  }

  .product-card .unavailable-message {
    font-size: 0.95rem; /* Mensagem de indisponível ligeiramente maior */
  }

  .product-card .adicionais-info {
    font-size: 0.9em; /* Informações adicionais um pouco maior */
  }

  .product-card .product-actions input[type="number"] {
    width: 4.5em; /* 72px - Largura ajustada */
    padding: 0.7em 0.5em; /* 11px 8px - Padding ajustado */
    font-size: 1rem; /* Tamanho da fonte padrão */
  }

  .product-card .product-actions button {
    padding: 0.7em 1.4em; /* 11px 22px - Padding ajustado */
    font-size: 1.05rem; /* Botão ligeiramente maior */
  }
}

/* === MEDIA QUERY FOR EVEN LARGER SCREENS (Large Desktops) === */
@media (min-width: 1024px) {
  .app-header {
    padding: 1.25rem 3.75rem; /* 20px 60px */
  }

  .modal-content,
  .modal-loja-content {
    max-width: 800px;
  }

  .category-nav {
    top: 4.6875rem; /* 75px */
  }

  .delivery-bar {
    top: 8.75rem; /* 140px */
  }

  /* Grid for product cards on very large screens (example, currently commented out) */
  /*
  .menu-section-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5em; // 25px
  }
  .menu-section .product-card {
    margin-bottom: 0;
  }
  */

  .sabor-option-pizza {
    max-width: calc(25% - 0.75em); /* 4 per row, adjust gap */
  }
}