/* BAZR — deal marketplace styles. Dense, friendly, high-energy. */

:root { color-scheme: light; }
html { scroll-behavior: smooth; }
body {
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: oklch(0.965 0.005 285);
}

/* content always visible (robust); data-reveal inert */

/* image placeholders / fallback tiles */
.ph {
  position: relative; background-color: oklch(0.93 0.008 285);
  background-image: repeating-linear-gradient(45deg, oklch(0.90 0.008 285) 0 1px, transparent 1px 12px);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  color: oklch(0.6 0.02 285); font-size:11px; letter-spacing:.04em;
}

.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-thumb { background: oklch(0.85 0.01 285); border:3px solid oklch(0.965 0.005 285); border-radius:999px; }

*:focus-visible { outline: 2px solid oklch(0.52 0.23 300); outline-offset: 2px; }

.marquee-mask { -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }

/* 2-line clamp for dense titles */
.clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* star rating */
.stars { display:inline-block; position:relative; font-family:"Plus Jakarta Sans",sans-serif; color: oklch(0.86 0.01 285); white-space:nowrap; letter-spacing:.5px; }
.stars::before { content:"\2605\2605\2605\2605\2605"; }
.stars > span { position:absolute; inset:0; width:var(--pct,100%); overflow:hidden; color: oklch(0.78 0.16 78); }
.stars > span::before { content:"\2605\2605\2605\2605\2605"; }

@keyframes badgepop { 0%{transform:scale(1)} 40%{transform:scale(1.4)} 100%{transform:scale(1)} }
.badge-pop { animation: badgepop .35s ease; }

/* countdown digit chip */
.cd { display:inline-grid; place-items:center; min-width:30px; height:30px; padding:0 5px; background: oklch(0.27 0.02 288); color:#fff; font-weight:800; border-radius:6px; font-variant-numeric: tabular-nums; }

input[type="range"]{ accent-color: oklch(0.52 0.23 300); }
#toast { transition: transform .35s cubic-bezier(.2,.7,.3,1), opacity .35s; }

/* shared inputs */
.b-input { width:100%; height:48px; padding:0 14px; background:#fff; border:1px solid oklch(0.91 0.008 288); color: oklch(0.27 0.02 288); font-size:15px; border-radius:10px; transition:border-color .15s, box-shadow .15s; }
.b-input::placeholder { color: oklch(0.68 0.018 288); }
.b-input:focus { outline:none; border-color: oklch(0.52 0.23 300); box-shadow:0 0 0 3px oklch(0.52 0.23 300 / 0.12); }
.b-input.invalid { border-color: oklch(0.585 0.225 7); }
.b-err { color: oklch(0.585 0.225 7); font-size:13px; margin-top:5px; }
textarea.b-input { height:auto; padding:12px 14px; min-height:140px; resize:vertical; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .animate-marquee, .animate-pulsedot { animation: none !important; }
}