@media (min-width: 878px) {
  /* Layout estável em telas maiores */
  .skincare-container-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .cardapio-card { padding: 1.25rem 1.25rem; gap: 1.25rem; }
  .cardapio-image-container { flex: 0 0 180px; width: 180px; height: 180px; }
  .cardapio-title { font-size: 1.25rem; }
}
/* --- Globais --- */
html {
  font-size: clamp(16px, 2.2vw, 20px);
}
body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  background-color: #f0f0f0;
  background-image: url('../images/pattern.webp');
  background-size: 400px auto;
  background-repeat: repeat;
  background-attachment: fixed;
  color: #3a3a3a;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  text-align: center;
  touch-action: manipulation;
  line-height: 1.6;
}
.app-container, .skincare-container-grid, .cardapio-card, .cardapio-title, .cardapio-description, .filter-btn, .add-to-order-button, .quantity-btn, .pedido-resumo-bar, .modal-content, .modal-button, .modal-text-input, button, input, select, textarea { font-family: 'Montserrat', sans-serif; }
.logo { 
  width: 40%; 
  margin-bottom: 0em; 
  opacity: 1; 
}
/* Ajuste do tamanho do logo no celular */
@media (max-width: 600px) {
  .logo { width: 60%; max-width: 200px; height: auto; }
}
.hidden { display: none !important; }

/* --- Layout base --- */
.app-container { 
  width: 100%; 
  max-width: 789px; 
  background: rgba(255, 255, 255, 0.75); 
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 18px; 
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); 
  padding: 1.25rem; 
  box-sizing: border-box; 
  backdrop-filter: saturate(150%) blur(8px);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
}
.app-header { text-align: center; margin-top: 1rem; }
.title { font-size: 1.5rem; font-weight: 400; color: #555; }

/* --- Navegação inferior --- */
.bottom-nav { 
  display: flex;
  justify-content: center;
  gap: 2rem; 
    margin-top: 1.5rem;
    padding-top: 1.5rem;
  border-top: 1px solid #eee;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  background: rgba(255, 255, 255, 0.678); 
  backdrop-filter: blur(8px); 
  -webkit-backdrop-filter: blur(8px); 
    border-top: 1px solid #ccc;
    z-index: 1000;
}
.nav-item { 
    text-decoration: none;
  color: #888; 
  font-size: 1.2rem; 
    font-weight: 600;
  padding: 10px 20px; 
  border-radius: 30px; 
  transition: background-color 0.3s, color 0.3s; 
    display: flex;
    flex-direction: column;
    align-items: center;
  gap: 1rem; 
  font-size: 0.8rem;
}
.nav-item:hover { color: #3d3d3d; }
#end-session-button svg { color: #a05252; }
#end-session-button:hover { background-color: #f5eaea; }

/* --- Header secundário do cardápio --- */
.treatment-header {
    display: flex;
    flex-direction: column;
    align-items: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
}
.treatment-header h1 { margin: 4px 0 4px 0; font-weight: 600; }
.treatment-header p { margin: 0 0 10px 0; font-size: 1rem; color: #666; }

/* --- Grid e cards do cardápio --- */
.skincare-container-grid {
    display: grid;
  grid-template-columns: 1fr;
    gap: 2rem;
    width: 100%;
}
.cardapio-card {
    background-color: #ffffff;
    border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.05);
    display: flex;
  align-items: flex-start;
    padding: 1.5rem;
    gap: 1.5rem;
    text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cardapio-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,0.12); }
.cardapio-image-container { width: 200px; height: 200px; border-radius: 12px; flex: 0 0 200px; background-color: #f5f5f5; }
.cardapio-image-container { margin: 0; }
.cardapio-image-container { aspect-ratio: 1 / 1; overflow: hidden; }
.cardapio-image { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.cardapio-info { display: flex; flex-direction: column; justify-content: flex-start; flex: 1 1 auto; min-width: 0; }
.cardapio-title { margin: 0 0 0.35rem 0; font-size: 1.35rem; color: #333; }
.cardapio-description { margin: 0 0 1rem 0; line-height: 1.5; color: #666; flex-grow: 1; overflow-wrap: anywhere; }

/* --- Opções do cardápio --- */
.cardapio-options-container { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.5rem; margin-bottom: 1.5rem; align-items: flex-start; }
.cardapio-options-container:empty { display: none; margin: 0; padding: 0; }
.cardapio-options-group { margin: 0; }
.option-choices { display: flex; gap: 0.5rem; width: auto; max-width: 420px; flex-wrap: wrap; }
.option-choice-btn { flex-grow: 1; background-color: #f7f7f7; border: 2px solid #f1f1f1; border-radius: 999px; padding: 10px 14px; font-size: 0.9rem; font-weight: 600; color: #444; cursor: pointer; transition: all 0.2s ease-in-out; box-shadow: 0 2px 0 rgba(0,0,0,0.02) inset; }
.option-choice-btn:hover { background-color: #efefef; }
.option-choice-btn.active { background-color: #f4fff4; border-color: #6E786F; color: #4C5656; }

/* --- Ações do card --- */
.card-actions-container { margin-top: auto; padding-top: 0rem; display: flex; justify-content: flex-start; align-items: center; min-height: 44px; }
.add-to-order-button { background-color: #6E786F; color: white; border: none; padding: 12px 22px; font-size: 0.95rem; font-weight: 700; border-radius: 10px; cursor: pointer; transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s; width: auto; box-shadow: 0 6px 14px rgba(110,120,111,0.25); }
.add-to-order-button:active { transform: translateY(1px); }
.add-to-order-button:hover { background-color: #4C5656; box-shadow: 0 8px 18px rgba(76,86,86,0.28); }
.quantity-counter { display: flex; align-items: center; gap: 0.5rem; }
.quantity-btn { background-color: #f1f1f1; border: none; width: 32px; height: 32px; border-radius: 50%; font-size: 1.5rem; font-weight: bold; color: #555; cursor: pointer; line-height: 32px; transition: background-color 0.2s; }
.quantity-btn:hover { background-color: #e0e0e0; }
.quantity-value { font-size: 1.2rem; font-weight: 600; min-width: 25px; text-align: center; }

/* --- Barra de resumo do pedido --- */
.pedido-resumo-bar { position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); width: min(92vw, 900px); background-color: #fff; box-shadow: 0 -8px 24px rgba(0,0,0,0.08); border: 1px solid #eee; border-radius: 14px; display: flex; justify-content: space-between; align-items: center; padding: 0.85rem 1.25rem; box-sizing: border-box; z-index: 999; transition: transform 0.3s ease-in-out; }
.pedido-resumo-bar.hidden { transform: translate(-50%, 200%); }
.resumo-info { display: flex; flex-direction: column; align-items: flex-start; }
#resumo-texto { font-size: 1.1rem; font-weight: 600; }
#visualizar-pedido-btn { font-size: 0.9rem; color: #6E786F; text-decoration: underline; font-weight: 500; cursor: pointer; }
.enviar-pedido-btn { background-color: #6E786F; color: white; border: none; padding: 12px 25px; font-size: 1rem; font-weight: 600; border-radius: 8px; cursor: pointer; transition: background-color 0.2s; }
.enviar-pedido-btn:hover { background-color: #4C5656; }

/* --- Modal genérico (opções e pedido detalhado) --- */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; transition: opacity 0.3s ease; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.modal-overlay:not(.hidden) { opacity: 1; }
.modal-content { background-color: #ffffff; padding: 2rem 3rem; border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,0.18); border: 1px solid #eee; text-align: center; width: min(92vw, 560px); max-height: 80vh; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; transform: translateY(8px) scale(0.98); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.modal-overlay:not(.hidden) .modal-content { transform: translateY(0) scale(1); }
.modal-content h2 { margin-top: 0; color: #333; }
.modal-content p { color: #666; font-size: 1.1rem; line-height: 1.6; }
.modal-content::-webkit-scrollbar { width: 10px; }
.modal-content::-webkit-scrollbar-track { background: #fafafa; border-radius: 10px; }
.modal-content::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; }
.modal-content::-webkit-scrollbar-thumb:hover { background: #cfcfcf; }
.modal-button-close { background: none; border: none; color: #888; text-decoration: underline; cursor: pointer; font-size: 0.9rem; }

/* Botões e input do modal genérico (inclui modal do nome) */
.modal-button {
  border: none;
  padding: 12px 25px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.modal-button.primary { background-color: #6E786F; color: #fff; }
.modal-button.primary:hover { background-color: #4C5656; }
.modal-button.secondary { background-color: #eee; color: #555; }
.modal-button.secondary:hover { background-color: #ddd; }
.modal-text-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1.5px solid #ddd;
  border-radius: 10px;
  font-size: 1rem;
  font-family: 'Montserrat', sans-serif;
}
.modal-text-input:focus { outline: none; border-color: #c8b46a; }
.modal-error { margin-top: 8px; color: #d9534f; font-weight: 600; font-size: 0.9rem; }

.pedido-detalhe-lista { list-style: none; padding: 0; margin: 0; max-height: 60vh; overflow-y: auto; }
.pedido-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; border-bottom: 1px solid #f0f0f0; }
.pedido-item:last-child { border-bottom: none; }
.pedido-item-info { display: flex; flex-direction: column; }
.pedido-item-name { font-weight: 600; font-size: 1.1rem; color: #444; }
.pedido-item-options { font-size: 0.9rem; color: #777; margin-top: 4px; }
.remover-item-btn { background-color: #fceeee; color: #d9534f; border: none; width: 30px; height: 30px; border-radius: 50%; font-size: 1.5rem; font-weight: bold; cursor: pointer; line-height: 30px; text-align: center; flex-shrink: 0; margin-left: 1rem; transition: background-color 0.2s, color 0.2s; }
.remover-item-btn:hover { background-color: #d9534f; color: #fff; }

/* --- Filtros de categoria --- */
.cardapio-filtros-container { display: flex; justify-content: center; gap: 8px; margin-bottom: 1.75rem; background-color: #f7f7f7; padding: 8px; border-radius: 999px; width: fit-content; margin-left: auto; margin-right: auto; border: 1px solid #eee; }
.filter-btn { background-color: transparent; border: none; border-radius: 999px; padding: 10px 18px; font-size: 0.9rem; font-weight: 700; color: #555; cursor: pointer; transition: all 0.2s ease-in-out; box-shadow: 0 2px 0 rgba(0,0,0,0.02) inset; }
.filter-btn:hover { background-color: #e7e7e7; }
.filter-btn.active { background-color: #ffffff; color: #6E786F; box-shadow: 0 8px 20px rgba(0,0,0,0.10); border: 1px solid #f0e7c7; }

/* --- Responsividade --- */
@media (max-width: 600px) {
  /* Destacar pattern por trás do container no mobile */
  .app-container { background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(255,255,255,0.5); box-shadow: 0 8px 24px rgba(0,0,0,0.08); margin: 10px; padding: 1rem; position: relative; }
  .app-container::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 90px; border-radius: 18px 18px 0 0; pointer-events: none; background: linear-gradient(to bottom, rgba(255,255,255,0.75), rgba(255,255,255,0)); z-index: 0; }
  .app-header, .treatment-header { position: relative; z-index: 1; }
  .skincare-container-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .cardapio-card { flex-direction: column; text-align: center; padding: 1rem; align-items: center; }
  .cardapio-image-container { width: 70%; height: auto; aspect-ratio: unset; margin: 0 auto; flex: 0 0 auto; background-color: transparent; } /* IMAGEM TAMANHO - IMAGEM CELULAR */
  .cardapio-image { width: 100%; height: auto; display: block; }
  .add-to-order-button { width: 100%; }
  .cardapio-options-container { align-items: center; }
  .cardapio-options-group { margin: 0 auto; }
  /* Respiro lateral para modais no celular */
  .modal-content { width: 80%; max-width: none; margin: 0 16px; padding: 1.25rem 1rem; }
  /* Filtros responsivos com rolagem horizontal */
  .cardapio-filtros-container { width: 100%; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 6px 8px; border-radius: 12px; gap: 6px; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%); }
  .cardapio-filtros-container::-webkit-scrollbar { display: none; }
  .filter-btn { flex: 0 0 auto; scroll-snap-align: start; }
}

/* --- Ajuste do fluxo principal para o cardápio --- */
.body-skincare { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; min-height: auto; margin-bottom: 0; padding-bottom: 90px; }