/* Kerstkaartenmaker (kaartenmaker.js) — bouwt voort op de stijlen van .ai uit het ontwerp */
/* altijd staand (A6), ook leeg en tijdens het maken: geen gat naast of onder de kaart */
.kk .kk__canvas { aspect-ratio: 105 / 148; min-height: 0; padding: 0; background: var(--paper); justify-self: center; align-self: start; width: min(100%, 440px); }
.kk .kk__canvas[data-state="done"] { background: var(--paper); }
.kk__wacht { display: grid; gap: .8rem; place-items: center; text-align: center; padding: 2rem; max-width: 34ch; color: var(--ink-2); font-size: var(--s-1); }
.kk__wacht small { color: var(--ink-3); }
.kk__wacht--fout { color: var(--stop); }
.kk__wacht--fout svg { width: 28px; height: 28px; }
.kk__ster { width: 56px; height: 56px; border-radius: 50%; background: var(--gold-4); color: var(--gold-ink); display: grid; place-items: center; }
/* De kaart: staande A6-postkaart (10,5 × 14,8 cm) */

.kk__voor { width: 100%; height: 100%; object-fit: cover; display: block; }

.kk__form { display: grid; gap: 1rem; align-content: start; }
.kk__stap { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; min-width: 0; }
.kk__stap legend { padding: 0; margin-bottom: .45rem; font-weight: 700; font-size: var(--s0); color: var(--ink); }
.kk__stap legend .muted { font-weight: 400; font-size: var(--s-1); }
.kk__keuzes { display: grid; gap: .5rem; }
.kk__keuze { display: grid; gap: .15rem; text-align: left; padding: .75rem .9rem; border: 2px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); cursor: pointer; font: inherit; }
.kk__keuze span { font-size: var(--s-1); color: var(--ink-2); }
.kk__keuze:hover { border-color: var(--ink-3); }
.kk__keuze[aria-pressed="true"] { border-color: var(--action); background: var(--brand-surf); box-shadow: inset 4px 0 0 var(--action); }
.kk__upload { justify-self: start; cursor: pointer; }
.kk__foto { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }
.kk__foto img { width: 88px; height: 88px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); }
.kk__janee { display: flex; gap: .5rem; }
.kk__jn { min-width: 88px; padding: .6rem 1.1rem; border: 2px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font: inherit; font-weight: 700; cursor: pointer; }
.kk__jn:hover { border-color: var(--ink-3); }
.kk__jn[aria-pressed="true"] { border-color: var(--action); background: var(--brand-surf); box-shadow: inset 0 -3px 0 var(--action); }
.kk__privacy { display: flex; gap: .5rem; align-items: flex-start; margin: 0; font-size: var(--s-1); color: var(--ink-2); }
.kk__privacy svg { flex: none; width: 16px; height: 16px; margin-top: .15rem; }
.kk__ok { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--s-1); color: var(--ink-2); cursor: pointer; }
.kk__ok input { width: 20px; height: 20px; flex: none; margin-top: .1rem; accent-color: var(--action); }
.kk__form input[type="text"], .kk__form textarea { width: 100%; max-width: 100%; font: inherit; font-size: var(--s0); padding: .7rem .85rem; border: 2px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); resize: vertical; }
.kk__form input[type="text"]:focus, .kk__form textarea:focus { border-color: var(--action); outline: none; }
.kk__form .btn[disabled] { opacity: .5; cursor: not-allowed; }
.kk__let { display: flex; gap: .5rem; align-items: flex-start; padding: .7rem .9rem; border-radius: var(--r-sm); background: var(--warn-s); color: var(--warn); font-size: var(--s-1); }
.kk__let svg { flex: none; margin-top: .15rem; }

/* ---------- Versturen met de post: venster ---------- */
body.kkp-open { overflow: hidden; }
.kkp { position: fixed; inset: 0; z-index: 90; background: rgb(24 24 24 / .62); display: grid; place-items: center; padding: 1rem; overflow-y: auto; }
.kkp[hidden] { display: none; }
.kkp__doos { position: relative; width: min(640px, 100%); background: var(--paper); color: var(--ink); border-radius: var(--r-md); box-shadow: 0 30px 60px rgb(0 0 0 / .35); padding: clamp(1.25rem, 3vw, 2rem); display: grid; gap: .8rem; animation: kkpIn 240ms var(--ease-out) both; }
.kkp__doos h2 { font-size: var(--s2); padding-right: 2.5rem; }
.kkp__x { position: absolute; top: .75rem; right: .75rem; }
@keyframes kkpIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

.kkp__form { display: grid; gap: .8rem; }
.kkp__rij { display: grid; gap: .6rem; }
.kkp__rij--2 { grid-template-columns: 1.6fr 1fr; }
.kkp__rij--3 { grid-template-columns: 1.2fr 1fr .8fr; }
@media (max-width: 520px) { .kkp__rij--2, .kkp__rij--3 { grid-template-columns: 1fr 1fr; } }
.kkp__form label { display: grid; gap: .3rem; font-weight: 700; font-size: var(--s-1); }
.kkp__form input, .kkp__form textarea { font: inherit; font-weight: 400; font-size: var(--s0); padding: .65rem .8rem; border: 2px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); width: 100%; }
.kkp__form input:focus, .kkp__form textarea:focus { border-color: var(--action); outline: none; }
.kkp__fout { color: var(--stop); font-weight: 700; font-size: var(--s-1); }
.kkp__knoppen { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; margin-top: .4rem; }

/* omdraaibare kaart in het voorbeeld */
.kkp__kaart { justify-self: center; width: min(280px, 62vw); aspect-ratio: 105 / 148; perspective: 1600px; border: 0; padding: 0; background: none; cursor: pointer; }
/* voorkant staand; bij het omdraaien draait de kaart ook een kwartslag, zodat de achterkant liggend staat */
.kkp__in { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateZ(0deg) rotateY(0deg); transition: transform 800ms var(--ease-inout); }
.kkp__kaart.is-achter .kkp__in { transform: rotateZ(-90deg) rotateY(180deg); }
.kkp__zijde { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 4px; overflow: hidden; box-shadow: 0 12px 28px rgb(0 0 0 / .25), 0 0 0 1px rgb(0 0 0 / .08); background: #fff; }
.kkp__zijde--voor img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kkp__zijde--achter { transform: rotateY(180deg); }
/* de achterkant zelf is liggend (148 × 105) en staat een kwartslag gedraaid in het staande vak */
.kkp__achter { position: absolute; left: 50%; top: 50%; width: calc(100% * 148 / 105); height: calc(100% * 105 / 148); transform: translate(-50%, -50%) rotate(90deg);
  display: grid; grid-template-columns: 1fr 1fr; padding: 7% 6% 6%; text-align: left; color: #181818; font-size: 11px; line-height: 1.45; font-family: var(--font-ui); }
.kkp__bericht { display: grid; align-content: start; gap: .6em; padding-right: 8%; border-right: 1px solid #9a9a9a; white-space: pre-wrap; overflow-wrap: anywhere; overflow: hidden; }
.kkp__van { font-style: italic; color: #555; }
.kkp__adres { position: relative; display: grid; grid-template-rows: auto 1fr; padding-left: 8%; }
.kkp__port { justify-self: end; display: grid; justify-items: center; gap: 2px; width: 30%; padding: 4px 3px; border: 1.5px solid #181818; font-size: 7px; font-weight: 700; line-height: 1.1; letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.kkp__port img { width: 70%; height: auto; display: block; }
.kkp__regels { align-self: end; display: grid; }
.kkp__regels span { display: block; min-height: 2.1em; padding-top: .7em; border-bottom: 1px solid #9a9a9a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kkp__leeg { color: #aaa; font-style: italic; }
.kkp__wissel { justify-self: center; display: flex; gap: 2px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px; }
.kkp__wissel button { border: 0; background: none; padding: .35rem .8rem; border-radius: var(--r-sm); cursor: pointer; font: inherit; font-size: var(--s-1); color: var(--ink-2); }
.kkp__wissel button[aria-pressed="true"] { background: var(--action); color: var(--action-on); }

/* bevestigd: de kaart vliegt de envelop in, envelop sluit, vinkje */
.kkp__klaar { display: grid; gap: .8rem; text-align: center; justify-items: center; }
.kkp__scene { position: relative; width: 220px; height: 210px; overflow: hidden; }
.kkp__vlieg { position: absolute; left: 50%; top: 0; width: 96px; aspect-ratio: 105 / 148; object-fit: cover; border-radius: 3px; box-shadow: 0 8px 18px rgb(0 0 0 / .25); transform: translateX(-50%); z-index: 1; animation: kkpVlieg 1100ms var(--ease-inout) forwards; }
.kkp__envelop { position: absolute; left: 50%; bottom: 0; width: 200px; height: 120px; transform: translateX(-50%); background: var(--b100, #e8eef8); border: 2px solid var(--action); border-radius: 6px; z-index: 2; }
.kkp__envelop::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top right, transparent calc(50% - 1px), var(--action) 50%, transparent calc(50% + 1px)) left / 50% 100% no-repeat, linear-gradient(to top left, transparent calc(50% - 1px), var(--action) 50%, transparent calc(50% + 1px)) right / 50% 100% no-repeat; opacity: .35; }
.kkp__klep { position: absolute; left: -2px; right: -2px; top: -2px; height: 70px; background: var(--b200, #d5e0f2); border: 2px solid var(--action); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transform: rotateX(180deg); animation: kkpKlep 400ms 1050ms var(--ease-out) forwards; z-index: 3; }
.kkp__vink { position: absolute; right: -10px; top: -14px; width: 40px; height: 40px; border-radius: 50%; background: var(--ok, #00a03c); color: #fff; display: grid; place-items: center; transform: scale(0); animation: kkpVink 420ms 1450ms var(--ease-pop) forwards; z-index: 4; }
.kkp__vink svg { width: 22px; height: 22px; }
@keyframes kkpVlieg { 0% { top: 14px; transform: translateX(-50%) rotate(-6deg); } 45% { top: 0; transform: translateX(-50%) rotate(4deg); } 100% { top: 88px; transform: translateX(-50%) rotate(0) scale(.72); } }
@keyframes kkpKlep { to { transform: rotateX(0deg); } }
@keyframes kkpVink { to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .kkp__vlieg { animation: none; top: 88px; transform: translateX(-50%) scale(.72); } .kkp__klep { animation: none; transform: none; } .kkp__vink { animation: none; transform: none; } .kkp__in { transition: none; } }

/* ---------- Verzending: voorbeeld, bezig, klaar en het blok "Je kaart is verstuurd" ---------- */
.kkp__info { margin: 0; display: grid; gap: .35rem; font-size: var(--s-1); }
.kkp__info > div { display: grid; grid-template-columns: 8.5rem 1fr; gap: .5rem; }
.kkp__info dt { font-weight: 700; }
.kkp__info dd { margin: 0; color: var(--ink-2); }
.kkp__let { display: flex; gap: .5rem; align-items: flex-start; margin: 0; padding: .6rem .8rem; background: var(--brand-surf); font-size: var(--s-1); }
.kkp__let svg { flex: none; width: 16px; height: 16px; margin-top: .15rem; }
.kkp__bezig { display: grid; gap: .6rem; place-items: center; text-align: center; padding: 2.5rem 1rem; }
.kkp__klaar .kkp__info { text-align: left; justify-self: center; }
.kkp__route { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); font-size: var(--s-2); color: var(--ink-3); counter-reset: r; }
.kkp__route li { position: relative; padding-top: 1.4rem; text-align: center; }
.kkp__route li::before { content: ""; position: absolute; top: .3rem; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--line); z-index: 1; }
.kkp__route li + li::after { content: ""; position: absolute; top: .65rem; right: 50%; width: 100%; height: 2px; background: var(--line); }
.kkp__route li.is-klaar { color: var(--ink); font-weight: 700; }
.kkp__route li.is-klaar::before { background: var(--action); }
.kk__verzonden { display: grid; grid-template-columns: 72px 1fr; gap: .9rem; align-items: center; padding: .9rem 1rem; background: var(--brand-surf); }
.kk__verzonden img { width: 72px; aspect-ratio: 105 / 148; object-fit: cover; display: block; box-shadow: 0 2px 8px #0002; }
.kk__verzonden > div { display: grid; gap: .15rem; font-size: var(--s-1); color: var(--ink-2); }
.kk__verzonden > div > b { display: flex; gap: .4rem; align-items: center; color: var(--ink); font-size: var(--s0); }
.kk__verzonden svg { width: 18px; height: 18px; color: var(--action); }
.kk .spin, .kkp__bezig .spin { width: 36px; height: 36px; border: 3px solid var(--line); border-top-color: var(--action); border-radius: 50%; animation: kkpDraai .8s linear infinite; }
@keyframes kkpDraai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kk .spin, .kkp__bezig .spin { animation-duration: 2.4s; } }
/* "Foto kiezen" is een label met een verborgen bestandsveld: focusrand op het label tonen */
.kk__upload:focus-within { outline: 3px solid var(--focus, #181818); outline-offset: 2px; }
.kk__wacht--fout:focus { outline: 3px solid var(--focus, #181818); outline-offset: -3px; }