/* 1.10.220 KERSTGEM-TICKER: de winnaar van het kerstkadootje verschijnt boven
   in beeld als een kleine slideshow — drie slides die elkaar afwisselen
   (gevonden / wie / wanneer + kadootje), telkens met een korte veeg naar
   links. De balk zweeft over de pagina en komt met een swoosh van boven
   binnen; de sticky header zakt één balkhoogte mee.
   Zonder winnaar blijft de balk weg (js/kerst-gem-ticker.js laat [hidden] staan). */
.kerst-gem-ticker{
  position:fixed;top:0;left:0;right:0;z-index:60;
  height:35px;display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-weight:600;font-size:.9rem;letter-spacing:.01em;
  color:#6b4a00;background:#fdf7e6;border-bottom:1px solid rgba(169,116,0,.28);
  box-shadow:0 6px 18px rgba(15,23,42,.10);
  transform:translateY(-100%);
  animation:kerstGemSwooshIn .85s cubic-bezier(.18,.9,.2,1) forwards;
}
.kerst-gem-ticker[hidden]{display:none}
/* 1.10.220: in dark mode is de balk niet langer crème (dat las als een licht
   vlak tussen de donkere pagina) maar donkerbruin met goudkleurige tekst. */
html[data-theme="dark"] .kerst-gem-ticker{color:#f7e6bd;background:#1c1508;border-bottom-color:rgba(246,201,69,.35)}

/* De header begint onder de balk en plakt daar ook tijdens het scrollen. */
html.kerst-gem-ticker-open .top{top:35px}

@keyframes kerstGemSwooshIn{
  0%{transform:translateY(-105%) skewY(-2deg);opacity:.35}
  60%{transform:translateY(4%) skewY(.7deg);opacity:1}
  100%{transform:translateY(0) skewY(0);opacity:1}
}

/* Slideshow: één slide tegelijk, de vorige veegt naar links weg, de nieuwe
   komt van rechts binnen. Alles staat absoluut zodat de balkhoogte vast blijft. */
.kerst-gem-ticker-slides{position:relative;width:100%;height:100%}
.kerst-gem-ticker-slide{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  gap:8px;padding:0 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transform:translateX(22%);
  transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.kerst-gem-ticker-slide.is-active{opacity:1;transform:translateX(0);pointer-events:auto}
.kerst-gem-ticker-slide.is-leaving{opacity:0;transform:translateX(-22%)}

/* 1.10.220: de eerste slide is de actie zelf — "Win €150 kerstspeciaal" —
   en die is aanklikbaar naar /kerst-tegoed.html. */
.kerst-gem-ticker-cta{
  /* De balk is in beide thema's crème, dus de link houdt de eigen donkerbruine
     kleur: hij moet niet als los blauw linkje in de balk hangen (#5b4218 op
     #fdf7e6 = 7,4:1). */
  color:#5b4218!important;font-weight:800;text-decoration:none;
  border-bottom:1px solid rgba(169,116,0,.55);padding-bottom:1px;
}
html[data-theme="dark"] .kerst-gem-ticker-cta{color:#ffd479!important}
.kerst-gem-ticker-cta:hover,.kerst-gem-ticker-cta:focus{text-decoration:underline}
.kerst-gem-ticker-cta:focus-visible{outline:2px solid #8a6200;outline-offset:2px;border-radius:4px}

@media(max-width:600px){
  .kerst-gem-ticker{height:32px;font-size:.82rem}
  html.kerst-gem-ticker-open .top{top:32px}
  .kerst-gem-ticker-slide{padding:0 10px}
}
/* Respecteer de systeeminstelling: geen beweging, en de slideshow stopt in js. */
@media(prefers-reduced-motion:reduce){
  .kerst-gem-ticker{animation:none;transform:none;opacity:1}
  .kerst-gem-ticker-slide{transition:none}
}

/* 1.10.220 KERSTGEM-UITLEG: naast de slideshow staat op de homepage wat de
   prijs wel en niet is — vrijwillig weggegeven, niet gesponsord, geen donatie. */
.kerst-gem-note{margin:0 0 26px;padding:16px 18px;border-radius:14px;border:1px solid rgba(169,116,0,.30);background:#fdf7e6;color:#5b4218}
.kerst-gem-note[hidden]{display:none}
/* 1.10.220: ook het kerstgem-blok volgt nu het donkere thema in plaats van
   als licht paneel in dark mode te blijven staan. */
html[data-theme="dark"] .kerst-gem-note{border-color:rgba(246,201,69,.35);background:#1a1408;color:#f3e4c3}
.kerst-gem-note h2{margin:0 0 6px;font-size:1.05rem;color:#5b4218}
html[data-theme="dark"] .kerst-gem-note h2{color:#ffe6a8}
.kerst-gem-note-winner{margin:0 0 8px;font-weight:700}
.kerst-gem-note-small{margin:0;font-size:.86rem;line-height:1.55;color:#6d5426}
html[data-theme="dark"] .kerst-gem-note-small{color:#e2cf9f}
html[data-theme="dark"] .kerst-gem-note-days{border-top-color:rgba(246,201,69,.35)}
html[data-theme="dark"] .kerst-gem-note a{color:#ffd479}
.kerst-gem-note strong{font-weight:800}
.kerst-gem-note-days{margin-top:8px;padding-top:8px;border-top:1px dashed rgba(169,116,0,.35);font-style:italic}

/* 1.10.220 HET STEENTJE: klein, grijs en bijna onopvallend in de footer. Wie het
   ziet en aanklikt, krijgt het vondstformulier. */
.kerst-gem-stone{display:inline-block;width:20px;height:13px;margin:8px 4px 0;padding:0;border:0;border-radius:52% 48% 46% 54%;
  background:radial-gradient(circle at 35% 28%,#dbe3ec,#9aa8b8 62%,#66717f);opacity:.32;cursor:pointer;
  transition:opacity .2s ease,transform .2s ease}
.kerst-gem-stone.kg-float{position:fixed;z-index:65;margin:0}
.kg-prijs{margin:6px 0 12px;padding:10px 12px;border-radius:10px;border:1px solid rgba(169,116,0,.3);background:#fdf7e6;color:#5b4218;font-size:.92rem}
/* 1.10.220: mobiel — het steentje-venster past binnen het scherm en de
   akkoordvakjes zijn groot genoeg om met een duim te raken. */
.kg-akkoord input{width:20px;height:20px;flex:0 0 auto}
.kg-akkoord{min-height:44px;align-items:center}
@media (max-width:520px){
  .kg-modal{padding:8px}
  .kg-box{max-height:90vh;overflow:auto}
  .kg-box{padding:16px}
  .kg-box h2{font-size:1.05rem}
}
html[data-theme="dark"] .kg-prijs{background:#141b26;border-color:rgba(255,214,120,.28);color:#ffe4b0}
html[data-theme="dark"] .kerst-gem-stone{opacity:.38;background:radial-gradient(circle at 35% 28%,#9fb0c4,#63728a 62%,#3b4655)}

/* Het vondstformulier in een eigen venster. */
.kg-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(9,14,22,.58);z-index:9999}
.kg-box{position:relative;width:min(560px,100%);max-height:92vh;overflow:auto;padding:22px 22px 18px;border-radius:16px;
  border:1px solid rgba(169,116,0,.35);background:#fffdf7;color:#40300f;box-shadow:0 30px 80px rgba(0,0,0,.38)}
.kg-box h2{margin:0 0 8px;font-size:1.2rem;color:#5b4218}
.kg-close{position:absolute;top:10px;right:12px;border:0;background:none;font-size:1.5rem;line-height:1;color:#8a7440;cursor:pointer}
.kg-box label{display:block;margin:10px 0 0;font-weight:700;font-size:.9rem}
.kg-box input[type=text],.kg-box input[type=email],.kg-box input:not([type]),.kg-box textarea{display:block;width:100%;margin-top:4px;
  padding:9px 10px;border:1px solid #d8cba8;border-radius:9px;background:#fff;font:inherit;color:#2b2415}
.kg-box fieldset{margin:12px 0 0;padding:10px 12px;border:1px solid #e2d7b6;border-radius:11px}
.kg-box legend{padding:0 6px;font-weight:800;font-size:.88rem}
.kg-keuze{display:flex;gap:9px;align-items:flex-start;margin:6px 0;font-weight:500}
.kg-keuze small{display:block;font-weight:400;color:#7a6533}
.kg-akkoord{display:flex;gap:8px;align-items:flex-start;font-weight:600}
.kg-voorwaarden{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:#fbf1d8;font-size:.83rem;line-height:1.55;color:#6a5320}
.kg-code{margin:10px 0;padding:10px;border-radius:10px;background:#f3e7c6;color:#5b4218;font:700 1rem "Courier New",monospace;text-align:center;letter-spacing:.06em}
html[data-theme="dark"] .kg-code{background:#10161f;color:#ffd88a}
html.kg-open{overflow:hidden}
@media (max-width:560px){.kg-box{padding:18px 16px 14px}.kg-akkoord{font-size:.86rem}}