/* Formulieren van Creative Studio Jogi (bestellen, aanleveren, overzicht) in de huisstijl.
   Kleuren, letters, knoppen en labels komen uit /huisstijl/huisstijl.css (een exacte kopie; een test bewaakt dat).
   Hier alleen wat de formulieren zelf nodig hebben. Geen beige: lichte vlakken zijn wit of --wit-zacht. */

:root {
  --roze-donker: #7a464a;   /* roze bij hover op wit */
  --lijn-sterk: #cfcbc7;    /* rand van invoervelden, zoals .knop-rand */
  --fout: #a12c23;
  --fout-zacht: #fbedec;
  --rand: clamp(16px, 5vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body { margin: 0; font-family: var(--letter); font-size: 17px; line-height: 1.65; color: var(--tekst); background: var(--wit); -webkit-font-smoothing: antialiased; }
/* Koppen in de serif van de huisstijl; schuin alleen voor een los woord (em) */
h1, h2, h3, legend { font-family: var(--serif); font-weight: 400; }
h1 em, h2 em { font-style: italic; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, fieldset, legend { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--roze); text-underline-offset: 3px; }
a:hover { color: var(--tekst); }
:focus-visible { outline: 2px solid var(--roze); outline-offset: 3px; }
.kop :focus-visible { outline-color: var(--blush); }

.overslaan { position: absolute; left: 12px; top: -80px; z-index: 50; padding: 10px 16px; border-radius: 999px; background: var(--wit); color: var(--tekst); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.overslaan:focus { top: 12px; }
/* Alleen voor schermlezers: onzichtbaar, maar wel voorgelezen */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Kop */
.kop { background: var(--nacht); color: var(--wit); }
.kop-binnen { max-width: 1120px; margin: 0 auto; padding: 22px var(--rand) clamp(40px, 6vw, 64px); }
/* Het logo zoals op de studiosite: Jogi schuin in de serif, creative studio in de letter van de tekst */
.logo { display: inline-flex; color: var(--wit); text-decoration: none; }
.logo:hover { color: var(--wit); }
.logo-3 { display: inline-flex; align-items: baseline; gap: .6rem; }
.logo-3 b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.8rem; line-height: 1; }
.logo-3 i { font-style: normal; font-size: .78rem; letter-spacing: .04em; opacity: .8; }
.kop .label { margin: clamp(36px, 6vw, 64px) 0 14px; }
.kop h1 { font-size: clamp(42px, 6vw, 68px); line-height: 1.05; }
.kop h1 em { color: var(--blush); }
.kop-tekst { max-width: 36em; margin-top: 18px; color: var(--taupe); }
.kop-btw { margin-top: 10px; color: var(--blush); font-weight: 500; }

/* Pagina: formulier links, overzicht rechts */
.pagina { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; max-width: 1120px; margin: 0 auto; padding: 48px var(--rand) 96px; }
.geen-js { grid-column: 1 / -1; padding: 16px 20px; border-radius: 14px; background: var(--wit-zacht); }

/* Stappen */
.stap { padding: 36px 0; background: linear-gradient(var(--lijn), var(--lijn)) top / 100% 1px no-repeat; }
.stap:first-of-type { padding-top: 0; background: none; }
/* Een legend in een fieldset gedraagt zich vreemd; zwevend (float) gedraagt hij zich als een gewone kop. */
.stap legend { float: left; width: 100%; display: flex; align-items: center; gap: 14px; margin-bottom: 12px; font-size: 30px; line-height: 1.2; }
.stap legend + * { clear: both; }
.stapnummer { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--blush-zacht); color: var(--roze-donker); font-family: var(--letter); font-size: 14px; font-weight: 600; }
.uitleg { max-width: 40em; margin-bottom: 18px; color: var(--zacht); font-size: 16px; }

/* Extra's */
.extra {
  position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 14px; align-items: start;
  padding: 14px 14px; margin: 0 -14px; border-radius: 14px; cursor: pointer; transition: background-color .2s;
}
.extra:hover { background: var(--wit-zacht); }
.extra input[type="checkbox"] { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; }
.extra-tekst { display: flex; flex-direction: column; }
.extra-naam { font-weight: 500; }
.extra-uitleg { font-size: 15px; color: var(--zacht); }
.extra-prijs { font-weight: 500; font-variant-numeric: tabular-nums; }
.extra-teller { grid-template-columns: minmax(0, 1fr) auto; cursor: default; }
.extra-teller:hover { background: none; }
.extra-teller .fout { grid-column: 1 / -1; }

.vinkje {
  position: relative; display: block; width: 24px; height: 24px; margin-top: 1px; border: 1.5px solid var(--zacht); border-radius: 7px; background: var(--wit);
  transition: background-color .2s, border-color .2s, transform .2s;
}
.vinkje::after {
  content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid var(--wit);
  border-width: 0 2.2px 2.2px 0; transform: rotate(45deg) scale(0); transition: transform .2s var(--vloeiend);
}
label:hover .vinkje { border-color: var(--roze); transform: scale(1.06); }
input:checked + .vinkje { background: var(--roze); border-color: var(--roze); }
input:checked + .vinkje::after { transform: rotate(45deg) scale(1); }
input:focus-visible + .vinkje { outline: 2px solid var(--roze); outline-offset: 3px; }
input[aria-invalid="true"] + .vinkje { border-color: var(--fout); }

.teller { display: inline-flex; align-items: center; gap: 6px; }
.teller-knop {
  display: grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--lijn-sterk); border-radius: 50%;
  background: var(--wit); font-size: 20px; line-height: 1; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s;
}
.teller-knop:hover:not(:disabled) { background: var(--nacht); border-color: var(--nacht); color: var(--wit-zacht); }
.teller-knop:disabled { opacity: .35; cursor: default; }
.teller input { width: 56px; height: 40px; border: 1.5px solid var(--lijn-sterk); border-radius: 10px; background: var(--wit); text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.teller input::-webkit-outer-spin-button, .teller input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Domeinnaam: twee knoppen */
.knoppenkeuze { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.knopje { position: relative; cursor: pointer; }
.knopje input { position: absolute; opacity: 0; }
.knopje span { display: inline-block; padding: 10px 18px; border: 1.5px solid var(--lijn-sterk); border-radius: 999px; background: var(--wit); font-size: 15px; font-weight: 500; transition: all .2s; }
.knopje:hover span { border-color: var(--nacht); }
.knopje input:checked + span { background: var(--nacht); border-color: var(--nacht); color: var(--wit-zacht); }
.knopje input:focus-visible + span { outline: 2px solid var(--roze); outline-offset: 3px; }

/* Velden */
.veld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.veld label { font-size: 15px; font-weight: 500; }
.optioneel { font-weight: 400; color: var(--zacht); }
.veld input, .veld select, .veld textarea {
  width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--lijn-sterk); border-radius: 12px; background: var(--wit);
  transition: border-color .2s, box-shadow .2s;
}
.veld textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.veld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--zacht) 50%), linear-gradient(135deg, var(--zacht) 50%, transparent 50%); background-position: calc(100% - 22px) 21px, calc(100% - 16px) 21px; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.veld input:hover, .veld select:hover, .veld textarea:hover { border-color: var(--nacht); }
.veld input:focus, .veld select:focus, .veld textarea:focus { outline: none; border-color: var(--roze); box-shadow: 0 0 0 3px rgb(154 92 96 / .18); }
.veld [aria-invalid="true"] { border-color: var(--fout); background-color: var(--fout-zacht); }
.hint { font-size: 14px; color: var(--zacht); }
.rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.rij-postcode { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.fout { position: relative; padding-left: 14px; color: var(--fout); font-size: 15px; font-weight: 500; }
.fout::before { content: ""; position: absolute; left: 0; top: .35em; bottom: .35em; width: 3px; border-radius: 2px; background: var(--fout); }
.stap > .fout { margin-top: 10px; }
.verborgen-veld { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Foutenlijst bovenaan */
.foutenlijst { margin-bottom: 28px; padding: 18px 22px; border-radius: 14px; border-left: 4px solid var(--fout); background: var(--fout-zacht); }
.foutenlijst:focus { outline: none; box-shadow: 0 0 0 3px rgba(161, 44, 35, .25); }
.foutenlijst h2 { font-size: 24px; margin-bottom: 6px; }
.foutenlijst ul { padding-left: 20px; }
.foutenlijst a, .link-knop { color: var(--fout); font-weight: 500; }
.link-knop { padding: 0; border: 0; background: none; text-decoration: underline; cursor: pointer; text-align: left; }
/* Een linkknop die geen fout meldt: gewone letterkleur in plaats van het rood van een foutlink */
.link-knop-rustig { color: var(--nacht); }
.link-knop-rustig:hover { color: var(--roze-donker); }

/* Versturen */
.versturen { padding-top: 32px; border-top: 1px solid var(--lijn); }
.akkoord { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; cursor: pointer; }
.akkoord input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; }
.versturen > .fout { margin-top: 8px; }
.spamfilter { min-height: 65px; margin: 22px 0; }
.versturen > #fout-versturen { margin: -8px 0 16px; }
/* Knoppen: de pillen uit de huisstijl (.knop, .knop-donker, .knop-rand). Hier alleen wat een formulierknop extra nodig heeft. */
/* Een link (a) en een knop (button) zien er hetzelfde uit: .knop en .knop-rand hebben dezelfde hoogte en dezelfde letter, zodat twee knoppen
   naast elkaar even groot zijn. De grootte volgt de tekst om hen heen (1em). De rand van .knop-rand komt uit de huisstijl. */
.knop, .knop-rand { box-sizing: border-box; min-height: 56px; font: 500 1em/1.2 var(--letter); }
button.knop { border: 0; }
button.knop-rand { background: none; cursor: pointer; }
.knop:disabled, .knop:disabled:hover { opacity: .75; cursor: progress; transform: none; box-shadow: none; }
/* Kleine knoppen: in kaarten, tabellen en voor "nog eentje erbij" */
.knop.knop-klein, .knop-rand.knop-klein { min-height: 40px; padding: 0 1.1rem; font-size: 15px; line-height: 1; white-space: nowrap; }
.versturen-uitleg { margin-top: 12px; font-size: 15px; color: var(--zacht); }

/* Overzicht */
.overzicht { padding: 26px; border-radius: 20px; background: var(--wit); box-shadow: 0 0 0 1px var(--lijn), 0 40px 80px -60px rgb(22 18 15 / .55); }
.overzicht-zij { position: sticky; top: 24px; }
.overzicht-onder { display: none; margin: 8px 0 32px; }
.overzicht h2 { font-size: 28px; line-height: 1.15; }
.overzicht-btw { margin: 2px 0 14px; font-size: 13px; color: var(--zacht); }

/* Wat er altijd in zit */
.basis { margin-bottom: 22px; padding: 20px 24px; border-radius: 18px; background: var(--wit); box-shadow: 0 0 0 1px var(--lijn), 0 30px 60px -48px rgb(22 18 15 / .45); }
.basis + .basis { margin-top: -10px; }
.basis-tekst { font-size: 15px; color: var(--zacht); line-height: 1.5; }
.basis-kop { font-weight: 600; margin-bottom: 8px; }
.basis-lijst { list-style: none; }
.basis-lijst li { position: relative; padding-left: 32px; font-size: 16px; }
.basis-lijst li + li { margin-top: 4px; }
/* Vinkjes zoals in de huisstijl: een roze vinkje in een zacht roze rondje */
.basis-lijst li::before { content: ""; position: absolute; left: 0; top: .2em; width: 22px; height: 22px; border-radius: 50%; background: var(--blush-zacht); }
.basis-lijst li::after { content: ""; position: absolute; left: 8px; top: calc(.2em + 5px); width: 5px; height: 9px; border: solid var(--roze); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.regels { list-style: none; }
.regel { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--lijn); font-size: 15px; }
.regel-naam { display: flex; flex-direction: column; }
.regel-aantal { font-size: 13px; color: var(--zacht); }
/* De bedragen in het overzicht staan niet in tabelcijfers: in Schibsted Grotesk maken die de komma in €24,95 erg breed */
.regel-bedrag, .totaal-bedrag, .abo-prijs { white-space: nowrap; }
.totaal { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; }
.totaal-naam { font-weight: 600; }
.totaal-bedrag { font-family: var(--serif); font-size: 36px; line-height: 1; }
.totaal-btw { font-size: 13px; color: var(--zacht); text-align: right; }
.overzicht-blok { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--lijn); }
.overzicht-kopje { font-weight: 600; font-size: 15px; }
.abo-prijs { font-size: 18px; font-weight: 500; color: var(--roze-donker); }
.overzicht-klein { font-size: 13px; color: var(--zacht); }
.overzicht-noot { margin-top: 18px; padding: 10px 12px; border-radius: 10px; background: var(--wit-zacht); font-size: 13px; }

/* Een korte pagina met tekst en knoppen (index en 404) */
.pagina-tekst { grid-template-columns: minmax(0, 40em); gap: 0; padding-bottom: 120px; }
.pagina-tekst > * + * { margin-top: 20px; }
.knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Bedankt */
.bedankt { grid-column: 1 / -1; max-width: 640px; padding: 40px; border-radius: 22px; background: var(--wit); box-shadow: 0 0 0 1px var(--lijn), 0 40px 80px -60px rgb(22 18 15 / .55); }
.bedankt:focus { outline: none; }
.bedankt h2 { font-size: 38px; line-height: 1.15; margin-bottom: 14px; }
.bedankt p + p { margin-top: 12px; }
.bedankt-let-op { padding-left: 14px; border-left: 3px solid var(--roze); font-weight: 600; }
.bedankt .knop, .bedankt .knop-rand { margin-top: 22px; }

/* Telefoon en tablet */
@media (max-width: 999px) {
  .pagina { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 32px; }
  .overzicht-zij { display: none; }
  .overzicht-onder { display: block; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .rij, .rij-postcode { grid-template-columns: minmax(0, 1fr); }
  .knop { width: 100%; justify-content: space-between; }
  .knop.knop-klein { width: auto; }
  .overzicht { padding: 20px; }
  .bedankt { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

[data-bestelnummer] { white-space: nowrap; }