/* =====================================================
   VBO / Vik Booking – Global Styling
   Clean • Consistent • Maintainable

   Moved here from Customizer → Additional CSS so the styling
   belongs to the site rather than to the hello-elementor theme.
   Edit this file; the Customizer is now empty on purpose.
   ===================================================== */

/* -----------------------------------------------------
   Theme tokens (easy editing)
   ----------------------------------------------------- */
:root {
  --vbo-accent: #fcc397;
  --vbo-text-on-accent: #000;
  --vbo-white: #fff;
  --vbo-black: #000;

  --vbo-btn-pad-y: 20px;
  --vbo-btn-pad-x: 30px;

  --vbo-mobile-gap: 16px;
  --vbo-mobile-btn-gap: 10px;

  /* Shared height for the home-search pills. Each pill used to derive its
     own height from its own padding, which left them 53–58px and visibly
     uneven; they now all resolve to this. */
  --vbo-pill-height: 58px;

  /* Horizontal inset inside a search pill. Narrower when the bar is stacked;
     every pill reads it so they cannot drift apart. */
  --vbo-pill-pad-x: 24px;
}

/* -----------------------------------------------------
   Results header icon color
   ----------------------------------------------------- */
.vbo-results-head > div > i {
  vertical-align: top;
  margin: 10px 10px 0 auto;
  font-size: 16px;
  color: var(--vbo-accent);
}

/* -----------------------------------------------------
   Home search – text & labels
   ----------------------------------------------------- */
.vbo-horizsearch-humanformat-wrap .vbmodhorsearch-hum-dates-wrap,
.vbo-horizsearch-humanformat-wrap .vbmodhorsearch-hum-guests-count,
.vbo-horizsearch-humanformat-wrap label {
  color: var(--vbo-white);
}

/* -----------------------------------------------------
   Home search – Book Now button
   ----------------------------------------------------- */
body .vbmodhorsearchmaindiv
form .vbmodhorsearchbookdiv .btn {
  padding: var(--vbo-btn-pad-y) var(--vbo-btn-pad-x) !important;
}

/* -----------------------------------------------------
   Home search – mobile spacing (SAFE)
   ----------------------------------------------------- */
@media (max-width: 767px) {
  .vbmodhorsearchmaindiv form > * {
    margin-bottom: var(--vbo-mobile-gap) !important;
  }

  .vbmodhorsearchmaindiv form > *:last-child {
    margin-bottom: 0 !important;
  }

  body .vbmodhorsearchmaindiv
  form .vbmodhorsearchbookdiv .btn {
    margin-top: var(--vbo-mobile-btn-gap) !important;
  }
}

/* -----------------------------------------------------
   Preferred color buttons
   ----------------------------------------------------- */
.btn.vbo-pref-color-btn {
  background-color: var(--vbo-accent);
  border-color: var(--vbo-accent);
  color: var(--vbo-text-on-accent);
}

.btn.vbo-pref-color-btn:hover {
  background-color: var(--vbo-black);
  border-color: var(--vbo-black);
  color: var(--vbo-white);
}

/* -----------------------------------------------------
   Progress bar
   ----------------------------------------------------- */
ol.vbo-stepbar li.vbo-step-complete,
ol.vbo-stepbar li.vbo-step-current {
  border-bottom: 4px solid var(--vbo-accent) !important;
}

ol.vbo-stepbar li.vbo-step-complete::before,
ol.vbo-stepbar li.vbo-step-current::before {
  background-color: var(--vbo-accent);
}

ol.vbo-stepbar li.vbo-step-current::before {
  border: 2px solid var(--vbo-white) !important;
}

/* -----------------------------------------------------
   Request Information button
   ----------------------------------------------------- */
.vbo-reqinfo-opener,
.vbdialog-reqinfo button.btn {
  background-color: var(--vbo-accent);
  border-color: var(--vbo-accent);
  color: var(--vbo-white);
}

.vbo-reqinfo-opener:hover {
  background-color: var(--vbo-accent);
  border-color: var(--vbo-accent);
}

/* -----------------------------------------------------
   Datepicker – selected & hover states
   ----------------------------------------------------- */
.ui-datepicker-calendar a.ui-state-active,
.ui-datepicker-calendar td.checkin-date a,
.ui-datepicker-calendar td.checkout-date a,
.ui-datepicker td a.ui-state-active,
.ui-datepicker td a.ui-state-active:hover {
  background-color: var(--vbo-accent) !important;
  border-color: var(--vbo-accent) !important;
  color: var(--vbo-text-on-accent) !important;

  /* Was 50%, which drew a circle back when a cell was square. The cells now
     carry a rate under the date and measure 47x38, and on that shape 50% is a
     flattened ellipse. A fixed radius gives the same rounded square at any
     cell size. */
  border-radius: 14px !important;
}

.ui-datepicker td a.ui-state-hover,
.ui-datepicker td a:hover,
.ui-datepicker td span.ui-state-hover,
.ui-datepicker td span:hover {
  background-color: var(--vbo-accent) !important;
  border-color: var(--vbo-accent) !important;
  color: var(--vbo-text-on-accent) !important;
}

/* -----------------------------------------------------
   Datepicker & guests selector focus
   ----------------------------------------------------- */
.vbmodhorsearch-humcalcont
.vbo-horizsearch-dpicker-cont-active,
.vbmodhorsearch-humcalcont
.vbo-horizsearch-showcalendar:hover,
.vbmodhorsearch-hum-guests-count:hover,
.vbmodhorsearch-hum-guests-count.vbo-horizsearch-dpicker-cont-active {
  border-color: var(--vbo-accent) !important;
  box-shadow: 0 0 0 0.1px var(--vbo-accent) !important;
}


.vbrowroomcapacity i {
  font-size: 20px;
  margin-right: .5px;
  color: var(--vbo-accent);
}


/* Default price */
.vbo-showprc-price-entry-cost {
  color: #000;
}

/* Active / selected rate */
.vbo-rate-selected .vbo-showprc-price-entry-cost {
  color: var(--vbo-accent);
}


/* Geef de slider een vaste (of min-)hoogte + verberg overflow */
.vik-dots-slider,
.vik-dots-slider-inner {
  position: relative !important;
  width: 100% !important;
  height: 240px !important;      /* pas aan */
  overflow: hidden !important;
}

/* Laat Vik z'n left-animatie intact: NIET left/inset/position overschrijven */
.vik-dots-slider-inner .vik-dots-slider-slide {
  width: 100% !important;
  height: 100% !important;
}

/* De echte afbeelding laten vullen (zonder de slider te breken) */
.vik-dots-slider-inner .vik-dots-slider-slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

.vbroomnumnightsdet {
  margin: 12px 10px 0 0;
  text-align: right;
  font-size: 14px;
  font-weight: 500;
  float: right;
  border-radius: 10px;
  padding: 5px 10px;
  background: var(--vbo-accent);
  color: var(--vbo-text-on-accent);
  line-height: 1.3em;
}

.vbo-oconfirm-roomname {
    color: #fcc397;
    font-weight: 700;
}

/* Vik Booking – staydetails icon kleur forceren (alles) */
.vbo-showprc-staydetails i,
.vbo-showprc-staydetails span,
.vbo-showprc-staydetails svg,
.vbo-showprc-staydetails svg * ,
.vbo-showprc-staydetails i::before,
.vbo-showprc-staydetails span::before {
  color: #fcc397 !important;
  fill: #fcc397 !important;
  stroke: #fcc397 !important;
}

/* Verberg labels boven de velden */
.vbmodhorsearch-hum-dates-wrap label,
.vbmodhorsearch-hum-guests-wrap > label {
    display: none !important;
}

/* -----------------------------------------------------
   Mobile only – Book Now button full width
   ----------------------------------------------------- */
@media (max-width: 767px) {
  body .vbmodhorsearchmaindiv
  form .vbmodhorsearchbookdiv .btn {
    width: 100% !important;
    display: block;
  }
}

/* Rounded datepicker field */
.vbo-horizsearch-showcalendar {
  border-radius: 30px !important;
}

/* Rounded search fields (dates + guests) */
.vbo-horizsearch-showcalendar,
.vbmodhorsearch-hum-guests-count {
  border-radius: 30px !important;
}


.vbmodhorsearch-hum-dates-wrap .vbo-horizsearch-numnights-inner {
  border-radius: 30px !important;
}


/* =========================================
   FIX: Dropdown labels (Room / Adults / Children)
   ========================================= */

/* Room */
.vbo-horizsearch-humanformat-wrap .vbmodhorsearchroomsel label,
/* Adults */
.vbo-horizsearch-humanformat-wrap label.horsanumlb,
/* Children */
.vbo-horizsearch-humanformat-wrap label.horscnumlb {
  color: #222 !important;
}


/* =========================================
   Guests / Rooms pill altijd wit houden
   ========================================= */

.vbmodhorsearch-hum-guests-count,
.vbmodhorsearch-hum-guests-count:hover,
.vbmodhorsearch-hum-guests-count:focus,
.vbmodhorsearch-hum-guests-count:active,
.vbmodhorsearch-hum-guests-count.vbo-active,
.vbmodhorsearch-hum-guests-count.vbo-open {
  background-color: transparent !important;
  border-color: #ffffff !important;
}

/* Vik Gallery – alleen iconen, geen achtergrond */
.vikfxg-wrapper .vikfxg-close,
.vikfxg-wrapper .vikfxg-prev,
.vikfxg-wrapper .vikfxg-next {
    background: transparent !important;
    border-radius: 0 !important;

    color: #000 !important;   /* icon kleur */
}

/* forceer SVG / font icons */
.vikfxg-wrapper i,
.vikfxg-wrapper svg {
    color: #000 !important;
    fill: #000 !important;
}

/* =========================================
   Home search bar
   =========================================

   Split deliberately in two: the LOOK (colours, borders, type) applies at
   every width, the LAYOUT (row heights, stacking order) is per breakpoint.
   An earlier version put everything behind min-width:768px, which left the
   whole mobile bar untouched — hard white hairlines and all.
   ========================================= */

/* ---------- look: all widths ---------- */

/* Pure #fff hairlines on a dark bar read as cheap — at full strength the
   border competes with the text instead of framing it. A translucent edge
   plus a barely-there fill gives depth without adding weight. */
.vbmodhorsearchmaindiv .vbo-horizsearch-showcalendar,
.vbmodhorsearchmaindiv .vbmodhorsearch-hum-guests-count,
.vbmodhorsearchmaindiv .vbo-horizsearch-numnights-inner {
  border-color: rgba(255, 255, 255, 0.22) !important;
  background-color: rgba(255, 255, 255, 0.035) !important;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

/* The calendar glyph is a hint, not the message. */
.vbmodhorsearchmaindiv .vbo-horizsearch-showcalendar > i {
  font-size: 17px;
  opacity: 0.5;
}

.vbmodhorsearchmaindiv .vbo-horizsearch-placeholder {
  font-size: 15px;
  letter-spacing: 0.01em;
  opacity: 0.72;
}

/* Chosen date.

   The markup is `<span>13</span>` next to a block holding month, year and
   weekday, so the month/year land on the block's first line and the weekday on
   its second. With the day number set large and the row centred, that number
   floated beside a two-line column and the month read as loose text hanging
   off it. Baseline alignment puts "13" and "August 2026" on one line with the
   weekday beneath, so it reads as a date rather than a number plus a caption. */
.vbmodhorsearchmaindiv .vbo-horizsearch-period-from,
.vbmodhorsearchmaindiv .vbo-horizsearch-period-to {
  align-items: baseline !important;
}

/* Vik styles this as `.vbo-horizsearch-showcalendar > div .vbo-horizsearch-period-mday`
   — three classes, so a two-class override loses. It also sets
   `vertical-align: top` and a 3px top margin, both of which fight the baseline
   alignment above, so they are reset here rather than left to argue. */
.vbmodhorsearchmaindiv .vbo-horizsearch-showcalendar > div .vbo-horizsearch-period-mday {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  margin-top: 0;
  margin-right: 7px;
  vertical-align: baseline;
}

/* Vik forces uppercase from `.vbo-horizsearch-showcalendar > div .…-month`
   (three classes), so this has to match that weight. Shouted caps beside the
   day number read as a label rather than part of the date. */
.vbmodhorsearchmaindiv .vbo-horizsearch-showcalendar > div .vbo-horizsearch-period-month,
.vbmodhorsearchmaindiv .vbo-horizsearch-showcalendar > div .vbo-horizsearch-period-year {
  font-size: 13px;
  opacity: 0.85;
  text-transform: none;
}

/* Vik caps this block at 110px with overflow hidden, which is enough to clip a
   long month once the date sits on one line. The pills are wide enough now. */
.vbmodhorsearchmaindiv .vbo-horizsearch-showcalendar .vbo-horizsearch-period-dt {
  max-width: none;
  overflow: visible;
}

.vbmodhorsearchmaindiv .vbo-horizsearch-period-wday {
  font-size: 12px;
  opacity: 0.5;
}

/* Vik Booking always renders the nights wrapper, empty until dates are picked.
   At zero height it is invisible but still occupies a slot in the flex layout,
   so its gap was added on top of the form's own — the stack read 10 / 20 / 10
   instead of an even rhythm. */
.vbmodhorsearchtotnights:not(:has(.vbo-horizsearch-numnights-inner)) {
  display: none !important;
}

.vbmodhorsearchmaindiv .vbo-horizsearch-numnights-inner {
  font-size: 13px;
  opacity: 0.9;
}

.vbmodhorsearchmaindiv .vbmodhorsearchbookdiv .btn {
  font-weight: 600;
  letter-spacing: 0.015em;
}

/* Background only. The accent border-on-hover defined earlier in this file has
   the same specificity, so touching border-color here would silently cancel
   it — the lift comes from the fill instead. */
.vbmodhorsearchmaindiv .vbo-horizsearch-showcalendar:hover,
.vbmodhorsearchmaindiv .vbmodhorsearch-hum-guests-count:hover {
  background-color: rgba(255, 255, 255, 0.085) !important;
}

/* ---------- layout: desktop row ---------- */

@media (min-width: 768px) {
  .vbmodhorsearchmaindiv form {
    align-items: center;
  }

  /* Vik Booking ships `.vbmodhorsearch-hum-guests-count { min-height: 53px }`
     — one class, the same specificity as a bare class selector here. Because
     SiteGround combines the stylesheets and emits Vik's file after this one,
     that tie is decided by source order and Vik wins. Hence the extra ancestor
     and the !important: the height must not depend on concatenation order. */
  .vbmodhorsearchmaindiv .vbo-horizsearch-showcalendar,
  .vbmodhorsearchmaindiv .vbmodhorsearch-hum-guests-count,
  .vbmodhorsearchmaindiv .vbo-horizsearch-numnights-inner {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: var(--vbo-pill-height) !important;
  }

  /* Left-aligned, the way every booking bar worth copying does it — centring
     the contents was tried and read as a novelty rather than a refinement. */
  .vbmodhorsearchmaindiv .vbo-horizsearch-showcalendar,
  .vbmodhorsearchmaindiv .vbmodhorsearch-hum-guests-count {
    justify-content: flex-start;
    padding: 10px 24px !important;
  }

  .vbmodhorsearchmaindiv .vbo-horizsearch-showcalendar {
    gap: 14px;
  }

  .vbmodhorsearchmaindiv .vbmodhorsearch-hum-guests-count {
    gap: 4px;
  }

  /* The nights pill is markup like `<span>Nights:</span> <span>3</span>`, and
     flex discards the whitespace text node between the two spans — it would
     read "Nights:3". The spacing has to be declared instead of inherited. */
  .vbmodhorsearchmaindiv .vbo-horizsearch-numnights-inner {
    gap: 0.35em;
  }

  .vbmodhorsearchmaindiv .vbmodhorsearchbookdiv .btn {
    box-sizing: border-box;
    min-height: var(--vbo-pill-height);
  }
}

/* ---------- layout: mobile stack ---------- */

@media (max-width: 767px) {
  /* "Nights" is first in the DOM. In a desktop row that goes unnoticed, but
     stacked it announced the night count before either date had been picked.
     `order` fixes the reading order.
     Note: `order` moves things visually only — the DOM order is unchanged, so
     `:last-child` still matches the check-out field. That is why the spacing
     below uses flex `gap` rather than margins on a last child. */
  .vbmodhorsearchmaindiv .vbmodhorsearch-hum-dates-wrap {
    flex-wrap: wrap;
    gap: 10px;
  }

  .vbmodhorsearchmaindiv .vbmodhorsearch-humcalcont {
    order: 1;
    width: 100%;
  }

  .vbmodhorsearchmaindiv .vbmodhorsearchtotnights {
    width: 100%;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .vbmodhorsearchmaindiv .vbmodhorsearchtotnights .vbo-horizsearch-numnights-inner {
    margin-bottom: 0 !important;
  }

  /* One rhythm for the whole stack. Margins on the children stacked with the
     wrappers' own and produced 10 / 10 / 36 / 31; a single gap keeps it even. */
  .vbmodhorsearchmaindiv form {
    flex-direction: column;
    gap: 10px;
  }

  .vbmodhorsearchmaindiv form > * {
    margin-bottom: 0 !important;
    width: 100%;
  }

  .vbmodhorsearchmaindiv .vbmodhorsearch-hum-dates-wrap > * {
    margin-bottom: 0 !important;
  }

  .vbmodhorsearchmaindiv .vbmodhorsearchbookdiv {
    margin-top: 0 !important;
  }

  /* Matches the specificity of the mobile button rule earlier in this file
     (`body … form … .btn`), which would otherwise re-add its top margin. */
  body .vbmodhorsearchmaindiv form .vbmodhorsearchbookdiv .btn {
    margin-top: 0 !important;
  }

  .vbmodhorsearchmaindiv .vbo-horizsearch-showcalendar,
  .vbmodhorsearchmaindiv .vbmodhorsearch-hum-guests-count,
  .vbmodhorsearchmaindiv .vbo-horizsearch-numnights-inner {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: var(--vbo-pill-height);
    padding: 10px var(--vbo-pill-pad-x) !important;
  }

  .vbmodhorsearchmaindiv .vbo-horizsearch-numnights-inner {
    gap: 0.35em;
  }

  .vbmodhorsearchmaindiv .vbmodhorsearchbookdiv .btn {
    box-sizing: border-box;
    min-height: var(--vbo-pill-height);
  }
}

/* ---------- nights pill: reading order ---------- */

/* Vik Booking ships, up to 1280px:
     .vbmodhorsearch-hum-dates-wrap .vbmodhorsearchtotnights { flex:1 1 100%; order:0 }
   which pushes the night count onto its own line ABOVE both dates — so the bar
   announces "Nights: 9" before either date has been picked. That selector has
   two classes, the same weight as a two-class override, and Vik's file is
   concatenated after this one, so a tie would go to Vik. Three classes plus
   !important settles it independently of bundling order.

   Scoped to 1280px rather than 767px on purpose: Vik's rule covers tablets
   too, where the same jump happens. */
@media (max-width: 1280px) {
  .vbmodhorsearchmaindiv .vbmodhorsearch-hum-dates-wrap .vbmodhorsearchtotnights {
    order: 3 !important;
  }
}

/* ---------- desktop: proportional structure ---------- */

/* The bar had no sizing system: the dates group was `flex: 1 1 0` and simply
   absorbed every spare pixel, ending up at 837px of a 1200px row (70%) while
   Rooms/Guests got 196px (16%). Three inputs at wildly different widths is
   what made it read as messy rather than composed.
   Now the three fields share the row evenly and the button sizes to content. */
@media (min-width: 1160px) {
  .vbmodhorsearchmaindiv form {
    gap: 10px;
  }

  .vbmodhorsearchmaindiv form > * {
    margin: 0 !important;
  }

  /* Two date fields plus the nights pill live in here, so it takes a double
     share of the row. */
  .vbmodhorsearchmaindiv .vbmodhorsearch-hum-dates-wrap {
    flex: 2 1 0 !important;
    gap: 10px;
  }

  /* Vik Booking leaves .vbmodhorsearchtotnights empty until dates are picked
     and only then injects the pill, so the group needs the extra basis only in
     that state — reserving it unconditionally made the date fields 46px WIDER
     than Rooms/Guests while the bar was still empty. The basis covers the
     nights pill (~101px) plus its gap, which would otherwise be taken out of
     the two date fields and leave them narrower instead. */
  .vbmodhorsearchmaindiv .vbmodhorsearch-hum-dates-wrap:has(.vbo-horizsearch-numnights-inner) {
    flex: 2 1 111px !important;
  }

  .vbmodhorsearchmaindiv .vbmodhorsearch-humcalcont {
    flex: 1 1 0 !important;
    margin: 0 !important;
  }

  /* Content-sized: "Nights: 9" should not claim a full column. */
  .vbmodhorsearchmaindiv .vbmodhorsearchtotnights {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .vbmodhorsearchmaindiv .vbmodhorsearch-hum-guests-wrap {
    flex: 1 1 0 !important;
    margin: 0 !important;
  }

  .vbmodhorsearchmaindiv .vbmodhorsearch-hum-guests-count {
    width: 100% !important;
  }

  .vbmodhorsearchmaindiv .vbmodhorsearchbookdiv {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  /* Matches the specificity of the button padding rule near the top of this
     file, which also carries a margin. */
  body .vbmodhorsearchmaindiv form .vbmodhorsearchbookdiv .btn {
    margin: 0 !important;
  }
}

/* =========================================
   Rooms / guests dropdown
   =========================================

   Vik Booking renders this panel as a plain white rectangle with unstyled
   browser selects, and the two rows follow different patterns: "Rooms" puts
   its label above a full-width field, while each room row puts "Room 1" beside
   a "Guests" label stacked over the field. Same panel, two layouts.

   Everything below unifies it on one pattern — label above field, fields the
   same width — and matches the panel to the search bar it drops out of.
   ========================================= */

.vbmodhorsearch-hum-guests-modifier {
  width: 280px !important;
  box-sizing: border-box;
  padding: 18px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 16px !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.16) !important;
}

.vbmodhorsearch-hum-guests-modifier label,
.vbmodhorsearch-hum-guests-modifier .horsrnum {
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.62;
}

.vbmodhorsearch-hum-guests-modifier select {
  width: 100% !important;
  height: 42px !important;
  padding: 6px 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.16) !important;
  border-radius: 10px !important;
  background-color: #fff !important;
  font-size: 15px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vbmodhorsearch-hum-guests-modifier select:focus {
  outline: none !important;
  border-color: var(--vbo-accent) !important;
  box-shadow: 0 0 0 3px rgba(252, 195, 151, 0.35) !important;
}

/* Row 1 — Rooms */
.vbmodhorsearch-hum-guests-modifier .vbmodhorsearchroomsel {
  margin-bottom: 16px !important;
}

.vbmodhorsearch-hum-guests-modifier .vbmodhorsearchroomsel label {
  display: block;
  margin-bottom: 6px;
}

.vbmodhorsearch-hum-guests-modifier .vbhsrnselsp {
  display: block;
}

/* Per-room rows. Vik lays these out as a flex row with the label beside the
   field, which pushed the panel wider than itself and never lined up; stacking
   them matches the Rooms row above. */
.vbmodhorsearch-hum-guests-modifier .vbmodhorsearchroomdentr,
.vbmodhorsearch-hum-guests-modifier .vbmodhorsearchroomdentrfirst,
.vbmodhorsearch-hum-guests-modifier .vbmoreroomscontmod .vbmodhorsearchroomdentr {
  display: block !important;
  margin-top: 0 !important;
}

.vbmodhorsearch-hum-guests-modifier .horsrnum {
  display: block !important;
  flex: none !important;
  margin-top: 0 !important; /* Vik sets 30px here, which broke the rhythm */
  margin-bottom: 6px !important;
}

.vbmodhorsearch-hum-guests-modifier .horsanumdiv {
  display: block !important;
  margin-right: 0 !important; /* 10px here made room 1's field wider than the rest */
}

.vbmodhorsearch-hum-guests-modifier .horsanumsel {
  display: block !important;
  margin-right: 0 !important;
}

/* Repeating "Guests" under every room is noise — the row already says which
   room it is, and the panel is opened from the Guests field. */
.vbmodhorsearch-hum-guests-modifier .horsanumlb {
  display: none !important;
}

/* Second and later rooms are injected into this container at runtime. */
.vbmodhorsearch-hum-guests-modifier .vbmoreroomscontmod > div {
  margin-top: 16px !important;
}

/* ---------- tablet / narrow desktop: two tidy rows ---------- */

/* The proportional row above needs roughly 1080px before it fits: two date
   fields, the nights pill, Rooms/Guests and the button. Below that it used to
   keep forcing one row anyway, squeezing the fields to ~180px and leaving them
   on four different baselines. Here the dates take the first row and
   Rooms/Guests plus the button take the second.

   The selector carries three classes to outweigh the `:has()` rule in the
   1080px block, which is both more specific and !important. */
@media (min-width: 768px) and (max-width: 1159px) {
  .vbmodhorsearchmaindiv form {
    flex-wrap: wrap !important;
    gap: 10px;
  }

  .vbmodhorsearchmaindiv form > * {
    margin: 0 !important;
  }

  .vbmodhorsearchmaindiv .vbo-horizsearch-humanformat-wrap .vbmodhorsearch-hum-dates-wrap,
  .vbmodhorsearchmaindiv .vbmodhorsearch-hum-dates-wrap:has(.vbo-horizsearch-numnights-inner) {
    flex: 1 1 100% !important;
    gap: 10px;
  }

  .vbmodhorsearchmaindiv .vbmodhorsearch-humcalcont {
    flex: 1 1 0 !important;
  }

  .vbmodhorsearchmaindiv .vbmodhorsearch-hum-guests-wrap {
    flex: 1 1 auto !important;
  }

  .vbmodhorsearchmaindiv .vbmodhorsearch-hum-guests-count {
    width: 100% !important;
  }

  .vbmodhorsearchmaindiv .vbmodhorsearchbookdiv {
    flex: 0 0 auto !important;
  }
}

/* Vik gives the nights pill `flex: 1 1 100%` below 1280px, which drops it onto
   a row of its own and drags the date fields along with it. Two classes there,
   so this needs three to win regardless of bundling order. */
@media (min-width: 768px) {
  .vbmodhorsearchmaindiv .vbmodhorsearch-hum-dates-wrap .vbmodhorsearchtotnights {
    flex: 0 0 auto !important;
  }

  .vbmodhorsearchmaindiv .vbmodhorsearch-hum-dates-wrap {
    flex-wrap: nowrap !important;
  }
}

/* ---------- nights pill: align with the rest ---------- */

/* Centred text made it the odd one out in a row of left-aligned fields.
   The inset has to follow the breakpoint: the other pills sit at 24px on
   desktop and 18px stacked, and a hard-coded 24px here left the nights pill
   6px out of line with them on mobile. */
.vbmodhorsearchmaindiv .vbo-horizsearch-numnights-inner {
  justify-content: flex-start !important;
  padding-left: var(--vbo-pill-pad-x, 24px) !important;
}

/* ---------- guests dropdown: say what the fields are ---------- */

/* Hiding the per-room "Guests" label removed the only thing explaining what
   the number means — "Room 1" alone reads like a room picker. `display:
   contents` lets the label and its select join the room label's flex row, so
   the heading reads "ROOM 1 GUESTS" on one line with the field beneath, and
   the <label for=…> stays a real label rather than decoration. */
.vbmodhorsearch-hum-guests-modifier .vbmodhorsearchroomdentrfirst,
.vbmodhorsearch-hum-guests-modifier .vbmoreroomscontmod .vbmodhorsearchroomdentr {
  display: flex !important;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 7px;
}

.vbmodhorsearch-hum-guests-modifier .horsanumdiv {
  display: contents !important;
}

.vbmodhorsearch-hum-guests-modifier .horsanumlb {
  display: inline !important;
  margin: 0 0 6px !important;
}

.vbmodhorsearch-hum-guests-modifier .horsrnum {
  margin-bottom: 6px !important;
}

.vbmodhorsearch-hum-guests-modifier .horsanumsel {
  flex: 1 1 100%;
}

/* ---------- one baseline across the row ---------- */

/* Vik puts `margin: 0 0 5px` on the nights pill. Those 5px made its wrapper
   63px tall against 58px pills, which stretched the dates group, which
   stretched the form — so Rooms/Guests and the button centred 5px lower than
   the dates. One stray margin, five pixels of drift across the whole bar. */
.vbmodhorsearchmaindiv .vbo-horizsearch-numnights-inner {
  margin-bottom: 0 !important;
}

@media (min-width: 768px) {
  .vbmodhorsearchmaindiv .vbmodhorsearch-hum-dates-wrap {
    align-items: center !important;
  }

  .vbmodhorsearchmaindiv .vbmodhorsearchtotnights {
    display: flex !important;
    align-items: center;
  }

  .vbmodhorsearchmaindiv .vbmodhorsearch-humcalcont,
  .vbmodhorsearchmaindiv .vbmodhorsearch-hum-guests-wrap {
    display: flex;
    align-items: center;
  }
}

/* The month/year/weekday block wraps freely, so a narrow field could break
   "September 2026" across lines and grow the pill to 77px against its 58px
   neighbours — one tall field knocked the whole row off its baseline. Keeping
   month and year together and giving the weekday its own line pins every
   filled field to exactly two lines. */
.vbmodhorsearchmaindiv .vbo-horizsearch-period-month,
.vbmodhorsearchmaindiv .vbo-horizsearch-period-year {
  white-space: nowrap;
}

.vbmodhorsearchmaindiv .vbo-horizsearch-period-wday {
  flex: 1 1 100%;
}

/* Stacked, the pills came out at 59 / 48 / 56 / 58 — the nights pill in
   particular kept min-height 0 because a two-class rule loses to Vik's own.
   Three classes settle it and put every field on the shared height. */
@media (max-width: 767px) {
  .vbmodhorsearchmaindiv .vbmodhorsearch-humcalcont .vbo-horizsearch-showcalendar,
  .vbmodhorsearchmaindiv .vbmodhorsearch-hum-dates-wrap .vbo-horizsearch-numnights-inner,
  .vbmodhorsearchmaindiv .vbmodhorsearch-hum-guests-wrap .vbmodhorsearch-hum-guests-count {
    box-sizing: border-box;
    min-height: var(--vbo-pill-height) !important;
  }
}

/* ---------- guests dropdown: consistent row labels ---------- */

/* Vik only renders a "Guests" <label> for the FIRST room; rooms added at
   runtime get the bare number field. Showing that label therefore made room 1
   and room 2 read differently, and pulling it into the label row shrank the
   injected field to 172px against 242px.

   So: back to the stacked rows that measured equal, with the wording carried
   by the row label itself, which every room has. */
.vbmodhorsearch-hum-guests-modifier .vbmodhorsearchroomdentrfirst,
.vbmodhorsearch-hum-guests-modifier .vbmoreroomscontmod .vbmodhorsearchroomdentr {
  display: block !important;
}

.vbmodhorsearch-hum-guests-modifier .horsanumdiv {
  display: block !important;
}

.vbmodhorsearch-hum-guests-modifier .horsanumlb {
  display: none !important;
}

.vbmodhorsearch-hum-guests-modifier .horsrnum::after {
  content: " · guests";
  opacity: 0.75;
}

/* ---------- one text size across the bar ---------- */

/* The bar mixed four sizes: 24px guest counts, 18px day numbers, 17px nights
   and 13px month/weekday. The numbers towered over their own labels instead of
   sitting on the same line as them. One size for everything; the numbers keep
   their weight, which is what makes them read as values. */
.vbmodhorsearchmaindiv .vbo-horizsearch-showcalendar > div .vbo-horizsearch-period-mday,
.vbmodhorsearchmaindiv .vbo-horizsearch-showcalendar > div .vbo-horizsearch-period-month,
.vbmodhorsearchmaindiv .vbo-horizsearch-showcalendar > div .vbo-horizsearch-period-year,
.vbmodhorsearchmaindiv .vbo-horizsearch-period-wday,
.vbmodhorsearchmaindiv .vbo-horizsearch-placeholder,
.vbmodhorsearchmaindiv .vbo-horizsearch-numnights-inner,
.vbmodhorsearchmaindiv .vbmodhorsearch-hum-guests-count,
.vbmodhorsearchmaindiv .vbmodhorsearch-hum-guests-count span,
.vbmodhorsearchmaindiv .vbmodhorsearch-hum-guests-count div {
  font-size: 14px !important;
  line-height: 1.35 !important;
}

/* Vik bottom-aligns the count with `align-self: flex-end`, which left the
   number sitting below its label's baseline once both were the same size. */
.vbmodhorsearchmaindiv .vbmodhorsearch-hum-guests-wrap .vbmodhorsearch-hum-guests-count > div {
  display: flex !important;
  align-items: baseline !important;
  gap: 5px;
}

.vbmodhorsearchmaindiv .vbmodhorsearch-hum-guests-wrap .vbmodhorsearch-hum-guests-count > div span {
  align-self: baseline !important;
  font-weight: 600 !important;
}

/* ---------- dropdown matches the field it belongs to ---------- */

/* Was a fixed 280px against a field that ranges from ~220 to ~360px wide.
   The guests wrapper is already the panel's offset parent (Vik sets
   position: relative on it), so a percentage resolves against the field and
   the panel tracks it at every breakpoint — no extra positioning context, and
   Vik's own open/close placement is untouched. */
.vbmodhorsearch-hum-guests-modifier {
  width: 100% !important;
  min-width: 0 !important;
}

/* ---------- date fields: a stable text column ---------- */

/* The day number is as wide as its digits — 14px for "13", 9px for "4" — so
   the month started at a different offset in every field and stacked fields
   looked ragged. A fixed column plus tabular figures pins the month to the
   same x whatever the date. */
.vbmodhorsearchmaindiv .vbo-horizsearch-showcalendar > div .vbo-horizsearch-period-mday {
  min-width: 1.35em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- guests dropdown sits under its field ---------- */

/* Vik lets the panel find its own position, which put it on top of the search
   bar — covering the very field you just clicked. Anchored to the bottom of
   the field instead; the wrapper is already the positioning context, so this
   is just naming the offset Vik left implicit. */
.vbmodhorsearch-hum-guests-modifier {
  top: 100% !important;
  bottom: auto !important;
  margin-top: 8px !important;
}

/* =========================================
   Search form on the results page
   =========================================

   Reached by searching without dates. Vik renders it as a flat grey band with
   unstyled browser inputs and a shouting red error box — the least finished
   surface on the site, and the first thing a visitor sees when their search
   comes up empty. Same language as the home bar and the guests dropdown.
   ========================================= */

/* The message states a requirement; it is not an error screen. */
.wrap.plugin-container .err {
  padding: 16px 18px !important;
  border: 1px solid rgba(200, 60, 40, 0.18) !important;
  border-left: 4px solid #c8402c !important;
  border-radius: 12px !important;
  background: #fff7f5 !important;
  color: #8a2b1c !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}

.vbdivsearch.vbo-search-mainview {
  padding: 22px 24px !important;
  border: 1px solid rgba(0, 0, 0, 0.07) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06) !important;
}

/* Fields sat on a baseline of their own; bottom-aligning the row keeps the
   labels stacked above inputs that all end level with the button. */
.vbdivsearch .vb-search-inner {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
}

.vbdivsearch .vb-search-inner label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.62;
}

.vbdivsearch .vb-search-inner input[type="text"],
.vbdivsearch .vb-search-inner select {
  box-sizing: border-box;
  height: 46px !important;
  padding: 6px 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.16) !important;
  border-radius: 10px !important;
  background-color: #fff !important;
  font-size: 15px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vbdivsearch .vb-search-inner input[type="text"]:focus,
.vbdivsearch .vb-search-inner select:focus {
  outline: none !important;
  border-color: var(--vbo-accent) !important;
  box-shadow: 0 0 0 3px rgba(252, 195, 151, 0.35) !important;
}

.vbdivsearch .vbo-search-inpblock input[type="text"] {
  min-width: 190px;
}

.vbdivsearch .vbo-search-num-racblock {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
}

.vbdivsearch .vbo-search-num-aduchild-block {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

/* "Room 1" sits beside its field and must not wrap onto two lines. */
.vbdivsearch .vbo-search-num-adults-entry-label {
  white-space: nowrap;
}

.vbdivsearch .vbo-search-submit .btn {
  height: 46px !important;
  padding: 0 30px !important;
  border-radius: 200px !important;
  font-weight: 600;
  box-shadow: none !important;
}

/* The 12px side padding above left a rooms select 35px wide — just an arrow,
   no visible value. These need room for both. */
.vbdivsearch .vb-search-inner select {
  min-width: 84px !important;
  padding-right: 26px !important;
}

/* =========================================
   Search results, laid out the way a booking site lays them out
   =========================================

   A result is not a brochure card — it is a row you compare against the row
   below it. So instead of the tall picture-on-top card the /bungalows/ listing
   uses, these become horizontal rows: picture on the left at a fixed width,
   the room and what it includes in the middle, and the price with its button
   in a column of its own on the right, split off by a rule.

   That last column is the point of the layout. Prices sitting in the same
   place down the page can be read against each other at a glance, which is the
   one thing a visitor is actually doing on a results page.

   Vik's markup already separates the three parts — `.vbimglistdiv`,
   `.vbo-info-room` and `.vbcontdivtot` — so this is a matter of arranging
   them, with no template override needed.
   ========================================= */

.vbo-searchresults-classic-wrap .vbo-searchresults-party-content {
  display: flex !important;
  flex-direction: column;
  gap: 16px;
}

.vbo-searchresults-classic-wrap .room_item {
  margin: 0 !important;
  padding: 0 !important;

  /* A hairline rather than a shadow: rows stacked close together need a
     definite edge between them, and stacked shadows turn into grey mush. */
  border: 1px solid #e0e3e8 !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
  overflow: hidden !important;

  display: flex !important;
  flex-direction: column;
}

/* On a phone the rows ran ~40px past the right edge of the screen.

   Vik's `.vbo-results-content` is a flex container, and a flex item defaults to
   `min-width: auto`, which means it refuses to shrink below the widest thing
   inside it. That widest thing is the photo, whose natural size is far wider
   than a phone, so the whole row was sized to the picture instead of to the
   screen. Letting the chain shrink is what `min-width: 0` is for. */
.vbo-results-content > .vbo-searchresults-classic-wrap,
.vbo-searchresults-classic-wrap .vbo-searchresults-party-content,
.vbo-searchresults-classic-wrap .room_item,
.vbo-searchresults-classic-wrap .vblistroomblock,
.vbo-searchresults-classic-wrap .vbimglistdiv,
.vbo-searchresults-classic-wrap .vbo-dots-slider-selector,
.vbo-searchresults-classic-wrap .vik-dots-slider-container,
.vbo-searchresults-classic-wrap .vik-dots-slider-inner {
  min-width: 0;
}

.vbo-searchresults-classic-wrap img {
  max-width: 100%;
}

.vbo-searchresults-classic-wrap .vbimglistdiv {
  overflow: hidden;
  background: #f2f3f5;
}

.vbo-searchresults-classic-wrap .vbimglistdiv img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vbo-searchresults-classic-wrap .vbo-info-room {
  padding: 16px 20px !important;
}

.vbo-searchresults-classic-wrap .vbrowcname,
.vbo-searchresults-classic-wrap .vbrowcname a {
  margin: 0 0 6px !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  color: #0e1824 !important;
}

.vbo-searchresults-classic-wrap .vbrowcdescr {
  font-size: 14px;
  line-height: 1.5;
  color: #4a5568;
}

/* The price column. Right-aligned and bottom-anchored so the amount and the
   button line up across every row regardless of how long the descriptions are. */
.vbo-searchresults-classic-wrap .vbcontdivtot {
  padding: 16px 20px !important;
  border-top: 1px solid #e7e9ed;
}

.vbo-searchresults-classic-wrap .vbsrowprice {
  font-size: 21px !important;
  font-weight: 700 !important;
  color: #0e1824 !important;
  line-height: 1.2 !important;

  /* "IDR 2.400.000" was breaking after the currency, so the amount read as two
     lines of a sum rather than one price. */
  white-space: nowrap;
}

/* The two labels written by akar-searchresults.js — see there for why they are
   not markup of ours in the first place.

   Styled outside the phone layout below, because both are appended inside
   `.vbsrowprice`: without a size and a weight of their own they inherit that
   block's 21px bold and read as part of the amount, whatever the screen. */
.akar-guests-label {
  margin-left: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #4a5568;
  white-space: nowrap;
}

/* Unscoped, because the same caption is written into the rate plan on the
   Options step, where the surrounding font is a 18px bold price and an
   unstyled note joins the end of the amount as if it were part of it. */
.akar-price-note {
  display: block;
  margin-top: 2px;
  font-size: 12px !important;
  font-weight: 500;
  color: #7b8494;
}

@media (min-width: 900px) {
  .vbo-searchresults-classic-wrap .room_item,
  .vbo-searchresults-classic-wrap .vblistroomblock {
    flex-direction: row !important;
    align-items: stretch !important;

    /* Without this the picture-and-text block, whose basis is its own content
       width, filled the row and pushed the price column onto a second line. */
    flex-wrap: nowrap !important;
  }

  .vbo-searchresults-classic-wrap .vblistroomblock {
    flex: 1 1 auto !important;
    min-width: 0; /* or a long description would push the price column off */
  }

  .vbo-searchresults-classic-wrap .vbimglistdiv {
    flex: 0 0 260px !important;
    width: 260px !important;
    max-width: 260px !important;
  }

  .vbo-searchresults-classic-wrap .vbo-info-room {
    flex: 1 1 auto !important;
    min-width: 0;
  }

  .vbo-searchresults-classic-wrap .vbcontdivtot {
    flex: 0 0 240px !important;
    width: 240px !important;

    display: flex !important;
    flex-direction: column;
    justify-content: flex-end;

    border-top: 0;
    border-left: 1px solid #e7e9ed;
    text-align: right;
  }

  .vbo-searchresults-classic-wrap .vbdivtotinline {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* Six figures plus "6 guests" is wider than the 240px column, and the
     `nowrap` that keeps the amount on one line applies here too — so the line
     ran out past the card's edge. Unlike the amount, this one is allowed a
     second line. */
  .vbo-searchresults-classic-wrap .vbrowroomcapacity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
  }
}

/* -----------------------------------------------------------------
   Below 900px the row becomes a card, laid out on a single grid

   Picture across the top; the room name and the price on one line under it;
   the description; then a rule, the party the price is quoted for, and the
   button; and the amenities in a chip along the bottom.

   The obstacle is that Vik's markup keeps the price and the button two levels
   deep inside `.vbcontdivtot`, which is a *sibling* of the block holding the
   picture and the text — so the price can never sit beside the title as long
   as those wrappers are boxes. `display: contents` dissolves them: the price,
   the capacity icons and the button are promoted to items of the card's own
   grid and can be placed anywhere in it. No template override, and nothing
   moving nodes about at runtime, so a Vik update cannot undo any of it.

   The 20px columns on either side are the card's padding. Holding the padding
   in the grid rather than on each item is what lets the picture run full-bleed
   across the top while everything below it lines up on the same two edges.
   ----------------------------------------------------------------- */
@media (max-width: 899px) {
  .vbo-searchresults-classic-wrap .room_item {
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) auto 20px;

    /* Rows are sized by their tallest item; `start` keeps a short item at the
       top of its row instead of floating in the middle of one. */
    align-items: start;

    border-radius: 18px !important;
  }

  .vbo-searchresults-classic-wrap .vblistroomblock,
  .vbo-searchresults-classic-wrap .vbo-info-room,
  .vbo-searchresults-classic-wrap .vbdescrlistdiv,
  .vbo-searchresults-classic-wrap .roomlist_carats,
  .vbo-searchresults-classic-wrap .vbcontdivtot,
  .vbo-searchresults-classic-wrap .vbdivtot,
  .vbo-searchresults-classic-wrap .vbdivtotinline,
  .vbo-searchresults-classic-wrap .vbsrowprice {
    display: contents !important;
  }

  .vbo-searchresults-classic-wrap .vbimglistdiv {
    grid-column: 1 / -1;
    grid-row: 1;
    height: 210px;
  }

  .vbo-searchresults-classic-wrap .vbrowcname {
    grid-column: 2;
    grid-row: 2;
    margin: 18px 0 0 !important;
    font-size: 18px !important;
    padding-right: 14px; /* keeps a long room name off the price */
  }

  .vbo-searchresults-classic-wrap .vbsrowpricediv {
    grid-column: 3;
    grid-row: 2;

    /* One pixel of optical alignment: the caption underneath makes the block
       taller than the title's first line, so it starts fractionally lower. */
    margin-top: 20px;
    text-align: right;
    white-space: nowrap;
  }

  /* Beside the title the amount is a fact to check, not the headline it is in
     a price column of its own — so it drops to label size. */
  .vbo-searchresults-classic-wrap .room_cost {
    font-size: 15px !important;
    font-weight: 700;
  }

  .vbo-searchresults-classic-wrap .vbrowcdescr {
    grid-column: 2 / 4;
    grid-row: 3;
    margin-top: 10px;
    font-size: 15px;
  }

  /* Two lines, then an ellipsis. Cards whose descriptions run to different
     lengths cannot be compared at a glance, and the room's own page carries
     the full text anyway. */
  .vbo-searchresults-classic-wrap .vbrowcdescr p {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* The rule above the last row is drawn as a border on the two items that sit
     in it rather than as an element of its own — with no column gap between
     them the two borders meet and read as one line. */
  .vbo-searchresults-classic-wrap .vbrowroomcapacity {
    grid-column: 2;
    grid-row: 4;

    display: flex !important;
    align-items: center;
    gap: 2px;

    /* Wraps only when the icons and their label genuinely run out of room
       beside the button — a six-guest room on a 320px screen. */
    flex-wrap: wrap;
    min-width: 0;

    align-self: stretch;
    margin-top: 16px;
    padding: 16px 0;
    border-top: 1px solid #e7e9ed;
  }

  /* Sized so that the widest case here — six figures and "6 guests" — still
     fits beside the button on a 375px screen. It comes to nine pixels spare;
     a seven-guest room would take the second line the wrap above allows. */
  .vbo-searchresults-classic-wrap .vbrowroomcapacity i {
    font-size: 16px;
  }

  .vbo-searchresults-classic-wrap .akar-guests-label {
    margin-left: 6px;
    font-size: 13px;
  }

  .vbo-searchresults-classic-wrap .vbselectordiv {
    grid-column: 3;
    grid-row: 4;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    width: auto;
    margin: 16px 0 0;
    padding: 16px 0 !important;
    border-top: 1px solid #e7e9ed;
  }

  .vbo-searchresults-classic-wrap .vbselectr-result {
    width: auto;
    margin: 0 !important;
    padding: 13px 26px !important;
    font-size: 15px !important;
  }

  /* Nine amenity icons loose on the card read as clutter; gathered into a chip
     they read as one line of small print, which is what they are. */
  .vbo-searchresults-classic-wrap .vbo-room-carats {
    grid-column: 2 / 4;
    grid-row: 5;

    display: inline-flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;

    justify-self: start; /* the chip is as wide as its icons, not the card */
    margin: 0 0 20px;
    padding: 9px 15px;
    background: #f4f5f6;
    border-radius: 999px;
  }

  .vbo-searchresults-classic-wrap .vbo-room-carat {
    margin: 0 !important;
  }

  .vbo-searchresults-classic-wrap .vbo-room-carat i {
    font-size: 15px;
  }

}

/* A tablet gives the card enough width that a 210px picture turns into a
   letterbox. */
@media (min-width: 600px) and (max-width: 899px) {
  .vbo-searchresults-classic-wrap .vbimglistdiv {
    height: 260px;
  }
}

/* List/Grid switch removed on request. */
.vbo-results-style-wrap {
  display: none !important;
}

/* ---------- blocked search button ---------- */

/* The button keeps its normal colour while the search is incomplete — dimming
   it was tried and rejected. The block is still real: the button is disabled,
   so it cannot be submitted, and the cursor plus its tooltip say why. */
.akar-search-blocked,
.akar-search-blocked:hover {
  cursor: not-allowed !important;
}

/* ---------- stacked bar must not split into columns ---------- */

/* The form is a flex column that Vik also allows to wrap. A wrapping column
   does not grow downwards past its container — it starts a SECOND column — so
   at narrow widths the fields stepped sideways and hung ~20px outside the bar.
   A stacked search bar has no business wrapping. */
@media (max-width: 767px) {
  .vbmodhorsearchmaindiv form {
    flex-wrap: nowrap !important;
  }
}

/* Stacked, two stray margins from Vik broke the alignment of the rows against
   each other: a 20px right margin on the guests wrapper pulled it 20px left of
   the date fields, and a 15px left margin on the button pushed it 15px right.
   Full-width rows have no use for either. */
@media (max-width: 767px) {
  .vbmodhorsearchmaindiv .vbmodhorsearch-hum-guests-wrap {
    margin-right: 0 !important;
  }

  body .vbmodhorsearchmaindiv form .vbmodhorsearchbookdiv .btn {
    margin-left: 0 !important;
  }
}

/* =========================================
   Pop-up datepicker (room page booking form)
   =========================================

   jQuery UI reserves `width: 34em` (~544px) for the two-month pop-up, but the
   rendered calendar measures ~679px once the day cells carry prices. Its
   collision logic works from the declared width, so at 1440px the pop-up lands
   flush against the right edge with zero margin — and on anything narrower it
   runs off screen, cutting the second month off.

   Fixed by letting the pop-up size to its real content and never exceed the
   viewport; below 900px the two months stack instead of demanding 679px.
   Scoped to #ui-datepicker-div so the inline calendar in the home search bar
   is untouched.

   Above phone width only: on phones the day-prices plugin turns this pop-up
   into a centred sheet with a width of its own, and `width: auto !important`
   here was overriding it — this file loads after that one. One owner per
   breakpoint, rather than two rules arguing across plugins. */
@media (min-width: 768px) {
  #ui-datepicker-div {
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    box-sizing: border-box;
  }
}

@media (max-width: 900px) {
  #ui-datepicker-div.ui-datepicker-multi .ui-datepicker-group {
    float: none !important;
    width: 100% !important;
  }
}

/* ---------- room page: sideways scroll ---------- */

/* The Elementor container holding the availability calendar is set to
   `width: 100%` AND given side margins, so it renders wider than its parent
   and the page scrolls sideways.

   `width: auto` is the fix rather than subtracting the margins by hand: a
   block box then takes whatever the margins leave, at every breakpoint. The
   first attempt here capped it at `calc(100% - 40px)`, which was right at
   desktop but wrong on mobile, where Elementor drops the margins to 0 — that
   left a 40px gap down the right-hand side of the page.
   Scoped to that one container ID, which belongs to the room-detail page. */
.elementor-element-5d79d4d {
  width: auto !important;
  max-width: none !important;
}

/* Stacked, the pills use a narrower inset — the nights pill follows along
   through the shared token rather than keeping the desktop value. */
@media (max-width: 767px) {
  .vbmodhorsearchmaindiv {
    --vbo-pill-pad-x: 18px;
  }
}

/* ---------- repair in the roomslist override ---------- */

/* The custom roomslist template at
   uploads/vikbooking/overrides/site/roomslist/default.php declares
   `border: px solid #e7e7e7` — a length without a number, so the browser drops
   the whole declaration and the cards render with no border at all.
   Restored here because that file is a PHP template this plugin cannot edit;
   fix it at the source when convenient and this rule becomes redundant. */
.vbr-card {
  border: 1px solid #e7e7e7;
}

/* ---------- duplicate "Change Dates" at the foot of the results ---------- */

/* Vik prints a bare, unstyled back-link below the results that points at the
   same search view as the "Change Dates" button already sitting in the summary
   header — the same action twice, the second one visually unfinished.

   Scoped with :has() to the results page only, so the back-link stays
   available on the later booking steps where it is the only way back. */
.wrap.plugin-container:has(.vbo-searchresults-classic-wrap) .goback {
  display: none !important;
}

/* ---------- rooms and guests before dates ---------- */

/* The rates shown on each day in the calendar are calculated for the party
   that is selected at that moment. Choosing dates first means reading prices
   for one guest and then watching every figure move when the party is raised,
   so the party block is pulled ahead of the date fields. Flight search puts
   passengers first for the same reason.

   Done with `order` rather than by moving the markup: both forms are already
   flex containers, and Vik regenerates their contents. */
.vbmodhorsearchmaindiv form > .vbmodhorsearch-hum-guests-wrap,
.vb-search-inner > .vbo-search-num-racblock,
.vb-search-inner > .akar-party-field {
  order: -1 !important;
}

.vbmodhorsearchmaindiv form > .vbmodhorsearchbookdiv,
.vb-search-inner > .vbo-search-submit {
  order: 1 !important;
}

/* Locked date fields. Deliberately restrained: no fading of the field, which
   on a photographic background reads as broken rather than as waiting. The
   cursor says it on desktop, and the message below answers the tap on touch,
   where there is no cursor to say anything. */
.akar-party-pending .vbo-horizsearch-showcalendar,
.akar-party-pending .vbo-search-inpblock-checkin,
.akar-party-pending .vbo-search-inpblock-checkout,
.akar-party-pending .vbo-search-inpblock-checkin input,
.akar-party-pending .vbo-search-inpblock-checkout input {
  cursor: not-allowed !important;
}

/* The answer to "why did nothing happen when I tapped the date?". It appears
   beside the guests block — the place the visitor has to go next — and leaves
   again the moment that block is used. */

/* Both forms are flex, and the note is inserted straight after the guests
   block, so it needs the same order to stay with it.

   The margins are pinned because the note was picking up a 20px right margin
   from the form's own children rule, which left it narrower than the fields
   and sitting off to one side of them. */
.vbmodhorsearchmaindiv form > .akar-party-note,
.vb-search-inner > .akar-party-note {
  order: -1;
  flex: 1 1 100%;

  width: 100%;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* From tablet up the home bar becomes a single row, where a full-width note
   would either squeeze the fields or force the row to wrap. Taking it out of
   the flow puts it under the bar without touching the layout. */
@media (min-width: 768px) {
  .vbmodhorsearchmaindiv form {
    position: relative;
  }

  .vbmodhorsearchmaindiv form > .akar-party-note {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
  }
}

.akar-party-note {
  display: block;
  margin: 12px 0 0;
  padding: 10px 16px;

  border-radius: 999px;
  background: #fcc397;
  color: #111;

  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

.akar-party-note-why::before {
  content: " — ";
}

/* On a phone the full sentence wrapped to two lines and turned the note into
   the largest thing in the search bar — louder than the fields it was pointing
   at. The instruction is what has to be read; the reason is a nicety, and it
   goes where there is room for it. */
@media (max-width: 767px) {
  .akar-party-note {
    margin-top: 8px;
    padding: 7px 14px;
    font-size: 12px;
    line-height: 1.3;
  }

  .akar-party-note-why {
    display: none;
  }
}

/* Fades in only. An earlier version also slid and scaled it, which meant that
   any moment the animation was interrupted or held left the note a few percent
   smaller than the fields and visibly off-centre against them. Opacity cannot
   move a box, so there is no frame of this that misaligns. */
@media (prefers-reduced-motion: no-preference) {
  .akar-party-note-shown {
    animation: akar-party-note-in 0.35s ease;
  }

  @keyframes akar-party-note-in {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }
}

/* ---------- room page: main photo was cropped hard ---------- */

/* Vik caps this image at `max-height: 335px` while it stretches to the full
   width of the column. The cap is a fixed number and the width is not, so the
   wider the screen, the more of the picture gets sliced off the top and bottom
   — on a large monitor it was showing a 2.2:1 letterbox of a 3:2 photo.

   Raising the cap lets the image keep more of its own proportions: on a normal
   column width it now fits uncropped, and on a very wide one it is trimmed far
   less than before. Phones are unaffected — there the image is nowhere near
   this tall to begin with.

   Overridden here rather than edited in place, because the rule lives in Vik's
   own stylesheet and would come back with the next update. */
.vbo-listing-details-wrap .vikfx-roomdetails-gallery-container .vikfx-gallery-fade-container img {
  max-height: 440px;
}

/* On a phone the same photo runs edge to edge instead.

   The room name and the text above and below it keep the page's 20px margin —
   the picture is the one thing that gains from losing it, and a header photo
   that touches both edges is what every booking app does with this screen.

   `calc(50% - 50vw)` finds the page margin rather than assuming it: whatever
   the Elementor container is inset by, this pulls the photo back out to the
   viewport edge without that number being written down anywhere. The height
   cap comes off with it, so at full width the photo keeps its own proportions
   instead of being trimmed top and bottom to a number meant for a column. */
@media (max-width: 767px) {
  /* The width carries `!important` because the room pages added later sit in a
     slightly different Elementor container, where something else was winning
     and left the photo 40px short of the right edge. */
  .vbo-listing-details-wrap .vikfx-roomdetails-gallery-container {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
  }

  .vbo-listing-details-wrap .vikfx-roomdetails-gallery-container .vikfx-gallery-fade-container img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;

    /* Rounded corners belong to a picture that sits inside something. This one
       no longer does. */
    border-radius: 0;
  }
}

/* ---------- the photo gallery ---------- */

/* Built by akar-gallery.js, which explains there why Vik's own lightbox is
   replaced. Two screens live in this one element: the grid, and the viewer on
   top of it. */

/* The button on any gallery Vik prints without one — the Options step renders
   the same eight photos as the details page and gives no way into them. Placed
   where Vik puts its own, so the two pages behave alike. */
/* The theme dresses every <button> on the site as its own accent-coloured call
   to action — 16px, 15px/30px of padding, capitalised. Over a photograph that
   is neither legible nor what this is: a quiet way in, the way Vik's own reads
   on the details page. Hence the weight behind each of these. */
.vikfx-gallery-container .akar-allphotos {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(0, 0, 0, 0.78) !important;

  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-transform: none !important;
  color: #fff !important;
  cursor: pointer;
}

.vikfx-gallery-container .akar-allphotos:hover {
  background: #0e1824 !important;
}
.akar-gallery {
  position: fixed;
  inset: 0;
  z-index: 999999; /* over the floating WhatsApp button, which sits at 9999 */

  display: flex;
  flex-direction: column;
  background: #fff;
}

.akar-gallery[hidden],
.akar-gallery-viewer[hidden] {
  display: none;
}

/* The page behind must not scroll under the overlay — on iOS a scroll gesture
   that starts on a full-screen fixed layer otherwise moves the document. */
.akar-gallery-open,
.akar-gallery-open body {
  overflow: hidden;
}

.akar-gallery-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;

  padding: 8px 12px;
  border-bottom: 1px solid #e7e9ed;
}

/* The theme styles every h2 on the site at 33px, capitalised — which is right
   for a page heading and absurd for a line in a toolbar. */
.akar-gallery .akar-gallery-heading {
  flex: 1 1 auto;
  min-width: 0;

  margin: 0;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  color: #0e1824;

  /* A room name of four words has no business pushing the count off the bar. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.akar-gallery-count {
  flex: 0 0 auto;
  font-size: 13px;
  color: #7b8494;
}

/* Strips the theme's own button styling. `font: inherit` is a shorthand and
   carries the specificity of this selector, so every rule below that sets a
   font size or a background has to be at least as specific to survive it —
   hence the `.akar-gallery` prefix on all of them. */
.akar-gallery button {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.akar-gallery .akar-gallery-close {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 26px;
  line-height: 1;
  border-radius: 999px;
}

.akar-gallery-grid {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px 4px 24px;

  /* Without these a room with one row of photos had that row stretched to the
     full height of the screen — 233px of picture in an 800px cell — because a
     grid fills a container of definite height with the rows it has. */
  align-content: start;
  align-items: start;
  grid-auto-rows: max-content;
}

.akar-gallery-thumb {
  cursor: pointer;
}

.akar-gallery-thumb:focus-visible {
  outline: 2px solid var(--vbo-accent);
  outline-offset: 2px;
}

.akar-gallery-thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  background: #f2f3f5;
}

/* The viewer covers the grid rather than replacing it, so closing it puts the
   grid back exactly where it was scrolled to. */
.akar-gallery-viewer {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

.akar-gallery-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.akar-gallery-viewer img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.akar-gallery .akar-gallery-close-viewer {
  position: absolute;
  top: 10px;
  right: 10px;

  color: #fff;
  background: rgba(255, 255, 255, 0.16);
}

.akar-gallery .akar-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 26px;
  line-height: 1;
  color: #0e1824;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
}

.akar-gallery .akar-gallery-prev {
  left: 8px;
}

.akar-gallery .akar-gallery-next {
  right: 8px;
}

.akar-gallery-counter {
  position: absolute;
  right: 12px;
  bottom: 16px;

  padding: 6px 12px;
  border-radius: 999px;

  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
}

/* Two columns is a phone's answer. Given a wider screen the grid takes it,
   up to a measure past which a thumbnail is no longer a thumbnail. */
@media (min-width: 768px) {
  .akar-gallery-bar {
    padding: 12px 18px;
  }

  .akar-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 8px 8px 32px;
  }
}

@media (min-width: 1200px) {
  .akar-gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
  }
}

/* -----------------------------------------------------------------
   The Options step: the room you picked, and the rate you are buying

   Vik lays this out as a plain document — a heading, a picture, a paragraph,
   a row of unlabelled icons and a price — which reads like a specification
   sheet at the exact moment the visitor is deciding to spend money. The same
   card treatment as the results page is used instead, so the room they chose
   still looks like the card they chose it from.
   ----------------------------------------------------------------- */

.vbo-showprc-wrapper .room_container {
  margin: 0 0 20px !important;
  padding: 0 !important;

  border: 1px solid #e0e3e8;
  border-radius: 16px;
  background: #fff;
  overflow: hidden;
}

.vbo-showprc-wrapper .vbo-showprc-room-head {
  padding: 10px 20px !important;
  background: #fafbfc;
  border-bottom: 1px solid #eef0f3;
}

.vbo-showprc-wrapper .vbo-showprc-staydetails-party {
  font-size: 13px;
  font-weight: 600;
  color: #4a5568;
}

/* The picture is nested one level down in `.vbroomimgdesc` beside the
   description. Dissolving that wrapper puts both in the block's own flow,
   which is what lets the photo be lifted above the room name below and moved
   into a column of its own on a wide screen. */
.vbo-showprc-wrapper .vbo-showprc-room-block {
  display: flex;
  flex-direction: column;
  padding: 0 20px 20px !important;
}

.vbo-showprc-wrapper .vbroomimgdesc {
  display: contents;
}

/* Bleeds to the card's edges by cancelling the block's own padding. */
.vbo-showprc-wrapper .vikfx-showprc-gallery-container {
  order: -1;
  width: calc(100% + 40px);
  max-width: none;
  margin: 0 -20px 16px;
}

.vbo-showprc-wrapper .vikfx-showprc-gallery-container img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: cover;
  border-radius: 0;
}

.vbo-showprc-wrapper .vbo-showprc-roomname {
  order: 0;
  margin: 16px 0 0;
}

.vbo-showprc-wrapper .vbo-showprc-roomname h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.25;
}

.vbo-showprc-wrapper .room_description_box {
  order: 1;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: #4a5568;
}

.vbo-showprc-wrapper .room_carats {
  order: 2;
  margin-top: 18px;
}

.vbo-showprc-wrapper .room_prices {
  order: 3;
  margin-top: 18px;
}

/* The theme's h4 is a page heading; these two are section labels inside a card. */
.vbo-showprc-wrapper .room_carats h4,
.vbo-showprc-wrapper .room_prices h4 {
  margin: 0 0 10px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  color: #0e1824;
}

/* Nine unlabelled icons ask the visitor to guess. Vik already knows every
   name — it keeps it in `data-vbo-expl` and shows it as a hover tooltip, which
   on a touch screen nobody will ever see. Taking that same pseudo-element out
   of its floating box turns each icon into a chip that says what it is, with
   no markup of ours and nothing to keep in step when a room changes.

   `width: auto` matters: as a tooltip the box is a fixed 160px, which as a
   chip label overflows into the icon of the chip beside it. */
.vbo-showprc-wrapper .room_carats .vbo-room-carats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.vbo-showprc-wrapper .room_carats .vbo-room-carat {
  display: inline-flex;
  margin: 0 !important;
}

.vbo-showprc-wrapper .room_carats .vbo-expl {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;

  position: static !important;
  padding: 7px 13px;
  background: #f4f5f6;
  border-radius: 999px;

  font-size: 13px;
  color: #2f3742;
}

.vbo-showprc-wrapper .room_carats .vbo-expl::after {
  content: attr(data-vbo-expl) !important;

  position: static !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;

  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  background: none !important;
  color: inherit !important;
  font-size: 13px !important;

  white-space: nowrap;
  pointer-events: none;
}

/* The tooltip's little arrow. */
.vbo-showprc-wrapper .room_carats .vbo-expl::before {
  display: none !important;
}

.vbo-showprc-wrapper .room_carats .vbo-icn-carat {
  font-size: 15px;
}

/* A rate is a thing you choose, so it is drawn as something choosable: a card
   that takes the accent when its radio is on, rather than a line of text with
   a dot beside it. */
.vbo-showprc-wrapper .vbo-showprc-pricetable {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vbo-showprc-wrapper .vbo-showprc-price-entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 12px;
  align-items: start;

  padding: 14px 16px;
  border: 1px solid #e0e3e8;
  border-radius: 12px;
  text-align: left !important;
}

.vbo-showprc-wrapper .vbo-showprc-price-entry:has(input:checked) {
  border-color: #f0a96a;
  background: #fff8f2;

  /* A second border rather than a thicker one: a 2px border would move every
     other line in the card by a pixel as the selection changes. */
  box-shadow: inset 0 0 0 1px #f0a96a;
}

.vbo-showprc-wrapper .vbo-showprc-price-entry-radio {
  grid-column: 1;
  grid-row: 1;
  padding-top: 2px;
}

.vbo-showprc-wrapper .vbo-showprc-price-entry-rateplan {
  grid-column: 2;
  grid-row: 1;
}

.vbo-showprc-wrapper .vbo-showprc-price-entry-rateplan label {
  display: block;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-align: left;
  color: #0e1824;
}

.vbo-showprc-wrapper .vbpricedetails {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.vbo-showprc-wrapper .vbpricedetails span {
  display: inline-block;
  padding: 4px 9px !important;
  border-radius: 999px !important;

  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  background: #f4f5f6;
  color: #4a5568;
}

/* What is included reads as a gain, what is not as a cost. */
.vbo-showprc-wrapper .vbprice_breakfast {
  background: #e9f6ed !important;
  color: #1c7a3d !important;
}

.vbo-showprc-wrapper .vbprice_freecanc_no {
  background: #fdeded !important;
  color: #a12b2b !important;
}

.vbo-showprc-wrapper .vbo-showprc-price-entry-cost {
  grid-column: 2;
  grid-row: 2;

  text-align: right !important;
  font-size: 18px !important;
  white-space: nowrap;
}

.vbo-showprc-wrapper .vbo-showprc-price-entry-cost .room_cost {
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* Once there is room beside the rate, the amount belongs on its line. */
@media (min-width: 600px) {
  .vbo-showprc-wrapper .vbo-showprc-price-entry {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }

  .vbo-showprc-wrapper .vbo-showprc-price-entry-cost {
    grid-column: 3;
    grid-row: 1;
  }
}

/* Wide enough for the picture to sit beside the text, as Vik had it — but on a
   grid, so the chips and the rate below run the full width of the card. */
@media (min-width: 900px) {
  .vbo-showprc-wrapper .vbo-showprc-room-block {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 0 24px;
    padding: 20px !important;
  }

  .vbo-showprc-wrapper .vikfx-showprc-gallery-container {
    order: 0;
    grid-column: 1;
    grid-row: 1 / span 2;
    width: auto;
    margin: 0;
  }

  .vbo-showprc-wrapper .vikfx-showprc-gallery-container img {
    border-radius: 12px;
  }

  .vbo-showprc-wrapper .vbo-showprc-roomname {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }

  .vbo-showprc-wrapper .room_description_box {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
  }

  .vbo-showprc-wrapper .room_carats {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 22px;
  }

  .vbo-showprc-wrapper .room_prices {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 22px;
  }
}

/* Back and Book Now. On a phone they stack, with the one that costs money at
   the bottom where the thumb is. */
.room_buttons_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 18px;
}

.room_buttons_box .goback {
  margin: 0 !important;
}

.room_buttons_box .booknow {
  padding: 14px 28px !important;
  border-radius: 999px !important;
  font-size: 16px !important;
}

@media (max-width: 599px) {
  .room_buttons_box {
    flex-direction: column;
    align-items: stretch;
  }

  .room_buttons_box .goback {
    text-align: center;
  }

  .room_buttons_box .booknow {
    width: 100% !important;
  }
}

/* ---------- results search form: even it out on phones ---------- */

/* Every field in this form spans the column except the guests one, which is
   pushed in on the left by the "Room 1" tag sitting beside it and pulled in on
   the right by a 20px margin — so it started 55px late and stopped 20px short
   while everything above and below it ran edge to edge. The vertical spacing
   came from four different margins (5, 8, 10 and 15px) plus an empty div
   carrying another 10px, and the submit button was 111px wide in a column of
   300px.

   Desktop is left alone: there the same markup sits in a narrow sidebar where
   the label-beside-field arrangement works. */
@media (max-width: 767px) {
  /* One rhythm, set once. The column is already a flex container, so `gap`
     gives an identical space between every block — where per-child margins
     left 28px in one place and 43px in another, depending on which of Vik's
     nested wrappers happened to add its own. */
  /* !important because a bare `.vb-search-inner` is a single class and loses to
     whichever heavier rule of Vik's sets the gap — the blocks kept coming out
     14px apart while the one inside the guests wrapper sat at 20px. */
  .vb-search-inner {
    gap: 20px !important;
  }

  .vb-search-inner > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* The room tag moves above its field and becomes a line of its own, so the
     field itself can start where all the others do. */
  .vb-search-inner .vbo-search-num-aduchild-entry {
    flex-wrap: wrap;
    margin-bottom: 0 !important;
  }

  .vb-search-inner .vbo-search-roomnum {
    width: 100%;
    margin: 0 0 5px !important;
  }

  .vb-search-inner .vbo-search-num-adults-entry {
    flex: 1 1 100%;
    width: 100%;
    margin-right: 0 !important;
  }

  .vb-search-inner .vbo-search-num-adults-entry select,
  .vb-search-inner .vbo-search-num-rooms select {
    width: 100%;
  }

  /* An empty element between the guests block and the dates, contributing
     nothing but its own margins. */
  .vb-search-inner .vbo-search-num-racblock > div:empty {
    margin: 0 !important;
  }

  /* The rooms and guests blocks sit inside a wrapper of their own, so they are
     out of reach of the column's gap and need it set here too.

     Only the gap: this wrapper is a wrapping row whose items are already full
     width, and forcing it to a column handed the width over to `align-items`
     instead — which shrank the rooms select to 84px and pushed it to the right
     edge. */
  .vb-search-inner .vbo-search-num-racblock {
    gap: 20px;
  }

  .vb-search-inner .vbo-search-num-rooms,
  .vb-search-inner .vbo-search-num-aduchild-block {
    margin: 0 !important;
  }

  /* Full width, like every other control and like the button on the home bar. */
  .vb-search-inner .vbo-search-submit .btn {
    display: block;
    width: 100%;
  }
}

/* ---------- rooms and guests panel: a way out ---------- */

/* The panel opens from the pill above it and closes the same way, but once it
   is open that pill is hidden behind it. This sits at the foot of the panel so
   there is something in it that says "done". Sized like the calendar's Close
   rather than like a page-level button. */
.akar-party-close-wrap {
  display: flex;
  justify-content: flex-end;

  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.akar-party-close-wrap .akar-party-close {
  padding: 9px 22px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}

/* ---------- results: the "Room 1 · 1 Adult" group headings ---------- */

/* With more than one room the results are grouped per room, each group
   introduced by one of these. Vik renders the introduction as a pill — border,
   30px radius — stretched to the full width of the page with two short words
   in the left-hand end of it, so it read as a large empty capsule above every
   group. On a phone the two words stacked and it became two empty lines.

   It is a heading, so it is now shaped like one: a small chip with the room
   number, the party beside it in a quieter tone, and no box around either.
   Spacing does the grouping instead of a border — tight to the card it belongs
   to, roomier above to separate it from the group before. */
.vbo-searchresults-classic-wrap .vbo-searchresults-step-content {
  margin: 28px 0 10px !important;
}

.vbo-searchresults-classic-wrap .vbo-searchresults-step-content:first-child {
  margin-top: 0 !important;
}

.vbo-searchresults-classic-wrap .vbsearchproominfo {
  display: flex;
  align-items: center;
  gap: 10px;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* Both spans are handed a width from elsewhere, which on a phone had them
   splitting the row between them — a chip 177px wide around the words
   "Room 1". They size to their own text instead. */
.vbo-searchresults-classic-wrap .vbsearchnroom,
.vbo-searchresults-classic-wrap .vbsearchroomparty {
  flex: 0 0 auto;
  width: auto !important;
}

.vbo-searchresults-classic-wrap .vbsearchnroom {
  padding: 5px 13px !important;
  border-radius: 999px !important;
  background: #f2f3f5 !important;

  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0e1824 !important;
}

.vbo-searchresults-classic-wrap .vbsearchroomparty {
  padding: 0 !important;
  font-size: 13px !important;
  color: #6b7280 !important;
}

/* ---------- results search bar: the home bar's shape ---------- */

/* The rooms and guests selects now live behind one summary field, built by the
   guard script. What follows gives that field the look of the pills on the
   home bar, and brings the dates and the button into the same shape so the
   row reads as one set of controls rather than four kinds of box. */

.akar-party-field {
  position: relative;
}

/* Scoped through the field and marked important: this is a <button>, and the
   theme paints every button in the accent colour — which turned the field into
   something that looked like a second Search button sitting next to the real
   one. It is an input, so it looks like the inputs beside it. */
.vb-search-inner .akar-party-field .akar-party-summary {
  display: flex;
  align-items: center;
  gap: 14px;

  width: 100%;
  min-height: 46px;
  padding: 0 20px !important;

  border: 1px solid #dfe3e8 !important;
  border-radius: 999px !important;
  background: #fff !important;

  font-size: 14px !important;
  font-weight: 400;
  color: #0e1824 !important;
  text-align: left;
  cursor: pointer;
}

.vb-search-inner .akar-party-field .akar-party-summary:hover {
  border-color: var(--vbo-accent) !important;
  background: #fff !important;
  color: #0e1824 !important;
}

.akar-party-summary strong {
  margin-right: 4px;
  font-weight: 700;
}

/* Closed by default; the field carries the open state so the button and the
   panel can never disagree about it. */
.akar-party-panel {
  display: none;
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  left: 0;

  min-width: 280px;
  padding: 18px 20px;

  border: 1px solid #e7e9ed;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.akar-party-field.akar-party-open .akar-party-panel {
  display: block;
}

/* Dates and button take the same capsule, so the row is one family. */
.vb-search-inner .vbo-search-inpblock .input-group {
  border: 1px solid #dfe3e8;
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
}

.vb-search-inner .vbo-search-inpblock .input-group input {
  border: 0 !important;
  background: transparent !important;
  padding-left: 20px !important;
}

.vb-search-inner .vbo-search-inpblock .input-group > i,
.vb-search-inner .vbo-search-inpblock .input-group > span {
  border: 0 !important;
  background: transparent !important;
}

.vb-search-inner .vbo-search-submit .btn {
  border-radius: 999px;
  padding: 12px 30px;
}

/* On a phone the panel has the width of the field it belongs to rather than a
   fixed minimum, which would otherwise reach past the edge of the screen. */
@media (max-width: 767px) {
  .akar-party-panel {
    right: 0;
    min-width: 0;
  }
}

/* ---------- inside the rooms and guests panel ---------- */

/* Vik's wrapper is a wrapping row, so each block took the width of its own
   contents: the rooms select came out at 84px beside a guests select filling
   the full 258px. In a panel this narrow they should simply be one column of
   equal fields.

   The row direction is left alone on purpose — switching this wrapper to a
   column hands the width over to `align-items` and shrinks the rooms select to
   its text instead. Giving each block a full-width basis stacks them just as
   well without that side effect. */
.akar-party-panel .vbo-search-num-racblock {
  gap: 18px;
}

.akar-party-panel .vbo-search-num-rooms,
.akar-party-panel .vbo-search-num-aduchild-block,
.akar-party-panel .vbo-search-num-aduchild-entry,
.akar-party-panel .vbo-search-num-adults-entry {
  flex: 1 1 100%;
  width: 100%;
  margin: 0 !important;
}

/* The guests row for a second room is added by Vik as a bare <div> with no
   class of its own, so selecting by class reached the first room only: room 1
   got a full-width field and room 2 whatever was left, 165px against 85px.
   Every child is addressed instead, named or not.

   It also arrives in a row that is set not to wrap, which would squeeze the
   fields thinner with every room added. Wrapping gives each its own line, all
   the same width. */
.akar-party-panel .vbo-search-num-aduchild-block {
  flex-wrap: wrap;
  gap: 18px;
}

.akar-party-panel .vbo-search-num-aduchild-block > * {
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  margin: 0 !important;
}

/* The room label sits beside its field in Vik's desktop arrangement, splitting
   the row in two and leaving the select at half width. In a panel this narrow
   the label belongs above the field, as it does on every other field here. */
.akar-party-panel .vbo-search-num-aduchild-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

/* Weighted to match the form's own select rules, which are two classes deep —
   a lighter selector left every select at its 84px minimum inside a 238px
   field. */
.vbdivsearch .vb-search-inner .akar-party-panel select,
.akar-party-panel select {
  width: 100% !important;
}

/* One label per field. "Room 1" was a line of its own above the word "Guests",
   which read as two labels stacked on one control. */
.akar-party-panel .vbo-search-roomnum {
  display: block;
  width: 100%;
  margin: 0 0 2px !important;

  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}

/* "Guests" comes centred from Vik while "Rooms" comes left, so the two labels
   sat over their fields differently. Both start at the same edge as the field
   below them. */
.akar-party-panel .vbo-search-num-adults-entry > label,
.akar-party-panel .vbo-search-num-rooms > label {
  display: block;
  margin: 0 0 5px !important;
  text-align: left !important;
}

/* The nights line sat centred in the middle of the panel with a gap either
   side of it; it belongs with the fields, left with the rest. */
.akar-party-panel .vbo-search-num-racblock > div:not([class]) {
  width: 100%;
  margin: 0 !important;
  font-size: 13px;
  text-align: left;
  color: #6b7280;
}

/* ---------- nights pill removed from the bar ---------- */

/* The stay length is already spelled out in the calendar, under the dates it
   belongs to ("total for 3 nights"), so a second copy in the bar said the same
   thing twice and took a slot of its own to do it.

   Hidden rather than deleted: Vik writes the figure into this element every
   time the dates change and would throw on a missing node, which would break
   date selection itself. */
.vbmodhorsearchmaindiv .vbmodhorsearchtotnights {
  display: none !important;
}

/* The rules above reserve extra width on the dates group for as long as the
   pill is in the markup — and it still is, only invisible. Without this the
   bar would hold ~111px open for something nobody can see. */
@media (min-width: 1160px) {
  .vbmodhorsearchmaindiv .vbmodhorsearch-hum-dates-wrap:has(.vbo-horizsearch-numnights-inner) {
    flex: 2 1 0 !important;
  }
}

@media (min-width: 768px) and (max-width: 1159px) {
  .vbmodhorsearchmaindiv .vbmodhorsearch-hum-dates-wrap:has(.vbo-horizsearch-numnights-inner) {
    flex: 1 1 100% !important;
  }
}

/* ---------- submit buttons: the loading state ---------- */

/* On submit Vik drops a spinner into the button next to the label. The button
   is an inline-block with no alignment of its own, so the two just flowed as
   text: the icon sat on the text baseline, a stray space away from the label,
   and the pair drifted off the centre of the pill.

   Making the button a centred flex row puts the spinner and the label together
   as one group in the middle of the button, at every width. */
.vbmodhorsearchmaindiv .vbmodhorsearchbookdiv .btn,
.vb-search-inner .vbo-search-submit .btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* `fa-fw` reserves 1.25em regardless of the glyph, which left a visible gap on
   the icon's own right before the flex gap even started. Sized to the text it
   sits beside instead, and a touch smaller so it reads as an accompaniment
   rather than as a second word. */
.vbmodhorsearchmaindiv .vbmodhorsearchbookdiv .btn > i,
.vb-search-inner .vbo-search-submit .btn > i {
  width: auto !important;
  margin: 0 !important;
  font-size: 0.9em;
  line-height: 1;
}

/* While it is working, the spinner is the whole message: the label steps aside
   so the spinner can sit dead centre instead of being crowded against it.

   The button is 135px wide with 30px of padding either side, which leaves 75px
   for its contents — the label alone nearly fills that, so label plus spinner
   spilled out of the padding and sat off centre. The guard script pins the
   button's size at the moment of the click, so dropping the label cannot make
   it shrink.

   It keeps its colour throughout: a button that fades out when pressed reads
   as broken rather than busy. */
.vbmodhorsearchmaindiv .vbmodhorsearchbookdiv .btn:has(> i.fa-spin),
.vb-search-inner .vbo-search-submit .btn:has(> i.fa-spin) {
  gap: 0;

  pointer-events: none;
  cursor: progress;
}


/* =================================================================
   The Book step, and the results row on a desktop

   Everything up to here had been brought to the same card language; these
   two screens had not. The last step of a booking is the one that decides
   whether the visitor finishes, and it was the plainest page on the site:
   grey slabs, a room name in pale orange on white, and eleven boxed inputs
   in a row. The desktop results row was Vik's own arrangement, which is the
   right arrangement — photo left, price right — dressed as a table.
   ================================================================= */

/* ---------- shared: the cards these two screens are built from ---------- */

.vbo-oconfirm-summary-container,
.vbo-coupon-outer,
.vbo-enterpin-block,
form[name="vb"] .vbcustomfields,
.vbo-oconfirm-paymentopts {
  margin: 0 0 16px;
  padding: 18px 20px;

  border: 1px solid #e0e3e8;
  border-radius: 16px;
  background: #fff;
}

/* Vik's own grey fills fight the cards; the card is the container now. */
.vbo-coupon-outer,
.vbo-enterpin-block,
.vbo-oconfirm-summary-total-wrapper,
.vbo-oconfirm-summary-room-head {
  background: transparent !important;
}

.vbo-oconfirm-middlep h4,
.vbo-oconfirm-paymentopts h4,
.vbcustomfields .vbseparatorcf h4 {
  margin: 0 0 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  color: #0e1824;
}

/* ---------- the booking being paid for ---------- */

/* Pale orange on white was somewhere around a 1.8:1 contrast ratio for the one
   line on the page that says what is being bought. */
.vbo-oconfirm-summary-container .vbo-oconfirm-roomname {
  color: #0e1824 !important;
  font-size: 16px;
  line-height: 1.3;
}

/* "Standard Rate" is a qualifier, not a second title. */
.vbo-oconfirm-priceinfo {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 9px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 500;
  color: #4a5568;
  background: #f4f5f6;
}

.vbo-oconfirm-summary-room-head-cell span,
.vbo-oconfirm-summary-room-head-cell-responsive {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  color: #7b8494 !important;
}

.vbo-oconfirm-summary-room-row {
  border-color: #eef0f3 !important;
}

/* The one number the visitor is checking. */
.vbo-oconfirm-summary-total-wrapper {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e7e9ed;
}

.vbo-oconfirm-summary-total-row .vbo-oconfirm-total-block {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0e1824 !important;
}

.vbo-oconfirm-summary-total-row .vbprice,
.vbo-oconfirm-summary-total-row .vbcurrency {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #0e1824 !important;
}

/* ---------- coupon and PIN: one line each, not a section each ---------- */

.vbo-coupon-outer .vbhaveacoupon,
.vbo-enterpin-block .vbo-enterpin-inner > span {
  display: block;
  margin-bottom: 10px;
  font-size: 14px;
  color: #4a5568;
}

.vbentercoupon-inner,
.vbo-enterpin-btns {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vbinputcoupon,
.vbo-enterpin-btns input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
}

.vbsubmitcoupon,
.vbo-pincode-sbmt {
  flex: 0 0 auto;
  padding: 11px 22px !important;
  border-radius: 999px !important;
  font-size: 14px !important;
}

/* ---------- the form ---------- */

/* Vik gives every field the browser's default box. Eleven of those in a column
   is the difference between a form that looks handled and one that looks like
   a database screen. */
.vbcustomfields .vbinput,
.vbcustomfields input[type="text"],
.vbcustomfields input[type="email"],
.vbcustomfields input[type="tel"],
.vbcustomfields input[type="number"],
.vbcustomfields select,
.vbcustomfields textarea,
.vbinputcoupon,
.vbo-enterpin-btns input[type="text"] {
  width: 100%;
  padding: 11px 14px !important;

  border: 1px solid #d7dbe1 !important;
  border-radius: 10px !important;
  background: #fff;

  font-size: 15px !important;
  line-height: 1.4 !important;
  color: #0e1824;

  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vbcustomfields .vbinput:focus,
.vbcustomfields select:focus,
.vbcustomfields textarea:focus,
.vbinputcoupon:focus,
.vbo-enterpin-btns input[type="text"]:focus {
  outline: none;
  border-color: var(--vbo-accent) !important;
  box-shadow: 0 0 0 3px rgba(252, 195, 151, 0.35);
}

.vbo-oconfirm-cfield-entry {
  margin-bottom: 14px;
}

.vbo-oconfirm-cfield-label {
  margin-bottom: 6px;
}

.vbo-oconfirm-cfield-label label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #2f3742;
}

.vbo-oconfirm-cfield-label .vbrequired sup {
  color: #c0392b;
}

/* The separator is a section heading inside the card, so it needs air above it
   — but not above the first one, which already has the card's padding. */
.vbo-oconfirm-cfield-entry-separator {
  margin-top: 22px;
}

.vbcustomfields > .vbo-oconfirm-cfield-entry-separator:first-child {
  margin-top: 0;
}

/* The phone field wraps itself in intl-tel-input, which needs the width back. */
.vbcustomfields .iti {
  width: 100%;
}

/* ---------- payment ---------- */

.vbo-oconfirm-paymethods-list {
  margin: 0;
  padding: 0;
  list-style: none;

  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vbo-oconfirm-paymethod-item {
  display: flex;
  align-items: center;
  gap: 12px;

  margin: 0 !important;
  padding: 14px 16px;
  border: 1px solid #e0e3e8;
  border-radius: 12px;
}

.vbo-oconfirm-paymethod-item:has(input:checked) {
  border-color: #f0a96a;
  background: #fff8f2;
  box-shadow: inset 0 0 0 1px #f0a96a;
}

.vbo-oconfirm-paymethod-item label {
  flex: 1 1 auto;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #0e1824;
  cursor: pointer;
}

/* ---------- the button that spends the money ---------- */

.vboconfirmbottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
}

/* Vik puts the submit before the Back link in the markup, which on a phone
   would leave the irreversible one under the thumb and the way out above it. */
.vboconfirmbottom .goback {
  order: -1;
  margin: 0 !important;
}

.vboconfirmbottom .booknow {
  padding: 15px 30px !important;
  border-radius: 999px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}

@media (max-width: 599px) {
  .vboconfirmbottom {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .vboconfirmbottom .goback {
    order: 0;
    text-align: center;
  }

  .vboconfirmbottom .booknow {
    width: 100% !important;
  }
}

/* Two columns for the short fields once there is room, the way a checkout
   form is laid out everywhere the visitor has filled one in before. */
@media (min-width: 700px) {
  .vbcustomfields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 20px;
  }

  /* A heading, and anything that wants the full measure, spans both. */
  .vbo-oconfirm-cfield-entry-separator,
  .vbcustomfields .vbo-oconfirm-cfield-entry:has(textarea),
  .vbcustomfields .vbo-oconfirm-cfield-entry:has(input[type="checkbox"]) {
    grid-column: 1 / -1;
  }
}

/* ---------- the results row on a desktop ---------- */

@media (min-width: 900px) {
  .vbo-searchresults-classic-wrap .room_item {
    border-radius: 16px !important;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
  }

  .vbo-searchresults-classic-wrap .room_item:hover {
    border-color: #cfd5dd !important;
    box-shadow: 0 6px 18px rgba(14, 24, 36, 0.07) !important;
  }

  /* Vik's photo runs to the corners of a rounded card and squares them off. */
  .vbo-searchresults-classic-wrap .vbimglistdiv {
    margin: 14px 0 14px 14px;
    border-radius: 12px;
  }

  /* The same trick as the Options step: the amenity names Vik hides in a hover
     tooltip become chips. There is room for them here — on a phone there is
     not, which is why the results card keeps the bare icons in a pill. */
  .vbo-searchresults-classic-wrap .vbo-room-carats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
  }

  .vbo-searchresults-classic-wrap .vbo-room-carat {
    display: inline-flex;
    margin: 0 !important;
  }

  .vbo-searchresults-classic-wrap .vbo-room-carat .vbo-expl {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;

    position: static !important;
    padding: 6px 11px;
    background: #f4f5f6;
    border-radius: 999px;

    font-size: 12px;
    color: #2f3742;
  }

  .vbo-searchresults-classic-wrap .vbo-room-carat .vbo-expl::after {
    content: attr(data-vbo-expl) !important;

    position: static !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;

    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: none !important;
    color: inherit !important;
    font-size: 12px !important;

    white-space: nowrap;
    pointer-events: none;
  }

  .vbo-searchresults-classic-wrap .vbo-room-carat .vbo-expl::before {
    display: none !important;
  }

  .vbo-searchresults-classic-wrap .vbo-room-carat .vbo-icn-carat {
    font-size: 14px;
  }

  /* The price column reads bottom-up: who it covers, what it costs, what that
     covers, and then the button. */
  .vbo-searchresults-classic-wrap .vbrowroomcapacity {
    margin-bottom: 4px;
  }

  .vbo-searchresults-classic-wrap .vbsrowprice {
    font-size: 24px !important;
  }

  .vbo-searchresults-classic-wrap .vbselectordiv {
    margin-top: 12px;
  }

  .vbo-searchresults-classic-wrap .vbselectr-result {
    width: 100%;
    padding: 13px 24px !important;
  }
}

/* Vik boxes the summary twice over: the container holds a room panel and a
   total panel, each with its own border and drop shadow, and the room's first
   cell carries a grey fill of its own. Inside the card above they read as
   three nested boxes, so everything but the card is stripped back. */
.vbo-oconfirm-summary-room-wrapper,
.vbo-oconfirm-summary-total-wrapper {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.vbo-oconfirm-summary-room-head,
.vbo-oconfirm-summary-room-cell-descr,
.vbo-oconfirm-summary-room-row {
  background: transparent !important;
}

.vbo-oconfirm-summary-total-wrapper {
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px solid #e7e9ed !important;
}

/* Vik marks the chosen payment method with a 2px accent border and a grey
   fill; the same selected-card treatment as the rate plan keeps the two steps
   speaking the same language. */
.vbo-oconfirm-paymethods-list .vbo-oconfirm-paymethod-item {
  padding: 14px 16px !important;
  border: 1px solid #e0e3e8 !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.vbo-oconfirm-paymethods-list .vbo-oconfirm-paymethod-item-active {
  border-color: #f0a96a !important;
  background: #fff8f2 !important;
  box-shadow: inset 0 0 0 1px #f0a96a !important;
}

/* Vik's tick for the chosen method hangs 10px outside the box it belongs to,
   which on a rounded card reads as a sticker coming off. */
.vbo-oconfirm-paymethods-list .vbo-oconfirm-paymethod-item-active::after {
  top: 10px !important;
  right: 10px !important;
}

/* The consent line came out as a sentence with a checkbox stranded at the far
   right of the row, which is both harder to hit and easy to read as belonging
   to whatever comes next. Box first, then what you are agreeing to. */
.vbo-oconfirm-cfield-entry-checkbox {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 10px;
}

.vbo-oconfirm-cfield-entry-checkbox .vbo-oconfirm-cfield-label {
  margin: 0;
}

.vbo-oconfirm-cfield-entry-checkbox .vbo-oconfirm-cfield-input {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.vbo-oconfirm-cfield-entry-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--vbo-accent);
}

.vbo-oconfirm-cfield-entry-checkbox label {
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer;
}

/* Vik gives each field 40% of the row above its own breakpoint, which inside
   the two-column grid leaves a 228px input floating in a 569px column. */
@media (min-width: 700px) {
  .vbcustomfields .vbo-oconfirm-cfield-entry,
  .vbcustomfields .vbo-oconfirm-cfield-input {
    width: auto !important;
    max-width: none !important;
  }
}

/* On the consent rows the required asterisk was landing on a line of its own
   above the sentence it belongs to. */
.vbo-oconfirm-cfield-entry-checkbox .vbrequired,
.vbo-oconfirm-cfield-entry-checkbox .vbrequired sup {
  display: inline;
}

/* Back is the only square-cornered button left in a flow of pills. Outlined
   rather than filled, because it is the way out, not the way on. */
.goback .vbo-goback-link {
  display: inline-block;
  padding: 12px 26px !important;
  border: 1px solid #d7dbe1 !important;
  border-radius: 999px !important;
  background: transparent !important;

  font-size: 15px !important;
  font-weight: 600 !important;
  color: #2f3742 !important;
  text-decoration: none;
}

.goback .vbo-goback-link:hover {
  border-color: #b9c0ca !important;
  background: #f6f7f8 !important;
}

/* -----------------------------------------------------------------
   Results card: the two controls on the photo, and the price column
   ----------------------------------------------------------------- */

/* Vik puts a slider on the card photo — two arrows and a magnifier that opens
   the room in a modal. The modal renders badly inside a card layout, the
   arrows invite a fiddle with a thumbnail, and the card already leads to the
   room's own page where the photos are handled properly. The dots stay: they
   say there is more to see without asking to be operated. */
.vbo-searchresults-classic-wrap .vikfx-gallery-navigation-controls,
.vbo-searchresults-classic-wrap .vbmodalrdetails {
  display: none !important;
}

@media (min-width: 900px) {
  /* 24px on the block became 28.8px on the amount inside it — Vik sets 1.2em —
     which put the price a size above the room name it belongs to. */
  .vbo-searchresults-classic-wrap .vbsrowprice,
  .vbo-searchresults-classic-wrap .vbsrowprice .room_cost {
    font-size: 20px !important;
  }

  /* Six 25px figures plus a label do not fit the 200px column, so the label
     dropped to a line of its own and the row read as two half-things. At 15px
     the whole party fits beside its label, right-aligned under the price like
     everything else in this column. */
  .vbo-searchresults-classic-wrap .vbrowroomcapacity {
    justify-content: flex-end;
    gap: 1px;
  }

  .vbo-searchresults-classic-wrap .vbrowroomcapacity i {
    font-size: 15px;
  }

  .vbo-searchresults-classic-wrap .akar-guests-label {
    margin-left: 7px;
    font-size: 13px;
  }
}

/* -----------------------------------------------------------------
   Both step buttons: the one that goes on, then the one that goes back
   ----------------------------------------------------------------- */

@media (max-width: 599px) {
  /* Vik's markup puts them in opposite orders on the two steps, so each needs
     its own direction to end up the same way round on screen. */
  .room_buttons_box {
    flex-direction: column-reverse;
  }

  .vboconfirmbottom {
    flex-direction: column;
  }

  .vboconfirmbottom .goback {
    order: 0;
  }

  /* Two full-width pills stacked read as two equal choices. Back is not a
     choice of the same weight — it is the way out, so it steps down to a plain
     line of text under the button that goes on. */
  .goback .vbo-goback-link {
    padding: 4px 0 !important;
    border: 0 !important;
    background: none !important;

    font-size: 14px !important;
    font-weight: 500 !important;
    color: #4a5568 !important;
    text-decoration: underline;
  }

  .goback .vbo-goback-link:hover {
    background: none !important;
    color: #0e1824 !important;
  }
}

/* Even at 15px, six figures and their label do not fit a 159px column, and a
   six-guest room is exactly the case that needs the number spelled out. One
   figure plus "6 guests" says the same thing in a third of the width — and it
   is what the label was added for in the first place. */
@media (min-width: 900px) {
  .vbo-searchresults-classic-wrap .vbrowroomcapacity i:not(:first-of-type) {
    display: none;
  }

  .vbo-searchresults-classic-wrap .vbrowroomcapacity i {
    font-size: 17px;
  }
}

/* intl-tel-input parks the flag and its dropdown arrow in a 48px box laid on
   top of the field, and counts on the input carrying a left padding to clear
   it. The padding shorthand above wiped that out, so the number was typed
   underneath the flag. */
.vbcustomfields .iti input[type="tel"],
.vbcustomfields .iti .vbinput {
  padding-left: 58px !important;
}

/* ---------- the country flags in the phone field ---------- */

/* intl-tel-input draws every flag as a window onto one long sprite — 11304
   pixels wide by 30 tall, positioned to the pixel. Hostinger's CDN resizes
   images it serves to a phone down to 800px wide, which turned that strip into
   800x2 and every flag into a grey smudge. The same setting is why the room
   photos arrive soft; here it is not a matter of quality but of the picture
   being destroyed.
   
   The sprite therefore ships with this plugin, in a folder whose .htaccess
   marks it `no-transform` — see the note there. The paths are relative to this
   stylesheet, so nothing is tied to the domain. */
.iti__flag {
  background-image: url("flags/flags.png") !important;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .iti__flag {
    background-image: url("flags/flags@2x.png") !important;
  }
}

/* ---------- paging the picture with the two arrows ---------- */

/* The slide itself is set up in akar-gallery.js, which explains there why the
   arrows needed taking over at all. This is the frame it happens in: the
   incoming photo lies over the outgoing one and both are moved together, so
   nothing outside the picture shifts while it runs. */
.vikfx-gallery-container .vikfx-gallery-fade-container {
  position: relative;
  overflow: hidden;
}

.vikfx-gallery-container .akar-slide-in {
  position: absolute;
  inset: 0;
  z-index: 0;

  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vikfx-gallery-container.akar-sliding .vikfx-gallery-image,
.vikfx-gallery-fade-container.akar-sliding .vikfx-gallery-image,
.vikfx-gallery-fade-container.akar-sliding .akar-slide-in {
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Above the moving photos, or the arrows disappear underneath the one coming
   in — it is a later sibling, and without a stacking order that is enough.

   The box the arrows sit in covers the whole picture, though, so lifting it
   also lifted it over the "All photos" button: every tap in that corner landed
   on this instead and nothing happened. Only the two arrows take clicks; the
   sheet they are laid on lets them through. */
.vikfx-gallery-container .vikfx-gallery-navigation-controls,
.vikfx-gallery-container .vikfx-gallery-navigation-controls-prevnext {
  z-index: 3;
  pointer-events: none;
}

.vikfx-gallery-container .vikfx-gallery-previous-image,
.vikfx-gallery-container .vikfx-gallery-next-image {
  pointer-events: auto;
}

/* A frame that keeps its size. Every room photo here is 3:2, so this changes
   nothing today; it is what stops a stray portrait photo from making the page
   jump as it slides in. */
.vbo-listing-details-wrap .vikfx-roomdetails-gallery-container .vikfx-gallery-fade-container img,
.vbo-showprc-wrapper .vikfx-showprc-gallery-container img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* =================================================================
   The room page: everything under the photo

   The picture and the gallery were dealt with earlier; the rest of the page
   was still Vik's plain document — a heading, a paragraph, a list that wraps
   under its own icons, a calendar with a fire-engine-red key, and the booking
   box in a grey slab. Same language as the rest of the flow, applied to each.
   ================================================================= */

.vbo-listing-details-wrap .vblistroomnamediv h3 {
  margin: 0 0 4px !important;
  font-size: 24px !important;
  line-height: 1.2 !important;
}

/* The three section headings on this page. */
.vbo-listing-amenities-wrap h4,
.vbo-availcalendars-cont h4,
.vbo-seldates-cont-inner h4 {
  margin: 0 0 12px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
  color: #0e1824;
}

.vbo-listing-details-desc-cont > p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.7;
  color: #4a5568;
}

/* ---------- amenities ---------- */

/* Each amenity is a row of its own, so "Private terrace with ocean view"
   wraps under its own first word rather than back under the icon and out to
   the left margin of the column beside it. */
.vbo-listing-amenities {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px 24px;
}

.vbo-listing-amenities .vbo-listing-amenity {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 !important;
}

.vbo-listing-amenities .vbo-listing-amenity-textimg {
  flex: 0 0 20px;
  text-align: center;
  color: #4a5568;
}

.vbo-listing-amenities .vbo-listing-amenity-name {
  font-size: 15px;
  line-height: 1.45;
  color: #2f3742;
}

/* ---------- availability calendar ---------- */

.vbo-availcalendars-cont select.vbselectm {
  width: auto;
  min-width: 200px;
  max-width: 100%;
  padding: 10px 14px !important;

  border: 1px solid #d7dbe1 !important;
  border-radius: 10px !important;
  background-color: #fff;

  font-size: 15px !important;
  color: #0e1824;
}

.vblegendediv {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin: 12px 0 !important;
}

.vblegenda {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
}

.vblegenda-lbl {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #4a5568 !important;
}

.vblegenda-status {
  width: 14px !important;
  height: 14px !important;
  border-radius: 4px !important;
  border: 1px solid #d7dbe1;
}

.vblegfree {
  background: #fff !important;
}

/* A key is a footnote, and a full-strength red on a booking calendar reads as
   an error. Both the key and the days it stands for step down together, so
   they still say the same thing. */
.vblegbusy,
.vbcalsblock td.vbtdbusy {
  background: #fbe6e6 !important;
  border-color: #eebcbc !important;
  color: #a12b2b !important;
}

.vbcalsblock table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.vbcalsblock .vbcaltrmonth {
  background: #fafbfc !important;
  font-size: 15px !important;
}

.vbcalsblock .vbcalnumdays th,
.vbcalsblock .vbcaldays th {
  padding: 8px 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #7b8494 !important;
}

.vbcalsblock td {
  border-color: #eef0f3 !important;
  font-size: 14px !important;
}

/* A day gone by is context, not an offer. */
.vbcalsblock td.vbtdpast {
  color: #b6bcc6 !important;
  background: #fbfbfc !important;
}

/* ---------- the booking box ---------- */

.vbo-listing-details-costroomdet-inner {
  padding: 20px !important;
  border: 1px solid #e0e3e8;
  border-radius: 16px;
  background: #fff !important;
  box-shadow: 0 6px 18px rgba(14, 24, 36, 0.06);
}

.vblistroomnamedivprice .vblistroomname {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 16px !important;
}

/* "Starting From" is the qualifier on the amount, not a heading over it. */
.vbliststartfromrdet {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #7b8494 !important;
}

.vb_detcostroom .room_cost {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #0e1824 !important;
}

.vbo-listing-details-divsearch .btn,
.vbo-room-details-booking-wrapper .btn {
  border-radius: 999px !important;
}

/* On a wide screen the box follows the visitor down a page whose left column
   runs to a calendar and a half. */
@media (min-width: 900px) {
  .vbo-listing-details-costroomdet {
    align-self: flex-start;
    position: sticky;
    top: 20px;
  }
}

/* The submit in the booking box is `.vbdetbooksubmit`, which the selectors
   above did not reach — it was the one square-cornered button left on a page
   of pills. */
.vbo-listing-details-wrap .vbdetbooksubmit {
  border-radius: 999px !important;
  padding: 14px 28px !important;
  font-size: 16px !important;
}

/* A month picker does not need the width of the calendar under it. */
.vbo-availcalendars-cont select.vbselectm {
  max-width: 260px !important;
}

/* Vik pins this column with `position: relative`, so the sticky above needs
   the weight to replace it. */
@media (min-width: 900px) {
  .vbo-listing-details-wrap .vbo-listing-details-costroomdet {
    position: sticky !important;
    top: 20px;
  }
}

/* The price column reads right-aligned — the party line above it does, the
   card's edge is there — but Vik left-aligns the amount and its caption
   inside, so the one line that was right ("3 guests") looked like the odd one
   out. The whole column lines up on the same edge now. */
@media (min-width: 900px) {
  .vbo-searchresults-classic-wrap .vbsrowpricediv,
  .vbo-searchresults-classic-wrap .vbsrowpricediv .room_cost,
  .vbo-searchresults-classic-wrap .akar-price-note {
    text-align: right !important;
  }
}

/* =================================================================
   The rooms module, dressed as the Elementor section it replaces

   The two room cards on the home page were built by hand in Elementor and had
   to be edited by hand every time anything changed in Vik. This is Vik's own
   rooms module made to look like them, so the hand-built one can go.

   Everything here is measured off that section: 28px/500 titles, 22px/1.6
   description, 16px meta in #474747, the amount at 24px/500 with its small
   qualifiers, the white "Mentawai" pill 20px into the photo, and the button
   the theme already draws identically.

   Two things Vik cannot supply are dealt with in akar-searchresults.js
   ("Sleeps" → "Guests", 600.000 → 600K); two more it simply does not have —
   the bed and bathroom counts — are left out rather than invented.
   ================================================================= */

.vbmodroomscontainer .vbmodrooms {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 900px) {
  .vbmodroomscontainer .vbmodrooms {
    grid-template-columns: 1fr 1fr;
    gap: 56px 50px;
  }
}

/* Vik's own card chrome goes: the section being copied has none. */
.vbmodroomscontainer .vbmodrooms-item {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* Dissolving these two puts the photo, the text and the button on one grid,
   which is what lets the price and the button share the last row. */
.vbmodroomscontainer .vbinf,
.vbmodroomscontainer .vbmodrooms-divblock {
  display: contents !important;
}

.vbmodroomscontainer .vbmodroomsboxdiv {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;

  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

/* ---------- the photo, and the pill on it ---------- */

.vbmodroomscontainer .vbmodrooms-img-link {
  position: relative;
  display: block;
  grid-column: 1 / -1;
  grid-row: 1;

  border-radius: 12px;
  overflow: hidden;
}

.vbmodroomscontainer .vbmodroomsimg {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 12px;
  margin: 0 !important;
}

@media (max-width: 767px) {
  .vbmodroomscontainer .vbmodroomsimg {
    height: 220px;
  }
}

/* The label is the same on every room — it is where the resort is, not
   something Vik holds per room — so it is written here rather than fetched. */
.vbmodroomscontainer .vbmodrooms-img-link::after {
  content: "Mentawai";
  position: absolute;
  top: 20px;
  left: 20px;

  padding: 10px 20px;
  border-radius: 200px;
  background: #fff;

  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  color: #0e1824;
}

/* ---------- name, with the row of stars above it ---------- */

.vbmodroomscontainer .vbmodroomsname {
  display: block;
  grid-column: 1 / -1;
  grid-row: 2;

  margin: 0 !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: #0e1824 !important;
}

/* Decoration carried over from the section being copied — five fixed stars,
   not a rating of anything. */
.vbmodroomscontainer .vbmodroomsname::before {
  content: "\2605\2605\2605\2605\2605";
  display: block;
  margin: 22px 0 6px;

  font-size: 15px;
  letter-spacing: 3px;
  line-height: 1;
  color: #f0ad4e;
}

/* ---------- the line under the name ---------- */

.vbmodroomscontainer .vbmodroomsbeds {
  display: flex;
  align-items: center;
  gap: 8px;

  grid-column: 1 / -1;
  grid-row: 3;
  margin: 0 0 18px !important;

  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: #474747 !important;
}

.vbmodroomscontainer .vbmodroomsbeds::before {
  content: "\f0c0"; /* users */
  font-family: "Font Awesome 7 Free", "Font Awesome 6 Free", "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 15px;
  color: #474747;
}

.vbmodroomscontainer .vbmodroomsdesc {
  display: block;
  grid-column: 1 / -1;
  grid-row: 4;

  margin: 0 0 28px !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  color: #0e1824 !important;
}

/* The section being copied shows bed, bath and guest counts instead of a row
   of amenity icons. Two of those three are not in Vik's data, so the row is
   hidden rather than half-answered — one line to bring back if wanted. */
.vbmodroomscontainer .vbmodrooms-carats {
  display: none !important;
}

/* ---------- price and button share the closing row ---------- */

.vbmodroomscontainer .vbmodroomsroomcost {
  grid-column: 1;
  grid-row: 5;

  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;

  margin: 0 !important;
  padding: 24px 16px 0 0 !important;
  border-top: 1px solid #e7e9ed;

  font-size: 14px !important;
  font-weight: 400;
  color: #474747 !important;
}

.vbmodroomscontainer .vbmodroomsroomcost::before {
  content: "starting from";
}

.vbmodroomscontainer .vbmodroomsroomcost::after {
  content: "/Night";
}

.vbmodroomscontainer .vbmodroomsroomcost .vbo_currency,
.vbmodroomscontainer .vbmodroomsroomcost .vbo_price {
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: #0e1824 !important;
}

.vbmodroomscontainer .vbmodroomsroomcost .vbo_currency {
  margin-left: 2px;
}

/* Zero gap between the two cells, so the two borders read as one rule. */
.vbmodroomscontainer .vbmodroomsview {
  grid-column: 2;
  grid-row: 5;

  margin: 0 !important;
  padding: 24px 0 0 !important;
  border-top: 1px solid #e7e9ed;
  text-align: right;
}

/* On a phone the pair stacks, and the button takes the width. */
@media (max-width: 575px) {
  .vbmodroomscontainer .vbmodroomsboxdiv {
    grid-template-columns: minmax(0, 1fr);
  }

  .vbmodroomscontainer .vbmodroomsroomcost {
    grid-column: 1;
    padding-right: 0 !important;
  }

  .vbmodroomscontainer .vbmodroomsview {
    grid-column: 1;
    grid-row: 6;
    padding-top: 16px !important;
    border-top: 0;
  }

  .vbmodroomscontainer .vbmodroomsview .btn {
    display: block;
    text-align: center;
  }
}

/* `display` needed the weight here: without it the row stayed inline and the
   icon sat against the number with no gap between them. */
.vbmodroomscontainer .vbmodroomsbeds {
  display: inline-flex !important;
}

/* ---------- the rooms module, second pass ---------- */

/* Two rooms whose descriptions differ by a line had their prices and buttons
   35px apart, which is the sort of thing you feel before you see it. The cards
   stretch to the same height and the description takes up the slack, so the
   rule, the amount and the button line up across the row. */
.vbmodroomscontainer .vbmodrooms-item,
.vbmodroomscontainer .vbmodroomsboxdiv {
  height: 100%;
}

.vbmodroomscontainer .vbmodroomsboxdiv {
  grid-template-rows: auto auto auto 1fr auto;
}

/* The photo answers the pointer, the way a card that leads somewhere should.
   Kept to a hair over its own size: any more and the corners of the frame show
   through at the start of the transition. */
.vbmodroomscontainer .vbmodroomsimg {
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: no-preference) {
  .vbmodroomscontainer .vbmodrooms-img-link:hover .vbmodroomsimg {
    transform: scale(1.04);
  }
}

/* Written by akar-searchresults.js: the room name was a span with no way in. */
.vbmodroomscontainer .akar-module-name-link {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.vbmodroomscontainer .akar-module-name-link:hover {
  color: #474747;
}

.vbmodroomscontainer .vbmodrooms-img-link:focus-visible,
.vbmodroomscontainer .akar-module-name-link:focus-visible,
.vbmodroomscontainer .vbmodroomsview .btn:focus-visible {
  outline: 2px solid var(--vbo-accent);
  outline-offset: 3px;
}

/* "starting from IDR 600K /Night" is one statement; breaking it after "IDR"
   turns it into two. */
.vbmodroomscontainer .vbmodroomsroomcost,
.vbmodroomscontainer .vbmodroomsroomcost .vbo_currency,
.vbmodroomscontainer .vbmodroomsroomcost .vbo_price {
  white-space: nowrap;
}

/* The rule above the price was drawn as a border on each of the two cells, and
   the grid splits the row at a fractional pixel (467.117px + 127.883px) — so
   the two halves did not quite meet and the line came out broken above the
   button. One rule, spanning the row, cannot break. */
.vbmodroomscontainer .vbmodroomsboxdiv {
  grid-template-rows: auto auto auto 1fr auto auto;
}

.vbmodroomscontainer .vbmodroomsboxdiv::after {
  content: "";
  grid-column: 1 / -1;
  grid-row: 5;
  height: 1px;
  background: #e7e9ed;
}

.vbmodroomscontainer .vbmodroomsroomcost,
.vbmodroomscontainer .vbmodroomsview {
  grid-row: 6;
  border-top: 0 !important;
}

/* Same button the section being copied uses — 16px/500 in a 15/30 pill. */
.vbmodroomscontainer .vbmodroomsview .btn {
  padding: 15px 30px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

@media (max-width: 575px) {
  .vbmodroomscontainer .vbmodroomsview {
    grid-row: 7;
  }
}

/* The module ran 20px wider than the page on either side — every Elementor
   section on this page measures 1200px between 40 and 1240, while Vik's own
   container took the full 1240. The two rooms now start and end on the same
   line as everything above and below them. */
.vbmodroomscontainer .vbmodrooms {
  max-width: 1200px;
  margin-inline: auto;
}

/* Quieter type, on request. The section this copies was built at display
   sizes — a 28px name over a 22px paragraph — which shouts next to the rest of
   the home page. The proportions stay, everything steps down a size, and the
   amount comes with it: at 24px it would have been larger than the room it
   belongs to. */
.vbmodroomscontainer .vbmodroomsname {
  font-size: 22px !important;
  line-height: 1.3 !important;
}

.vbmodroomscontainer .vbmodroomsname::before {
  font-size: 14px;
  margin: 20px 0 6px;
}

.vbmodroomscontainer .vbmodroomsbeds {
  font-size: 15px !important;
  margin-bottom: 14px !important;
}

.vbmodroomscontainer .vbmodroomsdesc {
  font-size: 17px !important;
  line-height: 1.6 !important;
  margin-bottom: 24px !important;
}

.vbmodroomscontainer .vbmodroomsroomcost .vbo_currency,
.vbmodroomscontainer .vbmodroomsroomcost .vbo_price {
  font-size: 22px !important;
}

.vbmodroomscontainer .vbmodrooms-img-link::after {
  font-size: 15px;
  padding: 9px 18px;
}

/* ---------- accent buttons: the hover state ---------- */

/* On hover these go dark, but the label stayed the theme's #474747 — grey text
   on near-black, which is about as legible as the screenshot suggested. Our
   own rule at the top of this file was setting the colour on a single class
   and losing; the weight below is what it takes.

   The resting state comes along: the theme was painting the label #474747 on
   the accent, where every Elementor button on the site uses #0e1824. Same
   button, same colour, whichever built it. */
.vbo-pref-color-btn,
a.btn.vbo-pref-color-btn,
input.btn.vbo-pref-color-btn,
button.btn.vbo-pref-color-btn {
  color: #0e1824 !important;
}

.vbo-pref-color-btn:hover,
.vbo-pref-color-btn:focus-visible,
a.btn.vbo-pref-color-btn:hover,
input.btn.vbo-pref-color-btn:hover,
button.btn.vbo-pref-color-btn:hover {
  background-color: #0e1824 !important;
  border-color: #0e1824 !important;
  color: #fff !important;
}