/* ============================================
   XISPA COSTELA & SABOR XPRESS — STYLE.CSS
   ============================================ */

/* Scroll suave */
html { scroll-behavior: smooth; }

/* Remove outline feio em botões */
button:focus, a:focus { outline: none; }

/* Transição global de tema */
body, header, footer, section {
  transition: background-color 0.7s ease, color 0.7s ease, border-color 0.5s ease;
}

/* ---- MODO MARMITEX (tema claro) ---- */
body.marmitex-mode { background-color: #fafafa; color: #18181b; }
body.marmitex-mode #mainHeader.scrolled { background-color: rgba(255,255,255,0.95); border-bottom: 1px solid #e4e4e7; }
body.marmitex-mode #mainFooter { background-color: #ffffff; border-top-color: #e4e4e7; }
body.marmitex-mode #menuSection { background-color: #f4f4f5; }
body.marmitex-mode #drinksTitle { color: #18181b; }
body.marmitex-mode .drink-item {
  background-color: #ffffff !important;
  border-color: #e4e4e7 !important;
  color: #18181b !important;
}
body.marmitex-mode .drink-item:hover { border-color: rgba(249,115,22,0.4) !important; }

/* ---- MODO BURGERS (tema escuro, padrão) ---- */
body.burgers-mode { background-color: #09090b; color: #f4f4f5; }
body.burgers-mode #mainHeader.scrolled { background-color: rgba(9,9,11,0.95); border-bottom: 1px solid #27272a; }

/* ---- HEADER SCROLL ---- */
#mainHeader.scrolled { padding-top: 8px !important; padding-bottom: 8px !important; }

/* ---- ANIMAÇÕES ---- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes bounce-in {
  0%   { transform: scale(0.85); opacity: 0; }
  60%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); }
}

.animate-fade-up { animation: fadeInUp 0.5s ease forwards; }
.animate-bounce-in { animation: bounce-in 0.4s cubic-bezier(.36,.07,.19,.97) forwards; }

/* Hero */
#hero { min-height: 50vh; }

/* ---- CARDS DO CARDÁPIO ---- */
.menu-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.menu-card:active { transform: scale(0.97); }

/* ---- CARRINHO SIDEBAR ---- */
#cartPanel { transition: transform 0.3s ease; }
#cartSidebar.open #cartPanel { transform: translateX(0); }

/* Scrollbar customizada no painel do carrinho */
#cartBody::-webkit-scrollbar { width: 4px; }
#cartBody::-webkit-scrollbar-track { background: transparent; }
#cartBody::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 99px; }

/* ---- MODAIS ---- */
.modal-open { display: flex !important; }

/* ---- TOGGLE SWITCH ---- */
#toggleSlider { pointer-events: none; }

/* ---- INPUT FOCUS ---- */
input:focus, textarea:focus {
  border-color: #ea580c !important;
  box-shadow: 0 0 0 3px rgba(234,88,12,0.15);
}

/* ---- BOTÃO CARRINHO MOBILE ---- */
@keyframes pulse-orange {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234,88,12,0.6); }
  70%       { box-shadow: 0 0 0 12px rgba(234,88,12,0); }
}
#mobileCartBtn button { animation: pulse-orange 2s infinite; }

/* ---- IMAGENS COM LAZY LOAD ---- */
img { max-width: 100%; }

/* ---- LINHAS DO CARRINHO ---- */
.cart-row { border-bottom: 1px solid rgba(255,255,255,0.06); padding-bottom: 16px; }
.cart-row:last-child { border-bottom: none; padding-bottom: 0; }

/* Modo marmitex no carrinho */
body.marmitex-mode #cartPanel {
  background-color: #ffffff !important;
  border-left-color: #e4e4e7 !important;
  color: #18181b !important;
}
body.marmitex-mode .cart-row { border-bottom-color: rgba(0,0,0,0.06); }
body.marmitex-mode #cartBody input {
  background-color: #f4f4f5 !important;
  border-color: #e4e4e7 !important;
  color: #18181b !important;
}
body.marmitex-mode .qty-box {
  background-color: #f4f4f5 !important;
  border-color: #e4e4e7 !important;
}

/* ---- RESPONSIVIDADE ---- */
@media (max-width: 640px) {
  .container { padding-left: 16px; padding-right: 16px; }
}

/* ---- UTILITÁRIOS ---- */
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }