.bh-location-trigger{position:relative}
.bh-location-trigger input{width:100%;border:0;outline:0;background:transparent;color:#0b1f44;font:inherit;padding:2px 0 0}
.bh-location-popup{left:0;width:min(420px,calc(100vw - 32px));max-width:min(520px,calc(100vw - 32px));max-height:460px;padding:8px 0;overflow-y:auto;overscroll-behavior:contain;background:#fff;border-radius:10px;box-shadow:0 20px 60px rgba(3,24,62,.28);display:none;flex-direction:column}
.bh-location-popup.open{display:flex}
/* Flush under the field it drops from - no floating gap between the search bar
   and the panel. 100% is the bar's own height, so it adapts to each module's
   row height without a magic pixel value per page. */
.bh-search .bh-location-popup,.module-search .bh-location-popup,.results-module-search .bh-location-popup,.single-search-strip .bh-location-popup,.listing-search .bh-location-popup{top:calc(100% + 2px)}
.bh-location-list{display:flex;flex-direction:column}
/* Without one of these ancestor classes matching, .bh-location-option falls
   back to a bare <button>: text-align defaults to center and the pin span's
   explicit width/height are ignored (inline elements don't honour them,
   only the grid item blockification below does) - so the pin collapses to
   nothing and the text centres itself. .listing-search is the search bar
   every module's single/results page actually renders (see
   single.noderframe/results.noderframe), so it belongs in this list too. */
.bh-search .bh-location-popup .bh-location-option,.module-search .bh-location-popup .bh-location-option,.results-module-search .bh-location-popup .bh-location-option,.single-search-strip .bh-location-popup .bh-location-option,.listing-search .bh-location-popup .bh-location-option{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:12px;width:100%;min-height:72px;padding:12px 28px;border:0;border-radius:0;background:#fff;color:#071b41;text-align:left;cursor:pointer;box-shadow:none}
.bh-search .bh-location-popup .bh-location-option:hover,.bh-search .bh-location-popup .bh-location-option:focus,.bh-search .bh-location-popup .bh-location-option[aria-selected="true"],.module-search .bh-location-option:hover,.module-search .bh-location-option:focus,.module-search .bh-location-option[aria-selected="true"],.results-module-search .bh-location-option:hover,.results-module-search .bh-location-option:focus,.results-module-search .bh-location-option[aria-selected="true"],.single-search-strip .bh-location-option:hover,.single-search-strip .bh-location-option:focus,.single-search-strip .bh-location-option[aria-selected="true"],.listing-search .bh-location-option:hover,.listing-search .bh-location-option:focus,.listing-search .bh-location-option[aria-selected="true"]{background:#f1f4ff;color:#071b41;outline:0}
.bh-location-option[hidden]{display:none}
/* A map-pin icon, drawn as a masked SVG so it renders identically on every
   page regardless of which icon font is loaded there. */
.bh-location-pin{width:24px;height:24px;color:#0b63ce;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/20px 20px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center/20px 20px no-repeat}
.bh-location-pin.is-listing{color:#e0218a}
/* A business (bank, office, shop): a building instead of the map pin. */
.bh-location-pin.is-business{color:#3d4b66;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v4h2a2 2 0 0 1 2 2v10h1v2H3v-2h1zm2 0h4v-3h2v3h2V5H6v16zm10 0h2v-10h-2v10zM8 7h2v2H8V7zm0 4h2v2H8v-2zm0 4h2v2H8v-2z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 21V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v4h2a2 2 0 0 1 2 2v10h1v2H3v-2h1zm2 0h4v-3h2v3h2V5H6v16zm10 0h2v-10h-2v10zM8 7h2v2H8V7zm0 4h2v2H8v-2zm0 4h2v2H8v-2z'/%3E%3C/svg%3E")}
.bh-location-pin *{display:none}
.bh-location-option strong,.bh-location-country{display:block}
.bh-location-option strong{font-size:16px;font-weight:600}
.bh-location-country{margin-top:3px;color:#667795;font-size:14px}
.bh-location-empty{display:none;order:-1;margin:0;padding:14px 28px;color:#667795;font-size:14px;border-bottom:1px solid #eef1f6}
.bh-location-empty.show{display:block}
.bh-location-empty:not(.show){border-bottom:0}
@media(max-width:700px){.bh-location-popup{left:0;top:100%;width:100%;max-height:360px}.bh-location-option{padding-inline:20px}}
/* Lookup in progress (see attachPlaceField in home.js): a spinner row at the
   top of the panel, the previous results dimmed under it, shimmer rows in
   their place when there are none yet, and a small spinner inside the field. */
.bh-location-loading{display:none;order:-2}
.bh-location-popup.is-loading .bh-location-loading{display:block}
.bh-location-loading-row{display:flex;align-items:center;gap:12px;margin:0;padding:14px 28px;color:#0b63ce;font-size:14px;font-weight:500;border-bottom:1px solid #eef1f6}
.bh-location-spinner{flex:none;width:18px;height:18px;border:2px solid rgba(11,99,206,.18);border-top-color:#0b63ce;border-radius:50%;animation:bh-place-spin .7s linear infinite}
.bh-location-skeletons{display:none}
.bh-location-popup.is-loading-empty .bh-location-skeletons{display:block}
.bh-location-skeleton{display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:8px;align-items:center;min-height:72px;padding:12px 28px}
.bh-location-skeleton i{grid-row:1/3;width:24px;height:24px;border-radius:6px}
.bh-location-skeleton b{height:12px;border-radius:6px;width:55%}
.bh-location-skeleton b+b{width:80%;height:10px}
.bh-location-skeleton i,.bh-location-skeleton b{display:block;background:linear-gradient(90deg,#eef1f6 0%,#f7f9fc 40%,#eef1f6 80%) 0 0/220% 100%;animation:bh-place-shimmer 1.2s ease-in-out infinite}
.bh-location-popup.is-loading .bh-location-list{opacity:.45;pointer-events:none;transition:opacity .15s}
.bh-location-trigger.bh-place-searching::after{content:"";position:absolute;right:14px;top:50%;width:16px;height:16px;margin-top:-8px;border:2px solid rgba(11,99,206,.18);border-top-color:#0b63ce;border-radius:50%;animation:bh-place-spin .7s linear infinite;pointer-events:none}
.bh-location-trigger.bh-place-searching input{padding-right:26px}
@keyframes bh-place-spin{to{transform:rotate(360deg)}}
@keyframes bh-place-shimmer{to{background-position-x:-220%}}
@media(prefers-reduced-motion:reduce){.bh-location-spinner,.bh-location-trigger.bh-place-searching::after{animation-duration:1.6s}.bh-location-skeleton i,.bh-location-skeleton b{animation:none}}

/* The two route fields read like the location field beside them: a label, the
   chosen stop under it, and a panel that opens below. A native select could
   not be made to match - its list is drawn by the operating system, not by
   this stylesheet. */
.module-search .bh-route-trigger,
.results-module-search .bh-route-trigger,
.listing-search .bh-route-trigger {
  position: relative;
}

.module-search .bh-route-input,
.results-module-search .bh-route-input,
.listing-search .bh-route-input {
  display: block;
  width: 100%;
  padding-top: 2px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #051036;
  font: inherit;
  font-size: 15px;
  /* A long stop name shortens rather than pushing the cell wider and breaking
     the grid. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Positioned against its own field rather than the form, so each panel opens
   under the field it belongs to instead of both opening at the left edge. */
.module-search .bh-route-popup,
.results-module-search .bh-route-popup,
.listing-search .bh-route-popup {
  top: calc(100% + 6px);
  left: 0;
  /* The results strip pushes every panel down by 14px; the offset above is
     measured from the field, so the extra margin would double it. */
  margin-top: 0;
  width: min(380px, calc(100vw - 32px));
  max-height: 420px;
}

@media (max-width: 700px) {
  .module-search .bh-route-popup,
  .results-module-search .bh-route-popup,
  .listing-search .bh-route-popup {
    width: min(340px, calc(100vw - 24px));
    max-height: 320px;
  }
}

/* Five cells and the Search button on one line.
   The results strip is laid out by the template's -col-3-big, which draws four
   columns. A bus needs five - arrival, departure, dates, passengers, button -
   and the fifth had nowhere to go but a second row, where it sat under Arrival
   at full width. This is the same grid one column wider, and it collapses to a
   stack at the same breakpoint the template's own columns do. */
.mainSearch.-bh-col-bus .button-grid {
  grid-template-columns: 1fr 1fr .85fr .85fr auto;
}

@media (max-width: 991px) {
  .mainSearch.-bh-col-bus .button-grid {
    grid-template-columns: 1fr;
  }
}

/* A vehicle carries one cell more than a bus - pick up, drop off, type,
   date, guest, button. */
.mainSearch.-bh-col-vehicle .button-grid {
  grid-template-columns: 1fr 1fr .8fr .85fr .85fr auto;
}

@media (max-width: 991px) {
  .mainSearch.-bh-col-vehicle .button-grid {
    grid-template-columns: 1fr;
  }
}

/* A boarding house adds Gender and Type - location, date, gender, type,
   guest, button. */
.mainSearch.-bh-col-boarding .button-grid {
  grid-template-columns: 1.2fr .9fr .75fr .75fr 1fr auto;
}

/* Once the strip stacks, Gender and Type are short selects - they share one
   row instead of taking a full-width row each. */
@media (max-width: 991px) {
  .mainSearch.-bh-col-boarding .button-grid {
    grid-template-columns: 1fr 1fr;
  }

  .mainSearch.-bh-col-boarding .button-grid > * {
    grid-column: 1 / -1;
  }

  .mainSearch.-bh-col-boarding .button-grid > .bh-boarding-half {
    grid-column: auto;
    min-width: 0;
  }

  .mainSearch.-bh-col-boarding .bh-boarding-half select {
    width: 100%;
  }
}

/* An event has no guest count to ask for - venue and date, same two flexible
   cells as the theme's shared -col-2, but that class sizes its button track
   with min-content, sized to "Search" on the browse/results pages. This
   single-listing page's button reads "Check availability" instead, and
   min-content happily wraps that at the space, splitting it onto two lines.
   auto (matching bus/vehicle above) gives it the room it actually needs. */
.mainSearch.-bh-col-event .button-grid {
  grid-template-columns: 1fr 1fr auto;
}

@media (max-width: 991px) {
  .mainSearch.-bh-col-event .button-grid {
    grid-template-columns: 1fr;
  }
}

.module-search-flight {
  width: min(1320px, 100%);
  grid-template-columns: .85fr .85fr .75fr .8fr .8fr 1.3fr 155px;
}

/*
 * The browse page's own flight widget is deliberately absolutely positioned
 * (front-browse.css's plain .module-search rule) to straddle the bottom edge
 * of its hero banner - that only works there because the hero itself is the
 * nearest positioned ancestor. The results page and the single flight page
 * reuse the same widget for the search band above the listings/gallery, with
 * no such hero to anchor against - position:absolute fell back to the
 * viewport itself, pinning the whole form to the bottom of the screen
 * instead of sitting in the page's normal flow. Back to relative (not
 * static: the popups below still need this box as their positioned
 * ancestor) with the offset cleared.
 */
.module-search-flight.-page-search {
  position: relative;
  bottom: auto;
  left: auto;
  margin: 30px auto 0;
}

/* The gold outline/thick dividers are the browse page's hero-banner accent -
   on the results and single pages the flight strip should read like every
   other module's listing/single search bar (see .results-module-search and
   .single-search-strip in public-search.css): a plain white box with a soft
   shadow and thin gray dividers, no colored border. */
.module-search-flight.-page-search {
  border: 0;
  box-shadow: 0 12px 35px rgba(7, 29, 67, .14);
}

.module-search-flight.-page-search label {
  border-right: 1px solid #d9dde4;
}

/* Every other module's listing/single label title is an h3.fw-500 at 15px
   (see the else-branch markup in results.noderframe/single.noderframe) - the
   flight strip's title is a bare <strong>, which the browser bolds to 700 by
   default, so it read noticeably heavier/larger next to them. Match the
   other modules' weight and size here. */
.module-search-flight.-page-search label strong {
  font-size: 15px;
  font-weight: 500;
}

.module-search-flight.-page-search label span,
.module-search-flight.-page-search input,
.module-search-flight.-page-search select {
  font-size: 15px;
}

/* front-browse.css's plain .module-search > button is flush edge-to-edge
   with square corners - fine flush against the hero's rounded frame on the
   browse page, but on results/single it sat as a hard square block jammed
   into the box's rounded corner. Inset it with the same margin/radius the
   other modules' listing buttons use so it reads as a button, not a slab -
   this also keeps it well-proportioned once the strip wraps to mobile. */
.module-search-flight.-page-search > button {
  margin: 10px;
  padding: 0 22px;
  border-radius: 4px;
  background: #ffd33f;
  color: #07183f;
  white-space: nowrap;
  font: 500 15px/1.2 Jost, sans-serif;
}

.module-search-flight.-page-search > button:hover {
  background: #ffc400;
}

/* The single page's flight button reads "Check availability" (see
   single.noderframe), much longer than the results page's plain "Search" -
   the base .module-search-flight track sizes that last column at a fixed
   155px for the short label, so the long one wrapped to two lines with a
   dead gap beside it. Let the column size to whatever the button actually
   needs instead of forcing a fixed width. Scoped to the desktop range only:
   .-page-search has higher specificity than the plain .module-search-flight
   selector the max-width breakpoints below use, so applying it unguarded
   would win at every width and silently break the mobile 2-column/1-column
   stacking. */
@media (min-width: 768px) {
  .module-search-flight.-page-search {
    grid-template-columns: .85fr .85fr .75fr .8fr .8fr 1.3fr auto;
  }
}

/* This file loads after front-browse.css, so its own mobile stacking rules
   for .module-search-flight never win the cascade (equal specificity, later
   source always takes it) - the six desktop columns above stayed in effect
   at every width, squeezing every field down to a sliver too narrow to
   read. Repeating the same breakpoints here, in this file, is what actually
   lets them apply. */
@media (max-width: 767px) {
  .module-search-flight {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .module-search-flight {
    grid-template-columns: 1fr;
  }
}

.module-search label {
  display: grid;
  min-width: 0;
  align-content: center;
  gap: 3px;
  padding: 9px 28px;
  border-right: 1px solid #d8dce5;
  color: #071538;
}

/* The flight strip carries six label fields - one for each field, same as
   the other search strips' first three via the :not() rule in
   front-browse.css - so every one of them gets the matching yellow divider
   instead of the plain gray one above. */
.module-search-flight label {
  border-right: 4px solid #ffc400;
}

/* A copy of the Search button, appended by script to the end of the dates
   and guests panels themselves - see home.js. Hidden everywhere the panel
   already sits right next to the real button; shown once the strip has
   stacked into rows and a scroll or a screen's worth of calendar can put
   real distance between them. */
.bh-popup-search {
  display: none;
}

@media (max-width: 991px) {
  .bh-popup-search {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin-top: 14px;
    padding: 14px;
    border: 0;
    border-radius: 4px;
    color: #fff;
    background: #0877bb;
    font-size: 16px;
    font-weight: 600;
  }
}
