/* ============================================
   CUSTOMER THEME FOUNDATION
   Shared customer-theme base behaviors and intentional
   theme-level adjustments layered on top of style.css
   ============================================ */

#top-navigation {
  background-color: var(--nf-accent);
}

.list-items img,
.skeleton-height {
  border-radius: 5px 5px 0 0;
}

.btn-group .btn.active {
  background: var(--nf-success-chip) !important;
  font-size: 10px !important;
}

.btn-group label {
  background: var(--nf-success-chip-soft);
}

.btn-addto-cart {
  font-size: 11px;
  padding: 8px;
  text-transform: uppercase;
}

.res-header-bg {
  background-color: var(--nf-page-soft-green);
}

.badge-danger {
  background-color: var(--nf-success-badge);
}

.badge-dark {
  background-color: var(--nf-success-badge-dark);
}

#sidebar {
  background-color: var(--nf-sidebar-bg);
}

.btn {
  padding: 0.5rem 1.5rem;
  font-weight: 500;
  transition: all 0.2s;
  display: inline-block;
  text-decoration: none;
}

.btn-circle {
  transition: all 0.3s ease;
}

.btn-circle:hover {
  box-shadow: 0 2px 8px var(--nf-dark-overlay);
  transform: translateY(-1px);
}

.zmdi {
  transition: transform 0.3s ease;
}

.btn-circle:hover .zmdi {
  transform: scale(1.1);
}

.zmdi-favorite {
  color: var(--nf-promo-warning-start);
}

@keyframes favoritePopup {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

.zmdi-favorite.active {
  animation: favoritePopup 0.3s ease;
}