/* === styles.css === */

/* Variável Padrão (será substituída pelo JS) */
:root {
    --theme-color: #F97316;
}

html {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: 'Inter', sans-serif;
    /* Espaço extra embaixo para o menu não tapar o conteúdo */
    padding-bottom: 100px; 
    background-color: #f9fafb;
}

/* Utilitários */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Animações */
@keyframes fadeInUp {
    from { opacity: 0; transform: translate3d(0, 20px, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}
.animate-fade-in-up { animation: fadeInUp 0.3s ease-out forwards; }

/* Loader */
.loader {
    border: 3px solid #f3f3f3;
    border-radius: 50%;
    border-top: 3px solid var(--theme-color);
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }



/* ✅ Botão selecionado Entrega/Retirada com cor do tema */
.active-choice {
  background: var(--theme-color) !important;
  color: white !important;
  border: 2px solid var(--theme-color) !important;
}
.active-choice:hover {
  filter: brightness(0.95);
}

/* ===============================
   HEADER SHRINK (iFood style)
================================ */

/* ===============================
   HEADER BASE (menor)
================================ */

#hero-header {
  transition: all 0.25s ease;

  /* ✅ diminui altura inicial */
  padding-top: 10px !important;
  padding-bottom: 18px !important;

  /* deixa mais compacto */
  border-radius: 0 0 2rem 2rem;
}

#category-tabs {
  margin-top: -10px;
}

/* Logo menor no topo */
#store-logo {
  width: 85px !important;
  height: 85px !important;
}

/* Nome menor */
#store-name {
  font-size: 22px !important;
}

/* Endereço menor */
#header-address-short {
  font-size: 12px !important;
}


#hero-header.shrink {
  padding-top: 12px !important;
  padding-bottom: 18px !important;
  border-radius: 0 0 1.5rem 1.5rem;
}

#hero-header.shrink img {
  width: 55px !important;
  height: 55px !important;
}

#hero-header.shrink h1 {
  font-size: 18px !important;
}

#hero-header.shrink p {
  font-size: 11px !important;
}

/* ===============================
   CATEGORY TABS
================================ */

.tab-btn {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid #eee;
  background: white;
  color: #444;
  transition: 0.2s;
  white-space: nowrap;
}

.tab-btn.active {
  background: var(--theme-color);
  color: white;
  border-color: var(--theme-color);
}

/* esconder scrollbar horizontal */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ===============================
   SKELETON LOADER
================================ */

.skeleton {
  background: linear-gradient(
    90deg,
    #f3f3f3 25%,
    #eaeaea 50%,
    #f3f3f3 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.3s infinite;
  border-radius: 12px;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton-card {
  height: 90px;
}

/* ===============================
   CART BADGE PULSE (apenas 1x)
================================ */

.pulse-once {
  animation: cartPulse 0.35s ease;
}

@keyframes cartPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.18);
  }
  100% {
    transform: scale(1);
  }
}
/* ===============================
   BADGE VALOR CARRINHO (iFood)
================================ */

#nav-cart-price {
  position: absolute;
  top: -6px;
  right: -10px;

  background: #16a34a;
  color: white;

  font-size: 11px;
  font-weight: 800;

  padding: 3px 7px;
  border-radius: 999px;

  box-shadow: 0 4px 10px rgba(0,0,0,0.25);

  pointer-events: none;
}