:root { --booking-navy:#071d32; --booking-blue:#087ec1; --booking-cyan:#14bde3; --booking-ink:#102337; --booking-muted:#657587; --booking-line:#dce5ec; --booking-bg:#f4f8fb; }
* { box-sizing: border-box; }
.booking-page { margin:0; color:var(--booking-ink); background:var(--booking-bg); }
.booking-header { background:#fff; border-bottom:1px solid #e6edf2; }
.booking-header__inner { min-height:82px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; }
.booking-header__logo { display:block; width:150px; height:auto; }
.booking-header__back,.booking-header__help { color:#395166; text-decoration:none; font-weight:700; font-size:.92rem; }
.booking-header__back { display:flex; gap:9px; align-items:center; }
.booking-header__back span:first-child { font-size:1.35rem; }
.booking-header__help { justify-self:end; color:var(--booking-blue); }
.booking-hero { position:relative; overflow:hidden; color:#fff; background:radial-gradient(circle at 82% 20%,rgba(20,189,227,.28),transparent 30%),linear-gradient(115deg,#061b30 0%,#0a3556 100%); padding:64px 0 58px; }
.booking-hero:after { content:""; position:absolute; inset:auto -6% -120px auto; width:420px; height:260px; border:1px solid rgba(255,255,255,.13); border-radius:50%; transform:rotate(-12deg); }
.booking-hero__inner { display:grid; grid-template-columns:1.3fr .7fr; align-items:end; gap:70px; position:relative; z-index:1; }
.booking-hero .eyebrow { color:#75ddf4; margin:0 0 12px; }
.booking-hero h1 { color:#fff; font-size:clamp(2.35rem,5vw,4.5rem); line-height:1.03; max-width:780px; margin:0 0 18px; letter-spacing:-.045em; }
.booking-hero p:not(.eyebrow) { color:#c8d8e5; max-width:670px; font-size:1.08rem; line-height:1.7; margin:0; }
.booking-hero__promise { border-left:1px solid rgba(255,255,255,.2); padding-left:32px; display:grid; gap:15px; color:#c8d8e5; font-size:.92rem; }
.booking-hero__promise strong { color:#fff; display:inline-block; min-width:94px; }
.booking-section { padding:58px 0 90px; }
.booking-layout { display:grid; grid-template-columns:340px minmax(0,1fr); gap:36px; align-items:start; }
.booking-summary { position:sticky; top:24px; background:var(--booking-navy); color:#d5e3ed; border-radius:24px; overflow:hidden; padding:30px; box-shadow:0 18px 50px rgba(8,30,50,.16); }
.booking-summary__number { color:#59d2ee; font-size:.75rem; letter-spacing:.2em; font-weight:800; }
.booking-summary h2 { color:#fff; margin:8px 0 12px; font-size:1.65rem; }
.booking-summary p { font-size:.94rem; line-height:1.65; margin:0 0 22px; }
.booking-summary img { width:calc(100% + 60px); margin:0 -30px; height:190px; object-fit:cover; }
.booking-summary ul { list-style:none; padding:22px 0 0; margin:0; display:grid; gap:12px; font-size:.88rem; }
.booking-summary li { padding-left:22px; position:relative; }
.booking-summary li:before { content:"✓"; position:absolute; left:0; color:#4ed0eb; font-weight:900; }
.booking-form { background:#fff; border:1px solid #e3ebf1; border-radius:24px; padding:42px; box-shadow:0 16px 48px rgba(26,59,83,.08); }
.booking-step { margin:0; padding:0 0 34px; border:0; }
.booking-step + .booking-step { padding-top:34px; border-top:1px solid var(--booking-line); }
.booking-step legend { width:100%; color:var(--booking-ink); font-size:1.15rem; font-weight:800; margin-bottom:22px; }
.booking-step legend > span { display:inline-grid; place-items:center; width:30px; height:30px; margin-right:10px; border-radius:9px; color:#fff; background:var(--booking-blue); font-size:.82rem; }
.booking-step legend em { float:right; color:#82909c; font-weight:500; font-size:.76rem; font-style:normal; background:#f1f5f8; padding:7px 10px; border-radius:999px; }
.booking-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.booking-field { display:grid; gap:8px; color:#263c50; font-size:.88rem; font-weight:700; }
.booking-field b,.privacy-check b { color:#e75555; }
.booking-field input[type="text"],.booking-field input[type="tel"],.booking-field input[type="date"] { width:100%; height:52px; padding:0 15px; border:1px solid #cfdbe4; background:#fbfdfe; border-radius:10px; color:var(--booking-ink); font:inherit; outline:none; transition:.2s; }
.booking-field input:focus { border-color:var(--booking-blue); box-shadow:0 0 0 3px rgba(8,126,193,.12); }
.booking-field small { color:#84919d; font-size:.75rem; font-weight:500; }
.capacity-options,.timeslot-options { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.capacity-options label,.timeslot-options label { cursor:pointer; }
.capacity-options input,.timeslot-options input { position:absolute; opacity:0; pointer-events:none; }
.capacity-options label > span,.timeslot-options label > span { min-height:78px; display:flex; flex-direction:column; justify-content:center; gap:5px; padding:14px 18px; border:1px solid #cfdbe4; border-radius:12px; background:#fbfdfe; transition:.2s; }
.capacity-options strong,.timeslot-options strong { font-size:1rem; }
.capacity-options small,.timeslot-options small { color:#7e8d99; font-size:.75rem; }
.capacity-options input:checked + span,.timeslot-options input:checked + span { border-color:var(--booking-blue); background:#edf8fd; box-shadow:inset 0 0 0 1px var(--booking-blue); }
.capacity-options input:focus-visible + span,.timeslot-options input:focus-visible + span { outline:3px solid rgba(8,126,193,.2); }
.timeslot-options { grid-template-columns:1fr 1fr; }
.location-button,.upload-box { width:100%; min-height:86px; display:flex; align-items:center; gap:13px; padding:14px; border:1px dashed #aebfcb; border-radius:12px; background:#f8fbfd; text-align:left; color:var(--booking-ink); cursor:pointer; transition:.2s; }
.location-button:hover,.upload-box:hover { border-color:var(--booking-blue); background:#f0f9fd; }
.location-button__icon,.upload-box__icon { flex:0 0 40px; height:40px; display:grid; place-items:center; border-radius:50%; background:#e3f5fb; color:var(--booking-blue); font-size:1.45rem; font-weight:400; }
.location-button > span:last-child,.upload-box > span:last-child { display:grid; gap:3px; }
.location-button small,.upload-box small { display:block; }
.location-button.is-success { border-style:solid; border-color:#2ca978; background:#f0fbf6; }
.upload-box { position:relative; }
.upload-box input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; }
.privacy-check { display:flex; gap:10px; align-items:flex-start; color:#5d6d7a; font-size:.82rem; line-height:1.5; margin:4px 0 25px; }
.privacy-check input { margin-top:3px; accent-color:var(--booking-blue); }
.booking-form__footer { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.booking-form__footer p { color:#7e8d99; font-size:.78rem; margin:0; }
.booking-submit { min-width:270px; justify-content:center; border:0; cursor:pointer; }
.booking-submit:disabled { opacity:.65; cursor:wait; }
.booking-status { min-height:24px; margin:18px 0 0; text-align:right; font-weight:700; font-size:.9rem; }
.booking-status.is-success { color:#16825b; }
.booking-status.is-error { color:#c33f3f; }
.booking-footer { padding:24px 0; text-align:center; color:#71808d; font-size:.8rem; border-top:1px solid #dfe8ee; background:#fff; }
.booking-footer a { color:var(--booking-blue); text-decoration:none; }
@media (max-width:900px) { .booking-hero__inner { grid-template-columns:1fr; gap:28px; } .booking-hero__promise { grid-template-columns:repeat(3,1fr); border-left:0; border-top:1px solid rgba(255,255,255,.2); padding:22px 0 0; } .booking-hero__promise strong { display:block; min-width:0; } .booking-layout { grid-template-columns:1fr; } .booking-summary { position:relative; top:auto; } }
@media (max-width:640px) { .booking-header__inner { min-height:68px; } .booking-header__logo { width:120px; } .booking-header__help { font-size:0; } .booking-header__help:after { content:"Appeler"; font-size:.85rem; } .booking-hero { padding:45px 0; } .booking-hero__promise { grid-template-columns:1fr; } .booking-section { padding:24px 0 55px; } .booking-summary { display:none; } .booking-form { padding:25px 18px; border-radius:18px; } .booking-grid,.capacity-options { grid-template-columns:1fr; } .timeslot-options { grid-template-columns:1fr 1fr; } .booking-step legend em { float:none; margin-left:6px; } .booking-form__footer { align-items:stretch; flex-direction:column-reverse; } .booking-submit { width:100%; min-width:0; } }