/* Media Query para dispositivos com tela de até 768px (tablets e celulares) */
@media (max-width: 768px) {
  /* --- Ajustes Gerais --- */
  body {
    padding-bottom: 80px; /* Garante espaço para o botão do carrinho */
  }

  html {
    scroll-padding-top: 120px;
  }

  main {
    padding: 0 15px;
    margin-top: 20px;
  }

  /* --- Tela de Boas-Vindas --- */
  .welcome-container {
    width: 85%;
    padding: 25px;
  }
  .welcome-container h2 {
    font-size: 1.8rem;
  }
  .welcome-container .logo-img {
    width: 150px;
  }

  /* --- Cabeçalho e Navegação --- */
  header {
    padding: 10px 15px;
  }
  .logo-cardapio {
    width: 60px;
  }
  .mesa-info {
    font-size: 1rem;
  }
  #category-nav {
    /* Ajusta a posição no mobile */
    top: 70px;
    padding: 8px 0;
  }
  .nav-container {
    padding: 0 15px;
  }
  #category-nav a {
    padding: 6px 12px;
    font-size: 0.85rem;
  }

  /* --- Títulos das Categorias --- */
  .category-title {
    font-size: 2rem;
    padding-bottom: 8px;
    margin-bottom: 20px;
  }

  /* --- Itens do Cardápio --- */
  .menu-item {
    padding: 15px;
    align-items: flex-start;
  }
  .item-img {
    width: 70px;
    height: 70px;
  }
  .item-info {
    flex: 1; /* Permite que a informação ocupe o espaço restante */
  }
  .item-info h3 {
    font-size: 1.1rem;
  }
  .item-info p {
    font-size: 0.8rem;
    max-width: 100%; /* Remove a limitação de largura */
    line-height: 1.4;
  }
  .item-price-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }
  .price {
    font-size: 1.1rem;
    margin-bottom: 0;
  }
  .add-to-cart-btn {
    padding: 8px 15px;
    font-size: 0.9rem;
  }

  /* --- Modal do Carrinho --- */
  .modal-content {
    width: 90%;
    margin: 25% auto; /* Ajusta a margem para telas menores */
    padding: 15px;
  }
}

/* Ajustes finos para telas muito pequenas (ex: iPhone SE) */
@media (max-width: 380px) {
  .logo-cardapio {
    width: 50px;
  }
  #category-nav {
    top: 54px; /* Nova altura do header */
  }
  .item-info h3 {
    font-size: 1rem;
  }
  .price {
    font-size: 1rem;
  }
}