/*
 * Booking widget ([vqr_rezerwacja]). Colours, fonts and spacing come from the theme's custom properties
 * (Apartamenty Zdrojowa: marble, hedge, gilt); buttons (.btn) and fields (.field) are the theme's own.
 */
.bk { position: relative; z-index: 2; max-width: 1080px; margin: var(--space-xl) auto 0; padding: clamp(1.2rem, 3vw, 2.4rem); background: var(--marble); border: 1px solid var(--gilt); outline: 1px solid color-mix(in srgb, var(--gilt) 55%, transparent); outline-offset: 5px; border-radius: var(--radius-plaque); }
.bk [hidden] { display: none !important; }
.bk__head { text-align: center; }
.bk__head h3 { font-size: var(--step-2); color: var(--hedge-deep); }
.bk__head h3::after { content: ""; display: block; width: 6rem; margin: 0.9rem auto 0; border-top: 1px solid var(--gilt); }
.bk__paused { max-width: 40rem; margin: 0 auto 1.6rem; padding: 0.8rem 1rem; border: 1px solid var(--gilt); text-align: center; color: var(--ink); }

/* Stepper */
.bk-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 48rem; margin: 0 auto 2rem; padding: 0; }
.bk-steps__item { position: relative; display: grid; justify-items: center; align-content: start; gap: 0.5rem; text-align: center; font-size: 0.95rem; line-height: 1.25; color: var(--ink-soft); }
.bk-steps__item::before { content: ""; position: absolute; top: 1.05rem; left: calc(-50% + 1.6rem); right: calc(50% + 1.6rem); border-top: 1px solid color-mix(in srgb, var(--gilt) 70%, transparent); }
.bk-steps__item:first-child::before { display: none; }
.bk-steps__item.is-done::before, .bk-steps__item.is-current::before { border-top: 2px solid var(--gilt-ink); top: calc(1.05rem - 0.5px); }
.bk-steps__n { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; font: 500 0.95rem/1 var(--font-plaque); font-variant-numeric: lining-nums; color: var(--hedge-deep); background: var(--marble); border: 1px solid var(--gilt); border-radius: 50%; }
.bk-steps__item.is-done .bk-steps__n { background: var(--gilt-light); border-color: var(--gilt-ink); }
.bk-steps__item.is-current .bk-steps__n { color: var(--on-hedge); background: var(--hedge); box-shadow: 0 0 0 3px var(--marble), 0 0 0 4px var(--gilt); }
.bk-steps__item.is-current .bk-steps__t { color: var(--hedge-deep); font-weight: 700; }
.bk-steps__now { display: none; }

/* Steps */
.bk-step__title { margin: 0 0 1.3rem; font: 500 var(--step-1)/1.2 var(--font-plaque); letter-spacing: 0.04em; color: var(--hedge-deep); }
/* Headings get the focus only to be read out on a step change (tabindex="-1"); they are not controls. */
.bk-step__title:focus { outline: none; }
.bk-step__body { display: grid; grid-template-columns: minmax(0, 1fr) 19.5rem; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.bk-step__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.8rem; margin-top: 1.8rem; padding-top: 1.4rem; border-top: var(--rule); }
.bk-step__nav .btn { white-space: normal; text-align: center; line-height: 1.2; }
.bk-step__nav .btn--light[data-step-go]::before { content: ""; width: 0.5rem; height: 0.5rem; margin-right: 0.1rem; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.bk-step__nav .btn[aria-busy="true"] { cursor: progress; opacity: .8; }
.bk-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.2rem; align-items: start; }
.bk-fields .wide { grid-column: 1 / -1; }
.bk .field input, .bk .field select, .bk .field textarea { border-color: var(--gilt-ink); }
.bk .field input:focus-visible, .bk .field select:focus-visible, .bk .field textarea:focus-visible { outline-color: var(--gilt-ink); }
.bk .field textarea { min-height: 5.5rem; }
.field__hint { font-size: 0.88rem; line-height: 1.35; color: var(--ink-soft); }
.field--check { grid-template-columns: auto minmax(0, 1fr); column-gap: 0.75rem; align-items: start; }
.bk .field--check input { width: 1.35rem; height: 1.35rem; min-height: 0; margin: 0.15rem 0 0; padding: 0; }
.field--check label { font: 400 1rem/1.45 var(--font-text); letter-spacing: 0; text-transform: none; }
.field--check .field__error { grid-column: 1 / -1; }
.field--check[data-invalid] input { outline: 2px solid var(--error); outline-offset: 2px; box-shadow: none; }
.bk-recap { display: grid; gap: 0.8rem; padding-left: clamp(1.2rem, 2.5vw, 2rem); border-left: var(--rule); }
.bk-recap h5 { margin: 0; font: 500 0.8rem/1.3 var(--font-plaque); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gilt-ink); }
.bk .cal__dates dd { overflow-wrap: anywhere; text-align: right; }
.bk-sum { align-self: start; }
.bk-pay { display: grid; gap: 1rem; align-content: start; }
.bk-pay .cal__status:empty { display: none; }
.bk-split { margin: 0; }
.bk-split div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.2rem 1rem; padding: 0.6rem 0; border-bottom: var(--rule); }
.bk-split dt { font-weight: 500; color: var(--ink); }
.bk-split dd { margin: 0; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; color: var(--hedge-deep); overflow-wrap: anywhere; }
.bk-split .is-key dd { font: 500 1.4rem/1.2 var(--font-plaque); letter-spacing: 0.03em; }
.bk-pay__note { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft); }
.bk-done__head { display: grid; justify-items: center; gap: 0.3rem; margin-bottom: 1.6rem; text-align: center; }
.bk-done__head .bk-step__title { margin: 0; }
.bk-done__mark { width: 4rem; height: 3rem; color: var(--hedge); }
.bk-done__number { margin: 0; color: var(--ink-soft); }
.bk-done__number strong { font: 500 1.2rem/1.3 var(--font-plaque); letter-spacing: 0.08em; color: var(--hedge-deep); white-space: nowrap; }
.bk-done__side { display: grid; gap: 1rem; align-content: start; }
.bk-done__mail { margin: 0; }
.bk-done__mail strong { overflow-wrap: anywhere; }
.bk-done__contact { display: grid; gap: 0.6rem; padding-top: 0.9rem; border-top: var(--rule); }
.bk-done__contact p { margin: 0; line-height: 1.5; }
.bk-done__contact span { overflow-wrap: anywhere; }
.bk-done__ics { justify-self: start; white-space: normal; text-align: center; }
.bk-note { margin: 0; padding: 0.7rem 0.9rem; font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft); background: color-mix(in srgb, var(--gilt-light) 16%, var(--marble)); border: 1px dashed color-mix(in srgb, var(--gilt) 75%, transparent); border-radius: 4px; }

/* Step 1: calendar */
.cal__body { display: grid; grid-template-columns: minmax(0, 1fr) 19.5rem; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.cal__picker { position: relative; min-width: 0; }
.cal__nav { position: absolute; inset: 0 0 auto; display: flex; justify-content: space-between; pointer-events: none; }
.cal__arrow { pointer-events: auto; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0; border: 1px solid var(--gilt); border-radius: 50%; background: var(--marble); color: var(--hedge-deep); cursor: pointer; transition: background-color .2s, color .2s; }
.cal__arrow:hover { background: var(--hedge); color: var(--on-hedge); }
.cal__arrow[aria-disabled="true"] { opacity: .35; cursor: default; background: var(--marble); color: var(--hedge-deep); }
.cal__arrow svg { width: 1.2rem; height: 1.2rem; }
.cal__months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2.5rem); }
.cal-month__title { margin: 0 3rem 0.4rem; font: 500 1.05rem/2.6rem var(--font-plaque); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; text-align: center; color: var(--hedge-deep); }
.cal-grid { width: 100%; border-collapse: separate; border-spacing: 0 3px; table-layout: fixed; }
.cal-grid th { padding: 0.35rem 0; font: 500 0.72rem/1 var(--font-plaque); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gilt-ink); }
.cal-grid td { padding: 0; text-align: center; }
.cal-day{
  position: relative; display: grid; place-content: center; justify-items: center; gap: 2px; width: 100%; height: 3.1rem; padding: 0;
  font: 500 1rem/1 var(--font-text); font-variant-numeric: lining-nums tabular-nums; color: var(--ink);
  background: transparent; border: 1px solid transparent; border-radius: 4px; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.cal-day__price { font: 500 0.66rem/1 var(--font-text); letter-spacing: 0.02em; color: var(--gilt-ink); }
.cal-day:hover{ border-color: var(--gilt); background: #fffaf0; }
.cal-day:focus-visible{ z-index: 1; outline: 2px solid var(--gilt-ink); outline-offset: 1px; }
.cal-day.is-today::after{ content: ""; position: absolute; left: calc(50% - 0.5rem); top: 0.25rem; width: 1rem; height: 2px; background: var(--gilt); }
.cal-day.is-past{ color: color-mix(in srgb, var(--ink-soft) 45%, transparent); cursor: default; }
.cal-day.is-past:hover, .cal-day.is-busy:hover, .cal-day.is-blocked:hover, .cal-day.is-single:hover, .cal-day.is-checkout:hover, .cal-day.is-loading:hover{ border-color: transparent; background-color: transparent; }
.cal-day.is-busy { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--gilt) 22%, transparent) 0 2px, transparent 2px 7px), var(--gravel); }
.cal-day.is-busy { color: var(--ink-soft); text-decoration: line-through; text-decoration-color: var(--gilt-ink); cursor: not-allowed; border-radius: 0; }
.cal-day.is-busy:hover { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--gilt) 22%, transparent) 0 2px, transparent 2px 7px), var(--gravel); }
/* Free, but too few free nights to start a stay: no price, a dotted ground. */
.cal-day.is-single { color: var(--ink-soft); cursor: not-allowed; background: radial-gradient(circle, color-mix(in srgb, var(--gilt) 50%, transparent) 0.8px, transparent 1.1px) 0 0 / 6px 6px; }
/* Busy night after a free one: a stay can still end that morning. Free half top left, busy half bottom right. */
.cal-day.is-checkout, .cal-day.is-checkout:hover, .cal__legend .cal__swatch--checkout { background: linear-gradient(to bottom right, var(--marble) calc(50% - 0.5px), var(--gilt) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)), repeating-linear-gradient(135deg, color-mix(in srgb, var(--gilt) 22%, transparent) 0 2px, transparent 2px 7px), var(--gravel); }
.cal-day.is-checkout { color: var(--ink-soft); cursor: not-allowed; border-radius: 0; }
.cal__months.is-loading .cal-day { color: color-mix(in srgb, var(--ink-soft) 55%, transparent); cursor: progress; }
.cal-day.is-blocked { color: color-mix(in srgb, var(--ink-soft) 55%, transparent); cursor: not-allowed; }
.cal-day.is-short { color: var(--ink-soft); }
.cal-day.is-in, .cal-day.is-preview { background: color-mix(in srgb, var(--hedge) 20%, var(--marble)); border-radius: 0; border-color: transparent; }
.cal-day.is-preview-bad { background: color-mix(in srgb, var(--error) 9%, var(--marble)); border-radius: 0; }
.cal-day.is-start, .cal-day.is-end { color: var(--on-hedge); background: var(--hedge); border-color: var(--gilt); box-shadow: inset 0 0 0 2px var(--hedge), inset 0 0 0 3px color-mix(in srgb, var(--gilt-light) 70%, transparent); }
.cal-day.is-start .cal-day__price, .cal-day.is-end .cal-day__price { color: var(--gilt-light); }
.cal-day.is-in .cal-day__price, .cal-day.is-preview .cal-day__price, .cal-day.is-preview-bad .cal-day__price { color: var(--hedge-deep); }
.cal-day.is-start { border-radius: 4px 0 0 4px; }
.cal-day.is-end { border-radius: 0 4px 4px 0; }
.cal-day.is-start:hover, .cal-day.is-end:hover { background: var(--hedge-deep); }
.cal-day.is-start.is-today::after, .cal-day.is-end.is-today::after { background: var(--gilt-light); }
.cal__legend { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; font-size: 0.92rem; color: var(--ink-soft); }
.cal__legend li { display: inline-flex; align-items: center; gap: 0.5rem; }
.cal__swatch { flex: none; width: 1.1rem; height: 1.1rem; border: 1px solid var(--gilt); border-radius: 3px; background: var(--marble); }
.cal__swatch--free { display: grid; place-items: center; width: auto; min-width: 1.9rem; padding: 0 0.2rem; font: 500 0.66rem/1 var(--font-text); color: var(--gilt-ink); }
.cal__swatch--busy { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--gilt) 30%, transparent) 0 2px, transparent 2px 6px), var(--gravel); }
.cal__swatch--pick { background: var(--hedge); }
.cal__swatch--single { background: radial-gradient(circle, color-mix(in srgb, var(--gilt) 60%, transparent) 0.8px, transparent 1.1px) 0 0 / 5px 5px, var(--marble); }
.cal__price-rule { margin: 0.9rem 0 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft); }
.cal__summary { display: grid; gap: 1rem; align-content: start; padding-left: clamp(1.2rem, 2.5vw, 2rem); border-left: var(--rule); }
.cal__dates { margin: 0; border-top: var(--rule); }
.cal__dates div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.2rem 1rem; padding: 0.6rem 0; border-bottom: var(--rule); }
.cal__dates dt { font: 500 0.74rem/1.5 var(--font-plaque); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gilt-ink); }
.cal__dates dd { margin: 0; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; color: var(--hedge-deep); }
.cal__dates dd.is-empty { font-weight: 400; font-style: italic; color: var(--ink-soft); }
.cal__price { display: grid; gap: 0.3rem; padding: 1rem 1.1rem; color: var(--on-hedge); background: var(--hedge); border: 1px solid var(--gilt); border-radius: 4px; box-shadow: inset 0 0 0 3px var(--hedge), inset 0 0 0 4px color-mix(in srgb, var(--gilt) 60%, transparent); }
.cal__price-label { font: 500 0.74rem/1.2 var(--font-plaque); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gilt-light); }
.cal__price-calc { font: 500 1.05rem/1.3 var(--font-plaque); font-variant-numeric: lining-nums; letter-spacing: 0.04em; }
.cal__price-calc strong { display: block; font-weight: 500; font-size: 1.75rem; line-height: 1.2; letter-spacing: 0.03em; }
.cal__status { margin: 1rem 0 0; font-size: 0.98rem; line-height: 1.45; color: var(--ink-soft); }
.cal__status.is-error { color: var(--error); font-weight: 500; }
.cal__next .btn { width: 100%; white-space: normal; text-align: center; line-height: 1.2; }
.cal__next .btn[aria-disabled="true"] { --btn-bg: color-mix(in srgb, var(--gilt-light) 35%, var(--marble)); border-style: dashed; cursor: not-allowed; }
.cal__suggest { display: grid; gap: 0.5rem; margin: 0.7rem 0 0; }
.cal__suggest-label { margin: 0; font-size: 0.95rem; font-weight: 500; color: var(--ink); }
.cal__suggest-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cal__suggest-list .btn { min-height: 2.75rem; padding: 0.5rem 0.9rem; font-size: 0.82rem; letter-spacing: 0.04em; white-space: normal; text-align: center; line-height: 1.2; }
.cal__alt { display: grid; gap: 0.5rem; padding-top: 0.9rem; border-top: var(--rule); }
.cal__alt-label { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }
.cal__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 0.5rem; }
.cal__actions .btn { width: 100%; min-height: 2.75rem; padding: 0.5rem 0.6rem; font-size: 0.78rem; letter-spacing: 0.06em; white-space: normal; text-align: center; line-height: 1.2; }
.cal__clear { justify-self: start; padding: 0.4rem 0; font: 500 0.98rem/1.2 var(--font-text); color: var(--hedge-deep); background: none; border: 0; text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px; cursor: pointer; }


@media (max-width: 1180px) {
  .cal__body, .bk-step__body{ grid-template-columns: minmax(0, 1fr); }
  .cal__summary { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; padding: 1.4rem 0 0; border-left: 0; border-top: var(--rule); }
  .cal__summary > .cal__dates { grid-column: 1; grid-row: 1 / span 4; border-top: 0; }
  .cal__summary > :not(.cal__dates) { grid-column: 2; }
  .bk-recap{ padding: 1.4rem 0 0; border-left: 0; border-top: var(--rule); }
}
@media (max-width: 720px) {
  .cal__months { grid-template-columns: minmax(0, 1fr); }
  .cal__summary{ grid-template-columns: minmax(0, 1fr); }
  .cal__summary > .cal__dates, .cal__summary > :not(.cal__dates) { grid-column: 1; grid-row: auto; }
}
@media (max-width: 560px) {
  .bk { padding: 1.1rem 0.75rem 1.2rem; }
  .bk__head h3 { font-size: var(--step-1); }
  .bk__demo { text-align: left; margin-bottom: 1.2rem; }
  .bk__tabs { width: 100%; margin-bottom: 1.4rem; }
  .bk__tab { padding: 0.5rem 0.4rem; font-size: 0.72rem; letter-spacing: 0.05em; }
  .bk-steps { margin-bottom: 0.7rem; }
  .bk-steps__item::before { left: calc(-50% + 1.4rem); right: calc(50% + 1.4rem); }
  .bk-steps__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bk-steps__now { display: block; margin: 0 auto 1.3rem; text-align: center; font: 500 0.8rem/1.35 var(--font-plaque); letter-spacing: 0.08em; text-transform: uppercase; color: var(--hedge-deep); max-width: none; }
  .bk-step__title { font-size: 1.2rem; margin-bottom: 1rem; }
  .bk-fields { grid-template-columns: minmax(0, 1fr); }
  .bk-step__nav { flex-direction: column-reverse; }
  .bk-step__nav .btn { width: 100%; }
  .bk-done__ics { justify-self: stretch; }
  .cal__suggest-list .btn { flex: 1 1 100%; }
  .cal-day { height: 2.9rem; font-size: 0.95rem; }
  .cal-month__title { font-size: 0.95rem; letter-spacing: 0.08em; }
  .cal-grid th { font-size: 0.66rem; letter-spacing: 0.02em; }
}
@media (max-width: 400px) {
  .bk { padding-inline: 0.55rem; }
  .cal__arrow { width: 2.25rem; height: 2.25rem; }
  .cal-month__title { margin-inline: 2.35rem; font-size: 0.8rem; line-height: 2.25rem; letter-spacing: 0.02em; white-space: nowrap; }
  .cal-day { height: 2.75rem; }
  .cal-day__price { font-size: 0.6rem; letter-spacing: 0; }
}

/* Additions to the mockup: apartment picker, loading, waiting for the payment */
.bk-apartment { max-width: 22rem; margin: 0 auto 1.6rem; }
.bk .field select { border-color: var(--gilt-ink); }
.cal__loading { grid-column: 1 / -1; margin: 3rem 0; text-align: center; color: var(--ink-soft); }
.cal__months > .cal__status { grid-column: 1 / -1; }
[data-step="wait"] .cal__status { max-width: 42rem; }
.cal__next .btn + .btn { margin-top: 0.5rem; }
.cal__actions:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.cal__actions > span { display: contents; }
.cal__actions > span[hidden] { display: none; }
.bk__head { margin-bottom: 1.8rem; }
.cal-day.is-soon, .cal-day.is-long { color: color-mix(in srgb, var(--ink-soft) 60%, transparent); cursor: not-allowed; }
.cal-day.is-soon { background: repeating-linear-gradient(90deg, transparent 0 3px, color-mix(in srgb, var(--gilt) 14%, transparent) 3px 4px); }
.cal-day.is-long { background: color-mix(in srgb, var(--error) 6%, var(--marble)); border-radius: 0; }
.cal-day.is-soon:hover, .cal-day.is-long:hover { border-color: transparent; }
.cal__swatch--soon { background: repeating-linear-gradient(90deg, transparent 0 3px, color-mix(in srgb, var(--gilt) 40%, transparent) 3px 4px), var(--marble); }
.bk-wait__summary { margin: 0 0 0.6rem; font-weight: 700; color: var(--hedge-deep); }
.cal__months.is-failed { display: block; margin: 2rem 0 0; }