/* ============================================================
   TOPPY · Profielverrijking 2026
   Tokens 1-op-1 uit de briefing (brandbook geel huisstijl handboek)
   ============================================================ */

/* --------- Fonts: Poppins (lokaal) --------- */
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/poppins-400.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/poppins-500.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/poppins-600.ttf') format('truetype');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/poppins-700.ttf') format('truetype');
}

/* --------- Phosphor icons (alleen fill + bold, lokaal) --------- */
@font-face {
  font-family: 'Phosphor-Fill';
  src: url('../fonts/phosphor-fill.woff2') format('woff2');
  font-weight: normal; font-style: normal; font-display: block;
}
@font-face {
  font-family: 'Phosphor-Bold';
  src: url('../fonts/phosphor-bold.woff2') format('woff2');
  font-weight: normal; font-style: normal; font-display: block;
}
.ph-fill, .ph-bold {
  speak: never; font-style: normal; font-weight: normal; font-variant: normal;
  text-transform: none; line-height: 1; letter-spacing: 0;
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.ph-fill { font-family: 'Phosphor-Fill' !important; }
.ph-bold { font-family: 'Phosphor-Bold' !important; }
/* Alleen de glyphs die deze pagina gebruikt */
.ph-swimming-pool:before   { content: '\ecb6'; }
.ph-bathtub:before         { content: '\e81e'; }
.ph-tree:before            { content: '\e6da'; }
.ph-fish:before            { content: '\e728'; }
.ph-fish-simple:before     { content: '\e72a'; }
.ph-cooking-pot:before     { content: '\e764'; }
.ph-binoculars:before      { content: '\ea64'; }
.ph-plant:before           { content: '\ebae'; }
.ph-person:before          { content: '\e3a8'; }
.ph-users:before           { content: '\e4d6'; }
.ph-baby:before            { content: '\e774'; }
.ph-blueprint:before       { content: '\eda0'; }
.ph-circle-half:before     { content: '\e18c'; }
.ph-campfire:before        { content: '\e9d8'; }
.ph-thermometer-hot:before { content: '\e5ca'; }
.ph-check:before           { content: '\e182'; }
.ph-check-square:before    { content: '\e186'; }
.ph-arrow-left:before      { content: '\e058'; }
.ph-arrow-right:before     { content: '\e06c'; }
.ph-confetti:before        { content: '\e81a'; }

/* --------- Tokens --------- */
:root {
  --toppy-yellow:   #FFCB01;
  --toppy-black:    #343E40;
  --grey-darker:    #5F6768;
  --grey-dark:      #8B9091;
  --grey:           #B7B9BA;
  --grey-light:     #E3E3E3;
  --grey-lighter:   #F5F5F5;

  --teal-dark:      #134A46;
  --orange-base:    #EF7102;
  --green-base:     #12AC74;
  --green-dark:     #0E8B5C;
  --blue-base:      #35ACF8;
  --red-base:       #F3575E;

  --cooler-blue:    #E0ECF3;
  --pink-shake:     #FFE3E3;
  --sand:           #FAF5E6;
  --green-pond:     #DCE3DF;
  --green-soft:     #DCEFE0;

  --fg-1:           var(--toppy-black);
  --fg-2:           var(--grey-dark);
  --fg-muted:       var(--grey);
  --border:         var(--grey-light);
  --border-strong:  var(--grey);

  --font-body:      'Poppins', system-ui, sans-serif;
  --font-display:   'Poppins', system-ui, sans-serif;

  --shadow-sm:      0 2px 6px rgba(52, 62, 64, .08);
  --shadow-lg:      0 16px 40px rgba(52, 62, 64, .14);
  --ease-out:       cubic-bezier(.2, .8, .2, 1);
  --t-fast:         120ms;
  --t-base:         200ms;
}

/* --------- Reset / basis --------- */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-1);
  background: #E9EBEC;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------- Marker (Toppy signatuur-highlight) --------- */
.marker {
  position: relative;
  display: inline-block;
  isolation: isolate;
  padding: 0 .14em;
}
.marker::before {
  content: '';
  position: absolute;
  inset: 12% -.12em 4% -.12em;
  background: var(--toppy-yellow);
  z-index: -1;
  border-radius: 3px 2px 4px 2px;
  transform: rotate(-1.5deg);
}

/* --------- Layout: full-screen op mobiel, kaart op desktop --------- */
.shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.card {
  position: relative;
  width: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
@media (min-width: 560px) {
  .shell { align-items: center; padding: 32px 16px; }
  .card {
    max-width: 430px;
    min-height: 720px;
    max-height: calc(100vh - 64px);
    border-radius: 28px;
    box-shadow: var(--shadow-lg);
  }
}

/* --------- Header + progress --------- */
.flow__header { flex: 0 0 auto; padding-top: 14px; }
.flow__headerRow {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 20px 12px;
}
.flow__logo { height: 28px; display: block; }
.flow__stepCount {
  margin-left: auto;
  font: 600 12px var(--font-body);
  color: var(--fg-muted);
}
.iconBtn {
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--border); background: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--toppy-black);
  padding: 0;
}
.progress { display: flex; gap: 6px; align-items: center; padding: 0 20px 14px; }
.progress__seg {
  height: 6px; flex: 1; border-radius: 999px;
  background: var(--grey-light);
  transition: background var(--t-base);
}
.progress__seg--done { background: var(--toppy-yellow); }

/* --------- Scrollende content --------- */
.flow__content {
  flex: 1; overflow-y: auto;
  padding: 4px 20px 18px;
  -webkit-overflow-scrolling: touch;
}
.flow__section { margin-bottom: 24px; }

/* --------- Sticky CTA --------- */
.flow__footer {
  flex: 0 0 auto;
  padding: 12px 20px 26px;
  border-top: 1px solid var(--border);
  background: #fff;
  display: flex; flex-direction: column; gap: 8px;
}
@media (min-width: 560px) {
  .flow__footer { padding-bottom: 18px; }
}
.flow__hint {
  text-align: center;
  font: 500 12px var(--font-body);
  color: var(--fg-muted);
}

/* --------- Knoppen --------- */
.btn {
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  padding: 12px 22px; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer; line-height: 1;
  transition: background var(--t-base), transform var(--t-fast), opacity var(--t-base);
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--green-base); color: #fff; }
.btn-primary:hover { background: var(--green-dark); }
.btn-primary:disabled { opacity: .45; cursor: not-allowed; }
.btn-yellow { background: var(--toppy-yellow); color: var(--toppy-black); }
.btn-yellow:hover { background: #E8B900; }
.btn-ghost { background: transparent; color: var(--fg-2); }
.btn-ghost:hover { background: var(--grey-lighter); }
.btn--cta {
  width: 100%; font-size: 15.5px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}

/* --------- Sectietitels --------- */
.sectionTitle { margin-bottom: 14px; }
.sectionTitle__kicker {
  font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--green-dark);
  margin-bottom: 5px;
}
.sectionTitle__title {
  font: 700 22px var(--font-display);
  letter-spacing: -.02em; line-height: 1.12; margin: 0;
  color: var(--toppy-black);
  text-wrap: pretty;
}
.sectionSub {
  font: 700 17px var(--font-display);
  letter-spacing: -.01em; margin: 0 0 4px;
  color: var(--toppy-black);
}
.sectionNote {
  font: 500 12.5px var(--font-body);
  color: var(--fg-2); margin: 0 0 10px;
}
.sectionLead {
  font: 500 13px/1.5 var(--font-body);
  color: var(--fg-2); margin: 0 0 16px;
}

/* --------- Multi-select badge --------- */
.multiBadge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--grey-lighter); color: var(--fg-2);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 11px; font: 600 12px var(--font-body);
  letter-spacing: -.005em; margin-bottom: 12px;
}
.multiBadge i { font-size: 15px; color: var(--green-base); }

/* --------- CardTile (keuzekaart) --------- */
.tileGrid { display: grid; grid-template-columns: 1fr; gap: 6px; }
.tileGrid--2col { grid-template-columns: 1fr 1fr; gap: 10px; }
.tileGrid--half { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }

.tile {
  position: relative; text-align: left; cursor: pointer;
  border: 1.5px solid var(--border); background: #fff;
  border-radius: 16px; padding: 8px 13px;
  display: flex; flex-direction: row; align-items: center;
  gap: 12px; width: 100%;
  transition: background var(--t-base), border-color var(--t-base), transform var(--t-fast), box-shadow var(--t-base);
}
.tile--selected {
  border: 2px solid var(--toppy-yellow);
  background: var(--toppy-yellow);
  box-shadow: 0 4px 12px rgba(255, 203, 1, .35);
}
.tile--big {
  flex-direction: column; align-items: flex-start;
  gap: 10px; padding: 16px 14px;
}
.tile__icon {
  width: 34px; height: 34px; border-radius: 11px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--grey-lighter); color: var(--toppy-black);
  font-size: 20px;
  transition: background var(--t-base);
}
.tile--big .tile__icon { width: 42px; height: 42px; font-size: 24px; }
.tile--selected .tile__icon { background: rgba(255, 255, 255, .55) !important; color: var(--toppy-black) !important; }
.tile__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tile__label {
  font: 700 14.5px var(--font-display);
  letter-spacing: -.01em; color: var(--toppy-black);
  overflow-wrap: anywhere;
}
.tile--smLabel .tile__label { font-size: 13px; white-space: nowrap; }
.tile__copy { font: 500 11.5px var(--font-body); color: var(--fg-2); }
.tile--selected .tile__copy { color: rgba(52, 62, 64, .7); }
.tile__check {
  position: absolute; top: 10px; right: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1.5px solid var(--grey-light); background: transparent;
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; opacity: 0;
  transition: opacity var(--t-fast);
}
.tile--big .tile__check { opacity: 1; }
.tile--selected .tile__check { opacity: 1; border: none; background: var(--toppy-black); }

/* --------- Chips --------- */
.chipRow { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1.5px solid var(--border); background: #fff; color: var(--toppy-black);
  border-radius: 999px; padding: 9px 14px;
  font: 600 13px var(--font-body);
  transition: all var(--t-fast);
}
.chip i { font-size: 16px; }
.chip--selected { border-color: var(--toppy-black); background: var(--toppy-black); color: #fff; }

/* --------- Stap 1: bannerfoto --------- */
.stepBanner {
  display: block; width: 100%; height: 74px;
  object-fit: cover; border-radius: 12px;
  margin: 0 0 12px;
}

/* --------- Verdieping: foto-kaarten --------- */
.tileGrid--photos { grid-template-columns: 1fr 1fr; gap: 10px; }
.photoCard {
  position: relative; text-align: left; cursor: pointer; padding: 0; overflow: hidden;
  border: 1.5px solid var(--border); background: #fff;
  border-radius: 14px; width: 100%;
  display: flex; flex-direction: column; font: inherit;
  box-shadow: 0 1px 2px rgba(52, 62, 64, .05);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.photoCard__media { position: relative; line-height: 0; }
.photoCard__img {
  display: block; width: 100%; height: 92px; object-fit: cover;
}
.photoCard__placeholder {
  display: flex; width: 100%; height: 92px;
  align-items: center; justify-content: center;
  font-size: 28px;
}
.photoCard__check {
  position: absolute; top: 8px; right: 8px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .95);
  background: rgba(27, 33, 34, .4); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  transition: background var(--t-fast);
}
.photoCard--selected .photoCard__check { border: none; }
.photoCard__label {
  padding: 9px 12px;
  transition: background var(--t-base);
  font: 700 13px var(--font-display);
  letter-spacing: -.01em; line-height: 1.2;
  color: var(--toppy-black);
  text-wrap: pretty;
}
.photoCard--selected .photoCard__label { color: #fff; }

/* --------- Verdieping: wereld-koppen --------- */
.worldGroup { display: flex; flex-direction: column; gap: 22px; }
.world__head { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.world__icon {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
}
.world__name {
  font: 700 16px var(--font-display);
  letter-spacing: -.01em; color: var(--toppy-black);
}
.world__owned {
  display: inline-flex; align-items: center; gap: 4px;
  font: 700 10px var(--font-body); letter-spacing: .04em;
  text-transform: uppercase; color: #fff;
  padding: 3px 8px; border-radius: 999px;
}
.world__owned i { font-size: 11px; }

.dreamMore {
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* --------- Vissen toggle --------- */
.fishToggle {
  margin-top: 10px;
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  border: 1.5px dashed var(--border-strong); background: #fff; color: var(--fg-2);
  border-radius: 999px; padding: 8px 14px;
  font: 600 12.5px var(--font-body);
  transition: all var(--t-fast);
}
.fishToggle i { font-size: 15px; }
.fishToggle--on {
  border: 1.5px solid var(--teal-dark);
  background: var(--teal-dark); color: #fff;
}

/* --------- Formulier --------- */
.fieldLabel {
  font: 600 13px var(--font-body); color: var(--fg-1);
  display: block; margin-bottom: 6px;
}
.input {
  width: 100%; padding: 13px 14px; border-radius: 10px;
  border: 1.5px solid var(--border-strong); background: var(--grey-lighter);
  font: 500 15px var(--font-body); color: var(--fg-1); outline: none;
}
.input:focus { border-color: var(--toppy-black); background: #fff; }
.birthdayRow { display: flex; gap: 10px; }
.input--day { width: 76px; text-align: center; }
.input--month { flex: 1; appearance: none; }
.input--year { width: 88px; text-align: center; }
input[type='number'].input { -moz-appearance: textfield; }
input[type='number'].input::-webkit-inner-spin-button,
input[type='number'].input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* --------- Beloningsbanner --------- */
.rewardBanner {
  background: var(--sand); border: 1px solid #F0E6C8;
  border-radius: 14px; padding: 14px 16px;
  display: flex; gap: 12px; align-items: center;
}
.rewardBanner p {
  font: 600 13px/1.45 var(--font-body);
  color: var(--toppy-black); margin: 0;
}

/* --------- Smiley --------- */
.smiley {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; flex: 0 0 auto;
}
.smiley--ring { background: var(--toppy-yellow); }
.smiley img { display: block; height: auto; }

/* --------- Success --------- */
.success {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: #fff;
}
.success__body {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 40px 30px; gap: 4px;
}
.success__title {
  font: 700 27px var(--font-display);
  letter-spacing: -.02em; line-height: 1.1; margin: 14px 0 0;
}
.success__text {
  font: 500 14.5px/1.55 var(--font-body);
  color: var(--fg-2); margin: 14px 0 0; max-width: 256px;
}
.success__actions {
  margin-top: 24px; display: flex; flex-direction: column;
  gap: 9px; width: 100%; max-width: 320px;
}
.success__tag {
  text-align: center; font: 600 12px var(--font-body);
  color: var(--fg-muted); padding-bottom: 22px; margin: 0;
}

/* --------- Confetti --------- */
.confetti {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; z-index: 40;
}
.confetti span {
  position: absolute; top: -16px; border-radius: 2px;
  animation: confettiFall var(--dur, 2s) var(--delay, 0s) var(--ease-out) forwards;
}
@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(540deg); opacity: 0; }
}

/* --------- Laden / fout --------- */
.stateScreen {
  position: absolute; inset: 0; background: #fff;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 40px 30px; gap: 8px;
  z-index: 50;
}
.stateScreen[hidden] { display: none; }
.stateScreen h1 {
  font: 700 24px var(--font-display);
  letter-spacing: -.02em; margin: 14px 0 0;
}
.stateScreen p {
  font: 500 14px/1.55 var(--font-body);
  color: var(--fg-2); margin: 10px 0 0; max-width: 280px;
}
.spinner {
  width: 38px; height: 38px; border-radius: 50%;
  border: 4px solid var(--grey-light); border-top-color: var(--toppy-yellow);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --------- noscript --------- */
.noScript {
  position: fixed; inset: 0; background: #fff; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 30px;
  font-family: var(--font-body);
}