/* ─────────────────────────────────────────────────────────────────────────────
   Public site stylesheet.

   Not one literal colour, font or radius below — every value reads a custom
   property emitted by src/config/theme.js, so BRAND_THEME re-skins the whole
   site. Adding a hex code here would quietly break the other brand.

   The chrome deliberately matches onfire's live ProStudio design so a visitor
   crossing between the two systems on the same domain notices nothing. The
   booking area does not: that part of the live site uses a separate green /
   yellow / blue palette that shares nothing with the brand, and reproducing it
   would carry the inconsistency forward. See docs/ONFIRE-MIGRATION-PLAN.md §2.
   ───────────────────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

/* The `hidden` attribute must actually hide things.
   The user agent's [hidden] rule is only `display: none` at the lowest
   possible specificity, so ANY author rule setting `display` on the same
   element silently defeats it — and the element stays on screen while the
   JavaScript believes it is gone. This file had already patched that
   per-class twice (the filter bar, the mobile count badge) before the
   availability-watch form fell into it a third time. One rule, once. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

img { max-width: 100%; height: auto; }

/* Keyboard focus must stay visible — the booking flow has to be operable
   without a mouse. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.shell {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1rem;
}
.shell--flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

/* The logo strip is light, so everything on it takes dark text — white would
   vanish. The nav below it stays on the brand colour. */
.site-header__bar {
  background: var(--color-header-bar);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-chrome);
  font-weight: var(--font-weight-chrome);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  padding: .7rem 0;
  font-family: var(--font-ui);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--color-primary);
}
.site-logo__img {
  display: block;
  height: 2rem;
  width: auto;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.site-header__phone {
  font-family: var(--font-ui);
  font-size: var(--font-size-chrome);
  font-weight: var(--font-weight-chrome);
  text-decoration: none;
  color: var(--color-text);
  white-space: nowrap;
}
.site-header__phone:hover { color: var(--color-cta); }

/* ── Header search (header-search.js, G 2026-09-24) ─────────────────────────
   The grey strip between the logo and the phone number. The destination box
   is always there; focusing it opens the rest of the form — a panel under the
   box on a desktop, the whole screen on a phone (keyboard + calendar do not
   fit in a dropdown there). One form, restyled by .is-open: nothing moves in
   the DOM, so the box keeps its focus while it opens. */
.site-header__search { flex: 1 1 auto; min-width: 0; max-width: 30rem; }
.stay-form.hsearch {   /* .stay-form's panel look is for the page's own form */
  display: block; position: relative;
  background: none; border: 0; border-radius: 0; padding: 0; margin: 0;
}
.hsearch .stay-form__field--wide { position: relative; }
.hsearch .stay-form__field--wide > label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
/* The magnifier, drawn in the theme's muted text colour through a mask. */
.hsearch .stay-form__field--wide::before {
  content: ''; position: absolute; left: .8rem; top: 50%; width: 1rem; height: 1rem;
  transform: translateY(-50%); background: var(--color-text-muted); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hsearch input[name="destination"] {
  width: 100%; min-height: 2.4rem; padding: .45rem 1rem .45rem 2.3rem;
  border-radius: var(--radius-pill); font-size: .95rem; text-overflow: ellipsis;
}
.hsearch .suggest { z-index: 60; }
.hsearch__top { display: none; }
.hsearch__panel { display: none; }

/* Desktop: the rest of the search drops under the box. */
@media (min-width: 760px) {
  .hsearch.is-open .hsearch__panel {
    display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end;
    position: absolute; top: calc(100% + .5rem); left: 0; z-index: 50;
    width: min(44rem, calc(100vw - 2rem));
    padding: 1.25rem; background: var(--color-white);
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    box-shadow: 0 10px 28px rgb(0 0 0 / .16);
    font-size: 1rem; font-weight: 400;
  }
}

/* Phone: a short box in the strip; open, the whole screen. 16px inputs keep
   iOS from zooming in on focus. */
@media (max-width: 759px) {
  .site-header__search { max-width: none; }
  .hsearch input[name="destination"] { padding-right: .6rem; }
  .stay-form.hsearch.is-open {
    position: fixed; inset: 0; z-index: 1000; overflow-y: auto;
    display: flex; flex-direction: column; align-items: stretch; gap: 1rem;
    padding: calc(env(safe-area-inset-top, 0px) + 1rem) 1rem calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
    background: var(--color-white); font-size: 1rem; font-weight: 400;
  }
  .hsearch.is-open input, .hsearch.is-open select { font-size: 16px; }
  .hsearch.is-open .hsearch__top { display: flex; align-items: center; justify-content: space-between; }
  .hsearch__title { font-family: var(--font-ui); font-weight: 600; font-size: 1.1rem; color: var(--color-primary); }
  .hsearch__close {
    border: 0; background: none; font-size: 1.35rem; line-height: 1; padding: .4rem .5rem;
    color: var(--color-text); cursor: pointer;
  }
  .hsearch.is-open > * { flex: 0 0 auto; }
  .hsearch.is-open .stay-form__field--wide > label {
    position: static; width: auto; height: auto; overflow: visible; clip: auto;
  }
  .hsearch.is-open .stay-form__field--wide::before { top: auto; bottom: 1.2rem; transform: translateY(50%); }
  .hsearch.is-open .hsearch__panel { display: flex; flex-wrap: wrap; gap: .9rem; align-items: flex-end; }
  .hsearch.is-open .hsearch__panel .stay-form__field { flex: 1 1 40%; }
  .hsearch.is-open .hsearch__panel .btn { flex: 1 1 100%; padding: .8rem; font-size: 1rem; }
}
html.hsearch-lock, html.hsearch-lock body { overflow: hidden; }
/* The calendar above the phone sheet. */
html.hsearch-lock .pika-single { z-index: 1100; }

/* ── Category navigation ──────────────────────────────────────────────────── */

.nav {
  background: var(--color-primary-soft);
  color: var(--color-white);
  font-size: var(--font-size-chrome);
  font-weight: var(--font-weight-chrome);
}

.nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__group { position: relative; }

.nav__top {
  display: block;
  padding: .7rem .9rem;
  font-family: var(--font-ui);
  text-decoration: none;
  color: var(--color-white);
  white-space: nowrap;
}
.nav__group:hover > .nav__top,
.nav__top:focus-visible { background: var(--color-primary); }

/* Dropdown. Hover plus focus-within, so it opens for keyboard users too. */
.nav__sub {
  display: none;
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  min-width: 14rem;
  margin: 0;
  padding: .3rem 0;
  list-style: none;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 20px rgb(0 0 0 / .13);
}
.nav__group:hover > .nav__sub,
.nav__group:focus-within > .nav__sub { display: block; }

.nav__sub a {
  display: block;
  padding: .45rem .9rem;
  color: var(--color-text);
  text-decoration: none;
  font-size: .95em;
}
.nav__sub a:hover { background: var(--color-surface); color: var(--color-primary); }

/* The toggle only exists on small screens. Hidden from desktop entirely, where
   the menu is always open and hovers do the work. */
.nav__toggle,
.nav__toggle-btn { display: none; }

/* Small screens: collapse the whole menu behind one control.
   An earlier version expanded every group inline, which pushed the page
   heading below sixteen links and off the first screen — the content was
   buried to avoid burying the navigation. One tap is the better trade, and it
   matches the «Всички категории» control on the live site. */
@media (max-width: 720px) {
  .nav__toggle-btn {
    display: block;
    padding: .7rem .9rem;
    font-family: var(--font-ui);
    font-weight: 500;
    color: var(--color-white);
    cursor: pointer;
    user-select: none;
  }
  .nav__toggle-btn::after {
    content: "▾";
    margin-left: .4em;
    display: inline-block;
    transition: transform .15s ease;
  }
  /* Focusable but invisible, so the keyboard can reach it. Not `hidden` and not
     display:none — either would remove it from the tab order. */
  .nav__toggle {
    position: absolute;
    width: 1px; height: 1px;
    margin: 0; padding: 0; border: 0;
    clip-path: inset(50%);
    overflow: hidden;
  }
  .nav__toggle:focus-visible + .nav__toggle-btn {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
  }
  .nav__toggle:checked + .nav__toggle-btn::after { transform: rotate(180deg); }

  .nav__list { display: none; flex-direction: column; padding-bottom: .5rem; }
  .nav__toggle:checked ~ .nav__list { display: flex; }

  .nav__sub {
    display: block;
    position: static;
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0 0 .4rem .9rem;
  }
  .nav__sub a { color: var(--color-white); opacity: .85; padding: .3rem 0; }
  .nav__sub a:hover { background: transparent; color: var(--color-accent); }
}

@media (prefers-reduced-motion: reduce) {
  .nav__toggle-btn::after { transition: none; }
}

/* ── Main ─────────────────────────────────────────────────────────────────── */

.site-main {
  min-height: 40vh;
  padding: 1.75rem 0 3rem;
}

.site-main h1 {
  font-family: var(--font-display);
  font-size: 1.85rem;
  line-height: 1.2;
  margin: 0 0 .5rem;
  color: var(--color-primary);
  text-wrap: balance;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--color-primary-deep);
  color: var(--color-white);
  padding: 2rem 0 1.5rem;
  margin-top: 2rem;
  font-size: var(--font-size-chrome);
  font-weight: var(--font-weight-chrome);
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.5rem;
}

.footer__title {
  font-family: var(--font-ui);
  font-size: .95em;
  font-weight: 700;
  margin: 0 0 .6rem;
  color: var(--color-white);
}

.footer__link {
  display: block;
  padding: .15rem 0;
  color: var(--color-white);
  opacity: .82;
  text-decoration: none;
}
.footer__link:hover { opacity: 1; color: var(--color-accent); }

.footer__text { margin: 0; opacity: .82; }
.footer__text .footer__link { display: inline; }

.footer__social-row {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgb(255 255 255 / .15);
}
.footer__social {
  color: var(--color-white);
  opacity: .82;
  text-decoration: none;
  font-family: var(--font-ui);
}
.footer__social:hover { opacity: 1; color: var(--color-accent); }

.footer__legal {
  margin: 1rem 0 0;
  opacity: .6;
  font-size: .88em;
}

/* ── Hotel page ───────────────────────────────────────────────────────────── */

.crumbs { font-size: .9em; color: var(--color-text-muted); margin-bottom: .75rem; }
.crumbs a { color: var(--color-text-secondary); text-decoration: none; }
.crumbs a:hover { color: var(--color-cta); }
/* The landing pages' trail is a list — Начало › Гърция › Халкидики — so the
   separator is drawn here, between items, and never ends up read aloud or
   copied as text. */
.crumbs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .1rem .45rem; }
.crumbs__item + .crumbs__item::before { content: "›"; margin-right: .45rem; color: var(--color-text-muted); }
.lp .crumbs { margin: 1.1rem 0 -.6rem; }

.hotel__head { margin-bottom: 1.25rem; }
/* The brand red, G's call 2026-09-23 — the same on the hotel page and the
   landing cards so a hotel's stars look identical in both places. */
.hotel__stars { color: var(--color-cta); font-size: .7em; vertical-align: .25em; letter-spacing: .05em; }
.hotel__location { margin: .15rem 0 0; color: var(--color-text-secondary); }

/* ── Gallery mosaic: hero beside a 2×2 ────────────────────────────────────────
   letsgo's shape. The previous 2 + 3 rows filled the whole first screen on a
   laptop, pushing the hotel name and the price below the fold — the block was
   doing a newsletter's job on a page whose job is to show a price. A fixed
   440px band shows the same five photographs in less than half the height.
   `layoutFor()` in gallery.js trims the grid, so these rules never render an
   empty tile. */

.gal {
  display: grid; grid-template-columns: 2fr 1fr; gap: 4px;
  height: 440px; overflow: hidden;
  border-radius: var(--radius-md); margin-bottom: 1.75rem;
}
.gal--solo { grid-template-columns: 1fr; }

.gal__hero { height: 100%; overflow: hidden; }
.gal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; height: 100%; }
/* Fewer than four thumbnails: fill the column rather than leave holes. */
.gal__grid--n1 { grid-template-columns: 1fr; }
.gal__grid--n2 { grid-template-columns: 1fr; }
.gal__grid--n3 .gal__tile:first-child { grid-column: span 2; }

.gal__tile {
  position: relative; display: block; width: 100%; height: 100%;
  padding: 0; border: 0; cursor: pointer; line-height: 0;
  background: var(--color-surface); overflow: hidden;
}
.gal__tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s ease;
}
.gal__tile:hover img, .gal__tile:focus-visible img { transform: scale(1.04); }
.gal__tile:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* "+38" — the photographs the mosaic did not show. */
.gal__more {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: 1.4rem; font-weight: 700;
  color: var(--color-white); background: rgb(0 0 0 / .52);
  line-height: 1; letter-spacing: .01em;
}

@media (max-width: 720px) {
  /* One photograph, half the height. The thumbnails are a desktop luxury; on a
     phone they would each be the size of a postage stamp. The lightbox still
     reaches every photograph. */
  .gal { grid-template-columns: 1fr; height: 240px; }
  .gal__grid { display: none; }
}

/* ── Lightbox ─────────────────────────────────────────────────────────────────
   The backdrop is black in both themes on purpose: it exists to remove the page
   from view so the photograph is the only thing lit. That is the one place a
   literal colour is the right answer rather than a missing token. */

.lb {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center;
  background: rgb(0 0 0 / .9);
}
.lb--open { display: flex; }
body.lb-locked { overflow: hidden; }

.lb__stage { margin: 0; max-width: 92vw; max-height: 86vh; line-height: 0; }
.lb__img { max-width: 92vw; max-height: 86vh; object-fit: contain; border-radius: var(--radius-sm); }

.lb__close, .lb__nav {
  position: absolute; background: rgb(255 255 255 / .12); border: 0;
  color: var(--color-white); cursor: pointer; font-family: var(--font-ui);
  border-radius: var(--radius-pill); line-height: 1;
}
.lb__close { top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; font-size: 1.6rem; }
.lb__nav   { top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; font-size: 2rem; }
.lb__nav--prev { left: 1rem; }
.lb__nav--next { right: 1rem; }
.lb__close:hover, .lb__nav:hover { background: rgb(255 255 255 / .24); }
.lb__close:focus-visible, .lb__nav:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.lb__count {
  position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
  margin: 0; color: var(--color-white); font-family: var(--font-ui);
  font-size: .85rem; font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .gal__tile img { transition: none; }
  .gal__tile:hover img, .gal__tile:focus-visible img { transform: none; }
}

/* ── Stay form ────────────────────────────────────────────────────────────── */

.stay { margin-top: 2rem; }
.stay__dates { margin: -.6rem 0 1rem; color: var(--color-text-secondary); font-size: .95em; }

/* The search box carries its own heading, the way the live offer page does —
   the title belongs to the box, not to the page above it. 1.875rem is G's
   ~30px: enough air that the box reads as a panel rather than a toolbar. */
.stay-form {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 1.875rem; margin-bottom: 1.5rem;
}
.stay-form__title {
  flex: 1 1 100%;
  font-family: var(--font-ui); font-size: .95rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-primary); margin: 0 0 .25rem;
}
@media (max-width: 620px) { .stay-form { padding: 1.1rem; } }
.stay-form__field { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 10rem; }
.stay-form__field--narrow { flex: 0 1 7rem; }
.stay-form label {
  font-family: var(--font-ui); font-size: .78em; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-secondary);
}
.stay-form input,
.stay-form select {
  font: inherit; color: var(--color-text);
  padding: .5rem .6rem; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-white);
  min-height: 2.5rem;
}
.stay-form input:focus-visible,
.stay-form select:focus-visible { border-color: var(--color-accent); }
.stay-form input[type="date"] { font-variant-numeric: tabular-nums; }

.stay-form__ages { flex: 0 1 auto; }
.stay-form__ages.is-empty { display: none; }
.stay-form__age-row { display: flex; gap: .35rem; }
.stay-form__age { width: 3.6rem; text-align: center; }

.btn {
  font-family: var(--font-ui); font-size: .95em; font-weight: 500;
  border: 0; border-radius: var(--radius-pill); padding: .6rem 1.3rem;
  cursor: pointer;
}
.btn--cta { background: var(--color-cta); color: var(--color-white); }
.btn--cta:hover { filter: brightness(1.08); }

/* ── Stay layout: filters above the results ──────────────────────────────────
   The filters were a 15rem column beside the results, which made the stay
   section the only two-column band on an otherwise full-width page — G read
   that as "strange and disproportionate", and it was: four checkboxes were
   buying a whole sidebar and breaking the page's rhythm to do it.
   They are now a horizontal bar above the results at every width, sticky on
   desktop so they stay in reach while scrolling a long list. On a phone the bar
   becomes the opener for a sheet (further down) — there is no room for a row of
   checkboxes there, but there is no reason to hide them on a desktop either. */

.stay__layout { display: grid; gap: .9rem; }

.filters {
  position: sticky; top: .5rem; z-index: 30;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  /* Matched to the search box above it — the two read as one pair of panels.
     Slightly tighter vertically: this holds a single row of controls. */
  padding: 1.1rem 1.875rem;
  background: var(--color-white);
  box-shadow: 0 5px 12px rgb(0 0 0 / .13);
}
/* The filters' own row(s); the phone number is the bar's second column. */
.filters__main { min-width: 0; overflow: hidden; padding: .2rem 0; margin: -.2rem 0; }
.filters__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.2rem;
  margin-left: calc(-1.2rem - 1px);
}
.filters__row > .filters__title { border-left: 1px solid transparent; padding-left: 1.2rem; }
.filters__title {
  font-family: var(--font-ui); font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  margin: 0; color: var(--color-text);
}
.filters__group {
  display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .8rem;
  border: 0; padding: 0; margin: 0;
}
/* A hairline between groups, so «Хранене» and «Плащане» read as two questions
   rather than one long row of boxes. */
/* The hairline sits on EVERY group, and the row is shifted left by exactly
   one hairline + padding inside a clipping .filters__main. A group that wraps
   to the start of a new line therefore has its hairline clipped away, instead
   of a stray rule dangling at the left edge (the bar wraps since the phone
   number took its right-hand column). The group right after the title keeps
   no rule, as before. */
.filters__group { border-left: 1px solid var(--color-border); padding-left: 1.2rem; }
.filters__title + .filters__group { border-left-color: transparent; }
.filters__legend {
  font-family: var(--font-ui); font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-muted);
}
.filters__opt {
  display: inline-flex; align-items: center; gap: .4rem;
  cursor: pointer; color: var(--color-text-secondary); font-size: .95em;
}
.filters__opt input { accent-color: var(--color-cta); }
.filters__clear { margin-left: auto; padding: .3rem .8rem; font-size: .85rem; }
/* [hidden] is enforced globally at the top of this file. */

.btn--ghost {
  background: transparent; color: var(--color-text);
  border: 1px solid var(--color-text); padding: .45rem 1rem;
}
.btn--ghost:hover { border-color: var(--color-cta); color: var(--color-cta); }

/* ── Room cards ───────────────────────────────────────────────────────────── */

.rooms { display: grid; gap: .75rem; }
.rooms__loading, .rooms__empty { color: var(--color-text-secondary); }
/* The same stay elsewhere in the destination — before the watch form. */
.rooms__elsewhere { margin: .25rem 0 1rem; }
.rooms__elsewhere a { color: var(--color-cta); font-weight: 600; text-decoration: none; }
.rooms__elsewhere a:hover { text-decoration: underline; }

.room {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  overflow: hidden;
}
.room__name {
  font-family: var(--font-ui); font-size: 1.05em; font-weight: 700;
  margin: 0; padding: .8rem 1rem .6rem; color: var(--color-text);
}
.room__desc {
  margin: 0; padding: 0 1rem .6rem;
  color: var(--color-text-secondary); font-size: .92em;
}

/* Four columns, not a flex row: terms · promotion · price · action.
   Flex with space-between put the price wherever the terms happened to end, so
   a row with three badges pushed its price left of the row above it and the
   numbers never lined up. A grid fixes the columns, and the promotion gets one
   of its own — empty on most rows, which is exactly why the rest stay aligned. */
.room__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10rem 10rem 10rem;
  align-items: start;
  gap: 1rem; padding: .8rem 1rem;
  border-top: 1px solid var(--color-border);
}
.room__promo { min-width: 0; }
.room__terms { min-width: 0; }
.room__meal {
  margin: 0 0 .35rem; font-family: var(--font-ui);
  font-weight: 700; color: var(--color-text);
}
.room__badges { margin: 0 0 .35rem; display: flex; flex-wrap: wrap; gap: .35rem; }
.room__cancel { margin: 0; font-size: .9em; }
.room__cancel--free { color: var(--color-success); }
.room__cancel--none { color: var(--color-text-muted); }

/* Price column: was-price, price, and what the price covers — a nightly rate
   read as a total is the single most damaging ambiguity on a booking page.
   Left-aligned, so every figure in the card starts on the same x and the
   column can be read straight down. */
.room__pricing {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: .1rem; white-space: nowrap;
}
.room__was {
  color: var(--color-text-muted); text-decoration: line-through;
  font-size: .9em; font-variant-numeric: tabular-nums;
}
.room__price {
  font-family: var(--font-ui); font-weight: 700; font-size: 1.3em;
  color: var(--color-text); font-variant-numeric: tabular-nums;
}
.room__per { color: var(--color-text-muted); font-size: .82em; }

/* The action, in its own column so the eye goes price → button and every row
   offers the same gesture in the same place. It is also where this row's
   failures are shown — a room that has just gone, a price that moved — because
   that is where the customer was looking when it happened. */
.room__cta { display: flex; align-items: center; justify-content: flex-end; }
.room__book { padding: .5rem 1.2rem; font-size: .95rem; white-space: nowrap; }
.room__book[disabled] { opacity: .65; cursor: progress; }
.room__note { margin: 0; font-size: .85em; line-height: 1.4; text-align: right; max-width: 14rem; }
.room__note--warn { color: var(--color-warning); }
.room__note--info { color: var(--color-text-secondary); }
.room__note--info a { color: var(--color-cta); font-weight: 700; }
.room__pricechange {
  display: flex; flex-direction: column; align-items: flex-end; gap: .35rem;
  max-width: 15rem; text-align: right;
}
.room__pricechange p { margin: 0; font-size: .85em; line-height: 1.4; }
.room__pricechange s { color: var(--color-text-muted); }
.room__pricechange .btn { padding: .35rem .9rem; font-size: .85rem; }

/* Below the width where four columns fit: terms and any promotion stack full
   width, then price and button share a line — the button stays beside the
   number it belongs to rather than drifting onto a row of its own. */
@media (max-width: 860px) {
  .room__row { grid-template-columns: minmax(0, 1fr) auto; }
  .room__terms { grid-column: 1 / -1; }
  .room__promo { grid-column: 1 / -1; }
  .room__promo:empty { display: none; }
  .room__note, .room__pricechange { text-align: left; align-items: flex-start; }
}

.badge {
  display: inline-block; font-family: var(--font-ui); font-size: .78em;
  padding: .2em .6em; border-radius: var(--radius-pill); white-space: nowrap;
}
.badge--promo   { background: color-mix(in srgb, var(--color-cta) 12%, transparent);     color: var(--color-cta); }
.badge--deposit { background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-success); }
.badge--full    { background: color-mix(in srgb, var(--color-warning) 14%, transparent); color: var(--color-warning); }
.badge--req     { background: color-mix(in srgb, var(--color-accent) 18%, transparent);  color: var(--color-primary); }
.badge--stock   { background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-success); }

.room__hint {
  margin: 0; padding: .6rem 1rem .8rem;
  border-top: 1px dashed var(--color-border);
  color: var(--color-text-secondary); font-size: .9em;
}
.room__hint b { color: var(--color-primary); }

/* ── Shared section chrome ────────────────────────────────────────────────────
   Every block below the availability panel is a `.section`. One rule for the
   rhythm means the page reads as one document rather than a stack of widgets
   that each invented their own spacing. */

.section { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--color-border); }

/* DIRECTION A — hierarchy from type and space, not from boxes.
   The heading used to sit on a tinted strip. Six identical strips down the page
   meant the FAQ looked as important as the price: when every heading has the
   same chrome, the chrome stops meaning anything. A rule marks the break; size
   and weight mark the rank; everything shares one left margin, which is what
   the strip quietly broke — its padding started the heading 0.9rem further in
   than the text beneath it. */
.section__title {
  font-family: var(--font-display);
  font-size: 1.32rem; font-weight: 700; letter-spacing: -.01em;
  color: var(--color-primary);
  margin: 0 0 .9rem;
}
.section__intro {
  margin: -.55rem 0 1.1rem;
  color: var(--color-text-secondary);
  font-size: var(--font-size-info); font-weight: var(--font-weight-info);
}

/* ── Facts strip ──────────────────────────────────────────────────────────────
   A scannable summary under the hotel name. Additive, never a replacement for
   the write-up — the description is what ranks. Every chip is derived from
   structured data; see src/site/facts.js.

   Pills, G's call twice over: tried as a plain middot-separated line after they
   read as filter buttons, and brought back — the shape is what makes the row
   scan in one pass, and a strip directly under the H1 is not where anyone looks
   for filters. They stay inert: no hover, no focus, no pointer, and <li> in the
   markup rather than a button or a link, so nothing about them answers a click. */
.facts {
  list-style: none; display: flex; flex-wrap: wrap; gap: .4rem;
  margin: .8rem 0 0; padding: 0;
}
.facts__chip {
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  padding: .3rem .8rem; font-size: .85rem; font-weight: 500;
  color: var(--color-text-secondary); background: var(--color-canvas);
  white-space: nowrap; cursor: default;
}
.facts__chip--key {
  border-color: var(--color-primary); color: var(--color-primary); font-weight: 600;
}

/* ── Amenities | description ──────────────────────────────────────────────────
   The two-column band from the reference page: the checklist a visitor scans on
   the left, the prose they read on the right. Collapses to one column below the
   breakpoint, amenities first — on a phone the scannable list is the more
   useful thing to meet. When only one half has content it takes the full width
   rather than leaving a dead column (.hotel-info--single). */

.hotel-info {
  display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: 2rem; align-items: start;
  margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--color-border);
  /* The reading column runs lighter and smaller than the rest of the page.
     16/600 is right for prices and room names, too heavy for paragraphs of
     Cyrillic — G's call after seeing it live. */
  font-size: var(--font-size-info);
  font-weight: var(--font-weight-info);
}
.hotel-info--single { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 860px) {
  .hotel-info { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
}

.amenities__title {
  font-family: var(--font-ui); font-size: .95rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-primary); margin: 0 0 .75rem;
}
.amenities__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.amenities__list li {
  position: relative; padding-left: 1.4rem;
  color: var(--color-text-secondary); line-height: 1.45;
}
/* The tick is the brand's action colour, as on the reference page. */
.amenities__list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--color-cta); font-weight: 700;
}

/* On wide screens a long amenity list becomes two columns rather than a
   column taller than the article beside it. */
@media (min-width: 861px) {
  .amenities__list { grid-template-columns: 1fr; }
}
@media (max-width: 860px) and (min-width: 520px) {
  .amenities__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Description prose ────────────────────────────────────────────────────── */

/* One reading measure, two columns on a wide screen.
   A single 68ch column left half the page empty on desktop — the write-up is
   the longest thing here and it was using 45% of the width. Widening the
   measure instead would give 150-character lines at 14px, which is unreadable;
   two columns fill the band, keep the measure, and halve how far the page
   scrolls. Each block stays whole (grid items, not CSS columns), so a heading
   is never orphaned from its paragraphs. */
.prose { max-width: 68ch; }
@media (min-width: 861px) {
  .prose {
    max-width: none;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.6rem 3rem; align-items: start;
  }
  .prose__block { max-width: 62ch; }
}
.prose__block { margin: 0 0 1.5rem; }
.prose__block:last-child { margin-bottom: 0; }
@media (min-width: 861px) { .prose__block { margin: 0; } }
.prose__block h2 {
  font-family: var(--font-display); font-size: 1.2rem;
  color: var(--color-heading); margin: 0 0 .45rem;
}
.prose__block p { margin: 0 0 .8rem; line-height: 1.6; }
.prose__block p:last-child { margin-bottom: 0; }

/* The two audiences, as in direction A: plain columns on white, no cards.
   Boxing them was the habit direction A exists to break — a card says
   "separate object", and these are two halves of one answer. What separates
   them is the label and the gap. */
.for-who {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.25rem 2.5rem;
}
.for-who__card h3 {
  font-family: var(--font-ui); font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--color-cta); margin: 0 0 .4rem;
}
.for-who__card p {
  margin: 0; line-height: 1.55; color: var(--color-text-secondary);
  font-size: var(--font-size-info); font-weight: var(--font-weight-info);
}

/* The caveats the pipeline is told to put here.
   The blue is G's — measured from the live offer page — but as a RULE, not a
   fill. Filled, it was the most saturated thing on the page and it held
   check-in times; the rule marks it as an aside from us while leaving the price
   the loudest thing in view. Same colour, a tenth of the volume. */
.good-to-know {
  display: block; margin-top: 1.6rem;
  border-left: 3px solid var(--color-note);
  padding: .1rem 0 .1rem 1rem;
}
.good-to-know__title {
  font-family: var(--font-ui); font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--color-note); margin: 0 0 .4rem;
}
.good-to-know p {
  margin: 0; line-height: 1.6; color: var(--color-text-secondary);
  font-size: var(--font-size-info); font-weight: var(--font-weight-info);
}

/* ── Layout В: facts and text per topic ──────────────────────────────────────
   For hotels with a fact sheet (src/site/factsSection.js), replacing the
   amenities | description band and the «За кого» / «Добре е да знаете» blocks.
   Each topic is a row: its facts on the left, its paragraph on the right — to
   the reader the facts are the summary of the text beside them (G's choice,
   2026-09-29). One column on narrow screens, facts first. */
.topics {
  margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--color-border);
  font-size: var(--font-size-info); font-weight: var(--font-weight-info);
}
.topic {
  display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  column-gap: 2.5rem; row-gap: .4rem; align-items: start;
  padding: 1.1rem 0; border-top: 1px solid var(--color-border);
}
.topic:first-child { border-top: 0; padding-top: 0; }
.topic__title {
  grid-column: 1 / -1; margin: 0;
  font-family: var(--font-display); font-size: 1.2rem; color: var(--color-heading);
}
.topic__facts {
  /* A fixed label column, so the values line up from one topic to the next. */
  margin: 0; display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .25rem .9rem;
  line-height: 1.45;
}
.topic__facts dt { color: var(--color-cta); font-weight: 500; }
.topic__facts dd { margin: 0; font-weight: 500; color: var(--color-text); }
.topic__text { max-width: 62ch; }
.topic__text p { margin: 0 0 .7rem; line-height: 1.6; }
.topic__text p:last-child { margin-bottom: 0; }
/* A topic with text but no confirmed facts: the text takes the whole row. */
.topic--text .topic__text { grid-column: 1 / -1; }
/* «Добре е да знаете» keeps its blue rule, as on today's page. */
.topic--note .topic__text { border-left: 3px solid var(--color-note); padding-left: 1rem; }
.topics__more {
  margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--color-border);
  color: var(--color-text-secondary); line-height: 1.55;
}
.topics__more strong { color: var(--color-text); font-weight: 600; }
@media (max-width: 860px) {
  .topic { grid-template-columns: minmax(0, 1fr); row-gap: .6rem; }
  .topic__facts { grid-template-columns: 8.5rem minmax(0, 1fr); }
}

/* ── Видове стаи (editorial, not bookable) ───────────────────────────────────
   A row per room, not a card. A quarter of hotels carry more than eight room
   types and the worst holds eighteen after deduplication; eighteen cards is a
   page of its own, eighteen rows is about what two cards used to take. */

.rlist { list-style: none; margin: 0; padding: 0; }
.rrow {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; align-items: center;
  padding: .75rem 0; border-top: 1px solid var(--color-border);
}
.rlist > .rrow:first-child { border-top: 0; }
.rrow__img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: var(--radius-sm); background: var(--color-surface);
}
.rrow__img--none { background: var(--color-surface); }
.rrow__body { min-width: 0; }
.rrow__name {
  margin: 0 0 .15rem; font-family: var(--font-ui);
  font-size: .97rem; font-weight: 600; color: var(--color-primary);
}
/* One line, clamped. The full text is in the markup for search engines; a row
   that grows to twelve lines is the card problem coming back. */
.rrow__desc {
  margin: 0; font-size: var(--font-size-info); font-weight: var(--font-weight-info);
  color: var(--color-text-secondary); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The rest of the rooms. A <details>, so it needs no JavaScript, is reachable
   by keyboard, and keeps every room name in the markup where Google reads it.
   The summary is ordered after the content so the control sits below the rows
   it reveals rather than floating in the middle of the list. */
.rmore { display: flex; flex-direction: column; }
.rmore > .rlist--rest { order: 1; }
.rmore > summary {
  order: 2; list-style: none; cursor: pointer;
  margin-top: .9rem; padding: .65rem 1rem; text-align: center;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-size: .92rem; font-weight: 600;
  color: var(--color-primary); background: var(--color-canvas);
}
.rmore > summary::-webkit-details-marker { display: none; }
.rmore > summary:hover { border-color: var(--color-cta); color: var(--color-cta); }
.rmore > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.rmore__close { display: none; }
.rmore[open] .rmore__open { display: none; }
.rmore[open] .rmore__close { display: inline; }
.rlist--rest > .rrow:first-child { border-top: 1px solid var(--color-border); }

/* ── Условия за офертата ─────────────────────────────────────────────────── */

/* Same reading size as the amenities and the write-up — these are paragraphs,
   not prices, and 16/600 was shouting them. */
.terms__body {
  max-width: 68ch;
  font-size: var(--font-size-info);
  font-weight: var(--font-weight-info);
}
.terms__body p { margin: 0 0 .7rem; line-height: 1.6; }
.terms__list { margin: 0 0 .9rem; padding-left: 1.2rem; }
.terms__list li { margin-bottom: .35rem; line-height: 1.55; }

/* ── Map ──────────────────────────────────────────────────────────────────── */

/* Google's Maps Embed API in an iframe — see src/site/sections.js for why this
   is not Leaflet. The iframe is lazy, so it costs nothing until scrolled to. */
.hotel-map {
  height: 22rem; border-radius: var(--radius-md); overflow: hidden;
  background: var(--color-surface); line-height: 0;
}
.hotel-map iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (max-width: 720px) { .hotel-map { height: 16rem; } }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */

/* Full width, like every other section — the 68ch cap made the accordion look
   like a column that had lost its neighbour. The answer inside keeps a measure,
   because the bar being wide is a layout decision and the text being readable
   is not negotiable. */
.faq__list { display: grid; gap: .5rem; }
.faq__item {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-canvas);
}
.faq__q {
  cursor: pointer; list-style: none; padding: .85rem 2.4rem .85rem 1rem;
  position: relative; font-family: var(--font-ui); font-weight: 600;
  color: var(--color-primary); font-size: .97em;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+"; position: absolute; right: 1rem; top: 50%;
  transform: translateY(-50%); color: var(--color-cta);
  font-size: 1.2rem; font-weight: 400; line-height: 1;
}
.faq__item[open] .faq__q::after { content: "−"; }
.faq__q:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
/* An answer is blocks now — paragraphs and bullet lists, by the same rule the
   offer terms use — so the type treatment has to cover both.
   Spacing comes from `gap`, not from margins between siblings: the type rule
   below sets `margin: 0` at (0,1,1), which would out-specify any
   `.faq__a > * + *` at (0,1,0) and silently leave every block flush. Gap is
   not in that fight, and it adds nothing after the last block. */
.faq__a { padding: 0 1rem .9rem; display: flex; flex-direction: column; gap: .6rem; }
.faq__a p,
.faq__a li {
  margin: 0; max-width: 80ch; line-height: 1.6; color: var(--color-text-secondary);
  font-size: var(--font-size-info); font-weight: var(--font-weight-info);
}
.faq__a .terms__list { margin: 0; padding-left: 1.2rem; }
.faq__a .terms__list li + li { margin-top: .35rem; }

/* ── Calendar ─────────────────────────────────────────────────────────────────
   Pikaday, styled to the onfire offer page it replaces: red for the chosen day
   and for the month arrows, a plain white card, no rounded buttons. Loaded
   before site.css (see layout.js), so none of this needs !important — the trap
   letsgo fell into when the order was the other way round. */

/* The picker makes these read-only (see hotel-dates.js), so they must not look
   or feel disabled — same background as the other fields, a pointer, and a
   caret that never appears. */
.stay-form__date { font-variant-numeric: tabular-nums; cursor: pointer; caret-color: transparent; }
.stay-form__date[readonly] { background: var(--color-white); color: var(--color-text); }

.pika-single {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-canvas); color: var(--color-text);
  font-family: var(--font-ui); box-shadow: 0 6px 24px rgb(0 0 0 / .12);
  z-index: 60;
}
.pika-lendar { margin: .6rem .7rem; }
.pika-title { padding: .35rem 0 .6rem; }
.pika-label {
  font-family: var(--font-ui); font-size: .95rem; font-weight: 600;
  color: var(--color-primary); letter-spacing: .06em;
}
/* Pikaday puts the month name in the button as text and hides it with a sprite
   offset. Replacing the sprite means hiding that text ourselves — font-size:0
   rather than text-indent, which left «Пред»/«След» sitting on the chevron. The
   label survives for screen readers because the text node is still there. */
.pika-prev, .pika-next {
  background-image: none; font-size: 0; text-indent: 0; white-space: nowrap;
  width: 1.9rem; height: 1.9rem; border-radius: var(--radius-pill);
  background: var(--color-cta); opacity: 1; position: relative;
}
.pika-prev::after, .pika-next::after {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  color: var(--color-white); font-size: 1rem; line-height: 1;
}
.pika-prev::after { content: "‹"; }
.pika-next::after { content: "›"; }
.pika-prev:hover, .pika-next:hover { filter: brightness(1.08); }
.is-disabled .pika-prev, .is-disabled .pika-next,
.pika-prev.is-disabled, .pika-next.is-disabled { opacity: .3; cursor: default; }

.pika-table th {
  font-size: .78rem; font-weight: 600; color: var(--color-cta);
  text-transform: none; padding-bottom: .3rem;
}
.pika-table abbr { text-decoration: none; border: 0; cursor: default; }

.pika-button {
  background: transparent; color: var(--color-text); text-align: center;
  border-radius: var(--radius-sm); padding: .5rem; font-size: .9rem;
}
.pika-button:hover, .pika-button:focus {
  background: color-mix(in srgb, var(--color-cta) 12%, transparent);
  color: var(--color-cta); border-radius: var(--radius-sm);
}
.is-today .pika-button { color: var(--color-cta); font-weight: 700; }
.is-selected .pika-button,
.is-selected .pika-button:hover {
  background: var(--color-cta); color: var(--color-white);
  font-weight: 600; box-shadow: none; border-radius: var(--radius-sm);
}
/* The nights between arrival and departure, shaded so the two fields read as
   one range — the part of a range picker worth keeping. */
.is-inrange .pika-button {
  background: color-mix(in srgb, var(--color-cta) 10%, transparent);
  color: var(--color-text);
}
.is-startrange .pika-button,
.is-endrange .pika-button {
  background: var(--color-cta); color: var(--color-white); box-shadow: none;
}
.is-disabled .pika-button, .is-outside-current-month .pika-button {
  color: var(--color-text-muted); opacity: .45;
}
.is-disabled .pika-button:hover { background: transparent; color: var(--color-text-muted); }

/* ── Room cards: the name on a filled bar ─────────────────────────────────────
   What separates one room from the next in a long list. A plain bold line
   stopped doing that job once each card carried several price rows. */

.room { padding: 0; overflow: hidden; }
.room__name {
  margin: 0; padding: .6rem .9rem;
  background: var(--color-primary); color: var(--color-white);
  font-family: var(--font-ui); font-size: 1rem; font-weight: 600;
}
.room__body { padding: .2rem 0 0; }
.room__body > .room__desc { padding: .7rem .9rem 0; margin: 0; }
.room__body > .room__row:first-child { border-top: 0; }

/* Terms that apply to every hotel in the country, set apart from this hotel's
   own so it is clear which is which. */
.terms__body--standard {
  margin-top: 1rem; padding-top: 1rem;
  border-top: 1px dashed var(--color-border);
  color: var(--color-text-secondary);
}

/* ── Filters on a phone ───────────────────────────────────────────────────────
   On desktop the bar sits above the results and is always in view; the opener
   and the sheet below are display:none there and nothing changes.

   On a phone there is no room for a row of checkboxes, so the same element
   becomes a sheet, opened by a bar pinned to the bottom of the viewport —
   reachable at any scroll position rather than below everything it narrows.
   The bar names what it filters rather than saying only «Филтри»: the group
   names when nothing is chosen, the chosen values once something is. What is
   filtered is more useful than how many filters are on. */

.filters-fab, .filters__close, .filters__done { display: none; }

@media (max-width: 860px) {
  .filters-fab {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    position: fixed; z-index: 80; left: 1rem; right: 1rem; bottom: 1rem;
    padding: .7rem 1rem; border: 0; cursor: pointer;
    background: var(--color-primary); color: var(--color-white);
    font-family: var(--font-ui); font-size: .9rem; font-weight: 600;
    border-radius: var(--radius-pill);
    box-shadow: 0 4px 16px rgb(0 0 0 / .28);
  }
  /* One line, whatever is in it: a fourth selected filter must not turn the bar
     into a paragraph. */
  .filters-fab__hint {
    font-weight: 400; opacity: .9; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* The panel itself becomes the sheet. Off-screen rather than display:none so
     it can be animated and so its checkbox state survives closing. */
  .filters {
    display: block;
    position: fixed; z-index: 90; inset: auto 0 0 0;
    max-height: 82vh; overflow-y: auto;
    margin: 0; padding: .9rem 1rem 1rem;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    box-shadow: 0 -6px 28px rgb(0 0 0 / .26);
    transform: translateY(100%);
    transition: transform .25s ease;
  }
  .filters--open { transform: translateY(0); }

  /* Back to a stacked panel: each group a block, each option its own row. */
  .filters__title { margin-bottom: .75rem; }
  .filters__group { display: block; margin: 0 0 .9rem; }
  .filters__group { border-left: 0; padding-left: 0; }
  .filters__row { display: block; margin-left: 0; }
  .filters__row > .filters__title { border-left: 0; padding-left: 0; }
  .filters__legend { display: block; margin-bottom: .35rem; color: var(--color-text); }
  .filters__opt { display: flex; align-items: flex-start; padding: .25rem 0; }
  .filters__clear { width: 100%; margin-left: 0; padding: .45rem 1rem; font-size: 1em; }

  .filters__close {
    display: block; position: absolute; top: .4rem; right: .6rem;
    width: 2rem; height: 2rem; padding: 0; border: 0; cursor: pointer;
    background: transparent; color: var(--color-text-secondary);
    font-size: 1.5rem; line-height: 1;
  }
  .filters__done { display: block; width: 100%; margin-top: .5rem; }

  body.filters-locked { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .filters { transition: none; }
}

/* ── Amenities above the write-up, on every width ─────────────────────────────
   The two-column band (list beside prose) was a ProStudio carry-over. On a
   phone it stacks, and G preferred that: the list reads as a compact block,
   then the write-up gets the whole reading width. Desktop now does the same,
   with the list in three columns so nineteen items are five rows, not a
   column taller than the prose beside it. Later rules win, so this overrides
   the grid declared above without touching it. */
.hotel-info { grid-template-columns: minmax(0, 1fr); }
.hotel-info--single { grid-template-columns: minmax(0, 1fr); }
.amenities { max-width: 68ch; }
@media (min-width: 861px) {
  .amenities { max-width: none; }
  .amenities__list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.5rem; }
}

/* ── Room popup ───────────────────────────────────────────────────────────────
   Shared by «Още за стаята» on the room list and ⓘ on the bookable cards. A
   white panel over a dimmed page — not the black lightbox, because this is
   text to read, not a photograph to look at. */
.rrow__more {
  margin-top: .3rem; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-ui); font-size: .85rem; font-weight: 600;
  color: var(--color-cta);
}
.rrow__more:hover { text-decoration: underline; }

.room__info {
  all: unset; cursor: pointer; display: inline; color: inherit; font: inherit;
}
.room__info:hover .room__info-icon, .room__info:focus-visible .room__info-icon { color: var(--color-accent); }
.room__info:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.room__info-icon { font-size: .95em; opacity: .85; margin-left: .15em; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); border: 0; white-space: nowrap;
}

.rm {
  position: fixed; inset: 0; z-index: 100; display: none;
  align-items: center; justify-content: center; padding: 1rem;
  background: rgb(0 0 0 / .55);
}
.rm--open { display: flex; }
body.rm-locked { overflow: hidden; }
.rm__panel {
  position: relative; width: min(52rem, 100%); max-height: 90vh; overflow-y: auto;
  background: var(--color-canvas); color: var(--color-text);
  border-radius: var(--radius-md); box-shadow: 0 12px 40px rgb(0 0 0 / .3);
}
.rm__close {
  position: sticky; top: .5rem; float: right; margin: .5rem .6rem 0 0;
  width: 2.2rem; height: 2.2rem; border: 0; border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--color-text); font-size: 1.4rem;
  line-height: 1; cursor: pointer; z-index: 1;
}
.rm__close:hover { background: var(--color-border); }
.rm__body { padding: 1.4rem 1.6rem 1.6rem; clear: none; }
.rm__title {
  font-family: var(--font-display); font-size: 1.35rem; font-weight: 700;
  color: var(--color-primary); margin: 0 3rem .9rem 0;
}
/* A horizontal strip: every photograph, none cropped to a grid. */
.rm__photos {
  display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: 1rem;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.rm__photos img {
  flex: 0 0 auto; height: 15rem; width: auto; max-width: 80%;
  border-radius: var(--radius-sm); scroll-snap-align: start; object-fit: cover;
}
.rm__desc { max-width: 68ch; font-size: var(--font-size-info); font-weight: var(--font-weight-info); }
.rm__desc p { margin: 0 0 .7rem; line-height: 1.6; }
.rm__amenities {
  margin: 1rem 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .3rem 1.5rem;
  font-size: var(--font-size-info); font-weight: var(--font-weight-info);
  color: var(--color-text-secondary);
}
.rm__amenities li { position: relative; padding-left: 1.2rem; }
.rm__amenities li::before { content: "✓"; position: absolute; left: 0; color: var(--color-cta); font-weight: 700; }
.rm__empty { color: var(--color-text-muted); }
@media (max-width: 640px) {
  .rm { padding: 0; align-items: flex-end; }
  .rm__panel { max-height: 92vh; border-radius: var(--radius-md) var(--radius-md) 0 0; }
  .rm__photos img { height: 11rem; }
}

/* ── Room popup, corrected ────────────────────────────────────────────────────
   Two mobile faults, both from the first version:

   1. The close button was `position: sticky` inside the panel's own scrolling
      area. On Android the URL bar reappears when you scroll up, shrinking the
      visual viewport; the panel — sized in `vh`, which ignores browser chrome —
      was taller than the space available, so its top scrolled behind the URL
      bar and the only escape was reloading. The header is now a flex row
      OUTSIDE the scroll container, so it cannot move, and heights are in `dvh`,
      which tracks the chrome as it shows and hides.

   2. The panel filled the screen edge to edge, leaving no backdrop to tap.
      A gap is kept at the top on small screens so the dimmed page is always a
      visible, tappable way out.

   Declared after the original block, so these win without touching it. */

.rm { align-items: center; }
.rm__panel {
  display: flex; flex-direction: column;
  max-height: min(88dvh, 100%);
  overflow: hidden;                    /* the body scrolls, not the panel */
}
.rm__head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1rem 1rem 1.6rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-canvas);
}
.rm__title { margin: 0; flex: 1 1 auto; min-width: 0; font-size: 1.2rem; }
.rm__close {
  position: static; float: none; margin: 0; flex: 0 0 auto;
  width: 2.4rem; height: 2.4rem; font-size: 1.5rem;
}
.rm__body {
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 1.2rem 1.6rem calc(1.6rem + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 640px) {
  .rm { align-items: flex-end; padding: 0; }
  /* Leave the top strip showing so there is always a backdrop to tap. */
  .rm__panel { max-height: calc(100dvh - 3.5rem); width: 100%; }
  .rm__head { padding: .9rem .8rem .9rem 1.1rem; }
  .rm__body { padding: 1rem 1.1rem calc(1.4rem + env(safe-area-inset-bottom, 0px)); }
  .rm__title { font-size: 1.05rem; }
}

/* ── Booking page ─────────────────────────────────────────────────────────────
   Two columns: the form the customer fills in, and the quote they are agreeing
   to, which stays beside it on a desktop and above it on a phone. The summary
   is sticky because the form is longer than it is on a small screen and the
   price is the thing being agreed to — it should never scroll out of sight.
   See src/site/booking.js. */

.bk { max-width: 62rem; }
.bk h1 { font-family: var(--font-display); font-size: 1.7rem; margin: 0 0 1.2rem; color: var(--color-primary); }
.bk__h2 {
  font-family: var(--font-ui); font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-text-muted); margin: 0 0 .9rem;
}
.bk__lead {
  margin: -.4rem 0 1.2rem; color: var(--color-text-secondary);
  font-size: var(--font-size-info); font-weight: var(--font-weight-info); max-width: 46ch;
}

.bk__cols { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.5rem; align-items: start; }
@media (max-width: 800px) {
  /* Summary first on a phone: agree to the number before typing for it. */
  .bk__cols { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .bk__summary { order: -1; }
}

.bk__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; }
.bk-field { margin: 0 0 1rem; display: flex; flex-direction: column; gap: .3rem; }
.bk-field label { font-family: var(--font-ui); font-size: .88rem; font-weight: 600; color: var(--color-text); }
.bk-field input, .bk-field textarea {
  font: inherit; font-size: 1rem; color: var(--color-text);
  padding: .55rem .7rem; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-white);
}
.bk-field input:focus-visible, .bk-field textarea:focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: 1px; border-color: transparent;
}
.bk-field textarea { resize: vertical; min-height: 4.5rem; }
.bk-req { color: var(--color-cta); }
.bk-opt { color: var(--color-text-muted); font-weight: 400; }
.bk-hint { margin: 0; font-size: .8rem; color: var(--color-text-muted); }

.bk-check { display: flex; gap: .6rem; align-items: flex-start; margin: .6rem 0 1.2rem; font-size: .9rem; line-height: 1.5; }
.bk-check input { margin-top: .2rem; accent-color: var(--color-cta); flex: 0 0 auto; }
.bk-check a { color: var(--color-cta); }

.bk__submit { width: 100%; padding: .8rem 1.5rem; font-size: 1.05rem; }
.bk__reassure { margin: .7rem 0 0; font-size: .85rem; color: var(--color-text-muted); text-align: center; }
.bk__error {
  margin: 0 0 1rem; padding: .7rem .9rem; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-danger) 10%, transparent);
  color: var(--color-danger); font-size: .9rem;
}

.bk__summary {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 1.1rem 1.2rem; background: var(--color-surface); position: sticky; top: 1rem;
}
@media (max-width: 800px) { .bk__summary { position: static; } }
.bk-sum__hotel { margin: 0; font-family: var(--font-ui); font-weight: 700; color: var(--color-primary); }
.bk-sum__loc { margin: .1rem 0 0; font-size: .85rem; color: var(--color-text-muted); }
.bk-sum__room { margin: .6rem 0 .8rem; font-size: .95rem; color: var(--color-text); }
.bk-sum__list { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: 0 0 .9rem; font-size: .88rem; }
.bk-sum__list dt { color: var(--color-text-muted); }
.bk-sum__list dd { margin: 0; text-align: right; color: var(--color-text); font-variant-numeric: tabular-nums; }
.bk-sum__total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-top: .7rem; border-top: 1px solid var(--color-border);
}
.bk-sum__total strong { font-family: var(--font-ui); font-size: 1.25rem; color: var(--color-text); font-variant-numeric: tabular-nums; }
.bk-sum__pay {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: .4rem; font-size: .85rem; color: var(--color-text-secondary);
}
.bk-sum__pay strong { font-variant-numeric: tabular-nums; }
.bk-sum__policy { margin: .9rem 0 0; font-size: .82rem; line-height: 1.45; color: var(--color-success); }
.bk-sum__policy--strict { color: var(--color-text-muted); }
.bk-sum__req {
  margin: .7rem 0 0; padding-left: .8rem; border-left: 3px solid var(--color-note);
  font-size: .82rem; line-height: 1.45; color: var(--color-text-secondary);
}
.bk-sum__back { margin: 1rem 0 0; font-size: .85rem; }
.bk-sum__back a { color: var(--color-text-secondary); }

.bk__empty, .bk__done { max-width: 44rem; }
.bk__uid { font-size: 1.05rem; }
.bk__uid strong { font-family: var(--font-ui); letter-spacing: .04em; color: var(--color-cta); }
.bk__bank {
  margin: 1.6rem 0; padding: 1.1rem 1.2rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface);
}
.bk__bank-list { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.2rem; margin: 0; font-size: .92rem; }
.bk__bank-list dt { color: var(--color-text-muted); }
.bk__bank-list dd { margin: 0; color: var(--color-text); }
.bk__iban { font-family: var(--font-ui); letter-spacing: .03em; }
.bk__note { margin: .9rem 0 0; font-size: .82rem; color: var(--color-text-muted); }

/* The payment schedule. One block, two places: beside the form while deciding,
   and on the confirmation afterwards. The email carries the same three lines —
   the page someone booked on should not be the one place the amounts are
   missing. `--boxed` is the confirmation's standalone version. */
.bk-plan { margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--color-border); }
.bk-plan--boxed {
  margin: 1.4rem 0; padding: 1.1rem 1.2rem; border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-surface);
}
.bk-plan__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .3rem 0; font-size: .88rem; color: var(--color-text-secondary);
}
.bk-plan__row strong { font-variant-numeric: tabular-nums; color: var(--color-text); }
.bk-plan__what { display: block; color: var(--color-text); }
.bk-plan__when { display: block; font-size: .82em; color: var(--color-text-muted); }
.bk-plan__row--total {
  margin-top: .3rem; padding-top: .6rem; border-top: 1px solid var(--color-border);
}
.bk-plan__row--total strong { font-family: var(--font-ui); font-size: 1.2rem; }

/* ── Availability watch ─────────────────────────────────────────────────────
   Offered only when the hotel has nothing at all for the chosen dates — until
   this existed, that search was a total loss. See docs/AVAILABILITY-WATCH-PLAN.md.

   Deliberately quieter than the search form above it. This is the consolation
   prize on a page that has just disappointed someone: a second loud box
   competing with «Изберете други дати» would read as a sales pitch at exactly
   the wrong moment. */
.watch { margin-top: 1.25rem; }

.watch__open { font-size: .95rem; }

.watch__form {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 1.875rem; margin-top: .25rem;
}
@media (max-width: 620px) { .watch__form { padding: 1.1rem; } }

.watch__lead, .watch__note, .watch__error, .watch__done {
  flex: 1 1 100%; margin: 0;
  font-weight: var(--font-weight-info);
}
.watch__lead { color: var(--color-text-secondary); font-size: .95rem; }
.watch__note { color: var(--color-text-secondary); font-size: .8rem; line-height: 1.5; }
.watch__error { color: var(--color-cta); font-size: .9rem; font-weight: 600; }

.watch__field { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 12rem; }
.watch__field > span { font-size: .8rem; color: var(--color-text-secondary); }
.watch__field em { font-style: normal; opacity: .75; }
.watch__field input, .watch__field select {
  font: inherit; padding: .55rem .7rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  color: inherit;
}

/* The consent box is full width and unticked: it is a separate ask from the
   alert itself, and must never read as a condition of getting it. */
.watch__check {
  flex: 1 1 100%; display: flex; gap: .5rem; align-items: flex-start;
  font-size: .85rem; color: var(--color-text-secondary);
}
.watch__check input { margin-top: .15rem; }

.watch__submit { flex: 0 0 auto; }

.watch__done {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: 1.1rem 1.25rem;
  font-size: .95rem;
}

/* ── Landing pages ─────────────────────────────────────────────────────────
   A heading, a paragraph and a grid of hotels. Plan: Phase 3 of
   docs/DESTINATION-PAGES-PLAN.md.

   BUILT TO MATCH THE PAGE IT REPLACES. onfire's category cards are a full-bleed
   photograph with the text over a dark gradient at its foot — resort in caps, a
   short rule, the hotel name, stars — and a white frame that lifts on hover.
   A visitor arriving from Google has seen that layout for years; a page that
   looks like somebody else's site is a page they leave.

   The palette needs no new values: onfire's theme already IS this design's —
   primary #2f2342, cta #e42f45, accent #2fcbe4 are the same colours the live
   stylesheet uses. Brand colours stay tokens; the gradient and the hover shadow
   are rgb(0 0 0 / α) like every other shadow in this file, because they are
   depth rather than brand.

   Every card carries a photograph — the query guarantees it — so the card can
   size to the image without defending against a missing one. */

.lp__head { padding: 1.4rem 0 .4rem; }
.lp__title {
  margin: 0 0 .4rem; color: var(--color-heading);
  font-family: var(--font-display); font-size: 1.62rem; font-weight: 700; letter-spacing: -.01em;
  text-wrap: balance;
}
/* The text sits at the foot of the page. G's call, 2026-09-23: a visitor
   arriving from Google wants the hotels first. It stays real, visible text —
   hidden or off-screen copy is what search engines penalise.
   It was one 12px paragraph; since 2026-10-02 it is written with subheadings,
   lists and links (site/richText.js), which is text meant to be read — so it
   is set at the size of the hotel page's own information text, on a measure. */
.lp__text {
  margin: 2.5rem 0 0; padding-top: 1.75rem; border-top: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: var(--font-size-info); font-weight: var(--font-weight-info); line-height: 1.6;
}
/* The measure is on the blocks, not the section: the rule above it runs the
   full width, like the one over the questions below. */
.lp__text > * { margin: 0 0 .8rem; max-width: 80ch; }
.lp__text h2, .lp__text h3 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em;
  color: var(--color-primary); line-height: 1.3; margin-top: 1.5rem;
}
.lp__text h2 { font-size: 1.32rem; }
.lp__text h3 { font-size: 1.1rem; }
.lp__text > :first-child { margin-top: 0; }
.lp__text ul { padding-left: 1.2rem; }
.lp__text li + li { margin-top: .35rem; }
.lp__text a { color: var(--color-cta); }
.lp .faq { margin-bottom: 2.4rem; }
.lp__text:last-child { margin-bottom: 2.4rem; }
.lp__count { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-chrome); }
.lp__empty { padding: 2rem 0; color: var(--color-text-muted); }

/* Three columns, always — the page it replaces is always three, and the point
   of the width is a larger photograph. Two on a tablet, one on a phone. */
.lp-grid {
  list-style: none; margin: 1.2rem 0 0; padding: 0;
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) { .lp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lp-grid { grid-template-columns: 1fr; } }

/* A column of photograph then panel, stretched to the row's height so every
   card in a row ends on the same line. */
.lp-card { position: relative; display: flex; }
.lp-card__link {
  display: flex; flex-direction: column; flex: 1; position: relative;
  text-decoration: none; color: var(--color-text);
  background: var(--color-white);
}

.lp-card__media { position: relative; overflow: hidden; color: var(--color-white); }

/* A fixed ratio, because supplier photography arrives in every shape and a
   ragged grid reads as broken. */
.lp-card__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--color-surface); }

/* Only the foot is darkened now — it carries just the resort and its rule, so
   the gradient can start lower and leave more of the photograph clean. */
.lp-card__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0) 55%, rgb(0 0 0 / .65) 100%);
}

.lp-card__top {
  position: absolute; top: 10px; right: 0; z-index: 2;
  min-width: 50px; height: 50px; line-height: 50px; padding: 0 5px;
  background: var(--color-white); color: var(--color-cta);
  text-align: center; text-transform: uppercase; font-weight: 600;
  font-size: var(--font-size-chrome);
}

.lp-card__info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: .8rem .9rem .7rem; }
.lp-card__place {
  display: block; text-transform: uppercase; font-weight: 700;
  font-size: var(--font-size-chrome); letter-spacing: .02em;
}
.lp-card__rule { display: block; width: 50px; border-top: 1px solid var(--color-white); margin: .45rem 0 0; }

/* The panel. onfire sits on plain white, so the panel needs a hairline to have
   an edge at all; the photograph above supplies the top one. */
.lp-card__body {
  flex: 1; display: flex; flex-direction: column;
  padding: .7rem .9rem .9rem;
  border: 1px solid var(--color-border); border-top: 0;
}

/* Rows that are always present, filled or not, so cards stay level: an empty
   stars row or meal line holds its height instead of collapsing. */
.lp-card__stars-row { min-height: 1.3em; line-height: 1.3; }
.lp-card__stars { color: var(--color-cta); letter-spacing: .06em; }
.lp-card__name {
  margin: .15rem 0 0; font-size: 1.1rem; font-weight: 500; line-height: 1.3;
  color: var(--color-primary);
}
.lp-card__meals {
  margin: .35rem 0 0; min-height: 1.4em; line-height: 1.4;
  font-size: var(--font-size-chrome); color: var(--color-text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* The price on a preset-dates page (Phase 4): «от 1 240 EUR», and under it
   what that buys. Every card reserves the same height — priced, sold out or
   not priced yet — so a row stays level. */
.lp-card__price {
  margin: .5rem 0 0; min-height: 2.6em; line-height: 1.3;
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .3rem;
}
.lp-card__from { font-size: var(--font-size-chrome); color: var(--color-text-secondary); }
.lp-card__amount { font-size: 1.2rem; font-weight: 700; color: var(--color-cta); }
.lp-card__basis { flex-basis: 100%; font-size: .78rem; color: var(--color-text-muted); }
.lp-card__price--none { font-size: var(--font-size-chrome); color: var(--color-text-muted); align-items: center; }
.lp__basis { margin: .35rem 0 0; color: var(--color-text-secondary); font-size: var(--font-size-chrome); }

/* The hotel page's facts chips, a size smaller. Room for two rows is always
   reserved — four chips wrap onto a second line often enough that without it
   a row of cards steps by a chip's height. margin-top: auto parks them at the
   foot, so a one-line name and a two-line name still end level. */
.lp-card__chips {
  list-style: none; display: flex; flex-wrap: wrap; align-content: flex-start; gap: .3rem;
  margin: auto 0 0; padding: .6rem 0 0; box-sizing: border-box;
  min-height: calc(.6rem + 2 * 1.65rem + .3rem);
}
.lp-card__chip {
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  padding: .15rem .6rem; font-size: .78rem; font-weight: 500;
  color: var(--color-text-secondary); background: var(--color-surface);
  white-space: nowrap;
}

/* The button, in the style of the live card's «ВИЖ ОФЕРТАТА»: full width, the
   brand red, capitals with air between them. */
.lp-card__cta {
  display: block; margin-top: .8rem; padding: .7rem .5rem;
  background: var(--color-cta); color: var(--color-white);
  text-align: center; text-transform: uppercase; letter-spacing: .08em;
  font-size: var(--font-size-chrome); font-weight: 600; line-height: 1.2;
}
.lp-card__cta--none { background: none; }

/* «Още подборки» (landing.js relatedSection) — G's layout, 2026-09-27:
   photograph left, text right, three to a row on desktop, two on a tablet,
   one on a phone. The foot (price + «Виж») sits at the bottom of each card,
   so a row with short and long intros stays level. */
.lp-more { margin-top: 2.5rem; }
.lp-more__title { margin: 0 0 1rem; font-size: 1.35rem; font-weight: 500; color: var(--color-primary); }
.lp-more__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem;
                 grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .lp-more__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .lp-more__grid { grid-template-columns: 1fr; } }
.lp-more__item { display: flex; }
.lp-more__card {
  flex: 1; display: flex; gap: .8rem; padding: .7rem; text-decoration: none; color: inherit;
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: 8px;
  box-shadow: 0 1px 3px rgb(0 0 0 / .06); transition: box-shadow .15s, transform .15s;
}
.lp-more__card:hover { box-shadow: 0 6px 18px rgb(0 0 0 / .14); transform: translateY(-2px); }
.lp-more__img { flex: 0 0 38%; align-self: stretch; min-height: 9.5rem; width: 38%; object-fit: cover;
                border-radius: 6px; background: var(--color-surface); }
.lp-more__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lp-more__name { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.25; color: var(--color-cta);
                 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lp-more__text { margin: .4rem 0 0; font-size: .88rem; line-height: 1.4; color: var(--color-text);
                 display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lp-more__foot { margin-top: auto; padding-top: .6rem; display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; }
.lp-more__price { margin: 0; display: flex; flex-direction: column; line-height: 1.15; color: var(--color-primary); }
.lp-more__from { font-size: .75rem; font-weight: 600; }
.lp-more__amount { font-size: 1.45rem; font-weight: 800; }
.lp-more__basis { font-size: .72rem; color: var(--color-text-secondary); }
.lp-more__count { font-size: .9rem; font-weight: 700; }
.lp-more__cta {
  flex: 0 0 auto; padding: .6rem 1.1rem; border-radius: 4px; background: var(--color-cta); color: var(--color-white);
  text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: var(--font-size-chrome);
}
.lp-card__cta--none::before { content: '\00a0'; }   /* holds the line height */

/* The lift. ProStudio draws a white panel inset -10px behind the card and
   shadows it; one box-shadow does the same thing without the extra element —
   a white ring, then the shadow outside it. */
@media (hover: hover) {
  .lp-card__link { transition: box-shadow .18s ease-in-out; }
  a.lp-card__link:hover {
    z-index: 3;
    box-shadow: 0 0 0 10px var(--color-white), 0 0 15px 10px rgb(0 0 0 / .5);
  }
  a.lp-card__link:hover .lp-card__scrim { background: linear-gradient(to bottom, rgb(0 0 0 / 0) 40%, rgb(0 0 0 / .75) 100%); }
}
a.lp-card__link:focus-visible {
  outline: 3px solid var(--color-accent); outline-offset: 2px;
}

.lp-pages {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin: 1.6rem 0 2.4rem;
}
.lp-pages__n, .lp-pages__step {
  display: inline-block; padding: .35rem .7rem;
  border: 1px solid var(--color-border); border-radius: 6px;
  color: var(--color-text); text-decoration: none; font-size: var(--font-size-chrome);
}
.lp-pages__n--now { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); }
.lp-pages__gap { padding: 0 .2rem; color: var(--color-text-muted); }

/* ── Search: the destination box, a landing page's search, the results page ──
   G, 2026-09-23. The form is the hotel page's own (.stay-form); the results
   follow letsgo's list layout — photograph left, details and the three
   cheapest rooms right — built from onfire's tokens. */

.stay-form__field--wide { flex: 2 1 14rem; }

/* On a landing page the search sits between the heading and the showcase. */
.lp__search { margin: 1.2rem 0 .4rem; }
.lp__search .stay-form { margin-bottom: 0; }

.sr__head { padding: 1.4rem 0 .6rem; }
.sr__title {
  margin: 0; color: var(--color-heading);
  font-family: var(--font-display); font-size: 1.62rem; font-weight: 700;
}
.sr__status p { margin: .6rem 0 1.2rem; color: var(--color-text-secondary); }
.sr__error { color: var(--color-danger) !important; }

.sr__layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.4rem; align-items: start; margin-bottom: 2.4rem; }

.sr-filters {
  position: sticky; top: 1rem;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-white); padding: 1rem;
}
.sr-filters__title { margin: 0 0 .6rem; font-weight: 700; color: var(--color-primary); }
.sr-filter { padding: .6rem 0; border-top: 1px solid var(--color-border); }
.sr-filter__label {
  margin: 0 0 .35rem; font-size: var(--font-size-chrome); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-secondary);
}
.sr-filter__check { display: flex; align-items: center; gap: .45rem; padding: .15rem 0; cursor: pointer; }
/* Red ticks and red stars — the brand red the hotel page's filters, its stars
   and every card already use (G, 2026-09-23). */
.sr-filter__check input { accent-color: var(--color-cta); }
.sr-filter__stars { color: var(--color-cta); letter-spacing: .06em; }
.sr-filter__range { display: flex; align-items: center; gap: .4rem; }
.sr-filter__range input {
  width: 100%; min-width: 0; padding: .35rem .5rem; font: inherit;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
}
.sr-filters__reset {
  margin-top: .6rem; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--color-accent); font: inherit; font-size: var(--font-size-chrome); text-decoration: underline;
}

.sr__bar { display: flex; align-items: center; gap: .8rem; margin-bottom: .8rem; flex-wrap: wrap; }
.sr__count { margin: 0; flex: 1; color: var(--color-text-secondary); }
.sr__sort { font-size: var(--font-size-chrome); color: var(--color-text-secondary); }
.sr__sort select { font: inherit; padding: .3rem .4rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }

.sr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
/* List / grid switch (search-results.js) — desktop only; a phone is one
   column either way. The grid is the destination page's card, in the
   narrower column beside the filters. */
.sr-view { display: none; margin-left: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
@media (min-width: 900px) { .sr-view { display: inline-flex; } }
.sr-view__btn {
  font: inherit; font-size: var(--font-size-chrome); border: 0; background: var(--color-white);
  color: var(--color-text-secondary); padding: .35rem .7rem; cursor: pointer;
}
.sr-view__btn + .sr-view__btn { border-left: 1px solid var(--color-border); }
.sr-view__btn.is-on { background: var(--color-cta); color: var(--color-white); }
.lp-grid.sr-grid { margin-top: 0; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }

.sr-card {
  display: grid; grid-template-columns: 17rem minmax(0, 1fr);
  border: 1px solid var(--color-border); background: var(--color-white);
}
.sr-card__photo { position: relative; display: block; background: var(--color-surface); min-height: 12rem; }
.sr-card__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sr-card__top {
  position: absolute; top: 10px; right: 0; padding: 0 8px; height: 36px; line-height: 36px;
  background: var(--color-white); color: var(--color-cta); font-weight: 600; font-size: var(--font-size-chrome);
}
.sr-card__body { display: flex; flex-direction: column; padding: .9rem 1.1rem 1rem; min-width: 0; }
.sr-card__stars { color: var(--color-cta); letter-spacing: .06em; }
.sr-card__name { margin: .1rem 0 0; font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
.sr-card__name a { color: var(--color-primary); text-decoration: none; }
.sr-card__name a:hover { text-decoration: underline; }
.sr-card__place { margin: .15rem 0 0; color: var(--color-text-secondary); font-size: var(--font-size-chrome); text-transform: uppercase; letter-spacing: .02em; }

.sr-card__rooms { list-style: none; margin: .7rem 0 0; padding: 0; border-top: 1px solid var(--color-border); }
.sr-room {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .8rem; align-items: baseline;
  padding: .4rem 0; border-bottom: 1px solid var(--color-border); font-size: .92rem;
}
.sr-room__name { min-width: 0; }
.sr-room__meal { color: var(--color-text-secondary); font-size: var(--font-size-chrome); white-space: nowrap; }
.sr-room__price { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sr-card__more { margin: .35rem 0 0; color: var(--color-text-muted); font-size: var(--font-size-chrome); }

.sr-card__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: .8rem; flex-wrap: wrap; }
.sr-card__from { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-chrome); }
.sr-card__from strong { display: block; font-size: 1.3rem; color: var(--color-primary); }
.sr-card__from span { display: block; }
/* The same button as «Търси» in the form — G, 2026-09-23. */
.sr-card__cta { text-decoration: none; }

/* Highlights as quiet text with a tick, not chips: a list card has the width
   for one line of them, and chips would make every card busy. */
.sr-card__highlights {
  list-style: none; margin: .45rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .15rem .9rem;
  font-size: var(--font-size-chrome); color: var(--color-text-secondary);
}
.sr-card__highlights li::before { content: '✓'; color: var(--color-success); font-weight: 700; margin-right: .3rem; }

/* Availability beside the room name, in the hotel page's words. */
.sr-avail { display: inline-block; margin-left: .5rem; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.sr-avail--ok  { color: var(--color-success); }
.sr-avail--low { color: var(--color-warning); }
.sr-avail--req { color: var(--color-text-muted); }

/* Suggestions under the destination box (search-suggest.js). */
.suggest {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin-top: 2px;
  background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  box-shadow: 0 6px 18px rgb(0 0 0 / .12); max-height: 22rem; overflow-y: auto;
}
.suggest__group {
  margin: 0; padding: .45rem .75rem .2rem; font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; color: var(--color-text-muted);
}
.suggest__item { display: flex; justify-content: space-between; gap: .8rem; padding: .45rem .75rem; cursor: pointer; }
.suggest__item:hover, .suggest__item.is-active { background: var(--color-surface); }
.suggest__label { color: var(--color-text); }
.suggest__meta { color: var(--color-text-muted); font-size: var(--font-size-chrome); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sr__none { padding: 1.5rem; border: 1px dashed var(--color-border); color: var(--color-text-secondary); }
.sr__none-reset { border: 0; background: none; color: var(--color-accent); text-decoration: underline; cursor: pointer; font: inherit; }

/* Phones: the filters become the hotel page's bottom sheet, opened by the
   same bar pinned to the bottom of the screen (.filters-fab); the card stacks
   photo over text. */
@media (max-width: 860px) {
  .sr__layout { grid-template-columns: 1fr; }
  .sr-filters {
    position: fixed; z-index: 90; inset: auto 0 0 0; top: auto;
    max-height: 82vh; overflow-y: auto;
    margin: 0; padding: .9rem 1rem 1rem;
    border-radius: var(--radius-md) var(--radius-md) 0 0; border: 0;
    box-shadow: 0 -6px 28px rgb(0 0 0 / .26);
    transform: translateY(100%); transition: transform .25s ease;
  }
  .sr-filters.is-open { transform: translateY(0); }
  .sr-filters__reset { display: block; margin: .6rem 0 .2rem; }
  /* Room for the bar at the foot of the page, so it never covers the last card. */
  .sr-page .sr__layout { padding-bottom: 4.5rem; }
}
@media (prefers-reduced-motion: reduce) { .sr-filters { transition: none; } }
@media (max-width: 620px) {
  .sr-card { grid-template-columns: 1fr; }
  .sr-card__photo { min-height: 0; aspect-ratio: 16 / 9; }
}

/* ── Phone card (layout.js callWidget, G 2026-10-02) ─────────────────────────
   Customers phone before they book; the header's number scrolls away. One card
   in the corner, never one per «Резервирай». [hidden] needs its own rule: the
   display below would otherwise beat the attribute. */
.call-widget {
  position: fixed; z-index: 85; right: 1.25rem; bottom: 1.25rem;
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .9rem .6rem .6rem;
  background: var(--color-white); color: var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 18px rgb(0 0 0 / .22);
  font-family: var(--font-ui); text-decoration: none;
}
.call-widget[hidden] { display: none; }
.call-widget:hover { box-shadow: 0 6px 22px rgb(0 0 0 / .3); }
.call-widget__icon {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--color-cta); color: var(--color-white);
}
.call-widget__text small { display: block; font-size: .75rem; font-weight: 300; opacity: .8; }
.call-widget__text b { display: block; font-size: 1rem; font-weight: 600; white-space: nowrap; }

@media (max-width: 860px) {
  .call-widget { right: 1rem; bottom: 1rem; }
  /* Round button: where «Филтри» is pinned to the bottom (hotel rooms, search
     results), and on the booking form. It matches the bar's height and the bar
     gives up the room on its right, so the two sit in one row. */
  body:has(.filters-fab) .call-widget,
  .call-widget--compact {
    padding: 0; width: 2.75rem; height: 2.75rem; border-radius: 50%;
    justify-content: center; background: var(--color-cta);
    box-shadow: 0 4px 16px rgb(0 0 0 / .28);
  }
  body:has(.filters-fab) .call-widget__icon,
  .call-widget--compact .call-widget__icon { width: auto; height: auto; background: none; }
  body:has(.filters-fab) .call-widget__text,
  .call-widget--compact .call-widget__text { display: none; }
  .filters-fab { transition: right .2s ease; }
  body:has(.call-widget:not([hidden])) .filters-fab { right: calc(1rem + 2.75rem + .5rem); }
}

/* The number inside a filter panel (layout.js callInline) — desktop only. In
   the hotel page's bar it is the right-hand column, its top level with the
   first row of filters; in the search results' sidebar it closes the panel.
   Where it is on the page, the corner card would only repeat it. */
.call-inline {
  display: flex; align-items: center; gap: .6rem;
  color: var(--color-primary); font-family: var(--font-ui); text-decoration: none;
}
.call-inline .call-widget__icon { width: 2.25rem; height: 2.25rem; }
.call-inline:hover b { color: var(--color-cta); }
.sr-filters .call-inline { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--color-border); }

@media (min-width: 861px) {
  body:has(.filters .call-inline, .sr-filters .call-inline) .call-widget { display: none; }
}
@media (max-width: 860px) {
  .call-inline { display: none; }
  .filters__main { overflow: visible; padding: 0; margin: 0; }
}