/* Het swipescherm op /tinder/.

   De pagina komt uit een categoriepagina als mal (tools/tinder.py), dus alles
   wat bij een categorie hoort staat er nog: de zijbalk met rubrieken, de
   filterbalk, de paginering, de verkooptekst eronder. Weghalen zou betekenen
   tellen waar een <div> weer dichtgaat; verbergen doet hetzelfde werk en kan de
   opmaak niet stukmaken. Zelfde afweging als op de favorietenpagina. */
/* De kruimelbalk staat op een telefoon absoluut gepositioneerd linksboven in
   het contentblok; de stapel schoof er dan overheen. "Geboortekaartjes >
   Swipen" voegt hier ook niets toe — dit is geen rubriek waar je in navigeert. */
/* Bovenin blijft alleen het logo staan. Op een telefoon aten de blauwe
   speerpuntenbalk, de hamburger en de drie iconen samen een derde van het scherm
   op, en dit scherm is één ding: de kaart. Ries, 22-08-2026: "bovenin alles weg
   behalve logo." De navigatie zelf blijft gewoon in de pagina staan (het menu
   hangt eraan), hij is alleen niet zichtbaar. */
body.gk-tinder-pagina .payoffs,
body.gk-tinder-pagina #header_row .menu .left .menu-btn,
body.gk-tinder-pagina #header_row .menu .center,
body.gk-tinder-pagina #header_row .menu .right,
body.gk-tinder-pagina #mobile-search-bar,
body.gk-tinder-pagina #menu_bar,
body.gk-tinder-pagina #horizontal_menu_bar,
body.gk-tinder-pagina #breadcrumb_bar,
body.gk-tinder-pagina #left_container,
body.gk-tinder-pagina #categorie_header_text,
body.gk-tinder-pagina #pagination_top,
body.gk-tinder-pagina .pagination_bottom,
body.gk-tinder-pagina #pagination_bottom,
body.gk-tinder-pagina #home_speerpunten,
body.gk-tinder-pagina #categorie_footer_text,
body.gk-tinder-pagina #kaarten_teller,
body.gk-tinder-pagina #introText,
body.gk-tinder-pagina #seo_text { display: none !important; }

/* Het logo staat nu alleen in zijn rij en mag in het midden. */
body.gk-tinder-pagina #header_row .menu .left {
  width: 100%;
  justify-content: center;
  display: flex;
}
body.gk-tinder-pagina #header_row .menu .left .logo { margin: 0; }

/* Alles wat ónder de kaart stond gaat weg: de speerpunten, de voettekst, het
   cijfer. Dit scherm is één ding en het vult de telefoon. */
body.gk-tinder-pagina #payoffs,
body.gk-tinder-pagina #footer,
body.gk-tinder-pagina #ekomi { display: none !important; }

/* De pagina zelf staat stil. Zonder dit kun je de hele pagina wegvegen terwijl
   je een kaart probeert te swipen, en dan staat de stapel half uit beeld —
   precies wat Ries op 22-08-2026 liet zien.

   `touch-action: manipulation` is hier het belangrijkste: dat haalt op iOS de
   dubbeltik-om-in-te-zoomen weg. Een meta-tag met `user-scalable=no` doet dat
   niet, die negeert Safari sinds iOS 10 met opzet. */
body.gk-tinder-pagina {
  overflow: hidden;
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
}

/* Zonder zijbalk mag de rechterkolom de hele breedte hebben. */
body.gk-tinder-pagina #right_container {
  width: 100% !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Het scherm hangt vast onder de logobalk en vult de rest van de telefoon.
   Vast en niet meelopend: een swipescherm waarin je kunt scrollen vecht met de
   swipe zelf. --gk-kop zet tinder.js op de hoogte van die balk; de waarde
   hieronder is alleen de terugval voor het moment vóór het script draait. */
.gk-tinder {
  position: fixed;
  top: var(--gk-kop, 76px);
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  /* Een swipestapel is een telefoonding: nooit breder dan een telefoon, ook
     niet op een groot scherm. Daar staat hij dan gewoon gecentreerd. */
  max-width: 420px;
  display: flex;
  flex-direction: column;
  padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  user-select: none;
  -webkit-user-select: none;
}

/* De stapel krijgt wat er overblijft: de knoppen en het regeltje eronder nemen
   hun eigen hoogte, de kaart de rest. */
.gk-tinder-stapel {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-bottom: 14px;
}

.gk-tinder-kaart {
  position: absolute;
  inset: 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(51, 51, 51, .14);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* De browser mag met deze kaart niet zelf gaan scrollen: wij vangen het
     slepen op. Zonder dit pakt Chrome op Android de verticale beweging af en
     voelt de kaart alsof hij blijft haken. */
  touch-action: none;
  will-change: transform;
  /* Elke verplaatsing die niet uit je vinger komt, komt met een overgang: de
     kaart die naar voren schuift groeit naar zijn maat in plaats van er ineens
     op te staan, en een halve haal veert terug. */
  transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}

/* Behalve tijdens het slepen — een overgang loopt daar achter op je vinger. */
.gk-tinder-kaart.gk-sleept { transition: none; }

/* Alleen de bovenste kaart luistert; de twee eronder liggen er als dieptezicht
   en vangen geen aanraking. */
.gk-tinder-kaart:not(.gk-boven) { pointer-events: none; }

.gk-tinder-beeld {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Net iets donkerder dan de kaart zelf: de meeste kaartfoto's staan op wit,
     en zonder dat verschil zweeft de foto in het niets. */
  background: #f4f6f7;
  /* Geen marge om de foto: de meeste kaartfoto's hebben er zelf al een. */
  padding: 0;
}

/* Het balkje bovenin: één streepje per foto, zoals bij Tinder. Het ligt óp het
   beeld, dus het heeft een schaduw nodig om ook op een lichte kaart te zien te
   zijn — en de meeste kaarten hier zijn licht. */
.gk-tinder-balk {
  position: absolute;
  top: 8px;
  left: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
  z-index: 2;
}
.gk-segment {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: rgba(28, 28, 28, .18);
}
.gk-segment.gk-aan { background: var(--gk-accent, #4e7ca5); }
.gk-tinder-beeld img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* Slepen aan een plaatje is bij de browser standaard "afbeelding
     verslepen"; dat komt in de weg van het swipen. */
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

.gk-tinder-tekst {
  padding: 12px 16px 16px;
  border-top: 1px solid #f0f1f2;
}
.gk-tinder-naam {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--gk-inkt, #1c1c1c);
  line-height: 1.35;
  /* Twee regels, daarna afkappen — anders duwt een lange naam de knoppen weg. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gk-tinder-waarom {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--gk-accent, #4e7ca5);
}

/* De stempels die tijdens het slepen opkomen. Ze staan er altijd, op nul
   doorzichtigheid; het script zet die op naar hoe ver je gesleept hebt, zodat
   je halverwege al ziet welke kant het op gaat. */
.gk-tinder-stempel {
  position: absolute;
  top: 20px;
  padding: 6px 14px;
  border: 3px solid;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
}
.gk-tinder-stempel.gk-ja {
  left: 18px;
  color: var(--gk-hart, #eb5e5e);
  border-color: var(--gk-hart, #eb5e5e);
  transform: rotate(-14deg);
}
.gk-tinder-stempel.gk-nee {
  right: 18px;
  color: var(--gk-zacht, #6b7378);
  border-color: var(--gk-zacht, #6b7378);
  transform: rotate(14deg);
}
/* De topper staat recht en in het midden: omhoog swipen is een ander gebaar dan
   opzij vegen, en dan hoort er geen scheve stempel bij. Midden op het beeld en
   niet bovenaan: de kaart schuift bij dit gebaar omhoog, en bovenin verdwijnt
   de stempel meteen onder de kopbalk. Onderaan botste hij met de titel. */
.gk-tinder-stempel.gk-top {
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--gk-accent, #4e7ca5);
  border-color: var(--gk-accent, #4e7ca5);
}

/* Weg als je doorzet. Terugveren gebeurt met de gewone overgang hierboven.
   Op verzoek trager dan de 0,32 s waarmee het begon: je wilt zien wát er
   gebeurt. De drie richtingen delen deze duur, en tinder.js zorgt dat ze ook
   ongeveer dezelfde afstand afleggen — anders lijkt omhoog sneller, want daar
   is het scherm twee keer zo lang. */
.gk-tinder-kaart.gk-weg { transition: transform .5s ease-out, opacity .5s ease-out; opacity: 0; }

/* Een topper vertrekt in twee stappen, en met de tijd ervoor: samen ruim een
   seconde tegen een halve voor een gewone ja. Eerst tilt de kaart op — met een
   veerbeweging, een blauwe rand die aanzwelt en de stempel die opduikt. */
.gk-tinder-kaart.gk-tilt {
  transition: transform .38s cubic-bezier(.34, 1.7, .64, 1), box-shadow .38s ease-out;
  box-shadow: 0 0 0 4px var(--gk-accent, #4e7ca5), 0 18px 54px rgba(78, 124, 165, .5);
}
.gk-tinder-kaart.gk-tilt .gk-tinder-stempel.gk-top {
  animation: gk-topper-op .38s cubic-bezier(.34, 1.7, .64, 1) forwards;
}

/* En dan pas weg: 0,8 s krimpend omhoog, met de rand nog om zich heen. Dat
   verschil is het punt — een topper is geen hartje maar een uitroepteken. */
.gk-tinder-kaart.gk-weg-top {
  transition: transform .8s cubic-bezier(.4, -0.12, .3, 1), opacity .8s ease-in,
              box-shadow .4s ease-out;
  box-shadow: 0 0 0 4px var(--gk-accent, #4e7ca5), 0 16px 50px rgba(78, 124, 165, .55);
}

/* De sterrenregen. Hangt aan de stapel en niet aan de kaart: die snijdt af op
   zijn eigen afgeronde rand, en dan komen de sterren niet verder dan de kaart. */
.gk-sterrenregen {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 0;
  height: 0;
  z-index: 20;
  pointer-events: none;
}
.gk-sterrenregen span {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  background: var(--gk-accent, #4e7ca5);
  /* Een vijfpuntige ster, uitgeknipt uit een vierkantje — geen extra bestand
     en hij kleurt mee met de accentkleur. */
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  opacity: 0;
  animation: gk-ster-weg .85s ease-out var(--vertraging, 0ms) forwards;
}
@keyframes gk-ster-weg {
  0%   { opacity: 0; transform: translate(0, 0) scale(.3) rotate(0deg); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.1) rotate(160deg); }
}
@keyframes gk-topper-op {
  0%   { transform: translate(-50%, -50%) scale(.8); }
  60%  { transform: translate(-50%, -50%) scale(1.18); }
  100% { transform: translate(-50%, -50%) scale(1.08); }
}

/* De rij onder de kaart, in de volgorde van Tinder: terug, weg, topper,
   bewaren. De boost die daar als vijfde staat hoort hier niet — er valt in een
   catalogus niets te boosten. Elke knop heeft zijn eigen kleur in de ring en in
   het icoon; dat is precies waaraan je ze zonder lezen uit elkaar houdt. */
.gk-tinder-knoppen {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Alle vier even groot en even ver uit elkaar, op verzoek. Bij Tinder zijn
     terug en ster kleiner; hier zijn het vier gelijkwaardige keuzes. 54 px is
     ruim boven het tikdoel van 44 en laat de kaart meer ruimte. */
  gap: 20px;
}
.gk-tinder-knop {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid currentColor;
  background: #fff;
  color: var(--gk-zacht, #6b7378);
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(51, 51, 51, .10);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Niet laten krimpen als de rij krap wordt; 58 px ís het tikdoel. */
  flex: 0 0 auto;
}
/* Amber voor terug: het is de enige kleur die hier nieuw is, en hij hoort bij
   geen van de andere drie — juist het punt van een knop die iets ongedaan maakt. */
.gk-tinder-knop.gk-terug { color: #d99a2b; }
.gk-tinder-knop.gk-top { color: var(--gk-accent, #4e7ca5); }
.gk-tinder-knop.gk-ja { color: var(--gk-hart, #eb5e5e); }
.gk-tinder-knop:disabled { opacity: .3; cursor: default; }
.gk-tinder-knop:active { transform: scale(.94); }

.gk-tinder-profiel {
  flex: 0 0 auto;
  margin: 12px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--gk-zacht, #6b7378);
  min-height: 19px;
}
.gk-tinder-profiel b { color: var(--gk-accent, #4e7ca5); font-weight: 600; }

/* Het slotscherm: wat je hebt bewaard, en waar het staat. */
.gk-tinder-klaar {
  text-align: center;
  padding: 30px 6px 10px;
  color: var(--gk-zacht, #6b7378);
  font-size: 15px;
  line-height: 1.6;
}
.gk-tinder-klaar a.gk-verder {
  display: inline-block;
  margin-top: 16px;
  background: var(--gk-accent, #4e7ca5);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 8px;
}
.gk-tinder-buit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 20px;
}
.gk-tinder-buit img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background: #fbfbfc;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .gk-tinder-kaart,
  .gk-tinder-kaart.gk-weg,
  .gk-tinder-kaart.gk-weg-top,
  .gk-tinder-kaart.gk-tilt { transition: none; }
  .gk-tinder-kaart.gk-tilt .gk-tinder-stempel.gk-top { animation: none; }
  .gk-sterrenregen { display: none; }
  .gk-tinder-knop:active { transform: none; }
}