/* One booking form: a mobile sheet or inline desktop steps on room pages. */
html.booking-sheet-open, html.booking-sheet-open body { overflow: hidden; overscroll-behavior: none; }
dialog.booking-dialog { box-sizing: border-box; width: min(680px, calc(100vw - 48px)); max-width: none; height: min(820px, 90dvh); max-height: 90dvh; margin: auto; padding: 0; border: 0; border-radius: var(--border-radius); background: #fff; box-shadow: 0 24px 100px #12203240; overflow: hidden; }
dialog.booking-dialog[open] { display: block; animation: booking-enter .24s ease-out; }
.booking-dialog::backdrop { background: #18243080; backdrop-filter: blur(3px); }
.booking-sheet { --ink: #222831; --muted: #68717d; --line: #e5e8ec; position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; color: var(--ink); background: #fff; }
.booking-sheet *, .booking-launch * { box-sizing: border-box; }
.booking-sheet, .booking-sheet :is(button, input, select, textarea, p, span, label, div, strong, small, h2, h3, h4, summary, a) { font-family: 'Inter', sans-serif; font-size: 14px !important; line-height: 1.5; }
.booking-sheet [hidden] { display: none !important; }
.booking-sheet:not(.is-inline) .sheet-step-heading { display: none; }
.booking-sheet:not(.is-inline) .sheet-step:not(.is-current) { display: none; }
.booking-sheet button { cursor: pointer; appearance: none; border: 0; background: none; color: inherit; margin: 0; font-weight: 600; }
.booking-sheet button:disabled { cursor: wait; opacity: .5; }
.booking-sheet :is(button, input, select, textarea, a):focus-visible { outline: 3px solid #80b5ff; outline-offset: 3px; }
.booking-sheet .sheet-header { flex: 0 0 auto; padding: 24px 32px 0; background: #fff; }
.booking-sheet .sheet-grab { display: none; }
.booking-sheet .sheet-room { display: flex; align-items: center; gap: 12px; padding-right: 40px; min-height: 44px; }
.booking-sheet .sheet-room img { width: 44px; height: 44px; border-radius: var(--border-radius); object-fit: cover; }
.booking-sheet .sheet-room strong { display: block; font-size: 16px !important; }
.booking-sheet .sheet-room small { display: block; color: var(--muted); font-size: 12px !important; }
.booking-sheet .sheet-close { position: absolute; right: 20px; top: 24px; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: #f2f4f6; }
.booking-sheet .sheet-close:hover { background: #e6e9ee; }
.booking-sheet .sheet-progress { display: flex; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.booking-sheet .sheet-progress li { flex: 1; min-width: 0; margin: 0; padding: 0 0 12px; border-bottom: 3px solid var(--line); color: var(--muted); font-size: 12px !important; }
.booking-sheet .sheet-progress li.is-current { border-color: var(--blue); color: var(--blue); font-weight: 600; }
.booking-sheet .sheet-progress li.is-complete { border-color: #88b5ef; color: var(--ink); }
.booking-sheet .sheet-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 26px 32px 28px; scrollbar-width: thin; scroll-padding: 20px; }
.booking-sheet .sheet-title { font-size: 27px !important; line-height: 1.2; letter-spacing: -.65px; font-weight: 700; margin: 0 0 8px !important; padding: 0; }
.booking-sheet .sheet-title:focus { outline: none; }
.booking-sheet .sheet-intro { color: var(--muted); margin: 0 0 24px; }
.booking-sheet form { display: block; padding: 0; margin: 0; border: 0; background: transparent; }
body.visitor-page div#main_body .booking-sheet form.sheet-form { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: transparent; }
.booking-sheet section { margin: 0; padding: 0; }
.booking-sheet label.booking-field, .booking-sheet .sheet-field { display: block; margin: 0 0 18px; color: var(--ink); font-weight: 500; }
.booking-sheet input:not([type='checkbox']):not([type='radio']):not([type='hidden']), .booking-sheet select, .booking-sheet textarea { display: block; appearance: auto; width: 100%; min-width: 0; height: 48px; min-height: 48px; border: 1px solid #c9ced6; border-radius: var(--border-radius); margin: 7px 0 0; padding: 11px 13px; background: #fff; color: var(--ink); font-size: 16px !important; font-weight: 400; box-shadow: none; }
.booking-sheet textarea { height: 94px; resize: vertical; }
.booking-sheet input[aria-invalid='true'], .booking-sheet select[aria-invalid='true'] { border-color: #be3131 !important; }
.booking-sheet .booking-times { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.booking-sheet .booking-times label { display: block; font-weight: 500; }
.booking-sheet .sheet-calendar { margin: 0 0 18px; }
.booking-sheet .calendar-header { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px; margin: 0 0 8px; }
.booking-sheet .calendar-month { text-align: center; font-size: 16px !important; font-weight: 600; }
.booking-sheet .calendar-nav { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: var(--border-radius); font-size: 25px !important; line-height: 1; font-weight: 400; }
.booking-sheet .calendar-nav:disabled { cursor: default; opacity: .25; }
.booking-sheet .calendar-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin-bottom: 5px; }
.booking-sheet .calendar-weekday { padding: 6px 0; text-align: center; color: var(--muted); font-size: 12px !important; }
.booking-sheet .calendar-day { width: 100%; min-height: 40px; padding: 7px 0; border: 1px solid transparent; border-radius: var(--border-radius); font-weight: 400; }
.booking-sheet .calendar-day[aria-current='date'] { border-color: #87919e; }
.booking-sheet .calendar-day:disabled { cursor: default; color: #a5adb7; opacity: .55; }
.booking-sheet .calendar-day:not(:disabled):hover, .booking-sheet .calendar-nav:not(:disabled):hover { background: #edf4fe; }
.booking-sheet .calendar-day[aria-pressed='true'], .booking-sheet .calendar-day[aria-pressed='true']:hover { color: #fff; border-color: var(--blue); background: var(--blue); font-weight: 600; }
.booking-sheet .calendar-help { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.booking-sheet .sheet-persons-field { display: grid; grid-template-columns: 1fr 88px; align-items: center; gap: 12px; margin-bottom: 7px; }
.booking-sheet .sheet-persons-field input[type='number'] { margin: 0; }
.booking-sheet .sheet-note.sheet-duration-note { margin: 8px 0 14px; }
.booking-sheet .sheet-availability { display: flex; align-items: flex-start; gap: 9px; padding: 12px 0; color: #267448; border-top: 1px solid var(--line); font-size: 13px !important; }
.booking-sheet .sheet-availability::before { content: '✓'; font-weight: 700; }
.booking-sheet .sheet-availability.is-busy { color: #ab362d; }
.booking-sheet .sheet-availability.is-busy::before { content: '!'; }
.booking-sheet .sheet-busy-times { margin: 0 0 14px; color: var(--muted); font-size: 12px !important; }
.booking-sheet .sheet-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.booking-sheet .sheet-suggestions button { min-height: 40px; padding: 8px 12px; border: 1px solid #a8c9f5; color: var(--blue); border-radius: var(--border-radius); }
.booking-sheet h4 { display: block; font-size: 15px !important; font-weight: 600; margin: 20px 0 10px !important; }
.booking-sheet section > h4:first-child { margin-top: 0 !important; }
.booking-sheet h4 i { color: var(--muted); font-size: 12px !important; font-style: normal; font-weight: 400; }
.booking-sheet .req { display: none; }
.booking-sheet .extra { margin: 0; padding: 0; border: 0; background: none; }
.booking-sheet .extra label { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; margin: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.booking-sheet input:is([type='radio'], [type='checkbox']) { appearance: auto; flex: 0 0 19px; width: 19px; height: 19px; padding: 0; margin: 1px 0 0; accent-color: var(--blue); }
.booking-sheet .extra.radio label { border: 1px solid var(--line); padding: 13px; border-radius: var(--border-radius); margin: 8px 0; }
.booking-sheet .extra.radio label:has(input:checked) { border-color: var(--blue); background: #f3f8ff; }
.booking-sheet .tooltip { display: block; flex: 1; min-width: 0; font-weight: 500; border: 0; }
.booking-sheet .tooltip > span { display: block; position: static; width: auto; max-width: none; visibility: visible; opacity: 1; transform: none; margin: 4px 0 0; padding: 0; border: 0; box-shadow: none; background: none; color: var(--muted); font-size: 12px !important; font-weight: 400; white-space: normal; }
.booking-sheet .tooltip::before, .booking-sheet .tooltip::after, .booking-sheet .tooltip > span::before { display: none; }
.booking-sheet .price { margin-left: auto; white-space: nowrap; color: var(--muted); font-size: 12px !important; }
.booking-sheet .extra-info { display: block; color: var(--muted); margin: 6px 0 10px; font-size: 12px !important; }
.booking-sheet .layout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.booking-sheet .layout label { position: relative; display: flex; flex-direction: column; align-items: center; padding: 44px 4px 9px; border: 1px solid var(--line); border-radius: var(--border-radius); cursor: pointer; }
.booking-sheet .layout label:has(input:checked) { border-color: var(--blue); background: #f3f8ff; }
.booking-sheet .layout label:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.booking-sheet .extra .options { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.booking-sheet .extra .options label { border: 0; }
.booking-sheet .layout .icon { position: absolute; top: 10px; left: calc(50% - 15px); display: block; width: 30px; height: 28px; background-size: contain; background-position: center; background-repeat: no-repeat; margin: 0; }
.booking-sheet .layout input[type='radio'] { position: absolute; right: 7px; top: 7px; width: 16px; height: 16px; margin: 0; }
.booking-sheet .layout .max_persons { color: var(--muted); font-size: 11px !important; }
.booking-sheet .layout .max_persons::after { content: ' personen'; }
.booking-sheet .sheet-link, .booking-sheet a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; padding: 10px 0; }
.booking-sheet .sheet-error { margin: 0 0 16px; padding: 12px; border-radius: var(--border-radius); background: #fff2ef; color: #9d3026; }
.booking-sheet .sheet-error button { display: block; text-decoration: underline; padding: 8px 0 0; }
.booking-sheet .sheet-review-block { padding: 18px 0; border-bottom: 1px solid var(--line); }
.booking-sheet .sheet-review-block:first-child { padding-top: 0; }
.booking-sheet .sheet-review-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.booking-sheet .sheet-review-heading strong { font-size: 15px !important; }
.booking-sheet .sheet-review-heading button { color: var(--blue); min-height: 36px; padding: 4px 0 4px 8px; text-decoration: underline; }
.booking-sheet .sheet-review-block p { margin: 3px 0; overflow-wrap: anywhere; color: var(--muted); }
.booking-sheet .sheet-review-block p { font-size: 14px !important; line-height: 1.55 !important; margin: 2px 0 !important; }
.booking-sheet .sheet-costs { margin: 20px 0 12px; }
.booking-sheet .sheet-cost-row { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; }
.booking-sheet .sheet-cost-row span:last-child { white-space: nowrap; }
.booking-sheet .sheet-cost-row.is-total { font-weight: 700; padding-top: 14px; margin-top: 8px; border-top: 1px solid var(--line); }
.booking-sheet .sheet-note { color: var(--muted); font-size: 12px !important; margin: 10px 0; }
.booking-sheet details { border-top: 1px solid var(--line); margin: 18px 0; padding: 12px 0; }
.booking-sheet summary { cursor: pointer; min-height: 28px; font-weight: 500; }
.booking-sheet details p { font-size: 12px !important; color: var(--muted); }
.booking-sheet .sheet-footer { flex: 0 0 auto; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 16px 32px max(18px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: #fff; }
.booking-sheet .sheet-price strong { display: inline; font-size: 21px !important; letter-spacing: -.5px; }
.booking-sheet .sheet-price small { display: block; color: var(--muted); font-size: 11px !important; }
.booking-sheet .sheet-navigation { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.booking-sheet .sheet-back { flex: 0 0 40px; height: 46px; border: 1px solid var(--line); border-radius: var(--border-radius); font-size: 22px !important; }
.booking-sheet .sheet-next { min-height: 46px; padding: 12px 22px; border-radius: var(--border-radius); background: var(--blue); color: white; white-space: nowrap; }
.booking-sheet .sheet-next:hover { background: #004fba; }
.booking-sheet .sheet-success { padding: 36px 0; }
.booking-sheet .sheet-success-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; color: #267448; background: #eaf6ee; font-size: 28px !important; margin-bottom: 24px; }
.booking-launch { padding: 28px 0; }
.booking-launch .booking-launch-rate { display: block; margin-bottom: 14px; font-size: 24px !important; font-weight: 700; }
.booking-launch .booking-launch-rate small { font-size: 13px !important; font-weight: 400; color: #68717d; }
.booking-launch .booking-launch-button { display: block; width: 100%; min-height: 48px; padding: 12px 20px; border: 0; border-radius: var(--border-radius); background: #0862dd; color: #fff; font: 600 16px/1.5 'Inter', sans-serif; cursor: pointer; }
.booking-launch p { color: #68717d; font-size: 13px !important; margin: 12px 0 0; }
.booking-inline-host { display: none; }
@media (min-width: 1001px) {
    .booking-inline-host { display: block; }
    body.has-booking-sheet .booking-launch { display: none; }
    body.visitor-page #main_body .booking-inline-title { font-size: 26px; font-weight: 700; line-height: 1.3; margin: 0 0 22px; }
    .booking-sheet.is-inline { height: auto; }
    .booking-sheet.is-inline > .sheet-header, .booking-sheet.is-inline > .sheet-grab,
    .booking-sheet.is-inline .sheet-title, .booking-sheet.is-inline .sheet-intro { display: none; }
    .booking-sheet.is-inline .sheet-scroll { overflow: visible; padding: 0; }
    .booking-sheet.is-inline .sheet-step { margin-bottom: 14px; border: 1px solid #d8dde3; border-radius: var(--border-radius); background: #fff; overflow: clip; }
    .booking-sheet.is-inline .sheet-step.is-current { border-color: #c5ccd5; box-shadow: 0 2px 8px #1824300d; }
    body.visitor-page #main_body .booking-sheet .sheet-step-heading { margin: 0; padding: 0; line-height: 1.4; }
    .booking-sheet.is-inline .sheet-step-toggle { position: relative; display: block; text-align: left; width: 100%; padding: 20px 58px 20px 20px; }
    .booking-sheet.is-inline .sheet-step-toggle::after { right: 20px; }
    .booking-sheet.is-inline .sheet-step-toggle:disabled { opacity: 1; cursor: default; }
    .booking-sheet.is-inline .sheet-step-toggle:disabled::after { opacity: .35; }
    .booking-sheet.is-inline .sheet-step-toggle strong { font-size: 16px !important; }
    .booking-sheet.is-inline .sheet-step-toggle:focus-visible { outline-offset: -4px; }
    .booking-sheet.is-inline .sheet-step-summary { display: block; color: var(--muted); font-size: 12px !important; margin-top: 5px; font-weight: 400; overflow-wrap: anywhere; }
    .booking-sheet.is-inline .sheet-step-summary:empty { display: none; }
    .booking-sheet.is-inline .sheet-step > section { padding: 0 20px 8px; }
    .booking-sheet.is-inline .sheet-calendar { margin-top: -8px; }
    .booking-sheet.is-inline .sheet-footer { padding: 16px 20px 20px; }
    .booking-sheet.is-inline .sheet-footer.is-review { grid-template-columns: 1fr; }
    .booking-sheet.is-inline .sheet-footer.is-review .sheet-price { display: none; }
    .booking-sheet.is-inline .sheet-footer.is-review .sheet-next { flex: 1; }
    body.visitor-page #main_body .booking-sheet p { font-size: 14px !important; line-height: 1.5 !important; margin: 0 0 14px; }
    body.visitor-page #main_body .booking-sheet .sheet-note { font-size: 12px !important; }
    .booking-sheet.is-inline.is-success .sheet-title, .booking-sheet.is-inline.is-success .sheet-intro { display: block; }
}
@keyframes booking-enter { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 700px) {
    dialog.booking-dialog { position: fixed; inset: auto 0 var(--sheet-bottom, 0px); width: 100%; height: calc(var(--sheet-visible-height, 100dvh) * .9); max-height: calc(var(--sheet-visible-height, 100dvh) * .9); margin: 0; border-radius: var(--border-radius) var(--border-radius) 0 0; }
    .booking-sheet .sheet-header { padding: 22px 20px 0; }
    .booking-sheet .sheet-grab { display: block; position: absolute; z-index: 1; top: 0; inset-inline: 0; height: 20px; cursor: grab; touch-action: none; }
    .booking-sheet .sheet-grab::before { content: ''; position: absolute; width: 32px; height: 4px; border-radius: var(--border-radius-small); background: #d3d7dd; top: 8px; left: calc(50% - 16px); }
    .booking-sheet .sheet-close { right: 12px; top: 22px; }
    .booking-sheet .sheet-progress { margin-top: 19px; }
    .booking-sheet .sheet-scroll { padding: 22px 20px; }
    .booking-sheet .sheet-title { font-size: 25px !important; }
    .booking-sheet .sheet-intro { margin-bottom: 18px; font-size: 13px !important; }
    .booking-sheet .sheet-footer { padding: 12px 20px max(14px, env(safe-area-inset-bottom)); gap: 8px; }
    .booking-sheet .sheet-next { padding-inline: 16px; }
    .booking-sheet .sheet-footer.is-review { grid-template-columns: 1fr; gap: 10px; }
    .booking-sheet .sheet-footer.is-review .sheet-price { display: flex; align-items: baseline; gap: 8px; }
    .booking-sheet .sheet-footer.is-review .sheet-price small { display: inline; }
    .booking-sheet .sheet-footer.is-review .sheet-next { flex: 1; }
    body.has-booking-sheet { padding-bottom: 82px; }
    body.has-booking-sheet .booking-launch { position: fixed; z-index: 90; bottom: 0; inset-inline: 0; padding: 12px 20px max(12px, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #fff; border-top: 1px solid #e5e8ec; }
    body.has-booking-sheet .booking-launch .booking-launch-rate { margin: 0; font-size: 21px !important; white-space: nowrap; }
    body.has-booking-sheet .booking-launch .booking-launch-rate small { display: block; font-size: 11px !important; }
    body.has-booking-sheet .booking-launch .booking-launch-button { width: auto; min-width: 130px; }
    body.has-booking-sheet .booking-launch p, body.has-booking-sheet #room-info .mobile:has(a[href='#book']) { display: none; }
}
@media (max-width: 360px) {
    .booking-sheet .sheet-next { padding-inline: 12px; font-size: 13px !important; }
    .booking-sheet .sheet-price strong { font-size: 19px !important; }
    .booking-sheet .sheet-progress li { font-size: 11px !important; }
    .booking-sheet .sheet-room strong { font-size: 15px !important; }
}
@media (prefers-reduced-motion: reduce) { dialog.booking-dialog[open] { animation: none; } }
