/* ============================================================
   Photobooth Tilburg — offerte.css
   Donkere styling voor de offerte-configurator. Alleen op offerte.php
   geladen. Stylet zowel de statische markup als de door offerte.js
   geïnjecteerde onderdelen (.extra / .seg-card / .bd__*).
   Hooks (id's, veldnamen, data-attributen) zijn ongewijzigd t.o.v. de
   werkende Booth Kings-implementatie — alleen het uiterlijk verschilt.
   ============================================================ */

.offerte-page{color-scheme:dark;}

/* ---- page hero ---- */
.page-hero{position:relative;max-width:1200px;margin:0 auto;padding:60px 40px 24px;}
.page-hero__glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 18% 10%,rgba(124,77,255,.18),transparent 42%),radial-gradient(circle at 82% 0%,rgba(0,229,255,.14),transparent 44%);}
.page-hero__inner{position:relative;max-width:780px;}
.page-hero h1{margin:14px 0 16px;font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(34px,6.2vw,62px);line-height:.98;letter-spacing:-.01em;text-transform:uppercase;}
.page-hero h1 em{font-style:normal;background:linear-gradient(90deg,#00e5ff,#7c4dff,#ff2e9a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.page-hero__lead{margin:0;font:400 17px/1.6 'Space Grotesk',sans-serif;color:rgba(255,255,255,.64);max-width:580px;}
.page-hero .eyebrow{color:#5cf0ff;}

/* ---- layout ---- */
.offerte{max-width:1200px;margin:0 auto;padding:24px 40px 80px;}
.offerte__grid{display:grid;grid-template-columns:1fr 360px;gap:34px;align-items:start;}
.offerte__aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:16px;}

/* ---- steps ---- */
.step{border:1px solid rgba(255,255,255,.1);border-radius:18px;background:#0c0c0e;padding:24px;margin:0 0 18px;}
.step__title{display:flex;align-items:center;gap:12px;font:800 17px/1.2 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.01em;padding:0;margin-bottom:18px;}
.step__num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;font:800 14px/1 'Archivo',sans-serif;color:#050505;background:linear-gradient(90deg,#00e5ff,#7c4dff,#ff2e9a);background-size:200% auto;}

/* ---- velden ---- */
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;}
.field label{font:600 13px/1.3 'Space Grotesk',sans-serif;color:rgba(255,255,255,.7);}
.input{width:100%;padding:13px 14px;border-radius:11px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:#fff;font:500 15px/1.3 'Space Grotesk',sans-serif;transition:border-color .2s,box-shadow .2s;}
.input::placeholder{color:rgba(255,255,255,.34);}
.input:focus{outline:none;border-color:#7c4dff;box-shadow:0 0 0 3px rgba(124,77,255,.25);}
.input.is-invalid{border-color:#ff4d6d;box-shadow:0 0 0 3px rgba(255,77,109,.2);}
select.input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' opacity='.6' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;}
textarea.input{resize:vertical;min-height:84px;}
.field-hint{margin:10px 0 0;font:400 13px/1.5 'Space Grotesk',sans-serif;color:rgba(255,255,255,.5);}
.field-err{margin-top:10px;font:600 13px/1.4 'Space Grotesk',sans-serif;color:#ff8095;}

/* ---- booth-keuze (fotokaarten — opmaak zoals photoboothdenbosch, donker thema) ---- */
.booth-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.booth-pick__card{position:relative;display:block;cursor:pointer;}
.booth-pick__card input{position:absolute;width:1px;height:1px;opacity:0;}
.booth-pick__body{display:block;height:100%;border:1px solid rgba(255,255,255,.14);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.02);transition:border-color .2s,box-shadow .2s;}
.booth-pick__card:hover .booth-pick__body{border-color:rgba(255,255,255,.32);}
.booth-pick__card input:checked + .booth-pick__body{border-color:#7c4dff;box-shadow:0 0 0 1px #7c4dff,0 12px 30px -16px rgba(124,77,255,.7);}
.booth-pick__card input:focus-visible + .booth-pick__body{outline:2px solid #00e5ff;outline-offset:2px;}
.booth-pick__img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center;display:block;}
.booth-pick__text{display:block;padding:14px 16px;}
.booth-pick__name{display:block;font:800 15px/1.25 'Archivo',sans-serif;text-transform:uppercase;}
.booth-pick__note{display:block;font:400 12.5px/1.4 'Space Grotesk',sans-serif;color:rgba(255,255,255,.5);margin-top:3px;}
.booth-pick__price{display:block;font:700 20px/1 'Archivo',sans-serif;color:#5cf0ff;margin-top:12px;}
/* Op kleine schermen 2 kolommen aanhouden (niet terugvallen naar 1). */
@media(max-width:760px){.booth-pick{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}}

/* ---- segmented (printer / intent) ---- */
.seg{display:inline-flex;flex-wrap:wrap;gap:8px;}
.seg input{position:absolute;opacity:0;width:0;height:0;}
.seg label{cursor:pointer;padding:11px 18px;border-radius:100px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.03);font:700 13px/1 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.02em;color:rgba(255,255,255,.75);transition:.2s;}
.seg input:checked + label{color:#050505;background:linear-gradient(90deg,#00e5ff,#7c4dff,#ff2e9a);border-color:transparent;}
.seg input:focus-visible + label{outline:2px solid #00e5ff;outline-offset:2px;}

/* ---- transport-kaarten (injected) ---- */
.seg-cards{display:grid;gap:10px;}
.seg-card{position:relative;cursor:pointer;display:block;}
.seg-card input{position:absolute;opacity:0;width:0;height:0;}
.seg-card__body{display:block;padding:15px 16px;border:1px solid rgba(255,255,255,.14);border-radius:13px;background:rgba(255,255,255,.02);transition:.2s;}
.seg-card:hover .seg-card__body{border-color:rgba(255,255,255,.3);}
.seg-card input:checked + .seg-card__body{border-color:#00e5ff;background:rgba(0,229,255,.07);box-shadow:0 0 0 1px rgba(0,229,255,.45);}
.seg-card input:focus-visible + .seg-card__body{outline:2px solid #00e5ff;outline-offset:2px;}
.seg-card__top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:4px;}
.seg-card__title{font:700 14px/1.2 'Archivo',sans-serif;text-transform:uppercase;}
.seg-card__price{font:700 13px/1 'Archivo',sans-serif;color:#5cf0ff;white-space:nowrap;}
.seg-card__desc{font:400 13px/1.45 'Space Grotesk',sans-serif;color:rgba(255,255,255,.55);}

/* ---- extra's (injected) ---- */
.extras{display:grid;gap:10px;}
.extra{position:relative;display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;cursor:pointer;padding:14px 16px;border:1px solid rgba(255,255,255,.12);border-radius:13px;background:rgba(255,255,255,.02);transition:.2s;}
.extra:hover{border-color:rgba(255,255,255,.28);}
.extra input{position:absolute;opacity:0;width:0;height:0;}
.extra__box{width:22px;height:22px;border-radius:7px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.04);margin-top:2px;position:relative;transition:.2s;}
.extra input:checked ~ .extra__box{background:linear-gradient(135deg,#00e5ff,#7c4dff);border-color:transparent;}
.extra input:checked ~ .extra__box::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid #050505;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);}
.extra input:focus-visible ~ .extra__box{outline:2px solid #00e5ff;outline-offset:2px;}
.extra:has(input:checked){border-color:rgba(124,77,255,.5);background:rgba(124,77,255,.08);}
.extra__body{display:flex;flex-direction:column;gap:4px;}
.extra__top{display:flex;justify-content:space-between;gap:12px;align-items:baseline;}
.extra__name{font:700 14px/1.25 'Space Grotesk',sans-serif;color:#fff;}
.extra__badge{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:100px;font:700 10px/1.4 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.04em;color:#ffd866;background:rgba(255,216,102,.14);}
.extra__price{font:700 14px/1 'Archivo',sans-serif;color:#5cf0ff;white-space:nowrap;}
.extra__desc{font:400 13px/1.45 'Space Grotesk',sans-serif;color:rgba(255,255,255,.55);}

/* ---- km ---- */
#km-display .muted,#km-display .ok,#km-display .err{font:500 13px/1.5 'Space Grotesk',sans-serif;}
#km-display .ok{color:#7af7ff;}
#km-display .err{color:#ff8095;}
#km-display strong{color:#fff;}

/* ---- prijsopbouw (aside, injected) ---- */
.summary{border:1px solid rgba(255,255,255,.12);border-radius:18px;background:linear-gradient(160deg,rgba(124,77,255,.1),#0c0c0e 60%);padding:22px;}
.summary__label{font:700 12px/1 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.6);margin-bottom:14px;}
.bd__line{display:flex;justify-content:space-between;gap:14px;font:500 14px/1.4 'Space Grotesk',sans-serif;color:rgba(255,255,255,.82);padding:7px 0;}
.bd__line--disc{color:#7af7ff;}
.bd__divider{height:1px;background:rgba(255,255,255,.12);margin:10px 0;}
.bd__total{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font:800 16px/1.2 'Archivo',sans-serif;text-transform:uppercase;}
.bd__total-val{font-size:24px;background:linear-gradient(90deg,#00e5ff,#ff2e9a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.bd__note{margin-top:12px;font:400 12px/1.5 'Space Grotesk',sans-serif;color:rgba(255,255,255,.5);}
.muted{font:400 14px/1.5 'Space Grotesk',sans-serif;color:rgba(255,255,255,.5);margin:0;}

/* ---- help-blok ---- */
.offerte__help{border:1px solid rgba(255,255,255,.1);border-radius:18px;background:#0c0c0e;padding:22px;display:flex;flex-direction:column;gap:10px;}
.offerte__help-link{font:600 15px/1.3 'Space Grotesk',sans-serif;color:#fff;transition:color .2s;}
.offerte__help-link:hover{color:#5cf0ff;}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:16px 28px;border-radius:100px;border:none;cursor:pointer;font:800 14px/1 'Archivo',sans-serif;text-transform:uppercase;letter-spacing:.03em;color:#050505;background:linear-gradient(90deg,#00e5ff,#7c4dff,#ff2e9a);background-size:200% auto;transition:transform .2s,opacity .2s;}
.btn:hover{transform:translateY(-2px);}
.btn:disabled{opacity:.6;cursor:default;transform:none;}
.btn--block{width:100%;margin-top:8px;}
.btn--sm{padding:11px 18px;font-size:12px;}
.btn--ghost{color:#fff;background:none;border:1px solid rgba(255,255,255,.3);}
.btn--ghost:hover{border-color:rgba(255,255,255,.6);}
.form__fine{margin:14px 0 0;font:400 12px/1.5 'Space Grotesk',sans-serif;color:rgba(255,255,255,.6);text-align:center;}

/* ---- foutmelding / succes ---- */
.form__error{margin-bottom:16px;padding:14px 16px;border-radius:12px;border:1px solid rgba(255,77,109,.4);background:rgba(255,77,109,.1);color:#ffb3c0;font:600 14px/1.5 'Space Grotesk',sans-serif;}
.success{text-align:center;border:1px solid rgba(0,229,255,.3);border-radius:20px;background:linear-gradient(160deg,rgba(0,229,255,.1),#0c0c0e 60%);padding:44px 28px;}
.success__icon{width:64px;height:64px;margin:0 auto 18px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#050505;background:linear-gradient(135deg,#00e5ff,#7c4dff);}
.success h3{margin:0 0 10px;font:900 26px/1.1 'Archivo',sans-serif;text-transform:uppercase;}
.success p{margin:0 0 20px;font:400 15px/1.6 'Space Grotesk',sans-serif;color:rgba(255,255,255,.7);}
.success__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ---- responsive ---- */
@media(max-width:860px){
  .page-hero{padding:40px 20px 16px;}
  .offerte{padding:16px 20px 64px;}
  .offerte__grid{grid-template-columns:1fr;gap:22px;}
  .offerte__aside{position:static;}
}
@media(max-width:520px){
  .form__row{grid-template-columns:1fr;}
}