/* =======================================================================
   Snoeppot — page styles
   ======================================================================= */

@keyframes sp-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.55; } }
@keyframes sp-rise { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes sp-spin { to { transform: rotate(360deg); } }

/* Bezig-status: spinner in de knop, klikken tijdelijk uit */
.is-busy { pointer-events: none; opacity: 0.75; }
.is-busy::before {
  content: ''; width: 13px; height: 13px; flex: none;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: sp-spin 0.6s linear infinite;
}
.sp-vote-btn.is-busy svg { display: none; }

.sp-page { min-height: 100vh; background: var(--nb-beige); overflow-x: clip; }

/* ===== Snoep-animaties (uit bij prefers-reduced-motion) ===== */

/* Zwevende snoepjes over de hele pagina (fixed: ze scrollen mee).
   Content-secties krijgen z-index 1 zodat ze óver de emoji heen gaan. */
.sp-floaters { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.sp-section, .sp-how { position: relative; z-index: 1; }
.sp-floater { position: absolute; opacity: 0.38; user-select: none; filter: drop-shadow(0 4px 8px rgba(47,50,47,0.12)); }
.sp-floater.f1 { top: 6%;  left: 56%; font-size: 46px; }
.sp-floater.f2 { top: 62%; left: 2%;  font-size: 56px; }
.sp-floater.f3 { top: 14%; left: 30%; font-size: 34px; }
.sp-floater.f4 { top: 80%; left: 46%; font-size: 40px; }
.sp-floater.f5 { top: 34%; left: 89%; font-size: 50px; opacity: 0.32; }
.sp-floater.f6 { top: 4%;  left: 5%;  font-size: 38px; }

/* Zuurstok-strepen door de voortgangsbalk (stilstaand) */
.sp-progress-track .sp-progress-fill {
  background-image: linear-gradient(45deg,
    rgba(255,255,255,0.45) 25%, transparent 25%, transparent 50%,
    rgba(255,255,255,0.45) 50%, rgba(255,255,255,0.45) 75%, transparent 75%, transparent);
  background-size: 18px 18px;
}

/* Snoep-confetti bij stemmen/bijdragen */
.sp-candy-bit {
  position: fixed; width: 12px; height: 12px; border-radius: 50%;
  pointer-events: none; z-index: 999;
  box-shadow: inset -2px -2px 0 rgba(47,50,47,0.12);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes sp-drift {
    from { transform: translate(-8px, -18px) rotate(-14deg); }
    to   { transform: translate(10px, 20px) rotate(14deg); }
  }
  .sp-floater { animation: sp-drift 8s var(--ease-in-out) infinite alternate; }
  .sp-floater.f2 { animation-duration: 11s; animation-delay: -3s; }
  .sp-floater.f3 { animation-duration: 7s;  animation-delay: -1.5s; }
  .sp-floater.f4 { animation-duration: 9s;  animation-delay: -5s; }
  .sp-floater.f5 { animation-duration: 12s; animation-delay: -2s; }
  .sp-floater.f6 { animation-duration: 10s; animation-delay: -4s; }

  @keyframes sp-pop {
    to { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
  }
  .sp-candy-bit { animation: sp-pop 0.7s ease-out forwards; }

  /* Secties zachtjes omhoog bij het scrollen */
  .sp-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
  .sp-reveal.is-in { opacity: 1; transform: none; }
}

.sp-section { max-width: 1200px; margin: 0 auto; padding: 80px clamp(24px, 5vw, 64px) 0; }

.sp-icon { display: inline-flex; flex: none; }
.sp-icon svg { display: block; }

/* ===== Nav extras ===== */
.sp-nav-app {
  font-family: var(--font-body); font-weight: 500; font-size: 14px;
  color: var(--nb-ink-400); margin-left: 10px; letter-spacing: 0;
}
.sp-nav-right { display: flex; align-items: center; gap: 16px; min-width: 0; }
.sp-live { display: flex; align-items: center; gap: 8px; }
.sp-live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--nb-coral);
  display: inline-block; animation: sp-pulse 2.4s var(--ease-in-out) infinite;
}
.sp-live-total { font-size: 13px; font-weight: 600; color: var(--nb-ink); white-space: nowrap; }
.sp-live-label { font-size: 13px; color: var(--nb-ink-400); }

/* Compact header on small screens: nav links are already hidden below 720px */
@media (max-width: 720px) {
  .nb-nav-wrap { padding-left: 12px; padding-right: 12px; }
  .nb-nav { padding: 10px 12px 10px 18px; gap: 10px; }
  .sp-nav-right { gap: 10px; }
  .sp-live-label { display: none; }
  .sp-nav-right .nb-btn { padding: 10px 16px; font-size: 13px; }
}
@media (max-width: 520px) {
  .sp-nav-app { display: none; }
  .sp-nav-right .nb-btn .nb-arr { display: none; }
}
@media (max-width: 400px) {
  .sp-live { display: none; }
}

/* ===== Hero ===== */
.sp-hero { max-width: 1200px; margin: 0 auto; padding: 44px clamp(24px, 5vw, 64px) 8px; position: relative; }
.sp-hero-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
@media (max-width: 860px) { .sp-hero-grid { grid-template-columns: 1fr; } }

.sp-hero-kicker { font-size: 16px; color: var(--nb-ink-600); margin: 18px 0 6px; font-weight: 500; }
.sp-hero-total {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(64px, 9vw, 116px); line-height: 0.9;
  letter-spacing: -0.04em; color: var(--nb-ink);
}

.sp-progress { max-width: 440px; margin-top: 26px; }
.sp-progress-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.sp-progress-label { font-size: 14px; font-weight: 600; color: var(--nb-ink); }
.sp-progress-goal { font-size: 14px; color: var(--nb-ink-400); }
.sp-progress-track {
  height: 14px; background: var(--nb-beige-200); border-radius: var(--r-pill);
  overflow: hidden; box-shadow: var(--shadow-inset);
}
.sp-progress-fill {
  height: 100%; width: 0%; background: var(--nb-coral);
  border-radius: var(--r-pill); transition: width 0.8s var(--ease-out);
}
.sp-progress-remaining { font-size: 14px; color: var(--nb-ink-600); margin-top: 12px; }

.sp-stats { display: flex; gap: 28px; margin-top: 32px; }
.sp-stat-num {
  font-family: var(--font-display); font-weight: 800; font-size: 26px;
  color: var(--nb-ink); line-height: 1;
}
.sp-stat-label { font-size: 13px; color: var(--nb-ink-400); margin-top: 2px; }
.sp-stat-sep { width: 1px; background: var(--border-1); }

.sp-hero-ctas { display: flex; gap: 12px; margin-top: 34px; }

/* ===== Big collective jar ===== */
.sp-bigjar-col { display: flex; justify-content: center; }
.sp-bigjar { position: relative; width: 250px; }
.sp-bigjar-lid {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  width: 170px; height: 26px; background: var(--nb-ink);
  border-radius: var(--r-pill); z-index: 3; box-shadow: var(--shadow-2);
}
.sp-bigjar-glass {
  position: relative; height: 328px;
  border-radius: 26px 26px var(--r-2xl) var(--r-2xl);
  background: var(--nb-white); border: 1px solid var(--border-1);
  box-shadow: var(--shadow-3); overflow: hidden;
}
.sp-bigjar-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: linear-gradient(180deg, var(--nb-coral-200), var(--nb-coral));
  transition: height 0.8s var(--ease-out);
}
.sp-bigjar-fill::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 16px;
  background: rgba(255,255,255,0.28);
}
.sp-bigjar-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; z-index: 2; text-align: center;
}
.sp-bigjar-pct {
  font-family: var(--font-display); font-weight: 900; font-size: 44px;
  color: var(--nb-ink); line-height: 1; letter-spacing: -0.03em;
}
.sp-bigjar-pct-label { font-size: 13px; font-weight: 600; color: var(--nb-ink-600); margin-top: 6px; letter-spacing: 0.02em; }
.sp-bigjar-sheen {
  position: absolute; left: 0; top: 0; bottom: 0; width: 34px;
  background: linear-gradient(90deg, rgba(255,255,255,0.5), transparent); z-index: 1;
}
.sp-bigjar-caption { text-align: center; font-size: 13px; color: var(--nb-ink-400); margin-top: 16px; }

/* ===== Jars (assortment) ===== */
.sp-jars-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 36px; gap: 40px; flex-wrap: wrap;
}
.sp-jars-head-title { flex: 1 1 380px; min-width: 0; }
.sp-jars-head-intro { flex: 0 1 340px; font-size: 16px; color: var(--nb-ink-600); margin: 0 0 8px; }

.sp-jars-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 960px) { .sp-jars-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sp-jars-grid { grid-template-columns: 1fr; } }

.sp-jarcard {
  background: #fff; border-radius: var(--r-xl); padding: 26px 20px 22px;
  box-shadow: var(--shadow-1); display: flex; align-items: center; gap: 18px;
}
.sp-minijar { position: relative; width: 58px; height: 82px; flex: none; }
.sp-minijar-lid {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 42px; height: 9px; background: var(--nb-ink);
  border-radius: var(--r-pill); z-index: 2;
}
.sp-minijar-glass {
  position: relative; height: 82px; border-radius: 10px 10px 16px 16px;
  background: var(--nb-beige-50); border: 1px solid var(--border-1); overflow: hidden;
}
.sp-minijar-fill { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 0 0 15px 15px; }
.sp-minijar-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; background: #fff;
}
.sp-minijar-sheen {
  position: absolute; left: 0; top: 0; bottom: 0; width: 12px;
  background: linear-gradient(90deg, rgba(255,255,255,0.45), transparent); z-index: 1;
}
.sp-jarcard-info { flex: 1; min-width: 0; }
.sp-jarcard-name { font-weight: 700; font-size: 17px; color: var(--nb-ink); }
.sp-jarcard-sub {
  font-size: 12px; color: var(--nb-ink-400); margin-top: 3px;
  display: flex; align-items: center; gap: 7px;
}
.sp-jarcard-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  border: 1px solid rgba(47,50,47,0.15);
}
.sp-jarcard.is-soldout .sp-minijar { opacity: 0.45; filter: grayscale(1); }
.sp-jarcard.is-soldout .sp-jarcard-name { color: var(--nb-ink-600); }
.sp-jarcard.is-soldout .sp-jarcard-sub { color: var(--nb-ink-200); }

.sp-jars-soldout { margin-top: 36px; padding-top: 24px; border-top: 1px dashed var(--border-1); }
.sp-jars-soldout-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.sp-jars-soldout-head .sp-soldout-badge { margin-left: 0; vertical-align: 0; }
.sp-jars-soldout-note { font-size: 13px; color: var(--nb-ink-400); }
.sp-restock-btn { margin-top: 10px; padding: 6px 12px; font-size: 12px; font-weight: 600; gap: 5px; }
.sp-restock-btn .sp-vote-count { font-size: 13px; }
.sp-soldout-badge {
  display: inline-block; margin-left: 8px; padding: 3px 10px 2px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--nb-coral); color: var(--nb-ink);
  border-radius: var(--r-pill); vertical-align: 2px; white-space: nowrap;
}

/* ===== Suggestions ===== */
.sp-suggest-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 20px; align-items: stretch; }
@media (max-width: 860px) { .sp-suggest-grid { grid-template-columns: 1fr; } }

.sp-suggest-intro {
  background: var(--nb-beige-50); border: 1px solid var(--border-1);
  border-radius: var(--r-2xl); padding: clamp(28px, 3vw, 44px);
  display: flex; flex-direction: column;
}
.sp-suggest-intro .nb-h2 { font-size: clamp(28px, 3vw, 42px); margin-top: 10px; }
.sp-suggest-intro-p { font-size: 16px; color: var(--nb-ink-600); margin: 16px 0 0; line-height: 1.5; }

.sp-suggest-form { margin-top: auto; padding-top: 28px; }
.sp-suggest-form-title { font-size: 13px; font-weight: 600; color: var(--nb-ink); margin-bottom: 10px; }
.sp-suggest-form-row { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-suggest-input {
  flex: 1 1 200px; font-family: inherit; font-size: 15px; padding: 13px 18px;
  border-radius: var(--r-pill); border: 1.5px solid var(--border-1);
  background: #fff; color: var(--nb-ink); outline: none;
}
.sp-suggest-hint { font-size: 13px; color: var(--nb-ink-400); margin-top: 10px; }
.sp-inspire {
  display: inline-block; font-size: 13px; font-weight: 600;
  color: var(--nb-coral-600); margin-top: 12px;
  text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
.sp-inspire:hover { color: var(--nb-ink); }

.sp-suggest-list {
  background: #fff; border-radius: var(--r-2xl);
  padding: clamp(24px, 2.4vw, 36px); box-shadow: var(--shadow-1);
}
.sp-suggest-list-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }
.sp-suggest-list-title {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  color: var(--nb-ink); letter-spacing: -0.01em;
}
.sp-suggest-count { font-size: 13px; color: var(--nb-ink-400); }
.sp-suggest-rows { display: flex; flex-direction: column; gap: 10px; }

.sp-suggest-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  border-radius: var(--r-md); background: var(--nb-beige-50);
  border: 1px solid var(--border-2);
  transition: background var(--dur-base) var(--ease-out);
}
.sp-suggest-row.is-new { background: var(--nb-coral-50); }
.sp-suggest-row.is-top { background: var(--nb-coral); border-color: var(--nb-coral); }
.sp-suggest-rank {
  font-family: var(--font-display); font-weight: 800; font-size: 14px;
  width: 26px; flex: none; color: var(--nb-ink-400);
}
.sp-suggest-row.is-top .sp-suggest-rank { color: var(--nb-ink); }
.sp-suggest-info { flex: 1; min-width: 0; }
.sp-suggest-name { font-weight: 700; font-size: 16px; color: var(--nb-ink); }
.sp-top-badge {
  display: inline-block; margin-left: 10px; padding: 3px 10px 2px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--nb-ink); color: var(--nb-beige);
  border-radius: var(--r-pill); vertical-align: 2px;
}
.sp-suggest-row.is-top .sp-suggest-by { color: var(--nb-ink-600); }
.sp-suggest-row.is-top .sp-vote-btn { border-color: rgba(47,50,47,0.3); }
.sp-suggest-row.is-top .sp-vote-btn.is-on { border-color: var(--nb-ink); background: var(--nb-ink); color: var(--nb-beige); }
.sp-suggest-by { font-size: 12px; color: var(--nb-ink-400); margin-top: 1px; }
.sp-vote-btn {
  display: flex; align-items: center; gap: 6px; flex: none; cursor: pointer;
  padding: 8px 14px; border-radius: var(--r-pill); font-family: inherit;
  transition: all var(--dur-base) var(--ease-out);
  border: 1.5px solid var(--border-1); background: #fff; color: var(--nb-ink-600);
}
.sp-vote-btn.is-on { border-color: var(--nb-coral); background: var(--nb-coral); color: var(--nb-ink); }
.sp-vote-count { font-family: var(--font-display); font-weight: 800; font-size: 15px; }

/* ===== Activity ===== */
.sp-activity {
  background: var(--nb-ink); color: var(--nb-beige);
  border-radius: var(--r-2xl); padding: 40px;
}
.sp-activity-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.sp-activity-head .nb-eyebrow { color: var(--nb-coral); }
.sp-activity-title {
  font-family: var(--font-display); font-weight: 700; font-size: 30px;
  margin-top: 8px; letter-spacing: -0.02em;
}
.sp-activity-live { display: flex; align-items: center; gap: 8px; font-size: 13px; opacity: 0.72; }
.sp-activity-live .sp-live-dot { width: 7px; height: 7px; }
/* Twee kolommen die van boven naar beneden vollopen (kolom 1 eerst, dan kolom 2) */
.sp-activity-rows { columns: 2; column-gap: 56px; }
@media (max-width: 860px) { .sp-activity-rows { columns: 1; } }

.sp-activity-row {
  display: flex; align-items: center; gap: 14px; padding: 13px 0;
  border-bottom: 1px solid rgba(240,234,228,0.1);
  break-inside: avoid;
}
.sp-avatar {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
  background: var(--nb-coral); color: var(--nb-ink);
}
.sp-avatar.is-anon { background: rgba(240,234,228,0.14); color: var(--nb-beige); }
.sp-activity-info { flex: 1; min-width: 0; }
.sp-activity-who { font-size: 15px; font-weight: 600; }
.sp-activity-action { opacity: 0.6; font-weight: 400; }
.sp-activity-ago { font-size: 12px; opacity: 0.55; margin-top: 1px; }
.sp-activity-amount { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--nb-coral); }


/* ===== Purchases ===== */
.sp-purchase-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 20px; align-items: start; }
@media (max-width: 860px) { .sp-purchase-grid { grid-template-columns: 1fr; } }

.sp-balance {
  background: var(--nb-beige-50); border: 1px solid var(--border-1);
  border-radius: var(--r-2xl); padding: clamp(28px, 3vw, 40px);
}
.sp-balance-title {
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  color: var(--nb-ink); letter-spacing: -0.01em; margin-bottom: 10px;
}
.sp-balance-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--border-2);
}
.sp-balance-label { font-size: 14px; color: var(--nb-ink-600); }
.sp-balance-num { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--nb-ink); }
.sp-balance-num.is-plus { color: var(--nb-coral-600); }
.sp-balance-row.is-total { border-bottom: none; padding-top: 18px; }
.sp-balance-row.is-total .sp-balance-num { font-size: 30px; }
.sp-balance-note { font-size: 13px; color: var(--nb-ink-400); margin-top: 12px; line-height: 1.5; }

.sp-orders { display: flex; flex-direction: column; gap: 16px; }
.sp-order { background: #fff; border-radius: var(--r-xl); padding: 24px 26px; box-shadow: var(--shadow-1); }
.sp-order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.sp-order-title { font-weight: 700; font-size: 17px; color: var(--nb-ink); }
.sp-order-sub { font-size: 12px; color: var(--nb-ink-400); margin-top: 3px; }
.sp-order-amount {
  font-family: var(--font-display); font-weight: 800; font-size: 19px;
  color: var(--nb-ink); white-space: nowrap;
}
.sp-order-items { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sp-order-item {
  font-size: 12px; color: var(--nb-ink-600); background: var(--nb-beige-50);
  border: 1px solid var(--border-2); border-radius: var(--r-pill); padding: 6px 12px;
}

/* ===== How it works ===== */
.sp-how { max-width: 1200px; margin: 0 auto; padding: 80px clamp(24px, 5vw, 64px) 96px; }
.sp-how-card {
  background: var(--nb-beige-50); border: 1px solid var(--border-1);
  border-radius: var(--r-2xl); padding: clamp(32px, 4vw, 56px);
}
.sp-how-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; align-items: center; }
@media (max-width: 860px) { .sp-how-grid { grid-template-columns: 1fr; } }
.sp-how-qr-col { text-align: center; }
.sp-how-qr {
  width: 180px; height: 180px; margin: 0 auto; border-radius: var(--r-xl);
  background: #fff; padding: 12px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-2);
}
.sp-how-qr img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--r-sm); }
.sp-how-qr-caption { font-size: 13px; color: var(--nb-ink-400); margin-top: 16px; }
.sp-how-card .nb-h2 { font-size: clamp(30px, 3.4vw, 46px); margin-top: 10px; }
.sp-how-steps { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
.sp-how-step { display: flex; gap: 16px; align-items: flex-start; }
.sp-how-step-n {
  font-family: var(--font-mono); font-size: 13px; color: var(--nb-coral-600);
  font-weight: 600; padding-top: 2px; flex: none; width: 24px;
}
.sp-how-step-title { font-weight: 700; font-size: 17px; color: var(--nb-ink); }
.sp-how-step-body { font-size: 15px; color: var(--nb-ink-600); margin-top: 2px; line-height: 1.5; }

.sp-footer {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 40px; flex-wrap: wrap; gap: 12px;
}
.sp-footer-note { font-size: 13px; color: var(--nb-ink-400); }

/* ===== Modal extras ===== */
.sp-modal-qr {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--border-2);
  border-radius: var(--r-lg); padding: 28px 24px 22px;
  margin-top: 8px; text-align: center;
}
.sp-modal-qr img {
  width: min(260px, 70vw); height: auto; flex: none;
  object-fit: contain; border-radius: var(--r-sm);
}
.sp-modal-qr-caption { font-size: 13px; color: var(--nb-ink-600); line-height: 1.45; }

[hidden] { display: none !important; }