/* ============================================================
OnDestination - Boekingspagina
Universele product-/dienst-boeking. Inhoud + prijs + boeken.
Bouwt voort op colors_and_type.css + home.css + aanbod.css.
============================================================ */
/* ---------- Demo dienst-switcher (prototype-affordantie) ---------- */
.demo-bar {
position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
z-index: 120; display: flex; align-items: center; gap: 4px;
background: rgba(13,13,13,.86); backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
padding: 6px 6px 6px 16px; box-shadow: 0 18px 48px rgba(0,0,0,.5);
}
.demo-bar-lbl {
font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
font-weight: 700; color: rgba(248,245,238,.34); margin-right: 6px; white-space: nowrap;
}
.demo-btn {
font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
border: 0; background: none; color: rgba(248,245,238,.6);
padding: 8px 15px; border-radius: 999px; white-space: nowrap;
transition: all 200ms cubic-bezier(.22,.61,.36,1);
}
.demo-btn:hover { color: #F8F5EE; background: rgba(255,255,255,.05); }
.demo-btn.is-active { background: #6FE000; color: #000; }
@media (max-width: 620px) {
.demo-bar { padding: 5px 5px 5px 12px; gap: 2px; left: 12px; right: 12px; transform: none; justify-content: center; flex-wrap: wrap; }
.demo-bar-lbl { width: 100%; text-align: center; margin: 2px 0 4px; }
.demo-btn { padding: 7px 11px; font-size: 11.5px; }
}
/* ---------- Header extra: prijs-flag in stats ---------- */
.pg-header .breadcrumb { margin-bottom: 24px; }
.bk-badge {
display: flex; width: fit-content; align-items: center; gap: 8px; margin-bottom: 22px;
background: rgba(111,224,0,.12); border: 1px solid rgba(111,224,0,.26);
color: #8BFF1F; font-size: 12px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; padding: 7px 14px; border-radius: 999px;
}
.bk-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #6FE000; box-shadow: 0 0 10px #6FE000; }
.pg-h1 .bk-name { display: block; }
/* ---------- Booking section ---------- */
.sec-boeking { background: #0A0A0A; padding: 80px 0 110px; border-top: 1px solid rgba(255,255,255,.06); }
.bk-grid {
display: grid; grid-template-columns: 1fr 392px; gap: 56px; align-items: start;
}
.bk-main { min-width: 0; }
.bk-side { position: sticky; top: 88px; }
/* ---------- Generic block ---------- */
.bk-block { margin-bottom: 44px; }
.bk-block-h {
display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px;
padding-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.08);
}
.bk-block-ix {
font-family: 'Kardige', sans-serif; font-size: 17px; color: #6FE000; opacity: .7; line-height: 1;
}
.bk-block-h h2 {
font-family: 'Kardige', sans-serif; font-weight: 400; letter-spacing: -.02em;
font-size: clamp(22px, 2.4vw, 28px); color: #F8F5EE; margin: 0; line-height: 1.04; flex: 1;
}
.bk-block-tag { font-size: 12px; color: rgba(248,245,238,.4); font-weight: 600; white-space: nowrap; }
/* ---------- Media preview ---------- */
.bk-gallery { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin-bottom: 14px; align-items: stretch; }
.bk-gallery .ph { border-radius: 16px; }
.bk-gallery .bk-ph-main { aspect-ratio: 16/10; }
.bk-gallery .bk-ph-col { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; height: 100%; }
.bk-gallery .bk-ph-col .ph { min-height: 0; }
.bk-media-cap { font-size: 12.5px; color: rgba(248,245,238,.4); margin: 0; }
/* ---------- Inbegrepen lijst ---------- */
.bk-incl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bk-incl-item {
display: flex; gap: 13px; align-items: flex-start;
background: #121212; border: 1px solid rgba(255,255,255,.08);
border-radius: 14px; padding: 16px 18px;
}
.bk-incl-k {
width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0; margin-top: 1px;
background: rgba(111,224,0,.12); border: 1px solid rgba(111,224,0,.24);
display: grid; place-items: center;
}
.bk-incl-k svg { width: 13px; height: 13px; stroke: #6FE000; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.bk-incl-item b { display: block; font-size: 14.5px; font-weight: 700; color: #F8F5EE; margin-bottom: 3px; }
.bk-incl-item span { font-size: 12.5px; line-height: 1.5; color: rgba(248,245,238,.46); }
/* ---------- Form fields (gedeeld met offerte-stijl) ---------- */
.f-row { margin-bottom: 16px; }
.f-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
.f-lbl {
display: block; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
font-weight: 700; color: rgba(248,245,238,.4); margin-bottom: 8px;
}
.f-lbl .req { color: #6FE000; margin-left: 2px; }
.f-lbl .opt { font-size: 10px; font-weight: 400; letter-spacing: .03em; color: rgba(248,245,238,.24); text-transform: none; margin-left: 5px; }
.f-inp, .f-sel, .f-ta {
width: 100%; background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.1); border-radius: 11px;
padding: 13px 15px; font: inherit; font-size: 15px; color: #F8F5EE;
outline: none; transition: border-color 200ms, box-shadow 200ms, background 200ms;
-webkit-appearance: none; appearance: none;
}
.f-inp::placeholder, .f-ta::placeholder { color: rgba(248,245,238,.22); }
.f-inp:focus, .f-sel:focus, .f-ta:focus {
border-color: rgba(111,224,0,.65); background: rgba(255,255,255,.05);
box-shadow: 0 0 0 3px rgba(111,224,0,.09);
}
.f-inp.err, .f-sel.err { border-color: #E04848; box-shadow: 0 0 0 3px rgba(224,72,72,.1); }
.f-inp[type="date"], .f-inp[type="time"] { color-scheme: dark; }
.f-inp[type="date"]::-webkit-calendar-picker-indicator,
.f-inp[type="time"]::-webkit-calendar-picker-indicator { filter: invert(.55); cursor: pointer; }
.f-sel {
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 14px center; padding-right: 42px;
}
.f-sel option { background: #111; color: #F8F5EE; }
.f-ta { resize: vertical; min-height: 100px; line-height: 1.6; }
.f-hint { font-size: 11.5px; line-height: 1.5; color: rgba(248,245,238,.34); margin: 7px 0 0; }
/* ---------- Config card (opties die de prijs sturen) ---------- */
.cfg-card {
background: #121212; border: 1px solid rgba(255,255,255,.09);
border-radius: 18px; padding: 24px 26px;
}
.cfg-row { padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.cfg-row:first-child { padding-top: 2px; }
.cfg-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.cfg-row > .f-lbl { margin-bottom: 12px; }
/* Stepper */
.stepper { display: inline-flex; align-items: center; gap: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; overflow: hidden; }
.stepper button {
width: 46px; height: 46px; background: rgba(255,255,255,.03); border: 0; cursor: pointer;
color: #F8F5EE; font-size: 22px; line-height: 1; display: grid; place-items: center;
transition: background 160ms;
}
.stepper button:hover { background: rgba(111,224,0,.14); color: #6FE000; }
.stepper button:disabled { opacity: .3; cursor: not-allowed; background: rgba(255,255,255,.03); color: #F8F5EE; }
.stepper-val { min-width: 92px; text-align: center; padding-top: 7px; }
.stepper-val b { font-size: 20px; font-weight: 700; color: #F8F5EE; display: block; line-height: 1.1; }
.stepper-val span { font-size: 11px; color: rgba(248,245,238,.4); letter-spacing: .04em; }
.cfg-stepwrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cfg-stepwrap .cfg-step-note { font-size: 12.5px; color: rgba(248,245,238,.42); }
/* Segmented pills (radio) */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg-opt { position: relative; }
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg-opt label {
display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
padding: 11px 16px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.11);
font-size: 13.5px; font-weight: 600; color: rgba(248,245,238,.6);
transition: all 200ms cubic-bezier(.22,.61,.36,1);
}
.seg-opt label small { font-size: 11.5px; font-weight: 600; color: rgba(248,245,238,.34); }
.seg-opt label:hover { border-color: rgba(255,255,255,.28); color: #F8F5EE; }
.seg-opt input:checked + label { background: rgba(111,224,0,.13); border-color: rgba(111,224,0,.45); color: #8BFF1F; }
.seg-opt input:checked + label small { color: rgba(139,255,31,.7); }
/* Checkbox chips */
.chk { display: flex; flex-wrap: wrap; gap: 8px; }
.chk-opt { position: relative; }
.chk-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.chk-opt label {
display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
padding: 10px 15px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.11);
font-size: 13px; font-weight: 600; color: rgba(248,245,238,.6);
transition: all 200ms cubic-bezier(.22,.61,.36,1);
}
.chk-opt .chk-box {
width: 15px; height: 15px; border-radius: 5px; border: 1.5px solid rgba(255,255,255,.28);
display: grid; place-items: center; flex-shrink: 0; transition: all 160ms;
}
.chk-opt .chk-box svg { width: 9px; height: 9px; stroke: #000; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.chk-opt label:hover { border-color: rgba(255,255,255,.28); color: #F8F5EE; }
.chk-opt input:checked + label { background: rgba(111,224,0,.13); border-color: rgba(111,224,0,.45); color: #8BFF1F; }
.chk-opt input:checked + label .chk-box { background: #6FE000; border-color: #6FE000; }
.chk-opt input:checked + label .chk-box svg { opacity: 1; }
.chk-opt label .chk-price { font-size: 11.5px; font-weight: 700; color: rgba(248,245,238,.4); }
.chk-opt input:checked + label .chk-price { color: rgba(139,255,31,.75); }
/* Kleur swatches (drukwerk) */
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { position: relative; }
.swatch input { position: absolute; opacity: 0; width: 0; height: 0; }
.swatch label {
display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer;
width: 64px;
}
.swatch-chip {
width: 56px; height: 56px; border-radius: 14px; border: 2px solid rgba(255,255,255,.14);
position: relative; transition: all 180ms cubic-bezier(.22,.61,.36,1);
}
.swatch-chip::after {
content: ""; position: absolute; top: 6px; right: 6px; width: 16px; height: 16px;
border-radius: 50%; background: #6FE000; opacity: 0; transform: scale(.5);
transition: all 160ms; display: grid;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: center;
}
.swatch input:checked + label .swatch-chip { border-color: #6FE000; transform: translateY(-2px); }
.swatch input:checked + label .swatch-chip::after { opacity: 1; transform: scale(1); }
.swatch-name { font-size: 11px; color: rgba(248,245,238,.5); text-align: center; line-height: 1.3; }
.swatch input:checked + label .swatch-name { color: #F8F5EE; }
/* "Meer kleuren" trigger + uitvouwbaar palet */
.swatch-more {
display: flex; flex-direction: column; align-items: center; gap: 7px;
width: 64px; background: none; border: 0; cursor: pointer; font: inherit; padding: 0;
}
.swatch-more .swatch-chip {
width: 56px; height: 56px; border-radius: 14px; border: 2px solid rgba(255,255,255,.16);
background: conic-gradient(from 210deg, #6FE000, #D7FF3A, #E8B100, #E04848, #d36bff, #3A93E8, #6FE000);
display: grid; place-items: center; transition: all 180ms cubic-bezier(.22,.61,.36,1);
}
.swatch-more .swatch-chip svg { width: 20px; height: 20px; stroke: #0A0A0A; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 260ms cubic-bezier(.22,.61,.36,1); }
.swatch-more:hover .swatch-chip { border-color: rgba(255,255,255,.4); transform: translateY(-2px); }
.swatch-more.is-open .swatch-chip svg { transform: rotate(45deg); }
.swatch-more .swatch-name { color: rgba(248,245,238,.7); font-weight: 600; }
.swatch-panel { max-height: 0; overflow: hidden; transition: max-height 380ms cubic-bezier(.22,.61,.36,1); }
.swatch-panel-inner {
margin-top: 16px; padding: 18px 18px 20px; border-radius: 14px;
background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.08);
}
.swatch-panel-lbl { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: rgba(248,245,238,.34); margin: 0 0 13px; }
.swatch-grid-xl { display: grid; grid-template-columns: repeat(auto-fill, 38px); gap: 9px; }
.pal-chip {
width: 38px; height: 38px; border-radius: 10px; padding: 0; cursor: pointer;
border: 2px solid rgba(255,255,255,.12); position: relative;
transition: transform 160ms cubic-bezier(.22,.61,.36,1), border-color 160ms;
}
.pal-chip:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.45); }
.pal-chip::after {
content: ""; position: absolute; inset: 0; border-radius: 8px;
box-shadow: inset 0 0 0 2px #6FE000, 0 0 0 2px rgba(111,224,0,.5);
opacity: 0; transition: opacity 160ms;
}
.pal-chip.is-added::after { animation: palpop 600ms cubic-bezier(.22,.61,.36,1); }
@keyframes palpop { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
.color-custom { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); }
.cc-lbl { font-size: 12.5px; font-weight: 700; color: rgba(248,245,238,.62); }
.cc-add {
background: rgba(111,224,0,.13); border: 1.5px solid rgba(111,224,0,.4); color: #8BFF1F;
font: inherit; font-size: 13px; font-weight: 700; padding: 11px 18px; border-radius: 999px; cursor: pointer;
transition: all 200ms cubic-bezier(.22,.61,.36,1);
}
.cc-add:hover { background: rgba(111,224,0,.2); border-color: rgba(111,224,0,.6); }
.cc-hint { font-size: 12px; color: rgba(248,245,238,.34); flex-basis: 100%; margin: 4px 0 0; }
/* ---------- Eigen kleurkiezer (HSV) ---------- */
.cpick { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); }
.cpick-lbl { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: rgba(248,245,238,.34); margin: 0 0 13px; }
.cpick-top { display: flex; gap: 14px; }
.cp-sv {
position: relative; flex: 1; height: 140px; border-radius: 12px;
cursor: crosshair; overflow: hidden; touch-action: none;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}
.cp-sv-white, .cp-sv-black { position: absolute; inset: 0; pointer-events: none; }
.cp-sv-white { background: linear-gradient(to right, #fff, rgba(255,255,255,0)); }
.cp-sv-black { background: linear-gradient(to top, #000, rgba(0,0,0,0)); }
.cp-sv-dot {
position: absolute; width: 18px; height: 18px; border-radius: 50%;
border: 2.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.5);
transform: translate(-50%, -50%); pointer-events: none;
}
.cp-preview {
width: 70px; height: 140px; border-radius: 12px; flex-shrink: 0;
box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.cp-hue {
position: relative; height: 16px; border-radius: 999px; margin-top: 16px;
cursor: pointer; touch-action: none;
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.cp-hue-handle {
position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%;
border: 3px solid #fff; box-shadow: 0 1px 5px rgba(0,0,0,.55);
transform: translate(-50%, -50%); pointer-events: none; background: transparent;
}
.cp-bottom { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.cp-hex-wrap {
display: flex; align-items: center; gap: 5px;
background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
border-radius: 11px; padding: 11px 14px; transition: border-color 200ms, box-shadow 200ms;
}
.cp-hex-wrap:focus-within { border-color: rgba(111,224,0,.6); box-shadow: 0 0 0 3px rgba(111,224,0,.09); }
.cp-hex-wrap > span { color: rgba(248,245,238,.4); font-size: 15px; font-weight: 700; font-family: ui-monospace, monospace; }
.cp-hex {
background: none; border: 0; outline: none; color: #F8F5EE; font: inherit;
font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 15px;
width: 92px; letter-spacing: .08em; text-transform: uppercase;
}
/* ---------- Dropzone (uploads) ---------- */
.dropzone {
position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px; text-align: center; padding: 30px 22px;
border: 1.5px dashed rgba(255,255,255,.18); border-radius: 16px;
background: rgba(255,255,255,.02); cursor: pointer;
transition: border-color 200ms, background 200ms;
}
.dropzone:hover, .dropzone.is-drag { border-color: rgba(111,224,0,.5); background: rgba(111,224,0,.04); }
.dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dz-ico {
width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
background: rgba(111,224,0,.12); border: 1px solid rgba(111,224,0,.22);
}
.dz-ico svg { width: 21px; height: 21px; stroke: #6FE000; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.dz-title { font-size: 14.5px; font-weight: 700; color: #F8F5EE; }
.dz-title b { color: #6FE000; }
.dz-sub { font-size: 12px; color: rgba(248,245,238,.4); line-height: 1.5; }
.dz-files { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.dz-file {
display: flex; align-items: center; gap: 12px; padding: 11px 14px;
background: #161616; border: 1px solid rgba(255,255,255,.09); border-radius: 11px;
}
.dz-file-ico { width: 32px; height: 32px; border-radius: 8px; background: rgba(111,224,0,.1); display: grid; place-items: center; flex-shrink: 0; }
.dz-file-ico svg { width: 15px; height: 15px; stroke: #6FE000; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dz-file-meta { flex: 1; min-width: 0; }
.dz-file-meta b { display: block; font-size: 13px; color: #F8F5EE; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-file-meta span { font-size: 11.5px; color: rgba(248,245,238,.4); }
.dz-file-x { background: none; border: 0; cursor: pointer; color: rgba(248,245,238,.4); width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0; transition: all 160ms; }
.dz-file-x:hover { background: rgba(224,72,72,.14); color: #E04848; }
.dz-file-x svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* "of" link-alternatief */
.dz-alt { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; }
.dz-alt::before, .dz-alt::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.08); }
.dz-alt span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(248,245,238,.3); font-weight: 700; }
/* ---------- Order summary card (rechts) ---------- */
.order {
background: #0F0F0F; border: 1px solid rgba(255,255,255,.1);
border-radius: 22px; overflow: hidden;
}
.order::before { content: ""; display: block; height: 2px; background: linear-gradient(90deg, #6FE000, rgba(111,224,0,.3) 55%, transparent); }
.order-head { padding: 22px 24px 20px; border-bottom: 1px solid rgba(255,255,255,.08); display: flex; gap: 14px; align-items: center; }
.order-thumb { width: 56px; height: 56px; border-radius: 12px; flex-shrink: 0; }
.order-head-t { min-width: 0; }
.order-cat { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: #6FE000; margin: 0 0 4px; }
.order-name { font-family: 'Kardige', sans-serif; font-weight: 400; font-size: 19px; letter-spacing: -.02em; color: #F8F5EE; margin: 0; line-height: 1.05; }
.order-body { padding: 18px 24px 4px; }
.order-lbl { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: rgba(248,245,238,.3); margin: 0 0 12px; }
.li { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; padding: 9px 0; }
.li-name { font-size: 13.5px; color: rgba(248,245,238,.78); }
.li-name small { display: block; font-size: 11.5px; color: rgba(248,245,238,.36); margin-top: 1px; }
.li-amt { font-size: 13.5px; font-weight: 700; color: #F8F5EE; white-space: nowrap; }
.li.li-muted .li-name, .li.li-muted .li-amt { color: rgba(248,245,238,.46); font-weight: 600; }
.li-amt.free { color: #6FE000; }
.order-sep { height: 1px; background: rgba(255,255,255,.08); margin: 8px 0; }
.order-total { display: flex; justify-content: space-between; align-items: flex-end; padding: 16px 24px 18px; }
.order-total-l span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(248,245,238,.4); font-weight: 700; display: block; margin-bottom: 2px; }
.order-total-l small { font-size: 11.5px; color: rgba(248,245,238,.34); }
.order-total-amt { font-family: 'Kardige', sans-serif; font-weight: 400; font-size: 38px; letter-spacing: -.02em; color: #6FE000; line-height: 1; text-shadow: 0 0 40px rgba(111,224,0,.3); }
.order-foot { padding: 4px 24px 24px; }
.order-cta {
width: 100%; background: #6FE000; color: #000; border: 0; border-radius: 999px;
padding: 16px 24px; font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .02em;
cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
transition: background 220ms, box-shadow 220ms, transform 220ms;
}
.order-cta svg { stroke: currentColor; }
.order-cta:hover { background: #8BFF1F; box-shadow: 0 0 44px rgba(111,224,0,.42); transform: translateY(-2px); }
.order-wa {
width: 100%; margin-top: 10px; background: transparent; color: #F8F5EE;
border: 1.5px solid rgba(255,255,255,.16); border-radius: 999px;
padding: 13px 24px; font: inherit; font-size: 13.5px; font-weight: 700;
cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px;
transition: all 200ms; text-decoration: none;
}
.order-wa:hover { border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.04); }
.order-wa svg { width: 16px; height: 16px; }
.order-trust { display: flex; flex-direction: column; gap: 0; margin-top: 16px; }
.order-trust-i { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.07); font-size: 12px; color: rgba(248,245,238,.5); }
.order-trust-i svg { width: 14px; height: 14px; stroke: #6FE000; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.order-trust-i b { color: rgba(248,245,238,.78); font-weight: 700; }
/* Order success */
.order.is-booked .order-body, .order.is-booked .order-total, .order.is-booked .order-foot, .order.is-booked .order-head { display: none; }
.order-success { display: none; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 44px 26px 40px; }
.order.is-booked .order-success { display: flex; }
.os-ring { width: 64px; height: 64px; border-radius: 50%; background: rgba(111,224,0,.12); border: 1px solid rgba(111,224,0,.3); display: grid; place-items: center; }
.os-ring svg { width: 26px; height: 26px; stroke: #6FE000; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.os-title { font-family: 'Kardige', sans-serif; font-size: 26px; color: #F8F5EE; margin: 0; letter-spacing: -.02em; }
.os-msg { font-size: 13.5px; line-height: 1.6; color: rgba(248,245,238,.52); margin: 0; }
.os-ref { font-size: 12px; color: rgba(248,245,238,.4); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; padding: 10px 14px; }
.os-ref b { color: #6FE000; font-family: ui-monospace, monospace; letter-spacing: .04em; }
/* ---------- Reassurance strip onder order ---------- */
.bk-side-note { margin-top: 16px; font-size: 11.5px; line-height: 1.6; color: rgba(248,245,238,.34); text-align: center; padding: 0 8px; }
.bk-side-note a { color: rgba(248,245,238,.5); text-decoration: underline; }
/* ---------- Contactgegevens card ---------- */
.bk-contact-card { background: #121212; border: 1px solid rgba(255,255,255,.09); border-radius: 18px; padding: 24px 26px; }
/* ---------- "Zo werkt het" / na boeking ---------- */
.sec-na { background: #E3E1D8; padding: 104px 0; }
.na-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px; }
.na-card { background: #fff; border-radius: 18px; padding: 30px 26px; box-shadow: 0 2px 16px rgba(0,0,0,.06); }
.na-num { font-family: 'Kardige', sans-serif; font-size: 50px; font-weight: 400; letter-spacing: -.04em; line-height: 1; color: rgba(0,0,0,.09); display: block; margin-bottom: 14px; }
.na-card h3 { font-family: 'Kardige', sans-serif; font-size: 20px; font-weight: 400; letter-spacing: -.02em; color: #0A0A0A; margin: 0 0 9px; }
.na-card p { font-size: 13.5px; line-height: 1.6; color: #4A4A4A; margin: 0; max-width: none; }
/* ---------- FAQ (in lijn met de FAQ-pagina) ---------- */
.sec-faq { background: #0A0A0A; padding: 96px 0; }
.faq-list { max-width: 860px; margin: 44px auto 0; }
.faq-item { border-bottom: 1px solid rgba(255,255,255,.06); }
.faq-q {
display: grid; grid-template-columns: 38px 1fr 32px; align-items: center; gap: 16px;
width: 100%; padding: 24px 0; background: none; border: 0; cursor: pointer;
text-align: left; font: inherit; color: inherit;
}
.faq-qnum { font-family: 'Kardige', sans-serif; font-size: 13px; color: rgba(255,255,255,.18); transition: color 200ms; }
.faq-item.is-open .faq-qnum { color: #6FE000; }
.faq-qtext { font-size: 16.5px; font-weight: 600; color: rgba(248,245,238,.76); line-height: 1.35; transition: color 160ms; }
.faq-q:hover .faq-qtext, .faq-item.is-open .faq-qtext { color: #F8F5EE; }
.faq-qicon {
width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.14);
display: grid; place-items: center; flex-shrink: 0; color: rgba(255,255,255,.4);
transition: all 220ms cubic-bezier(.22,.61,.36,1);
}
.faq-qicon svg { width: 14px; height: 14px; transition: transform 260ms cubic-bezier(.22,.61,.36,1), stroke 200ms; }
.faq-q:hover .faq-qicon { border-color: rgba(111,224,0,.4); }
.faq-item.is-open .faq-qicon { background: #6FE000; border-color: #6FE000; color: #000; }
.faq-item.is-open .faq-qicon svg { transform: rotate(45deg); }
.faq-ans { max-height: 0; overflow: hidden; transition: max-height 340ms cubic-bezier(.22,.61,.36,1); }
.faq-ans-inner { padding: 0 0 26px 54px; }
.faq-ans-inner p { font-size: 16px; line-height: 1.72; color: rgba(248,245,238,.52); margin: 0; max-width: 64ch; }
@media (max-width: 600px) {
.faq-q { grid-template-columns: 28px 1fr 30px; gap: 12px; }
.faq-ans-inner { padding-left: 0; }
}
/* ---------- Responsief ---------- */
@media (max-width: 1080px) {
.bk-grid { grid-template-columns: 1fr 348px; gap: 40px; }
}
@media (max-width: 920px) {
.bk-grid { grid-template-columns: 1fr; gap: 40px; }
.bk-side { position: static; }
.order { max-width: none; }
.na-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.bk-incl { grid-template-columns: 1fr; }
.f-row-2 { grid-template-columns: 1fr; }
.bk-gallery { grid-template-columns: 1fr; }
.bk-gallery .bk-ph-col { grid-template-rows: none; grid-template-columns: 1fr 1fr; height: auto; }
.bk-gallery .bk-ph-col .ph { aspect-ratio: 4/3; }
.na-grid { grid-template-columns: 1fr; }
.sec-boeking { padding: 56px 0 90px; }
.cfg-card, .bk-contact-card { padding: 20px 18px; }
}