/* CO Koffie — lead-formulier (Sven-banner). Namespace .cok-form. */
.cok-form{
  --ink:#2C1B0E; --soft:#8C7660; --espresso:#231509; --cream:#F4EADB;
  --gold:#CDA255; --gold-deep:#B07F33; --line:rgba(44,27,14,.14);
  --head:'Gilmer','Montserrat',system-ui,sans-serif;
  font-family:'Montserrat',system-ui,sans-serif; -webkit-font-smoothing:antialiased;
  max-width:470px;
}
.cok-form *{box-sizing:border-box;}

/* Honeypot volledig verbergen voor mensen, leesbaar voor bots. */
.cok-hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden;}

.cok-form__card{position:relative; background:#FDFAF4; border:1px solid rgba(205,162,85,.3); border-radius:20px;
  padding:clamp(20px,2.6vw,26px); box-shadow:0 30px 70px -34px rgba(44,27,14,.55), 0 2px 10px -6px rgba(44,27,14,.2);
  overflow:hidden; transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);}
@supports (mask-composite:exclude) or (-webkit-mask-composite:xor){
  .cok-form__card{border-color:transparent;}
  .cok-form__card::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px; z-index:2; pointer-events:none;
    background:linear-gradient(135deg, rgba(205,162,85,.6), rgba(205,162,85,.12) 40%, rgba(176,124,60,.55));
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;}
}
.cok-form__card::after{content:""; position:absolute; top:-70px; right:-70px; width:220px; height:220px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(205,162,85,.14), transparent 64%);}

/* Head met Sven */
.cok-form__head{display:flex; align-items:center; gap:13px; margin-bottom:18px;}
.cok-form__avatarwrap{position:relative; flex:0 0 auto;}
.cok-form__avatar{width:60px; height:60px; border-radius:50% !important; object-fit:cover; display:block;
  border:2px solid rgba(205,162,85,.6); box-shadow:0 10px 22px -10px rgba(44,27,14,.5);}
.cok-form__online{position:absolute; right:1px; bottom:1px; width:13px; height:13px; border-radius:50%;
  background:#3FBF6F; border:2.5px solid #FDFAF4;}
.cok-form__online::after{content:""; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid rgba(63,191,111,.45); animation:cokf-pulse 2s ease-out infinite;}
@keyframes cokf-pulse{0%{transform:scale(.55); opacity:1;}100%{transform:scale(1.35); opacity:0;}}
.cok-form__intro{display:flex; flex-direction:column; gap:3px; line-height:1.25;}
.cok-form__eyebrow{display:inline-flex; align-items:center; gap:7px; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--gold-deep);}
.cok-form__eyebrow::before{content:""; width:16px; height:2px; border-radius:2px; background:linear-gradient(90deg,#CDA255,#B07F33);}
.cok-form__title{font-family:var(--head); font-weight:900; font-size:1.28rem; color:var(--espresso); margin:0;}
.cok-form__sub{font-size:.8rem; color:var(--soft); margin:0;}

/* Velden */
.cok-form__fields{display:flex; flex-direction:column; gap:11px;}
.cok-form__field{display:flex; flex-direction:column; gap:6px;}
.cok-form__row{display:flex; gap:11px;}
.cok-form__row .cok-form__field{flex:1 1 0; min-width:0;}
.cok-form__field>span{font-size:.78rem; font-weight:600; color:var(--ink); letter-spacing:.01em; transition:color .25s;}
.cok-form__field:focus-within>span{color:var(--gold-deep);}
.cok-form__inwrap{position:relative; display:flex; align-items:center;}
.cok-form__ico{position:absolute; left:9px; width:28px; height:28px; border-radius:9px; color:var(--gold-deep); pointer-events:none;
  display:grid; place-items:center; background:rgba(205,162,85,.13); transition:background .25s, transform .25s;}
.cok-form__ico svg{width:16px; height:16px;}
.cok-form__inwrap:focus-within .cok-form__ico{background:rgba(205,162,85,.24); transform:scale(1.05);}
.cok-form__inwrap input{width:100%; padding:12px 14px 12px 46px; border-radius:13px;
  border:1.5px solid var(--line); background:#FDFBF7; color:var(--ink);
  font-family:inherit; font-size:.95rem; transition:border-color .25s, box-shadow .25s, background .25s;}
.cok-form__inwrap input::placeholder{color:#B6A48E;}
.cok-form__inwrap input:hover{border-color:rgba(176,124,60,.4);}
.cok-form__inwrap input:focus{outline:none; background:#fff; border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(205,162,85,.16);}

/* Knop */
.cok-form__btn{position:relative; overflow:hidden; margin-top:6px; cursor:pointer; border:0; width:100%;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 22px; border-radius:99px; font-family:inherit; font-weight:700; font-size:.98rem;
  color:#241608; background:linear-gradient(120deg,#EFD3A0,#CDA255);
  box-shadow:0 16px 34px -16px rgba(205,162,85,.7); transition:box-shadow .3s; will-change:transform;}
.cok-form__btn::after{content:""; position:absolute; top:0; left:-70%; width:45%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  transform:skewX(-18deg); transition:left .55s ease;}
.cok-form__btn:hover::after{left:125%;}
.cok-form__btn i{display:inline-flex; transition:transform .3s;}
.cok-form__btn i svg{width:17px; height:17px;}
.cok-form__btn:hover{box-shadow:0 22px 46px -16px rgba(205,162,85,.85);}
.cok-form__btn:hover i{transform:translateX(4px);}
.cok-form__btn:focus-visible{outline:3px solid var(--gold-deep); outline-offset:3px;}
.cok-form__btn[disabled]{opacity:.7; cursor:progress;}

/* Entrance reveal */
.cok-form__card.will-reveal{opacity:0; transform:translateY(16px) scale(.985);}
.cok-form__card.is-in{opacity:1; transform:none;}
.cok-form__card.will-reveal .cok-form__head,
.cok-form__card.will-reveal .cok-form__fields>*{opacity:0; transform:translateY(10px);}
.cok-form__card.is-in .cok-form__head,
.cok-form__card.is-in .cok-form__fields>*{opacity:1; transform:none;}
.cok-form__fields>*{transition:opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1);}
.cok-form__fields>:nth-child(1){transition-delay:.14s;}
.cok-form__fields>:nth-child(2){transition-delay:.2s;}
.cok-form__fields>:nth-child(3){transition-delay:.26s;}
.cok-form__fields>:nth-child(4){transition-delay:.32s;}

/* Trust-regel */
.cok-form__trust{display:flex; align-items:center; justify-content:center; gap:7px;
  margin:12px 0 0; font-size:.78rem; color:var(--soft);}
.cok-form__trust svg{color:var(--gold-deep); flex:0 0 auto;}

/* Form fade-out bij verzenden */
.cok-form__card.is-sent{min-height:340px;}
.cok-form__head,
.cok-form__fields{transition:opacity .45s ease, transform .45s ease;}
.cok-form__card.is-sent .cok-form__head,
.cok-form__card.is-sent .cok-form__fields{opacity:0; transform:translateY(-10px); pointer-events:none;}

/* Successcherm */
.cok-form__success{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:8px; padding:clamp(24px,4vw,38px); background:#FDFAF4; pointer-events:none;
  opacity:0; transform:translateY(12px); transition:opacity .5s ease .15s, transform .5s cubic-bezier(.22,1,.36,1) .15s;}
.cok-form__card.is-sent .cok-form__success{opacity:1; transform:none; pointer-events:auto;}
.cok-form__cup{display:block; width:84px; height:84px;}
.cok-form__cup svg{width:100%; height:100%;}
.cok-form__steam{opacity:0; animation:cok-steam 2.6s ease-in-out .6s infinite;}
@keyframes cok-steam{0%{opacity:0; transform:translateY(3px);}40%{opacity:.8;}100%{opacity:0; transform:translateY(-4px);}}
.cok-form__tick-bg{transform:scale(0); transform-origin:50px 48px; animation:cok-pop .45s cubic-bezier(.28,1.5,.5,1) .35s forwards;}
.cok-form__tick{stroke-dasharray:20; stroke-dashoffset:20; animation:cok-draw .35s ease .6s forwards;}
@keyframes cok-pop{to{transform:scale(1);}}
@keyframes cok-draw{to{stroke-dashoffset:0;}}
.cok-form__donetitle{font-family:var(--head); font-weight:900; font-size:1.4rem; color:var(--espresso); margin:6px 0 0;}
.cok-form__donetext{font-size:.92rem; line-height:1.55; color:var(--soft); margin:0; max-width:34ch;}

/* Confetti-laag */
.cok-form__confetti{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:5;}

/* Mobiel: compacter + e-mail/telefoon 50/50 naast elkaar. */
@media(max-width:600px){
  .cok-form__card{padding:16px;}
  .cok-form__head{gap:10px; margin-bottom:13px;}
  .cok-form__avatar{width:48px; height:48px;}
  .cok-form__title{font-size:1.12rem;}
  .cok-form__sub{font-size:.74rem;}
  .cok-form__fields{gap:9px;}
  .cok-form__field{gap:4px;}
  .cok-form__field>span{font-size:.72rem;}
  .cok-form__row{gap:8px;}
  .cok-form__ico{left:7px; width:24px; height:24px; border-radius:7px;}
  .cok-form__ico svg{width:14px; height:14px;}
  .cok-form__inwrap input{padding:10px 10px 10px 38px; font-size:.9rem; border-radius:11px;}
  .cok-form__btn{padding:13px 18px; font-size:.92rem;}
  .cok-form__trust{margin-top:10px; font-size:.72rem;}
}
@media(prefers-reduced-motion:reduce){
  .cok-form__btn, .cok-form__btn i, .cok-form__inwrap input, .cok-form__ico,
  .cok-form__head, .cok-form__fields, .cok-form__fields>*, .cok-form__card, .cok-form__success{transition:none;}
  .cok-form__steam, .cok-form__tick-bg, .cok-form__tick, .cok-form__online::after{animation:none;}
  .cok-form__online::after{display:none;}
  .cok-form__btn::after{display:none;}
  .cok-form__tick{stroke-dashoffset:0;} .cok-form__tick-bg{transform:scale(1);}
}