/* SADOVÁ — Cloudbeds Booking Engine V3 (React + Chakra UI) override.
 *
 * CANONICAL SOURCE — served from this app (web/public/cb-inject/):
 *   dev:  http://localhost:5174/cb-inject/booking-engine-sadova.css
 *   prod: https://urbanwolf.cloud/cb-inject/booking-engine-sadova.css
 * Linked into Cloudbeds via Booking Engine → Customize → Custom Meta Tags V3
 * (set by sohosuites/tools/cb-booking-customize.js --property=sadova).
 *
 * :root palette mirrors the "sadova" preset in web/src/lib/brandTokens.ts —
 * keep the two in sync when the brand changes.
 */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --soho-ink:       #1D1F1B;
  --soho-ink-soft:  #2C2F28;
  --soho-paper:     #FAF8F2;
  --soho-paper-2:   #F1EDE4;
  --soho-line:      #D6D4C9;
  --soho-mute:      #74786C;
  --soho-gold:      #A9803F;
  --soho-gold-deep: #8A6832;
  --soho-serif:     'Bricolage Grotesque', system-ui, sans-serif;
  --soho-sans:      'Hanken Grotesk', system-ui, -apple-system, sans-serif;
}

html, body {
  background: var(--soho-paper) !important;
  font-family: var(--soho-sans) !important;
  color: var(--soho-ink) !important;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* ─────────────────────────────────────────────────────────────────────
   ENGINE ROOT
   ───────────────────────────────────────────────────────────────────── */
#cb-bookingengine,
.cb-bookingengine,
.cb-bookingengine-root {
  position: relative;
  font-family: var(--soho-sans) !important;
  color: var(--soho-ink) !important;
  background: var(--soho-paper) !important;
}


/* ─────────────────────────────────────────────────────────────────────
   SEARCH BAR — glass pill over hero
   ───────────────────────────────────────────────────────────────────── */
/* NOTE: do NOT use `.chakra-stack:has(> .chakra-button[type="submit"])` —
   that selector also matches the Continue submit-pill on /guests, /payment,
   etc., painting them as cream search pills. The real search bar is
   `.cb-search-card` (handled in the cb-* section). Keep only the
   form/SearchBar/data-orientation fallbacks here.
   Desktop-only — on mobile the card stacks vertically and the 999px pill
   radius turns each row into a separate blob. Cloudbeds default mobile
   layout looks cleaner. */
@media (min-width: 769px) {
  /* `header-search-panel` excluded — that's the newer build's RESULTS-page
     toolbar (date range + Promo Code + Filters), also a horizontal stack
     with an input. The hero pill's big drop-shadow leaked onto it as a
     cream halo behind the dates. The hero itself is `landing-search-panel`
     / `.cb-search-card` and still matches. */
  .chakra-stack[data-orientation="horizontal"]:has(input):not([data-testid*="header-search-panel"]):not([data-testid*="header-search-panel"] *),
  form[class*="search"], div[class*="SearchBar"], div[class*="searchBar"] {
    background: rgba(250,248,242,0.95) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-radius: 999px !important;
    box-shadow:
      0 30px 80px -20px rgba(0,0,0,0.55),
      0 2px 0 rgba(255,255,255,0.5) inset !important;
    border: 1px solid rgba(255,255,255,0.6) !important;
    padding: 0.55rem 0.55rem 0.55rem 1.5rem !important;
    margin: 0 auto clamp(1rem, 3vw, 2rem) !important;
    max-width: 1360px !important;
    position: relative;
    z-index: 2;
  }
  /* Flatten the results-toolbar container's cream fill + halo shadow only —
     no geometry changes, so the pill sizing below is untouched and nothing
     clips. The date pill itself (header-search-panel-date-picker) keeps its
     own look, so it's excluded from the descendant sweep. */
  #cb-bookingengine [data-testid*="header-search-panel"]:not(button),
  #cb-bookingengine [data-testid*="header-search-panel"]:not(button) div:not([data-testid="header-search-panel-date-picker"]):not([data-testid="header-search-panel-date-picker"] *) {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    border: 0 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   HEADINGS — Bricolage Grotesque everywhere
   ───────────────────────────────────────────────────────────────────── */
.chakra-heading,
h1, h2, h3, h4,
[class*="PropertyName"], [class*="RoomName"], [class*="RoomTitle"],
.cb-property-name, .cb-title-text, .cb-room-name, .cb-room-title {
  font-family: var(--soho-serif) !important;
  font-weight: 400 !important;
  letter-spacing: -0.005em !important;
  color: var(--soho-ink) !important;
}
.chakra-heading[as="h1"], h1, [class*="PropertyName"] {
  font-size: clamp(1.8rem, 3vw, 2.8rem) !important;
  line-height: 1.08 !important;
}

/* Property-name wordmark — match portal `.nav__logo` exactly.
   Prefixed with #cb-bookingengine so specificity (1,1,0) beats Chakra's
   .chakra-text emotion rules (0,1,0) regardless of source order. */
#cb-bookingengine .cb-property-name,
#cb-bookingengine .cb-property-name.chakra-text,
#cb-bookingengine p.cb-property-name {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: inherit !important;
}

/* ─────────────────────────────────────────────────────────────────────
   PAPER CARDS — rooms, rates, and major content sections
   We avoid using the bare `section, article` selectors (they swallowed the
   engine's hero container last revision). Instead we target Chakra cards +
   specific content-section class hints.
   ───────────────────────────────────────────────────────────────────── */
.chakra-card,
[class*="RoomCard"], [class*="RateCard"], [class*="room-card"],
[class*="PropertyInfo"], [class*="property-info"],
[class*="Policies"], [class*="policies"],
[class*="Terms"], [class*="terms"],
[class*="Amenities"], [class*="amenities"],
[class*="Description"]:not([class*="Hero"]):not([class*="hero"]),
[class*="ContactSection"], [class*="LocationSection"],
[class*="MapSection"], [class*="GallerySection"] {
  background: var(--soho-paper) !important;
  border: 1px solid var(--soho-line) !important;
  border-radius: 8px !important;
  box-shadow:
    0 28px 64px -28px rgba(0,0,0,0.30),
    0 2px 6px -2px rgba(0,0,0,0.06) !important;
  padding: clamp(0.4rem, 0.8vw, 0.55rem) !important;
  margin: 0.75rem auto !important;
  width: 100% !important;
  max-width: none !important;
  overflow: hidden;
}
.chakra-card:hover {
  border-color: var(--soho-gold);
  transition: border-color 250ms ease;
}

/* Don't double-card nested children of cards. */
.chakra-card .chakra-card,
[class*="PropertyInfo"] .chakra-card,
[class*="Policies"] .chakra-card,
[class*="Terms"] .chakra-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 1.25rem !important;
}

/* Section heading: magazine-style rule */
.chakra-card > h2:first-child,
.chakra-card > .chakra-heading:first-child,
[class*="PropertyInfo"] > h2:first-child,
[class*="Policies"] > h2:first-child,
[class*="Terms"] > h2:first-child,
[class*="Amenities"] > h2:first-child {
  font-family: var(--soho-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(1.4rem, 2vw, 2rem) !important;
  margin: 0 0 1.25rem !important;
  padding: 0 0 0.85rem !important;
  border-bottom: 1px solid var(--soho-line);
  letter-spacing: -0.005em;
}

/* Bullet lists — gold dots */
.chakra-card ul,
[class*="Policies"] ul, [class*="Terms"] ul {
  padding-left: 0;
  list-style: none;
}
.chakra-card ul li,
[class*="Policies"] ul li,
[class*="Terms"] ul li {
  position: relative;
  padding-left: 1.25rem;
  margin: 0.5rem 0;
  line-height: 1.6;
}
.chakra-card ul li::before,
[class*="Policies"] ul li::before,
[class*="Terms"] ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--soho-gold);
}

/* ─────────────────────────────────────────────────────────────────────
   PRICES — serif numerals
   ───────────────────────────────────────────────────────────────────── */
[class*="Price"], [class*="price"], [class*="Total"], [class*="Rate"] strong,
.chakra-text[class*="price"] {
  font-family: var(--soho-serif) !important;
  font-weight: 500 !important;
  color: var(--soho-ink) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   BUTTONS
   ───────────────────────────────────────────────────────────────────── */
.chakra-button,
button[type="submit"], a[role="button"] {
  font-family: var(--soho-sans) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  border-radius: 999px !important;
  padding: 0.85rem 1.6rem !important;
  transition: all 200ms ease;
}
.chakra-button[data-variant="outline"],
.chakra-button[data-variant="ghost"] {
  background: transparent !important;
  border: 1px solid var(--soho-line) !important;
  color: var(--soho-ink) !important;
}
.chakra-button[data-variant="outline"]:hover {
  border-color: var(--soho-gold) !important;
  color: var(--soho-gold-deep) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   INPUTS
   Every <input> inside the engine sits in a styled container — either a
   form-field wrapper (label above + own border) or the .cb-search-card
   pill. If we also draw a border/bg on the <input> itself we get a tiny
   inner pill nested inside the wrapper ("box-in-box" / shrunken-editable
   bug). Solution: strip the input's own box entirely; the wrapper owns
   the box. Wrapper picks up the gold focus ring via :focus-within where
   we can hit it (Cloudbeds stitches `d-XXX` classes are unstable, so the
   wrapper selectors are best-effort — the input rule below is what
   actually fixes the bug).
   ───────────────────────────────────────────────────────────────────── */
#cb-bookingengine input,
#cb-bookingengine select,
#cb-bookingengine textarea,
#cb-bookingengine .chakra-input,
#cb-bookingengine .chakra-select {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0.4rem 0 !important;
  font-family: var(--soho-sans) !important;
  color: var(--soho-ink) !important;
  box-sizing: border-box !important;
}
#cb-bookingengine input:focus,
#cb-bookingengine select:focus,
#cb-bookingengine textarea:focus,
#cb-bookingengine .chakra-input:focus,
#cb-bookingengine .chakra-select:focus {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
/* Best-effort gold focus ring on the wrapper. No-op if the wrapper class
   isn't one of these — but the input no longer self-draws a ring, so
   worst case is just no focus indicator (the browser's outline can be
   re-enabled here if it becomes a problem). */
#cb-bookingengine .chakra-form-control:focus-within,
#cb-bookingengine [class*="input-wrapper" i]:focus-within,
#cb-bookingengine [class*="FormControl"]:focus-within,
#cb-bookingengine [class*="cb-input"]:focus-within {
  border-color: var(--soho-gold) !important;
  box-shadow: 0 0 0 3px rgba(169,128,63,0.18) !important;
}

/* Field-wrapper box via :has() — target the OUTER labeled wrapper, not the
   input's immediate parent. The outer wrapper exists on every page (Add
   Guests, Payment, etc) and contains both the <label> AND a descendant
   <input>. Styling the outer one gives a single consistent box per field
   on every page (avoids the box-in-box bug where Add Guests wrapped the
   input parent AND we wrapped it again).
   Payment card fields (Card Number / Expiration / CVC) use iframes, not
   <input>, so :has(label):has(input) does not match them and they keep
   their native Cloudbeds styling. Search pill excluded. */
#cb-bookingengine div:has(> label):has(input):not(:has(iframe)):not(.cb-search-card):not(.cb-search-card *),
#cb-bookingengine div:has(> label):has(select):not(:has(iframe)):not(.cb-search-card):not(.cb-search-card *),
#cb-bookingengine div:has(> label):has(textarea):not(:has(iframe)):not(.cb-search-card):not(.cb-search-card *) {
  background: var(--soho-paper-2) !important;
  border: 1px solid var(--soho-line) !important;
  border-radius: 6px !important;
  padding: 0.85rem 1rem !important;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
/* Don't double-box: if a labeled wrapper contains another labeled wrapper
   (nested form-control), only the outer one keeps the box. */
#cb-bookingengine div:has(> label):has(input) div:has(> label):has(input),
#cb-bookingengine div:has(> label):has(select) div:has(> label):has(select),
#cb-bookingengine div:has(> label):has(textarea) div:has(> label):has(textarea) {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
/* Gold focus ring on the labeled wrapper. */
#cb-bookingengine div:has(> label):has(input:focus):not(:has(iframe)):not(.cb-search-card):not(.cb-search-card *),
#cb-bookingengine div:has(> label):has(select:focus):not(:has(iframe)):not(.cb-search-card):not(.cb-search-card *),
#cb-bookingengine div:has(> label):has(textarea:focus):not(:has(iframe)):not(.cb-search-card):not(.cb-search-card *) {
  border-color: var(--soho-gold) !important;
  box-shadow: 0 0 0 3px rgba(169,128,63,0.18) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   MAP — mirror of the portal's LocationMap plate (ubnwlfhub
   web/src/pages/property-page.css `.op-map`): cream/sepia tile wash,
   gold teardrop pin, detached white zoom squares. Cloudbeds owns the
   Leaflet JS + OSM tile source, so everything here is CSS-only.
   ───────────────────────────────────────────────────────────────────── */
.leaflet-container,
[class*="MapSection"] > div,
[class*="MapContainer"] {
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow:
    0 24px 60px -28px rgba(0,0,0,0.35),
    0 2px 8px rgba(0,0,0,0.06) !important;
}
.leaflet-container {
  background: var(--soho-paper-2) !important;
  font-family: var(--soho-sans) !important;
}

/* Tile wash — the portal's exact `.op-map .leaflet-tile-pane` recipe, so
   the engine's OSM raster lands on the same cream/sepia plate as the
   CARTO tiles on sadova.digitalpa.tech. */
.leaflet-tile-pane {
  filter: grayscale(0.5) sepia(0.3) saturate(0.55) brightness(1.05)
    contrast(0.92) !important;
}

/* Soft vignette + grain overlay on top of the map for paper texture. */
.leaflet-container::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  z-index: 400;
  mix-blend-mode: multiply;
  background:
    radial-gradient(120% 80% at 50% 50%, transparent 55%, rgba(29,31,27,.10) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/></svg>");
}

/* Pin — swap Leaflet's default blue marker image for the portal's gold
   teardrop (`content:` replaces the <img> pixels, same trick as the
   hero). Sizing/margins override Leaflet's inline 25×41 anchor so the
   tip still points at the property. Shadow image dropped — the drop-
   shadow filter replaces it. */
img.leaflet-marker-icon {
  content: url("data:image/svg+xml;utf8,<svg width='44' height='57' viewBox='0 0 34 44' xmlns='http://www.w3.org/2000/svg'><path d='M17 43C17 43 32 26 32 16A15 15 0 1 0 2 16C2 26 17 43 17 43Z' fill='%23A9803F' stroke='%23fff' stroke-width='2'/><circle cx='17' cy='16' r='6' fill='%23fff'/></svg>");
  width: 44px !important;
  height: 57px !important;
  margin-left: -22px !important;
  margin-top: -56px !important;
  filter: drop-shadow(0 3px 5px rgba(15,14,12,0.32)) !important;
}
.leaflet-marker-shadow {
  display: none !important;
}

/* Attribution hidden per user request — note: violates OSM/Leaflet ToS. */
.leaflet-control-attribution {
  display: none !important;
}

/* Zoom — two detached 36px white squares with soft shadows, exactly the
   portal's `.op-map` control. The bar itself goes transparent; each
   anchor becomes its own rounded card. `.leaflet-touch` prefix included
   so the engine's touch sizing (30px anchors, bar border) loses. */
.leaflet-control-zoom.leaflet-bar,
.leaflet-touch .leaflet-control-zoom.leaflet-bar {
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  margin: 14px !important;
}
/* Anchor selectors carry the #cb-bookingengine prefix: the newer engine
   build restyles these anchors itself (padding .85rem 1.6rem, auto
   width — the "giant pill with the glyph hanging out") via emotion
   styles injected AFTER this <link>, so on equal specificity+important
   it wins. The id bumps us above its class-based rules. Flex centering
   + padding 0 keeps the glyph inside the box whatever the build sets. */
#cb-bookingengine a.leaflet-control-zoom-in,
#cb-bookingengine a.leaflet-control-zoom-out,
.leaflet-control-zoom.leaflet-bar a,
.leaflet-touch .leaflet-control-zoom.leaflet-bar a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 18px !important;
  font-family: var(--soho-sans) !important;
  font-weight: 400 !important;
  color: var(--soho-ink) !important;
  border: 0 !important;
  border-radius: 10px !important;
  margin: 0 0 8px !important;
  background: #fff !important;
  box-shadow: 0 2px 10px rgba(15,14,12,0.16) !important;
  transition: color .2s !important;
}
#cb-bookingengine a.leaflet-control-zoom-in span,
#cb-bookingengine a.leaflet-control-zoom-out span {
  line-height: 1 !important;
}
#cb-bookingengine a.leaflet-control-zoom-in:hover,
#cb-bookingengine a.leaflet-control-zoom-out:hover,
.leaflet-control-zoom a:hover {
  color: var(--soho-gold) !important;
  background: #fff !important;
}
.leaflet-control-zoom a.leaflet-disabled {
  color: var(--soho-mute) !important;
  background: var(--soho-paper) !important;
}

/* Leaflet's container is focusable (tabindex) — the engine paints a blue
   focus ring around the whole plate on click. Keyboard focus keeps a
   quiet gold ring instead. */
.leaflet-container:focus {
  outline: none !important;
}
.leaflet-container:focus-visible {
  outline: 2px solid var(--soho-gold) !important;
  outline-offset: 2px !important;
}

/* ─────────────────────────────────────────────────────────────────────
   DIVIDERS, LINKS, MISC
   ───────────────────────────────────────────────────────────────────── */
.chakra-divider, hr {
  border-color: var(--soho-line) !important;
  background: var(--soho-line) !important;
}
.chakra-link, a {
  color: var(--soho-gold-deep);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.chakra-link:hover, a:hover {
  color: var(--soho-gold);
  border-bottom-color: var(--soho-gold);
}
::selection { background: var(--soho-gold); color: var(--soho-paper); }

.chakra-text small,
[class*="Disclaimer"], [class*="Footer"] {
  color: var(--soho-mute) !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.04em;
}

/* ─────────────────────────────────────────────────────────────────────
   CLOUDBEDS NATIVE CLASSES (cb-*)
   The reservation/property pages emit `cb-header`, `cb-search-card`,
   `cb-card`, `cb-landing-page`, `cb-background-image`. Our Chakra-based
   selectors above don't catch these. Mirror the rules here.
   ───────────────────────────────────────────────────────────────────── */

/* Search card — cream glass pill floating on hero. Desktop-only because
   on mobile the card stacks vertically and the pill radius produces
   stacked-blob artefacts. Cloudbeds default handles mobile. */
@media (min-width: 769px) {
  #cb-bookingengine .cb-search-card {
    /* See-through-blur: only a thin frost tint so the hero photo reads
       through. Bump alpha to ~0.45 if text contrast drops on bright hero. */
    background: rgba(255,255,255,0.22) !important;
    background-color: rgba(255,255,255,0.22) !important;
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(255,255,255,0.5) !important;
    border-radius: 999px !important;
    box-shadow:
      0 30px 80px -20px rgba(0,0,0,0.55),
      0 2px 0 rgba(255,255,255,0.4) inset !important;
    padding: 0.55rem 0.55rem 0.55rem 1.5rem !important;
    max-width: 1360px !important;
    margin: 0 auto clamp(1rem, 3vw, 2rem) !important;
    position: relative;
    z-index: 2;
  }
}
#cb-bookingengine .cb-search-card .cb-search-card-filters {
  background: transparent !important;
}
/* Date / guest selectors inside the pill — ink text on cream */
#cb-bookingengine .cb-search-card .chakra-button:not(.cb-search-button) {
  background: transparent !important;
  color: var(--soho-ink) !important;
  font-family: var(--soho-sans) !important;
}
#cb-bookingengine .cb-search-card .calendar-icon,
#cb-bookingengine .cb-search-card .arrow-icon {
  color: var(--soho-ink) !important;
  fill: var(--soho-ink) !important;
}
/* Paper cards — cb-card covers cb-property-info, cb-amenities, cb-policies,
   cb-terms, cb-room-card, cb-rate-card. Mirror the chakra-card rule. */
#cb-bookingengine .cb-card {
  background: var(--soho-paper) !important;
  border: 1px solid var(--soho-line) !important;
  border-radius: 8px !important;
  box-shadow:
    0 28px 64px -28px rgba(0,0,0,0.30),
    0 2px 6px -2px rgba(0,0,0,0.06) !important;
  padding: clamp(0.4rem, 0.8vw, 0.55rem) !important;
  margin: 0.75rem auto !important;
  width: 100% !important;
  max-width: none !important;
  overflow: hidden;
}
#cb-bookingengine .cb-card:hover {
  border-color: var(--soho-gold);
  transition: border-color 250ms ease;
}
/* Nested cb-card inside cb-card → strip duplicate frame */
#cb-bookingengine .cb-card .cb-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 1.25rem !important;
}

/* Property Amenities — show ALL items by default. Cloudbeds truncates
   the list to the first ~9 amenities and hides the rest behind a
   "View All (N)" button. Force the full list visible + hide the button. */
#cb-bookingengine [class*="amenit" i] {
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}
#cb-bookingengine [class*="amenit" i] [hidden],
#cb-bookingengine [class*="amenit" i] [aria-hidden="true"],
#cb-bookingengine [class*="amenit" i] [class*="hidden" i],
#cb-bookingengine [class*="amenit" i] [class*="collapsed" i],
#cb-bookingengine [class*="amenit" i] [class*="truncated" i] {
  display: revert !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: none !important;
  height: auto !important;
}
/* Force every amenity item visible, even if hidden via inline style or
   class. Covers li, list items, and grid children. If Cloudbeds skips
   rendering items 17-20 via React state, CSS can't recover them — would
   need a JS auto-click on the (now-hidden) View All button. */
#cb-bookingengine [class*="amenit" i] li,
#cb-bookingengine [class*="amenit" i] [class*="amenity-item" i],
#cb-bookingengine [class*="amenit" i] [class*="amenities-item" i],
#cb-bookingengine [class*="amenit" i] ul > *,
#cb-bookingengine [class*="amenit" i] [class*="grid" i] > *,
#cb-bookingengine [class*="amenit" i] [style*="display: none"],
#cb-bookingengine [class*="amenit" i] [style*="display:none"] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Info cards (Property Amenities, Check-In/Out Policies, Cancellation
   Policies, Property Information, Terms, Description) — strip the visual
   container. Keep vertical spacing so sections still separate.
   Room/Rate/Shopping-Cart cards keep their frame via .cb-card above. */
#cb-bookingengine [class*="property-info" i],
#cb-bookingengine [class*="amenit" i],
#cb-bookingengine [class*="polic" i]:not(button):not(a),
#cb-bookingengine [class*="cancel" i]:not(button):not(a),
#cb-bookingengine [class*="terms" i],
#cb-bookingengine [class*="description" i]:not([class*="room" i]):not([class*="rate" i]),
#cb-bookingengine [class*="contact-section" i],
#cb-bookingengine [class*="location-section" i],
#cb-bookingengine [class*="map-section" i],
#cb-bookingengine [class*="gallery-section" i] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
#cb-bookingengine [class*="property-info" i]:hover,
#cb-bookingengine [class*="amenit" i]:hover,
#cb-bookingengine [class*="polic" i]:hover,
#cb-bookingengine [class*="terms" i]:hover {
  border-color: transparent !important;
}

/* Section heading inside cb-card — magazine rule */
#cb-bookingengine .cb-card > h2:first-child,
#cb-bookingengine .cb-card > .chakra-heading:first-child,
#cb-bookingengine .cb-card > .cb-text:first-child {
  font-family: var(--soho-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(1.4rem, 2vw, 2rem) !important;
  margin: 0 0 1.25rem !important;
  padding: 0 0 0.85rem !important;
  border-bottom: 1px solid var(--soho-line);
  letter-spacing: -0.005em;
  color: var(--soho-ink) !important;
}

/* cb-landing-page is the engine-content wrapper between header and cards */
#cb-bookingengine .cb-landing-page {
  background: transparent !important;
}

/* cb-text spans inherit our font + ink */
.cb-text {
  font-family: var(--soho-sans) !important;
  color: var(--soho-ink) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   HEADER + THEME-COLOR OVERRIDES (re-added 2026-08-03)
   SOHO relies on the 7 Cloudbeds color pickers for these; SADOVÁ's
   pickers are unset, so the engine falls back to navy header + mint
   buttons. Pin them to the brand palette here so the engine matches
   brandTokens.ts with or without a Cloudbeds picker save.
   ───────────────────────────────────────────────────────────────────── */
#cb-bookingengine .cb-header,
#cb-bookingengine [data-testid="header"] {
  background: var(--soho-paper) !important;
  background-color: var(--soho-paper) !important;
  border-bottom: 1px solid var(--soho-line) !important;
  box-shadow: none !important;
}
#cb-bookingengine .cb-property-name,
#cb-bookingengine [data-testid="property-name"] {
  color: var(--soho-gold) !important;
  font-family: var(--soho-serif) !important;
}
/* Language / currency pills */
#cb-bookingengine .cb-language-selector,
#cb-bookingengine .cb-currency-selector {
  background: var(--soho-paper-2) !important;
  background-color: var(--soho-paper-2) !important;
  color: var(--soho-ink) !important;
  border: 1px solid var(--soho-line) !important;
}
/* Search button — gold; engine paints its picker color inline */
#cb-bookingengine .cb-search-button {
  background: var(--soho-gold) !important;
  background-color: var(--soho-gold) !important;
  color: var(--soho-paper) !important;
  border: 1px solid var(--soho-gold) !important;
  border-radius: 999px !important;
}
#cb-bookingengine .cb-search-button:hover {
  background: var(--soho-gold-deep) !important;
  background-color: var(--soho-gold-deep) !important;
  border-color: var(--soho-gold-deep) !important;
}
#cb-bookingengine .cb-search-button:disabled,
#cb-bookingengine .cb-search-button[aria-disabled="true"] {
  background: var(--soho-line) !important;
  background-color: var(--soho-line) !important;
  color: var(--soho-mute) !important;
  border-color: var(--soho-line) !important;
  opacity: 1 !important;
}
/* Promo chip (mint outline by default) */
#cb-bookingengine [data-testid="promo-code-popover-button"],
#cb-bookingengine [data-testid*="promo"] .chakra-button,
#cb-bookingengine button[class*="promo" i] {
  border-color: var(--soho-gold) !important;
  color: var(--soho-gold) !important;
  background: transparent !important;
}
/* Descendants carry their own color (generic .cb-text ink rule + Cloudbeds
   inline navy on the tag icon), so the button-level gold never reaches the
   label. Higher specificity than `.cb-text`; icon path uses currentColor.
   gold-deep, not gold — plain gold on the cream pill reads washed-out. */
#cb-bookingengine [data-testid="promo-code-popover-button"] *,
#cb-bookingengine [data-testid*="promo"] .chakra-button * {
  color: var(--soho-gold-deep) !important;
}
/* Newer engine build: results toolbar "Promo Code" / "Filters" pills ship
   white icons (meant for Cloudbeds' navy backdrop) — invisible on our cream.
   That build isn't served to headless sessions, so match generously:
   testid/class/aria hints for the buttons, plus literal white fill/stroke
   attrs inside any chakra-button. `color` covers currentColor icons; attr
   selectors cover hardcoded #fff without touching fill="none" outlines. */
#cb-bookingengine [data-testid*="promo" i] svg,
#cb-bookingengine [data-testid*="promo" i] svg *,
#cb-bookingengine [data-testid*="filter" i] svg,
#cb-bookingengine [data-testid*="filter" i] svg *,
#cb-bookingengine button[class*="promo" i] svg,
#cb-bookingengine button[class*="promo" i] svg *,
#cb-bookingengine button[class*="filter" i] svg,
#cb-bookingengine button[class*="filter" i] svg *,
#cb-bookingengine button[aria-label*="promo" i] svg,
#cb-bookingengine button[aria-label*="promo" i] svg *,
#cb-bookingengine button[aria-label*="filter" i] svg,
#cb-bookingengine button[aria-label*="filter" i] svg * {
  color: var(--soho-gold-deep) !important;
}
#cb-bookingengine .chakra-button svg [fill="#fff" i],
#cb-bookingengine .chakra-button svg [fill="#ffffff" i],
#cb-bookingengine .chakra-button svg [fill="white" i],
#cb-bookingengine .chakra-button svg[fill="#fff" i],
#cb-bookingengine .chakra-button svg[fill="#ffffff" i],
#cb-bookingengine .chakra-button svg[fill="white" i] {
  fill: var(--soho-gold-deep) !important;
}
#cb-bookingengine .chakra-button svg [stroke="#fff" i],
#cb-bookingengine .chakra-button svg [stroke="#ffffff" i],
#cb-bookingengine .chakra-button svg [stroke="white" i] {
  stroke: var(--soho-gold-deep) !important;
}
/* Newer build's header toolbar — the date-range pill, "Promo Code" and
   "Filters" each land at a different height: the engine sizes them
   individually and our generic .chakra-button padding stacks on top.
   Pin every pill in that row to one 56px height, content centered.
   The hero search card is excluded (its pill owns its sizing, and the
   old build keeps its promo chip inside .cb-search-card). Headless
   sessions still get the old build, so — like the icon recolor above —
   these match generously on testid/class/aria hints. */
@media (min-width: 769px) {
  #cb-bookingengine button[data-testid*="promo" i]:not(.cb-search-card *),
  #cb-bookingengine button[class*="promo" i]:not(.cb-search-card *),
  #cb-bookingengine button[aria-label*="promo" i]:not(.cb-search-card *),
  #cb-bookingengine button[data-testid*="filter" i]:not(.cb-search-card *),
  #cb-bookingengine button[class*="filter" i]:not(.cb-search-card *),
  #cb-bookingengine button[aria-label*="filter" i]:not(.cb-search-card *) {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    padding: 0 1.6rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.55rem !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    border-width: 1px !important;
    border-style: solid !important;
  }
  #cb-bookingengine [data-testid*="search-panel-date-picker"]:not(button):not(.cb-search-card *) {
    height: 56px !important;
    min-height: 56px !important;
    max-height: 56px !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  #cb-bookingengine button[data-testid*="date-picker-checkin"]:not(.cb-search-card *),
  #cb-bookingengine button[data-testid*="date-picker-checkout"]:not(.cb-search-card *) {
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 1.3rem !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}
/* Engine layout wrappers — grey by default without picker colors */
#cb-bookingengine-main-layout,
#cb-bookingengine #main-content,
#cb-bookingengine #content-layout {
  background: var(--soho-paper) !important;
  background-color: var(--soho-paper) !important;
}


/* ─────────────────────────────────────────────────────────────────────
   SHOPPING CART — empty-state centering
   DOM (verified from cb-discover/5-guest-flow/b-accommodations.html):
     <div class="cb-card cb-shopping-cart cb-shopping-cart-accommodations"
          data-testid="shopping-cart-card">
       <div class="chakra-stack" data-testid="shopping-cart-card-empty">
         <div class="cb-image-fallback">…bed svg…</div>
         <p>No Accommodations Added</p>
       </div>
     </div>
   Card stretches to match the accommodations column on the left, so the
   placeholder pins to the top. Make the card a flex column and let the
   empty stack fill + center inside it.
   ───────────────────────────────────────────────────────────────────── */
#cb-bookingengine [data-testid="shopping-cart-card"],
#cb-bookingengine .cb-shopping-cart {
  display: flex !important;
  flex-direction: column !important;
  /* Strip the outer cb-card frame on the Reservation Summary so only the
     inner Continue + Secure Payment pill carries a container. */
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#cb-bookingengine [data-testid="shopping-cart-card"]:hover,
#cb-bookingengine .cb-shopping-cart:hover {
  border-color: transparent !important;
}

/* Continue / Book Now submit buttons throughout the checkout flow.
   Match the look of the Add button's idle/disabled state: warm cream-tan
   fill + muted text. Hover lifts to gold. */
#cb-bookingengine .cb-shopping-cart-confirm-button,
#cb-bookingengine button.chakra-button[type="submit"],
#cb-bookingengine [class*="ConfirmButton"],
#cb-bookingengine [class*="confirm-button"]:not(.cb-search-button) {
  background: var(--soho-line) !important;
  background-color: var(--soho-line) !important;
  color: var(--soho-mute) !important;
  border: 1px solid var(--soho-line) !important;
  border-radius: 999px !important;
}
#cb-bookingengine .cb-shopping-cart-confirm-button:hover,
#cb-bookingengine button.chakra-button[type="submit"]:hover,
#cb-bookingengine [class*="ConfirmButton"]:hover,
#cb-bookingengine [class*="confirm-button"]:not(.cb-search-button):hover {
  background: var(--soho-gold) !important;
  background-color: var(--soho-gold) !important;
  color: var(--soho-paper) !important;
  border-color: var(--soho-gold) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -10px rgba(169,128,63,0.6) !important;
}
#cb-bookingengine [data-testid="shopping-cart-card-empty"] {
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  min-height: 320px !important;
}
#cb-bookingengine [data-testid="shopping-cart-card-empty"] .cb-image-fallback {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ─────────────────────────────────────────────────────────────────────
   PROPERTY-INFO GALLERY — full-viewport-width, square corners, 1/4 bigger
   Scoped to `.cb-property-info` only — room (accommodation) galleries
   keep the Cloudbeds default look.
   ───────────────────────────────────────────────────────────────────── */

/* Let the property-info card overflow visibly so the bleed escapes */
#cb-bookingengine .cb-property-info {
  overflow: visible !important;
}

/* Stretch the property gallery row to full viewport width */
#cb-bookingengine .cb-property-info .cb-imagelist {
  position: relative !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  overflow: hidden !important;
}

/* Drop the 8px rounded corners on every thumbnail wrapper */
#cb-bookingengine .cb-property-info .cb-imagelist,
#cb-bookingengine .cb-property-info .cb-imagelist [class^="d-"] {
  border-radius: 0 !important;
}

/* Keep Cloudbeds-default slide sizing (217×200, 16px gaps, object-fit:cover).
   Forced widths fought Swiper's 233px step. Letting Cloudbeds compute its
   own geometry is the only stable CSS-only outcome. */

/* Cart sidebar — left at Cloudbeds default. Shrinking it broke the cart
   contents (totals/Book Now hidden by Cloudbeds' responsive collapse). */

/* Room card image — 260px tall everywhere (landscape crop); the wider
   351px column + gap are DESKTOP-ONLY (see media query below) so narrow
   viewports, browser zoom and mobile fall back to Cloudbeds' native
   responsive sizing instead of overflowing / clipping the text column. */
#cb-bookingengine .cb-accommodation-card .cb-imagelist,
#cb-bookingengine .cb-accommodation-card .cb-imagelist > [class^="d-"],
#cb-bookingengine .cb-accommodation-card .cb-imagelist > [class^="d-"] > [class^="d-"],
#cb-bookingengine .cb-accommodation-card .cb-imagelist > [class^="d-"] > [class^="d-"] > [class^="d-"],
#cb-bookingengine .cb-accommodation-card .cb-imagelist > [class^="d-"] > [class^="d-"] > [class^="d-"] > [class^="d-"] {
  height: 260px !important;
  min-height: 260px !important;
}
#cb-bookingengine .cb-accommodation-card .cb-imagelist [class^="d-"]:has(> .cb-image),
#cb-bookingengine .cb-accommodation-card .cb-imagelist [class^="d-"]:has(> [class^="d-"] > .cb-image) {
  height: 260px !important;
}
/* Pin the image element itself to 260px, not 100% of a parent — the
   carousel JS re-stretches the slide wrapper tall after load, so a
   percentage height inherits the wrong number. A fixed height on the
   <img> can't be undone by the slider. */
#cb-bookingengine .cb-accommodation-card .cb-image {
  height: 260px !important;
  min-height: 260px !important;
  max-height: 260px !important;
  width: 100% !important;
  object-fit: cover !important;
}
/* Desktop only: widen the photo column to 351px and add a gap to the
   text column. Below 992px this doesn't apply, so the card stays fluid. */
@media (min-width: 992px) {
  #cb-bookingengine .cb-accommodation-card .cb-imagelist,
  #cb-bookingengine .cb-accommodation-card .cb-imagelist > [class^="d-"],
  #cb-bookingengine .cb-accommodation-card .cb-imagelist > [class^="d-"] > [class^="d-"],
  #cb-bookingengine .cb-accommodation-card .cb-imagelist > [class^="d-"] > [class^="d-"] > [class^="d-"],
  #cb-bookingengine .cb-accommodation-card .cb-imagelist > [class^="d-"] > [class^="d-"] > [class^="d-"] > [class^="d-"] {
    width: 351px !important;
    min-width: 351px !important;
  }
  #cb-bookingengine .cb-accommodation-card .cb-imagelist [class^="d-"]:has(> .cb-image),
  #cb-bookingengine .cb-accommodation-card .cb-imagelist [class^="d-"]:has(> [class^="d-"] > .cb-image) {
    width: 351px !important;
  }
  /* The groove: the photo sits in a flex row, wrapped in a div that
     shrink-wraps narrower than the forced 351px image (so the image
     overflows its wrapper and swallows the flex gap). Put the width AND
     the right margin on that wrapper — the div that directly holds
     .cb-imagelist — so the flex row genuinely pushes the text column
     over. Targeting the wrapper by structure (:has) keeps it working
     across Cloudbeds' hashed .d-* class churn. */
  #cb-bookingengine .cb-accommodation-card div:has(> .cb-imagelist) {
    width: 351px !important;
    min-width: 351px !important;
    margin-right: 14px !important;   /* +16px flex-row gap = ~30px groove */
  }
}

/* Carousel pagination dots — realign after the 260/351 photo resize.
   The blind [class^="d-"] sizing above also stretches the absolute
   dot-overlay subtree (dots carry no .cb-image), which packed the dots
   top-left.

   Root cause of the off-centre "runaway" bar: Cloudbeds' DYNAMIC bullets
   fade the trailing dots to half- (4px) then zero-width, so the bar's
   geometric centre no longer matches the visible-dot centre. A static
   translateX nudge only corrects ONE slide — every other slide (and the
   newer LD-flagged build) drifts left. Fix instead by KILLING the fade:
   force every dot slot + leaf to a uniform 8px box with uniform pitch, so
   a plain flex `justify-content:center` bar self-centres on every slide and
   every build with no magic offset. (~7 photos -> ~112px, fits the 351px
   photo; opacity still marks the active dot.)

   Tier 1 — structural bar wrapper (no-image d- that nests a deeper d-):
     span the full photo width, centre + bottom-align. */
/* Tier 1 — every structural wrapper in the dot subtree (no-image d- that nests
   a deeper d-). Un-stretch it (the blind 260px above packed it top-left), span
   the photo width, centre + bottom-align.
   RUNAWAY ROOT CAUSE (measured 2026-08-07, probe-dots-carrier.mjs): Cloudbeds
   slides the dynamic-bullet window NOT by transform but by animating an inner
   wrapper's `position:relative; left` — 0 on slides 1-4, then -20px, -40px past
   the 4th photo, dragging the whole cluster left. This selector matches that
   inner wrapper too (it has dot grandchildren), so `left:0 / right:auto` pins
   the window and kills the drift on every slide. Verified drift=0 across all 7
   slides at 1440. */
#cb-bookingengine .cb-accommodation-card .cb-imagelist [class^="d-"]:not(:has(.cb-image)):has([class^="d-"] [class^="d-"]) {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  flex: 0 0 auto !important;
  justify-content: center !important;
  align-items: flex-end !important;
  transform: none !important;
  left: 0 !important;
  right: auto !important;
  gap: 0 !important;
}
/* Tier 2 — per-dot slot (no-image d- whose only d- is the leaf): pin to a
   uniform 8px box + 4px side margin so the pitch is 16px, self-contained
   (not reliant on Cloudbeds' build-specific flex gap). */
#cb-bookingengine .cb-accommodation-card .cb-imagelist [class^="d-"]:not(:has(.cb-image)):has(> [class^="d-"]):not(:has([class^="d-"] [class^="d-"])) {
  width: 8px !important;
  min-width: 8px !important;
  max-width: 8px !important;
  flex: 0 0 8px !important;
  margin: 0 4px !important;
  transform: none !important;
  justify-content: center !important;
  align-items: flex-end !important;
}
/* Tier 3 — the leaf dot itself (innermost, no d- child): pin to 8px, no
   margin, so it sits dead-centre in its slot. Overriding width here is what
   actually defeats Cloudbeds' 4px/0px fade -> equal dots -> auto-centre, so the
   visible cluster no longer drifts left as you page past the 4th photo. */
#cb-bookingengine .cb-accommodation-card .cb-imagelist [class^="d-"]:not(:has(.cb-image)):not(:has([class^="d-"])) {
  width: 8px !important;
  min-width: 8px !important;
  max-width: 8px !important;
  height: 8px !important;
  flex: 0 0 8px !important;
  margin: 0 !important;
  transform: none !important;
}

/* Carousel nav arrows "run away" vertically as you page slides: Cloudbeds
   pins Prev/Next with a fixed `top` (~110px) plus a 0.2s transition, so when a
   slide re-stretches the photo wrapper to a different height the arrow lands
   at a new spot and animates there. The arrows' offset-parent IS the photo
   box, so anchor them to its true centre with top:50% + translateY(-50%)
   (height-agnostic — correct whether the photo is 260px in the results card
   or full-size in the details modal) and drop the position transition. Scoped
   to .cb-imagelist / .chakra-modal so the date-picker's own Prev/Next are
   untouched; the modal carousel is portalled to <body> but this stylesheet is
   global, so the modal selector still reaches it. */
.cb-imagelist [aria-label="Previous"],
.cb-imagelist [aria-label="Next"],
.chakra-modal__content [aria-label="Previous"],
.chakra-modal__content [aria-label="Next"] {
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  transition: none !important;
}


/* ─────────────────────────────────────────────────────────────────────
   HERO IMAGE — full-res bypass of Cloudbeds' CDN cap.
   Cloudbeds recompresses every upload to ≤1000px tall (the hero ships as
   1105×1000 stretched across the full viewport — visibly mushy on retina).
   `content: url(...)` swaps the rendered image for our Drive original
   (2533px wide) without touching the DOM.
   FALLBACK ONLY: the server route (/cb-inject/:file, cbInjectCss.js)
   appends the same rule with the CURRENT Feature image from the push
   modal; it cascades after this one and wins. This static copy only
   shows if that lookup fails.
   ───────────────────────────────────────────────────────────────────── */
#cb-bookingengine img[src*="feature-image~~"] {
  content: url('https://lh3.googleusercontent.com/d/10vlyPmzOS1CLzPiFnU7N0n5yRXxhpfdY=w2560');
  object-fit: cover !important;
}

/* ─────────────────────────────────────────────────────────────────────
   WIDEN THE RESULTS COLUMN — outer wrapper, not the cards.
   The card max-width (1920) above cannot take effect unless the wrapper
   that HOLDS the cards is at least that wide. In the newer Chakra build
   the accommodation list sits inside a Chakra `Container` whose maxW token
   caps ~1280px, so the cards never reach their own max — the whole column
   just looks narrow. Lift every plausible outer wrapper to match. Map +
   leaflet containers are excluded so the map doesn't blow out.
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 992px) {
  #cb-bookingengine .chakra-container,
  #cb-bookingengine [class*="chakra-container"],
  #cb-bookingengine main,
  #cb-bookingengine [role="main"],
  #cb-bookingengine [class*="ContentWrapper"],
  #cb-bookingengine [class*="content-wrapper"],
  #cb-bookingengine [class*="ResultsList"],
  #cb-bookingengine [class*="results-list"],
  #cb-bookingengine [class*="AccommodationList"],
  #cb-bookingengine [class*="accommodation-list"] {
    max-width: none !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  /* Full-bleed: the Cloudbeds wrapper that directly holds each card carries a
     16px side padding (d-* hashed class, churns across builds). Target it by
     structure — the div whose direct child is our styled card — and zero the
     inline gutter so the card truly reaches the viewport edges. */
  #cb-bookingengine div:has(> .chakra-card),
  #cb-bookingengine div:has(> .cb-card) {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Rename the rate plan "Standard Rate" (Czech: "Standardní sazba") to "Full
   flexible" — the single plan is fully refundable, so that name is clearer.
   Cloudbeds rejects <script> in the Custom Meta Tags field, so JS text-swap is
   impossible; instead zero the native text and inject the new label via
   ::after. cb-rate-plan-title-text is the Cloudbeds-guaranteed hook on the
   room-card title <h4> (hashed d-* classes churn per build). Fonts match the
   native title (16px / 600 / Poppins, colour #1E2330). */
#cb-bookingengine .cb-rate-plan-title-text {
  font-size: 0 !important;
}
/* Put the label INSIDE the <button> (the element that opens the rate-details
   modal) via button::after — a pseudo on the button is part of its hit area, so
   "Full flexible" stays clickable. (::after on the outer <h4> was outside the
   button → only the chevron was clickable.) */
#cb-bookingengine .cb-rate-plan-title-text button::after {
  content: "Full flexible";
  font-family: Poppins, sans-serif;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.2;
  color: rgb(30, 35, 48) !important;
}

/* NEW-BUILD ONLY (LaunchDarkly, Leo's session): that build renders the rate-plan
   title UNDERLINED, with an expand chevron BEFORE the label and the whole thing
   indented (see cloudbeds-engine-ab-build note). The OLD build — all Playwright
   can ever capture — has no chevron/underline and no "Fully refundable until…"
   line, so these rules are authored BLIND against the screenshot. They are inert
   on the old build (a flex row / row-reverse over one child = no visual change),
   so shipping them is safe either way.
   Goal: (1) drop the underline, (2) put the chevron AFTER the label, (3) left-
   align the label with the "Fully refundable until <date>" line below it.
   Covers BOTH possible DOMs — chevron as a sibling of the button under the <h4>,
   and chevron nested inside the button — because we can't see which the new build
   uses. */
#cb-bookingengine .cb-rate-plan-title-text,
#cb-bookingengine .cb-rate-plan-title-text button,
#cb-bookingengine .cb-rate-plan-title-text button::after {
  text-decoration: none !important;
}
/* STRUCTURE-AGNOSTIC reorder. A first attempt targeted the chevron directly
   (> svg, > [data-icon], > span:has(svg)); the underline dropped but the chevron
   stayed left, proving the chevron element isn't any of those (could be an <i>
   icon font, a deeper-wrapped svg, a background-image span, etc). So instead of
   naming the chevron, we anchor on the ONE element we know — the <button> that
   carries the "Full flexible" label — force it first, and push EVERYTHING ELSE
   to the end. This reorders the chevron whatever tag it is.
   Case A (chevron is a sibling of <button> under the <h4>): */
#cb-bookingengine .cb-rate-plan-title-text {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 6px;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
#cb-bookingengine .cb-rate-plan-title-text > * { order: 2 !important; margin: 0 !important; }
#cb-bookingengine .cb-rate-plan-title-text > button { order: 1 !important; }
/* Case B (chevron is nested INSIDE the button, alongside our ::after label): make
   the button a flex row, force the label (::after) first and every real child
   — i.e. the chevron — after it. */
#cb-bookingengine .cb-rate-plan-title-text button {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px;
  padding-left: 0 !important;
}
#cb-bookingengine .cb-rate-plan-title-text button > * { order: 2 !important; margin: 0 !important; }
#cb-bookingengine .cb-rate-plan-title-text button::after { order: 1 !important; }
/* Case C: the chevron is a CSS PSEUDO (::before) on the <h4> or the <button>.
   `order` still moves a pseudo when its parent is a flex container (both are),
   and `::before` defaults to rendering first — which pushes the label right and
   looks like a fixed indent. Force any ::before to the very end so the label
   sits flush-left and the chevron trails it. Our label lives on ::after, so this
   never touches it. */
#cb-bookingengine .cb-rate-plan-title-text::before,
#cb-bookingengine .cb-rate-plan-title-text button::before {
  order: 3 !important;
  margin: 0 !important;
}

/* Same label in the Reservation Summary / cart line (data-testid
   shopping-cart-item-description-accommodation-*). Match its native style
   (14px / 400 / Poppins, colour #596273). */
#cb-bookingengine .shopping-item-description {
  font-size: 0 !important;
}
#cb-bookingengine .shopping-item-description::after {
  content: "Full flexible";
  font-family: Poppins, sans-serif;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.5;
  color: rgb(89, 98, 115) !important;
}

/* Rate-details popup header ALSO reads "Standard Rate". The modal is portaled to
   <body> (outside #cb-bookingengine), so it can't be engine-scoped. The
   room-details modal shares the same header class (.chakra-modal__header
   .cb-text) but its <h2> is EMPTY, so :not(:empty) matches only the populated
   (rate) header. Native title = 22.5px / 600 / Poppins / #1E2330.
   Caveat: any other flow modal with a non-empty title using this class would
   also be relabelled — none seen on the results page; revisit if checkout shows
   a wrong title. */
.chakra-modal__header .cb-text:not(:empty) {
  font-size: 0 !important;
}
.chakra-modal__header .cb-text:not(:empty)::after {
  content: "Full flexible";
  font-family: Poppins, sans-serif;
  font-size: 22.5px !important;
  font-weight: 600 !important;
  line-height: 1.2;
  color: rgb(30, 35, 48) !important;
}

/* CZ-only: hide the redundant ENGLISH cancellation policy. On the Czech engine
   Cloudbeds renders the "Storno podmínky hotelu" policy block with the whole
   policy TWICE — English first, Czech second (both [data-be-text]). We keep the
   Czech copy and hide the English duplicate.
   The policy appears in TWO modals: the standalone policy modal (opened via the
   "Fully refundable until…" chevron) AND the rate-details modal (opened via the
   "Full flexible" title). The standalone one has aria-label="Storno podmínky
   hotelu"; the rate-details one has aria-label=null — so we scope to ANY
   .chakra-modal__content and gate on Czech via html[lang="cs"] instead (the
   engine sets lang=cs on /cs/). This never touches the English engine.
   Hashed d-* classes churn per build, so match on structure + stable hooks only:
   - guarantee + cancellation blocks = the non-last [data-be-text] children of the
     stack (Czech is always the last child → kept);
   - the "Fully refundable until <date>" summary line (a <p>[data-be-text] inside
     the stack; English, no Czech counterpart, so hide it too).
   Section headings ("Storno podmínky hotelu", "Poplatek za dalšího hosta") are
   NOT inside these stacks, so they survive.
   Verified live 2026-08-07 (test-policy-hide-css.mjs, test-ratemodal-hide.mjs):
   both modals -> EN summary/guarantee/cancellation display:none, Czech copy +
   headings retained.

   IMPORTANT: rule 2 is depth-limited to `.chakra-stack > div > p` (the "Fully
   refundable until <date>" summary sits exactly there). It must NOT be the loose
   `.chakra-stack p` — that also matched the "free cancellation no longer
   available" warning box (its text sits deeper, under the icon wrapper) and blanked
   it out. See the warning-box rule below. */
html[lang="cs"] .chakra-modal__content .chakra-stack > .chakra-text.cb-text[data-be-text]:not(:last-child),
html[lang="cs"] .chakra-modal__content .chakra-stack > div > p.chakra-text.cb-text[data-be-text] {
  display: none !important;
}

/* CZ text for the "Free cancellation no longer available" warning box. This box
   replaces the policy summary when check-in is inside the non-refundable window.
   Cloudbeds renders it ENGLISH-ONLY (no Czech), so we blank the English and inject
   Czech via ::after. The wrapper classes are hashed, so anchor on the stable
   FontAwesome triangle-exclamation icon: the two text lines live in the div that is
   the icon-div's next sibling. Two lines: title + "contact the property".
   (Only the modal box is handled — the room-card chevron shares its element with the
   date-bearing "Fully refundable until <date>" label, which can't be ::after-swapped.)
   Verified live 2026-08-07 (test-warning-cz.mjs). */
html[lang="cs"] .chakra-modal__content div:has(> div > span > svg[data-icon="triangle-exclamation"]) + div p.chakra-text.cb-text[data-be-text] {
  font-size: 0 !important;
}
html[lang="cs"] .chakra-modal__content div:has(> div > span > svg[data-icon="triangle-exclamation"]) + div p.chakra-text.cb-text[data-be-text]:first-child::after {
  content: "Bezplatné zrušení již není dostupné";
  font-family: Poppins, sans-serif;
  font-size: 15px !important;
  font-weight: 600;
  color: rgb(30, 35, 48);
}
html[lang="cs"] .chakra-modal__content div:has(> div > span > svg[data-icon="triangle-exclamation"]) + div p.chakra-text.cb-text[data-be-text]:last-child::after {
  content: "Pro více informací kontaktujte ubytovací zařízení.";
  font-family: Poppins, sans-serif;
  font-size: 14px !important;
  font-weight: 400;
  color: rgb(89, 98, 115);
}

/* CZ-only: translate the room-type amenity list ("Vybavení ubytování"). The 7
   Cloudbeds-recognised amenities are auto-translated by Cloudbeds; our CUSTOM
   chips (pushed as free text) have no per-language storage, so they render
   English on every engine. We can't push Czech without also changing the EN
   engine (custom amenities are one shared field), so relabel via ::after — same
   trick as the cancellation-warning block above. Each chip wrapper carries a
   STABLE data-testid="property-amenity-<verbatim label>" (NOT a hashed d-* class),
   and the label text is a child p[data-be-text]; the ✓ icon is a sibling, so it
   survives. Gated html[lang="cs"] → the English engine is untouched. Rules for
   chips not present on a given unit are simply inert. Font matched to the native
   list item (Hanken Grotesk 14px/400, rgb(29,31,27)/21px). Verified live via
   probe-amenity-dom.mjs 2026-08-25. NB: if a custom chip's EN label changes, its
   testid changes — update the selector to match. */
html[lang="cs"] [data-testid="property-amenity-Bath tub"] p[data-be-text],
html[lang="cs"] [data-testid="property-amenity-Step-free access"] p[data-be-text],
html[lang="cs"] [data-testid="property-amenity-EV charger"] p[data-be-text],
html[lang="cs"] [data-testid="property-amenity-Elevator"] p[data-be-text],
html[lang="cs"] [data-testid="property-amenity-Free parking"] p[data-be-text],
html[lang="cs"] [data-testid="property-amenity-Workspace"] p[data-be-text],
html[lang="cs"] [data-testid="property-amenity-Dishwasher"] p[data-be-text],
html[lang="cs"] [data-testid="property-amenity-Dryer"] p[data-be-text],
html[lang="cs"] [data-testid="property-amenity-Heating"] p[data-be-text],
html[lang="cs"] [data-testid="property-amenity-Hot water"] p[data-be-text],
html[lang="cs"] [data-testid="property-amenity-Iron"] p[data-be-text],
html[lang="cs"] [data-testid="property-amenity-Kitchen"] p[data-be-text],
html[lang="cs"] [data-testid="property-amenity-Washer"] p[data-be-text],
html[lang="cs"] [data-testid="property-amenity-High chair"] p[data-be-text],
html[lang="cs"] [data-testid="property-amenity-Balcony"] p[data-be-text],
html[lang="cs"] [data-testid="property-amenity-BBQ"] p[data-be-text],
html[lang="cs"] [data-testid="property-amenity-Carbon-monoxide detector"] p[data-be-text],
html[lang="cs"] [data-testid="property-amenity-Fire extinguisher"] p[data-be-text],
html[lang="cs"] [data-testid="property-amenity-Smoke alarm"] p[data-be-text] {
  font-size: 0 !important;
}
html[lang="cs"] [data-testid="property-amenity-Bath tub"] p[data-be-text]::after,
html[lang="cs"] [data-testid="property-amenity-Step-free access"] p[data-be-text]::after,
html[lang="cs"] [data-testid="property-amenity-EV charger"] p[data-be-text]::after,
html[lang="cs"] [data-testid="property-amenity-Elevator"] p[data-be-text]::after,
html[lang="cs"] [data-testid="property-amenity-Free parking"] p[data-be-text]::after,
html[lang="cs"] [data-testid="property-amenity-Workspace"] p[data-be-text]::after,
html[lang="cs"] [data-testid="property-amenity-Dishwasher"] p[data-be-text]::after,
html[lang="cs"] [data-testid="property-amenity-Dryer"] p[data-be-text]::after,
html[lang="cs"] [data-testid="property-amenity-Heating"] p[data-be-text]::after,
html[lang="cs"] [data-testid="property-amenity-Hot water"] p[data-be-text]::after,
html[lang="cs"] [data-testid="property-amenity-Iron"] p[data-be-text]::after,
html[lang="cs"] [data-testid="property-amenity-Kitchen"] p[data-be-text]::after,
html[lang="cs"] [data-testid="property-amenity-Washer"] p[data-be-text]::after,
html[lang="cs"] [data-testid="property-amenity-High chair"] p[data-be-text]::after,
html[lang="cs"] [data-testid="property-amenity-Balcony"] p[data-be-text]::after,
html[lang="cs"] [data-testid="property-amenity-BBQ"] p[data-be-text]::after,
html[lang="cs"] [data-testid="property-amenity-Carbon-monoxide detector"] p[data-be-text]::after,
html[lang="cs"] [data-testid="property-amenity-Fire extinguisher"] p[data-be-text]::after,
html[lang="cs"] [data-testid="property-amenity-Smoke alarm"] p[data-be-text]::after {
  font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  font-size: 14px !important;
  font-weight: 400;
  color: rgb(29, 31, 27);
  line-height: 21px;
}
html[lang="cs"] [data-testid="property-amenity-Bath tub"] p[data-be-text]::after { content: "Vana"; }
html[lang="cs"] [data-testid="property-amenity-Step-free access"] p[data-be-text]::after { content: "Bezbariérový přístup"; }
html[lang="cs"] [data-testid="property-amenity-EV charger"] p[data-be-text]::after { content: "Nabíjení pro elektromobily"; }
html[lang="cs"] [data-testid="property-amenity-Elevator"] p[data-be-text]::after { content: "Výtah"; }
html[lang="cs"] [data-testid="property-amenity-Free parking"] p[data-be-text]::after { content: "Parkování zdarma"; }
html[lang="cs"] [data-testid="property-amenity-Workspace"] p[data-be-text]::after { content: "Pracovní kout"; }
html[lang="cs"] [data-testid="property-amenity-Dishwasher"] p[data-be-text]::after { content: "Myčka nádobí"; }
html[lang="cs"] [data-testid="property-amenity-Dryer"] p[data-be-text]::after { content: "Sušička"; }
html[lang="cs"] [data-testid="property-amenity-Heating"] p[data-be-text]::after { content: "Vytápění"; }
html[lang="cs"] [data-testid="property-amenity-Hot water"] p[data-be-text]::after { content: "Teplá voda"; }
html[lang="cs"] [data-testid="property-amenity-Iron"] p[data-be-text]::after { content: "Žehlička"; }
html[lang="cs"] [data-testid="property-amenity-Kitchen"] p[data-be-text]::after { content: "Vybavená kuchyň"; }
html[lang="cs"] [data-testid="property-amenity-Washer"] p[data-be-text]::after { content: "Pračka"; }
html[lang="cs"] [data-testid="property-amenity-High chair"] p[data-be-text]::after { content: "Dětská jídelní židlička na vyžádání"; }
html[lang="cs"] [data-testid="property-amenity-Balcony"] p[data-be-text]::after { content: "Balkon"; }
html[lang="cs"] [data-testid="property-amenity-BBQ"] p[data-be-text]::after { content: "Gril"; }
html[lang="cs"] [data-testid="property-amenity-Carbon-monoxide detector"] p[data-be-text]::after { content: "Detektor oxidu uhelnatého"; }
html[lang="cs"] [data-testid="property-amenity-Fire extinguisher"] p[data-be-text]::after { content: "Hasicí přístroj"; }
html[lang="cs"] [data-testid="property-amenity-Smoke alarm"] p[data-be-text]::after { content: "Detektor kouře"; }

/* EN engine: enrich two custom chips whose plain label is thinner than the Czech.
   Same ::after hook, gated html[lang="en"] so the CZ rules above are unaffected.
   (The custom chip is pushed as free text, so its testid label is English on the
   EN engine too — same property-amenity-<label> hook.) */
html[lang="en"] [data-testid="property-amenity-Kitchen"] p[data-be-text],
html[lang="en"] [data-testid="property-amenity-High chair"] p[data-be-text] {
  font-size: 0 !important;
}
html[lang="en"] [data-testid="property-amenity-Kitchen"] p[data-be-text]::after,
html[lang="en"] [data-testid="property-amenity-High chair"] p[data-be-text]::after {
  font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  font-size: 14px !important;
  font-weight: 400;
  color: rgb(29, 31, 27);
  line-height: 21px;
}
html[lang="en"] [data-testid="property-amenity-Kitchen"] p[data-be-text]::after { content: "Fully equipped kitchen"; }
html[lang="en"] [data-testid="property-amenity-High chair"] p[data-be-text]::after { content: "High chair on request"; }

/* Brand gold: match the engine's primary gold buttons to our site CTA colour.
   Cloudbeds' colour picker paints them #A9803F (rgb 169,128,63) — duller than
   our REZERVOVAT / .op-btn--primary gold #C88D0E (rgb 200,141,14). Force our
   brand gold on both gold CTAs: the per-rate "Přidat" (add) pill and the
   "Objevte další možnosti" (discover-more) bar. Anchor on stable data-testid
   hooks; hashed d-* classes churn per build. Language-agnostic (no lang gate).
   Verified live via probe-gold-swap.mjs 2026-08-25. */
#cb-bookingengine [data-testid^="rate-plan-guest-quantity-select-"],
#cb-bookingengine [data-testid="discover-more-options-button"] {
  background-color: #c88d0e !important;
  background-image: none !important;
}
#cb-bookingengine [data-testid^="rate-plan-guest-quantity-select-"]:hover,
#cb-bookingengine [data-testid="discover-more-options-button"]:hover {
  background-color: #b47d0c !important;
}