/* ============================================================================
   Bootstrap 4 → 5 compatibility shim
   ----------------------------------------------------------------------------
   The Travelista markup was authored against Bootstrap 4.0.0-beta. We serve
   Bootstrap 5.3.8 instead. Diffing all 325 classes used in that markup against
   both builds turned up exactly four that v4 defined and v5 dropped, with
   nothing else in the theme's stylesheets covering them.

   Every rule below is copied verbatim from the template's own
   css/bootstrap.css so the rendering stays identical. Do not "improve" them —
   their whole job is to preserve 1:1 fidelity with the original.

   Loaded AFTER bootstrap.min.css and BEFORE main.css.
   ========================================================================= */

/* bootstrap.css:1830 */
.form-group {
  margin-bottom: 1rem;
}

/* bootstrap.css:2080 */
.form-inline {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.form-inline .form-check {
  width: 100%;
}

@media (min-width: 576px) {
  .form-inline label {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
  }
  .form-inline .form-group {
    display: flex;
    flex: 0 0 auto;
    flex-flow: row wrap;
    align-items: center;
    margin-bottom: 0;
  }
  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  .form-inline .form-control-plaintext {
    display: inline-block;
  }
  .form-inline .input-group {
    width: auto;
  }
  .form-inline .form-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding-left: 0;
  }
  .form-inline .form-check-input {
    position: relative;
    margin-top: 0;
    margin-right: 0.25rem;
    margin-left: 0;
  }
}

/* bootstrap.css:3173 */
.input-group-prepend,
.input-group-append {
  display: flex;
}

.input-group-prepend .btn,
.input-group-append .btn {
  position: relative;
  z-index: 2;
}

.input-group-prepend .btn + .btn,
.input-group-prepend .btn + .input-group-text,
.input-group-prepend .input-group-text + .input-group-text,
.input-group-prepend .input-group-text + .btn,
.input-group-append .btn + .btn,
.input-group-append .btn + .input-group-text,
.input-group-append .input-group-text + .input-group-text,
.input-group-append .input-group-text + .btn {
  margin-left: -1px;
}

/* bootstrap.css:7900 — v5 renamed this to .text-end */
.text-right {
  text-align: right !important;
}

/* ----------------------------------------------------------------------------
   Two behavioural changes between v4 and v5 that a class-by-class diff cannot
   see. Both were caught by rendering the page and pixel-diffing it against the
   original, not by reading the stylesheets.
   ------------------------------------------------------------------------- */

/* 1. Container scale.
      v4.0-beta topped out at the xl breakpoint (1200px -> 1140px). v5 added
      xxl (1400px -> 1320px), so every container grew by 180px on a wide
      screen and the whole layout drifted. Restore v4's cap. */
@media (min-width: 1400px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    max-width: 1140px;
  }
}

/* 2. Row children.
      v5 applies `.row > * { flex-shrink:0; width:100%; max-width:100% }` to
      EVERY direct child of a row. v4 only ever styled `.col-*` children, so
      markup that drops a bare element into a row — which this theme does in
      126 places, including the logo and nav in every header — relied on the
      element sizing to its own content. Under v5 each one becomes full-width
      and stacks. Restore v4's behaviour for children with no column class. */
/* The negations sit inside :where() so they contribute NO specificity. The
   whole selector therefore weighs the same as a single class, which means
   any component that sets its own width still wins — precisely the v4
   situation, where no rule existed here at all and the component's own CSS
   decided.

   Without :where() this selector scored (0,3,0) and beat
   `.owl-carousel { width: 100% }`. Every Owl carousel then sized to its
   stage instead of its column: the homepage testimonial slider stretched to
   6,650px and the document scrolled ~4,000px sideways at every breakpoint.
   The stage is clipped visually, so the page looked fine in a screenshot
   while the horizontal scrollbar was very real. */
.row > *:where(:not([class*="col-"]):not(.col)) {
  flex-shrink: 1;
  width: auto;
  max-width: none;
  padding-right: 0;
  padding-left: 0;
  margin-top: 0;
}

/* 3. Gutter width.
      v4 used a 30px gutter throughout: containers padded 15px a side, rows
      pulled back -15px, columns padded 15px. v5 derives all of that from
      --bs-gutter-x, which defaults to 1.5rem (24px) — so every container and
      column sat 3px in from where the original put it. Both containers and
      rows need the variable, not just rows. */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl,
.row {
  --bs-gutter-x: 30px;
}

/* 4. Positioned columns.  ← the important one
      v4 set `position: relative; min-height: 1px` on every column
      (bootstrap.css:653). v5 leaves columns static.

      This theme layers content over photos with an absolutely-positioned
      `<div class="overlay overlay-bg">` placed BEFORE the content in the DOM.
      Under v4 the columns were positioned, so they painted in the positioned
      layer and — being later siblings — sat above the overlay. Under v5 the
      columns are static, the overlay wins, and rgba(4,9,30,.4) washes over
      the hero copy and the search panel.

      Restoring the v4 rule fixes every overlay section at once. */
.col,
.col-auto,
[class^="col-"],
[class*=" col-"] {
  position: relative;
  min-height: 1px;
}

/* 6. Column sizing mechanism.
      v4 sized columns with `flex: 0 0 N%` PLUS `max-width: N%`.
      v5 dropped the max-width and uses `width: N%` instead.

      That matters whenever something inside a column sets its own width.
      Owl Carousel ships `.owl-carousel { width: 100% }`, and owl.carousel.css
      loads after bootstrap — under v4 the column's max-width still capped it,
      under v5 the later `width: 100%` simply won. The packages carousel
      measured itself at the full 1140px container instead of its 950px
      column, so Owl built 1110px slides and overflowed the grid.

      The rules below are extracted verbatim from the template's own
      css/bootstrap.css — 14 per breakpoint, 70 in total. */

.col { max-width: 100%; }
.col-auto { max-width: none; }
.col-1 { max-width: 8.33333%; }
.col-2 { max-width: 16.66667%; }
.col-3 { max-width: 25%; }
.col-4 { max-width: 33.33333%; }
.col-5 { max-width: 41.66667%; }
.col-6 { max-width: 50%; }
.col-7 { max-width: 58.33333%; }
.col-8 { max-width: 66.66667%; }
.col-9 { max-width: 75%; }
.col-10 { max-width: 83.33333%; }
.col-11 { max-width: 91.66667%; }
.col-12 { max-width: 100%; }

@media (min-width: 576px) {
.col-sm { max-width: 100%; }
.col-sm-auto { max-width: none; }
.col-sm-1 { max-width: 8.33333%; }
.col-sm-2 { max-width: 16.66667%; }
.col-sm-3 { max-width: 25%; }
.col-sm-4 { max-width: 33.33333%; }
.col-sm-5 { max-width: 41.66667%; }
.col-sm-6 { max-width: 50%; }
.col-sm-7 { max-width: 58.33333%; }
.col-sm-8 { max-width: 66.66667%; }
.col-sm-9 { max-width: 75%; }
.col-sm-10 { max-width: 83.33333%; }
.col-sm-11 { max-width: 91.66667%; }
.col-sm-12 { max-width: 100%; }
}

@media (min-width: 768px) {
.col-md { max-width: 100%; }
.col-md-auto { max-width: none; }
.col-md-1 { max-width: 8.33333%; }
.col-md-2 { max-width: 16.66667%; }
.col-md-3 { max-width: 25%; }
.col-md-4 { max-width: 33.33333%; }
.col-md-5 { max-width: 41.66667%; }
.col-md-6 { max-width: 50%; }
.col-md-7 { max-width: 58.33333%; }
.col-md-8 { max-width: 66.66667%; }
.col-md-9 { max-width: 75%; }
.col-md-10 { max-width: 83.33333%; }
.col-md-11 { max-width: 91.66667%; }
.col-md-12 { max-width: 100%; }
}

@media (min-width: 992px) {
.col-lg { max-width: 100%; }
.col-lg-auto { max-width: none; }
.col-lg-1 { max-width: 8.33333%; }
.col-lg-2 { max-width: 16.66667%; }
.col-lg-3 { max-width: 25%; }
.col-lg-4 { max-width: 33.33333%; }
.col-lg-5 { max-width: 41.66667%; }
.col-lg-6 { max-width: 50%; }
.col-lg-7 { max-width: 58.33333%; }
.col-lg-8 { max-width: 66.66667%; }
.col-lg-9 { max-width: 75%; }
.col-lg-10 { max-width: 83.33333%; }
.col-lg-11 { max-width: 91.66667%; }
.col-lg-12 { max-width: 100%; }
}

@media (min-width: 1200px) {
.col-xl { max-width: 100%; }
.col-xl-auto { max-width: none; }
.col-xl-1 { max-width: 8.33333%; }
.col-xl-2 { max-width: 16.66667%; }
.col-xl-3 { max-width: 25%; }
.col-xl-4 { max-width: 33.33333%; }
.col-xl-5 { max-width: 41.66667%; }
.col-xl-6 { max-width: 50%; }
.col-xl-7 { max-width: 58.33333%; }
.col-xl-8 { max-width: 66.66667%; }
.col-xl-9 { max-width: 75%; }
.col-xl-10 { max-width: 83.33333%; }
.col-xl-11 { max-width: 91.66667%; }
.col-xl-12 { max-width: 100%; }
}