/* Prana Veda's booking (booking.js): site.css tokens throughout; one radius (--r), one lift on hover (as a.card),
   pills and round controls at 999px. */
/* a soft spring (settles with a whisper of overshoot) for everything that opens and closes */
:root { --spring: linear(0, 0.063, 0.22 8.5%, 0.53 17.2%, 0.767 26%, 0.904 34.6%, 0.976 43.4%, 1.008 52.6%, 1.016 61.4%, 1.011 72%, 1.003 85%, 1); --spring-ms: 560ms; }
.drawer { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--spring-ms) var(--spring), opacity 240ms var(--ease); }
.drawer.is-open { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows var(--spring-ms) var(--spring), opacity 320ms var(--ease) 60ms; }
.drawer__in { display: block; min-height: 0; overflow: hidden; }
.drawer:not(.is-open) .drawer__in { visibility: hidden; transition: visibility 0s linear var(--spring-ms); }
.mark { width: 1.1em; height: 1.1em; flex: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bk { padding-block: clamp(24px, 3.4vw, 40px) clamp(64px, 8vw, 104px); }
.bk__intro { display: grid; gap: 10px; max-width: 720px; margin-bottom: clamp(20px, 3vw, 32px); }
.bk .lede, .bk__head .lede, .dock__status, .side__note, .room__text, .pkg__line, .add__line, .none__l { text-wrap: pretty; }
.bk .title, .bk__intro .lede { text-wrap: balance; }
.bk__head { display: grid; gap: 8px; margin-bottom: clamp(18px, 2.6vw, 28px); }
.bk__head .title { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); }
.card-soft { background: var(--surface); border-radius: var(--r); box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: var(--paper-2); color: var(--accent-ink); font-size: 0.82rem; font-weight: 500; white-space: nowrap; }
.link-btn { padding: 4px 0; border: 0; background: none; color: var(--accent-ink); font: 500 0.92rem/1.3 var(--text); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; cursor: pointer; transition: text-decoration-color 160ms var(--ease); }
.link-btn:hover { text-decoration-color: currentColor; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn--on { background: var(--accent); color: var(--on-accent); }
.btn--on .mark { width: 16px; height: 16px; }

/* segments: the step bar and the guest tabs are one control, in three states:
   active (being chosen now) · done (chosen, not open now: a check) · waiting (not chosen yet) */
.segs { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.segs--who { align-items: center; margin-bottom: 20px; }
.seg { display: inline-flex; align-items: center; gap: 12px; padding: 10px 22px 10px 10px; border: 0; border-radius: 999px; background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); font: 500 0.95rem/1.25 var(--text); text-align: left; cursor: pointer; transition: background 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease); }
.seg:disabled { cursor: default; }
.seg__n { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 0.85rem; font-variant-numeric: tabular-nums; transition: background 200ms var(--ease), color 200ms var(--ease); }
.seg__n .mark { width: 15px; height: 15px; }
.seg__t { display: grid; gap: 2px; }
.seg__t small { font-size: 0.8rem; font-weight: 400; color: var(--ink-2); }
.seg.is-active { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 0 0 1px var(--accent); }
.seg.is-active .seg__n { background: var(--on-accent); color: var(--accent); box-shadow: none; }
.seg.is-active .seg__t small { color: inherit; opacity: 0.85; }
.seg.is-done { color: var(--ink); }
.segs--who .seg.is-done { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.seg.is-done .seg__n { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-ink); box-shadow: none; }
.seg:not(.is-active):not(:disabled):hover { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--ink); }
.segs--who .link-btn { margin-left: 8px; }

/* the step bar: a quiet line stepper, circles joined by hairlines, nothing filled but the current number (the guest
   tabs below are pills, so the two never read as the same control) */
.steps { display: flex; justify-content: center; align-items: center; margin: 0 0 clamp(26px, 3.6vw, 40px); padding: 0; list-style: none; }
.steps li { display: flex; align-items: center; }
.steps li + li::before { content: ''; transform-origin: left center; width: clamp(28px, 6vw, 72px); height: 1.5px; margin-inline: 14px; border-radius: 2px; background: var(--line); transition: background 300ms var(--ease); }
.steps li.is-active::before, .steps li.is-done::before { background: var(--accent); }
.step { display: inline-flex; align-items: center; gap: 10px; padding: 4px; border: 0; background: none; color: var(--ink-2); font: 500 0.92rem/1.2 var(--text); cursor: pointer; }
.step:disabled { cursor: default; }
.step__n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 0.82rem; transition: background 200ms var(--ease), color 200ms var(--ease); }
.step__n .mark { width: 14px; height: 14px; }
.is-active > .step { color: var(--ink); }
.is-active .step__n { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.is-done .step__n { color: var(--accent-ink); box-shadow: inset 0 0 0 1.5px var(--accent); }
.step:not(:disabled):hover { color: var(--accent-ink); }

/* the booking header: the logo, the language and the menu (as an icon at every width); no links to wander off to */
.nav--quiet .nav__menu { display: inline-flex; }

/* 1 · dates */
.bk__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(16px, 2.4vw, 28px); align-items: start; }
.cal { padding: clamp(16px, 2.4vw, 28px); }
.cal__body { position: relative; }
.cal__prev, .cal__next { position: absolute; top: -6px; z-index: 1; }
.cal__prev { left: 0; } .cal__next { right: 0; }
/* a light note: soft tint, quieter ink, an info mark */
.note-box { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; padding: 12px 16px; border-radius: var(--r); background: color-mix(in srgb, var(--paper-2) 70%, transparent); color: var(--ink-2); font-size: 0.9rem; line-height: 1.5; text-wrap: balance; }
.note-box .mark { width: 17px; height: 17px; margin-top: 2px; color: var(--accent-ink); opacity: 0.8; }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: 999px; background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: background 180ms var(--ease), color 180ms var(--ease), box-shadow 180ms var(--ease); }
.icon-btn:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 0 0 1px var(--accent); }
.icon-btn:disabled { opacity: 0.35; cursor: default; }
.cal__months { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: clamp(20px, 4vw, 48px); }
.cal__name { margin-bottom: 10px; text-align: center; font-family: var(--head); font-size: 1.3rem; color: var(--head-ink); }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 4px; }
.cal__wd { padding-bottom: 6px; text-align: center; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--ink-2); }
.cal__wd.is-sat { color: var(--accent-ink); font-weight: 500; }
.cal__day { position: relative; display: grid; place-items: center; aspect-ratio: 1; padding: 0; border: 0; background: none; color: var(--ink-2); font: 400 0.92rem/1 var(--text); }
.cal__day > span { position: relative; z-index: 1; display: grid; place-items: center; width: min(42px, 92%); aspect-ratio: 1; border-radius: 999px; }
.cal__day.is-past { color: color-mix(in srgb, var(--ink-2) 45%, transparent); text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); }
.cal__day.is-off { color: var(--ink-2); }
.cal__day.is-sat { color: var(--ink); font-weight: 500; cursor: pointer; }
.cal__day.is-sat > span { box-shadow: inset 0 0 0 1px var(--line); }
.cal__day.is-sat:hover > span { background: var(--accent); color: var(--on-accent); box-shadow: none; }
/* the stay: a soft band from arrival to departure, shown at once (no motion: Ethan, 2026-10-31). Nothing on the
   arrival click; hovering a departure previews the stay. */
.cal__day::before { content: ''; position: absolute; inset: 12% 0; background: color-mix(in srgb, var(--accent) 16%, transparent); visibility: hidden; pointer-events: none; }
.cal__day.is-in::before, .cal__day.is-leave::before, .cal__day.has-end::before { visibility: visible; }
.cal__day.is-arrive::before { left: 50%; }
.cal__day.is-leave::before { right: 50%; }
.cal__day.is-arrive.is-leave::before { display: none; }
.cal__grid > :nth-child(7n + 1).is-in::before { border-radius: 999px 0 0 999px; }
.cal__grid > :nth-child(7n).is-in::before { border-radius: 0 999px 999px 0; }
.cal__day.is-in { color: var(--ink); }
.cal__day.is-arrive > span, .cal__day.is-leave > span { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.cal__day.is-preview.is-leave > span { background: color-mix(in srgb, var(--accent) 70%, var(--surface)); }

.side { position: sticky; top: calc(var(--nav-h) + 16px); display: grid; gap: 16px; padding: clamp(18px, 2.2vw, 24px); }
.when { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); }
.when__box { display: grid; gap: 2px; padding: 12px 14px; }
.when__box + .when__box { box-shadow: inset 1px 0 0 var(--line); }
.when__box.is-next { box-shadow: inset 0 0 0 2px var(--accent); border-radius: var(--r); }
.when__k { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); font-weight: 500; }
.when__v { font-size: 1rem; color: var(--ink); }
.side__range { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.95rem; }
.side__range .mark { color: var(--accent-ink); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.side__k { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.side__k .mark { color: var(--accent-ink); }
.side__note { font-size: 0.88rem; color: var(--ink-2); }
.side__go { width: 100%; }
.stepper { display: inline-flex; align-items: center; gap: 4px; }
.stepper__b { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 999px; background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: background 180ms var(--ease), color 180ms var(--ease), box-shadow 180ms var(--ease); }
.stepper__b:hover:not(:disabled) { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 0 0 1px var(--accent); }
.stepper__b:disabled { opacity: 0.35; cursor: default; }
.stepper__b .mark { width: 16px; height: 16px; }
.stepper__n { min-width: 2ch; text-align: center; font-weight: 500; font-variant-numeric: tabular-nums; }

/* 2 · rooms */
.rooms__group + .rooms__group { margin-top: clamp(28px, 4vw, 44px); }
.rooms__gh { display: grid; gap: 2px; margin-bottom: 14px; }
.rooms__gh h3 { font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.7rem); }
/* two to a row on laptops (each house has two or four rooms, so rows always fill), photo beside the details */
.rooms__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.room { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: var(--r); background: var(--surface); box-shadow: 0 0 0 1px var(--line); transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.room::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--shadow); opacity: 0; transition: opacity 200ms var(--ease); pointer-events: none; }
.room:hover { transform: translateY(-3px); }
.room:hover::after { opacity: 1; }
.room.is-on { box-shadow: 0 0 0 2px var(--accent); }
.room__photo { position: relative; overflow: hidden; border-radius: var(--r) var(--r) 0 0; }
.slides { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.slides::-webkit-scrollbar { display: none; }
.slides img { flex: 0 0 100%; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; scroll-snap-align: start; }
.slide-btn { position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; margin-top: -18px; border: 0; border-radius: 999px; background: rgb(255 255 255 / 0.9); color: #3d3418; box-shadow: 0 2px 10px rgb(0 0 0 / 0.18); cursor: pointer; opacity: 0; transition: opacity 200ms var(--ease), background 180ms var(--ease), color 180ms var(--ease); }
.slide-btn--prev { left: 10px; } .slide-btn--next { right: 10px; }
.slide-btn .mark { width: 18px; height: 18px; }
.room:hover .slide-btn:not(:disabled), .slide-btn:focus-visible { opacity: 1; }
.slide-btn:hover { background: var(--accent); color: var(--on-accent); }
.slide-btn:disabled { pointer-events: none; }
@media (hover: none) { .slide-btn:not(:disabled) { opacity: 1; } }
.dots { position: absolute; left: 50%; bottom: 10px; z-index: 2; display: flex; gap: 6px; translate: -50% 0; }
.dots i { width: 6px; height: 6px; border-radius: 999px; background: rgb(255 255 255 / 0.55); transition: width 220ms var(--ease), background 220ms var(--ease); }
.dots i.is-on { width: 18px; background: #fff; }
.room__tick { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px; background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 14px rgb(0 0 0 / 0.25); }
.room__body { display: grid; gap: 12px; align-content: start; padding: 16px clamp(16px, 2vw, 22px) 18px; }
.room__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.room__name { font-size: 1.6rem; }
.room__price { display: grid; justify-items: end; font-size: 1.2rem; font-weight: 500; color: var(--ink); line-height: 1.15; white-space: nowrap; text-align: right; }
.room__from { font-size: 0.82rem; font-weight: 400; color: var(--ink-2); }
.room__per { font-size: 0.78rem; font-weight: 400; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }
.chip-i { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--paper-2); color: var(--ink); font-size: 0.84rem; line-height: 1.2; }
.chip-i .mark { width: 15px; height: 15px; color: var(--accent-ink); }
.chip-i[data-tip] { cursor: help; }
.chip-i[data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); padding: 6px 10px; border-radius: 6px; background: var(--ink); color: var(--paper); font-size: 0.8rem; white-space: nowrap; pointer-events: none; opacity: 0; translate: -50% 4px; transition: opacity 160ms var(--ease), translate 160ms var(--ease); z-index: 2; }
.chip-i[data-tip]:hover::after, .chip-i[data-tip]:focus-visible::after { opacity: 1; translate: -50% 0; }
.room__text { color: var(--ink-2); font-size: 0.94rem; }
.room__foot { display: flex; justify-content: flex-end; margin-top: 4px; }
.room__n { padding-top: 2px; }
.room__n { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--ink-2); }
.dock { position: sticky; bottom: 0; z-index: 5; margin-top: clamp(24px, 3vw, 36px); padding-block: 14px; }
body:has(.ip-wrap) .dock { bottom: 78px; } /* in the preview, the Islands pill sits at the bottom: the bar rides above it */
.dock__note { display: none; }
.dock__row { display: flex; align-items: center; gap: 10px; max-width: 640px; margin-inline: auto; }
.dock__in { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 20px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.dock__in .btn { border-radius: 999px; }
.dock__status { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-weight: 500; font-size: 0.95rem; }
.dock__status .mark { color: var(--accent-ink); }
.dock__status.is-ok .mark { color: #3f7a4b; }
/* the way back, everywhere: a round arrow beside the step's main button */
.back-btn { display: inline-grid; place-items: center; width: 52px; height: 52px; flex: none; border: 0; border-radius: 999px; background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line), var(--shadow); cursor: pointer; transition: background 180ms var(--ease), color 180ms var(--ease), box-shadow 180ms var(--ease); }
.back-btn:hover { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.back-btn .mark { width: 20px; height: 20px; }
.actions { display: flex; align-items: center; gap: 10px; }
.actions .btn { flex: 1; }
.card-soft .back-btn, .form .back-btn { box-shadow: inset 0 0 0 1px var(--line); width: 48px; height: 48px; }
.card-soft .back-btn:hover, .form .back-btn:hover { box-shadow: inset 0 0 0 1px var(--accent); }

/* 3 · retreat */
.bk__with-sum { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(16px, 2.4vw, 28px); align-items: start; }
.pkgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 18px); margin: 0; padding: 0; border: 0; min-width: 0; }
.pkg { position: relative; display: grid; grid-template-rows: auto 1fr; border-radius: var(--r); background: var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.pkg::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--shadow); opacity: 0; transition: opacity 200ms var(--ease); pointer-events: none; }
.pkg:hover { transform: translateY(-3px); }
.pkg:hover::after { opacity: 1; }
.pkg.is-on { box-shadow: 0 0 0 2px var(--accent); }
.pkg:has(.pkg__radio:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.pkg__radio { position: absolute; opacity: 0; pointer-events: none; }
.pkg__cover { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r) var(--r) 0 0; }
.pkg__cover img { width: 100%; height: 100%; object-fit: cover; transition: scale 900ms var(--ease); }
.pkg:hover .pkg__cover img { scale: 1.045; }
.pkg__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(16 12 6 / 0.1) 0%, rgb(16 12 6 / 0.12) 38%, rgb(16 12 6 / 0.55) 66%, rgb(16 12 6 / 0.86) 100%); }
.pkg__name { position: absolute; inset: auto 0 0 0; display: grid; gap: 10px; padding: 0 clamp(18px, 2vw, 24px) clamp(20px, 2.4vw, 26px); color: #fff; text-shadow: 0 2px 22px rgb(0 0 0 / 0.3); }
.pkg__cover { container-type: inline-size; }
/* sized to the card, so "Ayurveda &" always holds one line: the name is two lines on every card */
.pkg__words { display: grid; font-family: var(--head); font-weight: 300; font-size: clamp(1.9rem, 14.5cqi, 3.2rem); line-height: 1; letter-spacing: -0.015em; }
.pkg__words > span { white-space: nowrap; }
.pkg__words em { margin-left: 0.06em; font-size: 0.5em; font-style: italic; font-weight: 300; color: #ecdcb4; vertical-align: 0.35em; }
.pkg__dot { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: rgb(255 255 255 / 0.2); box-shadow: inset 0 0 0 2px #fff; color: transparent; backdrop-filter: blur(4px); transition: background 200ms var(--ease), color 200ms var(--ease); }
.pkg__dot .mark { width: 16px; height: 16px; }
.pkg.is-on .pkg__dot { background: #fff; color: #3d3418; }
.pkg__body { display: grid; gap: 12px; align-content: start; padding: 16px clamp(14px, 1.6vw, 18px) 18px; }
.pkg__line { color: var(--ink-2); font-size: 0.92rem; }
.pkg__price { display: grid; gap: 2px; font-size: 1.45rem; font-weight: 500; color: var(--ink); line-height: 1.15; }
.pkg__for { font-size: 0.82rem; font-weight: 400; color: var(--ink-2); }
.perks { display: grid; gap: 9px; padding-top: 12px; border-top: 1px solid var(--line); }
.perks.perks--more { padding-top: 9px; border-top: 0; }
.perk { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 0.9rem; line-height: 1.4; }
.perk .mark { width: 18px; height: 18px; margin-top: 1px; color: var(--accent-ink); }
.more-btn { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 4px 0; border: 0; background: none; color: var(--accent-ink); font: 500 0.88rem/1.2 var(--text); cursor: pointer; }
.more-btn .mark { width: 16px; height: 16px; transition: rotate 220ms var(--ease); }
.more-btn[aria-expanded="true"] .mark { rotate: 180deg; }
.more-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.none { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 26px; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--r); background: var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.none:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.none.is-on { box-shadow: 0 0 0 2px var(--accent); }
.none:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.none input { position: absolute; opacity: 0; pointer-events: none; }
.none__text { display: grid; gap: 2px; }
.none__t { font-weight: 500; }
.none__l { font-size: 0.88rem; color: var(--ink-2); }
.none.is-on .add__box { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.adds { display: grid; gap: 10px; margin-top: clamp(22px, 3vw, 32px); }
.add { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 26px; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r); background: var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.add:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.add.is-on { box-shadow: 0 0 0 2px var(--accent); }
.add:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.add input { position: absolute; opacity: 0; pointer-events: none; }
.add__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; background: var(--paper-2); color: var(--accent-ink); }
.add__icon .mark { width: 20px; height: 20px; }
.add__text { display: grid; gap: 2px; }
.add__name { font-weight: 500; }
.add__name .chip { vertical-align: 0.1em; margin-left: 4px; }
.add__line { font-size: 0.88rem; color: var(--ink-2); }
.add__price { display: grid; justify-items: end; font-weight: 500; white-space: nowrap; }
.add__price small { font-size: 0.78rem; font-weight: 400; color: var(--ink-2); }
.add__box { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--line); color: transparent; transition: background 180ms var(--ease), color 180ms var(--ease); }
.add__box .mark { width: 16px; height: 16px; }
.add.is-on .add__box { background: var(--accent); color: var(--on-accent); box-shadow: none; }

.sum { position: sticky; top: calc(var(--nav-h) + 16px); display: grid; gap: 14px; padding: clamp(18px, 2.2vw, 24px); }
.sum__t { font-family: var(--head); font-size: 1.4rem; color: var(--head-ink); }
.sum__row { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: start; font-size: 0.94rem; }
.sum__row .mark { margin-top: 2px; color: var(--accent-ink); }
.sum__row small, .sum__people small { display: block; color: var(--ink-2); font-size: 0.82rem; }
.sum__people { display: grid; gap: 10px; padding: 12px 0 0; margin: 0; list-style: none; border-top: 1px solid var(--line); }
.sum__people li { display: flex; justify-content: space-between; gap: 12px; font-size: 0.94rem; }
.sum__people b { font-weight: 500; white-space: nowrap; }
.sum__people b.is-soft { font-weight: 400; color: var(--ink-2); }
.sum__total { display: flex; align-items: baseline; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--line); font-weight: 500; }
.sum__total b { font-size: 1.5rem; font-weight: 500; }
.sum__total small { font-size: 0.8rem; font-weight: 400; color: var(--ink-2); }
.sum__note { font-size: 0.84rem; color: var(--ink-2); text-wrap: pretty; }
.sum__left { display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--ink-2); }
.sum__left .mark { width: 16px; height: 16px; color: var(--accent-ink); }

/* 4 · details: one grouped block of fields (hairlines between, the whole block rounded), labels that float up as
   you type, the message tucked behind a link */
.form { display: grid; gap: 16px; padding: clamp(18px, 2.4vw, 28px); }
.fields { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.fields__row { display: grid; grid-template-columns: 1fr 1fr; }
.fields .fl, .fields .fl input { border-radius: 0; }
.fields__row .fl + .fl { border-left: 1px solid var(--line); }
.fields__row + .fl { border-top: 1px solid var(--line); }
.fl { position: relative; display: block; border-radius: var(--r); }
.fl input, .fl textarea { display: block; width: 100%; padding: 26px 16px 10px; border: 0; border-radius: var(--r); background: transparent; color: var(--ink); font: 400 1rem/1.4 var(--text); outline: none; transition: box-shadow 160ms var(--ease); }
.fl textarea { min-height: 120px; resize: vertical; padding-top: 30px; }
.fl > span { position: absolute; left: 16px; top: 50%; translate: 0 -50%; color: var(--ink-2); font-size: 1rem; pointer-events: none; transform-origin: left top; transition: top 180ms var(--ease), translate 180ms var(--ease), font-size 180ms var(--ease), color 180ms var(--ease); }
.fl--area > span { top: 26px; }
.fl input:focus + span, .fl input:not(:placeholder-shown) + span, .fl textarea:focus + span, .fl textarea:not(:placeholder-shown) + span { top: 9px; translate: 0 0; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.02em; color: var(--accent-ink); }
.fl input:focus, .fl textarea:focus { position: relative; z-index: 1; box-shadow: inset 0 0 0 2px var(--accent); }
.fl:has(:focus) > span { z-index: 2; }
.fl.is-bad input, .fl.is-bad textarea { box-shadow: inset 0 0 0 2px #a3402c; }
.fl--area { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.form .more-btn { justify-self: start; margin-top: -4px; }
.form__err { color: #a3402c; font-size: 0.92rem; }
.done { display: grid; justify-items: center; gap: 12px; max-width: 560px; margin-inline: auto; padding: clamp(24px, 4vw, 40px); text-align: center; }
.done .sum { position: static; width: 100%; text-align: left; box-shadow: none; padding: 8px 0 0; }
.done__check { width: 56px; height: 56px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .done__check circle, .done__check path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 700ms var(--ease) forwards; }
  .done__check path { animation-delay: 380ms; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer.is-open { transition: none; } }

/* booked rooms: greyed, a lock badge where the button was, and a tooltip on hover or focus saying why */
.room.is-booked { cursor: not-allowed; }
.room.is-booked:hover { transform: none; }
.room.is-booked:hover::after { opacity: 0; }
.room.is-booked .room__photo { filter: grayscale(1); opacity: 0.55; }
.room.is-booked .room__body > :not(.room__foot) { opacity: 0.55; }
.room__booked { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); font-size: 0.9rem; font-weight: 500; }
.room__booked .mark { width: 16px; height: 16px; }
.room__tip { position: absolute; left: 50%; top: 16px; z-index: 3; width: max-content; max-width: min(300px, 86%); padding: 9px 13px; border-radius: 8px; background: var(--ink); color: var(--paper); font-size: 0.85rem; line-height: 1.4; text-align: center; text-wrap: balance; pointer-events: none; opacity: 0; translate: -50% -4px; transition: opacity 160ms var(--ease), translate 160ms var(--ease); }
.room.is-booked:hover .room__tip, .room.is-booked:focus-visible .room__tip { opacity: 1; translate: -50% 0; }

/* Questions before booking: a floating pill at the bottom centre, and the popup over a dark blur */
.ask-pill { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); padding: 12px 20px 12px 16px; border: 0; border-radius: 999px; background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 10px 30px -10px rgb(40 30 10 / 0.35); font: 400 0.95rem/1.2 var(--text); white-space: nowrap; cursor: pointer; translate: -50% 0; transition: translate 280ms var(--ease), opacity 220ms var(--ease), background 180ms var(--ease), color 180ms var(--ease); }
.ask-pill .mark { width: 18px; height: 18px; color: var(--accent-ink); transition: color 180ms var(--ease); }
.ask-pill b { font-weight: 500; color: var(--accent-ink); transition: color 180ms var(--ease); }
.ask-pill:hover { background: var(--accent); color: var(--on-accent); }
.ask-pill:hover b, .ask-pill:hover .mark { color: var(--on-accent); }
body.has-dock .ask-pill, body:has(dialog.ask[open]) .ask-pill { opacity: 0; translate: -50% 140%; pointer-events: none; }
body:has(.ip-wrap) .ask-pill { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } /* above the Islands preview card */
@starting-style { .ask-pill { opacity: 0; translate: -50% 140%; } }
.bk { padding-bottom: clamp(110px, 12vw, 140px); } /* room for the pill under the last control */
dialog.ask { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: 16px; background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.45); opacity: 0; scale: 0.97; translate: 0 8px; transition: opacity 260ms var(--ease), scale 260ms var(--ease), translate 260ms var(--ease), overlay 260ms allow-discrete, display 260ms allow-discrete; }
dialog.ask[open] { opacity: 1; scale: 1; translate: 0 0; }
@starting-style { dialog.ask[open] { opacity: 0; scale: 0.97; translate: 0 8px; } }
dialog.ask::backdrop { background: rgb(18 14 8 / 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); transition: background 260ms var(--ease), backdrop-filter 260ms var(--ease), overlay 260ms allow-discrete, display 260ms allow-discrete; }
dialog.ask[open]::backdrop { background: rgb(18 14 8 / 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
@starting-style { dialog.ask[open]::backdrop { background: rgb(18 14 8 / 0); backdrop-filter: blur(0); } }
.ask__panel { position: relative; padding: clamp(22px, 4vw, 34px); overflow-y: auto; max-height: calc(100dvh - 32px); }
.ask__x { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 999px; background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: background 180ms var(--ease), color 180ms var(--ease), box-shadow 180ms var(--ease); }
.ask__x:hover { background: var(--accent); color: var(--on-accent); box-shadow: inset 0 0 0 1px var(--accent); }
.ask__x .mark { width: 18px; height: 18px; }
.ask__t { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2rem); padding-right: 48px; }
.ask__l { margin: 6px 0 20px; color: var(--ink-2); }
.ask__form { display: grid; gap: 12px; }
.ask__form .fields > .fl + .fl { border-top: 1px solid var(--line); }
.ask__form .note-box { margin-top: 0; }
.ask__form .btn { margin-top: 4px; }
.ask__done { display: grid; justify-items: center; gap: 8px; padding: 12px 0 4px; text-align: center; }
.ask__done .ask__t { padding-right: 0; }

/* ═══ media: after the base rules ═══ */
@media (min-width: 1100px) {
  .room { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); grid-template-rows: none; }
  .room__photo { border-radius: var(--r) 0 0 var(--r); }
  .slides img { height: 100%; aspect-ratio: auto; min-height: 260px; }
}
@media (max-width: 700px) {
  .rooms__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1080px) {
  .pkgs { grid-template-columns: minmax(0, 1fr); }
  .pkg { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-template-rows: none; }
  .pkg__cover { aspect-ratio: auto; min-height: 340px; height: 100%; border-radius: var(--r) 0 0 var(--r); }
}
@media (max-width: 900px) {
  .bk__grid, .bk__with-sum { grid-template-columns: minmax(0, 1fr); }
  .side, .sum { position: static; }
}
@media (max-width: 640px) {
  .ask-pill { font-size: 0.88rem; padding: 11px 16px 11px 14px; }
  .steps li + li::before { width: 20px; margin-inline: 8px; }
  .steps li:not(.is-active) .step__t { display: none; } /* on a phone only the step you're on is named */
  .segs--who .seg { padding-right: 16px; }
  .pkg { grid-template-columns: minmax(0, 1fr); }
  .pkg__cover { aspect-ratio: 4 / 3.6; min-height: 0; border-radius: var(--r) var(--r) 0 0; }
  .add { grid-template-columns: 40px minmax(0, 1fr) 26px; }
  .add__icon { width: 40px; height: 40px; }
  .add__price { grid-column: 2; justify-items: start; }
  .fields__row { grid-template-columns: minmax(0, 1fr); }
  .fields__row .fl + .fl { border-left: 0; border-top: 1px solid var(--line); }
  .cal__day { font-size: 0.88rem; }
  /* phones: the status sits just above, the bar is one row: back · continue · ask */
  .dock__note { display: block; width: fit-content; margin: 0 auto 8px; padding: 5px 14px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 6px 18px -8px rgb(40 30 10 / 0.3); font-size: 0.85rem; font-weight: 500; color: var(--ink-2); }
  .dock__note.is-ok { color: #3f7a4b; }
  .dock__status { display: none; }
  .dock__in { padding: 6px; }
  .dock__in .btn { flex: 1; padding-inline: 16px; }
  .dock__row .back-btn { width: 46px; height: 46px; }
}