/* Cadeau kopen (/cadeaubon, /en/gift-card), ontwerp 12/10.
   Het kaartje en de envelop komen uit gift-object.css: hetzelfde object als op de openingspagina, de mail en de bewaarde afbeelding.
   Olijf als podium, wit kaartje, envelop in iced matcha. Geen crème of beige, geen papierkorrel, geen geforceerde kleine letters.
   Uitleg op olijf staat in wit en op minstens 13,5 px; wat je moet kunnen lezen staat op wit. */
.gift-page .header{position:fixed;left:0;right:0}
.gift-page .header.scrolled{box-shadow:none}
.gift-page .cookie,.gift-page .sticky-cta{display:none!important}
.gift-stage{position:relative;min-height:100vh;min-height:100svh;color:#fff;background:var(--olive);overflow:hidden;display:flex;flex-direction:column}
.gift-stage .halo{position:absolute;opacity:.7}
.gift-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(70% 55% at 50% 30%,rgba(215,230,194,.14),rgba(145,147,72,0) 65%)}
.gift-scene{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;padding-top:var(--hdr)}
@media (min-width:901px){
  .gift-scene{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-rows:1fr auto;column-gap:clamp(40px,6vw,96px);align-items:center;width:100%;max-width:1180px;margin:0 auto;padding:calc(var(--hdr) + 32px) var(--pad) 36px}
  .gift-stage.s4 .steps{grid-column:1/-1;width:100%;max-width:560px;margin:0 auto}
}

/* site.css heeft nog regels voor .gcard en .gcard-to uit een vroeger ontwerp (sticky met top:98px, crème, grijze naam).
   Geen enkele pagina gebruikt ze nog, maar ze raken het nieuwe kaartje; hier zetten we ze terug (lage specificiteit). */
:where(.gift-page) .gcard{top:auto;display:block;padding:0;gap:0;max-width:none;background:var(--g-card);color:var(--g-ink)}
:where(.gift-page) .gcard-to{color:var(--g-ink)}

/* ---------- Het kaartje bovenaan: schrijft live mee, kantelt mee met muis of gsm ---------- */
.cardwrap{position:relative;display:flex;flex-direction:column;align-items:center;padding:20px 24px 4px;perspective:1200px;animation:g-kaart-in .7s var(--ease) both}
.cardwrap .gcard{width:min(342px,100%);box-shadow:var(--g-shadow);transition:transform .5s var(--ease);will-change:transform}
.cardwrap .gcard.is-tik{animation:g-tik .6s var(--ease)}
.k-letter{width:min(342px,100%);min-height:calc(18px * 1.38 * 2);margin:18px 0 0;font-family:var(--g-serif);font-style:italic;font-weight:400;font-size:18px;line-height:1.38;color:#fff;text-wrap:pretty;overflow-wrap:anywhere;white-space:pre-line}
.k-letter .cur{display:inline-block;width:1px;height:1em;background:#fff;vertical-align:-2px;margin-left:1px;animation:g-cursor 1s steps(2) infinite}
@keyframes g-cursor{50%{opacity:0}}
@keyframes g-kaart-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes g-tik{40%{transform:translateY(-6px) rotate(-.8deg)}}
.gift-stage.s4 .cardwrap{display:none}
/* Op de gsm eerst de kop en de momenten: geen leeg kaartje bovenaan. */
@media (max-width:900px){.gift-stage[data-step="0"] .cardwrap{display:none}}
@media (min-width:901px){
  .cardwrap{grid-row:1;grid-column:2;padding:0}
  .cardwrap .gcard,.k-letter{width:min(420px,100%)}
  .k-letter{font-size:20px;min-height:calc(20px * 1.38 * 2)}
}
/* Op het kaartje van de koper is de code er nog niet. */
.gcard-code b.is-later{font-size:13px;font-size:3.9cqw;font-weight:600;letter-spacing:0;color:var(--g-ink-3)}

/* ---------- Stappen ---------- */
.steps{position:relative;display:grid;padding:16px 24px 20px;min-width:0}
@media (min-width:901px){.steps{grid-row:1;grid-column:1;padding:0}}
.gstep{grid-area:1/1;min-width:0;display:flex;flex-direction:column;gap:16px;opacity:0;visibility:hidden;transform:translateX(24px);pointer-events:none;
  transition:opacity .55s var(--ease),transform .55s var(--ease),visibility 0s linear .55s}
.gstep.on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.gstep.out{transform:translateX(-24px)}
.gstep h1,.gstep h2{font-size:clamp(28px,7.4vw,44px);line-height:1.04;color:#fff}
.gstep .lede{font-size:clamp(17px,4.4vw,20px);color:#fff}
/* Kicker met het punt uit "oaas." */
.gq{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.gq::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--matcha)}
.intro-line{font-size:16.5px;line-height:1.45;color:#fff;margin:-4px 0 4px}
.gift-disc{margin:2px 0 0;font-family:var(--sans);font-size:13.5px;font-weight:500;line-height:1.5;color:#fff}

/* ---------- Momenten: fotokaarten, radius 3px, geen schaduw ---------- */
.moments{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -24px;padding:2px 24px 12px;scroll-padding:0 24px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.moments::-webkit-scrollbar{display:none}
@media (min-width:901px){.moments{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;overflow:visible}}
.moment{position:relative;flex:0 0 74%;scroll-snap-align:start;aspect-ratio:4/3.5;overflow:hidden;border-radius:3px;background:var(--olive-dark);text-align:left;color:#fff;
  transition:transform .14s var(--ease);-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
@media (min-width:901px){.moment{flex:none;aspect-ratio:4/3.6}}
.moment:active{transform:scale(.985)}
.moment img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.moment .m-in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:16px;background:linear-gradient(180deg,rgba(31,32,21,0) 34%,rgba(31,32,21,.74) 100%)}
/* enkel de titel van de tegel: het kleine kaartje op de tegel Cadeaukaart houdt zijn eigen letters (Archivo, zoals het grote) */
.moment .m-in>b{font-family:var(--sans);font-weight:600;font-size:17px;letter-spacing:-.01em;line-height:1.2}
.moment .m-in>span{font-size:15px;line-height:1.3;color:#fff}
.moment em{margin-top:4px;font-style:normal;font-family:var(--sans);font-weight:600;font-size:13.5px;color:#fff}
/* Gekozen: een matcha rand van 2px en een vinkje */
.moment::after{content:"";position:absolute;inset:0;z-index:2;border-radius:3px;box-shadow:inset 0 0 0 2px var(--matcha);opacity:0;transition:opacity .2s var(--ease);pointer-events:none}
.moment.on::after{opacity:1}
.moment .m-check{position:absolute;top:12px;right:12px;z-index:3;width:28px;height:28px;border-radius:50%;background:var(--matcha);display:flex;align-items:center;justify-content:center;transform:scale(0);transition:transform .3s var(--ease)}
.moment .m-check svg{width:17px;height:17px}
.moment.on .m-check{transform:scale(1)}
.moment:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* De tegel "Cadeaukaart" toont het witte kaartje in het klein */
.moment.vrij .m-in{background:none}
.m-mini{position:absolute;inset:0;display:block;overflow:hidden}
.m-rings{position:absolute;left:50%;top:38%;width:150%;transform:translate(-50%,-50%);pointer-events:none}
.m-mini .gcard{display:block;position:absolute;left:50%;top:15%;width:60%;transform:translateX(-50%) rotate(-3deg);box-shadow:0 1px 2px rgba(31,32,21,.18),0 16px 26px -16px rgba(31,32,21,.75);transition:transform .45s var(--ease)}
.m-mini .gcard-amt:empty::before{content:"€";opacity:.28}
@media (hover:hover){
  .moment:hover img{transform:scale(1.04)}
  .moment.vrij:hover .m-mini .gcard{transform:translateX(-50%) rotate(-1deg) translateY(-3px)}
}
.moment.vrij.on .m-mini .gcard{transform:translateX(-50%) rotate(0deg)}

/* Bedrag voor de cadeaukaart */
.g-bedrag{display:flex;flex-direction:column;gap:8px}
.g-bedrag-l{font-family:var(--sans);font-size:13.5px;font-weight:600;color:#fff}
.g-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (min-width:901px){.g-chips{grid-template-columns:repeat(6,minmax(0,1fr))}}
.g-chip{min-height:46px;padding:0 6px;border:1px solid rgba(255,255,255,.55);border-radius:2px;font-family:var(--sans);font-size:14.5px;font-weight:600;font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .12s var(--ease);user-select:none;-webkit-user-select:none}
.g-chip:active{transform:translateY(1px)}
.g-chip.on{background:var(--matcha);border-color:var(--matcha);color:var(--ink)}

/* ---------- Waarom ---------- */
.whys{display:flex;flex-wrap:wrap;gap:10px}
.gift-stage .why{display:inline-flex;background:transparent;box-shadow:none;letter-spacing:0;text-transform:none;cursor:pointer;align-items:center;min-height:48px;padding:0 18px;border:1px solid rgba(255,255,255,.55);border-radius:2px;font-family:var(--sans);font-size:14.5px;font-weight:600;color:#fff;
  transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .12s var(--ease);user-select:none;-webkit-user-select:none}
.gift-stage .why:active{transform:translateY(1px)}
.gift-stage .why.on{background:var(--matcha);border-color:var(--matcha);color:var(--ink)}

/* ---------- Velden: label erboven, wit veld, 16px (geen inzoomen op iOS) ---------- */
.gfield{display:flex;flex-direction:column;gap:7px;min-width:0}
.gfield label{font-family:var(--sans);font-size:13.5px;font-weight:600;line-height:1.3;color:#fff}
.gfield small{font-family:var(--sans);font-size:13.5px;font-weight:500;line-height:1.45;color:#fff}
.gstep .input{width:100%;min-height:52px;background:#fff;border:1px solid #fff;border-radius:2px;padding:12px 14px;color:var(--ink);font-family:var(--sans);font-size:16px;font-weight:500;box-shadow:none;-webkit-appearance:none;appearance:none}
.gstep .input::placeholder{color:var(--ink-3);opacity:1}
.gstep .input:focus{outline:none;border-color:var(--olive-ink);box-shadow:0 0 0 3px rgba(215,230,194,.8)}
.gstep textarea.input{min-height:104px;resize:vertical;font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.4}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}

/* Knoppen op het podium: strak, en in hun eigen schrijfwijze (de algemene .btn zet alles in kleine letters) */
.gift-stage .btn{min-height:52px;font-size:14.5px;letter-spacing:.01em;text-transform:none}
.gift-stage .btn[disabled]{opacity:.45}
/* Op een gsm blijft :hover na een tik hangen: daar geen hoverkleur. */
@media (hover:none){.gift-stage .btn-white:hover{background:var(--pri-bg)}}

/* ---------- Navigatie onderaan ---------- */
.gnav{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 24px calc(16px + env(safe-area-inset-bottom))}
@media (min-width:901px){.gnav{grid-row:2;grid-column:1/-1;padding:24px 0 0}}
.dots{display:flex;gap:8px}
.dots i{width:7px;height:7px;border-radius:50%;background:rgba(215,230,194,.4);transition:all .3s var(--ease)}
.dots i.on{width:22px;border-radius:4px;background:var(--matcha)}
.gback{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-family:var(--sans);font-size:13.5px;font-weight:600;color:#fff;user-select:none;-webkit-user-select:none;transition:opacity .15s}
.gback svg{width:15px;height:15px}
.gback:active{opacity:.7}
.gback[hidden]{visibility:hidden;display:inline-flex}
.gift-stage.is-paid [data-back]{visibility:hidden;pointer-events:none}

/* ---------- Stap 3: de open envelop, het kaartje schuift erin ---------- */
.g-send{display:grid;justify-items:center;align-items:center}
.g-send>*{grid-area:1/1}
.env{--ew:min(342px,calc(100vw - 48px));position:relative;z-index:1;width:var(--ew);margin:calc(var(--ew) * .43) 0 4px}
/* Desktop: de envelop iets kleiner en de vier betaalknoppen op één rij, zodat ze op 1280x800 en 1366x768 alle vier in beeld staan. */
@media (min-width:901px){.env{--ew:360px}}
.env .genv{cursor:default}
.env .genv-seal{pointer-events:none}
/* vóór het insteken: boven de envelop, onzichtbaar */
.gift-stage .env .genv.is-open .gcard{opacity:0;transform:translateY(-118%);transition:transform .9s cubic-bezier(.2,.75,.2,1),opacity .45s var(--g-ease)}
.gift-stage .env.is-in .genv.is-open .gcard{opacity:1;transform:translateY(-70%)}
/* De onderste rij (code, geldig tot) zit in het voorvak: half zichtbare letters in de V van de envelop ogen rommelig. */
.env .gcard-bot{visibility:hidden}

/* Betaald: kaartje helemaal erin, klep dicht, zegel drukt (0,5 s), de envelop vertrekt in een kleine boog (0,9 s) */
.gift-stage .env.closed .genv.is-open .gcard{opacity:1;transform:translateY(0);transition:transform .5s cubic-bezier(.4,0,.2,1)}
.gift-stage .env.closed .genv.is-open .genv-flap{transform:rotateX(0deg);z-index:5;transition:transform .6s cubic-bezier(.55,0,.25,1) .4s,z-index 0s linear .7s}
.gift-stage .env.closed .genv.is-open .genv-seal{opacity:1;transform:translate(-50%,-50%);animation:g-druk .5s cubic-bezier(.3,1.4,.5,1) 1.05s both;transition:none}
.gift-stage .env.closed{animation:g-weg-x .9s cubic-bezier(.55,0,.85,.35) 1.75s forwards}
.gift-stage .env.closed .genv{animation:g-weg-y .9s cubic-bezier(.2,.65,.35,1) 1.75s forwards}
@keyframes g-druk{0%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}60%{opacity:1;transform:translate(-50%,-50%) scale(.93)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes g-weg-x{to{transform:translateX(110px)}}
@keyframes g-weg-y{0%{transform:none;opacity:1}55%{opacity:1}100%{transform:translateY(-190px) rotate(-8deg) scale(.84);opacity:0}}

/* Betalen */
.paybox{display:flex;flex-direction:column;gap:14px}
.paybox[hidden]{display:none}
.pay-note{margin:0;font-family:var(--sans);font-size:15px;font-weight:500;line-height:1.45;color:#fff;text-align:center}
.pay-note b{font-weight:700;font-variant-numeric:tabular-nums}
.payrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:901px){.payrow{grid-template-columns:repeat(4,minmax(0,1fr))}}
.payrow .btn{padding:0 10px}
.paywait{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px;padding:10px 0;border-top:1px solid rgba(255,255,255,.3);border-bottom:1px solid rgba(255,255,255,.3);font-family:var(--sans);font-size:14px;font-weight:500;line-height:1.4;color:#fff}
.paywait[hidden],.payerr[hidden]{display:none}
.paywait-t{flex:1 1 200px}
.paywait-k{display:flex;gap:18px}
.paywait .gback{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.spin{flex:none;width:16px;height:16px;border-radius:50%;border:2px solid rgba(215,230,194,.35);border-top-color:var(--matcha);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.payerr{padding:12px 14px;border-left:2px solid #fff;background:rgba(31,32,21,.22);font-family:var(--sans);font-size:14px;font-weight:500;line-height:1.45;color:#fff}

/* Betaald: "Stap 3 van 3 / Versturen." klopt dan niet meer. Ze verdwijnen zacht op het moment dat de bevestiging verschijnt
   (na de vlucht van de envelop), zodat er onderweg niets verspringt. De bevestiging heeft haar eigen kop. */
.gift-stage.is-paid .g-step3>.gq,.gift-stage.is-paid .g-step3>h2{overflow:hidden;max-height:160px;animation:g-kop-weg .4s var(--ease) 2.45s forwards}
@keyframes g-kop-weg{to{opacity:0;max-height:0;margin-bottom:-16px}}

/* Na betalen: een bevestiging met haarlijnen, zonder kader. paid() vult .done-box; klaar() in gift.js zet de tekst. */
.done-box{display:none;width:100%;align-self:start;margin-top:8px}
.done-box.show{display:block;animation:g-klaar .7s var(--ease) 2.5s both}
@keyframes g-klaar{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.g-done{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:22px 0;border-top:1px solid rgba(255,255,255,.3);border-bottom:1px solid rgba(255,255,255,.3)}
.g-done-k{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.g-done-k i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--matcha);color:var(--ink)}
.g-done-k svg{width:14px;height:14px}
.g-done-h{margin:0;font-size:clamp(24px,6.4vw,32px);line-height:1.1;color:#fff}
.g-done-t{margin:0;font-family:var(--sans);font-size:15px;font-weight:500;line-height:1.55;color:#fff;overflow-wrap:anywhere}
.g-done-t b{font-weight:700}
.g-done-a{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:2px;font-family:var(--sans);font-size:14.5px;font-weight:700;color:#fff;border-bottom:1px solid rgba(255,255,255,.62)}
.g-done-a svg{width:14px;height:14px;transition:transform .18s var(--ease)}

@media (hover:hover){
  .gift-stage .why:hover,.g-chip:hover{border-color:#fff;background:rgba(255,255,255,.07)}
  .gift-stage .why.on:hover,.g-chip.on:hover{background:var(--matcha);border-color:var(--matcha)}
  .gback:hover span,.paywait .gback:hover{text-decoration:underline;text-underline-offset:3px}
  .g-done-a:hover{border-bottom-color:#fff}
  .g-done-a:hover svg{transform:translateX(3px)}
}

@media (prefers-reduced-motion:reduce){
  .cardwrap,.cardwrap .gcard.is-tik{animation:none}
  .gstep,.cardwrap .gcard,.moment,.moment img,.m-mini .gcard{transition:none!important}
  .gift-stage .env .genv.is-open .gcard,.gift-stage .env.closed .genv.is-open .gcard,.gift-stage .env.closed .genv.is-open .genv-flap{transition:none!important}
  .gift-stage .env.closed .genv.is-open .genv-seal{animation:none}
  .gift-stage .env.closed{display:none}
  .done-box.show{animation:none}
  .gift-stage.is-paid .g-step3>.gq,.gift-stage.is-paid .g-step3>h2{display:none}
}