/* Onze Wereldkaart - basis design-systeem (cute pastel) */

@font-face {
  font-family: 'Quicksand';
  src: url('fonts/quicksand.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Baloo 2';
  src: url('fonts/baloo2.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --pink: #ff6f9c;
  --pink-soft: #ffd3e0;
  --pink-bg: #fff0f5;
  --peach: #ffb37e;
  --mint: #7fd8be;
  --sky: #8ecdf5;
  --lila: #c3a6ff;
  --sun: #ffd166;
  --ink: #4a3b52;
  --ink-soft: #8a7a94;
  --card: #ffffff;
  --line: #f3dbe6;
  --shadow: 0 10px 30px rgba(255, 111, 156, .18);
  --radius: 22px;
  --font-body: 'Quicksand', 'Avenir Next Rounded', ui-rounded, -apple-system, sans-serif;
  --font-head: 'Baloo 2', 'Quicksand', ui-rounded, -apple-system, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scrollbar-gutter: stable; }

body {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ink);
  background: linear-gradient(160deg, #fff0f5 0%, #f0f7ff 55%, #f2fff9 100%);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; }

a { color: var(--pink); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: var(--font-body); cursor: pointer; }
input, select, textarea { font-family: var(--font-body); font-size: 15px; color: var(--ink); }

/* Universele focus-ring: alleen bij toetsenbord-navigatie, overal consistent */
:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--pink) 55%, transparent);
  outline-offset: 2px; border-radius: 8px;
}
a:focus-visible, button:focus-visible, .btn:focus-visible, [tabindex]:focus-visible { border-radius: 999px; }

/* Klik-ripple (via JS toegevoegd op knoppen) */
.rippled { position: relative; overflow: hidden; }
.ripple-ink { position: absolute; border-radius: 50%; transform: translate(-50%, -50%) scale(0);
  background: rgba(255, 255, 255, .5); pointer-events: none; animation: rippleInk .6s ease-out forwards; }
@keyframes rippleInk { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ripple-ink { display: none; } }

/* Knoppen */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 999px; padding: 13px 26px;
  font-size: 16px; font-weight: 700; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--pink) 0%, #ff8fb3 100%);
  color: #fff; box-shadow: 0 6px 18px rgba(255, 111, 156, .35);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease;
}
.btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 24px rgba(255, 111, 156, .45); text-decoration: none; }
.btn:active { transform: translateY(0) scale(.95); box-shadow: 0 4px 12px rgba(255, 111, 156, .3); }
.btn:active { transform: translateY(0) scale(.98); }
.btn.secondary {
  background: #fff; color: var(--pink);
  border: 2px solid var(--pink-soft); box-shadow: none;
}
.btn.secondary:hover { border-color: var(--pink); box-shadow: 0 6px 16px rgba(255,111,156,.18); }
.btn.small { padding: 8px 16px; font-size: 14px; }
.btn.ghost { background: transparent; color: var(--ink-soft); box-shadow: none; border: 0; }
.btn.ghost:hover { color: var(--pink); transform: none; box-shadow: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* Formulieren */
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.field input[type=text], .field input[type=email], .field input[type=password],
.field input[type=date], .field select, .field textarea {
  width: 100%; padding: 12px 16px;
  border: 2px solid var(--line); border-radius: 16px;
  background: #fff; outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--pink); box-shadow: 0 0 0 4px rgba(255, 111, 156, .12);
}
.field .hint { font-size: 12.5px; color: var(--ink-soft); margin-top: 5px; }

/* Kaartje / paneel */
.card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 28px;
}

/* Auth-layout */
.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; position: relative; overflow: hidden;
}
.auth-card { width: 100%; max-width: 430px; position: relative; z-index: 2; }
.auth-card .logo {
  font-family: var(--font-head); font-size: 26px; font-weight: 800;
  display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 6px;
}
.auth-card .tagline { text-align: center; color: var(--ink-soft); margin-bottom: 24px; font-size: 14.5px; }
.auth-links { text-align: center; margin-top: 18px; font-size: 14.5px; color: var(--ink-soft); }

.alert {
  border-radius: 14px; padding: 12px 16px; margin-bottom: 16px; font-size: 14.5px; font-weight: 600;
}
.alert.err { background: #ffe3e8; color: #c2334f; }
.alert.ok { background: #dff7ec; color: #1c7d57; }

/* Emoji- en kleurpickers */
.emoji-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.emoji-pick label { cursor: pointer; }
.emoji-pick input { display: none; }
.emoji-pick span {
  display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center;
  font-size: 21px; border-radius: 13px; border: 2px solid transparent; background: #fff;
  transition: transform .12s ease;
}
.emoji-pick input:checked + span { border-color: var(--pink); background: var(--pink-bg); transform: scale(1.12); }
.emoji-pick span:hover { transform: scale(1.12); }

.color-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.color-pick label { cursor: pointer; }
.color-pick input { display: none; }
.color-pick span {
  display: block; width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 0 0 2px var(--line);
  transition: transform .12s ease;
}
.color-pick input:checked + span { box-shadow: 0 0 0 3px var(--ink); transform: scale(1.15); }

/* Zwevende deco (wolkjes, hartjes) */
.floaty { position: absolute; font-size: 38px; opacity: .5; pointer-events: none; z-index: 1;
  animation: floaty 7s ease-in-out infinite; }
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-18px) rotate(4deg); }
}

/* ===== Merkteken ===== */
.brand-mark { vertical-align: -.22em; margin-right: 6px; }

/* ===== Op je beginscherm zetten ===== */
.pwa-sheet {
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(40, 20, 40, .45); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .3s ease; padding: 16px;
}
.pwa-sheet.open { opacity: 1; }
.pwa-card {
  background: var(--card); border-radius: 26px; padding: 26px 24px 22px; max-width: 380px; width: 100%;
  text-align: center; box-shadow: 0 -10px 50px rgba(60, 20, 50, .3);
  transform: translateY(30px); transition: transform .35s cubic-bezier(.2, 1, .3, 1);
  margin-bottom: env(safe-area-inset-bottom);
}
.pwa-sheet.open .pwa-card { transform: none; }
.pwa-card h3 { font-size: 20px; margin: 10px 0 14px; }
.pwa-stappen { text-align: left; list-style: none; counter-reset: st; margin-bottom: 14px; }
.pwa-stappen li {
  counter-increment: st; position: relative; padding: 9px 0 9px 40px; font-size: 15px; font-weight: 600;
}
.pwa-stappen li::before {
  content: counter(st); position: absolute; left: 0; top: 7px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--pink-bg); color: var(--pink); font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.pwa-ic { display: inline-flex; vertical-align: -.2em; color: #2d8cf0; }
.pwa-note { color: var(--ink-soft); font-size: 13.5px; line-height: 1.5; margin-bottom: 16px; }
.pwa-ok {
  width: 100%; border: 0; border-radius: 999px; padding: 13px; font-size: 15px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #ff8fb3, var(--pink)); box-shadow: 0 8px 20px rgba(255, 111, 156, .3);
}
[data-install][hidden] { display: none !important; }

/* ===== Als app: geen browser-gevoel ===== */
html { -webkit-tap-highlight-color: transparent; }
button, a, label, input[type=checkbox], .shot, .swatch { touch-action: manipulation; }

/* Kop die alleen voor schermlezers en zoekmachines telt */
.alleen-voorlezer {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}