/* Jägerlodge Booking – gescoped onder #jl-booking zodat het thema niets verstoort */
#jl-booking { box-sizing: border-box; color: var(--ink); font: 400 16px/1.6 var(--body); font-variant-numeric: lining-nums tabular-nums; }
#jl-booking *, #jl-booking *::before, #jl-booking *::after { box-sizing: border-box; }
#jl-booking button, #jl-booking input, #jl-booking select, #jl-booking textarea { font: inherit; color: inherit; letter-spacing: normal; text-transform: none; }
#jl-booking .steps { margin: 0; }
#jl-booking .notice { background: var(--surface); border: 1px solid var(--line); padding: 14px 16px; color: var(--muted); }
#jl-booking .notice.err { border-color: var(--no); color: var(--no); }
#jl-booking .loading { color: var(--muted); padding: 20px 0; }
@media (max-width: 640px) { #jl-booking .steps li span { display: none; } #jl-booking .steps li.on span { display: inline; } }
#jl-booking {--bg: #f6f1e8;        
  --surface: #fcfaf6;   
  --ink: #2e2a26;       
  --muted: #6f6152;     
  --line: rgba(46, 42, 38, .14);
  --accent: #5b4a3b;    
  --accent-ink: #fcfaf6;
  --soft: #ebe3d6;      
  --ok: #4f6b45;        
  --no: #9a4b33;        
  --display: "Kalnia", "Didot", "Bodoni 72", Georgia, serif;
  --body: "Lora", Georgia, "Times New Roman", serif;
  color-scheme: light;}
#jl-booking * {box-sizing: border-box;}
#jl-booking body {background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--body); font-variant-numeric: lining-nums tabular-nums;}
#jl-booking :focus-visible {outline: 2px solid var(--accent); outline-offset: 2px;}
@media (prefers-reduced-motion: reduce) {
#jl-booking * {transition: none !important; animation: none !important;}
}
#jl-booking .wrap {max-width: 1120px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));}
#jl-booking .steps {display: flex; gap: 6px 22px; flex-wrap: wrap; padding: 22px 0 6px; margin: 0; list-style: none; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);}
#jl-booking .steps li {display: flex; align-items: center; gap: 8px;}
#jl-booking .steps b {display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); font-weight: 500; letter-spacing: 0;}
#jl-booking .steps li.on {color: var(--ink);}
#jl-booking .steps li.on b {background: var(--ink); color: var(--bg); border-color: var(--ink);}
#jl-booking .steps li.done b {background: var(--soft);}
#jl-booking .layout {display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; padding-block: 18px 120px;}
#jl-booking .main {min-width: 0;}
#jl-booking h2 {font: 400 clamp(26px, 3.2vw, 34px)/1.15 var(--display); margin: 0 0 6px; text-wrap: balance;}
#jl-booking .lead {color: var(--muted); margin: 0 0 22px; max-width: 62ch;}
#jl-booking .label {font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);}
#jl-booking .summary {position: sticky; top: calc(env(safe-area-inset-top, 0px) + 16px); background: var(--surface); border: 1px solid var(--line); padding: 20px; display: grid; gap: 14px;}
#jl-booking .summary h3 {font: 400 22px/1.2 var(--display); margin: 0;}
#jl-booking .summary dl {margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 15px;}
#jl-booking .summary dt {color: var(--muted);}
#jl-booking .summary dd {margin: 0; text-align: right;}
#jl-booking .summary .total {display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: 12px;}
#jl-booking .summary .total strong {font: 500 24px/1 var(--body); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em;}
#jl-booking .trust {display: grid; gap: 6px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px;}
#jl-booking .trust span::before {content: "✓  "; color: var(--ok);}
#jl-booking .btn {display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 26px; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer;}
#jl-booking .btn:hover {filter: brightness(1.08);}
#jl-booking .btn.ghost {background: transparent; color: var(--ink); border-color: var(--line);}
#jl-booking .btn[disabled] {opacity: .4; cursor: not-allowed;}
#jl-booking .nav {display: flex; gap: 12px; justify-content: space-between; flex-wrap: wrap; margin-top: 28px;}
#jl-booking .search {display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px;}
#jl-booking .cal-head {display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px;}
#jl-booking .cal-head .btn {min-height: 38px; padding: 0 14px;}
#jl-booking .months {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;}
#jl-booking .month h4 {font: 500 15px/1 var(--body); margin: 0 0 10px; letter-spacing: .06em; text-transform: uppercase;}
#jl-booking .grid7 {display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px;}
#jl-booking .dow {font-size: 11px; text-align: center; color: var(--muted); letter-spacing: .08em; padding-bottom: 4px;}
#jl-booking .day {aspect-ratio: 1; max-width: 100%; border: 0; background: transparent; display: grid; place-items: center; font-size: 14px; cursor: pointer; position: relative;}
#jl-booking .day.blank {visibility: hidden;}
#jl-booking .day:disabled {color: color-mix(in srgb, var(--muted) 60%, transparent); cursor: default;}
#jl-booking .day.in:disabled {color: var(--ink);}
#jl-booking .day.arr {font-weight: 600;}
#jl-booking .day.arr::after {content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: var(--ok);}
#jl-booking .day.in {background: var(--soft);}
#jl-booking .day.start, #jl-booking .day.end {background: var(--ink); color: var(--bg);}
#jl-booking .day.start::after, #jl-booking .day.end::after {display: none;}
#jl-booking .rule {font-size: 14px; color: var(--muted); display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px;}
#jl-booking .rule i {font-style: normal; display: inline-flex; align-items: center; gap: 6px;}
#jl-booking .rule i::before {content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ok);}
#jl-booking .guests {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;}
#jl-booking .stepper {display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--surface); border: 1px solid var(--line); padding: 10px 12px 10px 16px;}
#jl-booking .stepper small {display: block; color: var(--muted); font-size: 13px; line-height: 1.3;}
#jl-booking .stepper div:last-child {display: flex; align-items: center; gap: 10px;}
#jl-booking .stepper button {width: 34px; height: 34px; border: 1px solid var(--line); background: transparent; cursor: pointer; font-size: 18px; line-height: 1;}
#jl-booking .stepper output {min-width: 18px; text-align: center; font-weight: 600;}
#jl-booking .cards {display: grid; gap: 18px;}
#jl-booking .card {display: grid; grid-template-columns: 260px minmax(0, 1fr); background: var(--surface); border: 1px solid var(--line);}
#jl-booking .card img {width: 100%; height: 100%; min-height: 190px; object-fit: cover; display: block;}
#jl-booking .card .body {padding: 18px 20px; display: grid; gap: 10px; min-width: 0;}
#jl-booking .card h3 {font: 400 24px/1.15 var(--display); margin: 0;}
#jl-booking .facts {display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--muted); margin: 0; padding: 0; list-style: none;}
#jl-booking .row {display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap;}
#jl-booking .price {font: 500 22px/1.1 var(--body); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em;}
#jl-booking .price small {display: block; font: 400 13px/1.4 var(--body); color: var(--muted); margin-top: 4px;}
#jl-booking .collection {background: var(--surface); border: 1px solid var(--line);}
#jl-booking .collection > img {width: 100%; height: 220px; object-fit: cover; display: block;}
#jl-booking .collection .intro {padding: 18px 20px 6px;}
#jl-booking .collection .intro p {margin: 6px 0 0; color: var(--muted); font-size: 15px; max-width: 64ch;}
#jl-booking .variants {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 14px 20px 20px;}
#jl-booking .variant {border: 1px solid var(--line); padding: 14px; display: grid; gap: 8px; align-content: start; background: var(--bg);}
#jl-booking .variant h4 {font: 400 19px/1.2 var(--display); margin: 0;}
#jl-booking .variant .price {font-size: 20px;}
#jl-booking .variant .btn {min-height: 42px; padding: 0 14px; width: 100%;}
#jl-booking .variant.off {opacity: .55;}
#jl-booking .badge {justify-self: start; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border: 1px solid currentColor;}
#jl-booking .badge.ok {color: var(--ok);}
#jl-booking .badge.no {color: var(--no);}
#jl-booking .note {font-size: 14px; color: var(--muted); padding: 0 20px 18px; margin: 0;}
#jl-booking details.small {font-size: 15px; color: var(--muted);}
#jl-booking details.small summary {cursor: pointer;}
#jl-booking .breakdown {background: var(--surface); border: 1px solid var(--line); padding: 18px 20px; display: grid; gap: 8px; margin-bottom: 26px;}
#jl-booking .breakdown .line {display: flex; justify-content: space-between; gap: 16px;}
#jl-booking .breakdown .line span:first-child {color: var(--muted);}
#jl-booking .breakdown .sum {border-top: 1px solid var(--line); padding-top: 10px; font-weight: 600;}
#jl-booking .choices {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px;}
#jl-booking .choice {position: relative; display: grid; gap: 8px; align-content: start; padding: 18px; border: 1px solid var(--line); background: var(--surface); cursor: pointer;}
#jl-booking .choice input {position: absolute; opacity: 0;}
#jl-booking .choice:has(input:checked) {border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink);}
#jl-booking .choice:has(input:focus-visible) {outline: 2px solid var(--accent); outline-offset: 2px;}
#jl-booking .choice h4 {font: 600 18px/1.3 var(--body); margin: 0;}
#jl-booking .choice .now {font: 500 24px/1.1 var(--body); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em;}
#jl-booking .choice ul {margin: 0; padding-left: 18px; color: var(--muted); font-size: 14px;}
#jl-booking .tag {justify-self: start; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; background: var(--soft); padding: 2px 8px;}
#jl-booking form.details {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px;}
#jl-booking .field {display: grid; gap: 6px; min-width: 0;}
#jl-booking .field.full {grid-column: 1 / -1;}
#jl-booking .field label {font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);}
#jl-booking .field input, #jl-booking .field select, #jl-booking .field textarea {width: 100%; min-height: 46px; border: 1px solid var(--line); background: var(--surface); padding: 10px 12px;}
#jl-booking .field textarea {min-height: 90px; resize: vertical;}
#jl-booking .check {grid-column: 1 / -1; display: flex; gap: 10px; align-items: start; font-size: 15px;}
#jl-booking .check input {margin-top: 5px;}
#jl-booking .policy {grid-column: 1 / -1; font-size: 14px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); padding: 12px 14px;}
#jl-booking .err {color: var(--no); font-size: 14px; grid-column: 1 / -1;}
#jl-booking .done {display: grid; gap: 18px;}
#jl-booking .ref {font: 500 26px/1.1 var(--body); font-variant-numeric: lining-nums tabular-nums; letter-spacing: .04em;}
#jl-booking .pay {display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 22px; background: var(--surface); border: 1px solid var(--line); padding: 20px; align-items: start;}
#jl-booking .qr {background: #fff; padding: 10px; width: 200px; max-width: 100%;}
#jl-booking .qr svg {width: 100%; height: auto; display: block;}
#jl-booking .copyrows {display: grid; gap: 8px; min-width: 0;}
#jl-booking .copyrow {display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 10px; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 8px;}
#jl-booking .copyrow span:first-child {font-size: 13px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase;}
#jl-booking .copyrow code {font: 500 15px/1.4 var(--body); overflow-wrap: anywhere;}
#jl-booking .copyrow button {border: 1px solid var(--line); background: transparent; padding: 6px 10px; cursor: pointer; font-size: 13px;}
#jl-booking .timeline {list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;}
#jl-booking .timeline li {display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px;}
#jl-booking .timeline li span:first-child {color: var(--muted);}
@media (max-width: 900px) {
#jl-booking .layout {grid-template-columns: minmax(0, 1fr); padding-bottom: 110px;}
#jl-booking .summary {position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 5; border-width: 1px 0 0; padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px;}
#jl-booking .summary h3, #jl-booking .summary dl, #jl-booking .summary .trust {display: none;}
#jl-booking .summary .total {border: 0; padding: 0; display: grid; gap: 0;}
#jl-booking .summary .mini {display: block !important; font-size: 13px; color: var(--muted);}
#jl-booking .card {grid-template-columns: minmax(0, 1fr);}
#jl-booking .card img {min-height: 0; aspect-ratio: 16 / 8;}
#jl-booking .variants {grid-template-columns: minmax(0, 1fr);}
#jl-booking .choices, #jl-booking form.details, #jl-booking .guests {grid-template-columns: minmax(0, 1fr);}
#jl-booking .pay {grid-template-columns: minmax(0, 1fr);}
}
@media (max-width: 640px) {
#jl-booking .months {grid-template-columns: minmax(0, 1fr);}
#jl-booking .months .month:nth-child(2) {display: none;}
#jl-booking .steps li.on span {display: inline;}
#jl-booking .copyrow {grid-template-columns: minmax(0, 1fr) auto;}
#jl-booking .copyrow span:first-child {grid-column: 1 / -1;}
}

/* ---- v0.1.2: fotoslider, lightbox en correcties frontendcontrole ---- */
#jl-booking .gal {position: relative; overflow: hidden; background: var(--line);}
#jl-booking .gal .track {position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;}
#jl-booking .gal .track::-webkit-scrollbar {display: none;}
#jl-booking .gal .slide {flex: 0 0 100%; height: 100%; scroll-snap-align: start; border: 0; padding: 0; margin: 0; background: none; cursor: zoom-in; display: block;}
#jl-booking .gal .slide img, #jl-booking .card .gal img {width: 100%; height: 100%; min-height: 0; object-fit: cover; display: block;}
#jl-booking .gal .slide.plan {background: #8f8b87;}
#jl-booking .gal .slide.plan img {object-fit: contain;}
#jl-booking .gal .gnav {position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .88); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 3px;}
#jl-booking .gal .gnav.prev {left: 10px;}
#jl-booking .gal .gnav.next {right: 10px;}
#jl-booking .gal .dots {position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; pointer-events: none;}
#jl-booking .gal .dots span {width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .55); box-shadow: 0 0 2px rgba(0, 0, 0, .35);}
#jl-booking .gal .dots span.on {background: #fff;}
#jl-booking .card > .gal {min-height: 220px;}
#jl-booking .collection > .gal {height: 280px;}
#jl-booking .card.off {opacity: .6;}
#jl-booking .link {background: none; border: 0; padding: 0; margin: 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font: inherit; font-size: 14px; justify-self: start;}
#jl-booking .status {list-style: none; margin: 16px 0 0; padding: 0; border: 1px solid var(--line); background: var(--surface);}
#jl-booking .status li {display: flex; justify-content: space-between; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 15px;}
#jl-booking .status li:first-child {border-top: 0;}
#jl-booking .status li span:last-child {color: var(--muted); text-align: right;}
/* B1: bedragen breken niet af */
#jl-booking .breakdown .line span:first-child {min-width: 0;}
#jl-booking .breakdown .line span:last-child {white-space: nowrap; text-align: right;}
/* C7: geen tabelcijfers in lopende tekst (telefoonnummer) */
#jl-booking .notice, #jl-booking .trust, #jl-booking .lead {font-variant-numeric: lining-nums proportional-nums;}
/* C8: zijbalk netjes uitgelijnd */
#jl-booking .summary dt, #jl-booking .summary dd {margin: 0; padding: 0; font-size: 15px; line-height: 1.5; font-weight: 400;}
/* C9: stapper zichtbaar uit */
#jl-booking .stepper button:disabled {opacity: .35; cursor: not-allowed;}
#jl-booking .hint {display: block; margin-top: 8px; color: var(--muted); font-size: 13px;}
@media (max-width: 900px) {
  #jl-booking {padding-bottom: 96px;}
  #jl-booking .card > .gal {min-height: 0; aspect-ratio: 16 / 10;}
  #jl-booking .collection > .gal {height: auto; aspect-ratio: 16 / 10;}
}
@media (max-width: 640px) {
  #jl-booking .gal .gnav {width: 32px; height: 32px; font-size: 20px;}
}

/* Lightbox staat buiten #jl-booking (direct in body) */
#jlb-lightbox {position: fixed; inset: 0; z-index: 100000; background: rgba(24, 21, 18, .95); display: none; align-items: center; justify-content: center; padding: 64px 16px 24px; box-sizing: border-box; font: 400 15px/1.4 Lora, Georgia, serif; color: #fff;}
#jlb-lightbox.open {display: flex;}
#jlb-lightbox figure {margin: 0; display: grid; gap: 12px; justify-items: center;}
#jlb-lightbox img {max-width: min(92vw, 1400px); max-height: calc(100vh - 140px); object-fit: contain; display: block; background: #8f8b87;}
#jlb-lightbox figcaption {color: #e6e1da; font-size: 14px; text-align: center;}
#jlb-lightbox button {position: absolute; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0 0 4px;}
#jlb-lightbox button[hidden] {display: none;}
#jlb-lightbox button:hover {background: rgba(255, 255, 255, .26);}
#jlb-lightbox button:focus-visible {outline: 2px solid #fff; outline-offset: 2px;}
#jlb-lightbox .lb-close {top: 12px; right: 12px;}
#jlb-lightbox .lb-prev {left: 12px; top: 50%; transform: translateY(-50%);}
#jlb-lightbox .lb-next {right: 12px; top: 50%; transform: translateY(-50%);}
@media (max-width: 640px) {
  /* onderaan in het midden, zodat het reCAPTCHA-logo rechtsonder de knop niet bedekt */
  #jlb-lightbox .lb-prev, #jlb-lightbox .lb-next {top: auto; bottom: 20px; transform: none;}
  #jlb-lightbox .lb-prev {left: calc(50% - 64px);}
  #jlb-lightbox .lb-next {right: calc(50% - 64px);}
  #jlb-lightbox img {max-height: calc(100vh - 200px);}
}

/* ---- v0.1.5: keuzeknoppen plattegrond penthouse ---- */
#jl-booking .ph-switch {display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 20px; border-bottom: 1px solid var(--line);}
#jl-booking .ph-switch .label {margin-right: 4px;}
#jl-booking .ph-switch button {font: inherit; font-size: 14px; padding: 6px 14px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; min-height: 36px;}
#jl-booking .ph-switch button[aria-pressed="true"] {background: var(--ink); color: var(--bg); border-color: var(--ink);}
@media (max-width: 640px) {
  #jl-booking .ph-switch {padding: 10px 14px; gap: 6px;}
  #jl-booking .ph-switch .label {flex-basis: 100%;}
}

/* ---- v0.1.6: extra's (taxitransfer) ---- */
#jl-booking .extras {display: grid; gap: 10px; margin: 6px 0 22px;}
#jl-booking .extra {border: 1px solid var(--line); background: var(--surface); padding: 14px 16px;}
#jl-booking .extra.on {border-color: var(--ink);}
#jl-booking .extra-head {display: flex; gap: 12px; align-items: flex-start; cursor: pointer;}
#jl-booking .extra-head input {width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--ink); flex: 0 0 auto;}
#jl-booking .extra-title {display: grid; gap: 2px;}
#jl-booking .extra-title strong {font-weight: 600;}
#jl-booking .extra-title small {color: var(--muted); font-size: 14px;}
#jl-booking .extra-desc {margin: 8px 0 0 32px; color: var(--muted); font-size: 14px; line-height: 1.5;}
#jl-booking .x-choices {border: 0; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px;}
#jl-booking .x-choices legend, #jl-booking .x-field label {font-size: 14px; color: var(--ink); margin-bottom: 6px; padding: 0;}
#jl-booking .x-choices legend {width: 100%;}
#jl-booking .pill {position: relative; cursor: pointer;}
#jl-booking .pill input {position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer;}
#jl-booking .pill span {display: inline-block; padding: 8px 14px; min-height: 40px; box-sizing: border-box; border: 1px solid var(--line); background: var(--bg); font-size: 15px; line-height: 22px;}
#jl-booking .pill input:checked + span {background: var(--ink); color: var(--bg); border-color: var(--ink);}
#jl-booking .pill input:focus-visible + span {outline: 2px solid var(--accent); outline-offset: 2px;}
#jl-booking .x-fields {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; margin-top: 14px;}
#jl-booking .x-field {display: grid; align-content: start; min-width: 0;}
#jl-booking .x-field.x-textarea {grid-column: 1 / -1;}
#jl-booking .x-field label {display: block;}
#jl-booking .x-field .req {color: var(--no);}
#jl-booking .x-field .opt {color: var(--muted); font-size: 13px;}
#jl-booking .x-field input, #jl-booking .x-field textarea {width: 100%; box-sizing: border-box; min-height: 44px; padding: 9px 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: 16px; border-radius: 0;}
#jl-booking .x-field textarea {resize: vertical; min-height: 80px;}
#jl-booking .x-field input:focus, #jl-booking .x-field textarea:focus {outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent);}
#jl-booking .x-field [aria-invalid="true"] {border-color: var(--no);}
#jl-booking .x-hint, #jl-booking .x-note {margin: 12px 0 0; font-size: 14px; color: var(--muted);}
#jl-booking .x-overview {border: 1px solid var(--line); background: var(--surface); padding: 14px 16px; margin: 0 0 22px; display: grid; gap: 10px;}
#jl-booking .x-ov-head {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px;}
#jl-booking .badge.req {border: 1px solid var(--accent); color: var(--accent);}
#jl-booking .x-ov dl {display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 8px 0 0; font-size: 14px;}
#jl-booking .x-ov dt {color: var(--muted); margin: 0;}
#jl-booking .x-ov dd {margin: 0; overflow-wrap: anywhere;}
#jl-booking .x-missing {margin: 8px 0 0; font-size: 14px; color: var(--no);}
#jl-booking .x-small {margin: 8px 0 0; font-size: 13px; color: var(--muted);}
@media (max-width: 640px) {
  #jl-booking .extra {padding: 12px;}
  #jl-booking .extra-desc {margin-left: 0;}
  #jl-booking .x-fields {grid-template-columns: minmax(0, 1fr); gap: 10px;}
  #jl-booking .pill {flex: 1 1 auto;}
  #jl-booking .pill span {width: 100%; text-align: center;}
  #jl-booking .x-ov dl {grid-template-columns: minmax(0, 1fr);}
  #jl-booking .x-ov dd {margin-bottom: 4px;}
}

/* ---- v0.1.7: champagne-extra's ---- */
#jl-booking .x-group {display: grid; gap: 10px; margin-top: 8px;}
#jl-booking .x-group-title {font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);}
#jl-booking .x-items {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;}
#jl-booking .x-item {display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; border: 1px solid var(--line); background: var(--surface); padding: 12px;}
#jl-booking .x-item.on {border-color: var(--ink);}
#jl-booking .x-img {background: #fff; display: flex; align-items: center; justify-content: center; height: 150px; padding: 6px; box-sizing: border-box;}
#jl-booking .x-img img {max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block;}
#jl-booking .x-body {display: grid; align-content: start; gap: 6px; min-width: 0;}
#jl-booking .x-body strong {font-weight: 600;}
#jl-booking .x-body p {margin: 0; font-size: 14px; color: var(--muted); line-height: 1.45;}
#jl-booking .x-price {font-size: 15px; font-variant-numeric: lining-nums tabular-nums;}
#jl-booking .x-actions {display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px;}
#jl-booking .x-add {min-height: 40px; padding: 0 14px; font-size: 13px;}
#jl-booking .x-qty {display: flex; align-items: center; gap: 8px;}
#jl-booking .x-qty button {width: 36px; height: 36px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer; font-size: 18px; line-height: 1;}
#jl-booking .x-qty button:disabled {opacity: .35; cursor: not-allowed;}
#jl-booking .x-qty output {min-width: 18px; text-align: center; font-weight: 600;}
#jl-booking .breakdown .line.sub {border-top: 1px solid var(--line); padding-top: 8px;}
#jl-booking .breakdown .line.x-line span:first-child {color: var(--ink);}
@media (max-width: 900px) {
  #jl-booking .x-items {grid-template-columns: minmax(0, 1fr);}
}
@media (max-width: 640px) {
  #jl-booking .x-item {grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 10px;}
  #jl-booking .x-img {height: 124px;}
}


/* Gastgegevens en bankbetaling */
.jlb .guest-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0}
.jlb .guest-grid label{display:grid;gap:7px}
.jlb .guest-grid input{width:100%;padding:12px;border:1px solid var(--jl-line,#d8d0c5);background:#fff}
.jlb .jlb-hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important}
.jlb .payment-details{display:grid;gap:10px;margin:20px 0}
.jlb .pay-row{display:grid;grid-template-columns:minmax(110px,.6fr) minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px;border:1px solid var(--jl-line,#d8d0c5)}
.jlb .pay-row strong{overflow-wrap:anywhere}
.jlb .copy{padding:8px 12px;background:transparent;border:1px solid currentColor;cursor:pointer}
@media(max-width:640px){.jlb .guest-grid{grid-template-columns:1fr}.jlb .pay-row{grid-template-columns:1fr auto}.jlb .pay-row span{grid-column:1/-1}}

.jlb .epc-qr{width:min(280px,100%);margin:20px auto}.jlb .epc-qr svg{display:block;width:100%;height:auto;background:#fff}

.jlb .choice.off{opacity:.55;cursor:not-allowed}
.jlb .choice.off input{cursor:not-allowed}