/* Vila Flamuri: the booking request. The bar in the home page's hero, the full form on the contact page and
   the calendar inside both. Loaded on those two pages only.

   The finished form is drawn here: booking.js and calendar.js add behaviour and the months, nothing else.
   Colours are the tokens in styles.css; --petrol-tint marks the chosen stay and the message preview. */

/* ---------- shown from the first paint when JavaScript runs (flag.js sets html.js) ----------
   Only under .js: an author display rule outranks the browser's [hidden], so a bare one would show the
   form to a visitor whose browser runs no script. */
.js .bk-bar, .js .bk-form { display: grid; }
.js .bk-fallback { display: none; }
/* booking.js failed to wire the form: the plain link comes back */
.js .bk-failed .bk-bar, .js .bk-failed .bk-form { display: none; }
.js .bk-failed .bk-fallback { display: flex; }
.bk-fallback { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }

/* ---------- the bar: one card, fields that open panels ----------
   It measures its own width, never the window's: one row when it has the room, dates over guests over
   Continue when it has not. */
.bk-bar { gap: 12px; container-type: inline-size; }
.bk-bar__card { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 5px; background: var(--white); border: 1.5px solid var(--petrol); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.bk-bar__dates, .bk-bar__guests { position: relative; min-width: 0; }
.bk-bar__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bk-bar__pair > .bk-field + .bk-field { position: relative; }
.bk-bar__pair > .bk-field + .bk-field::before { content: ""; position: absolute; left: -3px; top: 22%; bottom: 22%; width: 1px; background: var(--line); }
.bk-bar__guests { border-top: 1px solid var(--line); }
.bk-field { display: flex; align-items: center; gap: 12px; width: calc(100% - 6px); min-height: 62px; margin: 3px; padding: 8px 14px; border: 0; border-radius: calc(var(--radius-lg) - 6px); background: transparent; color: var(--ink); text-align: left; transition: background-color var(--t-fast) var(--ease); }
.bk-field:hover, .bk-field[aria-expanded="true"] { background: var(--sand); }
.bk-field:focus-visible { outline-offset: -2px; }
.bk-field > .icon { width: 22px; height: 22px; color: var(--terra); }
.bk-field__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.bk-field__label { font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.bk-field__value { overflow: hidden; font-weight: 700; color: var(--petrol); white-space: nowrap; text-overflow: ellipsis; }
.bk-bar__go { margin: 5px; }
.bk-bar__note { font-size: 0.92rem; color: var(--muted); }
.bk-bar__more { margin-top: 10px; }
@container (min-width: 680px) {
  .bk-bar__card { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1.3fr) auto; }
  .bk-bar__guests { border-top: 0; border-left: 1px solid var(--line); }
  .bk-bar__go { min-height: 54px; padding-inline: 1.8em; }
}
/* one row on a tablet: the field icons give their room to the words */
@container (min-width: 680px) and (max-width: 879px) {
  .bk-field > .icon { display: none; }
}

/* ---------- a panel: a drop-down from 700 px, a sheet from the bottom on a phone ---------- */
.bk-panel { position: absolute; top: calc(100% + 10px); left: 0; z-index: 10; width: min(680px, calc(100vw - 2 * var(--gutter))); max-width: none; margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); color: var(--ink); box-shadow: var(--shadow-2); }
.bk-panel--guests { width: min(420px, calc(100vw - 2 * var(--gutter))); }
.bk-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.bk-panel__title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 500; color: var(--petrol); }
.bk-panel__x { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: var(--pill); background: transparent; color: var(--petrol); }
.bk-panel__x:hover { background: var(--sand); }
.bk-panel__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.bk-panel__sum { margin-right: auto; font-weight: 700; color: var(--petrol); }
.bk-panel:modal { position: fixed; inset: auto 0 0 0; display: flex; flex-direction: column; width: 100%; max-height: 92dvh; padding: 0; border: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.bk-panel:modal > .bk-panel__head { flex: none; margin: 0; padding: 12px 12px 6px 18px; }
.bk-panel:modal > .bk-panel__foot { flex: none; margin: 0; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); }
.bk-panel:modal > :not(.bk-panel__head):not(.bk-panel__foot) { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px 18px 12px; }
.bk-panel::backdrop { background: rgba(0, 54, 66, 0.55); }

/* ---------- the calendar ---------- */
.cal { position: relative; }
.cal__nav { position: absolute; top: 0; left: 0; right: 0; z-index: 1; display: flex; justify-content: space-between; pointer-events: none; }
.cal__btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1.5px solid var(--petrol); border-radius: var(--pill); background: var(--white); color: var(--petrol); pointer-events: auto; }
.cal__btn .icon { width: 20px; height: 20px; }
.cal__btn:not([aria-disabled="true"]):hover { background: var(--petrol); color: var(--white); }
.cal__btn[aria-disabled="true"] { border-color: var(--line); color: var(--muted); cursor: default; }
.cal__months { display: grid; gap: 28px; }
.cal__months--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cal__month { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal__caption { height: 40px; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; line-height: 40px; color: var(--petrol); text-align: center; }
.cal__month th { padding: 8px 0 6px; font-size: 0.78rem; font-weight: 700; color: var(--muted); text-align: center; }
.cal__cell { padding: 1px 0; text-align: center; }
.cal__day { position: relative; width: 100%; height: 42px; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.cal__day:hover { background: var(--sand); }
.cal__day:focus-visible { outline: 2px solid var(--petrol); outline-offset: 1px; }
.cal__day.is-today::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--terra); }
.cal__day.is-past { color: var(--muted); opacity: 0.55; cursor: default; }
.cal__day.is-past:hover { background: transparent; }
/* the stay: one band from the arrival to the departure, its two ends filled */
.cal__cell.is-range { background: var(--petrol-tint); }
.cal__cell.is-preview { background: var(--petrol-tint-2); }
.cal__cell.is-in.has-range { background: linear-gradient(to right, transparent 50%, var(--petrol-tint) 50%); }
.cal__cell.is-out { background: linear-gradient(to left, transparent 50%, var(--petrol-tint) 50%); }
.cal__cell.is-range .cal__day:hover, .cal__cell.is-preview .cal__day:hover { background: transparent; }
.cal__cell.is-in .cal__day, .cal__cell.is-out .cal__day { background: var(--petrol); color: var(--white); }
.cal__cell.is-in .cal__day.is-today::after, .cal__cell.is-out .cal__day.is-today::after { background: var(--white); }

/* ---------- guests: steppers, ages, the pet switch ---------- */
.bk-guests { display: grid; }
.bk-stepper { display: grid; grid-template-columns: minmax(0, 1fr) 44px 2.6em 44px; align-items: center; gap: 6px; min-height: 64px; border-bottom: 1px solid var(--line); }
.bk-stepper__label { display: flex; flex-direction: column; font-weight: 700; line-height: 1.3; color: var(--ink); }
.bk-stepper__hint { font-size: 0.85rem; font-weight: 500; color: var(--muted); }
.bk-stepper__btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--petrol); border-radius: var(--pill); background: var(--white); color: var(--petrol); }
.bk-stepper__btn .icon { width: 20px; height: 20px; }
.bk-stepper__btn:not([aria-disabled="true"]):hover { background: var(--petrol); color: var(--white); }
.bk-stepper__btn[aria-disabled="true"] { border-color: var(--line); color: var(--muted); cursor: default; }
.bk-stepper__n { font-size: 1.1rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.bk-ages { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 12px; padding: 12px 0 14px; border-bottom: 1px solid var(--line); }
.bk-ages:empty { display: none; }
.bk-age { display: grid; gap: 4px; }
.bk-guests > .bk-error { padding-top: 8px; }
.bk-pet { display: grid; gap: 10px; padding-top: 14px; }
.bk-switch { position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 700; cursor: pointer; }
/* the real checkbox lies over the drawn track, above it, so a tap on the track is a tap on the checkbox */
.bk-switch input { position: absolute; left: 0; top: 50%; z-index: 1; width: 48px; height: 28px; margin: -14px 0 0; opacity: 0; cursor: pointer; }
.bk-switch__track { position: relative; flex: none; width: 48px; height: 28px; border-radius: var(--pill); background: var(--field); transition: background-color var(--t-ui) var(--ease); }
.bk-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--white); transition: transform var(--t-ui) var(--ease); }
.bk-switch input:checked + .bk-switch__track { background: var(--petrol); }
.bk-switch input:checked + .bk-switch__track::after { transform: translateX(20px); }
.bk-switch input:focus-visible + .bk-switch__track { outline: 2px solid var(--petrol); outline-offset: 3px; }
.bk-pet__note { font-size: 0.94rem; color: var(--muted); }
/* :not([hidden]) because a display rule outranks the browser's own [hidden] */
.bk-pet__more:not([hidden]) { display: grid; gap: 6px; }

/* ---------- fields ---------- */
.bk-label { font-size: 0.95rem; font-weight: 700; color: var(--petrol); }
.bk-input { width: 100%; min-height: 48px; padding: 10px 12px; border: 1.5px solid var(--field); border-radius: var(--radius-sm); background: var(--white); color: var(--ink); }
select.bk-input { height: 48px; padding-block: 0; }
textarea.bk-input { min-height: 112px; padding: 12px; resize: vertical; }
.bk-input:focus { outline: none; border-color: var(--petrol); box-shadow: 0 0 0 3px rgba(14, 75, 87, 0.22); }
.bk-input[aria-invalid="true"] { border-color: var(--error); }
.bk-hint { font-size: 0.9rem; color: var(--muted); }
.bk-error { font-size: 0.94rem; font-weight: 700; color: var(--error); }
.bk-textbtn { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--petrol); font-weight: 700; text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.bk-textbtn:hover { text-decoration-color: currentColor; }
.bk-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; cursor: pointer; }
.bk-check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--petrol); }

/* ---------- the full form: five numbered steps ---------- */
.bk-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); align-items: start; }
.bk-form:focus { outline: none; }
.bk-step { min-width: 0; padding: clamp(18px, 2.6vw, 30px); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.bk-step--dates { grid-column: 1 / -1; }
.bk-step__h { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem); }
.bk-step__n { display: inline-grid; flex: none; place-items: center start; width: 42px; height: 28px; padding-left: 11px; background: var(--terra); color: var(--white); font-family: var(--font-text); font-size: 0.95rem; font-weight: 700; clip-path: polygon(0 0, 100% 0, 76% 50%, 100% 100%, 0 100%); }
.bk-dates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 290px); gap: clamp(20px, 3vw, 40px); align-items: start; }
/* six weeks of days: nothing below moves when the months are drawn */
.bk-cal--inline { min-height: 364px; }
.bk-cal--inline.is-invalid { outline: 2px solid var(--error); outline-offset: 10px; border-radius: 12px; }
.bk-dates__side { display: grid; gap: 12px; padding: 18px 20px; border-radius: var(--radius); background: var(--sand); }
.bk-sum { display: grid; gap: 10px; }
.bk-sum__row dt { font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.bk-sum__row dd { margin: 0; font-weight: 700; color: var(--petrol); }
.bk-sum__nights { font-weight: 700; }
.bk-units { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.bk-unit { position: relative; display: grid; align-content: start; gap: 8px; padding: 8px 8px 12px; border: 1.5px solid var(--line); border-radius: var(--radius); background: var(--white); text-align: center; cursor: pointer; }
.bk-unit input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.bk-unit__img { display: grid; place-items: center; overflow: hidden; aspect-ratio: 1; border-radius: 10px; background: var(--sand); color: var(--petrol); }
.bk-unit__img picture, .bk-unit__img img { width: 100%; height: 100%; }
.bk-unit__img img { object-fit: cover; }
.bk-unit__img > .icon { width: 36%; height: 36%; }
.bk-unit__name { font-size: 0.95rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
/* a radio's ring on each card, filled when chosen: shape and fill, not colour alone */
.bk-unit::after { content: ""; position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; border: 2px solid var(--field); border-radius: 50%; background: var(--white); }
.bk-unit:has(input:checked) { border-color: var(--petrol); box-shadow: inset 0 0 0 1.5px var(--petrol); }
.bk-unit:has(input:checked)::after { border-color: var(--petrol); background: var(--petrol); box-shadow: inset 0 0 0 5px var(--white); }
.bk-unit:has(input:focus-visible) { outline: 2px solid var(--petrol); outline-offset: 3px; }
.bk-fields { display: grid; gap: 16px; }
.bk-fieldset { display: grid; gap: 6px; }
.bk-preview { margin: 0 0 18px; }
.bk-preview__label { margin-bottom: 8px; font-size: 0.92rem; font-weight: 700; color: var(--muted); }
.bk-bubble { min-height: 7.5em; padding: 14px 16px; border-radius: 16px 16px 16px 4px; background: var(--petrol-tint); color: var(--ink); font-size: 0.98rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.bk-send { width: 100%; }
.bk-note { margin-top: 12px; font-size: 0.92rem; color: var(--muted); }

@media (max-width: 1000px) {
  .bk-dates { grid-template-columns: 1fr; }
}
/* under the calendar on a tablet, check-in and check-out side by side */
@media (min-width: 481px) and (max-width: 1000px) {
  .bk-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .bk-form { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .bk-units { gap: 8px; }
  .bk-unit { padding: 6px 6px 10px; }
  .bk-unit::after { top: 10px; right: 10px; width: 20px; height: 20px; }
  .bk-unit__name { font-size: 0.86rem; }
}

@media (forced-colors: active) {
  .cal__cell.is-in .cal__day, .cal__cell.is-out .cal__day { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .cal__cell.is-range .cal__day, .cal__cell.is-preview .cal__day { outline: 1px dashed CanvasText; outline-offset: -4px; }
  /* focus must stand apart from the stay's dashed outline and from the Highlight ends */
  .cal__cell.is-in .cal__day:focus-visible, .cal__cell.is-out .cal__day:focus-visible, .cal__cell.is-range .cal__day:focus-visible, .cal__cell.is-preview .cal__day:focus-visible { outline: 3px solid CanvasText; outline-offset: 1px; }
  .cal__day.is-today::after { background: CanvasText; }
  /* at a limit a button's only difference was its colour, which this mode replaces */
  .cal__btn[aria-disabled="true"], .bk-stepper__btn[aria-disabled="true"] { color: GrayText; border-color: GrayText; }
  .bk-switch__track { border: 1px solid CanvasText; }
  .bk-switch input:not(:checked) + .bk-switch__track::after { background: CanvasText; }
  .bk-switch input:checked + .bk-switch__track { forced-color-adjust: none; background: Highlight; }
  .bk-switch input:focus-visible + .bk-switch__track { outline-color: CanvasText; }
  .bk-unit:has(input:checked)::after { forced-color-adjust: none; background: Highlight; border-color: Highlight; box-shadow: none; }
  .bk-bubble { border: 1px solid CanvasText; }
}