/* ApartFlow — wyszukiwarka, kalendarz, koszyk, dane rezerwacji i potwierdzenie */
.af-page,
.af-search-embed,
.sp-app,
.spd-page,
.af-range {
    --af-ink: #1f2826;
    --af-muted: #68726e;
    --af-line: #dedbd3;
    --af-paper: #fbfaf7;
    --af-sand: #f2eee6;
    --af-green: #2f725f;
    --af-green-soft: #e3f1ea;
    --af-red: #a8402c;
    --af-red-soft: #f8e4de;
    --af-gray-soft: #ecebe7;
}
.sp-app { --af-accent: var(--sp-accent); }
.spd-page { --af-accent: var(--spd-accent); }
.af-page *, .af-search-embed * { box-sizing: border-box; }

/* ---------- Pasek wyszukiwania ---------- */
.af-searchbar { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr)) minmax(0, .8fr) auto auto; align-items: stretch; background: #fff; border: 1px solid var(--af-line); border-radius: 14px; box-shadow: 0 14px 40px rgba(31,40,38,.08); overflow: hidden; }
/* Pasek bez wyboru apartamentu (blok „ApartFlow: Apartamenty”): przyjazd, wyjazd, goście, szukaj, wyczyść. */
.af-searchbar.af-searchbar-dates { grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(0, .8fr) auto auto; }
.af-sb-field { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; min-height: 72px; padding: 12px 18px; border-right: 1px solid var(--af-line); cursor: pointer; }
.af-sb-field > span { color: var(--af-muted); font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
/* Selektor z .af-searchbar i [type] przebija style motywu, np. Kubio: [data-kubio] input[type="date"]. */
.af-searchbar .af-sb-field select,
.af-searchbar .af-sb-field input[type] { width: 100%; height: auto; margin: 0; box-shadow: none; min-width: 0; padding: 0; color: var(--af-ink); background: transparent; border: 0; font: inherit; font-size: 15px; font-weight: 700; outline: 0; cursor: pointer; }
.af-sb-field:focus-within { background: color-mix(in srgb, var(--af-accent) 6%, white); }
/* Kubio maluje każdy <button> na swoich stronach (tło, ramka 2px, zaokrąglenie, padding) — stąd button…[type]. */
.af-searchbar button.af-sb-submit[type] { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 150px; padding: 0 26px; color: #fff; background: var(--af-accent); border: 0; border-radius: 0; font-size: 15px; font-weight: 800; cursor: pointer; }
.af-searchbar button.af-sb-submit[type]:hover { color: #fff; background: var(--af-accent); border: 0; filter: brightness(.93); }
.af-searchbar button.af-sb-clear[type] { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 104px; padding: 0 18px; color: var(--af-ink); background: #fff; border: 0; border-left: 1px solid var(--af-line); border-radius: 0; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.af-searchbar button.af-sb-clear[type]:hover { color: var(--af-accent); background: color-mix(in srgb, var(--af-accent) 5%, white); border: 0; border-left: 1px solid var(--af-line); }
.af-sb-clear:focus-visible { position: relative; z-index: 1; outline: 3px solid color-mix(in srgb, var(--af-accent) 35%, transparent); outline-offset: -4px; }
.af-sb-clear[hidden] { display: none; }
.af-sb-clear > span:first-child { font-size: 20px; font-weight: 400; line-height: 1; }
/* Pole daty w pasku: przycisk otwierający kalendarz terminu (search.js) zamiast pola daty przeglądarki. */
.af-searchbar button.af-sb-date[type] { display: block; width: 100%; min-height: 0; margin: 0; padding: 0; color: var(--af-ink); background: transparent; border: 0; border-radius: 0; box-shadow: none; font: inherit; font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-align: left; text-transform: none; cursor: pointer; }
.af-searchbar button.af-sb-date[type]:hover { color: var(--af-accent); background: transparent; border: 0; }
.af-searchbar button.af-sb-date.is-empty[type] { color: var(--af-muted); font-weight: 600; }
.af-searchbar button.af-sb-date[type]:focus-visible { outline: 2px solid var(--af-accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- Kalendarz terminu (search.js): pod paskiem na komputerze, od dołu ekranu na telefonie ---------- */
.af-range { --af-accent: #2b4c9b; position: absolute; z-index: 100000; box-sizing: border-box; padding: 18px 18px 14px; color: var(--af-ink); background: #fff; border: 1px solid var(--af-line); border-radius: 16px; box-shadow: 0 24px 60px rgba(31,40,38,.22); text-align: left; }
.af-range * { box-sizing: border-box; }
.af-range[hidden], .af-range-shade[hidden] { display: none; }
.af-range-head { display: flex; align-items: stretch; gap: 8px; }
.af-range button.af-range-step[type] { flex: 1 1 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; margin: 0; padding: 9px 12px; color: var(--af-ink); background: var(--af-paper); border: 2px solid var(--af-line); border-radius: 12px; box-shadow: none; font: inherit; text-align: left; text-transform: none; letter-spacing: 0; cursor: pointer; }
.af-range-step small { color: var(--af-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.af-range-step strong { font-size: 16px; font-weight: 800; line-height: 1.25; }
.af-range-step.is-empty strong { color: var(--af-muted); font-weight: 600; }
.af-range button.af-range-step.is-active[type] { background: #fff; border-color: var(--af-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--af-accent) 18%, transparent); }
.af-range-arrow { align-self: center; color: var(--af-muted); font-size: 18px; }
.af-range button.af-range-close[type] { flex: 0 0 auto; width: 40px; margin: 0; padding: 0; color: var(--af-ink); background: transparent; border: 0; border-radius: 50%; box-shadow: none; font-size: 26px; line-height: 1; cursor: pointer; }
.af-range-hint { margin: 12px 2px 10px; color: var(--af-accent); font-size: 14px; font-weight: 800; }
.af-range-body { position: relative; }
.af-range-months { display: grid; grid-template-columns: repeat(var(--af-range-months, 2), minmax(0, 1fr)); gap: 24px; }
.af-range .af-cal-month h4 { margin: 6px 0 10px; font-size: 16px; text-align: center; text-transform: capitalize; }
.af-range button.af-cal-nav[type] { position: absolute; top: 0; z-index: 1; width: 34px; height: 34px; margin: 0; padding: 0; color: var(--af-ink); background: #fff; border: 1px solid var(--af-line); border-radius: 50%; box-shadow: none; font-size: 15px; cursor: pointer; }
.af-range button.af-range-prev[type] { left: 0; }
.af-range button.af-range-next[type] { right: 0; }
.af-range button.af-cal-nav[disabled] { opacity: .3; cursor: default; }
.af-range button.af-cal-day[type] { min-height: 42px; margin: 0; padding: 4px 2px; box-shadow: none; font: inherit; text-transform: none; letter-spacing: 0; }
.af-range .af-cal-day.is-free:hover { transform: none; border-color: var(--af-accent); }
.af-range .af-cal-day.is-range,
.af-range .af-cal-day.is-preview { background: color-mix(in srgb, var(--af-accent) 14%, white); border-color: color-mix(in srgb, var(--af-accent) 30%, white); }
.af-range .af-cal-day.is-checkout:not(.is-selected) { color: var(--af-ink); background: #fff; border: 2px dashed var(--af-accent); }
.af-range-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--af-line); }
.af-range button.af-range-clear[type] { margin: 0; padding: 8px 4px; color: var(--af-ink); background: transparent; border: 0; box-shadow: none; font: inherit; font-size: 13px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.af-range button.af-range-done[type] { margin: 0; padding: 10px 22px; color: #fff; background: var(--af-accent); border: 0; border-radius: 10px; box-shadow: none; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.af-range-shade { position: fixed; inset: 0; z-index: 99999; background: rgba(15,20,19,.45); }
.af-range.is-sheet { position: fixed; top: auto; right: 0; bottom: 0; left: 0; width: auto; max-height: 92vh; overflow: auto; padding: 16px 14px calc(14px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; }
.af-range.is-sheet .af-range-head { position: sticky; top: -16px; z-index: 2; padding-top: 4px; background: inherit; }
html.af-range-open { overflow: hidden; }
html.studio-dark .af-range { --af-ink: #eef0f2; --af-muted: #a5adb5; --af-line: rgba(255,255,255,.14); --af-paper: #23272c; background: #1b1e22; }
html.studio-dark .af-range button.af-range-step.is-active[type],
html.studio-dark .af-range button.af-cal-nav[type] { background: #1b1e22; }
html.studio-dark .af-range .af-cal-day { color: var(--af-ink); background: #23272c; border-color: rgba(255,255,255,.1); }
html.studio-dark .af-range .af-cal-day.is-past { color: #5d636a; background: transparent; }
html.studio-dark .af-range .af-cal-day.is-checkout:not(.is-selected) { background: #1b1e22; }
html.studio-dark .af-range .af-cal-day.is-range,
html.studio-dark .af-range .af-cal-day.is-preview { background: color-mix(in srgb, var(--af-accent) 30%, #1b1e22); }
html.studio-dark .af-strip-day.is-unknown { background: #2a2e33; }
.af-search-hint { min-height: 18px; margin: 8px 2px 0; color: var(--af-red); font-size: 12px; font-weight: 700; }

/* Strony z Kubio stylizują każdy akapit i link pod [data-kubio] (krój Mulish, 16 px, kolor motywu; waga do 0,3,1).
   :is(…, #af-x) ma wagę identyfikatora (#af-x nie istnieje): akapity i linki silnika dziedziczą jego krój i kolory,
   a reguły z tym samym przedrostkiem (tu i w frontend.css) przywracają własne style elementów. */
:is(.sp-app, .af-search-embed, #af-x) p,
:is(.sp-app, .af-search-embed, #af-x) a { color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: none; }
:is(.sp-app, .af-search-embed, #af-x) .af-search-hint { color: var(--af-red); font-size: 12px; font-weight: 700; }
.af-search-card { padding: 22px; }
.af-search-embed { max-width: 1180px; margin: 0 auto; }

/* ---------- Kafelki: pasek dostępności i cena ---------- */
.sp-apartment.is-busy { opacity: .62; }
.sp-apartment.is-busy:hover { opacity: .9; }
.sp-apartment a.sp-apartment-image { display: block; }
.sp-apartment-badge.is-free { background: rgba(47,114,95,.92); }
.sp-apartment-badge.is-busy { background: rgba(168,64,44,.92); }
.sp-apartment-badge.is-checking { background: rgba(31,40,38,.7); }
.sp-apartment h3 a { color: inherit; text-decoration: none; }
.sp-apartment h3 a:hover { text-decoration: underline; }
.af-strip-wrap { margin: 12px 0 4px; }
.af-strip-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; color: var(--af-muted); }
.af-strip-heading span { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.af-strip-heading small { font-size: 10px; white-space: nowrap; }
.af-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.af-strip-day { min-width: 0; min-height: 36px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 3px 1px; background: var(--af-green-soft); border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(47,114,95,.25); font-style: normal; line-height: 1; }
.af-strip-day small { color: var(--af-green); font-size: 9px; font-weight: 800; }
.af-strip-day strong { color: var(--af-ink); font-size: 10px; font-weight: 800; white-space: nowrap; }
.af-strip-day.is-busy { background: var(--af-red-soft); box-shadow: inset 0 0 0 1px rgba(168,64,44,.35); }
.af-strip-day.is-busy small { color: var(--af-red); }
.af-strip-day.is-loading { background: var(--af-gray-soft); box-shadow: inset 0 0 0 1px rgba(104,114,110,.16); animation: af-pulse 1.2s ease-in-out infinite; }
.af-strip-day.is-loading small { color: var(--af-muted); }
.af-strip-day.is-unknown { background: #f4f3ef; box-shadow: inset 0 0 0 1px rgba(104,114,110,.14); }
.af-strip-day.is-unknown small { color: var(--af-muted); }
/* Pobyt na pasku: noce w ramce, dzień wyjazdu w ramce przerywanej; przyjazd i wyjazd podpisane. */
.af-strip-day.is-stay { box-shadow: inset 0 0 0 2px var(--af-accent); }
.af-strip-day.is-departure { outline: 2px dashed var(--af-accent); outline-offset: -2px; }
.af-strip-day em { display: block; max-width: 100%; margin-top: 1px; overflow: hidden; color: var(--af-accent); font-size: 8px; font-style: normal; font-weight: 800; line-height: 1.1; white-space: nowrap; text-overflow: clip; }
.af-strip-wrap.has-stay .af-strip-heading { flex-wrap: wrap; row-gap: 1px; }
.af-strip-wrap.has-stay .af-strip-heading span { flex: 1 1 100%; color: var(--af-accent); }
.sp-price strong.is-muted { color: var(--af-muted); font-size: 15px; }
.sp-price strong.is-loading { color: var(--af-muted); font-size: 15px; animation: af-pulse 1.2s ease-in-out infinite; }
.sp-price em { display: block; margin-top: 2px; color: var(--af-muted); font-size: 10px; font-style: normal; }
a.sp-book { text-decoration: none; }
@keyframes af-pulse { 50% { opacity: .45; } }

/* ---------- Kalendarz ---------- */
.af-calendar { margin-top: 18px; }
.af-cal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.af-cal-status { flex: 1; color: var(--af-muted); font-size: 12px; text-align: center; }
.af-cal-nav { display: grid; place-items: center; width: 40px; height: 40px; color: var(--af-ink); background: #fff; border: 1px solid var(--af-line); border-radius: 50%; cursor: pointer; font-size: 16px; }
.af-cal-nav:hover { border-color: var(--af-accent); color: var(--af-accent); }
.af-cal-months { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; }
.af-cal-month h4 { margin: 0 0 10px; color: var(--af-ink); font-family: var(--sp-font-heading, Georgia, "Times New Roman", serif); font-size: 20px; font-weight: var(--sp-font-heading-weight, 400); text-transform: capitalize; }
.af-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.af-cal-weekday { padding: 4px 0; color: var(--af-muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.af-cal-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 54px; padding: 4px 2px; color: var(--af-ink); background: #fff; border: 1px solid var(--af-line); border-radius: 9px; cursor: pointer; font: inherit; transition: border-color .15s ease, transform .15s ease; }
.af-cal-day span { font-size: 14px; font-weight: 800; line-height: 1.1; }
.af-cal-day small { color: var(--af-green); font-size: 10px; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.af-cal-day.is-free:hover { border-color: var(--af-accent); transform: translateY(-1px); }
.af-cal-day.is-booked { color: var(--af-red); background: repeating-linear-gradient(135deg, var(--af-red-soft) 0 6px, #fdf1ed 6px 12px); border-color: #efc9bd; cursor: not-allowed; }
.af-cal-day.is-booked span { text-decoration: line-through; }
.af-cal-day.is-closed { color: #8d918e; background: repeating-linear-gradient(135deg, var(--af-gray-soft) 0 6px, #f6f5f2 6px 12px); border-color: #e1dfda; cursor: not-allowed; }
.af-cal-day.is-past { color: #b9bcb9; background: transparent; border-color: transparent; cursor: default; }
.af-cal-day.is-loading { color: #b9bcb9; background: #f4f3ef; border-color: #f4f3ef; }
.af-cal-day.is-range { background: color-mix(in srgb, var(--af-accent) 14%, white); border-color: color-mix(in srgb, var(--af-accent) 35%, white); }
.af-cal-day.is-selected { color: #fff; background: var(--af-accent); border-color: var(--af-accent); }
.af-cal-day.is-selected small { color: rgba(255,255,255,.85); }
.af-cal-day.is-checkout.is-booked,
.af-cal-day.is-checkout.is-closed { color: #fff; background: var(--af-accent); }
.af-cal-day:focus-visible { outline: 3px solid color-mix(in srgb, var(--af-accent) 40%, transparent); outline-offset: 2px; }
.af-cal-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; padding-top: 14px; color: var(--af-muted); border-top: 1px solid var(--af-line); font-size: 12px; }
.af-cal-legend span { display: inline-flex; align-items: center; gap: 7px; }
.af-cal-legend i { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--af-line); background: #fff; }
.af-cal-legend i.is-booked { background: repeating-linear-gradient(135deg, var(--af-red-soft) 0 4px, #fdf1ed 4px 8px); border-color: #efc9bd; }
.af-cal-legend i.is-closed { background: repeating-linear-gradient(135deg, var(--af-gray-soft) 0 4px, #f6f5f2 4px 8px); }
.af-cal-legend i.is-selected { background: var(--af-accent); border-color: var(--af-accent); }

/* ---------- Koszyk (strona apartamentu) ---------- */
.af-cart .af-cart-dates { display: grid; grid-template-columns: 1fr 1fr; margin: 14px 0 10px; border: 1px solid var(--af-line); border-radius: 12px; overflow: hidden; }
.af-cart-date { display: block; padding: 10px 12px; color: inherit; text-decoration: none; }
.af-cart-date + .af-cart-date { border-left: 1px solid var(--af-line); }
.af-cart-date small,
.af-cart-guests small { display: block; color: var(--af-muted); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.af-cart-date strong { display: block; margin-top: 2px; font-size: 14px; }
.af-cart-guests { display: block; margin-bottom: 14px; padding: 10px 12px; border: 1px solid var(--af-line); border-radius: 12px; }
.af-cart-guests select { width: 100%; padding: 2px 0 0; color: var(--af-ink); background: transparent; border: 0; font: inherit; font-size: 14px; font-weight: 700; }
.af-cart-subtitle { margin: 0 0 8px; color: var(--af-ink); font-size: 12px; font-weight: 800; }
.af-cart-extras { margin-bottom: 14px; }
.af-cart-cta.is-disabled { opacity: .5; cursor: not-allowed; }
.af-cart > small { display: block; margin-top: 10px; color: #8a928f; text-align: center; font-size: 11px; }

/* ---------- Usługi dodatkowe ---------- */
.af-extra { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-bottom: 7px; padding: 9px 10px; background: #fff; border: 1px solid var(--af-line); border-radius: 10px; }
.af-extra.is-selected { background: color-mix(in srgb, var(--af-green) 6%, white); border-color: color-mix(in srgb, var(--af-green) 45%, white); }
.af-extra-icon { display: grid; place-items: center; width: 30px; height: 30px; background: var(--af-sand); border-radius: 8px; font-size: 15px; }
.af-extra-copy strong { display: block; font-size: 12px; }
.af-extra-copy small { display: block; color: var(--af-accent); font-size: 11px; font-weight: 700; }
.af-extra-variant { width: 100%; margin-top: 5px; padding: 4px 6px; border: 1px solid var(--af-line); border-radius: 6px; font-size: 11px; }
.af-extra-included { color: var(--af-green); font-size: 11px; font-weight: 800; }
.af-stepper { display: inline-flex; align-items: center; border: 1px solid var(--af-line); border-radius: 999px; }
.af-stepper button { width: 28px; height: 28px; color: var(--af-ink); background: transparent; border: 0; cursor: pointer; font-size: 16px; }
.af-stepper output { min-width: 16px; text-align: center; font-size: 12px; font-weight: 800; }
.af-switch { position: relative; display: inline-block; width: 40px; height: 24px; }
.af-switch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.af-switch span { position: absolute; inset: 0; background: var(--af-line); border-radius: 999px; transition: background .2s ease; pointer-events: none; }
.af-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s ease; }
.af-switch input:checked + span { background: var(--af-green); }
.af-switch input:checked + span::after { transform: translateX(16px); }

/* ---------- Podsumowanie ceny ---------- */
.af-quote { padding: 14px; background: var(--af-paper); border: 1px solid var(--af-line); border-radius: 12px; transition: opacity .2s ease; }
.af-quote.is-loading { opacity: .55; }
.af-quote-empty,
.af-quote-error { margin: 0; color: var(--af-muted); font-size: 12px; line-height: 1.5; }
.af-quote-error { color: var(--af-red); }
.af-quote-lines { margin: 0; padding: 0; list-style: none; }
.af-quote-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; color: var(--af-muted); font-size: 12px; line-height: 1.4; }
.af-quote-lines b { color: var(--af-ink); white-space: nowrap; }
.af-quote-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--af-line); }
.af-quote-total span { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.af-quote-total strong { color: var(--af-ink); font-family: var(--sp-font-heading, Georgia, serif); font-size: 26px; font-weight: var(--sp-font-heading-weight, 400); }
.af-quote-note { margin: 6px 0 0; color: var(--af-muted); font-size: 11px; }
.af-quote-due { margin: 8px 0 0; color: var(--af-ink); font-size: 12px; }
.af-live { margin: 0 0 10px; padding: 7px 10px; color: var(--af-green); background: var(--af-green-soft); border-radius: 8px; font-size: 11px; font-weight: 800; }
.af-live.is-busy { color: var(--af-red); background: var(--af-red-soft); }
.af-live.is-warn { color: #7a5a12; background: #f7edd2; }

/* ---------- Strony: dane rezerwacji i potwierdzenie ---------- */
/* „Czcionka ApartFlow: jak na stronie” — grubość tekstu jak w akapitach strony (zmienne ustawia booking-common.js). */
:is(.sp-font-site, .sp-font-site-text) { font-weight: var(--sp-font-text-weight, 400); }
.af-page { min-height: 100vh; padding-bottom: 60px; color: var(--af-ink); background: var(--af-paper); font-family: var(--sp-font-text, Manrope, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif); font-size: 15px; line-height: 1.55; }
.af-shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
.af-page-header { background: #fff; border-bottom: 1px solid var(--af-line); }
.af-page-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 70px; }
.af-brand img { display: block; max-width: 200px; max-height: 40px; object-fit: contain; }
.af-back { color: var(--af-muted); font-size: 13px; font-weight: 700; text-decoration: none; }
.af-back:hover { color: var(--af-accent); }
.af-progress { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 22px; padding: 0; list-style: none; color: var(--af-muted); font-size: 12px; font-weight: 700; }
.af-progress li { display: flex; align-items: center; gap: 8px; }
.af-progress span { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--af-line); border-radius: 50%; font-size: 11px; }
.af-progress .is-done span { color: #fff; background: var(--af-green); border-color: var(--af-green); }
.af-progress .is-active { color: var(--af-ink); }
.af-progress .is-active span { color: #fff; background: var(--af-accent); border-color: var(--af-accent); }
.af-panel { padding: 26px; background: #fff; border: 1px solid var(--af-line); border-radius: 18px; box-shadow: 0 14px 40px rgba(31,40,38,.06); }
.af-panel h1 { margin: 0 0 6px; font-family: var(--sp-font-heading, Georgia, serif); font-size: clamp(26px, 4vw, 34px); font-weight: var(--sp-font-heading-weight, 400); letter-spacing: -.02em; }
.af-panel h2 { margin: 0 0 4px; font-family: var(--sp-font-heading, Georgia, serif); font-size: 22px; font-weight: var(--sp-font-heading-weight, 400); }
.af-kicker { margin: 0 0 8px; color: var(--af-accent); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.af-muted { color: var(--af-muted); font-size: 13px; }
.af-checkout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 22px; align-items: start; }
.af-summary { position: sticky; top: 20px; }
.af-summary-stay { margin: 0 0 14px; color: var(--af-muted); font-size: 13px; }
.af-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
.af-form-grid label > span,
.af-payment legend { display: block; margin-bottom: 6px; color: var(--af-ink); font-size: 12px; font-weight: 800; }
.af-form-grid input,
.af-form-grid select,
.af-form-grid textarea { width: 100%; min-height: 46px; padding: 11px 12px; color: var(--af-ink); background: #fff; border: 1px solid #cfd3cf; border-radius: 10px; font: inherit; font-size: 15px; }
.af-form-grid textarea { min-height: 90px; resize: vertical; }
.af-form-grid input:focus,
.af-form-grid select:focus,
.af-form-grid textarea:focus { border-color: var(--af-accent); outline: 3px solid color-mix(in srgb, var(--af-accent) 18%, transparent); }
.af-form-grid .is-invalid { border-color: var(--af-red); background: #fff8f6; }
.af-form-grid small { display: block; margin-top: 4px; color: var(--af-muted); font-size: 11px; }
.af-form-full { grid-column: 1 / -1; }
.af-honeypot { position: absolute !important; left: -10000px !important; }
.af-payment { margin: 4px 0 16px; padding: 0; border: 0; }
.af-payment[hidden], .af-payment-option[hidden] { display: none; }
.af-payment-option { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding: 14px 16px; border: 1px solid var(--af-line); border-radius: 12px; cursor: pointer; }
.af-payment-option:has(input:checked) { border-color: var(--af-accent); box-shadow: inset 0 0 0 1px var(--af-accent); background: color-mix(in srgb, var(--af-accent) 5%, white); }
.af-payment-option input { width: 18px; height: 18px; accent-color: var(--af-accent); }
.af-payment-option strong { display: block; font-size: 14px; }
.af-payment-option small { display: block; color: var(--af-muted); font-size: 12px; }
.af-consent { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 18px; color: var(--af-muted); font-size: 12px; }
.af-consent input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--af-accent); }
.af-consent a { color: var(--af-accent); }
.af-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; color: #fff; background: var(--af-accent); border: 0; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 800; text-decoration: none; cursor: pointer; }
.af-button:hover { filter: brightness(.93); color: #fff; }
.af-button:disabled { opacity: .55; cursor: not-allowed; }
.af-submit { width: 100%; }
.af-form-message { min-height: 20px; margin: 12px 0 0; font-size: 13px; }
.af-form-message.is-error { color: var(--af-red); }
.af-form-message.is-success { color: var(--af-green); }
.af-empty { max-width: 640px; }
.af-confirmation { max-width: 720px; padding-top: 32px; }
.af-confirmation-card { border-top: 5px solid var(--af-line); }
.af-confirmation-card.is-ok { border-top-color: var(--af-green); }
.af-confirmation-card.is-wait { border-top-color: #d8a93a; }
.af-confirmation-card.is-error { border-top-color: var(--af-red); }
.af-confirmation-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0; padding: 14px; background: var(--af-paper); border-radius: 12px; }
.af-confirmation-facts dt { color: var(--af-muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.af-confirmation-facts dd { margin: 2px 0 0; font-weight: 700; }
.af-sync { margin: 14px 0 0; padding: 9px 12px; color: var(--af-muted); background: var(--af-paper); border-radius: 10px; font-size: 13px; }
.af-sync.is-ok { color: var(--af-green); background: var(--af-green-soft); font-weight: 700; }

@media (max-width: 960px) {
    .af-searchbar { grid-template-columns: 1fr 1fr; }
    .af-sb-apartment { grid-column: 1 / -1; }
    .af-searchbar.af-searchbar-dates { grid-template-columns: 1fr 1fr; }
    .af-searchbar-dates .af-sb-guests { grid-column: 1 / -1; }
    .af-sb-field { border-bottom: 1px solid var(--af-line); }
    .af-searchbar button.af-sb-submit[type] { grid-column: 1 / -1; min-height: 56px; }
    .af-searchbar button.af-sb-clear[type],
    .af-searchbar button.af-sb-clear[type]:hover { grid-column: 1 / -1; min-height: 48px; border-top: 1px solid var(--af-line); border-left: 0; }
    .af-checkout { grid-template-columns: 1fr; }
    .af-summary { position: static; order: -1; }
}
@media (max-width: 560px) {
    .af-searchbar { grid-template-columns: 1fr; }
    .af-searchbar.af-searchbar-dates { grid-template-columns: 1fr; }
    .af-sb-field { border-right: 0; min-height: 64px; }
    .af-form-grid { grid-template-columns: 1fr; }
    .af-form-full { grid-column: auto; }
    .af-panel { padding: 20px 16px; }
    .af-cal-day { min-height: 46px; }
    .af-cal-day small { font-size: 9px; }
    .af-confirmation-facts { grid-template-columns: 1fr; }
}