/* =====================================================================
   Public site: header, hero, footer, and the shared front-end blocks.
   Loaded after tokens.css + base.css + components.css.

   v1.1 — every large coloured area is a gradient from tokens.css with a
   faint geometric lattice over it. Flat navy slabs are what made the
   first pass feel heavy; light moving across a surface is what fixes it.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Decorative lattice.
   A tileable diamond grid, inlined as a data URI so it costs no request.
   Applied as a ::before on dark panels at very low opacity — you should
   feel it rather than see it.
   --------------------------------------------------------------------- */
.pattern-lattice::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.075' stroke-width='1'%3E%3Cpath d='M32 2 62 32 32 62 2 32Z'/%3E%3Cpath d='M32 18 46 32 32 46 18 32Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.25));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0.25));
}

/* ---------------------------------------------------------------------
   Header
   --------------------------------------------------------------------- */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  background: rgba(255, 253, 249, 0.88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-block-end: 1px solid rgba(203, 199, 189, 0.5);
  transition: box-shadow var(--duration) var(--ease);
}

.site-header.is-stuck { box-shadow: var(--shadow-md); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-block-size: var(--header-height);
}

.site-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
}

.site-logo img { block-size: 42px; inline-size: auto; }
.site-footer img { block-size: 40px; inline-size: auto; }

.site-logo__text { display: flex; flex-direction: column; line-height: 1.25; }

.site-logo__name {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--blue-900);
  letter-spacing: 0.01em;
}

.site-logo__tagline { font-size: var(--text-xs); color: var(--text-muted); }

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-inline-end: auto;
}

.site-nav__link {
  position: relative;
  padding: 0.55rem 0.9rem;
  white-space: nowrap;
  border-radius: var(--radius-pill);
  color: var(--ink-700);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  transition: background-color var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}

.site-nav__link:hover { background: var(--blue-50); color: var(--blue-800); }

.site-nav__link.is-active {
  background: var(--sand-100);
  color: var(--blue-900);
  font-weight: var(--weight-semibold);
}

/* A small gold dot marks the current page — quieter than a full pill
   but still unmistakable. */
.site-nav__link.is-active::after {
  content: "";
  position: absolute;
  inset-block-end: 2px;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 4px;
  block-size: 4px;
  border-radius: 50%;
  background: var(--sand-500);
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}

/* Language switcher */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--ink-700);
  text-transform: uppercase;
  transition: all var(--duration-fast) var(--ease);
}

.lang-switch:hover {
  border-color: var(--sand-400);
  background: var(--sand-100);
  color: var(--blue-800);
}

.site-header__burger { display: none; }

/* Mobile drawer */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: none;
  background: var(--page-bg);
  padding: var(--space-5);
  overflow-y: auto;
}

.mobile-nav.is-open { display: block; }

.mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--space-6);
}

.mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-2);
  border-block-end: 1px solid var(--border);
  color: var(--ink-800);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
}

/* ---------------------------------------------------------------------
   Hero — dawn gradient, lattice, and a soft arch at the foot
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-block-size: 560px;
  padding-block: var(--space-20) var(--space-24);
  background: var(--grad-dawn);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}

.hero--madinah { background: var(--grad-madinah); }

.hero__media { position: absolute; inset: 0; z-index: -2; }

.hero__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Scrim only exists when there is a photo underneath. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(7, 37, 56, 0.30) 0%, rgba(7, 37, 56, 0.72) 100%);
}

[dir="rtl"] .hero__scrim {
  background:
    linear-gradient(to left, rgba(7, 37, 56, 0.86) 0%, rgba(7, 37, 56, 0.34) 62%, rgba(7, 37, 56, 0.58) 100%);
}

[dir="ltr"] .hero__scrim {
  background:
    linear-gradient(to right, rgba(7, 37, 56, 0.86) 0%, rgba(7, 37, 56, 0.34) 62%, rgba(7, 37, 56, 0.58) 100%);
}

.hero__content { position: relative; z-index: 1; max-inline-size: 640px; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-5);
  padding: 0.4rem 0.9rem 0.4rem 0.5rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--sand-200);
}

.hero__eyebrow .icon { color: var(--sand-400); }

.hero__title {
  font-size: clamp(2rem, 5vw, var(--text-5xl));
  color: var(--white);
  line-height: 1.12;
  letter-spacing: -0.01em;
  margin-block-end: var(--space-4);
}

/* One word of the headline picks up the gold — the cheapest way to
   stop a white headline reading as a corporate banner. */
.hero__title .accent {
  background: linear-gradient(120deg, var(--sand-300), var(--sand-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__subtitle {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.9);
  max-inline-size: 52ch;
  margin-block-end: var(--space-8);
}

.hero__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-8);
}

.hero__feature {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.92);
}

.hero__feature .icon { color: var(--sand-400); }

/* Decorative skyline along the foot of the hero. Behind the content,
   above the gradient, and hidden from assistive tech — it carries no
   information, it just stops the panel reading as an empty slab. */
.hero__skyline {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 40px;
  z-index: 0;
  block-size: clamp(140px, 22vw, 280px);
  pointer-events: none;
  opacity: 0.85;
}

.hero__skyline img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: bottom center;
}

/* With a real photo behind, the silhouette would double up. */
.hero:has(.hero__media) .hero__skyline { display: none; }

/* A wide, shallow arch closes the hero into the page below. */
.hero__arch {
  position: absolute;
  inset-inline: -5%;
  inset-block-end: -1px;
  block-size: 90px;
  z-index: 2;
  background: var(--page-bg);
  border-start-start-radius: 50% 100%;
  border-start-end-radius: 50% 100%;
}

/* ---------------------------------------------------------------------
   Search bar
   --------------------------------------------------------------------- */
.searchbar {
  position: relative;
  z-index: 3;
  margin-block-start: calc(var(--space-16) * -1);
  padding: var(--space-5);
  background: var(--surface);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
}

.searchbar__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: var(--space-3);
  align-items: end;
}

.searchbar .field { margin-block-end: 0; }

.searchbar__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-6);
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-4);
  border-block-start: 1px dashed var(--border-warm);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.searchbar__trust span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.searchbar__trust .icon { color: var(--sand-500); }

/* ---------------------------------------------------------------------
   City cards
   --------------------------------------------------------------------- */
.city-card {
  position: relative;
  display: block;
  min-block-size: 300px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  color: var(--white);
  background: var(--grad-dawn);
  isolation: isolate;
  transition: transform var(--duration) var(--ease-out),
              box-shadow var(--duration) var(--ease-out);
}

.city-card--madinah { background: var(--grad-madinah); }

.city-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.city-card img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform var(--duration-slow) var(--ease);
}

.city-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(7, 37, 56, 0.88) 0%, rgba(7, 37, 56, 0.10) 62%);
}

.city-card:hover img { transform: scale(1.05); }

.city-card__body {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--space-6) var(--space-7, var(--space-6));
}

.city-card__title {
  font-size: var(--text-2xl);
  color: var(--white);
  margin-block-end: var(--space-1);
}

.city-card__sub { color: rgba(255, 255, 255, 0.85); font-size: var(--text-base); }

.city-card__count {
  display: inline-block;
  margin-block-start: var(--space-2);
  font-size: var(--text-sm);
  color: var(--sand-300);
}

.city-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--white);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  backdrop-filter: blur(8px);
  transition: all var(--duration-fast) var(--ease);
}

.city-card:hover .city-card__cta {
  background: var(--white);
  color: var(--blue-900);
  border-color: var(--white);
}

/* ---------------------------------------------------------------------
   Hotel card
   --------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   Feature strip
   --------------------------------------------------------------------- */
.feature {
  position: relative;
  padding: var(--space-7, var(--space-6)) var(--space-6);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
  overflow: hidden;
  transition: transform var(--duration) var(--ease-out),
              box-shadow var(--duration) var(--ease-out);
}

.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* A gold hairline that grows on hover. */
.feature::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 30%;
  block-size: 3px;
  border-radius: var(--radius-pill);
  background: var(--grad-gold);
  opacity: 0;
  transition: opacity var(--duration) var(--ease), inset-inline var(--duration) var(--ease);
}

.feature:hover::after { opacity: 1; inset-inline: 12%; }

.feature__icon {
  inline-size: 56px;
  block-size: 56px;
  margin-inline: auto;
  margin-block-end: var(--space-4);
  display: grid;
  place-items: center;
  border-radius: var(--radius-lg);
  background: var(--grad-sand);
  border: 1px solid var(--border-warm);
  color: var(--sand-700);
}

.feature__title {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--heading);
  margin-block-end: var(--space-2);
}

.feature__text { font-size: var(--text-base); color: var(--text-muted); }

/* ---------------------------------------------------------------------
   Promo strip
   --------------------------------------------------------------------- */
.promo {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-10);
  border-radius: var(--radius-xl);
  background: var(--grad-sand);
  border: 1px solid var(--border-warm);
  overflow: hidden;
}

/* Quiet gold medallion in the corner. */
.promo::after {
  content: "";
  position: absolute;
  inset-block-start: -60px;
  inset-inline-end: -60px;
  inline-size: 200px;
  block-size: 200px;
  border-radius: 50%;
  border: 28px solid rgba(207, 162, 87, 0.16);
  pointer-events: none;
}

.promo__body { position: relative; z-index: 1; }
.promo__title { font-size: var(--text-xl); margin-block-end: var(--space-2); }
.promo__text  { color: var(--ink-600); }

.promo__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-end: var(--space-3);
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--white);
  border: 1px solid var(--border-warm);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--sand-700);
}

/* ---------------------------------------------------------------------
   CTA band
   --------------------------------------------------------------------- */
.cta-band {
  position: relative;
  padding-block: var(--space-20);
  text-align: center;
  color: var(--white);
  background: var(--grad-dawn);
  overflow: hidden;
  isolation: isolate;
}

.cta-band > .container { position: relative; z-index: 1; }

.cta-band__title {
  font-size: var(--text-3xl);
  color: var(--white);
  margin-block-end: var(--space-3);
}

.cta-band__text {
  color: rgba(255, 255, 255, 0.85);
  margin-block-end: var(--space-8);
  font-size: var(--text-lg);
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--grad-deep);
  color: var(--blue-200);
  padding-block-start: var(--space-20);
  font-size: var(--text-base);
  overflow: hidden;
  isolation: isolate;
}

.site-footer > .container { position: relative; z-index: 1; }

.site-footer a { color: var(--blue-200); }
.site-footer a:hover { color: var(--white); }

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--space-8);
  padding-block-end: var(--space-10);
}

.site-footer__brand-name {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--white);
  margin-block-end: var(--space-2);
}

.site-footer__about { color: var(--blue-300); max-inline-size: 320px; }

.site-footer__heading {
  position: relative;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--white);
  margin-block-end: var(--space-5);
  padding-block-end: var(--space-3);
}

.site-footer__heading::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 32px;
  block-size: 2px;
  border-radius: var(--radius-pill);
  background: var(--sand-500);
}

.site-footer__list li { margin-block-end: var(--space-2); }

.site-footer__list a {
  display: inline-block;
  transition: translate var(--duration-fast) var(--ease);
}

.site-footer__list a:hover { translate: calc(-4px * var(--flip, 1)) 0; }

.site-footer__contact li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-3);
}

.site-footer__contact .icon { color: var(--sand-400); flex: none; }

.social {
  display: flex;
  gap: var(--space-2);
  margin-block-start: var(--space-5);
}

.social a {
  inline-size: 38px;
  block-size: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--blue-200);
  transition: all var(--duration-fast) var(--ease);
}

.social a:hover {
  background: var(--grad-gold);
  border-color: transparent;
  color: var(--blue-950);
  transform: translateY(-2px);
}

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-5);
  border-block-start: 1px solid rgba(255, 255, 255, 0.10);
  font-size: var(--text-sm);
  color: var(--blue-300);
}

/* The agency credit. Present, legible, and not competing with the
   client's own brand. */
.site-footer__credit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.site-footer__credit a {
  color: var(--sand-400);
  font-weight: var(--weight-medium);
}

.site-footer__credit a:hover {
  color: var(--sand-300);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* WhatsApp floating button */
.wa-float {
  position: fixed;
  inset-block-end: var(--space-5);
  inset-inline-end: var(--space-5);
  z-index: var(--z-sticky);
  inline-size: 56px;
  block-size: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4);
  transition: transform var(--duration) var(--ease-back);
}

.wa-float:hover { transform: scale(1.08); color: #fff; }
.wa-float .icon { inline-size: 27px; block-size: 27px; }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .searchbar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .searchbar__grid > :last-child { grid-column: 1 / -1; }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .site-nav { display: none; }
  .site-header__burger { display: inline-flex; }
  .hero { min-block-size: 460px; padding-block: var(--space-16) var(--space-20); }
  .hero__arch { block-size: 56px; }
  .promo { padding: var(--space-8) var(--space-6); }
}

@media (max-width: 640px) {
  .searchbar__grid { grid-template-columns: minmax(0, 1fr); }
  .searchbar { margin-block-start: calc(var(--space-10) * -1); padding: var(--space-4); }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .site-logo__tagline { display: none; }
  .hero__features { gap: var(--space-2); }
  .city-card { min-block-size: 240px; }

  /*
   * Logo + language + "book now" + burger does not fit across 390px,
   * and `flex: none` on the actions meant the row simply overflowed.
   * The gap closes up, the logo is allowed to shrink, and the CTA goes
   * — it is the first item in the drawer the burger opens.
   */
  .site-header__inner { gap: var(--space-3); }
  .site-header__actions { gap: var(--space-1); }
  .site-logo { min-inline-size: 0; }
  .site-header__cta { display: none; }
}

/* =====================================================================
   PHASE 4 — search results, filters, hotel page
   ===================================================================== */

/* ---------------------------------------------------------------------
   Page bands — the strip above a results list
   --------------------------------------------------------------------- */
.page-band {
  position: relative;
  background: var(--grad-deep);
  color: var(--white);
  padding-block: var(--space-8) var(--space-10);
  margin-block-end: calc(var(--space-8) * -1);
  overflow: hidden;
}

.page-band__title {
  margin: var(--space-2) 0 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold, 700);
  color: var(--white);
}

.city-band {
  position: relative;
  background: var(--grad-dawn);
  color: var(--white);
  padding-block: var(--space-10) var(--space-12);
  margin-block-end: calc(var(--space-8) * -1);
  overflow: hidden;
}

.city-band__media { position: absolute; inset: 0; }

.city-band__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.city-band__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 37, 56, 0.35), rgba(7, 37, 56, 0.82));
}

.city-band .container { position: relative; z-index: 1; }

.city-band__title {
  margin: var(--space-2) 0 var(--space-2);
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--white);
}

.city-band__sub {
  margin: 0;
  max-inline-size: 60ch;
  color: rgba(255, 255, 255, 0.86);
  font-size: var(--text-md);
}

/* Breadcrumbs */
.crumbs {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
  padding-block: var(--space-5) var(--space-2);
}

.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--blue-700); text-decoration: underline; }
.crumbs .icon { opacity: 0.5; }

.crumbs--invert { color: rgba(255, 255, 255, 0.75); padding-block-start: 0; }
.crumbs--invert a:hover { color: var(--white); }

/* ---------------------------------------------------------------------
   Search bar — bar variant sits on a page rather than over a hero
   --------------------------------------------------------------------- */
.searchbar--bar {
  margin-block: var(--space-6);
  box-shadow: var(--shadow-md);
}

.searchbar__grid { align-items: end; }

.searchbar .field--action .btn { inline-size: 100%; }

/* ---------------------------------------------------------------------
   Two-column results layout
   --------------------------------------------------------------------- */
.search-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  padding-block-end: var(--space-12);
}

/* ---------------------------------------------------------------------
   Filters
   --------------------------------------------------------------------- */
.filters-panel {
  position: sticky;
  inset-block-start: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.filters-panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--border);
  background: var(--sand-50);
}

.filters-panel__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--heading, var(--ink-900));
}

.filters-panel__title .icon { color: var(--sand-600); }

.filters-panel__count {
  display: inline-grid;
  place-items: center;
  min-inline-size: 20px;
  block-size: 20px;
  padding-inline: 5px;
  border-radius: var(--radius-pill);
  background: var(--blue-700);
  color: var(--white);
  font-size: var(--text-xs);
}

.filters-panel__clear {
  margin-inline-start: auto;
  font-size: var(--text-sm);
  color: var(--blue-700);
}

.filters-panel__close { display: none; }

.filters-panel__body { padding: var(--space-2) var(--space-5) var(--space-5); }
.filters-panel__foot { display: none; }

.filter-group {
  padding-block: var(--space-4);
  border-block-end: 1px solid var(--border);
}

.filter-group:last-child { border-block-end: 0; padding-block-end: 0; }

.filter-group__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ink-700);
}

.filter-group__hint {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--text-soft);
}

.filter-group__more {
  margin-block-start: var(--space-2);
  padding: 0;
  border: 0;
  background: none;
  color: var(--blue-700);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.filter-group__more:hover { text-decoration: underline; }

.filter-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.filter-list--inline { flex-direction: row; flex-wrap: wrap; gap: var(--space-2); }

.filter-option,
.filter-check {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--ink-700);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease);
}

.filter-option:hover,
.filter-check:hover { background: var(--sand-50); }

.filter-option.is-active {
  background: var(--blue-50);
  color: var(--blue-800);
  font-weight: 600;
}

.filter-check__box {
  flex: none;
  inline-size: 18px;
  block-size: 18px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--white);
  color: transparent;
}

.filter-check.is-active .filter-check__box {
  background: var(--blue-700);
  border-color: var(--blue-700);
  color: var(--white);
}

.filter-check__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
}

.filter-check__label .icon { color: var(--sand-600); }

.filter-check__count {
  font-size: var(--text-xs);
  color: var(--text-soft);
}

.filter-check.is-empty { opacity: 0.45; }

.filter-pill {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-700);
  font-size: var(--text-sm);
  text-decoration: none;
}

.filter-pill:hover { border-color: var(--sand-400); background: var(--sand-50); }

.filter-pill.is-active {
  border-color: var(--blue-600);
  background: var(--blue-50);
  color: var(--blue-800);
  font-weight: 600;
}

.filter-price__row,
.filter-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.filter-price__dash { color: var(--text-soft); }
.input--sm { min-block-size: 38px; padding: 0.4rem 0.7rem; font-size: var(--text-sm); }

/* ---------------------------------------------------------------------
   Results column
   --------------------------------------------------------------------- */
/*
 * Grid and flex items default to `min-width: auto`, which means "never
 * shrink below your content". One wide child — the sort strip — would
 * otherwise stretch this whole column and, through it, the page.
 */
.results { min-inline-size: 0; }

.results__toolbar {
  min-inline-size: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block-end: var(--space-4);
}

.results__count { margin: 0; font-size: var(--text-base); color: var(--ink-700); }
.results__count strong { font-size: var(--text-lg); color: var(--blue-800); }
.results__dates { color: var(--text-muted); font-size: var(--text-sm); }

.results__actions { display: flex; align-items: center; gap: var(--space-3); min-inline-size: 0; }
.results__filter-btn { display: none; }

.results__hint {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--sand-400);
  border-radius: var(--radius-md);
  background: var(--sand-50);
  color: var(--sand-700);
  font-size: var(--text-sm);
}

.sorter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* Without this the flex item keeps its content width and the
     overflow-x below never gets a chance to scroll. */
  min-inline-size: 0;
}
.sorter__label { font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; }

.sorter__options {
  display: flex;
  min-inline-size: 0;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  overflow-x: auto;
}

.sorter__option {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  color: var(--ink-600);
  font-size: var(--text-sm);
  white-space: nowrap;
  text-decoration: none;
}

.sorter__option:hover { background: var(--sand-50); }

.sorter__option.is-active {
  background: var(--blue-700);
  color: var(--white);
  font-weight: 600;
}

.pill {
  display: inline-grid;
  place-items: center;
  min-inline-size: 18px;
  block-size: 18px;
  padding-inline: 4px;
  margin-inline-start: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--blue-700);
  color: var(--white);
  font-size: 11px;
}

/* ---------------------------------------------------------------------
   Hotel card — horizontal, because a list is scanned, not browsed
   --------------------------------------------------------------------- */
.hotel-list { display: flex; flex-direction: column; gap: var(--space-4); }

.hotel-card {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration) var(--ease-out),
              border-color var(--duration) var(--ease),
              transform var(--duration) var(--ease-out);
}

.hotel-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--border-warm);
  transform: translateY(-2px);
}

.hotel-card.is-unavailable { opacity: 0.78; }

.hotel-card__media {
  position: relative;
  display: block;
  background: var(--grad-sand);
  overflow: hidden;
  min-block-size: 200px;
}

.hotel-card__media img,
.hotel-card__media picture {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.hotel-card__badge {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  z-index: 2;
  padding: 4px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--sand-500);
  color: var(--blue-950);
  font-size: var(--text-xs);
  font-weight: 700;
  box-shadow: var(--shadow-gold);
}

.hotel-card__badge--blue  { background: var(--blue-700); color: var(--white); box-shadow: var(--shadow-blue); }
.hotel-card__badge--green { background: var(--palm-500); color: var(--white); box-shadow: none; }
.hotel-card__badge--red   { background: var(--danger);   color: var(--white); box-shadow: none; }

.hotel-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
}

.hotel-card__type {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-soft);
}

.hotel-card__stars { color: var(--sand-500); display: inline-flex; }

.hotel-card__title { margin: var(--space-1) 0 0; font-size: var(--text-lg); font-weight: 700; }
.hotel-card__title a { color: var(--ink-900); text-decoration: none; }
.hotel-card__title a:hover { color: var(--blue-700); }

.hotel-card__place {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.hotel-card__place .icon { color: var(--sand-500); flex: none; }
.hotel-card__distance { color: var(--blue-700); font-weight: 600; }

.hotel-card__amenities {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.hotel-card__amenities li { display: flex; align-items: center; gap: 4px; }
.hotel-card__amenities .icon { color: var(--ink-400); }

.hotel-card__perks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: auto 0 0;
  font-size: var(--text-xs);
}

.perk { display: inline-flex; align-items: center; gap: 4px; color: var(--success-ink); }
.perk .icon { color: var(--success); }

.hotel-card__aside {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  padding: var(--space-5);
  border-inline-start: 1px solid var(--border);
  background: var(--sand-50);
}

.score { text-align: end; }
.score__value {
  display: inline-block;
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--blue-700);
  color: var(--white);
  font-weight: 700;
  font-size: var(--text-sm);
}

.score__meta { display: block; margin-block-start: 2px; font-size: var(--text-xs); color: var(--text-muted); }
.score--new .score__meta { color: var(--sand-700); font-weight: 600; }

.hotel-card__price { margin-block-start: auto; text-align: end; }
.price-from  { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }
.price-value { margin: 0; font-size: var(--text-xl); font-weight: 700; color: var(--blue-800); }
.price-unit  { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }
.price-total { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--ink-700); }
.price-none  { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--danger-ink); }

/* ---------------------------------------------------------------------
   Empty state & pagination
   --------------------------------------------------------------------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-6);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  text-align: center;
  color: var(--text-muted);
}

.empty-state__icon { color: var(--sand-400); }
.empty-state__title { margin: 0; font-size: var(--text-lg); color: var(--ink-800); }

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding-block: var(--space-8);
}

.pager__link {
  display: grid;
  place-items: center;
  min-inline-size: 40px;
  block-size: 40px;
  padding-inline: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-700);
  text-decoration: none;
}

.pager__link:hover { border-color: var(--sand-400); background: var(--sand-50); }

.pager__link.is-active {
  background: var(--blue-700);
  border-color: var(--blue-700);
  color: var(--white);
  font-weight: 700;
}

.pager__gap { color: var(--text-soft); padding-inline: var(--space-1); }

/* ---------------------------------------------------------------------
   Landmark strip (city page)
   --------------------------------------------------------------------- */
.landmark-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4) 0 0;
}

.landmark-strip__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink-700);
}

.landmark-strip__label .icon { color: var(--sand-600); }

.landmark-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-pill);
  background: var(--sand-50);
  color: var(--sand-700);
  font-size: var(--text-xs);
}

/* ---------------------------------------------------------------------
   Hotel page — gallery
   --------------------------------------------------------------------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: var(--space-2);
  aspect-ratio: 16 / 7;
  margin-block: var(--space-2) var(--space-6);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

.gallery__tile {
  padding: 0;
  border: 0;
  background: var(--grad-sand);
  cursor: pointer;
  overflow: hidden;
}

.gallery__tile--lead { grid-column: span 2; grid-row: span 2; }

.gallery__tile img,
.gallery__tile picture {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--duration-slow) var(--ease-out);
}

.gallery__tile:hover img { transform: scale(1.04); }

.gallery__more {
  position: absolute;
  inset-block-end: var(--space-4);
  inset-inline-end: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink-800);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

.gallery--empty {
  display: grid;
  place-items: center;
  gap: var(--space-2);
  aspect-ratio: 16 / 6;
  color: rgba(255, 255, 255, 0.9);
  background: var(--grad-sand);
}

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  background: rgba(9, 20, 28, 0.94);
}

.lightbox[hidden] { display: none; }

.lightbox__bar {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--text-sm);
}

.lightbox__close,
.lightbox__nav {
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
  cursor: pointer;
}

.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.24); }

.lightbox__stage {
  margin: 0;
  display: grid;
  place-items: center;
  max-block-size: 86vh;
}

.lightbox__stage img {
  max-inline-size: 100%;
  max-block-size: 86vh;
  border-radius: var(--radius-md);
  object-fit: contain;
}

/* ---------------------------------------------------------------------
   Hotel page — layout
   --------------------------------------------------------------------- */
.property {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-8);
  align-items: start;
  padding-block-end: var(--space-12);
}

.property-head { padding-block-end: var(--space-5); }

.property-head__type {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-soft);
}

.property-head__stars { color: var(--sand-500); display: inline-flex; }

.property-head__title {
  margin: var(--space-2) 0;
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--ink-900);
}

.property-head__place {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  color: var(--text-muted);
}

.property-head__place .icon { color: var(--sand-500); }

.property-head__tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--text-xs);
  color: var(--ink-700);
}

.tag--good { border-color: var(--success-border); background: var(--success-bg); color: var(--success-ink); }
.tag--good .icon { color: var(--success); }

.tag--score { border-color: var(--blue-200); background: var(--blue-50); color: var(--blue-800); }
.tag--score strong { font-size: var(--text-sm); }

.property-nav {
  position: sticky;
  /* Parks just under the site header rather than at the very top, so
     the two sticky bars do not overlap. */
  inset-block-start: var(--header-height);
  z-index: var(--z-sticky);
  display: flex;
  gap: var(--space-1);
  margin-block-end: var(--space-6);
  padding-block: var(--space-2);
  border-block: 1px solid var(--border);
  background: var(--page-bg);
  overflow-x: auto;
}

.property-nav a {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  color: var(--ink-600);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.property-nav a:hover { background: var(--sand-50); color: var(--blue-800); }

.property-section {
  padding-block-end: var(--space-8);
  /* Clear both sticky bars when an in-page link jumps here. */
  scroll-margin-block-start: calc(var(--header-height) + 60px);
}

.property-section__title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--ink-900);
}

.property-section__sub {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--ink-800);
}

.property-section__lead {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: var(--text-md);
  color: var(--ink-700);
}

.property-section__lead .icon { color: var(--sand-500); flex: none; }

.property-section__note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--sand-400);
  border-radius: var(--radius-md);
  background: var(--sand-50);
  color: var(--sand-700);
  font-size: var(--text-sm);
}

.property-section__note--warn {
  border-style: solid;
  border-color: var(--warning-border);
  background: var(--warning-bg);
  color: var(--warning-ink);
}

.prose { color: var(--ink-700); line-height: 1.8; }

.highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.highlights li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); }
.highlights .icon { color: var(--success); flex: none; margin-block-start: 2px; }

.amenity-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3) var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.amenity-list li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--ink-700); }
.amenity-list .icon { color: var(--sand-600); flex: none; }

.landmark-list { margin: 0; padding: 0; list-style: none; }

.landmark-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--border);
  font-size: var(--text-sm);
}

.landmark-list li:last-child { border-block-end: 0; }
.landmark-list__name { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-700); }
.landmark-list__name .icon { color: var(--sand-600); }
.landmark-list__distance { color: var(--blue-700); font-weight: 700; }

.policy-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.policy-list li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--ink-700); }
.policy-list .icon { color: var(--sand-600); }
.policy-list .is-good, .policy-list li.is-good .icon { color: var(--success-ink); }

/* ---------------------------------------------------------------------
   Rooms
   --------------------------------------------------------------------- */
.room-list { display: flex; flex-direction: column; gap: var(--space-4); }

.room-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 200px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.room-row.is-unavailable { background: var(--surface-muted); opacity: 0.82; }

.room-row__media { background: var(--grad-sand); min-block-size: 170px; overflow: hidden; }
.room-row__media img, .room-row__media picture { inline-size: 100%; block-size: 100%; object-fit: cover; }

.room-row__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); }
.room-row__title { margin: 0; font-size: var(--text-md); font-weight: 700; color: var(--ink-900); }

.room-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.room-row__meta span:not(:last-child)::after { content: " ·"; color: var(--text-soft); }

.room-row__text { margin: 0; font-size: var(--text-sm); color: var(--ink-600); line-height: 1.7; }

.room-row__perks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: auto 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.room-row__perks li { display: flex; align-items: center; gap: 4px; }
.room-row__perks .icon { color: var(--ink-400); }
.room-row__perks .is-good { color: var(--success-ink); }
.room-row__perks .is-good .icon { color: var(--success); }

.room-row__aside {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-5);
  border-inline-start: 1px solid var(--border);
  background: var(--sand-50);
  text-align: end;
}

.room-row.is-unavailable .room-row__aside { background: transparent; }

.room-row__scarce {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--danger-ink);
}

.room-row__price { margin: 0; font-size: var(--text-xl); font-weight: 700; color: var(--blue-800); }
.room-row__price--muted { color: var(--text-soft); text-decoration: line-through; }
.room-row__unit  { margin: 0; font-size: var(--text-xs); color: var(--text-muted); }
.room-row__total { margin: var(--space-1) 0 var(--space-3); font-size: var(--text-xs); color: var(--ink-700); }

.room-row__unavailable {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--warning-ink);
}

.room-row__unavailable .icon { color: var(--warning); flex: none; }

/* ---------------------------------------------------------------------
   Booking box
   --------------------------------------------------------------------- */
.property__aside { position: sticky; inset-block-start: var(--space-4); }

.booking-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.booking-box__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
.booking-box__from { font-size: var(--text-sm); color: var(--text-muted); }
.booking-box__amount { font-size: var(--text-2xl); font-weight: 700; color: var(--blue-800); }
.booking-box__unit { font-size: var(--text-sm); color: var(--text-muted); }

.booking-box__unavailable {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--warning-ink);
}

.booking-box__unavailable .icon { color: var(--warning); }

.booking-box__form { display: flex; flex-direction: column; gap: var(--space-3); }
.booking-box__form .field { margin-block-end: 0; }

.booking-box__lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-4);
  border-block: 1px solid var(--border);
}

.booking-box__line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--text-sm);
  color: var(--ink-700);
}

.booking-box__line--total { font-size: var(--text-md); font-weight: 700; color: var(--ink-900); }

.booking-box__note { margin: 0; font-size: var(--text-xs); color: var(--text-soft); text-align: center; }
.booking-box__note--warn { color: var(--warning-ink); font-weight: 600; }

/* ---------------------------------------------------------------------
   Reviews & mini cards
   --------------------------------------------------------------------- */
.review-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }

.review {
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.review__head { display: flex; align-items: center; gap: var(--space-2); }
.review__author { font-weight: 700; color: var(--ink-800); }
.review__country { font-size: var(--text-xs); color: var(--text-soft); }

.review__score {
  margin-inline-start: auto;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--blue-700);
  color: var(--white);
  font-size: var(--text-sm);
  font-weight: 700;
}

.review__title { margin: var(--space-3) 0 var(--space-1); font-size: var(--text-base); }
.review__body  { margin: 0; font-size: var(--text-sm); color: var(--ink-600); line-height: 1.7; }
.review__meta  { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--text-soft); }

.mini-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}

.mini-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.mini-card__media { aspect-ratio: 3 / 2; background: var(--grad-sand); overflow: hidden; }
.mini-card__media img, .mini-card__media picture { inline-size: 100%; block-size: 100%; object-fit: cover; }
.mini-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.mini-card__title { margin: 0; font-size: var(--text-base); font-weight: 700; color: var(--ink-900); }
.mini-card__meta { margin: 0; display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--text-muted); }
.mini-card__meta .icon { color: var(--sand-500); }
.mini-card__price { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--blue-800); }

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .search-layout { grid-template-columns: 240px minmax(0, 1fr); }
  .property { grid-template-columns: minmax(0, 1fr) 300px; }
  .hotel-card { grid-template-columns: 220px minmax(0, 1fr) 180px; }
}

@media (max-width: 900px) {
  .search-layout { grid-template-columns: minmax(0, 1fr); }

  /*
   * Two behaviours, decided by whether scripting is available.
   *
   * No JS: the sidebar is an ordinary block below the results. Every
   * filter is a link, so it all still works — the page is just longer.
   *
   * With JS: it is hidden until the toolbar button turns it into a
   * full-screen sheet. It is never parked off-canvas while closed,
   * because a fixed element sitting past the right edge — which is
   * where a negative X translation lands in RTL — adds phantom
   * scrollable width to the whole page.
   */
  .filters-panel {
    position: static;
    margin-block-end: var(--space-6);
  }

  .js .filters-panel:not(.is-open) { display: none; }

  .filters-panel.is-open {
    position: fixed;
    inset: 0;
    /* Above the sticky header, or the header covers the sheet's own
       close button and the only way out is the back button. */
    z-index: var(--z-drawer);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    animation: sheet-in var(--duration) var(--ease-out);
  }

  .filters-panel__body { flex: 1; overflow-y: auto; }
  .filters-panel.is-open .filters-panel__close { display: grid; margin-inline-start: auto; }
  .filters-panel__clear { margin-inline-start: 0; }

  .filters-panel.is-open .filters-panel__foot {
    display: block;
    padding: var(--space-4);
    border-block-start: 1px solid var(--border);
    background: var(--surface);
  }

  .js .results__filter-btn { display: inline-flex; }

  .property { grid-template-columns: minmax(0, 1fr); }
  .property__aside { position: static; }
  .property-nav { position: static; }
}

@media (max-width: 720px) {
  .hotel-card { grid-template-columns: minmax(0, 1fr); }
  .hotel-card__media { min-block-size: 0; aspect-ratio: 16 / 9; }
  .hotel-card__aside { border-inline-start: 0; border-block-start: 1px solid var(--border); text-align: start; }
  .score { text-align: start; }
  .hotel-card__price { text-align: start; }

  .room-row { grid-template-columns: minmax(0, 1fr); }
  .room-row__media { aspect-ratio: 16 / 9; min-block-size: 0; }
  .room-row__aside { border-inline-start: 0; border-block-start: 1px solid var(--border); text-align: start; }
  .room-row__unavailable { justify-content: flex-start; }

  .gallery { grid-template-columns: repeat(2, 1fr); aspect-ratio: 4 / 3; }
  .gallery__tile--lead { grid-column: span 2; grid-row: span 1; }
  .gallery__tile:nth-child(n + 4) { display: none; }

  .property-head__title { font-size: var(--text-2xl); }
  .city-band__title, .page-band__title { font-size: var(--text-xl); }

  /*
   * `nowrap` matters as much as the direction here. The base rule wraps,
   * and a wrapping column flex container sizes each line to its content
   * rather than to the container — so `align-items: stretch` would
   * stretch the sort strip to its own 450px instead of the 358px
   * available, pushing half of it off the side of a phone.
   */
  .results__toolbar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .results__actions { justify-content: space-between; }
  .sorter__label { display: none; }
}

.property-nav a.is-active { background: var(--blue-700); color: var(--white); }

/* Controls that do nothing without scripting stay out of the way. */
.js-only { display: none; }
.js .js-only { display: inline-flex; }

@keyframes sheet-in {
  from { transform: translateX(calc(-6% * var(--flip, 1))); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .filters-panel.is-open { animation: none; }
}

/* =====================================================================
   PHASE 5 — checkout and confirmation

   Two screens, one idea: the number stays visible. Everything below is
   in service of that — the summary sticks on a desktop and leads on a
   phone, and nothing on either page competes with the primary action.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Checkout layout.

   Summary first in the source order so it reads first on a phone, then
   pushed to the side column on a desktop. One grid, no duplicated
   markup — the same DOM serves both.
   --------------------------------------------------------------------- */
.checkout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  align-items: start;
  gap: var(--space-8);
  margin-block: var(--space-6) var(--space-16);
}

.checkout__form    { grid-column: 1; grid-row: 1; min-inline-size: 0; }
.checkout__summary { grid-column: 2; grid-row: 1; min-inline-size: 0; }

.checkout__head { margin-block-end: var(--space-6); }

.checkout__title {
  margin: 0;
  font-family: var(--heading);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  color: var(--ink-900);
}

.checkout__subtitle {
  margin: var(--space-2) 0 0;
  color: var(--text-soft);
  font-size: var(--text-md);
}

/* The form sits on its own surface so the page does not read as one
   long undifferentiated column. */
.checkout__form .form-stack {
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

/* Client-controlled line under the button. Quiet: it is a condition,
   not a sales point. */
.checkout__note {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-inline-start: 3px solid var(--sand-300);
  border-radius: var(--radius-sm);
  background: var(--surface-warm);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

.checkout__legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-soft);
}

.checkout__legal .icon { opacity: 0.6; }

/* ---------------------------------------------------------------------
   Summary card
   --------------------------------------------------------------------- */
.summary-card {
  position: sticky;
  inset-block-start: calc(var(--header-height) + var(--space-4));
  padding: var(--space-5);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-xl);
  background: var(--surface-warm);
  box-shadow: var(--shadow-sm);
}

.summary-card__title {
  margin: 0 0 var(--space-4);
  font-family: var(--heading);
  font-size: var(--text-lg);
  color: var(--ink-900);
}

.summary-card__hotel {
  padding-block-end: var(--space-4);
  border-block-end: 1px solid var(--border-warm);
}

.summary-card__name {
  margin: 0;
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  line-height: var(--leading-snug);
}

.summary-card__room {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.summary-card__place {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--text-soft);
}

.summary-card__place .icon { flex: none; opacity: 0.7; }

/* Scarcity is stated once, quietly, and only when it is true. */
.summary-card__scarce {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding: var(--space-3);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-md);
  background: var(--warning-bg);
  color: var(--warning-ink);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.summary-card__scarce .icon { flex: none; }

.summary-card__note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--success-ink);
}

.summary-card__note .icon { flex: none; }

/* ---------------------------------------------------------------------
   Definition lists inside the summary.
   A two-column grid rather than a flex row per line, so the values line
   up with each other instead of each finding its own edge.
   --------------------------------------------------------------------- */
.summary-list {
  margin: var(--space-4) 0 0;
  display: grid;
  gap: var(--space-3);
}

.summary-list > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-4);
}

.summary-list dt {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-soft);
}

.summary-list dd {
  margin: 0;
  text-align: end;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--ink-800);
}

.summary-list__total {
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--border-warm);
}

.summary-list__total dt {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}

.summary-list__total dd {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--primary);
}

/* ---------------------------------------------------------------------
   Night-by-night breakdown.
   Collapsed by default because most stays are flat-rated and the detail
   is noise; open it and every night is listed with its own figure.
   --------------------------------------------------------------------- */
.summary-nights {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border-warm);
}

.summary-nights > summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--link);
  list-style: none;
}

.summary-nights > summary::-webkit-details-marker { display: none; }

.summary-nights > summary::after {
  content: "";
  display: inline-block;
  inline-size: 6px;
  block-size: 6px;
  margin-inline-start: var(--space-2);
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--duration-fast) var(--ease);
}

.summary-nights[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }

.summary-nights > summary:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

.summary-nights ul {
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
  max-block-size: 260px;
  overflow-y: auto;
}

.summary-nights li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.summary-nights li span:last-child {
  font-weight: var(--weight-medium);
  color: var(--ink-800);
}

/* ---------------------------------------------------------------------
   Totals block
   --------------------------------------------------------------------- */
.summary-total {
  margin: var(--space-4) 0 0;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border-warm);
  display: grid;
  gap: var(--space-2);
}

.summary-total > div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-4);
}

.summary-total dt {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-soft);
}

.summary-total dd {
  margin: 0;
  text-align: end;
  font-size: var(--text-sm);
  color: var(--ink-800);
}

.summary-total__grand {
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--border-warm);
}

.summary-total__grand dt {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}

.summary-total__grand dd {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: 1.1;
  color: var(--primary);
}

/* ---------------------------------------------------------------------
   Confirmation
   --------------------------------------------------------------------- */
.confirm {
  margin-block: var(--space-8) var(--space-16);
  text-align: center;
}

.confirm__mark {
  display: inline-grid;
  place-items: center;
  inline-size: 72px;
  block-size: 72px;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
  box-shadow: 0 0 0 8px var(--success-bg);
}

.confirm__mark .icon { inline-size: 36px; block-size: 36px; }

.confirm__title {
  margin: var(--space-6) 0 0;
  font-family: var(--heading);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  color: var(--ink-900);
}

.confirm__code-label {
  margin: var(--space-6) 0 0;
  font-size: var(--text-sm);
  color: var(--text-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Large, spaced and selectable: this is read aloud over the phone. */
.confirm__code {
  margin: var(--space-2) 0 0;
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  color: var(--primary);
  user-select: all;
  direction: ltr;
}

.confirm__saved {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--text-soft);
}

.confirm__next {
  margin-block-start: var(--space-8);
  padding: var(--space-6);
  border: 1px solid var(--border-warm);
  border-radius: var(--radius-xl);
  background: var(--surface-warm);
  box-shadow: var(--shadow-sm);
}

.confirm__next-title {
  margin: 0;
  font-family: var(--heading);
  font-size: var(--text-xl);
  color: var(--ink-900);
}

.confirm__next p {
  margin: var(--space-3) 0 var(--space-5);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

.confirm__next p:last-child { margin-block-end: 0; }

/* Shown only when the auto-forward is on, and removed the moment the
   guest does anything at all. */
.confirm__next .confirm__auto {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--text-soft);
}

.confirm__details {
  margin-block-start: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  text-align: start;
}

.confirm__details-title {
  margin: 0;
  font-family: var(--heading);
  font-size: var(--text-lg);
  color: var(--ink-900);
}

/*
 * Cap the measure. Across the full width of the card the label sits at
 * one edge and its value at the other, and pairing them up becomes a
 * game of follow-the-line.
 */
.confirm__details .summary-list {
  max-inline-size: 30rem;
  margin-inline: auto;
}

.confirm__details .summary-list > div {
  gap: var(--space-6);
  padding-block-end: var(--space-2);
  border-block-end: 1px dashed var(--border);
}

.confirm__details .summary-list > div:last-child { border-block-end: 0; }

.confirm__private {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--text-soft);
}

.confirm__private .icon { flex: none; opacity: 0.6; }

.confirm__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-8);
  font-weight: var(--weight-medium);
  color: var(--link);
}

.confirm__back:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   Narrow screens.

   The summary moves above the form and stops sticking — a sticky card
   that tall would eat the viewport on a phone.
   --------------------------------------------------------------------- */
@media (max-width: 960px) {
  .checkout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }

  .checkout__summary { grid-column: 1; grid-row: 1; }
  .checkout__form    { grid-column: 1; grid-row: 2; }

  .summary-card { position: static; }
}

@media (max-width: 600px) {
  .checkout__form .form-stack { padding: var(--space-4); }
  .checkout__title { font-size: var(--text-2xl); }
  .confirm__code   { font-size: var(--text-2xl); }
  .confirm__next,
  .confirm__details { padding: var(--space-4); }
}

/* =====================================================================
   PHASE 6 — offers, discounts, banners, static pages
   ===================================================================== */

/* ---------------------------------------------------------------------
   Discount marks on a price.

   The badge names the saving; the struck-through figure is the real
   pre-discount total, never an invented "was" price. Both only appear
   when a discount genuinely applied.
   --------------------------------------------------------------------- */
.price-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0 0 var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--success-bg);
  color: var(--success-ink);
  font-size: var(--text-xs);
  font-weight: 700;
}

.price-badge .icon { inline-size: 12px; block-size: 12px; }

.price-was {
  margin-inline-end: var(--space-2);
  color: var(--text-soft);
  font-weight: var(--weight-regular);
  text-decoration-thickness: 1px;
}

.summary-total__saving dt,
.summary-total__saving dd { color: var(--success-ink); font-weight: var(--weight-medium); }
.summary-total__saving dt { display: inline-flex; align-items: center; gap: var(--space-2); }

/* ---------------------------------------------------------------------
   Coupon field — folded away until someone has a code
   --------------------------------------------------------------------- */
.coupon-field > summary {
  cursor: pointer;
  list-style: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--link);
}

.coupon-field > summary::-webkit-details-marker { display: none; }
.coupon-field > summary::after {
  content: "";
  display: inline-block;
  inline-size: 6px;
  block-size: 6px;
  margin-inline-start: var(--space-2);
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.coupon-field[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.coupon-field > .field { margin-block-start: var(--space-3); }
.coupon-field input { text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------------------------------------------------------------------
   Banners
   --------------------------------------------------------------------- */
.banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-block-size: clamp(220px, 32vw, 420px);
  display: grid;
  align-items: center;
  background: var(--blue-900);
}

.banner__media,
.banner__img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: -2;
}

.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(8, 20, 30, var(--banner-overlay, 0.4));
}

.banner__inner { position: relative; padding-block: var(--space-10); }
.banner__text  { max-inline-size: 34rem; color: var(--white); }

.banner--center .banner__text { margin-inline: auto; text-align: center; }
.banner--end    .banner__text { margin-inline-start: auto; text-align: end; }

.banner__title {
  margin: 0;
  font-family: var(--heading);
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  line-height: var(--leading-tight);
  color: var(--white);
}

.banner__sub {
  margin: var(--space-3) 0 var(--space-5);
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.86);
}

/* ---------------------------------------------------------------------
   Offer cards
   --------------------------------------------------------------------- */
.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  gap: var(--space-6);
  margin-block: var(--space-6) var(--space-16);
}

.offer-grid--compact { margin-block-end: 0; }

.offer-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}

.offer-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.offer-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--surface-muted);
}

.offer-card__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.offer-card__placeholder {
  display: grid;
  place-items: center;
  block-size: 100%;
  color: var(--ink-300);
}

.offer-card__badge {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--text-xs);
  font-weight: 700;
  box-shadow: var(--shadow-sm);
}

.offer-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  padding: var(--space-5);
}

.offer-card__title {
  margin: 0;
  font-family: var(--heading);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--ink-900);
}

.offer-card__sub       { margin: 0; color: var(--text-muted); font-size: var(--text-sm); }
.offer-card__body-text { margin: 0; color: var(--text-soft); font-size: var(--text-sm); }

.offer-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin: var(--space-2) 0 0;
}

.offer-card__meta > div { display: flex; align-items: center; gap: var(--space-2); }
.offer-card__meta dt,
.offer-card__meta dd { margin: 0; font-size: var(--text-sm); color: var(--text-soft); }

/* A code is read character by character and typed by hand, so it gets
   a monospace face and room to breathe. */
.offer-card__code {
  padding: 2px var(--space-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-warm);
  font-family: var(--font-num), monospace;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-900);
  user-select: all;
}

.offer-card .btn { margin-block-start: auto; }

/* ---------------------------------------------------------------------
   Static pages and FAQ
   --------------------------------------------------------------------- */
.prose { margin-block: var(--space-6) var(--space-10); }

.prose__title {
  margin: 0 0 var(--space-5);
  font-family: var(--heading);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  color: var(--ink-900);
}

.prose__lead { margin: 0 0 var(--space-6); color: var(--text-muted); font-size: var(--text-lg); }

.prose p {
  margin: 0 0 var(--space-4);
  line-height: var(--leading-normal);
  color: var(--ink-700);
}

.faq-group { margin-block-end: var(--space-8); }

.faq-group__title {
  margin: 0 0 var(--space-4);
  font-family: var(--heading);
  font-size: var(--text-xl);
  color: var(--ink-900);
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  margin-block-end: var(--space-3);
}

.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  list-style: none;
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}

.faq-item__q::-webkit-details-marker { display: none; }

.faq-item__q::after {
  content: "";
  flex: none;
  inline-size: 8px;
  block-size: 8px;
  border-inline-end: 2px solid var(--text-soft);
  border-block-end: 2px solid var(--text-soft);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--duration-fast) var(--ease);
}

.faq-item[open] .faq-item__q::after { transform: rotate(-135deg) translateY(-2px); }
.faq-item__q:focus-visible { outline: var(--focus-ring); outline-offset: -2px; border-radius: var(--radius-lg); }

.faq-item__a { padding: 0 var(--space-5) var(--space-5); }
.faq-item__a p { margin: 0 0 var(--space-3); color: var(--ink-700); line-height: var(--leading-normal); }
.faq-item__a p:last-child { margin-block-end: 0; }

/* ---------------------------------------------------------------------
   Shared section furniture
   --------------------------------------------------------------------- */
.section--warm { padding-block: var(--space-12); background: var(--surface-warm); }

.section-head { margin-block-end: var(--space-6); }

.section-head--row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.section-head__title {
  margin: 0;
  font-family: var(--heading);
  font-size: var(--text-2xl);
  color: var(--ink-900);
}

.section-head__lead { margin: var(--space-2) 0 0; color: var(--text-soft); }

@media (max-width: 600px) {
  .banner__inner { padding-block: var(--space-8); }
  .offer-grid    { gap: var(--space-4); }
  .prose__title  { font-size: var(--text-2xl); }
}

/* ===================================================================
   Booking payment choice + bank-transfer card
   =================================================================== */
.pay-choice { border: 0; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); }
.pay-choice__legend { font-weight: var(--weight-semibold); margin-block-end: var(--space-2); color: var(--heading); }
.pay-choice__option {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer; transition: border-color .15s, background .15s;
}
.pay-choice__option:hover { border-color: var(--blue-400, #5b8def); }
.pay-choice__option:has(input:checked) { border-color: var(--blue-500, #2f6fed); background: var(--blue-50, #f0f5ff); }
.pay-choice__option input { margin-block-start: 0.2rem; }
.pay-choice__body { display: grid; gap: 2px; }
.pay-choice__title { font-weight: var(--weight-semibold); color: var(--heading); }
.pay-choice__meta { font-size: var(--text-sm); color: var(--text-muted); }

.transfer-box {
  border: 1px solid var(--border); border-radius: var(--radius-lg, 14px);
  padding: var(--space-5); margin-block-end: var(--space-5); background: var(--surface, #fff);
}
.transfer-box__title { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
.transfer-box__amount { display: flex; justify-content: space-between; align-items: baseline;
  padding: var(--space-3) var(--space-4); background: var(--blue-50, #f0f5ff); border-radius: var(--radius); }
.transfer-box__amount strong { font-size: var(--text-lg, 1.25rem); color: var(--heading); }
.transfer-box__rest, .transfer-box__note { font-size: var(--text-sm); color: var(--text-muted); margin: var(--space-2) 0 0; }
.transfer-box__bank { display: grid; gap: var(--space-2); margin: var(--space-4) 0; }
.transfer-box__bank > div { display: flex; justify-content: space-between; gap: var(--space-3);
  padding-block-end: var(--space-2); border-block-end: 1px dashed var(--border); }
.transfer-box__bank dt { color: var(--text-muted); font-size: var(--text-sm); }
.transfer-box__bank dd { font-weight: var(--weight-semibold); text-align: end; }
.transfer-box__received { display: flex; align-items: center; gap: var(--space-2);
  color: var(--success-ink, #137333); font-weight: var(--weight-semibold); margin: var(--space-3) 0; }
.transfer-box__upload { margin-block-start: var(--space-4); display: grid; gap: var(--space-2); }