/* Koopjeserver.nl - aanvullende stijl voor de dynamische onderdelen van het nieuwe ontwerp
   (winkelwagen-teller, accountmenu, geanimeerde mascotte, formulieren, meldingen).
   Kleuren en vormen volgen het design system uit AI-INFO.md. */

.ks-site { overflow-x: clip; }
.ks-site img { max-width: 100%; }

/* Winkelwagen-teller in de header */
.ks-cart-aantal {
  position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box;
  border-radius: 999px; background: #7D3CEE; color: #FFFFFF; font-size: 12px; font-weight: 800; line-height: 20px; text-align: center;
  box-shadow: 0 2px 0 #5B27B8;
}

/* Accountmenu (ingelogd) */
.ks-account-menu { position: relative; }
.ks-account-menu > summary::-webkit-details-marker { display: none; }
.ks-account-menu > summary::marker { content: ''; }
.ks-account-dropdown {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 50; min-width: 220px;
  background: #FFFFFF; border: 1px solid #E4DAFB; border-radius: 16px; box-shadow: 0 12px 32px rgba(31, 17, 71, 0.14);
  padding: 8px; display: flex; flex-direction: column;
}
.ks-account-dropdown a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 12px; border-radius: 10px;
  color: #1F1147; text-decoration: none; font-size: 15px; font-weight: 800;
}
.ks-account-dropdown a:hover { background: #F4EFFF; color: #7D3CEE; }
.ks-account-dropdown .ks-uitloggen { color: #C2304A; border-top: 1px solid #F1EBFE; border-radius: 0 0 10px 10px; margin-top: 4px; }
.ks-badge-teller {
  display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box;
  border-radius: 999px; background: #FFC83D; color: #1F1147; font-size: 12px; font-weight: 800;
}
@media (max-width: 760px) {
  .ks-account-menu { width: 100%; }
  .ks-account-menu > summary { width: 100%; box-sizing: border-box; justify-content: center; }
  .ks-account-dropdown { position: static; margin-top: 8px; box-shadow: none; }
}

/* Geanimeerde mascotte
   Opbouw: <span class="ks-mascotte-scene"> <img origineel> <span class="ks-mascotte"> <img mascotte> <img knipper> </span> </span>
   Het poppetje veert vanaf zijn voeten (squash & stretch; hij wordt alleen groter, nooit kleiner, zodat er niets van de
   achtergrond vrijkomt) en knippert af en toe met zijn ogen. Bij "verminderde beweging" staat hij stil. */
.ks-mascotte-scene { position: relative; display: block; }
.ks-mascotte-scene > img { display: block; width: 100%; height: auto; }
.ks-mascotte { position: absolute; display: block; transform-origin: 50% 100%; pointer-events: none; }
.ks-mascotte img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ks-mascotte .ks-knipper { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .ks-mascotte { animation: ks-veer 3.2s cubic-bezier(.45, 0, .55, 1) infinite; }
  .ks-mascotte .ks-knipper { animation: ks-knipper 4.6s steps(1, end) infinite; }
}
@keyframes ks-veer {
  0%, 62%, 100% { transform: scale(1, 1); }
  12% { transform: scale(1.05, 1); }
  26% { transform: scale(1, 1.1); }
  38% { transform: scale(1.03, 1.01); }
  48% { transform: scale(1, 1.04); }
}
/* Variant waarbij de mascotte op een plaatje is gezet waar hij zelf niet in staat (grasblok): echte sprong + schaduw */
.ks-mascotte-schaduw { position: absolute; display: block; border-radius: 50%; background: rgba(31, 17, 71, 0.28); filter: blur(1.5px); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .ks-mascotte.ks-mascotte--hop { animation: ks-hop 2.6s cubic-bezier(.45, 0, .55, 1) infinite; }
  .ks-mascotte-schaduw { animation: ks-hop-schaduw 2.6s cubic-bezier(.45, 0, .55, 1) infinite; }
}
@keyframes ks-hop {
  0%, 70%, 100% { transform: translateY(0) scale(1, 1); }
  10% { transform: translateY(0) scale(1.06, 0.94); }
  30% { transform: translateY(-16%) scale(0.97, 1.05); }
  42% { transform: translateY(-18%) scale(1, 1); }
  58% { transform: translateY(0) scale(1.05, 0.95); }
  64% { transform: translateY(0) scale(0.99, 1.01); }
}
@keyframes ks-hop-schaduw {
  0%, 70%, 100% { transform: scale(1); opacity: 1; }
  10% { transform: scale(1.08); opacity: 1; }
  30%, 42% { transform: scale(0.7); opacity: 0.55; }
  58% { transform: scale(1.06); opacity: 1; }
}
@keyframes ks-knipper {
  0% { opacity: 0; }
  90% { opacity: 1; }
  93% { opacity: 0; }
  96% { opacity: 1; }
  98% { opacity: 0; }
}

/* Meldingen (fouten/succes) in formulieren en winkelwagen */
.ks-melding { border-radius: 14px; padding: 14px 16px; font-size: 15px; font-weight: 700; line-height: 1.5; margin: 0 0 16px; }
.ks-melding-fout { background: #FFF0F2; border: 1px solid #F6C5CF; color: #8E1F35; }
.ks-melding-ok { background: #EAF8EF; border: 1px solid #BFE8CC; color: #155C2E; }
.ks-melding-info { background: #F4EFFF; border: 1px solid #E4DAFB; color: #1F1147; }

/* Formulieren in de stijl van het ontwerp */
.ks-veld { display: flex; flex-direction: column; gap: 6px; }
.ks-veld label { font-size: 14px; font-weight: 800; color: #1F1147; }
.ks-input {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px 14px; border: 1px solid #D9C8FC; border-radius: 12px;
  background: #FFFFFF; color: #1F1147; font: inherit; font-size: 16px;
}
.ks-input:focus { outline: 3px solid rgba(125, 60, 238, 0.35); outline-offset: 1px; border-color: #7D3CEE; }
.ks-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 13px 22px; box-sizing: border-box;
  border: 0; border-radius: 12px; background: #7D3CEE; color: #FFFFFF; font: inherit; font-size: 16px; font-weight: 800;
  text-decoration: none; cursor: pointer; box-shadow: 0 4px 0 #5B27B8;
}
.ks-knop:hover { background: #6E2FE0; color: #FFFFFF; }
.ks-knop:active { transform: translateY(2px); box-shadow: 0 2px 0 #5B27B8; }
.ks-knop[disabled] { opacity: .6; cursor: not-allowed; }
.ks-knop-licht { background: #FFFFFF; color: #1F1147; border: 1px solid #E4DAFB; box-shadow: 0 4px 0 #E4DAFB; }
.ks-knop-licht:hover { background: #F4EFFF; color: #1F1147; }

/* Rich-text inhoud uit de database (blogs, tutorials, voorwaarden) */
.ks-prose { font-size: 17px; line-height: 1.75; color: #4B4366; overflow-wrap: anywhere; }
.ks-prose > :first-child { margin-top: 0; }
.ks-prose h2, .ks-prose h3, .ks-prose h4 { color: #1F1147; line-height: 1.25; margin: 1.6em 0 .5em; }
.ks-prose h2 { font-family: 'Lilita One', 'Arial Rounded MT Bold', sans-serif; font-weight: 400; font-size: clamp(26px, 3vw, 32px); }
.ks-prose h3 { font-size: 21px; font-weight: 800; }
.ks-prose h4 { font-size: 18px; font-weight: 800; }
.ks-prose p { margin: 0 0 1em; }
.ks-prose a { color: #7D3CEE; font-weight: 700; }
.ks-prose img { max-width: 100%; height: auto; border-radius: 14px; border: 1px solid #E4DAFB; }
.ks-prose ul, .ks-prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.ks-prose li { margin: .3em 0; }
.ks-prose code { background: #F4EFFF; color: #5B27B8; padding: 2px 6px; border-radius: 6px; font-size: .92em; }
.ks-prose pre { background: #1F1147; color: #EDE6FF; padding: 16px 18px; border-radius: 14px; overflow-x: auto; font-size: 14px; line-height: 1.6; }
.ks-prose pre code { background: none; color: inherit; padding: 0; }
.ks-prose blockquote { margin: 0 0 1em; padding: 12px 18px; border-left: 4px solid #7D3CEE; background: #F6F2FF; border-radius: 0 12px 12px 0; }
.ks-prose table { width: 100%; border-collapse: collapse; margin: 0 0 1em; font-size: 15px; }
.ks-prose th, .ks-prose td { border: 1px solid #E4DAFB; padding: 8px 10px; text-align: left; }
.ks-prose th { background: #F6F2FF; color: #1F1147; }
.ks-prose iframe { max-width: 100%; border: 0; border-radius: 14px; }

/* Levende hero (homepage-eiland): stromend water, wapperende boom en vlag, drijvende wolken, zwevende eilandjes.
   Lagen en posities: config/ks/hero.php. */
.ks-hero-laag { position: absolute; display: block; pointer-events: none; }
.ks-hero-water { position: absolute; display: block; overflow: hidden; pointer-events: none; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.ks-hero-water-strepen { position: absolute; left: 0; top: -100%; width: 100%; height: 200%; display: block;
  background-image: linear-gradient(170deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.6) 48%, rgba(255, 255, 255, 0) 56%, rgba(255, 255, 255, 0) 100%);
  background-size: 100% 10%; mix-blend-mode: soft-light; opacity: 0.95; }
.ks-hero-kruin { transform-origin: 50% 100%; }
.ks-hero-vlag { transform-origin: 0% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .ks-hero-water-strepen { animation: ks-water 6s linear infinite; }
  .ks-hero-kruin { animation: ks-kruin 4.8s ease-in-out infinite; }
  .ks-hero-vlag { animation: ks-vlag 2.2s ease-in-out infinite; }
  .ks-hero-wolk-1 { animation: ks-wolk 17s ease-in-out infinite; }
  .ks-hero-wolk-2 { animation: ks-wolk 23s ease-in-out -6s infinite; }
  .ks-hero-wolk-3 { animation: ks-wolk-r 20s ease-in-out -3s infinite; }
  .ks-hero-zweef-1 { animation: ks-zweef 6s ease-in-out infinite; }
  .ks-hero-zweef-2 { animation: ks-zweef 7.5s ease-in-out -2.5s infinite; }
}
@keyframes ks-water { from { transform: translateY(0); } to { transform: translateY(50%); } }
@keyframes ks-kruin { 0%, 100% { transform: rotate(0deg) skewX(0deg); } 30% { transform: rotate(0.7deg) skewX(-0.5deg); } 65% { transform: rotate(-0.4deg) skewX(0.3deg); } }
@keyframes ks-vlag { 0%, 100% { transform: skewY(0deg) scaleX(1); } 25% { transform: skewY(-4deg) scaleX(0.97); } 50% { transform: skewY(2deg) scaleX(1); } 75% { transform: skewY(-2deg) scaleX(0.985); } }
@keyframes ks-wolk { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(14%); } }
@keyframes ks-wolk-r { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-10%); } }
@keyframes ks-zweef { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5%); } }