html {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  scroll-behavior: smooth;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(148 163 184 / 0.4); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgb(148 163 184 / 0.7); }

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

@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton {
  background: linear-gradient(90deg, rgb(226 232 240) 25%, rgb(241 245 249) 37%, rgb(226 232 240) 63%);
  background-size: 800px 100%;
  animation: shimmer 1.6s linear infinite;
}
.dark .skeleton {
  background: linear-gradient(90deg, rgb(30 41 59) 25%, rgb(51 65 85) 37%, rgb(30 41 59) 63%);
  background-size: 800px 100%;
}

@keyframes pop-in {
  0% { opacity: 0; transform: translateY(6px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.animate-pop-in { animation: pop-in 0.22s ease-out both; }

@keyframes toast-in {
  0% { opacity: 0; transform: translateY(-12px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-toast-in { animation: toast-in 0.2s ease-out both; }

@keyframes bounce-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.animate-bounce-slow { animation: bounce-slow 2.2s ease-in-out infinite; }

.card-hover {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card-hover:hover {
  transform: translateY(-2px);
}

.coupon-code-strip {
  background-image: repeating-linear-gradient(to bottom, transparent 0 6px, rgb(203 213 225) 6px 12px);
  width: 1px;
}