/* SOHO Suites — Cloudbeds Booking Engine V3 (React + Chakra UI) override.
 *
 * Loaded via Booking Engine → Customize → Custom Meta Tags V3
 * (set by tools/cb-booking-customize.js).
 */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;1,6..96,400&family=Jost:wght@300;400;500;600&display=swap');

:root {
  --soho-ink:       #0F0E0C;
  --soho-ink-soft:  #2A2724;
  --soho-paper:     #FAF8F3;
  --soho-paper-2:   #F2EEE6;
  --soho-line:      #D8D2C7;
  --soho-mute:      #8A8378;
  --soho-gold:      #B08642;
  --soho-gold-deep: #8C6A33;
  --soho-serif:     'Bodoni Moda', 'Times New Roman', serif;
  --soho-sans:      'Jost', 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) {
  .chakra-stack[data-orientation="horizontal"]:has(input),
  form[class*="search"], div[class*="SearchBar"], div[class*="searchBar"] {
    background: rgba(250,248,243,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: 1080px !important;
    position: relative;
    z-index: 2;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   HEADINGS — Bodoni Moda 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: 'Bodoni Moda', 'Times New Roman', 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(1.5rem, 3vw, 2.5rem) !important;
  margin: 1.25rem auto !important;
  width: calc(100% - 3rem) !important;
  max-width: 1440px !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(176,134,66,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(176,134,66,0.18) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   MAP — warm paper Leaflet tint matching the portal site (sohosuites
   .digitalpa.tech). Portal uses CARTO light tiles with a sepia filter
   on a class-named layer; here Cloudbeds owns the tile source/JS so we
   apply the same filter to the whole tile pane. Pixel-level filter
   only — markers, controls, popups are reverted so they stay sharp.
   ───────────────────────────────────────────────────────────────────── */
.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;
}

/* Warm paper tint on the tile pane only — same recipe as
   shared/styles/pages/home.css .tiles-base. */
.leaflet-tile-pane {
  filter: sepia(.5) saturate(.55) hue-rotate(-8deg) contrast(.94) brightness(1.03) !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(15,14,12,.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>");
}

/* Keep markers, controls, popups, SVG overlays unfiltered/sharp. */
.leaflet-marker-icon, .leaflet-marker-shadow,
.leaflet-control, .leaflet-control *,
.leaflet-popup-pane, .leaflet-overlay-pane svg,
.leaflet-control-attribution, .leaflet-control-attribution * {
  all: revert;
}

/* Attribution hidden per user request — note: violates OSM/Leaflet ToS. */
.leaflet-control-attribution {
  display: none !important;
}
.leaflet-control-zoom {
  border: 0 !important;
  box-shadow: 0 8px 24px -10px rgba(15,14,12,.25) !important;
  margin: 14px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  background: #fff !important;
}
.leaflet-control-zoom a {
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  background: #fff !important;
  color: var(--soho-ink) !important;
  border: 0 !important;
  font: 300 22px/36px "SF Pro Display", system-ui, sans-serif !important;
  transition: background .2s, color .2s !important;
}
.leaflet-control-zoom a:hover {
  background: var(--soho-gold) !important;
  color: #fff !important;
}
.leaflet-control-zoom a.leaflet-disabled {
  color: var(--soho-mute) !important;
  background: var(--soho-paper) !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: 1080px !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(1.5rem, 3vw, 2.5rem) !important;
  margin: 1.25rem auto !important;
  width: calc(100% - 3rem) !important;
  max-width: 1440px !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 reverted to Cloudbeds native (2026-05-25). All .cb-header,
   .cb-property-logo, .cb-property-name, .cb-language-selector,
   .cb-currency-selector, .cb-search-card (compact), and focus-ring rules
   removed in favor of the default Cloudbeds engine header. */

/* ─────────────────────────────────────────────────────────────────────
   Mobile header rules also removed alongside the desktop ones — native
   Cloudbeds handles responsive layout. */


/* ─────────────────────────────────────────────────────────────────────
   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(176,134,66,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 — bump height only. Forcing width overlaps slides
   (Cloudbeds' fixed carousel step). Height has no such constraint. */
#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: 400px !important;
  min-height: 400px !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: 400px !important;
}
#cb-bookingengine .cb-accommodation-card .cb-image {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
}