/* ═════════════════════════════════════════════════════════════════════════
   MODERN PREMIUM OVERLAY — Sanddune Booking Engine
   Loaded LAST by _Layout so it wins the specificity war against the
   older per-page CSS (site/room/contact/pay/payment/date). We're keeping
   every existing class name + ID so the JavaScript hooks — .lblPrice,
   .lblRoomName, .Booking_OutReference, #startDate, .btnContinue, etc. —
   all keep working. Nothing here is a rewrite; it's a polish layer.
   ═════════════════════════════════════════════════════════════════════════ */

/* ═══ 1. DESIGN TOKENS ═══════════════════════════════════════════════════ */
:root {
  --sd-ink:        #14171b;
  --sd-ink-2:      #2a2f36;
  --sd-body:       #4b515a;
  --sd-muted:      #7a828d;
  --sd-muted-2:    #a5adb8;
  --sd-line:       #ece7dc;
  --sd-line-2:     #f4efe3;
  --sd-paper:      #faf7f1;   /* off-white with warm undertone */
  --sd-cream:      #f5ecd7;
  --sd-cream-lt:   #faf5e6;
  --sd-white:      #ffffff;
  --sd-gold:       #b99d75;   /* keep the existing brand accent */
  --sd-gold-dk:    #96794e;
  --sd-gold-lt:    #e1cea8;
  --sd-emerald:    #16a34a;
  --sd-danger:     #b91c1c;
  --sd-danger-lt:  #fde8e8;

  --sd-shadow-sm:  0 1px 2px rgba(20,23,27,.06), 0 1px 1px rgba(20,23,27,.04);
  --sd-shadow-md:  0 6px 18px -6px rgba(20,23,27,.10), 0 2px 4px rgba(20,23,27,.05);
  --sd-shadow-lg:  0 24px 60px -20px rgba(20,23,27,.20), 0 4px 12px rgba(20,23,27,.06);
  --sd-shadow-gold: 0 10px 26px -6px rgba(185,157,117,.35);

  --sd-radius-sm: 8px;
  --sd-radius:    12px;
  --sd-radius-lg: 18px;

  --sd-font-serif: 'Playfair Display','Marcellus','Georgia','Times New Roman',serif;
  --sd-font-sans:  'Jost','Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
}

/* ═══ 2. BASE ═══════════════════════════════════════════════════════════ */
html, body {
  background: var(--sd-paper);
  color: var(--sd-ink);
  font-family: var(--sd-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 15px;
  line-height: 1.55;
}
/* Force block layout on <body>. Legacy page CSS (date.css / contact.css /
   payment.css / pay.css / room.css) all declare `body { display: flex }`
   for their old single-column shell — without this override the new
   <footer> outside .layout-div gets pulled next to the content as a
   flex-row sibling. `html body` is used so we beat the .css files that
   load AFTER modern.css from inside individual views. */
html body {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Marcellus stays available for accents; the primary serif for premium
   headlines is Playfair (loaded in Layout). .marcellus keeps its class
   name but gets a small letterspacing bump for a more refined look. */
.marcellus { font-family: var(--sd-font-serif) !important; letter-spacing: -.2px; }
.jost      { font-family: var(--sd-font-sans) !important; }

/* Modern container — the legacy .container is 80% width which looks
   thin at very wide viewports. Cap it at 1240px for a tighter,
   editorial feel. */
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }

@media (max-width: 640px) {
  html, body { font-size: 14.5px; }
  .container { padding: 0 16px; }
}

/* ═══ 3. LAYOUT SHELL ═══════════════════════════════════════════════════ */
/* Kill the legacy border-radius on the whole header/footer strips —
   full-width bars look far more premium than "cards on a page". */
.layout-div { min-height: 100vh; display: flex; flex-direction: column; }
.layout-div .header, .layout-div .footer { border-radius: 0 !important; }
.layout-div .content, .layout-div .content-parent { flex: 1; }

/* ═══ 4. (No header — this site embeds inside a parent frame) ═══ */

/* ═══ 5. HERO / SECTION HEADS ═══════════════════════════════════════════ */
.sd-hero {
  background:
    linear-gradient(180deg, rgba(20,23,27,.02) 0%, rgba(20,23,27,0) 100%),
    var(--sd-paper);
  padding: 34px 0 22px;
  border-bottom: 1px solid var(--sd-line);
  margin-bottom: 4px;
}
/* When the property logo is included alongside the hero copy, the
   hero container becomes a two-column flex — logo on the left,
   eyebrow+headline+lead on the right. Stacks vertically on mobile
   so the logo sits above the copy on a phone. */
.sd-hero .container {
  display: flex;
  align-items: center;
  gap: 32px;
}
.sd-hero-brand {
  flex-shrink: 0;
  width: 140px; height: 140px;
  border-radius: 100px;
  background: #fff;
  border: 1px solid var(--sd-line);
  box-shadow: 0 12px 32px -14px rgba(20,23,27,.20), 0 2px 6px rgba(20,23,27,.05);
  display: flex; align-items: center; justify-content: center;
  padding: 16px; box-sizing: border-box;
  overflow: hidden;
}
.sd-hero-brand img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  display: block;
}
.sd-hero-body { flex: 1; min-width: 0; }
.sd-hero.sd-hero-centered .container {
  flex-direction: column; align-items: center; text-align: center;
}
.sd-hero.sd-hero-centered .sd-hero-body { text-align: center; }
@media (max-width: 720px) {
  .sd-hero .container { flex-direction: column; align-items: flex-start; gap: 20px; }
  /* Hide the property-logo chip on phones — the hero copy carries the
     property name already, and the chip eats vertical space above the
     fold on small screens. Desktop keeps it. */
  .sd-hero-brand { display: none !important; }
}
.sd-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; color: var(--sd-gold-dk);
  letter-spacing: 1.8px; text-transform: uppercase;
  margin-bottom: 12px;
}
.sd-hero-eyebrow::before { content: ''; width: 28px; height: 1.5px; background: var(--sd-gold); flex-shrink: 0; }
/* When an <i> or <svg> icon is placed BEFORE the eyebrow text, style
   it into a small round gold chip so it reads as a premium marker
   rather than a random Font Awesome glyph.
   NOTE: bare <svg> with `display: inline-flex` collapses to zero size
   in Safari (SVG is a replaced element, not an HTML flex container).
   Using inline-block with explicit fill/stroke resets + !important
   sizes so no legacy `svg{...}` rule in room.css can wipe it out. */
.sd-hero-eyebrow > i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--sd-cream); color: var(--sd-gold-dk);
  font-size: 11px; flex-shrink: 0;
}
.sd-hero-eyebrow > svg {
  display: inline-block !important;
  width: 26px !important; height: 26px !important;
  padding: 6px !important; box-sizing: border-box !important;
  border-radius: 50% !important;
  background: var(--sd-cream) !important;
  color: var(--sd-gold-dk) !important;
  fill: none !important;
  stroke: currentColor !important;
  vertical-align: middle;
  flex-shrink: 0;
  overflow: visible;
}
/* Filled icons (star, check-solid) use fill instead of stroke — this
   variant lets the individual view opt in with `data-fill`. */
.sd-hero-eyebrow > svg[data-fill="1"] {
  fill: currentColor !important;
  stroke: none !important;
}
.sd-hero h1 {
  font-family: var(--sd-font-serif);
  font-size: 34px; font-weight: 700; color: var(--sd-ink);
  margin: 0 0 10px; letter-spacing: -.6px; line-height: 1.15;
}
.sd-hero-lead {
  font-family: var(--sd-font-sans);
  font-size: 15px; color: var(--sd-body);
  max-width: 620px; margin: 0; line-height: 1.7;
}
@media (min-width: 900px) { .sd-hero { padding: 62px 0 36px; } .sd-hero h1 { font-size: 44px; } }

/* ═══ 6. STEP INDICATOR (breadcrumb) ═══════════════════════════════════ */
/* Elevate the existing .list-style-type breadcrumb: give it real
   visual weight, active-step highlighting, and hide the arrow images
   in favour of a CSS chevron so it always looks crisp. */
ul.list-style-type.pa-l-xs {
  padding: 14px 0 !important; margin: 0 0 22px !important;
  border-bottom: 1px solid var(--sd-line);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px !important;
  list-style: none;
}
ul.list-style-type.pa-l-xs li { display: inline-flex; align-items: center; padding: 0 !important; }
ul.list-style-type.pa-l-xs li a {
  font-family: var(--sd-font-sans) !important;
  font-size: 11.5px !important; font-weight: 600;
  color: var(--sd-muted) !important; letter-spacing: 1.2px !important;
  text-transform: uppercase; text-decoration: none !important;
  padding: 4px 2px;
}
ul.list-style-type.pa-l-xs li a.black,
ul.list-style-type.pa-l-xs li a.b-b-thick,
ul.list-style-type.pa-l-xs li a.bold {
  color: var(--sd-gold-dk) !important;
  border: none !important;
  position: relative;
}
ul.list-style-type.pa-l-xs li a.black::after,
ul.list-style-type.pa-l-xs li a.b-b-thick::after,
ul.list-style-type.pa-l-xs li a.bold::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--sd-gold);
}
ul.list-style-type.pa-l-xs .nav-icon {
  width: 10px !important; height: 10px !important;
  visibility: hidden; position: relative;
}
ul.list-style-type.pa-l-xs .nav-icon::after {
  content: '›'; visibility: visible; position: absolute; inset: 0;
  color: var(--sd-muted-2); font-size: 18px; line-height: .7;
  display: flex; align-items: center; justify-content: center;
}

/* Section titles used above forms and cards */
p.bold.font-size-m.marcellus,
p.bold.marcellus {
  font-family: var(--sd-font-serif) !important;
  font-size: 22px !important; font-weight: 700 !important;
  color: var(--sd-ink) !important; letter-spacing: -.3px !important;
  margin: 4px 0 14px !important; line-height: 1.2;
}

/* ═══ 7. CARDS & PANELS ═════════════════════════════════════════════════ */
.hidden-div,
.b-normal.round-l,
.b-normal.round-m {
  background: #fff !important;
  border: 1px solid var(--sd-line) !important;
  border-radius: var(--sd-radius-lg) !important;
  box-shadow: var(--sd-shadow-md);
  padding: 22px !important;
  transition: box-shadow .2s;
}
.b-normal { border-color: var(--sd-line) !important; }
.round-s, .round-m { border-radius: var(--sd-radius) !important; }
.round-l { border-radius: var(--sd-radius-lg) !important; }

.rommcomp.b-normal.round-m,
.room-comp.b-normal.round-m {
  padding: 0 !important;
}

/* The room cards on Rooms.cshtml
   Grid layout so the text column + image column always share the same
   height. Image is a fixed proportion of the card, text fills the rest
   with a consistent vertical rhythm: title → description → read-more →
   guests/price → Select. */
.rommcomp,
.room-comp {
  border: 1px solid var(--sd-line) !important;
  border-radius: var(--sd-radius-lg) !important;
  overflow: hidden !important;
  background: #fff !important;
  box-shadow: var(--sd-shadow-md);
  margin: 18px 0 !important;
  transition: transform .22s, box-shadow .22s;
  display: grid !important;
  grid-template-columns: 1fr;
  flex-wrap: nowrap !important;
  height: auto !important;
  min-height: 280px;
  position: relative;
}
@media (min-width: 720px) {
  .rommcomp, .room-comp { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }
}
.rommcomp:hover, .room-comp:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 44px -18px rgba(20,23,27,.16), 0 4px 12px rgba(20,23,27,.06);
}
/* Selected state — room.js adds .border-strong when a room is picked.
   Gold ring + gold-tinted shadow so the choice is unmistakable across
   the whole list without moving the card off its baseline. */
.rommcomp.border-strong, .room-comp.border-strong {
  border-color: var(--sd-gold) !important;
  box-shadow:
    0 0 0 3px rgba(185,157,117,.28),
    0 24px 44px -18px rgba(20,23,27,.18) !important;
  transform: translateY(-2px);
}
/* The green check badge room.js reveals on selection. Original CSS
   put it inline with default browser styles; force it to sit as a
   corner ribbon on the card so the highlight is obvious even before
   the border is scanned. */
.rommcomp .check-icon, .room-comp .check-icon {
  position: absolute !important;
  top: 12px; right: 12px;
  width: 34px; height: 34px;
  border-radius: 100px;
  background: #fff;
  box-shadow: 0 6px 14px -2px rgba(22,163,74,.45), 0 2px 4px rgba(0,0,0,.10);
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
  padding: 4px;
}
.rommcomp .check-icon svg, .room-comp .check-icon svg {
  width: 26px !important; height: 26px !important;
}
.rommcomp .img-div, .room-comp .img-div,
.rommcomp .img-div1, .room-comp .img-div1 {
  /* Grid cell — align to its track and clip anything that tries to
     paint past the card's rounded corners. `align-self: stretch` +
     `min-width: 0` are the two properties that stop the image column
     from bleeding wider than its column track under CSS Grid. */
  align-self: stretch;
  justify-self: stretch;
  min-width: 0 !important;
  max-height: none !important;
  height: 100% !important;
  width: 100% !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  cursor: pointer;
  order: 2;
  max-width: 100% !important;
  flex: none !important;
  /* Cream base sits behind the room photo — if the photo URL 404s or
     never loaded (empty PrimaryImage), the fallback below shows
     through instead of a plain white column. */
  background-color: var(--sd-cream-lt);
  position: relative;
}
/* Card itself needs its own overflow enforcement to clip the image
   corners against the border-radius. Grid children sometimes ignore
   the parent's overflow — spelling it out both places is safe. */
.rommcomp, .room-comp { overflow: hidden !important; contain: paint; }

/* Explicit "no image available" placeholder for rooms with no
   PrimaryImage on record. Applied via .img-div--empty from Rooms.cshtml.
   Inline SVG picture-icon + label — no external asset needed. */
.img-div.img-div--empty {
  background-image: none !important;
  background-color: var(--sd-cream-lt) !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: var(--sd-gold-dk);
  font-family: var(--sd-font-sans);
  font-size: 12px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
}
.img-div.img-div--empty::before {
  content: '';
  display: block;
  width: 84px; height: 84px;
  margin-bottom: 12px;
  background: no-repeat center/contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6a3a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><circle cx='9' cy='11' r='1.5'/><path d='M3 17l5-5 4 4 3-3 6 6'/></svg>");
  opacity: .55;
}
.img-div.img-div--empty::after {
  content: 'No photo available';
  position: absolute;
  left: 0; right: 0;
  bottom: 24%;
  text-align: center;
  color: var(--sd-gold-dk);
  opacity: .8;
}
.rommcomp > div:first-child, .room-comp > div:first-child {
  padding: 26px 28px !important;
  order: 1;
  display: grid !important;
  grid-template-rows: auto minmax(74px, 1fr) auto auto;
  gap: 12px;
  align-content: stretch;
  min-width: 0;
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
}
.rommcomp p.bold.marcellus, .room-comp p.bold.marcellus {
  font-size: 22px !important; margin: 0 !important;
  line-height: 1.2;
}
.descP {
  color: var(--sd-body) !important; font-size: 14.5px !important;
  line-height: 1.6 !important; margin: 0 !important;
  /* Clamp to 4 lines — enough room to give a real feel for the room
     without letting descriptions blow out the card height. Rooms with
     shorter copy fall back to fewer lines naturally, and the inline
     "Read more" link takes the guest into the modal for the rest. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Keep the guests/price row and Select CTA in fixed bottom rows. */
.rommcomp > div:first-child > .flex.justify-between.align-center,
.room-comp  > div:first-child > .flex.justify-between.align-center {
  margin-top: 0 !important;
}
.rommcomp .select-room-btn, .room-comp .select-room-btn {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  align-self: end;
}
/* On mobile the card stacks — put the image on top so it stays visual */
@media (max-width: 719px) {
  .rommcomp > div:first-child, .room-comp > div:first-child { order: 2; }
  .rommcomp .img-div, .room-comp .img-div,
  .rommcomp .img-div1, .room-comp .img-div1 { order: 1; min-height: 200px !important; }
}
/* Read more — inline text link that sits immediately after the room
   short description, so it reads like "…text ends. Read more" instead
   of being a separate pill that competes with the primary CTA. */
.readMore {
  display: inline !important;
  margin-left: 6px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--sd-gold-dk) !important;
  font-family: var(--sd-font-sans) !important;
  font-size: 14.5px !important;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color .15s;
  white-space: nowrap;
}
.readMore:hover { color: var(--sd-gold) !important; }

/* "Know more" link inside the Booking summary card / pill — same
   visual language as the room-card Read more link, sized a hair
   smaller so it sits under the selected room name without stealing
   attention from the summary numbers. */
.sd-summary-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sd-gold-dk) !important;
  font-family: var(--sd-font-sans) !important;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color .15s;
}
.sd-summary-more:hover { color: var(--sd-gold) !important; }
.sd-summary-more::after {
  content: "›";
  font-size: 14px; font-weight: 700;
  transform: translateY(-1px);
}

/* Room price line */
.rommcomp .marcellus, .room-comp .marcellus { font-family: var(--sd-font-serif) !important; }
.rommcomp .marcellus[style*="18px"], .room-comp .marcellus[style*="18px"] { color: var(--sd-gold-dk) !important; font-weight: 700; }

/* ═══ 8. BUTTONS ═══════════════════════════════════════════════════════ */
button, .agreeBtn, .bg-primary {
  background-color: var(--sd-gold) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 100px !important;
  padding: 12px 22px !important;
  font-family: var(--sd-font-sans) !important;
  font-size: 13.5px !important; font-weight: 700 !important;
  letter-spacing: .4px !important; text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .15s;
  box-shadow: var(--sd-shadow-gold);
}
button:hover, .agreeBtn:hover, .bg-primary:hover {
  background-color: var(--sd-gold-dk) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -6px rgba(150,121,78,.45);
}
button:active { transform: translateY(0); }
button:disabled, button[disabled] {
  background: #d8d3c5 !important;
  color: #fff !important;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Secondary outline button (Return / Back).
   Scoped to <a> only — the .b-primary class is also worn by inputs and
   textareas in this codebase, and a pill-radius on those turned the
   Notes textarea into an ellipse. Text fields keep their own square-ish
   radius from the input rules further down. */
a.bg-white.color-primary, a.b-primary {
  background: #fff !important;
  color: var(--sd-gold-dk) !important;
  border: 1.5px solid var(--sd-gold) !important;
  border-radius: 100px !important;
  padding: 11px 22px !important;
  font-family: var(--sd-font-sans) !important;
  font-size: 13px !important; font-weight: 700 !important;
  letter-spacing: .4px !important; text-transform: uppercase;
  text-decoration: none !important;
  transition: background .15s, border-color .15s;
  box-shadow: none !important;
  display: inline-flex; align-items: center; justify-content: center;
}
a.bg-white.color-primary:hover, a.b-primary:hover {
  background: var(--sd-cream) !important;
  border-color: var(--sd-gold-dk) !important;
  color: var(--sd-gold-dk) !important;
}

.select-room-btn { width: 100% !important; margin-top: 14px !important; }
.btnContinue     { min-width: 200px; }

.btnPromo {
  background: var(--sd-gold) !important;
  color: #fff !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-size: 12px !important; font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: .4px;
  box-shadow: none !important;
}
.btnPromo:disabled { background: #d8d3c5 !important; }

/* ═══ 9. INPUTS ═══════════════════════════════════════════════════════ */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="password"], select, textarea {
  font-family: var(--sd-font-sans) !important;
  font-size: 14px !important; color: var(--sd-ink) !important;
  background: #fff !important;
  border: 1.5px solid var(--sd-line) !important;
  border-radius: var(--sd-radius-sm) !important;
  padding: 11px 14px !important;
  outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
  box-sizing: border-box;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--sd-gold) !important;
  box-shadow: 0 0 0 4px rgba(185,157,117,.14) !important;
}
input::placeholder { color: var(--sd-muted-2); }

/* Date picker input keeps its ID but gets our polish */
#startDate {
  border-radius: var(--sd-radius-sm) !important;
  border: 1.5px solid var(--sd-line) !important;
  background: #fff !important;
  height: 48px; padding: 0 40px 0 14px !important;
  font-size: 14px !important; color: var(--sd-ink) !important;
  transition: border-color .15s, box-shadow .15s;
}
#startDate:focus, #startDate:hover {
  border-color: var(--sd-gold) !important;
  box-shadow: 0 0 0 4px rgba(185,157,117,.14) !important;
}
.close-span {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--sd-muted-2); cursor: pointer; font-size: 13px;
  padding: 4px 6px; border-radius: 4px;
}
.close-span:hover { color: var(--sd-danger); background: var(--sd-danger-lt); }

/* ── Guest stepper (− 1 Guests +) ──
   Self-contained pill. Fixed inner widths + no `justify-between`
   parent so the buttons + label always sit next to each other with
   consistent spacing instead of drifting to the edges of a wide flex
   container the way the original markup did. */
.sd-guest-stepper {
  display: inline-flex; align-items: center; gap: 4px;
  height: 48px; padding: 6px 8px;
  border: 1.5px solid var(--sd-line);
  border-radius: 100px;
  background: #fff;
  min-width: 220px; width: 100%; max-width: 260px;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.sd-guest-stepper:hover, .sd-guest-stepper:focus-within {
  border-color: var(--sd-gold);
  box-shadow: 0 0 0 4px rgba(185,157,117,.14);
}
.sd-guest-body {
  flex: 1; display: flex; align-items: baseline; justify-content: center; gap: 6px;
  min-width: 0;
}
.sd-guest-label {
  font-size: 11px !important; font-weight: 700 !important;
  color: var(--sd-muted) !important;
  letter-spacing: 1.2px !important; text-transform: uppercase;
}

.date-btn {
  width: 36px !important; height: 36px !important;
  border-radius: 100px !important;
  background: var(--sd-gold) !important;
  color: #fff !important;
  font-size: 18px !important; font-weight: 700 !important; line-height: 1 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  cursor: pointer; user-select: none;
  transition: background .15s, transform .1s;
  box-shadow: 0 4px 10px -2px rgba(185,157,117,.35) !important;
  padding: 0 !important;
  flex-shrink: 0;
}
.date-btn:hover  { background: var(--sd-gold-dk) !important; }
.date-btn:active { transform: scale(.95); }
.guest-input {
  border: none !important;
  background: transparent !important;
  text-align: center !important;
  width: 24px !important;
  padding: 0 !important;
  font-size: 17px !important; font-weight: 700 !important;
  color: var(--sd-ink) !important;
  box-shadow: none !important;
  outline: none;
}
.guest-input:focus { box-shadow: none !important; }

.Booking_OutReference, .Booking_OutReference1 {
  border-radius: var(--sd-radius-sm) !important;
  border: 1.5px solid var(--sd-line) !important;
  padding: 10px 12px !important; font-size: 13px !important;
  text-transform: uppercase; letter-spacing: .5px;
}

/* ═══ 10. ACCORDIONS (booking summary) ═════════════════════════════════ */
.accordion { margin: 10px 0 !important; }
.accordion .handle {
  margin: 0 !important; padding: 0 !important; background: transparent !important;
}
.accordion .handle label {
  cursor: pointer;
  padding: 12px 14px !important;
  background: var(--sd-cream-lt) !important;
  border: 1px solid var(--sd-line) !important;
  border-radius: var(--sd-radius-sm) !important;
  font-family: var(--sd-font-serif) !important;
  font-size: 13.5px !important; font-weight: 600 !important;
  color: var(--sd-ink) !important;
  display: flex !important; justify-content: space-between; align-items: center;
}
.accordion > input[type=checkbox]:checked ~ .content {
  border: 1px solid var(--sd-line) !important;
  border-top: none !important;
  border-radius: 0 0 var(--sd-radius-sm) var(--sd-radius-sm) !important;
  padding: 12px 14px !important;
  background: #fff;
}

/* Booking summary sidebar */
.hidden-div p.b-b-normal {
  border-bottom: 1px solid var(--sd-line) !important;
  padding-bottom: 12px !important;
  margin-bottom: 12px !important;
  font-family: var(--sd-font-serif);
  font-size: 15px; font-weight: 700; color: var(--sd-ink);
}
.hidden-div p.bold.ma-b-xs.marcellus {
  font-size: 13px !important;
  color: var(--sd-muted) !important;
  text-transform: uppercase; letter-spacing: 1px;
  font-weight: 700 !important;
  margin: 4px 0 !important;
}
.lblStayDuration, .lblOnDate {
  font-family: var(--sd-font-sans);
  color: var(--sd-ink); font-weight: 600;
}
.lblPrice, .lblTotalPrice, .lblAdvancePaymentPrice, .lblArrivalPaymentPrice, .lblPromotionalDiscount {
  font-family: var(--sd-font-sans);
  color: var(--sd-ink); font-weight: 700;
}

/* Promo code notice tag */
.pb-3 .pa-t-s .w-full { background-color: var(--sd-cream-lt) !important; color: var(--sd-body) !important; border-radius: var(--sd-radius) !important; border: 1px dashed var(--sd-gold-lt); }

/* Payment info banner */
.payment-info {
  background: var(--sd-cream-lt) !important;
  border: 1px solid var(--sd-gold-lt) !important;
  border-radius: var(--sd-radius) !important;
  padding: 16px 18px !important; color: var(--sd-body) !important;
}
.payment-info strong { color: var(--sd-gold-dk) !important; }
.paymentError {
  color: var(--sd-danger); font-weight: 600; font-size: 13.5px;
  padding: 10px 14px; background: var(--sd-danger-lt);
  border: 1px solid rgba(185,28,28,.2); border-radius: var(--sd-radius-sm);
  margin-top: 10px; display: block;
}
.paymentError:empty { display: none; }

/* ═══ 11. ROOM DETAIL MODAL (Read More popup) ═══════════════════════
   Elevate the legacy .modal_* structure without touching the HTML the
   room.js populates dynamically. The overall dialog is a tall centered
   card; the slideshow takes the top ~46% and the scrollable body sits
   below with a sticky Select CTA. */
.modal__bg {
  background: rgba(20, 23, 27, .55) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.modal__inner {
  border-radius: var(--sd-radius-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--sd-shadow-lg) !important;
  border: 1px solid var(--sd-line) !important;
  background: #fff !important;
  max-width: 780px !important;
  width: min(92vw, 780px) !important;
  max-height: 92vh !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative;
  padding: 0 !important;
}

/* Close button — proper circular chip in the top-right, hovers dark. */
.modal__close {
  position: absolute !important;
  top: 14px; right: 14px;
  width: 40px; height: 40px;
  border-radius: 100px !important;
  background: rgba(255,255,255,.92) !important;
  color: var(--sd-ink) !important;
  border: 1px solid var(--sd-line) !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 4;
  transition: background .15s, transform .1s, border-color .15s;
  box-shadow: 0 4px 10px rgba(20,23,27,.15);
}
.modal__close:hover { background: var(--sd-gold) !important; color: #fff !important; border-color: var(--sd-gold) !important; transform: scale(1.05); }
.modal__close svg { width: 16px; height: 16px; }
.modal__close::before, .modal__close::after { content: none !important; }

/* Header (slideshow) */
.modal_header {
  background: var(--sd-cream-lt);
  padding: 0 !important;
  border-radius: var(--sd-radius-lg) var(--sd-radius-lg) 0 0;
  overflow: hidden;
  flex-shrink: 0;
}
.modal_header #window {
  aspect-ratio: 16 / 9;
  min-height: 300px;
  max-height: 420px;
}
.slideshow-container {
  position: relative;
  width: 100%; height: 100%;
  background: var(--sd-cream-lt);
}
.slideshow-container .mySlides {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.slideshow-container .mySlides img {
  width: 100% !important; height: 100% !important;
  object-fit: cover;
  display: block;
}
.slideshow-container .prev, .slideshow-container .next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px;
  border-radius: 100px;
  background: rgba(255,255,255,.92);
  color: var(--sd-ink);
  border: 1px solid var(--sd-line);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 18px; user-select: none;
  transition: background .15s, transform .1s;
  z-index: 3;
  text-decoration: none;
  padding: 0;
}
.slideshow-container .prev { left: 14px; }
.slideshow-container .next { right: 14px; }
.slideshow-container .prev:hover, .slideshow-container .next:hover {
  background: var(--sd-gold); color: #fff;
}
.sd-modal-imgs-empty {
  height: 100%; width: 100%;
  min-height: 260px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  color: var(--sd-gold-dk); font-size: 12px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  background: var(--sd-cream-lt);
}
.sd-modal-imgs-empty::before {
  content: '';
  width: 72px; height: 72px;
  background: no-repeat center/contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6a3a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='14' rx='2'/><circle cx='9' cy='11' r='1.5'/><path d='M3 17l5-5 4 4 3-3 6 6'/></svg>");
  opacity: .55;
}

/* Body (scrollable) */
.modal_body {
  padding: 28px 30px !important;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.sd-modal-title {
  font-family: var(--sd-font-serif) !important;
  font-size: 24px !important; font-weight: 700 !important;
  color: var(--sd-ink) !important;
  margin: 0 0 18px !important; letter-spacing: -.3px;
  line-height: 1.2;
}
.sd-modal-title label { font-family: inherit !important; }
.sd-modal-section {
  padding-bottom: 18px !important;
  border-bottom: 1px solid var(--sd-line) !important;
  margin-bottom: 18px !important;
}
.sd-modal-section:last-child { border-bottom: none !important; }
.sd-modal-section-title {
  font-family: var(--sd-font-sans) !important;
  font-size: 11px !important; font-weight: 800 !important;
  letter-spacing: 1.2px !important; text-transform: uppercase;
  color: var(--sd-muted) !important;
  margin: 0 0 10px !important;
}
.modal_body p { color: var(--sd-body); line-height: 1.65; font-size: 14px; margin: 0 0 12px; }
.modal_body p:last-child { margin-bottom: 0; }

.sd-modal-amenity {
  padding: 8px 12px;
  background: var(--sd-cream-lt);
  border-radius: 100px;
  width: fit-content;
  font-size: 13px; color: var(--sd-ink);
}
/* Highlights service pills */
#dvServices table { width: 100% !important; }
#dvServices td { padding: 6px 8px !important; }
#dvServices label {
  font-size: 13px !important; color: var(--sd-ink) !important;
  font-family: var(--sd-font-sans) !important; font-weight: 500 !important;
}
#dvServices img {
  border-radius: 100px; background: var(--sd-cream-lt); padding: 3px;
  max-width: 24px !important; height: 24px !important;
}

/* Sticky footer with Select CTA */
.sd-modal-footer {
  padding: 16px 30px calc(16px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--sd-line);
  flex-shrink: 0;
}
.sd-modal-footer button {
  width: 100%;
  height: 52px;
  font-size: 14px !important;
}

@media (max-width: 640px) {
  .modal__inner { max-height: 96vh !important; width: 96vw !important; }
  .modal_header #window { min-height: 220px; }
  .modal_body { padding: 22px 20px !important; }
  .sd-modal-footer { padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); }
}

/* ═══ 12. CUSTOM ALERT (from _Layout.cshtml) ═══════════════════════════ */
.custom-alert-box { border-radius: var(--sd-radius-lg) !important; overflow: hidden; box-shadow: var(--sd-shadow-lg); }
.custom-alert-header { background: linear-gradient(135deg, var(--sd-gold), var(--sd-gold-dk)) !important; }
.custom-alert-footer .btn { border-radius: 100px !important; background: var(--sd-gold) !important; }
.custom-alert-footer .btn:hover { background: var(--sd-gold-dk) !important; }

/* ═══ 13. (No footer — this site embeds inside a parent frame) ═══
   The generic trust-chip badge is still used inline on Index.cshtml
   as a "Secure booking / Best-rate promise" strip below the search
   widget, so keep the class definition here. */
.sd-footer-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--sd-gold-dk); font-weight: 600;
  padding: 6px 12px; border: 1px solid var(--sd-gold-lt); border-radius: 100px;
  background: var(--sd-cream-lt);
}

/* Hide the legacy .header / .footer strips that the old Layout
   rendered — kept in the DOM (display:none) so any downstream JS or
   CSS selector that queried them keeps working. */
.layout-div > .header,
.layout-div > .footer { display: none !important; }

/* ═══ 14. TWO-COLUMN CHECKOUT LAYOUT ═══════════════════════════════════ */
/* The .flex.justify-between wrapper on Rooms/Contact/Payment/Confirmation
   is our main "form left, summary right" grid. Give it real premium
   spacing + stickiness on desktop. */
main .flex.justify-between {
  align-items: flex-start !important;
  gap: 32px !important;
}
main .flex.justify-between > .col-lg-7,
main .flex.justify-between > .col-lg-6:first-child { min-width: 0; }
@media (min-width: 992px) {
  main .flex.justify-between > .col-lg-4,
  main .flex.justify-between > .col-lg-6:last-child {
    position: sticky; top: 94px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
  }
}

/* Fix the ".hidden-div" quirk — it's the desktop-only booking summary.
   On mobile it hides IF the view provides a mobile .m-d.expand-list pill
   in its place (Rooms / Contact / Payment). On Home there is no expand
   pill, so keep the summary card visible even on mobile — it becomes the
   only booking-summary surface on the search step. */
@media (max-width: 768px) {
  body:has(.m-d.expand-list) .hidden-div { display: none !important; }
  body:not(:has(.m-d.expand-list)) .hidden-div {
    display: block !important;
    width: 100% !important; max-width: 100% !important;
    margin-top: 18px !important;
  }
}
@media (min-width: 769px) {
  .hidden-div { display: block !important; }
}

/* ═══ 14b. FLOATING ACTION BAR ══════════════════════════════════════════
   Bottom-of-viewport sticky bar that holds the Back / Continue CTAs on
   Rooms, Contact and Payment steps. Always visible on scroll so the
   guest never has to hunt to advance. Uses padding + backdrop blur to
   feel premium, and leaves space for content above via margin-bottom
   on <main>. */
.sd-action-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-top: 1px solid var(--sd-line);
  box-shadow: 0 -8px 24px -12px rgba(20,23,27,.10);
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
}
.sd-action-bar-inner {
  max-width: 1240px !important; margin: 0 auto !important;
  display: flex !important; align-items: center; gap: 12px;
  justify-content: flex-end;
  width: 100% !important;
  box-sizing: border-box;
  flex-wrap: nowrap;
}
.sd-action-bar-inner > a,
.sd-action-bar-inner > form,
.sd-action-bar-inner > button,
.sd-action-bar-inner > input[type="submit"] { flex: 0 1 auto; }
.sd-action-bar-inner > a { min-width: 160px; text-align: center; }
.sd-action-bar-inner form button,
.sd-action-bar-inner form input[type="submit"],
.sd-action-bar-inner > button { min-width: 200px; }
/* Payment's <input type="submit"> lives inside the <form> and needs to
   fill its share of the row without leaking past the container. */
.sd-action-bar-inner > form {
  display: flex !important;
  min-width: 0;
}
.sd-action-bar-inner > form > input[type="submit"],
.sd-action-bar-inner > form > button {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
@media (max-width: 640px) {
  /* Two buttons side-by-side, equal width. Covers all four view
     variants — <a>+<form><button/></form> (Rooms), <a>+<button>
     (Contact), and <a>+<form><input type="submit"/></form> (Payment).
     Without this the Back link (with its 160px min-width) and the
     Continue form/button/input (200px min-width) add up past the
     viewport and one sits on top of the other, or a long label like
     "Agree & pay securely" leaks past the container edge. */
  .sd-action-bar-inner {
    gap: 8px;
    padding: 0 4px;
  }
  .sd-action-bar-inner > a,
  .sd-action-bar-inner > form,
  .sd-action-bar-inner > button,
  .sd-action-bar-inner > input[type="submit"],
  .sd-action-bar-inner > form button,
  .sd-action-bar-inner > form input[type="submit"] {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    box-sizing: border-box;
  }
  .sd-action-bar-inner > form { display: flex; min-width: 0 !important; }
  .sd-action-bar-inner > form > button,
  .sd-action-bar-inner > form > input[type="submit"] { width: 100% !important; }

  /* Compact button typography — keeps 2-word labels on a single line,
     lets 3-word ones wrap cleanly onto two lines instead of overflowing. */
  .sd-action-bar-inner > a,
  .sd-action-bar-inner > button,
  .sd-action-bar-inner > input[type="submit"],
  .sd-action-bar-inner > form button,
  .sd-action-bar-inner > form input[type="submit"] {
    font-size: 12px !important;
    padding: 10px 6px !important;
    letter-spacing: .5px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* room.css's mobile block sets #btnContinue to position:fixed;bottom:10px;
     width:89% — that yanks the button out of the action-bar flex row and
     drops it on top of the Back link. Force it back into normal flow when
     it's inside our sd-action-bar. */
  .sd-action-bar #btnContinue,
  .sd-action-bar-inner #btnContinue,
  .sd-action-bar-inner .btnContinue,
  .sd-action-bar-inner .continueBtn {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
  }
}

/* Push the sticky action bar above the mobile Booking-Summary pill so both
   stay visible together. When the summary pill isn't in the DOM (e.g. the
   Home / Confirmation pages) the bar stays flush with the viewport bottom. */
body:has(.m-d.expand-list) .sd-action-bar {
  bottom: 0;
}
@media (max-width: 1024px) {
  body:has(.m-d.expand-list) main.pb-3 { padding-bottom: 220px !important; }
}
/* Reserve room so nothing at the bottom of the page is hidden behind
   the fixed bar. Uses :has() so any page with .sd-action-bar in the
   DOM automatically gets the bottom padding — no need to add a class
   to <main> per view. */
body:has(.sd-action-bar) main { padding-bottom: 110px; }
@media (max-width: 640px) { body:has(.sd-action-bar) main { padding-bottom: 140px; } }

/* ═══ 15. UTILITY REFINEMENTS ═══════════════════════════════════════════ */
.font-size-l { font-size: 18px !important; }
.font-size-m { font-size: 15px !important; }
.font-size-xs { font-size: 12.5px !important; }
.color-primary { color: var(--sd-gold-dk) !important; }
.color-white  { color: #fff !important; }
.color-black  { color: var(--sd-ink) !important; }
.gray, .color-gray { color: var(--sd-muted) !important; }
.pl-none { padding-left: 0 !important; }

/* Force our better spacing on the search Continue button */
.contact-form .ma-t-m .center,
.contact-form .ma-t-m .search {
  min-width: 240px !important;
  height: 52px !important;
  border-radius: 100px !important;
  background-color: var(--sd-gold) !important;
  color: #fff !important;
  font-family: var(--sd-font-sans);
  font-size: 13.5px !important; font-weight: 700 !important;
  letter-spacing: .5px !important; text-transform: uppercase;
  box-shadow: var(--sd-shadow-gold);
  transition: background .15s, transform .1s, box-shadow .15s;
}
.contact-form .ma-t-m .center:hover,
.contact-form .ma-t-m .search:hover {
  background-color: var(--sd-gold-dk) !important;
  transform: translateY(-1px);
}

/* Chevron indicators used in accordions */
.fas.fa-chevron-down, .fas.fa-chevron-up { color: var(--sd-gold-dk) !important; }

/* Better breadcrumb-on-mobile: single row scroll */
@media (max-width: 576px) {
  ul.list-style-type.pa-l-xs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 8px !important; }
}

/* Booking Summary mobile expand-list polish.
   Sits ABOVE the sticky .sd-action-bar (which is bottom:0, ~72px tall)
   so guests can still see the Booking Summary pill and both action-bar
   buttons at once. Shown from tablets down (≤1024px) — the desktop-only
   summary side-panel takes over above that. */
.m-d.expand-list {
  border: 1px solid var(--sd-line) !important;
  border-radius: var(--sd-radius) !important;
  background: #fff !important;
  box-shadow: var(--sd-shadow-md);
  top: auto !important;
  bottom: 78px !important;
  position: fixed !important;
  width: calc(100% - 24px) !important;
  left: 12px !important;
  right: 12px !important;
  z-index: 88;
}
.m-d .content-in-collapse { border-radius: var(--sd-radius) !important; }
@media (max-width: 1024px) {
  /* Legacy site.css only turns the mobile summary on at ≤576px, leaving
     tablets with no summary at all. Turn it on for the whole tablet+phone
     range so guests always have their totals to hand. */
  .m-d { display: block !important; }
}
@media (min-width: 1025px) {
  /* Desktop uses the side-panel summary — hide the fixed mobile one. */
  .m-d { display: none !important; }
}
/* ─── Mobile Booking Summary — pill header row ────────────────────────
   Legacy markup:
     <li>
       <label class="tab_lab">Booking Summary</label>
       <input class="tab">                       (drives collapse)
       <span class="open-close-icon">€0 + chevron</span>
       <div class="content">...</div>            (the pane)
     </li>
   The header (label + icon) needs to sit on one row and the .content
   pane must break onto its OWN full-width row below. We use CSS grid
   so the three header cells share a single row and .content spans
   both columns on row two. */
.m-d.expand-list > li {
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 10px;
  padding: 12px 14px !important;
  position: relative;
}
.m-d.expand-list > li > .tab_lab {
  grid-column: 1;
  grid-row: 1;
  padding: 0 !important;
  font-size: 15px !important; font-weight: 700;
  color: var(--sd-ink);
  cursor: pointer;
  z-index: 1;
}
/* The <input> overlay that captures the tap — cover the whole header
   row (not the pane) so tapping the title or price toggles the pane. */
.m-d.expand-list > li > input[class^="tab"] {
  opacity: 0;
  position: absolute !important;
  top: 0; left: 0; right: 0;
  width: 100% !important; height: 48px !important;
  margin: 0; cursor: pointer;
  z-index: 2;
}
/* Price + chevron cell on the right, inline. */
.m-d.expand-list > li > .open-close-icon {
  grid-column: 2;
  grid-row: 1;
  position: static !important;
  right: auto !important; top: auto !important;
  transform: none !important;
  display: inline-flex !important; align-items: center; gap: 8px;
  padding: 0 !important;
  z-index: 1;
}
.m-d.expand-list > li > .open-close-icon > div,
.m-d.expand-list > li > .open-close-icon > span:not(.open-close-icon1) {
  display: inline-flex; align-items: center;
}
.m-d.expand-list > li > .open-close-icon span[style*="font-size: 18px"] {
  font-size: 16px !important; line-height: 1 !important;
  margin-right: 6px !important;
  color: var(--sd-ink); font-weight: 700;
}
.m-d.expand-list > li > .open-close-icon .lblTotalPrice {
  font-family: var(--sd-font-serif) !important;
}
.m-d.expand-list > li > .open-close-icon .open-close-icon1 {
  position: static !important; right: auto !important; top: auto !important;
  display: inline-flex; align-items: center; padding: 0 !important;
}
.m-d.expand-list > li > .open-close-icon .fa-chevron-down {
  font-size: 14px !important; line-height: 1 !important;
  color: var(--sd-gold-dk) !important;
}
/* The collapsible pane — break to its own full-width row under the
   header, spanning both grid columns. */
.m-d.expand-list > li > .content {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100% !important;
}

/* ─── Mobile Booking Summary — content pane ──────────────────────────
   The legacy markup renders:
     - a duplicated "Booking Summary" heading (already on the pill)
     - nested <section class="accordion"> for Promo / Room / Payment,
       each with its own .content pane that fights the outer .m-d .content
       max-height animation from site.css and stacks weirdly
     - inline styles with negative margins and 30px padding-bottom padding
       to force spacing that no longer applies in this treatment.
   The block below flattens every accordion and rebuilds the pane as
   a clean editorial summary card. Structure (top to bottom):
     [ room image + name ]                           divider
     [ DATES label ]                                 divider
     [ 24 Aug – 25 Aug 2026 · 1 guest ]
     [ Promo code input + ADD button ]              divider
     [ Row: Room                        € 220 ]
     [ Sub-row: 1 night                € 220 ]      divider
     [ Row: Promotional discount        € 0 ]
     [ Row: Total (EUR)                € 220 ]      accent
     [ Taxes included ]                             divider
     [ PAYMENT SCHEDULE label ]
     [ Due now                          € 44 ]
     [ On agreement (small muted) ]
     [ Due at the hotel                € 176 ]
     [ 24 Aug (small muted) ]                                              */

/* The outer .content (the pill's expand target) — pad it, and let it
   scroll internally when the panel is taller than the viewport above
   the action bar. */
.m-d.expand-list > li > .content {
  padding: 6px 12px 14px !important;
}
.m-d.expand-list li[data-md-content="200"] input[class^="tab"]:checked ~ .content {
  max-height: 60vh !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Pane card */
.m-d.expand-list .content-in-collapse {
  padding: 16px !important;
  margin: 0 !important;
  background: #fff !important;
  border: 1px solid var(--sd-line) !important;
  border-radius: var(--sd-radius) !important;
  box-shadow: none !important;
  font-family: var(--sd-font-sans) !important;
  color: var(--sd-body);
  /* site.css caps this element at max-height:300px (70vh below 768px)
     with overflow-y:auto — that stacks with the outer .content's own
     scroll and paints TWO scrollbars in the mobile pill. Let the outer
     pane own the scroll and let this one grow naturally. */
  max-height: none !important;
  overflow: visible !important;
}
/* Duplicated heading — the pill already says "Booking Summary". */
.m-d.expand-list .content-in-collapse > p.marcellus.b-b-normal:first-child {
  display: none !important;
}

/* Row 1 — Selected room: 48×48 rounded image + room name inline. */
.m-d.expand-list .content-in-collapse > .flex.justify-between:first-of-type {
  display: flex !important;
  margin: 0 0 14px !important;
  padding: 0 0 14px !important;
  border-bottom: 1px solid var(--sd-line) !important;
}
.m-d.expand-list .content-in-collapse > .flex.justify-between:first-of-type > .flex {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100%;
}
.m-d.expand-list .content-in-collapse img.w-45 {
  width: 48px !important; height: 48px !important;
  border-radius: 10px !important; object-fit: cover;
  flex-shrink: 0; margin: 0 !important;
}
.m-d.expand-list .content-in-collapse .lblRoomName {
  font-size: 15px !important; font-weight: 600 !important;
  color: var(--sd-ink) !important;
  display: block; margin: 0 !important;
  line-height: 1.3;
}

/* Row 2 — Dates block. */
.m-d.expand-list .content-in-collapse > .pa-t-s {
  padding: 0 0 14px !important; margin: 0 0 14px !important;
  border-bottom: 1px solid var(--sd-line) !important;
}
.m-d.expand-list .content-in-collapse > .pa-t-s > p.bold {
  font-family: var(--sd-font-sans) !important;
  font-size: 11px !important; font-weight: 700 !important;
  color: var(--sd-muted) !important;
  letter-spacing: 1.4px; text-transform: uppercase;
  margin: 0 0 6px !important;
}
.m-d.expand-list .content-in-collapse > .pa-t-s > p {
  margin: 0 0 2px !important;
  font-size: 14px !important; color: var(--sd-ink);
}
.m-d.expand-list .content-in-collapse > .pa-t-s > p:last-child {
  color: var(--sd-muted) !important; font-size: 13px !important;
  margin-top: 4px !important;
}

/* Kill every inner accordion's collapse mechanic — they always render
   open in this view, so treat them as flat sections. */
.m-d.expand-list .content-in-collapse section.accordion {
  margin: 0 0 14px !important;
  padding: 0 0 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sd-line) !important;
  background: transparent !important;
  display: block !important;
}
.m-d.expand-list .content-in-collapse section.accordion:last-of-type {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.m-d.expand-list .content-in-collapse section.accordion > input[type="checkbox"] {
  display: none !important;
}
.m-d.expand-list .content-in-collapse section.accordion > .handle {
  margin: 0 !important; padding: 0 !important;
  background: transparent !important;
  display: block;
}
.m-d.expand-list .content-in-collapse section.accordion > .handle label {
  padding: 0 !important; background: transparent !important;
  border-radius: 0 !important; cursor: default !important;
  font-family: var(--sd-font-sans) !important;
  font-size: 14px !important; font-weight: 600 !important;
  color: var(--sd-ink) !important;
  display: flex !important; justify-content: space-between; align-items: baseline;
  gap: 10px;
  margin: 0 !important;
}
.m-d.expand-list .content-in-collapse section.accordion > .content {
  display: flex !important;
  justify-content: space-between !important; align-items: center;
  gap: 10px;
  max-height: none !important; overflow: visible !important;
  padding: 6px 0 0 !important; margin: 0 !important;
  background: transparent !important; border: 0 !important;
  transform: none !important; transition: none !important;
  font-size: 13px !important; color: var(--sd-muted) !important;
}
.m-d.expand-list .content-in-collapse section.accordion > .content p {
  margin: 0 !important; font-size: 13px !important;
}

/* Promo-code accordion — no header label, just the input + button row */
.m-d.expand-list .content-in-collapse section.accordion:has(.Booking_OutReference1) {
  padding-bottom: 14px !important;
  margin-bottom: 14px !important;
}
.m-d.expand-list .content-in-collapse section.accordion:has(.Booking_OutReference1) > .handle { display: none !important; }
.m-d.expand-list .content-in-collapse section.accordion:has(.Booking_OutReference1) > .content {
  padding: 0 !important;
}
.m-d.expand-list .Booking_OutReference1 {
  flex: 1 1 auto !important; min-width: 0 !important;
  height: 40px !important;
  padding: 8px 12px !important;
  border: 1px solid var(--sd-line) !important;
  border-radius: var(--sd-radius-sm) !important;
  font-size: 13px !important;
  background: #fff !important;
  color: var(--sd-ink) !important;
}
.m-d.expand-list .btnPromo {
  flex-shrink: 0 !important;
  height: 40px !important; padding: 0 16px !important;
  border-radius: var(--sd-radius-sm) !important;
  background: var(--sd-gold) !important; color: #fff !important;
  font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: 1px !important; text-transform: uppercase;
  border: 0 !important;
  cursor: pointer;
}
.m-d.expand-list .btnPromo:disabled { opacity: .5; }

/* Room total / Promotional Discount / Total (EUR) — flat two-column rows */
.m-d.expand-list .content-in-collapse > .flex.justify-between.jost {
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
}
.m-d.expand-list .content-in-collapse > .flex.justify-between.jost p {
  margin: 0 !important;
  font-size: 13.5px !important;
  color: var(--sd-body);
  font-family: var(--sd-font-sans) !important;
}
.m-d.expand-list .content-in-collapse > .flex.justify-between.jost p.bold {
  font-size: 16px !important;
  color: var(--sd-ink) !important;
  font-weight: 700 !important;
}
/* Highlight the Total (EUR) row */
.m-d.expand-list .content-in-collapse > .flex.justify-between.jost:has(> p.bold) {
  margin-top: 4px !important;
  padding-top: 10px !important;
  border-top: 1px solid var(--sd-line) !important;
}

/* "Taxes included" tag */
.m-d.expand-list .content-in-collapse > p.font-size-m.marcellus {
  font-family: var(--sd-font-sans) !important;
  font-size: 11px !important; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--sd-muted) !important;
  margin: 4px 0 14px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--sd-line) !important;
}

/* Payment-schedule accordion — has 4 mini rows (Due now / on-agreement /
   Due at hotel / date). Style them cleanly inside the .content block. */
.m-d.expand-list .content-in-collapse section.accordion:has([id^="handle3"]) > .handle label {
  font-size: 11px !important; font-weight: 700 !important;
  color: var(--sd-muted) !important;
  letter-spacing: 1.4px; text-transform: uppercase;
  font-family: var(--sd-font-sans) !important;
}
.m-d.expand-list .content-in-collapse section.accordion:has([id^="handle3"]) > .content {
  display: block !important;
  padding-top: 8px !important;
}
.m-d.expand-list .content-in-collapse section.accordion:has([id^="handle3"]) > .content .flex.justify-between {
  display: flex !important;
  justify-content: space-between !important;
  margin: 0 0 2px !important;
}
.m-d.expand-list .content-in-collapse section.accordion:has([id^="handle3"]) > .content .flex.justify-between p {
  font-size: 14px !important; color: var(--sd-ink) !important;
  margin: 0 !important;
}
.m-d.expand-list .content-in-collapse section.accordion:has([id^="handle3"]) > .content .pa-l-xs {
  padding-left: 0 !important;
  margin: 0 0 10px !important;
  font-size: 12px !important;
  color: var(--sd-muted) !important;
}

/* Room accordion (mid-total) — same "small label, big row" treatment */
.m-d.expand-list .content-in-collapse section.accordion:has([id^="handle2"]) > .handle label {
  font-size: 14px !important; font-weight: 600 !important;
  color: var(--sd-ink) !important;
  font-family: var(--sd-font-sans) !important;
}
.m-d.expand-list .content-in-collapse section.accordion:has([id^="handle2"]) > .handle label span {
  color: var(--sd-ink) !important; font-weight: 700 !important;
}

/* Success + failure states on confirmation page */
h3.jost[style*="green"]  { color: var(--sd-emerald) !important; }
h3.jost[style*="red"]    { color: var(--sd-danger) !important; }
h3.jost {
  font-family: var(--sd-font-serif) !important;
  font-size: 22px !important; font-weight: 700 !important;
  line-height: 1.35 !important; letter-spacing: -.2px;
  padding: 20px 22px !important; border-radius: var(--sd-radius) !important;
  margin: 4px 0 !important;
}
h3.jost[style*="green"] {
  background: #ecfdf5; border: 1px solid #a7f3d0;
}
h3.jost[style*="red"] {
  background: var(--sd-danger-lt); border: 1px solid #fecaca;
}

/* ─── Contact form field grid ─────────────────────────────────────
   The legacy markup lays fields out as flex-wrap + w-half (49%), but
   the inputs render with border+padding pushing each cell past 50%,
   so pairs wrap onto their own rows and left-align. We switch the
   field container to a two-column CSS grid and force w-half to fill
   its cell — the row/gutter behaviour becomes deterministic. */
.contact-input,
select[name="cmbCountry"] {
  box-sizing: border-box !important;
  height: 52px;
  font-family: var(--sd-font-sans) !important;
  font-size: 15px !important;
  color: var(--sd-ink) !important;
  background: #fff !important;
  border: 1px solid var(--sd-line) !important;
  border-radius: var(--sd-radius) !important;
  padding: 14px 16px !important;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.contact-input:focus,
select[name="cmbCountry"]:focus {
  outline: none !important;
  border-color: var(--sd-gold) !important;
  box-shadow: 0 0 0 3px rgba(185,157,117,.18) !important;
}
textarea.contact-input {
  height: auto !important;
  min-height: 140px;
  resize: vertical;
  line-height: 1.55;
}
select[name="cmbCountry"] {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23736251' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 16px !important;
  padding-right: 40px !important;
}

/* Two-column grid for the paired fields. Target the flex-wrap block
   that immediately follows the full-width email input so we don't
   affect other flex-wrap containers on the page. */
.flex.flex-wrap.justify-between:has(> .contact-input),
.flex.flex-wrap.justify-between:has(> select[name="cmbCountry"]) {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.flex.flex-wrap.justify-between:has(> .contact-input) > .w-half,
.flex.flex-wrap.justify-between:has(> .contact-input) > select[name="cmbCountry"] {
  width: 100% !important;
  margin: 0 !important;
}
.flex.flex-wrap.justify-between:has(> .contact-input) > .w-full,
.flex.flex-wrap.justify-between:has(> .contact-input) > textarea.contact-input {
  grid-column: 1 / -1;
  width: 100% !important;
  margin: 0 !important;
}
@media (max-width: 640px) {
  .flex.flex-wrap.justify-between:has(> .contact-input),
  .flex.flex-wrap.justify-between:has(> select[name="cmbCountry"]) {
    grid-template-columns: 1fr;
  }
}

/* ─── Date-search form (Home / Index) ─────────────────────────────
   The legacy markup nests `w-half` inside a `flex-wrap` row and even
   double-shrinks the date input by putting `w-half` on both the wrapper
   and the input itself (→ ~25% wide). We swap the row for a 2-column
   grid so the date field and the guest stepper always sit side by side
   at equal width, and force the button to span both columns. */
#datePickerForm > .flex.flex-wrap.justify-between {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: center;
}
#datePickerForm > .flex.flex-wrap.justify-between > .date-picker-container,
#datePickerForm > .flex.flex-wrap.justify-between > .w-half {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
}
#datePickerForm #startDate {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: block;
}
#datePickerForm .sd-guest-stepper {
  width: 100% !important;
  max-width: none !important;
  height: 48px;
}
#datePickerForm > .flex.ma-t-m {
  display: block !important;
  margin-top: 18px !important;
}
#datePickerForm .search {
  width: 100% !important;
  max-width: 100% !important;
  height: 52px;
  font-size: 14px !important;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* Check-in / Check-out label bar sits directly above the two grid
   columns — mirror the same 2-column grid so each label lines up with
   its input below. */
.flex.medium-gaps:has(+ #datePickerForm) {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 0 8px !important;
}
.flex.medium-gaps:has(+ #datePickerForm) > p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--sd-muted) !important;
}

@media (max-width: 560px) {
  #datePickerForm > .flex.flex-wrap.justify-between,
  .flex.medium-gaps:has(+ #datePickerForm) {
    grid-template-columns: 1fr;
  }
  .flex.medium-gaps:has(+ #datePickerForm) > p + p { display: none; }
}

/* Placeholder rendered in the Read-more modal when a section (Highlights,
   About this room, etc.) has no data on the room record. Muted italic
   so it reads as "no info", not real content. */
.sd-modal-na {
  display: inline-block;
  color: var(--sd-muted);
  font-style: italic;
  font-family: var(--sd-font-sans);
  font-size: 14px;
  letter-spacing: .2px;
}

/* ═══ 15. MOBILE RESPONSIVE SAFETY NET ═════════════════════════════════
   The legacy grid (col-lg-*, col-md-*, col-sm-*) only assigns widths at
   or above its own breakpoints — below 576px those classes are inert and
   the outer .flex.justify-between shell stays horizontal, pushing content
   off-screen. This block:
     - forces the outer two-column shell to stack on tablet+phone;
     - hides horizontal overflow so nothing shifts the viewport;
     - collapses col-lg/col-md widths to 100% on narrow screens;
     - resizes hero, breadcrumbs, cards and forms for touch use.
   Anything already handled by an earlier @media block is left as-is; the
   rules below layer on top without fighting them. */

html, body { max-width: 100vw; overflow-x: hidden; }

@media (max-width: 991px) {
  /* Outer "form left, summary right" shell — stack vertically. */
  main .flex.justify-between {
    flex-direction: column !important;
    gap: 16px !important;
  }
  main .flex.justify-between > [class*="col-lg"],
  main .flex.justify-between > [class*="col-md"],
  main .flex.justify-between > [class*="col-sm"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    box-sizing: border-box;
  }

  /* Row containers inside the columns — same story. */
  .row.align-center > [class*="col-lg"],
  .row.align-center > [class*="col-md"],
  .row.align-center > [class*="col-sm"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }
}

@media (max-width: 720px) {
  /* Reset the container padding a hair on phones so cards can breathe
     right up to the edge. */
  .container { padding: 0 14px; }

  /* Hero — smaller headline, snug spacing, brand logo sits above. */
  .sd-hero { padding: 22px 0 16px; }
  .sd-hero h1 { font-size: 26px !important; line-height: 1.2; }
  .sd-hero-lead { font-size: 14px; line-height: 1.6; }

  /* Room-cards column spacing */
  .rommcomp, .room-comp {
    margin-bottom: 14px !important;
  }
  .rommcomp > div:first-child, .room-comp > div:first-child {
    padding: 18px 18px !important;
    gap: 10px;
  }
  .rommcomp p.bold.marcellus, .room-comp p.bold.marcellus {
    font-size: 19px !important;
  }
  .descP { font-size: 14px !important; -webkit-line-clamp: 4; }
  .rommcomp .img-div, .room-comp .img-div,
  .rommcomp .img-div1, .room-comp .img-div1 {
    min-height: 180px !important; height: 180px !important;
  }

  /* Breadcrumb — smaller & tighter so it fits on one line before scroll */
  ul.list-style-type.pa-l-xs { gap: 4px !important; font-size: 11.5px; }
  ul.list-style-type.pa-l-xs .nav-icon { width: 10px; height: 10px; }

  /* Modal on phones — go nearly full-screen and pad the body. */
  .modal__inner { width: 100vw !important; max-width: 100vw !important;
                  height: 100vh; max-height: 100vh !important;
                  border-radius: 0 !important; }
  .modal_body { padding: 20px 18px !important; }
  .modal_header #window { min-height: 220px; }

  /* Confirmation page cards — tighten padding + fit the QR block */
  h3.jost { font-size: 18px !important; padding: 14px 16px !important; }

  /* Trust-badge strip — wrap without overflowing */
  .sd-footer-badge { font-size: 10.5px; padding: 5px 10px; }

  /* Guest stepper on phones — a hair taller, fills width */
  #datePickerForm .sd-guest-stepper,
  .sd-guest-stepper { min-width: 0; }

  /* Sticky "action bar" — leave breathing room above so Continue is
     always tappable without covering the last card content. */
  main.pb-3 { padding-bottom: 140px !important; }
}

@media (max-width: 560px) {
  /* Contact-form summary side-panel + expand-list — the side panel is
     already hidden by .hidden-div below 1044px; the expand-list at the
     bottom becomes the mobile summary. Add a floor of padding so the
     fixed expand-list never overlaps the last content row. */
  main.pb-3:has(.m-d.expand-list) { padding-bottom: 200px !important; }

  /* Confirmation page — check-in QR block was a fixed-width table.
     Force it to wrap so the QR sits above the copy on phones. */
  table[style*="border-collapse"] {
    display: block !important; width: 100% !important;
  }
  table[style*="border-collapse"] > tbody,
  table[style*="border-collapse"] > tbody > tr {
    display: block !important; width: 100% !important;
  }
  table[style*="border-collapse"] > tbody > tr > td {
    display: block !important; width: 100% !important;
    padding: 8px 0 !important;
  }

  /* Modal footer button — bigger tap target */
  .sd-modal-footer button { height: 56px; font-size: 15px !important; }
}

/* Keep the trust-chip strip from overflowing on very narrow screens. */
@media (max-width: 380px) {
  .sd-footer-badge { font-size: 10px; letter-spacing: .9px; padding: 4px 8px; }
}