/* ==========================================================================
   Açaiteria e Sorveteria Manancial
   Design Gastronômico Humano, Autêntico e Aconchegante
   Sem neons artificiais, tipografia limpa, paleta açaí/cacau e acabamento artesanal
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

:root {
  /* Paleta Gastronômica Quente e Humana */
  --bg-page: #fbfbfd;             /* Fundo escuro quente cacau/açaí (não preto puro frio) */
  --bg-surface: #18151c;          /* Superfície elevada para cabeçalhos e barras */
  --bg-card: #ffffff;             /* Cartões com tonalidade aveludada e acolhedora */
  --bg-card-hover: #26212c;
  --border-subtle: #e5e5ea;
  --border-card: #2e2837;
  --border-card-hover: #453c52;
  --gold-accent: #d97706;         /* Âmbar/mel dourado suave e apetitoso */
  --gold-hover: #b45309;
  --brand-acai: #4a154b;          /* Açaí natural aveludado */
  --brand-acai-light: #6a1b6d;
  --brand-cream: #1d1d1f;         /* Creme artesanal aconchegante */
  --green-fresh: #10b981;         /* Verde natural folha/menta */
  --text-primary: #1d1d1f;        /* Texto creme suave (evita o branco estéril #fff) */
  --text-secondary: #86868b;
  --text-muted: #9c9387;
  --font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* {
  font-family: var(--font-family);
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 135px;
}

body {
  background-color: var(--bg-page);
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scrollbars discretas e elegantes */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #fbfbfd;
}
::-webkit-scrollbar-thumb {
  background: #2e2837;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #453c52;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Moldura Gastronômica das Fotos dos Pratos (Sem amarelo neon estourado) */
.food-img-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  background-color: #f2f2f7;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.food-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 0.3s ease-in-out, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.food-img-frame img.loaded {
  opacity: 1;
}

/* Card de Produto Gastronômico */
.food-card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 18px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  height: 100%;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease, box-shadow 0.22s ease;
}

.food-card:hover {
  background-color: var(--bg-card-hover);
  border-color: rgba(217, 119, 6, 0.35);
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}

.food-card:hover .food-img-frame img {
  transform: scale(1.05);
}

/* Botão de adicionar (+) no card - Acabamento artesanal e tátil */
.btn-plus-add {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #f2f2f7;
  color: #1d1d1f;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  font-size: 14px;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-plus-add:hover,
.food-card:hover .btn-plus-add {
  background-color: var(--gold-accent);
  color: #fbfbfd;
  border-color: var(--gold-accent);
  transform: scale(1.08);
}

/* Botões circulares de ação (compartilhar, busca) */
.btn-round-action {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #1c1822;
  border: 1px solid #2e2837;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.18s ease;
}

.btn-round-action:hover {
  background: #282130;
  color: #1d1d1f;
  border-color: #453c52;
  transform: scale(1.05);
}

/* Badges de Status (Aberto / Fechado) - Muted & Elegante, sem neon piscante */
.status-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.04em;
}

.badge-fechado {
  background-color: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
  border: 1px solid rgba(239, 68, 68, 0.25);
}

.badge-aberto {
  background-color: rgba(16, 185, 129, 0.12);
  color: #6ee7b7;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

/* Abas de Categoria com Ícones SVG Profissionais e Rolagem Suave Nativa */
#categoryTabs {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

#categoryTabs::-webkit-scrollbar {
  display: none;
}

.cat-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 8px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: #1c1822;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  user-select: none;
}

.cat-tab:hover {
  color: #1d1d1f;
  background: #26202e;
  border-color: #453c52;
  transform: translateY(-1px);
}

.cat-tab.active {
  color: #2b1836;
  background: #f1ecf5;
  border-color: #d0c4dc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  font-weight: 800;
}

.cat-tab.active:hover {
  background: #ebe4f1;
  border-color: #bfaecf;
  color: #1a0d23;
}

.cat-tab-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Modal de Categorias com Ícones SVG */
.cat-modal-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #1a1620;
  border: 1px solid #292331;
  border-radius: 12px;
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 600;
  transition: all 0.15s ease;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.cat-modal-item:hover {
  background: #251f2e;
  color: #1d1d1f;
  border-color: var(--gold-accent);
}

.cat-modal-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Floating Action Button (Sacola de compras) */
.fab-cart {
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: 1040;
  animation: slideUpFab 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUpFab {
  from {
    transform: translateY(60px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Botão flutuante WhatsApp com posicionamento ergonômico à direita */
.fab-whatsapp {
  position: fixed;
  bottom: 24px;
  right: 20px;
  z-index: 1030;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #15803d;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 6px 20px rgba(21, 128, 61, 0.4);
  transition: transform 0.2s ease, bottom 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
  text-decoration: none;
}

.fab-whatsapp:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 24px rgba(21, 128, 61, 0.55);
  background: #16a34a;
}

.fab-whatsapp.with-cart {
  bottom: 86px;
}

@media (max-width: 640px) {
  .fab-whatsapp {
    bottom: 20px;
    right: 16px;
    width: 48px;
    height: 48px;
    font-size: 1.4rem;
  }
  .fab-whatsapp.with-cart {
    bottom: 82px;
  }
}

/* Toast de Notificação Humanizado */
.app-toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(-100px);
  background: #ffffff;
  border: 1px solid #e2daea;
  color: #18141f;
  padding: 12px 20px;
  border-radius: 16px;
  font-size: 0.88rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(92vw, 440px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14), 0 3px 10px rgba(0, 0, 0, 0.06);
  z-index: 2500;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  opacity: 0;
  pointer-events: none;
  line-height: 1.4;
}

.app-toast span {
  flex: 1;
  text-align: left;
}

.app-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.app-toast.toast-warning {
  background: #fffbeb !important;
  border: 1.5px solid #f59e0b !important;
  color: #78350f !important;
  box-shadow: 0 12px 32px rgba(245, 158, 11, 0.22), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.app-toast.toast-error {
  background: #fef2f2 !important;
  border: 1.5px solid #ef4444 !important;
  color: #991b1b !important;
  box-shadow: 0 12px 32px rgba(220, 38, 38, 0.22), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.app-toast.toast-success {
  background: #f0fdf4 !important;
  border: 1.5px solid #22c55e !important;
  color: #166534 !important;
  box-shadow: 0 12px 32px rgba(22, 101, 52, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.cart-item-card.is-paused {
  border-color: #fcd34d !important;
  background: #fffdf5 !important;
}

.cart-item-paused-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 12px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 8px;
  color: #92400e;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.35;
}

/* Modal Overlay Geral */
.modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(10, 8, 13, 0.85);
  backdrop-filter: blur(6px);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-sheet {
  background-color: #ffffff;
  border: none;
  border-radius: 22px;
  max-width: 520px;
  width: 92%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
  transform: scale(0.96);
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.active .modal-sheet {
  transform: scale(1);
}

/* ==========================================================================
   MODAL DE PRODUTO / BOTTOM SHEET MOBILE (ESTILO IFOOD) & STICKY FOOTER
   ========================================================================== */
#productModal.modal-overlay {
  z-index: 1100;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#productModal .modal-sheet {
  background-color: #1d1d1f;
  border: 1px solid #e5e5ea;
  border-radius: 24px;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
  transform: scale(0.96);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

#productModal.active .modal-sheet {
  transform: scale(1);
}

.sheet-drag-handle {
  display: none;
  justify-content: center;
  align-items: center;
  padding: 10px 0 6px 0;
  width: 100%;
  cursor: grab;
  flex-shrink: 0;
}

.sheet-pill {
  width: 40px;
  height: 4.5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}

.product-modal-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #231c2c;
  border: 1px solid #382c46;
  color: #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
  z-index: 25;
}

.product-modal-close-btn:hover {
  background: #31273e;
  color: #1d1d1f;
}

.product-modal-scrollable {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px 16px 20px;
  scroll-behavior: smooth;
}

#modalProdDesc {
  text-align: left !important;
  line-height: 1.625;
  color: #d1d5db;
}

/* RODAPÉ FIXO (STICKY FOOTER) */
.product-modal-sticky-footer {
  position: sticky;
  bottom: 0;
  background: #ffffff;
  border-top: 1px solid #e5e5ea;
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

/* Mobile Bottom Sheet (<= 768px) */
@media (max-width: 768px) {
  #productModal.modal-overlay {
    align-items: flex-end;
    justify-content: center;
    padding: 0;
  }

  #productModal .modal-sheet {
    max-width: 100%;
    width: 100%;
    margin: 0;
    border-radius: 24px 24px 0 0;
    max-height: 90vh;
    border-bottom: none;
    border-left: none;
    border-right: none;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.8);
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
  }

  #productModal.active .modal-sheet {
    transform: translateY(0);
  }

  .sheet-drag-handle {
    display: flex;
  }

  .product-modal-scrollable {
    padding: 12px 16px 16px 16px;
  }

  .product-modal-close-btn {
    top: 12px;
    right: 12px;
  }
}

/* Gaveta do Carrinho (Cart Drawer) */
.cart-drawer-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(10, 8, 13, 0.85);
  backdrop-filter: blur(6px);
  z-index: 1060;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.cart-drawer-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 460px;
  background-color: #17131d;
  border-left: 1px solid #2b2434;
  z-index: 1070;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.7);
}

.cart-drawer.active {
  transform: translateX(0);
}

/* ==========================================================================
   MENU LATERAL DE CATEGORIAS (||| MENU FECHADO -> GAVETA ABERTA)
   ========================================================================== */

/* Traços Verticais Característicos (|||) */
.bars-vert-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3.5px;
  height: 18px;
  flex-shrink: 0;
}

.bars-vert-icon span {
  display: block;
  width: 3.5px;
  height: 100%;
  background: #f59e0b;
  border-radius: 2px;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Botão Único Elegante de Categorias na Barra Sticky (||| Menu Fechado) */
.cat-drawer-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0 14px;
  background: #1c1822;
  border: 1px solid #3d3348;
  border-radius: 999px;
  color: #f3f4f6;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  user-select: none;
}

.cat-drawer-toggle-btn:hover {
  background: #282130;
  border-color: #f59e0b;
  color: #1d1d1f;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.35);
  transform: translateY(-1px);
}

.cat-drawer-toggle-btn:active {
  transform: scale(0.96);
}

.cat-drawer-toggle-btn.active {
  background: linear-gradient(135deg, #4a154b 0%, #2e0d2f 100%);
  border-color: #f59e0b;
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.4);
}

.cat-drawer-toggle-btn:hover .bars-vert-icon span,
.cat-drawer-toggle-btn.active .bars-vert-icon span {
  background: #fbbf24;
  transform: scaleY(1.1);
}

.cat-drawer-toggle-btn:focus-visible {
  outline: 2px solid #f59e0b;
  outline-offset: 2px;
}

@media (max-width: 639px) {
  .cat-drawer-toggle-btn {
    padding: 0 12px;
    min-width: 44px;
    min-height: 44px;
  }
}

/* Gaveta Lateral de Categorias (Menu Aberto) */
.categories-drawer-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(10, 8, 13, 0.85);
  backdrop-filter: blur(6px);
  z-index: 1060;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.categories-drawer-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.categories-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 88%;
  max-width: 350px;
  background-color: #17131d;
  border-right: 1px solid #2b2434;
  z-index: 1070;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 10px 0 40px rgba(0, 0, 0, 0.75);
}

.categories-drawer.active {
  transform: translateX(0);
}

.cat-drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #1c1822;
  border: 1px solid #292331;
  border-radius: 12px;
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 600;
  transition: all 0.16s ease;
  cursor: pointer;
  width: 100%;
  text-align: left;
}

.cat-drawer-item:hover {
  background: #26202e;
  color: #1d1d1f;
  border-color: #f59e0b;
  transform: translateX(4px);
}

.cat-drawer-item.active {
  background: linear-gradient(135deg, #4a154b 0%, #2e0d2f 100%);
  border-color: var(--gold-accent);
  color: #1d1d1f;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(74, 21, 75, 0.4);
}

.cat-drawer-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}

/* ==========================================================================
   TELA DE SPLASH SCREEN
   ========================================================================== */
.splash-screen {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, #261729 0%, #fbfbfd 100%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
  pointer-events: auto;
}

.splash-screen.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash-logo-box {
  width: 100px;
  height: 100px;
  border-radius: 24px;
  background: #1a1520;
  border: 1px solid rgba(217, 119, 6, 0.3);
  padding: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   ANIMAÇÃO DE CHECKMARK SVG (CONFIRMAÇÃO DE PEDIDO)
   ========================================================================== */
.checkmark-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2.5;
  stroke-miterlimit: 10;
  stroke: #10b981;
  fill: none;
  animation: strokeCircle 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  stroke-width: 3.5;
  stroke: #10b981;
  animation: strokeCheck 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.5s forwards;
}

@keyframes strokeCircle {
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes strokeCheck {
  100% {
    stroke-dashoffset: 0;
  }
}

body.overflow-hidden {
  overflow: hidden !important;
}

/* Botão Limpar Carrinho */
.btn-clear-cart {
  background: transparent;
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.25);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
  cursor: pointer;
}

.btn-clear-cart:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: #1d1d1f;
}

/* A�a� da Night - Customiza��es Premium (Prompt Design) */

/* 1. Carrinho */
.cart-item {
  border: 2px solid #FFB81C;
  border-radius: 12px;
  background: rgba(30, 30, 40, 0.6);
  padding: 16px;
  margin-bottom: 16px;
  transition: all 200ms ease;
}
.cart-item:hover {
  border-color: #00C896;
  box-shadow: 0 8px 20px rgba(255, 184, 28, 0.15);
  transform: translateY(-2px);
}

.qty-btn {
  border: 2px solid #A855F7 !important;
  background: transparent !important;
  color: #A855F7 !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  cursor: pointer;
  transition: all 150ms ease;
  font-weight: bold;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.qty-btn:hover {
  background: rgba(168, 85, 247, 0.1) !important;
  transform: scale(1.1);
}
.qty-btn.plus {
  border-color: #00C896 !important;
  color: #00C896 !important;
}
.qty-btn.plus:hover {
  background: rgba(0, 200, 150, 0.1) !important;
}
.qty-input {
  color: #FFB81C !important;
  font-weight: bold !important;
  font-size: 16px !important;
  text-align: center;
  width: 40px;
}

.accompaniment {
  color: #A855F7;
  font-size: 12px;
  margin-top: 4px;
}
.accompaniment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.accompaniment-tag {
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.5);
  color: #A855F7;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 11px;
}

.cart-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 0;
  border-top: 2px solid rgba(255, 184, 28, 0.3);
  margin-top: 12px;
}
.total-amount {
  font-size: 28px !important;
  font-weight: bold !important;
  color: #FFB81C !important;
}
.total-label {
  font-size: 12px;
  color: #888;
  text-transform: uppercase;
}

.btn-clear {
  border: 2px solid #EF4444 !important;
  background: transparent !important;
  color: #EF4444 !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: all 200ms ease;
  width: 100%;
}
.btn-clear:hover {
  background: rgba(239, 68, 68, 0.1) !important;
  transform: scale(1.02);
}

/* 2. Endere�o */
.address-section {
  border: 2px solid #FFB81C !important;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(30, 30, 40, 0.6) !important;
  margin-top: 16px;
}
/* Reset suave de formulário legado */
.address-header {
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.address-header-title {
  color: #f59e0b;
  font-weight: 700;
  font-size: 13px;
}
.address-input {
  width: 100%;
  background: #1a1424;
  border: 1px solid #2f253d;
  color: #1d1d1f;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 13px;
  transition: all 150ms ease;
}
.address-input:focus {
  border: 1px solid #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
  outline: none;
}
.address-input::placeholder {
  color: #6b6375;
}
.address-label {
  color: #a99ec0;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 5px;
  display: block;
}

/* 3. Pagamento */
.payment-select {
  border: 1px solid #2f253d;
  background-color: #1a1424;
  color: #1d1d1f;
  padding: 11px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  width: 100%;
  transition: all 150ms ease;
}
.payment-select:hover, .payment-select:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
  outline: none;
}

/* 4. Cupom */
.coupon-input {
  border: 1px solid #2f253d;
  background: #1a1424;
  color: #1d1d1f;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 13px;
  transition: all 150ms ease;
}
.coupon-input:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
  outline: none;
}
.coupon-input.success {
  border-color: #10b981;
}
.btn-apply {
  background: #2a2236;
  color: #f59e0b;
  border: 1px solid #3d324d;
  padding: 10px 18px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: all 150ms ease;
}
.btn-apply:hover {
  background: #f59e0b;
  color: #000;
}

/* 5. Resumo */
.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
}
.summary-label {
  color: #9e94aa;
}
.summary-value {
  color: #1d1d1f;
  font-weight: 600;
}

/* Estilo iFood Dark Theme - Sobrescrita */

/* Resetando cores extravagantes para o padr�o limpo */
:root {
  --ifood-red: #ea1d2c;
  --ifood-red-hover: #c41825;
  --ifood-green: #50a773;
  --ifood-bg: #121212;
  --ifood-card: #1f1f1f;
  --ifood-border: #2f2f2f;
  --ifood-text-main: #f5f5f5;
  --ifood-text-muted: #a6a6a6;
}

/* ==========================================================================
   STOREFRONT HERO & IDENTIDADE ARTESANAL (AÇAI DA NIGHT / MANANCIAL)
   ========================================================================== */
.storefront-hero-wrap {
  position: relative;
  background: #17121f;
  border: 1px solid #2b2434;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
  transition: all 0.2s ease;
}

.store-avatar-crest {
  border-color: #fbbf24 !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6), 0 0 15px rgba(251, 191, 36, 0.25) !important;
  transition: transform 0.2s ease;
}
.store-avatar-crest:hover {
  transform: scale(1.04);
}

.store-hero-bio {
  color: #c4b8d4;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Chips Informativos Autênticos */
.store-chips-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  white-space: nowrap;
}

.store-info-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 9999px;
  background: #20182c;
  border: 1px solid #362947;
  color: #d1c6df;
  font-size: 11.5px;
  font-weight: 600;
  transition: all 0.18s ease;
  user-select: none;
}
.store-info-chip:hover {
  border-color: rgba(251, 191, 36, 0.4);
  color: #1d1d1f;
}

.store-rating-chip {
  background: #261a33;
  border-color: rgba(251, 191, 36, 0.3);
  color: #fbbf24;
}

.store-chip-highlight {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.35);
  color: #d8b4fe;
}

/* Botões de Ação na Loja (Share, Search, WhatsApp) */
.store-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 14px;
  background: #231b2e;
  border: 1px solid #392b4a;
  color: #e2d9ec;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.store-action-btn:hover {
  background: #2e233d;
  border-color: #fbbf24;
  color: #1d1d1f;
  transform: translateY(-1px);
}

.store-action-whatsapp {
  background: rgba(37, 211, 102, 0.15);
  border-color: rgba(37, 211, 102, 0.35);
  color: #4ade80;
}
.store-action-whatsapp:hover {
  background: #25d366;
  border-color: #25d366;
  color: #000000;
}

/* Barra Sticky de Categorias */
.storefront-tabs-bar {
  background-color: rgba(17, 13, 24, 0.94);
  border-bottom: 1px solid #292036;
}

/* ==========================================================================
   CARDS DE PRODUTO & SEÇÕES ARTESANAIS (DESIGN ELEVADO / ANTI-GENÉRICO)
   ========================================================================== */
.product-card {
  background: #1a1424 !important;
  border: 1px solid #2d223c !important;
  border-radius: 20px !important;
  padding: 16px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 14px !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22) !important;
  position: relative !important;
  overflow: hidden !important;
}

.product-card:hover {
  background: #21192e !important;
  border-color: rgba(251, 191, 36, 0.5) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), 0 0 18px rgba(251, 191, 36, 0.08) !important;
}

.product-info {
  flex: 1;
  text-align: left;
  min-width: 0;
}

.product-title {
  color: #1d1d1f !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  margin-bottom: 6px !important;
  letter-spacing: -0.015em !important;
}

.product-desc {
  color: #9e93ad !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  margin-bottom: 10px !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.product-price {
  color: #10b981 !important;
  font-weight: 900 !important;
  font-size: 15.5px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  letter-spacing: -0.02em;
}

.product-original-price {
  color: #7b7189 !important;
  text-decoration: line-through !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

.product-image-container {
  width: 104px;
  height: 104px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  border: 1px solid #362947;
  background: #140f1c;
}

.product-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover .product-image-container img {
  transform: scale(1.08);
}

.product-card-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border-radius: 9999px;
  background: #fbbf24;
  color: #0d0a12;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 13px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.product-card:hover .product-card-badge {
  transform: scale(1.18);
  background: #f59e0b;
}

/* MODAL DE PRODUTO (Op��es / Complementos) */
.subcategory-header {
  background-color: var(--ifood-bg) !important;
  padding: 16px 0 !important;
  border-bottom: none !important;
}
.subcategory-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.subcategory-title {
  color: var(--ifood-text-main) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}
.subcategory-subtitle {
  color: var(--ifood-text-muted) !important;
  font-size: 13px !important;
  margin-top: 2px !important;
}
.subcategory-badge {
  background-color: #333 !important;
  color: #1d1d1f !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  letter-spacing: 0.5px !important;
}

.option-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid var(--ifood-border) !important;
}
.option-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.option-name {
  color: var(--ifood-text-main) !important;
  font-size: 14px !important;
}
.option-price {
  color: var(--ifood-text-muted) !important;
  font-size: 13px !important;
}
.option-thumbnail {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  object-fit: cover;
  background-color: #222;
}

.option-add-btn {
  color: var(--ifood-red) !important;
  background: transparent !important;
  border: none !important;
  font-size: 20px !important;
  cursor: pointer;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CARRINHO (Cart) */
.cart-item {
  border: none !important;
  border-bottom: 1px solid var(--ifood-border) !important;
  background: transparent !important;
  padding: 16px 0 !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}
.cart-item:hover {
  box-shadow: none !important;
  transform: none !important;
}
.cart-item-header {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.cart-item-qty {
  color: var(--ifood-text-main) !important;
  font-weight: 500 !important;
}
.cart-item-title {
  color: var(--ifood-text-main) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}
.cart-item-price {
  color: var(--ifood-text-main) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}
.accompaniment {
  color: var(--ifood-text-muted) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  margin-top: 4px !important;
}
.accompaniment-tag {
  display: none !important; /* Esconder o check ? que o prompt anterior pediu */
}
.cart-item-actions {
  display: flex;
  gap: 16px;
  margin-top: 12px;
}
.cart-action-btn {
  color: var(--ifood-red) !important;
  background: transparent !important;
  border: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 !important;
  cursor: pointer;
}

/* Bot�es Globais */
.btn-primary {
  background-color: var(--ifood-red) !important;
  color: white !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
}
.btn-primary:hover {
  background-color: var(--ifood-red-hover) !important;
  transform: none !important;
}

.total-amount {
  color: var(--ifood-text-main) !important;
  font-size: 18px !important;
}
.summary-value {
  color: var(--ifood-text-main) !important;
}
.summary-value.fee {
  color: var(--ifood-text-main) !important;
}
.summary-value.discount {
  color: var(--ifood-green) !important;
}

/* Modals fix */
.modal-header {
  border-top: none !important;
  background: var(--ifood-card) !important;
}


/* ==========================================================================
   TEMA CLARO (LIGHT THEME) - CARDÁPIO DO CLIENTE
   Zero-Breakage: Suave, legível, alto contraste e harmônico
   ========================================================================== */

[data-theme="light"],
body.theme-light {
  --bg-page: #f7f5fa;
  --bg-surface: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f4eff9;
  --border-subtle: #e6dfec;
  --border-card: #e6dfec;
  --border-card-hover: #d2c8dc;
  --gold-accent: #d97706;
  --gold-hover: #b45309;
  --brand-acai: #501652;
  --brand-acai-light: #701f72;
  --brand-cream: #18141f;
  --green-fresh: #059669;
  --text-primary: #18141f;
  --text-secondary: #4a4155;
  --text-muted: #746c80;

  --ifood-red: #ea1d2c;
  --ifood-red-hover: #c41825;
  --ifood-green: #059669;
  --ifood-bg: #f7f5fa;
  --ifood-card: #ffffff;
  --ifood-border: #e6dfec;
  --ifood-text-main: #18141f;
  --ifood-text-muted: #746c80;
  
  background-color: var(--bg-page) !important;
  color: var(--text-primary) !important;
}

/* Transições suaves de tema */
body, header, aside, .modal-sheet, .product-card, .cat-tab, input, textarea, select {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* 1. Reset de Cores de Fundo Escuras no Tema Claro */
[data-theme="light"] body,
body.theme-light {
  background-color: #f7f5fa !important;
  color: #18141f !important;
}

[data-theme="light"] .bg-\[\#fbfbfd\],
[data-theme="light"] .bg-\[\#ffffff\],
[data-theme="light"] .bg-\[\#ffffff\]\/95,
[data-theme="light"] .bg-\[\#18151c\],
[data-theme="light"] .bg-\[\#111215\],
[data-theme="light"] .bg-\[\#111215\]\/95,
[data-theme="light"] .bg-\[\#17131d\],
[data-theme="light"] .bg-\[\#191522\],
[data-theme="light"] .bg-\[\#1b1722\],
[data-theme="light"] .bg-\[\#1c1822\],
[data-theme="light"] .bg-\[\#1c1e23\],
[data-theme="light"] .bg-\[\#1e2126\],
[data-theme="light"] .bg-\[\#14161a\],
[data-theme="light"] .bg-\[\#0d0e11\],
[data-theme="light"] .bg-\[\#16121c\] {
  background-color: #ffffff !important;
}

/* 2. Reset de Bordas Escuras */
[data-theme="light"] .border-\[\#282230\],
[data-theme="light"] .border-\[\#2b2434\],
[data-theme="light"] .border-\[\#e5e5ea\],
[data-theme="light"] .border-\[\#2e2837\],
[data-theme="light"] .border-\[\#252932\],
[data-theme="light"] .border-\[\#23272d\],
[data-theme="light"] .border-\[\#23272e\],
[data-theme="light"] .border-\[\#2d2538\],
[data-theme="light"] .border-\[\#2b3039\],
[data-theme="light"] .border-\[\#2d323b\],
[data-theme="light"] .border-\[\#2e333d\],
[data-theme="light"] .border-\[\#3a3144\] {
  border-color: #e6dfec !important;
}

/* 3. Textos no Modo Claro */
[data-theme="light"] .text-white:not(.btn-primary):not(.badge-gold):not(.badge-teal):not(.badge-purple):not(.badge-red):not(.subcategory-badge):not(.bg-\[\#15803d\]):not(.bg-amber-500):not(.bg-amber-500 *) {
  color: #18141f !important;
}

[data-theme="light"] .text-gray-200,
[data-theme="light"] .text-gray-300,
[data-theme="light"] .text-gray-400,
[data-theme="light"] .text-\[\#1d1d1f\],
[data-theme="light"] .text-\[\#86868b\],
[data-theme="light"] .text-\[\#86868b\] {
  color: #524a5e !important;
}

[data-theme="light"] .text-gray-500,
[data-theme="light"] .text-\[\#a89e90\],
[data-theme="light"] .text-\[\#9c9387\] {
  color: #7b7285 !important;
}

/* 4. Navbar & Botões Superiores */
[data-theme="light"] header.sticky {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid #e6dfec !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] #btnCustomerAuth,
[data-theme="light"] #btnCustomerTheme,
[data-theme="light"] header button.relative.p-2 {
  background-color: #ffffff !important;
  border: 1px solid #dcd4e4 !important;
  color: #18141f !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] #btnCustomerAuth:hover,
[data-theme="light"] #btnCustomerTheme:hover,
[data-theme="light"] header button.relative.p-2:hover {
  background-color: #f7f3fb !important;
  border-color: #c9bed4 !important;
}

/* 5. Cabeçalho da Loja / Status Banner */
[data-theme="light"] #closedBanner {
  background-color: #f3edf8 !important;
  border-bottom: 1px solid #e5dcee !important;
  color: #4a4155 !important;
}

[data-theme="light"] .btn-round-action {
  background-color: #ffffff !important;
  border-color: #dcd4e4 !important;
  color: #18141f !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

[data-theme="light"] .btn-round-action:hover {
  background-color: #f7f3fb !important;
  border-color: #c9bed4 !important;
}

/* 6. Barra Sticky de Categorias */
[data-theme="light"] .sticky.top-16 {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-bottom: 1px solid #e6dfec !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}

[data-theme="light"] #tabsScrollPrev,
[data-theme="light"] #tabsScrollNext {
  background-color: #ffffff !important;
  border-color: #dcd4e4 !important;
  color: #524a5e !important;
}

[data-theme="light"] #tabsScrollPrev:hover,
[data-theme="light"] #tabsScrollNext:hover {
  background-color: #f7f3fb !important;
  color: #18141f !important;
  border-color: #c9bed4 !important;
}

[data-theme="light"] .cat-tab {
  background: #ffffff !important;
  border: 1px solid #e2daea !important;
  color: #524a5e !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .cat-tab:hover {
  background: #f7f3fb !important;
  border-color: #cebfde !important;
  color: #18141f !important;
}

[data-theme="light"] .cat-tab.active {
  background: #f1ecf5 !important;
  border-color: #d0c4dc !important;
  color: #2b1836 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  font-weight: 800 !important;
}

[data-theme="light"] .cat-tab.active:hover {
  background: #ebe4f1 !important;
  border-color: #bfaecf !important;
  color: #1a0d23 !important;
}

/* Storefront Hero Light Mode */
[data-theme="light"] .storefront-hero-wrap {
  background: #ffffff !important;
  border-color: #ebdfee !important;
  box-shadow: 0 10px 30px rgba(50, 18, 59, 0.08) !important;
}

[data-theme="light"] .store-avatar-crest {
  background: #ffffff !important;
  border-color: #f59e0b !important;
  box-shadow: 0 8px 24px rgba(74, 21, 75, 0.15), 0 0 12px rgba(245, 158, 11, 0.25) !important;
}

[data-theme="light"] .store-hero-bio {
  color: #5c506e !important;
  text-shadow: none !important;
}

[data-theme="light"] .store-info-chip {
  background: #faf7fc !important;
  border-color: #e5dcee !important;
  color: #4a3e5c !important;
}
[data-theme="light"] .store-info-chip:hover {
  border-color: #d97706 !important;
  color: #18141f !important;
}

[data-theme="light"] .store-rating-chip {
  background: #fffbeb !important;
  border-color: #fde68a !important;
  color: #b45309 !important;
}
[data-theme="light"] .store-rating-chip strong,
[data-theme="light"] .store-rating-chip span.font-black {
  color: #78350f !important;
}

[data-theme="light"] .store-chip-highlight {
  background: #fbf5ff !important;
  border-color: #e9d5ff !important;
  color: #7e22ce !important;
}

[data-theme="light"] .store-action-btn {
  background: #faf7fc !important;
  border-color: #e5dcee !important;
  color: #3b304c !important;
}
[data-theme="light"] .store-action-btn:hover {
  background: #f1ebf7 !important;
  border-color: #d97706 !important;
  color: #18141f !important;
}

[data-theme="light"] .store-action-whatsapp {
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
  color: #047857 !important;
}
[data-theme="light"] .store-action-whatsapp:hover {
  background: #25d366 !important;
  color: #1d1d1f !important;
}

[data-theme="light"] .storefront-tabs-bar {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-color: #ebdfee !important;
}

/* 7. Cards de Produtos Light */
[data-theme="light"] .product-card { background-color: #ffffff !important; border: 1px solid #ebdfee !important; border-radius: 20px !important; box-shadow: 0 4px 14px rgba(0,0,0,0.05) !important; }

[data-theme="light"] .product-card:hover {
  background-color: #ffffff !important;
  border-color: #d97706 !important;
  box-shadow: 0 10px 26px rgba(74, 21, 75, 0.12) !important;
}

[data-theme="light"] .product-title {
  color: #18141f !important;
}

[data-theme="light"] .product-desc {
  color: #61596e !important;
}

[data-theme="light"] .product-image-container {
  border-color: #ebdfee !important;
  background: #faf7fc !important;
}

[data-theme="light"] .category-title {
  color: #18141f !important;
}

[data-theme="light"] .product-original-price {
  color: #8c8398 !important;
}

/* 8. Gavetas Laterais (Carrinho, Categorias, Minha Conta) */
[data-theme="light"] .cart-drawer, [data-theme="light"] .categories-drawer { background-color: #ffffff !important; border-color: #e6dfec !important; box-shadow: -10px 0 40px rgba(0,0,0,0.08) !important; }

[data-theme="light"] .cart-drawer > div:first-child,
[data-theme="light"] .categories-drawer > div:first-child {
  background-color: #faf8fc !important;
  border-bottom: 1px solid #e6dfec !important;
}

[data-theme="light"] #cartDrawerFooter {
  background-color: #faf8fc !important;
  border-top: 1px solid #e6dfec !important;
}

[data-theme="light"] .cart-item {
  border-bottom: 1px solid #ebe4f2 !important;
}

[data-theme="light"] .cart-item-qty,
[data-theme="light"] .cart-item-title,
[data-theme="light"] .cart-item-price {
  color: #18141f !important;
}

[data-theme="light"] .accompaniment {
  color: #61596e !important;
}

[data-theme="light"] .cart-item .bg-\[\#14161a\] {
  background-color: #f5f0fa !important;
  border-color: #e2daea !important;
  color: #524a5e !important;
}

[data-theme="light"] .btn-clear {
  color: #7b7285 !important;
}
[data-theme="light"] .btn-clear:hover {
  color: #ea1d2c !important;
}

/* 8.1 Itens de Categoria na Gaveta Lateral e na Modal em Modo Claro */
[data-theme="light"] .cat-modal-item,
[data-theme="light"] .cat-drawer-item {
  background: #ffffff !important;
  border: 1px solid #ebdfee !important;
  color: #332940 !important;
}

[data-theme="light"] .cat-modal-item:hover,
[data-theme="light"] .cat-drawer-item:hover {
  background: #f7f3fb !important;
  border-color: #d0c4dc !important;
  color: #18141f !important;
}

[data-theme="light"] .cat-drawer-item.active {
  background: #f1ecf5 !important;
  border-color: #d0c4dc !important;
  color: #2b1836 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  font-weight: 800 !important;
}

[data-theme="light"] .cat-drawer-item span.bg-\[\#141018\] {
  background-color: #f1ecf5 !important;
  border-color: #d0c4dc !important;
  color: #78350f !important;
}

/* 9. Modais (Produto, Busca, Login, Sucesso) */
[data-theme="light"] .modal-overlay {
  background-color: rgba(18, 14, 25, 0.5) !important;
}

[data-theme="light"] .modal-sheet { background-color: #ffffff !important; border: 1px solid #e6dfec !important; box-shadow: 0 25px 60px rgba(0,0,0,0.12) !important; }

/* Garantia de contraste e legibilidade no Modal de Sucesso (#orderSuccessModal) */
[data-theme="light"] #orderSuccessModal .modal-sheet {
  background-color: #ffffff !important;
  color: #18141f !important;
}

[data-theme="light"] #orderSuccessModal .bg-gray-50 {
  background-color: #f9fafb !important;
  border-color: #e5e7eb !important;
}

[data-theme="light"] #btnOrderSuccessWhatsApp,
[data-theme="light"] #btnOrderSuccessWhatsApp * {
  color: #1d1d1f !important;
}

[data-theme="light"] .subcategory-header {
  background-color: #faf8fc !important;
}

[data-theme="light"] .subcategory-title {
  color: #18141f !important;
}

[data-theme="light"] .subcategory-subtitle {
  color: #61596e !important;
}

[data-theme="light"] .subcategory-badge {
  background-color: #f0eaf7 !important;
  color: #501652 !important;
  font-weight: 700 !important;
}

[data-theme="light"] #modalProdOptionsContainer label {
  background-color: #ffffff !important;
  border: 1px solid #e6dfec !important;
  color: #18141f !important;
}

[data-theme="light"] #modalProdOptionsContainer label:hover {
  background-color: #f9f6fc !important;
  border-color: #cfc2dc !important;
}

[data-theme="light"] .option-name {
  color: #18141f !important;
}

[data-theme="light"] .option-price {
  color: #059669 !important;
}

[data-theme="light"] .option-thumbnail {
  background-color: #f0ecf4 !important;
}

[data-theme="light"] #modalProdNotes {
  background-color: #fbf9fc !important;
  border-color: #ded6e6 !important;
  color: #18141f !important;
}

/* 10. Inputs, Selects e Formulários Gerais */
[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]), [data-theme="light"] textarea, [data-theme="light"] select { background-color: #ffffff !important; border: 1px solid #dcd4e4 !important; color: #18141f !important; }

[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  border-color: #d97706 !important;
  box-shadow: 0 0 0 2px rgba(217, 119, 6, 0.15) !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: #938a9d !important;
}

[data-theme="light"] #btnApplyCoupon {
  background-color: #f0ebf5 !important;
  color: #4a4155 !important;
}
[data-theme="light"] #btnApplyCoupon:hover {
  background-color: #d97706 !important;
  color: #0b0811 !important;
}

/* 11. Área do Cliente & Cashback */
[data-theme="light"] .bg-gradient-to-r.from-purple-950\/60 {
  background: linear-gradient(135deg, #f7f1fc 0%, #efe7f6 100%) !important;
  border-color: #decfe9 !important;
}
[data-theme="light"] .bg-gradient-to-r.from-purple-950\/60 p {
  color: #4a4155 !important;
}

[data-theme="light"] #accTabData > div,
[data-theme="light"] #accTabReferral > div,
[data-theme="light"] #accTabCashback > div {
  background-color: #ffffff !important;
  border-color: #e6dfec !important;
}

[data-theme="light"] #accReferralCodeDisplay {
  color: #b45309 !important;
}

[data-theme="light"] .bg-\[\#110e17\] {
  background-color: #fcf9fe !important;
  border-color: #e0d0eb !important;
}

/* 12. Rodapé no Modo Claro */
[data-theme="light"] footer {
  background-color: #f1ecf7 !important;
  border-top: 1px solid #dfd6e8 !important;
  color: #4a4155 !important;
}

[data-theme="light"] footer h3,
[data-theme="light"] footer h4,
[data-theme="light"] footer strong {
  color: #18141f !important;
}

[data-theme="light"] footer a,
[data-theme="light"] footer p,
[data-theme="light"] footer span {
  color: #554d60 !important;
}

/* 13. Barra de Rolagem no Modo Claro */
[data-theme="light"] ::-webkit-scrollbar-track {
  background: #f1edf5;
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #cebfde;
  border-radius: 999px;
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: #b29ec6;
}


/* Complementos - Seleção Sem Caixa Quadrada e com Feedback Imediato */
.option-item-row {
  margin-bottom: 8px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border-radius: 12px !important;
}
.option-item-row .option-action-btn {
  color: #ea1d2c !important;
  border-color: rgba(234, 29, 44, 0.4) !important;
  background-color: transparent !important;
}
.option-item-row.selected {
  border-color: #ea1d2c !important;
  background-color: rgba(234, 29, 44, 0.08) !important;
}
.option-item-row.selected .option-action-btn {
  background-color: #ea1d2c !important;
  border-color: #ea1d2c !important;
  color: #1d1d1f !important;
}
.option-item-row.selected .option-name {
  color: #ea1d2c !important;
}

[data-theme="light"] .option-item-row {
  background-color: #ffffff !important;
  border-color: #e6dfec !important;
}
[data-theme="light"] .option-item-row:hover {
  background-color: #fcf9fe !important;
  border-color: #d8cedf !important;
}
[data-theme="light"] .option-item-row .option-name {
  color: #191423 !important;
}
[data-theme="light"] .option-item-row.selected {
  background-color: rgba(234, 29, 44, 0.06) !important;
  border-color: #ea1d2c !important;
}
[data-theme="light"] .option-item-row.selected .option-name {
  color: #ea1d2c !important;
}

/* Stepper de Quantidade nos Complementos (- | qty | +) */
.option-stepper {
  display: inline-flex !important;
  align-items: center !important;
  background-color: rgba(234, 29, 44, 0.15) !important;
  border: 1px solid rgba(234, 29, 44, 0.45) !important;
  border-radius: 999px !important;
  padding: 3px 6px !important;
  gap: 6px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}
.opt-step-btn {
  width: 26px !important;
  height: 26px !important;
  border-radius: 999px !important;
  background-color: #ea1d2c !important;
  color: #1d1d1f !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1) !important;
  flex-shrink: 0 !important;
}
.opt-step-btn:hover {
  background-color: #d11120 !important;
  transform: scale(1.1) !important;
}
.opt-step-btn:active {
  transform: scale(0.92) !important;
}
.opt-step-qty {
  min-width: 20px !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  color: #1d1d1f !important;
  line-height: 1 !important;
}

[data-theme="light"] .option-stepper {
  background-color: rgba(234, 29, 44, 0.08) !important;
  border-color: rgba(234, 29, 44, 0.4) !important;
}
[data-theme="light"] .opt-step-qty {
  color: #191423 !important;
}


/* 14. Carrinho de Compras - Caixa de Totais nos Modos Claro e Escuro */
.cart-summary-box {
  background-color: #181a1e;
  border: 1px solid #252932;
  border-radius: 14px;
}
.cart-summary-label {
  color: #9ca3af;
}
.cart-summary-val {
  color: #1d1d1f;
  font-weight: 600;
}
.cart-summary-total-label {
  color: #1d1d1f;
  font-weight: 800;
}
.cart-summary-total-val {
  color: #ffb81c;
  font-weight: 900;
}

[data-theme="light"] .cart-summary-box,
[data-theme="light"] #cartDrawer .bg-\[\#181a1e\] {
  background-color: #f7f3fb !important;
  border: 1px solid #dfd5e8 !important;
}

[data-theme="light"] .cart-summary-box .text-gray-400,
[data-theme="light"] #cartDrawer .bg-\[\#181a1e\] .text-gray-400,
[data-theme="light"] .cart-summary-label {
  color: #5d5469 !important;
}

[data-theme="light"] .cart-summary-box .text-white,
[data-theme="light"] #cartDrawer .bg-\[\#181a1e\] .text-white,
[data-theme="light"] .cart-summary-val,
[data-theme="light"] .cart-summary-total-label {
  color: #191423 !important;
}

[data-theme="light"] .cart-summary-box #cartGrandTotal,
[data-theme="light"] #cartDrawer .bg-\[\#181a1e\] #cartGrandTotal,
[data-theme="light"] .cart-summary-total-val {
  color: #ea1d2c !important;
}

[data-theme="light"] .cart-summary-box #cartDiscount,
[data-theme="light"] #cartDrawer .bg-\[\#181a1e\] #cartDiscount {
  color: #059669 !important;
}

[data-theme="light"] #cartDrawer .border-\[\#2b3039\] {
  border-color: #e3d9ec !important;
}



/* ==========================================================================
   NOVO SISTEMA VISUAL DA SACOLA / CARRINHO (CART DRAWER REDESIGN)
   Moderno, elegante, apetitoso e responsivo (Dark & Light Mode)
   ========================================================================== */

/* Overlay */
.cart-drawer-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(10, 8, 14, 0.85);
  backdrop-filter: blur(8px);
  z-index: 1060;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.cart-drawer-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* Gaveta Principal */
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 480px;
  background-color: #140f1a;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  z-index: 1070;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: -12px 0 45px rgba(0, 0, 0, 0.75);
}
.cart-drawer.active {
  transform: translateX(0);
}

/* Cabeçalho Fixo */
.cart-drawer-header {
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background-color: #181220;
  flex-shrink: 0;
}
.cart-drawer-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cart-drawer-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.1));
  border: 1px solid rgba(245, 158, 11, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
  font-size: 18px;
}
.cart-drawer-title {
  font-size: 16px;
  font-weight: 800;
  color: #1d1d1f;
  line-height: 1.2;
}
.cart-drawer-subtitle {
  font-size: 11px;
  font-weight: 500;
  color: #9e93ab;
}
.cart-drawer-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-clear-cart {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #f87171;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s ease;
}
.btn-clear-cart:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #1d1d1f;
}
.cart-drawer-close-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #c5bccf;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s ease;
}
.cart-drawer-close-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #1d1d1f;
}

/* Corpo Scrollável Único */
.cart-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  -webkit-overflow-scrolling: touch;
}
.cart-drawer-body::-webkit-scrollbar {
  width: 5px;
}
.cart-drawer-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 10px;
}

/* Estado Vazio */
.cart-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 20px;
  min-height: 300px;
}
.cart-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: #8c8299;
  margin-bottom: 16px;
}
.cart-empty-title {
  font-size: 17px;
  font-weight: 800;
  color: #1d1d1f;
  margin-bottom: 6px;
}
.cart-empty-desc {
  font-size: 13px;
  color: #9e93ab;
  max-width: 280px;
  line-height: 1.5;
  margin-bottom: 20px;
}
.cart-empty-btn {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #000000;
  font-weight: 800;
  font-size: 13px;
  padding: 10px 22px;
  border-radius: 25px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.15s ease;
}
.cart-empty-btn:hover {
  transform: translateY(-2px);
}

/* Seções do Carrinho */
.cart-section {
  background: transparent;
}
.cart-section-header {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart-section-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #d1c7dc;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Cards de Itens */
.cart-item-card {
  background: #1b1424;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cart-item-card:hover {
  border-color: rgba(245, 158, 11, 0.35);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}
.cart-item-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.cart-item-thumb {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  overflow: hidden;
  background: #231b2e;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.cart-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-item-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cart-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.cart-item-name {
  font-size: 14.5px;
  font-weight: 800;
  color: #1d1d1f;
  line-height: 1.3;
}
.cart-item-prices {
  text-align: right;
  flex-shrink: 0;
}
.cart-item-total-price {
  font-size: 14.5px;
  font-weight: 800;
  color: #f59e0b;
  display: block;
}
.cart-item-unit-price {
  font-size: 11px;
  color: #8c8299;
  display: block;
}

/* Complementos e Apresentação em Bullets */
.cart-item-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 6px;
}
.cart-item-title-text {
  font-size: 14.5px;
  line-height: 1.35;
  color: #1d1d1f;
}
.cart-item-title-sep {
  color: #ffb81c;
  font-weight: 700;
  margin: 0 2px;
}
.cart-item-bullets-list {
  display: flex;
  flex-direction: column;
  gap: 3.5px;
  padding: 3px 0 6px 12px;
}
.cart-item-bullet-line {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #cfc6db;
}
.cart-bullet-dash {
  color: #ffb81c;
  font-weight: 700;
  flex-shrink: 0;
}
.cart-bullet-text {
  color: #d1c8dd;
}
.cart-item-complements-box {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cart-item-option-row {
  font-size: 12px;
  line-height: 1.4;
  color: #b0a5be;
}
.cart-item-option-group {
  font-weight: 700;
  color: #e2d9ec;
  margin-right: 4px;
}
.cart-item-option-values {
  color: #b0a5be;
}
.cart-item-notes {
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid #f59e0b;
  padding: 6px 10px;
  border-radius: 0 8px 8px 0;
  font-size: 11.5px;
  color: #fde68a;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Barra Inferior do Card (Stepper + Ações) */
.cart-item-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 4px;
}
.cart-qty-stepper {
  display: inline-flex;
  align-items: center;
  background: #251d30;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 2px 4px;
  gap: 5px;
}
.cart-qty-btn {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: none;
  background: #342944;
  color: #1d1d1f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cart-qty-btn:hover {
  background: #f59e0b;
  color: #000000;
}
.cart-qty-btn.minus:hover {
  background: #ef4444;
  color: #1d1d1f;
}
.cart-qty-val {
  font-size: 13px;
  font-weight: 800;
  color: #1d1d1f;
  min-width: 18px;
  text-align: center;
  user-select: none;
}
.cart-item-actions-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cart-item-edit-btn {
  font-size: 12px;
  font-weight: 700;
  color: #9e93ab;
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.cart-item-edit-btn:hover {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
}
.cart-item-remove-btn {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s ease;
}
.cart-item-remove-btn:hover {
  background: #ef4444;
  color: #1d1d1f;
}

/* Modo de Entrega / Retirada */
.delivery-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.delivery-type-card {
  position: relative;
  cursor: pointer;
  background: #1b1424;
  border: 1.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 14px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
}
.delivery-type-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.delivery-type-card:hover {
  border-color: rgba(245, 158, 11, 0.4);
}
.delivery-type-card.active {
  background: rgba(245, 158, 11, 0.08);
  border-color: #f59e0b;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.15);
}
.delivery-type-content {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.delivery-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.delivery-title {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: #1d1d1f;
}
.delivery-sub {
  display: block;
  font-size: 11px;
  color: #9e93ab;
}

/* Campos de Formulário */
.cart-field-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: #b5a9c4;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cart-field-input,
.cart-select-input {
  width: 100%;
  background: #1b1424;
  border: 1px solid #2f253d;
  color: #1d1d1f;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
}
.cart-field-input:focus,
.cart-select-input:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}
.cart-field-input::placeholder {
  color: #6d6379;
}
.cart-select-input {
  cursor: pointer;
  font-weight: 600;
}

/* Cupom de Desconto */
.coupon-badge {
  font-size: 10px;
  font-weight: 800;
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.3);
  padding: 2px 8px;
  border-radius: 20px;
}
.cart-coupon-btn {
  background: #281f33;
  color: #f59e0b;
  border: 1px solid #3d314e;
  font-weight: 800;
  font-size: 12.5px;
  padding: 0 16px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cart-coupon-btn:hover {
  background: #f59e0b;
  color: #000000;
  border-color: #f59e0b;
}

/* Aviso de PIX */
.cart-pix-notice {
  background: rgba(13, 148, 136, 0.12);
  border: 1px solid rgba(13, 148, 136, 0.35);
  color: #5eead4;
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 12px;
  line-height: 1.5;
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.cart-pix-notice i {
  font-size: 16px;
  color: #2dd4bf;
  margin-top: 1px;
}

/* Rodapé Fixo / Sticky (Totais + WhatsApp CTA) */
.cart-drawer-footer {
  padding: 14px 20px;
  background-color: #16101d;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.4);
}
.cart-summary-box {
  background: #1b1424;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cart-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
}
.cart-summary-label {
  color: #9e93ab;
  font-weight: 500;
}
.cart-summary-val {
  color: #1d1d1f;
  font-weight: 700;
}
.cart-summary-val.discount {
  color: #10b981;
}
.cart-summary-row.total-row {
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  padding-top: 8px;
  margin-top: 4px;
}
.cart-summary-total-label {
  font-size: 14px;
  font-weight: 800;
  color: #1d1d1f;
}
.cart-summary-total-val {
  font-size: 19px;
  font-weight: 900;
  color: #f59e0b;
}

/* Botão Oficial WhatsApp */
.btn-checkout-whatsapp {
  width: 100%;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: #1d1d1f;
  font-weight: 800;
  font-size: 15px;
  padding: 14px 16px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.35);
  transition: all 0.15s ease;
}
.btn-checkout-whatsapp:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 6px 26px rgba(37, 211, 102, 0.5);
}
.btn-checkout-whatsapp:active {
  transform: scale(0.98);
}
.btn-checkout-whatsapp i {
  font-size: 20px;
}
.cart-footer-note {
  text-align: center;
  font-size: 11px;
  color: #8c8299;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* ==========================================================================
   TEMA CLARO (LIGHT THEME) - CART DRAWER OVERRIDES
   ========================================================================== */
[data-theme="light"] .cart-drawer {
  background-color: #ffffff !important;
  border-color: #ebe4f2 !important;
  box-shadow: -10px 0 45px rgba(0, 0, 0, 0.12) !important;
}
[data-theme="light"] .cart-drawer-header {
  background-color: #faf8fd !important;
  border-bottom: 1px solid #ebe4f2 !important;
}
[data-theme="light"] .cart-drawer-title {
  color: #191423 !important;
}
[data-theme="light"] .cart-drawer-subtitle {
  color: #6e647c !important;
}
[data-theme="light"] .cart-drawer-close-btn {
  background: #f3edf8 !important;
  border-color: #e2d8ea !important;
  color: #554a65 !important;
}
[data-theme="light"] .cart-drawer-close-btn:hover {
  background: #e6ddec !important;
  color: #191423 !important;
}
[data-theme="light"] .cart-empty-title {
  color: #191423 !important;
}
[data-theme="light"] .cart-empty-desc {
  color: #6e647c !important;
}
[data-theme="light"] .cart-section-title {
  color: #3b3149 !important;
}
[data-theme="light"] .cart-item-card {
  background: #ffffff !important;
  border: 1px solid #ebe4f2 !important;
  box-shadow: 0 2px 10px rgba(45, 15, 60, 0.04) !important;
}
[data-theme="light"] .cart-item-card:hover {
  border-color: #f59e0b !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.12) !important;
}
[data-theme="light"] .cart-item-thumb {
  background: #f7f3fb !important;
  border-color: #ebe4f2 !important;
}
[data-theme="light"] .cart-item-name {
  color: #191423 !important;
}
[data-theme="light"] .cart-item-total-price {
  color: #d97706 !important;
}
[data-theme="light"] .cart-item-unit-price {
  color: #766d83 !important;
}
[data-theme="light"] .cart-item-complements-box {
  background: #f7f3fb !important;
  border-color: #ede5f4 !important;
}
[data-theme="light"] .cart-item-option-group {
  color: #3b3049 !important;
}
[data-theme="light"] .cart-item-option-values {
  color: #5d526d !important;
}
[data-theme="light"] .cart-item-notes {
  background: #fef3c7 !important;
  border-left-color: #f59e0b !important;
  color: #92400e !important;
}
[data-theme="light"] .cart-item-bottom-bar {
  border-top-color: #f0eaf5 !important;
}
[data-theme="light"] .cart-qty-stepper {
  background: #f4effa !important;
  border-color: #ded5e7 !important;
}
[data-theme="light"] .cart-qty-btn {
  background: #e8e0f2 !important;
  color: #191423 !important;
}
[data-theme="light"] .cart-qty-val {
  color: #191423 !important;
}
[data-theme="light"] .cart-item-edit-btn {
  color: #645a73 !important;
}
[data-theme="light"] .cart-item-edit-btn:hover {
  color: #d97706 !important;
  background: #fffbeb !important;
}
[data-theme="light"] .delivery-type-card {
  background: #ffffff !important;
  border-color: #e4dceb !important;
}
[data-theme="light"] .delivery-type-card.active {
  background: #fffbeb !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 16px rgba(245, 158, 11, 0.12) !important;
}
[data-theme="light"] .delivery-title {
  color: #191423 !important;
}
[data-theme="light"] .delivery-sub {
  color: #6e647c !important;
}
[data-theme="light"] .cart-field-label {
  color: #4a3e5d !important;
}
[data-theme="light"] .cart-field-input,
[data-theme="light"] .cart-select-input {
  background: #ffffff !important;
  border-color: #d8cfe1 !important;
  color: #191423 !important;
}
[data-theme="light"] .cart-field-input:focus,
[data-theme="light"] .cart-select-input:focus {
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15) !important;
}
[data-theme="light"] .cart-field-input::placeholder {
  color: #8c8299 !important;
}
[data-theme="light"] .cart-coupon-btn {
  background: #f4effa !important;
  border-color: #ded5e7 !important;
  color: #d97706 !important;
}
[data-theme="light"] .cart-drawer-footer {
  background: #faf8fd !important;
  border-top-color: #ebe4f2 !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .cart-summary-box {
  background: #f7f3fb !important;
  border-color: #e4daec !important;
}
[data-theme="light"] .cart-summary-label {
  color: #645a73 !important;
}
[data-theme="light"] .cart-summary-val {
  color: #191423 !important;
}
[data-theme="light"] .cart-summary-row.total-row {
  border-top-color: #e4daec !important;
}
[data-theme="light"] .cart-summary-total-label {
  color: #191423 !important;
}
[data-theme="light"] .cart-summary-total-val {
  color: #d97706 !important;
}
[data-theme="light"] .cart-footer-note {
  color: #7b728a !important;
}

/* ==========================================================================
   TEMA CLARO: BULLETS DO CARRINHO E MODAL DE BUSCA
   ========================================================================== */
[data-theme="light"] .cart-item-title-text,
[data-theme="light"] .cart-item-name {
  color: #18141f !important;
}
[data-theme="light"] .cart-item-title-sep {
  color: #d97706 !important;
}
[data-theme="light"] .cart-item-total-price {
  color: #d97706 !important;
}
[data-theme="light"] .cart-item-unit-price {
  color: #726880 !important;
}
[data-theme="light"] .cart-bullet-dash {
  color: #d97706 !important;
}
[data-theme="light"] .cart-bullet-text,
[data-theme="light"] .cart-item-bullet-line {
  color: #3f364a !important;
}

/* Modal de Busca no Tema Escuro e Claro */
.search-modal-header {
  border-bottom: 1px solid #2e233d;
}
.search-modal-title {
  color: #f3edf7;
}
.search-modal-close-btn {
  background-color: #241c2f;
  color: #b0a5bd;
}
.search-modal-close-btn:hover {
  background-color: #342843;
  color: #1d1d1f;
}
.search-input {
  background-color: #1e1728;
  border: 1px solid #322641;
  color: #1d1d1f;
}
.search-input::placeholder {
  color: #7d728a;
}
.search-result-card {
  background-color: #20192c;
  border: 1px solid #2e233d;
  transition: all 0.18s ease;
}
.search-result-card:hover {
  background-color: #292036;
  border-color: #ffb81c;
  transform: translateY(-1px);
}
.search-result-title {
  color: #f7f5fa;
}
.search-result-desc {
  color: #a499b2;
}
.search-result-price {
  color: #00c896;
}

/* Light Mode Overrides para Busca */
[data-theme="light"] .search-modal-header {
  border-bottom-color: #ebe4f2 !important;
}
[data-theme="light"] .search-modal-title {
  color: #18141f !important;
}
[data-theme="light"] .search-modal-close-btn {
  background-color: #f2edf7 !important;
  color: #5d526d !important;
}
[data-theme="light"] .search-modal-close-btn:hover {
  background-color: #e5dde9 !important;
  color: #18141f !important;
}
[data-theme="light"] .search-input { background-color: #ffffff !important; border-color: #ded5e6 !important; color: #18141f !important; }
[data-theme="light"] .search-input::placeholder {
  color: #8c8299 !important;
}
[data-theme="light"] .search-result-card { background-color: #ffffff !important; border: 1px solid #ebe4f2 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important; }
[data-theme="light"] .search-result-card:hover {
  background-color: #faf7fc !important;
  border-color: #ffb81c !important;
  box-shadow: 0 4px 14px rgba(255, 184, 28, 0.12) !important;
  transform: translateY(-1px);
}
[data-theme="light"] .search-result-title {
  color: #18141f !important;
}
[data-theme="light"] .search-result-desc {
  color: #6a6078 !important;
}
[data-theme="light"] .search-result-price {
  color: #00966d !important;
}