/* De favorietenpagina: het raster, de lege staat, en het slepen. */

/* Weg wat bij de categorie hoorde: haar intro, haar filters, haar paginering en
   haar sortering. De favorietenlijst heeft er niets aan. */
/* De linkerkolom met Populair/Thema/Stijl blijft staan: dit is een gewone
   overzichtspagina van de site, alleen met een andere selectie erin. Wat wél weg
   moet is alles dat over de categorie zelf gaat — haar intro, haar paginering en
   haar sortering. Die slaan nergens op bij een lijstje bewaarde kaarten. */
#introText, #leesMeerBtn, .lees-meer,
#pagination_top, .pagination_bottom, .pagination_filter, .pagination_pages,
.pagination_top_sortering, #sortering,
#seo_text, .seo_text, #kaarten_teller, .kaarten_teller { display: none !important; }
#gk-fav-leeg {
  max-width: 520px;
  margin: 40px auto 60px;
  text-align: center;
  color: #7c848a;
  font-size: 15px;
  line-height: 1.65;
}
#gk-fav-leeg .gk-groot { font-size: 44px; color: #e0e4e6; display: block; margin-bottom: 14px; }
#gk-fav-leeg a {
  display: inline-block;
  margin-top: 18px;
  background: #669999;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 8px;
}
#gk-fav-aantal {
  color: #7c848a; font-size: 14px; margin: -6px 0 22px;
  display: flex; align-items: center; gap: 14px;
}
#gk-fav-wissen {
  background: none; border: 0; padding: 0;
  color: #7c848a; font: inherit; font-size: 13px; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer;
}
#gk-fav-wissen:hover { color: var(--gk-hart, #eb5e5e); }
/* Een kaart die je van je lijstje haalt knippert tien keer voor hij vertrekt:
   een halve seconde per knipper, dus vijf seconden bedenktijd. Dat is geen
   versiering maar een terugweg — klik je in die vijf seconden weer op het hartje,
   dan blijft hij gewoon staan. Zonder dat raampje is één misklik meteen
   definitief, en op een lijst die je zelf hebt samengesteld is dat zonde.
   Let op: deze duur staat ook in het script hieronder (KNIPPERS × KNIPPERDUUR);
   verander je hem hier, verander hem daar dan mee. */
.cards_list li.card.gk-knippert { animation: gk-knipper .5s ease-in-out 10; }
@keyframes gk-knipper {
  0%, 100% { opacity: 1; }
  50%      { opacity: .22; }
}
/* Daarna pas echt weg, met een korte krimp in plaats van ineens verdwijnen. */
.cards_list li.card.gk-weg {
  animation: gk-weg .32s ease forwards;
  pointer-events: none;
}
@keyframes gk-weg {
  to { opacity: 0; transform: scale(.86); }
}
/* Slepen om de volgorde te veranderen. De kaart die je vasthebt komt los van de
   rij: iets groter, een schaduw eronder en een lichte scheefstand, zodat je ziet
   dát je hem draagt. De rest schuift eronderdoor naar zijn nieuwe plek. */
/* pan-y: verticaal scrollen blijft van de browser, horizontaal slepen is van ons.
   Met "manipulation" mag de browser de veeg zelf afhandelen en komt onze
   preventDefault te laat. */
.cards_list li.card { touch-action: pan-y; }
/* Zodra het slepen echt begonnen is mag de browser er helemaal niets meer mee. */
body.gk-sleepbezig .cards_list li.card { touch-action: none; }
body.gk-sleepbezig { overflow-anchor: none; }
.cards_list li.card.gk-sleepbaar { cursor: grab; }
.cards_list li.card.gk-sleept {
  cursor: grabbing;
  z-index: 30;
  position: relative;
  pointer-events: none;
  transform-origin: center;
  filter: drop-shadow(0 12px 22px rgba(51,51,51,.22));
  transition: none !important;
}
/* De kaarten die opzij gaan bewegen wél netjes mee. */
.cards_list li.card.gk-schuift {
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
/* Waar de kaart komt te liggen. */
.cards_list li.card.gk-gat { opacity: .28; }
body.gk-sleepbezig { user-select: none; -webkit-user-select: none; }

@media (prefers-reduced-motion: reduce) {
  .cards_list li.card.gk-knippert { animation: none; opacity: .5; }
  .cards_list li.card.gk-weg { animation: none; opacity: 0; }
  .cards_list li.card.gk-schuift { transition: none; }
}

/* Het vaantje op een kaart die je op /tinder/ omhoog hebt geswipet. Die staan
   ook bovenaan in de lijst — niet doordat deze pagina sorteert, maar doordat
   tinder.js ze vooraan in gk-favorieten zet. Zo blijft het slepen werken. */
.cards_list li.card { position: relative; }
.gk-fav-superlike {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--gk-accent, #4e7ca5);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(51, 51, 51, .18);
  pointer-events: none;
}