/* booking — section styles (loaded from by build.py) */ /* The four steps of the redesign, kept as one overlay over the page rather than a page of its own: this site is a single document, and the dialog is what the "#!booking" links open. Inside, it is the layout the handoff describes — the step on the left, the running total on the right, and on a phone the total rising out of the footer as a sheet. */ #vp-booking, #vp-booking * { box-sizing:border-box; } /* The script shows and hides the steps and the footer buttons with [hidden]; the rules below give them a display of their own, so it has to win here. */ #vp-booking [hidden] { display:none !important; } #vp-booking { position:fixed; inset:0; z-index:250; display:none; padding:32px; background:color-mix(in srgb, var(--color-neutral-900) 62%, transparent); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); font-family:var(--font-body); color:var(--color-text); } #vp-booking.is-open { display:grid; place-items:center; } #vp-booking .vp-booking__box { width:min(1240px,100%); max-height:calc(100vh - 64px); display:flex; flex-direction:column; overflow:hidden; border-radius:var(--radius-lg); background:var(--color-bg); box-shadow:var(--shadow-lg); } /* ------------------------------------------------------- head and steps -- */ #vp-booking .vp-booking__head { position:relative; display:flex; align-items:center; flex-wrap:wrap; gap:12px 24px; padding:20px 26px; border-bottom:1px solid var(--color-divider); background:color-mix(in srgb, var(--color-bg) 88%, transparent); } #vp-booking .vp-booking__headline { margin-right:auto; } #vp-booking .vp-booking__eyebrow { margin:0; color:var(--color-accent-700); font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; } #vp-booking .vp-booking__head h3 { margin:2px 0 0; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:22px; line-height:1.1; } #vp-booking .vp-booking__close { order:3; width:40px; height:40px; flex:none; border:1px solid var(--color-divider); border-radius:50%; background:var(--color-bg); color:var(--color-text); font-size:22px; line-height:1; cursor:pointer; } #vp-booking .vp-booking__close:hover { background:color-mix(in srgb, var(--color-text) 7%, transparent); } /* Every step is a target: a guest may go back to any of them. */ #vp-booking .vp-booking__steps { order:2; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; } #vp-booking .vp-booking__steps button { display:inline-flex; align-items:center; gap:9px; padding:8px 16px 8px 8px; border:0; border-radius:999px; background:transparent; color:color-mix(in srgb, var(--color-text) 50%, transparent); font-family:var(--font-body); font-size:14px; font-weight:600; cursor:pointer; transition:background .18s ease, color .18s ease; } #vp-booking .vp-booking__steps i { width:24px; height:24px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:color-mix(in srgb, var(--color-text) 10%, transparent); font-family:var(--font-heading); font-style:normal; font-size:12px; } #vp-booking .vp-booking__steps .is-done button { color:var(--color-text); } #vp-booking .vp-booking__steps .is-done i { background:var(--color-surface); } #vp-booking .vp-booking__steps .is-active button { background:var(--color-accent); color:var(--color-bg); } #vp-booking .vp-booking__steps .is-active i { background:color-mix(in srgb, var(--color-bg) 30%, transparent); color:var(--color-bg); } /* ------------------------------------------------------------ the layout -- */ #vp-booking .vp-booking__body { flex:1; min-height:0; overflow:auto; } #vp-booking .vp-booking__main { width:min(1240px,100%); margin:auto; padding:34px 32px 40px; display:grid; grid-template-columns:1.55fr .85fr; gap:40px; align-items:start; } #vp-booking .vp-booking__step { grid-column:1; } #vp-booking .vp-booking__step[hidden] { display:none; } #vp-booking .vp-booking__step h4 { margin:0; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:clamp(26px,2.4vw,34px); line-height:1.06; } #vp-booking .vp-booking__lead { max-width:640px; margin:12px 0 22px; color:color-mix(in srgb, var(--color-text) 74%, transparent); font-size:16px; line-height:1.55; } #vp-booking .vp-booking__lead--tight { margin:6px 0 14px; font-size:14px; } #vp-booking .vp-booking__row { display:flex; flex-wrap:wrap; align-items:end; gap:16px 20px; margin-bottom:20px; } #vp-booking .vp-booking__field { display:flex; flex-direction:column; } #vp-booking .vp-booking__field--grow { flex:1 1 240px; } #vp-booking .vp-booking__label { margin-bottom:8px; display:flex; align-items:baseline; gap:8px; color:color-mix(in srgb, var(--color-text) 58%, transparent); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } #vp-booking .vp-booking__label i { font-style:normal; font-weight:400; letter-spacing:0; text-transform:none; opacity:.8; } #vp-booking .vp-booking__label--section { margin-top:26px; } /* Steppers and inputs share the pill of the design system. 16px on the inputs is not a taste: anything smaller and iOS zooms the page on focus. */ #vp-booking .vp-booking__stepper { height:46px; display:inline-flex; align-items:center; align-self:flex-start; overflow:hidden; border:1px solid var(--color-divider); border-radius:999px; background:var(--color-surface); } #vp-booking .vp-booking__stepper button { width:46px; height:100%; flex:none; padding:0; border:0; background:transparent; color:var(--color-text); font-family:var(--font-body); font-size:20px; font-weight:700; cursor:pointer; } #vp-booking .vp-booking__stepper button:hover { background:color-mix(in srgb, var(--color-text) 7%, transparent); } #vp-booking .vp-booking__stepper button:disabled { opacity:.35; cursor:not-allowed; background:transparent; } #vp-booking .vp-booking__stepper b { min-width:52px; text-align:center; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:18px; } #vp-booking .vp-booking__input, #vp-booking .vp-booking__date { width:100%; min-height:52px; padding:0 20px; border:1px solid var(--color-divider); border-radius:999px; background:var(--color-surface); color:var(--color-text); font-family:var(--font-body); font-size:16px; } #vp-booking .vp-booking__input:focus-visible, #vp-booking .vp-booking__date:focus-visible { border-color:var(--color-accent); outline-offset:0; } #vp-booking .vp-booking__textarea { min-height:100px; padding:16px 20px; border-radius:var(--radius-md); resize:vertical; line-height:1.5; } #vp-booking .vp-booking__daynote { margin-top:6px; color:color-mix(in srgb, var(--color-text) 58%, transparent); font-size:13px; } #vp-booking .vp-booking__error { margin:14px 0 0; padding:12px 18px; border-radius:var(--radius-md); background:var(--color-accent-100); color:var(--color-accent-800); font-size:14px; line-height:1.5; } #vp-booking .vp-booking__empty { margin:0; color:color-mix(in srgb, var(--color-text) 65%, transparent); font-size:16px; line-height:1.55; } /* ------------------------------------------------------- step 1: a room -- */ #vp-booking .vp-booking__rooms { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } #vp-booking .vp-booking__room { display:flex; align-items:stretch; overflow:hidden; padding:0; border:2px solid transparent; border-radius:var(--radius-lg); background:var(--color-surface); color:var(--color-text); text-align:left; cursor:pointer; transition:border-color .18s ease, background .18s ease; } #vp-booking .vp-booking__room.is-active { border-color:var(--color-accent); background:var(--color-accent-100); } #vp-booking .vp-booking__room-img { width:132px; flex:none; background-position:center; background-size:cover; filter:saturate(.6) contrast(.85) brightness(1.1) opacity(.94); } #vp-booking .vp-booking__room-body { display:flex; flex-direction:column; gap:2px; padding:20px 22px; } #vp-booking .vp-booking__room-body b { font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:20px; } #vp-booking .vp-booking__room-body small { color:color-mix(in srgb, var(--color-text) 60%, transparent); font-size:13px; } #vp-booking .vp-booking__room-body i { margin-top:6px; color:var(--color-accent-700); font-style:normal; font-size:14px; font-weight:700; } /* The room just picked, shown larger right under the grid: the guest sees the photo and the room's own words without opening the summary panel — the one place worth showing that on a phone, where the aside is a sheet pulled up on demand rather than something in view. */ #vp-booking .vp-booking__roomdetail { display:flex; align-items:stretch; overflow:hidden; margin-top:18px; border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow-md); animation:vp-roomdetail-in .22s ease; } #vp-booking .vp-booking__roomdetail-img { flex:0 0 44%; min-height:240px; background-position:center; background-size:cover; filter:saturate(.6) contrast(.85) brightness(1.1) opacity(.94); } #vp-booking .vp-booking__roomdetail-body { display:flex; flex-direction:column; align-items:flex-start; flex:1; gap:6px; padding:28px 30px; } #vp-booking .vp-booking__roomdetail-eyebrow { color:var(--color-accent-700); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; } #vp-booking .vp-booking__roomdetail-body h5 { margin:0; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:clamp(22px,2.2vw,28px); line-height:1.1; } #vp-booking .vp-booking__roomdetail-meta { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:2px; color:color-mix(in srgb, var(--color-text) 60%, transparent); font-size:13px; } #vp-booking .vp-booking__roomdetail-meta i { font-style:normal; } #vp-booking .vp-booking__roomdetail-meta i:not(:first-child):before { content:"\00b7\0020"; } #vp-booking .vp-booking__roomdetail-body p { margin:6px 0 0; max-width:46ch; color:color-mix(in srgb, var(--color-text) 76%, transparent); font-size:15px; line-height:1.55; } #vp-booking .vp-booking__roomdetail-price { margin-top:auto; padding-top:16px; color:var(--color-accent-700); font-size:15px; font-weight:700; } #vp-booking .vp-booking__roomdetail-price b { font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:19px; } @keyframes vp-roomdetail-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } } /* ------------------------------------------------- step 2: day and hour -- */ #vp-booking .vp-booking__slots { display:grid; grid-template-columns:repeat(12,1fr); gap:8px; margin-top:8px; } #vp-booking .vp-booking__slot { display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 4px; border:1px solid var(--color-divider); border-radius:14px; background:var(--color-surface); color:var(--color-text); cursor:pointer; transition:background .18s ease, border-color .18s ease, color .18s ease; } #vp-booking .vp-booking__slot b { font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:15px; } #vp-booking .vp-booking__slot i { font-style:normal; font-size:11px; opacity:.72; } #vp-booking .vp-booking__slot em { font-style:normal; font-size:10px; font-weight:700; opacity:.8; } #vp-booking .vp-booking__slot:hover:not(:disabled) { border-color:var(--color-accent-400); } /* The whole booked span is filled, not only the hour it starts on. */ #vp-booking .vp-booking__slot.is-active, #vp-booking .vp-booking__slot.is-span { border-color:var(--color-accent); background:var(--color-accent); color:var(--color-bg); } /* Hours after midnight belong to the next day: outlined and badged, not filled. */ #vp-booking .vp-booking__slot.is-next { background:var(--color-accent-100); color:var(--color-accent-800); } #vp-booking .vp-booking__slot.is-taken, #vp-booking .vp-booking__slot.is-blocked, #vp-booking .vp-booking__slot.is-past { border-color:transparent; background:var(--color-neutral-300); color:color-mix(in srgb, var(--color-text) 42%, transparent); cursor:not-allowed; } #vp-booking .vp-booking__slot.is-taken b { text-decoration:line-through; } #vp-booking .vp-booking__slot-tag { font-size:10px; } #vp-booking .vp-booking__legend { display:flex; flex-wrap:wrap; gap:8px 20px; margin:14px 0 0; color:color-mix(in srgb, var(--color-text) 60%, transparent); font-size:13px; } #vp-booking .vp-booking__legend span { display:inline-flex; align-items:center; gap:8px; } #vp-booking .vp-booking__legend span:before { content:""; width:12px; height:12px; border-radius:4px; } #vp-booking .vp-booking__legend--mine:before { background:var(--color-accent); } #vp-booking .vp-booking__legend--next:before { background:var(--color-accent-100); border:1px solid var(--color-accent-300); } #vp-booking .vp-booking__legend--taken:before { background:var(--color-neutral-300); } #vp-booking .vp-booking__slotline { margin:14px 0 0; font-size:15px; } #vp-booking .vp-booking__slotline b { font-family:var(--font-heading); font-weight:var(--font-heading-weight); } #vp-booking .vp-booking__slotline-warn { display:block; margin-top:4px; color:var(--color-accent-700); font-style:normal; font-size:13px; } #vp-booking .vp-booking__night { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 20px; width:100%; margin-top:20px; padding:20px 24px; border:0; border-radius:var(--radius-lg); background:var(--color-accent-200); color:var(--color-accent-900); text-align:left; cursor:pointer; } #vp-booking .vp-booking__night:hover { background:var(--color-accent-300); } #vp-booking .vp-booking__night b { display:block; color:var(--color-text); font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:19px; } #vp-booking .vp-booking__night span { font-size:14px; line-height:1.5; } #vp-booking .vp-booking__night.is-active { background:var(--color-accent); color:var(--color-bg); } #vp-booking .vp-booking__night.is-active b { color:var(--color-bg); } /* ---------------------------------------------------- step 3: the extras -- */ #vp-booking .vp-booking__packages { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } #vp-booking .vp-booking__pack { display:flex; flex-direction:column; overflow:hidden; border:2px solid transparent; border-radius:var(--radius-lg); background:var(--color-surface); } #vp-booking .vp-booking__pack:has(.is-active) { border-color:var(--color-accent); background:var(--color-accent-100); } #vp-booking .vp-booking__package { display:flex; flex-direction:column; padding:0; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; } #vp-booking .vp-booking__package-img { height:150px; display:block; background-position:center; background-size:cover; filter:saturate(.6) contrast(.85) brightness(1.1) opacity(.94); } #vp-booking .vp-booking__package-body { display:flex; flex-direction:column; gap:6px; padding:18px 20px 0; } #vp-booking .vp-booking__package-body b { font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:21px; } #vp-booking .vp-booking__package-body small { color:color-mix(in srgb, var(--color-text) 72%, transparent); font-size:14px; line-height:1.5; } #vp-booking .vp-booking__package-price { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px 18px; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:21px; } #vp-booking .vp-booking__package-price em { padding:9px 16px; border:1px solid var(--color-divider); border-radius:999px; background:var(--color-bg); font-family:var(--font-heading); font-style:normal; font-size:14px; } #vp-booking .vp-booking__package.is-active .vp-booking__package-price em { border-color:var(--color-accent); background:var(--color-accent); color:var(--color-bg); } #vp-booking .vp-booking__adult { align-self:flex-start; margin:0 20px; padding:4px 10px; border-radius:999px; background:var(--color-accent-200); color:var(--color-accent-900); font-size:11px; font-weight:700; } /* What the package already includes, and the paid choices it opens once it is added. Each head is a small caps label with a sentence under it, so only the is set in caps — the note beside it stays a sentence. */ #vp-booking .vp-booking__opts { padding:4px 20px 18px; border-top:1px solid var(--color-divider); } #vp-booking .vp-booking__opts-head, #vp-booking .vp-booking__opt-head { display:flex; flex-direction:column; gap:2px; margin:16px 0 10px; } #vp-booking .vp-booking__opts-head b, #vp-booking .vp-booking__opt-head b { color:color-mix(in srgb, var(--color-text) 58%, transparent); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } #vp-booking .vp-booking__opts-head small, #vp-booking .vp-booking__opt-head small { color:color-mix(in srgb, var(--color-text) 62%, transparent); font-size:13px; line-height:1.45; } #vp-booking .vp-booking__opts-head i { align-self:flex-start; margin-top:4px; color:var(--color-accent-700); font-style:normal; font-size:14px; font-weight:700; } #vp-booking .vp-booking__chips { display:flex; flex-wrap:wrap; gap:8px; } #vp-booking .vp-booking__chip { min-height:40px; padding:0 14px; display:inline-flex; align-items:center; gap:8px; border:1px solid var(--color-divider); border-radius:999px; background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); font-size:13px; font-weight:600; cursor:pointer; } #vp-booking .vp-booking__chip.is-active { border-color:var(--color-accent); background:var(--color-accent); color:var(--color-bg); } #vp-booking .vp-booking__qty { display:inline-flex; align-items:center; gap:8px; margin-top:10px; font-size:13px; } #vp-booking .vp-booking__qty button { width:34px; height:34px; padding:0; border:1px solid var(--color-divider); border-radius:50%; background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); font-size:16px; font-weight:700; cursor:pointer; } #vp-booking .vp-booking__qty button:disabled { opacity:.35; cursor:not-allowed; } #vp-booking .vp-booking__incl { margin-top:12px; } #vp-booking .vp-booking__incl-head { margin:0 0 6px; color:color-mix(in srgb, var(--color-text) 58%, transparent); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } #vp-booking .vp-booking__incl ul { margin:0; padding:0; list-style:none; } #vp-booking .vp-booking__incl li { display:flex; align-items:flex-start; gap:9px; padding:3px 0; color:color-mix(in srgb, var(--color-text) 72%, transparent); font-size:13px; line-height:1.45; } #vp-booking .vp-booking__incl li:before { content:""; width:5px; height:5px; margin-top:7px; flex:none; border-radius:50%; background:var(--color-accent-2-600); } #vp-booking .vp-booking__offers { display:flex; flex-direction:column; gap:10px; } #vp-booking .vp-booking__offer { display:flex; align-items:flex-start; gap:14px; padding:18px 22px; border:1px solid transparent; border-radius:var(--radius-md); background:var(--color-surface); cursor:pointer; } #vp-booking .vp-booking__offer:has(input:checked) { border-color:var(--color-accent-300); background:var(--color-accent-100); } #vp-booking .vp-booking__offer input { width:18px; height:18px; flex:none; margin-top:2px; accent-color:var(--color-accent); } #vp-booking .vp-booking__offer-body { display:flex; flex-direction:column; gap:3px; } #vp-booking .vp-booking__offer-body b { font-size:16px; font-weight:600; } #vp-booking .vp-booking__offer-body small { color:color-mix(in srgb, var(--color-text) 62%, transparent); font-size:13px; line-height:1.45; } #vp-booking .vp-booking__offer-warn { margin-top:4px; color:var(--color-accent-700); font-style:normal; font-size:13px; } #vp-booking .vp-booking__age { display:flex; align-items:center; gap:10px; margin-top:8px; font-size:13px; } #vp-booking .vp-booking__age input { width:88px; min-height:40px; padding:0 14px; border:1px solid var(--color-divider); border-radius:999px; background:var(--color-bg); font-family:var(--font-body); font-size:16px; } /* --------------------------------------------------- step 4: who you are -- */ #vp-booking .vp-booking__channel { margin:6px 0 20px; padding:20px 24px; border-radius:var(--radius-md); background:var(--color-accent-2-200); color:var(--color-accent-2-900); font-size:14px; line-height:1.6; } /* Left empty by people, filled in by bots — never shown, never removed. */ #vp-booking .vp-booking__trap { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } #vp-booking .vp-booking__split { margin:20px 0; padding:22px 24px; border-radius:var(--radius-md); background:var(--color-surface); } #vp-booking .vp-booking__split-top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; } #vp-booking .vp-booking__split-top b { display:block; font-size:16px; font-weight:600; } #vp-booking .vp-booking__split-top small { display:block; margin-top:4px; max-width:420px; color:color-mix(in srgb, var(--color-text) 62%, transparent); font-size:13px; line-height:1.5; } #vp-booking .vp-booking__shares { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; } #vp-booking .vp-booking__share { display:inline-flex; align-items:center; gap:9px; padding:8px 16px 8px 8px; border:1px solid var(--color-divider); border-radius:999px; font-size:14px; font-weight:700; } #vp-booking .vp-booking__share i { width:24px; height:24px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--color-accent-200); color:var(--color-accent-800); font-style:normal; font-size:12px; } #vp-booking .vp-booking__split-hint { margin:12px 0 0; color:var(--color-accent-700); font-size:13px; } #vp-booking .vp-booking__consent { display:flex; align-items:flex-start; gap:12px; font-size:14px; line-height:1.55; } #vp-booking .vp-booking__consent input { width:22px; height:22px; flex:none; margin-top:1px; accent-color:var(--color-accent); } /* -------------------------------------------------------- the summary -- */ #vp-booking .vp-booking__aside { grid-column:2; grid-row:1 / span 4; position:sticky; top:0; padding:30px 32px 32px; border-radius:var(--radius-lg); background:var(--color-surface); box-shadow:var(--shadow-md); } #vp-booking .vp-booking__summary-title { margin:0 0 16px; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:24px; } #vp-booking .vp-booking__summary-empty { margin:0; color:color-mix(in srgb, var(--color-text) 62%, transparent); font-size:14px; line-height:1.55; } #vp-booking .vp-booking__summary-room { display:flex; align-items:center; gap:14px; margin-bottom:16px; } #vp-booking .vp-booking__summary-room span { width:56px; height:56px; flex:none; border-radius:var(--radius-md); background-position:center; background-size:cover; filter:saturate(.6) contrast(.85) brightness(1.1) opacity(.94); } #vp-booking .vp-booking__summary-room b { display:block; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:19px; } #vp-booking .vp-booking__summary-room small { color:color-mix(in srgb, var(--color-text) 60%, transparent); font-size:13px; } #vp-booking .vp-booking__line { display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid var(--color-divider); font-size:15px; } #vp-booking .vp-booking__line span { color:color-mix(in srgb, var(--color-text) 78%, transparent); } #vp-booking .vp-booking__line b { flex:none; font-size:15px; font-weight:700; } #vp-booking .vp-booking__line--sub span { padding-left:14px; opacity:.8; font-size:14px; } #vp-booking .vp-booking__line--cut b { color:var(--color-accent-2-700); } #vp-booking .vp-booking__line--muted b { font-weight:400; opacity:.7; } #vp-booking .vp-booking__line--each { border-bottom:0; } #vp-booking .vp-booking__summary-total { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-top:16px; } #vp-booking .vp-booking__summary-total span { color:color-mix(in srgb, var(--color-text) 58%, transparent); font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } #vp-booking .vp-booking__summary-total b { font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:34px; line-height:1; } #vp-booking .vp-booking__estimate { margin:14px 0 0; color:color-mix(in srgb, var(--color-text) 58%, transparent); font-size:13px; line-height:1.55; } /* ---------------------------------------------------------------- footer -- */ #vp-booking .vp-booking__foot { display:flex; align-items:center; gap:12px; padding:16px 26px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--color-divider); background:color-mix(in srgb, var(--color-bg) 94%, transparent); } #vp-booking .vp-booking__back, #vp-booking .vp-booking__next, #vp-booking .vp-booking__submit, #vp-booking .vp-booking__done-close { min-height:50px; padding:0 26px; display:inline-flex; align-items:center; justify-content:center; border:1px solid transparent; border-radius:999px; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:15px; cursor:pointer; transition:background .18s ease, border-color .18s ease; } #vp-booking .vp-booking__back { border-color:var(--color-divider); background:transparent; color:var(--color-text); } #vp-booking .vp-booking__back:hover { background:color-mix(in srgb, var(--color-text) 7%, transparent); } #vp-booking .vp-booking__next, #vp-booking .vp-booking__submit, #vp-booking .vp-booking__done-close { margin-left:auto; background:var(--color-accent); color:var(--color-bg); } #vp-booking .vp-booking__next:hover, #vp-booking .vp-booking__submit:hover { background:var(--color-accent-600); } #vp-booking .vp-booking__next:disabled, #vp-booking .vp-booking__submit:disabled { opacity:.45; cursor:not-allowed; } /* The handle of the summary sheet on a phone; beside the step on a wide screen the summary is already in view, so the script takes it out of the tab order. */ #vp-booking .vp-booking__foot-total { display:none; align-items:center; gap:10px; padding:0; border:0; background:transparent; color:var(--color-text); font-family:var(--font-body); cursor:pointer; } #vp-booking .vp-booking__foot-total span { color:color-mix(in srgb, var(--color-text) 58%, transparent); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } #vp-booking .vp-booking__foot-amount { font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:26px; line-height:1; } #vp-booking .vp-booking__foot-chevron { width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:6px solid var(--color-accent-700); transition:transform .2s ease; } #vp-booking .vp-booking__scrim { display:none; } /* ---------------------------------------------------------- confirmation -- */ #vp-booking .vp-booking__done { padding:56px 32px 64px; text-align:center; } #vp-booking .vp-booking__done-mark { width:96px; height:96px; margin:0 auto 24px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--color-accent-2-300); color:var(--color-accent-2-800); font-size:40px; } #vp-booking .vp-booking__done h4 { margin:0; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:34px; line-height:1.06; } #vp-booking .vp-booking__done-text { max-width:520px; margin:16px auto 0; color:color-mix(in srgb, var(--color-text) 76%, transparent); font-size:16px; line-height:1.6; } #vp-booking .vp-booking__done-recap { max-width:520px; margin:22px auto 0; padding:20px 24px; border-radius:var(--radius-md); background:var(--color-surface); font-size:15px; line-height:1.7; text-align:left; } #vp-booking .vp-booking__done-note { max-width:520px; margin:16px auto 0; color:color-mix(in srgb, var(--color-text) 58%, transparent); font-size:13px; line-height:1.55; } #vp-booking .vp-booking__done-close { margin:26px auto 0; } /* Card-mode split: the wallet of links the guest shares out. Same calm frame as the "request sent" panel, but a working list rather than a receipt. */ #vp-booking .vp-booking__links { padding:48px 32px 56px; text-align:center; } #vp-booking .vp-booking__links h4 { margin:0; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:30px; line-height:1.08; } #vp-booking .vp-booking__links-lead { max-width:560px; margin:16px auto 0; color:color-mix(in srgb, var(--color-text) 72%, transparent); font-size:15px; line-height:1.6; } #vp-booking .vp-booking__links-list { max-width:560px; margin:26px auto 0; display:flex; flex-direction:column; gap:12px; text-align:left; } #vp-booking .vp-booking__linkrow { padding:14px 16px; border-radius:var(--radius-md); background:var(--color-surface); } #vp-booking .vp-booking__linkrow--mine { outline:2px solid var(--color-accent); outline-offset:-2px; } #vp-booking .vp-booking__linkrow-head { display:flex; align-items:center; justify-content:space-between; gap:12px; } #vp-booking .vp-booking__linkrow-who { font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:15px; } #vp-booking .vp-booking__linkrow-who small { display:block; margin-top:2px; font-family:var(--font-body); font-weight:400; font-size:13px; color:color-mix(in srgb, var(--color-text) 60%, transparent); } #vp-booking .vp-booking__linkrow-state { display:inline-flex; align-items:center; gap:7px; font-size:13px; white-space:nowrap; } #vp-booking .vp-booking__linkrow-state::before { content:""; width:9px; height:9px; border-radius:50%; background:currentColor; } #vp-booking .vp-booking__linkrow-state[data-state="open"] { color:color-mix(in srgb, var(--color-text) 46%, transparent); } #vp-booking .vp-booking__linkrow-state[data-state="busy"] { color:var(--color-accent-700); } #vp-booking .vp-booking__linkrow-state[data-state="paid"] { color:var(--color-accent-2-800); } #vp-booking .vp-booking__linkrow-state[data-state="off"] { color:#b23; } #vp-booking .vp-booking__linkrow-url { display:flex; gap:8px; margin-top:12px; } #vp-booking .vp-booking__linkrow-url input { flex:1 1 auto; min-width:0; padding:9px 12px; border:1px solid var(--color-border, color-mix(in srgb, var(--color-text) 16%, transparent)); border-radius:10px; background:var(--color-bg); font-size:13px; color:var(--color-text); } #vp-booking .vp-booking__linkrow-url button { flex:0 0 auto; min-height:40px; padding:0 16px; border:1px solid transparent; border-radius:999px; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:13px; cursor:pointer; background:var(--color-accent); color:var(--color-bg); } #vp-booking .vp-booking__linkrow-url button.is-copied { background:var(--color-accent-2-300); color:var(--color-accent-2-800); } #vp-booking .vp-booking__linkrow-url a.vp-booking__linkrow-pay { flex:0 0 auto; min-height:40px; padding:0 16px; display:inline-flex; align-items:center; border-radius:999px; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:13px; text-decoration:none; background:var(--color-accent); color:var(--color-bg); } #vp-booking .vp-booking__linkrow-url button.is-ghost { background:transparent; border-color:color-mix(in srgb, var(--color-text) 22%, transparent); color:var(--color-text); } /* ---------------------------------------------------------------- narrow -- */ @media (max-width:1100px) { #vp-booking .vp-booking__rooms, #vp-booking .vp-booking__packages { grid-template-columns:1fr; } } /* 980px: the summary stops being a column beside the step and becomes a sheet that rises out of the total in the footer. */ @media (max-width:980px) { #vp-booking { padding:0; } #vp-booking .vp-booking__box { width:100%; height:100%; max-height:100vh; border-radius:0; } #vp-booking .vp-booking__main { grid-template-columns:1fr; gap:0; padding:22px 18px 32px; } #vp-booking .vp-booking__step, #vp-booking .vp-booking__aside { grid-column:1; } #vp-booking .vp-booking__aside { position:fixed; inset:auto 0 0; z-index:2; grid-row:auto; max-height:70vh; overflow:auto; border-radius:var(--radius-lg) var(--radius-lg) 0 0; padding:24px 20px calc(96px + env(safe-area-inset-bottom)); transform:translateY(101%); transition:transform .24s ease; } #vp-booking.is-summary .vp-booking__aside { transform:none; } #vp-booking .vp-booking__scrim { position:fixed; inset:0; z-index:1; display:block; background:color-mix(in srgb, var(--color-neutral-900) 45%, transparent); opacity:0; visibility:hidden; transition:opacity .24s ease; } #vp-booking.is-summary .vp-booking__scrim { opacity:1; visibility:visible; } #vp-booking .vp-booking__foot-total { display:inline-flex; } #vp-booking.is-summary .vp-booking__foot-chevron { transform:rotate(180deg); } #vp-booking .vp-booking__foot { position:relative; z-index:3; } #vp-booking .vp-booking__steps span { display:none; } #vp-booking .vp-booking__steps button { padding:6px; } } @media (max-width:780px) { #vp-booking .vp-booking__head { padding:14px 18px; } #vp-booking .vp-booking__head h3 { font-size:19px; } #vp-booking .vp-booking__step h4 { font-size:26px; } #vp-booking .vp-booking__lead { font-size:15px; } /* Four hours across, not twelve. */ #vp-booking .vp-booking__slots { grid-template-columns:repeat(4,1fr); gap:6px; } #vp-booking .vp-booking__slot { padding:12px 4px; } #vp-booking .vp-booking__room-img { width:104px; } #vp-booking .vp-booking__roomdetail { flex-direction:column; } #vp-booking .vp-booking__roomdetail-img { min-height:180px; } #vp-booking .vp-booking__roomdetail-body { padding:18px 20px 20px; } #vp-booking .vp-booking__roomdetail-body h5 { font-size:22px; } #vp-booking .vp-booking__package-img { height:120px; } #vp-booking .vp-booking__input, #vp-booking .vp-booking__date { min-height:54px; } #vp-booking .vp-booking__foot { padding:12px 16px calc(12px + env(safe-area-inset-bottom)); gap:10px; } #vp-booking .vp-booking__back { padding:0 18px; } #vp-booking .vp-booking__next, #vp-booking .vp-booking__submit { min-height:52px; padding:0 20px; } #vp-booking .vp-booking__done { padding:40px 20px 48px; } #vp-booking .vp-booking__done h4 { font-size:28px; } } @media (prefers-reduced-motion:reduce) { #vp-booking .vp-booking__aside, #vp-booking .vp-booking__scrim { transition:none; } #vp-booking .vp-booking__roomdetail { animation:none; } }