/* ── Ranking the Stars — Design System ─────────────────────────────────────
   Style: Vibrant & Block-based | Fonts: Righteous + Poppins
   Palettes: Electric Purple + Hot Pink + Sunburst + Bright on White
──────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Righteous&display=swap');

/* ── Light (bright) theme — all pages except display ── */
:root {
  --bg:         #F4F0FF;
  --bg2:        #EDE8FF;
  --bg3:        #E4DCFF;
  --card:       #FFFFFF;
  --border:     rgba(109,40,217,0.18);
  --border2:    rgba(109,40,217,0.35);

  --primary:    #7C3AED;
  --primary2:   #6D28D9;
  --primary-lt: rgba(124,58,237,0.12);

  --accent:     #F43F5E;
  --accent2:    #E11D48;
  --accent-lt:  rgba(244,63,94,0.12);

  --sunburst:   #F59E0B;
  --sunburst2:  #D97706;
  --sun-lt:     rgba(245,158,11,0.15);

  --groen:      #059669;
  --groen-lt:   rgba(5,150,105,0.12);

  --cyaan:      #0891B2;
  --rood:       #DC2626;

  --goud:       #F59E0B;
  --zilver:     #64748B;
  --brons:      #B45309;

  --tekst:      #12002E;
  --tekst2:     #4C1D95;
  --tekst3:     #7C3AED;
  --tekst-inv:  #FFFFFF;

  --radius:     14px;
  --radius-lg:  20px;
  --shadow-sm:  0 2px 8px rgba(109,40,217,0.12);
  --shadow:     0 4px 20px rgba(109,40,217,0.18);
  --shadow-lg:  0 8px 40px rgba(109,40,217,0.25);
}

/* ── Reset ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Poppins', system-ui, sans-serif;
  background: var(--bg);
  color: var(--tekst);
  min-height: 100dvh;
  line-height: 1.5;
  /* Safe-area voor notch/home-indicator (iPhone X+, Android) */
  padding-left:   env(safe-area-inset-left);
  padding-right:  env(safe-area-inset-right);
}

/* ── Mobile safe area helpers ────────────────────────────────────────────────── */
/* Klasse voor sticky headers die tot aan de notch moeten reiken */
.safe-top    { padding-top:    env(safe-area-inset-top); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* Vermijd iOS auto-zoom op inputs — altijd font-size ≥ 16px */
input, textarea, select {
  font-size: max(16px, 1rem);
}

/* Reduced-motion: respect gebruikersvoorkeur */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Typografie ─────────────────────────────────────────────────────────────── */

h1, h2, h3 { font-family: 'Righteous', sans-serif; line-height: 1.15; }
h1 { font-size: clamp(1.8rem, 5vw, 3rem); }
h2 { font-size: clamp(1.3rem, 3vw, 2rem); }
h3 { font-size: clamp(1rem, 2vw, 1.4rem); }
p  { color: var(--tekst2); }

.highlight { color: var(--primary); }
.accent    { color: var(--accent); }
.goud      { color: var(--sunburst); }
.muted     { color: var(--tekst3); font-size: 0.85rem; font-weight: 500; }

/* ── Layout ─────────────────────────────────────────────────────────────────── */
.container         { max-width: 900px;  margin: 0 auto; padding: 1.5rem 1rem; }
.container--smal   { max-width: 540px; }
.container--breed  { max-width: 1200px; }

/* ── Logo ────────────────────────────────────────────────────────────────────── */
.logo {
  font-family: 'Righteous', sans-serif;
  font-size: 1.4rem;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.02em;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
.app-header {
  background: var(--card);
  border-bottom: 2px solid var(--border);
  padding: 1rem 1.5rem;
  padding-top: calc(1rem + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
  position: sticky; top: 0; z-index: 100;
}

/* ── Kaarten ─────────────────────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}

.card--glow {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-lt), var(--shadow-lg);
}

.card--accent {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-lt), var(--shadow);
}

/* Decoratieve blok kaart (Vibrant & Block stijl) */
.card--block {
  position: relative;
  overflow: hidden;
}
.card--block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent), var(--sunburst));
}

/* ── Knoppen ─────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 10px;
  border: none;
  font-family: 'Poppins', inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s, background 0.15s;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.btn:active         { transform: scale(0.96); }
.btn:disabled       { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn:focus-visible  { outline: 3px solid var(--primary); outline-offset: 2px; }

.btn--primair {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(124,58,237,0.4);
}
.btn--primair:hover:not(:disabled) {
  background: var(--primary2);
  box-shadow: 0 6px 20px rgba(124,58,237,0.5);
  transform: translateY(-1px);
}

.btn--accent {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(244,63,94,0.4);
}
.btn--accent:hover:not(:disabled) {
  background: var(--accent2);
  box-shadow: 0 6px 20px rgba(244,63,94,0.5);
  transform: translateY(-1px);
}

.btn--zon {
  background: linear-gradient(135deg, var(--sunburst), #FF6B35);
  color: #fff;
  box-shadow: 0 4px 14px rgba(245,158,11,0.45);
}
.btn--zon:hover:not(:disabled) {
  box-shadow: 0 6px 22px rgba(245,158,11,0.55);
  transform: translateY(-1px);
}

.btn--goud {
  background: linear-gradient(135deg, #F59E0B, #FF6B35, #F43F5E);
  color: #fff;
  box-shadow: 0 4px 20px rgba(245,158,11,0.5);
  font-family: 'Righteous', sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.03em;
}
.btn--goud:hover:not(:disabled) {
  box-shadow: 0 8px 30px rgba(245,158,11,0.65);
  transform: translateY(-2px) scale(1.02);
}

.btn--outline {
  background: transparent;
  border: 2px solid var(--border2);
  color: var(--tekst2);
}
.btn--outline:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-lt);
}

.btn--gevaar {
  background: transparent;
  border: 2px solid var(--rood);
  color: var(--rood);
}
.btn--gevaar:hover:not(:disabled) { background: rgba(220,38,38,0.08); }

.btn--groot { padding: 1rem 2rem; font-size: 1.1rem; border-radius: 12px; }
.btn--vol   { width: 100%; }

/* ── Invoervelden ────────────────────────────────────────────────────────────── */
.invoer {
  width: 100%;
  background: var(--bg2);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-family: 'Poppins', inherit;
  font-size: 1rem;
  color: var(--tekst);
  font-weight: 500;
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}
.invoer:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-lt);
  background: var(--card);
}
.invoer::placeholder { color: var(--tekst3); font-weight: 400; }

.invoer-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--tekst2);
  margin-bottom: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.invoer-groep { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }

/* ── Badges ──────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25em 0.75em;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.badge--primair { background: var(--primary-lt); color: var(--primary); border: 1px solid rgba(124,58,237,0.3); }
.badge--groen   { background: var(--groen-lt);   color: var(--groen);   border: 1px solid rgba(5,150,105,0.3); }
.badge--rood    { background: rgba(220,38,38,0.1); color: var(--rood);   border: 1px solid rgba(220,38,38,0.3); }
.badge--zon     { background: var(--sun-lt);     color: var(--sunburst); border: 1px solid rgba(245,158,11,0.3); }
.badge--accent  { background: var(--accent-lt);  color: var(--accent);  border: 1px solid rgba(244,63,94,0.3); }

/* ── Positie badges ──────────────────────────────────────────────────────────── */
.pos-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 0.85rem;
  font-weight: 800;
  font-family: 'Righteous', sans-serif;
  flex-shrink: 0;
}
.pos-1 { background: linear-gradient(135deg, #F59E0B, #FF6B35); color: #fff; box-shadow: 0 2px 8px rgba(245,158,11,0.5); }
.pos-2 { background: linear-gradient(135deg, #94A3B8, #64748B); color: #fff; box-shadow: 0 2px 8px rgba(100,116,139,0.4); }
.pos-3 { background: linear-gradient(135deg, #CD7F32, #A0522D); color: #fff; box-shadow: 0 2px 8px rgba(205,127,50,0.4); }
.pos-n { background: var(--bg3); color: var(--tekst2); border: 2px solid var(--border2); }

/* ── Voortgangsbalk ──────────────────────────────────────────────────────────── */
.voortgang-wrap { background: var(--bg3); border-radius: 999px; height: 8px; overflow: hidden; }
.voortgang-balk {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 0.4s ease;
}

/* ── Notificaties ────────────────────────────────────────────────────────────── */
.notif { padding: 0.75rem 1rem; border-radius: 10px; font-weight: 600; font-size: 0.9rem; display: none; }
.notif.zichtbaar { display: block; }
.notif--fout { background: rgba(220,38,38,0.08); color: var(--rood);    border: 2px solid rgba(220,38,38,0.3); }
.notif--info { background: var(--primary-lt);    color: var(--primary); border: 2px solid rgba(124,58,237,0.3); }
.notif--ok   { background: var(--groen-lt);      color: var(--groen);   border: 2px solid rgba(5,150,105,0.3); }

/* ── Divider ─────────────────────────────────────────────────────────────────── */
.divider { border: none; border-top: 2px solid var(--border); margin: 1.25rem 0; }

/* ── Code blok ───────────────────────────────────────────────────────────────── */
.code-blok {
  background: var(--bg2);
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-family: monospace;
  font-size: 0.85rem;
  color: var(--primary);
  font-weight: 600;
  word-break: break-all;
}

/* ── Animaties ───────────────────────────────────────────────────────────────── */
@keyframes fadeIn    { from { opacity:0; transform:translateY(10px);         } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInUp  { from { opacity:0; transform:translateY(24px) scale(.95); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes popIn     { from { opacity:0; transform:scale(0.6);               } to { opacity:1; transform:scale(1); } }
@keyframes popInBig  { 0% { opacity:0; transform:scale(0.3) rotate(-6deg); } 60% { transform:scale(1.08) rotate(1deg); } 100% { opacity:1; transform:scale(1) rotate(0deg); } }
@keyframes slideUp   { from { opacity:0; transform:translateY(40px);         } to { opacity:1; transform:translateY(0); } }
@keyframes slideIn   { from { opacity:0; transform:translateX(-30px);        } to { opacity:1; transform:translateX(0); } }
@keyframes pulse     { 0%,100% { opacity:1; }            50% { opacity:0.45; } }
@keyframes pulseGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(124,58,237,0); }   50% { box-shadow: 0 0 20px 6px rgba(124,58,237,0.35); } }
@keyframes spin      { to { transform:rotate(360deg); } }
@keyframes bounce    { 0%,100% { transform:translateY(0); }  50% { transform:translateY(-12px); } }
@keyframes wiggle    { 0%,100% { transform:rotate(0deg); }   25% { transform:rotate(-8deg); } 75% { transform:rotate(8deg); } }
@keyframes shake     { 0%,100%{transform:translate(0)} 10%{transform:translate(-8px,4px)} 20%{transform:translate(8px,-4px)} 30%{transform:translate(-6px,6px)} 40%{transform:translate(6px,-6px)} 50%{transform:translate(-4px,4px)} 60%{transform:translate(4px,-4px)} 70%{transform:translate(-3px,3px)} 80%{transform:translate(3px,-3px)} 90%{transform:translate(-1px,1px)} }
@keyframes flash     { 0%,100%{opacity:1} 50%{opacity:0} }
@keyframes glowPulse { 0%,100%{filter:brightness(1) drop-shadow(0 0 0px transparent)} 50%{filter:brightness(1.15) drop-shadow(0 0 20px currentColor)} }
@keyframes countUp   { from { transform:translateY(100%); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes ripple    { to { transform:scale(4); opacity:0; } }
@keyframes shimmer   { 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes typewriter { from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0 0% 0 0)} }
@keyframes rainbowBg { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes floatY    { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

.fade-in    { animation: fadeIn    0.3s ease both; }
.fade-in-up { animation: fadeInUp  0.35s cubic-bezier(.22,1,.36,1) both; }
.pop-in     { animation: popIn     0.35s cubic-bezier(.34,1.56,.64,1) both; }
.pop-in-big { animation: popInBig  0.5s  cubic-bezier(.34,1.4,.64,1)  both; }
.slide-up   { animation: slideUp   0.4s  cubic-bezier(.22,1,.36,1)    both; }
.pulseer    { animation: pulse     1.8s  ease-in-out infinite; }
.bounceer   { animation: bounce    1.8s  ease-in-out infinite; }
.floateer   { animation: floatY    3s    ease-in-out infinite; }
.wiebeleer  { animation: wiggle    0.4s  ease-in-out; }
.schud      { animation: shake     0.5s  ease; }
.glow-puls  { animation: pulseGlow 2s    ease-in-out infinite; }

/* Stagger helpers */
.stagger > *:nth-child(1) { animation-delay: 0.00s; }
.stagger > *:nth-child(2) { animation-delay: 0.06s; }
.stagger > *:nth-child(3) { animation-delay: 0.12s; }
.stagger > *:nth-child(4) { animation-delay: 0.18s; }
.stagger > *:nth-child(5) { animation-delay: 0.24s; }
.stagger > *:nth-child(6) { animation-delay: 0.30s; }
.stagger > *:nth-child(n+7) { animation-delay: 0.36s; }

/* Ripple container */
.ripple-host { position:relative; overflow:hidden; }
.ripple-wave {
  position:absolute; border-radius:50%;
  transform:scale(0); animation:ripple 0.5s linear;
  pointer-events:none;
  background:rgba(255,255,255,0.35);
}

/* ── Scrollbar ───────────────────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }

/* ── Geometric decoraties (block-based stijl) ─────────────────────────────────
   Gebruik als ::before / ::after op hero secties
─────────────────────────────────────────────────────────────────────────────── */
.geo-dot {
  position: absolute;
  border-radius: 50%;
  opacity: 0.12;
  pointer-events: none;
}
.geo-dot--1 { width: 300px; height: 300px; background: var(--primary);  top: -80px;  right: -60px; }
.geo-dot--2 { width: 200px; height: 200px; background: var(--accent);   bottom: -50px; left: -40px; }
.geo-dot--3 { width: 150px; height: 150px; background: var(--sunburst); top: 40%;    right: 15%;  }

/* ── Responsief ──────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .verberg-mobiel { display: none !important; }
  .btn { padding: 0.7rem 1.1rem; font-size: 0.9rem; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}