/* =====================================================================
   Beyond Journey - destination type-ahead (search panels)
   ---------------------------------------------------------------------
   Every search panel's "where" field is typed into, not picked from a
   list: "Go" brings up Goa, "De" brings up Delhi and Dehradun, "DEL"
   the airport. The input sits in the slot the old value text used, so
   each panel keeps its own type size and colour; the suggestion list
   is shared. Driven by js/bj-typeahead.js. Prefix: bjty-.
   ===================================================================== */

/* The input inherits the slot's type from the panel's own class (for
   example .hp-field__value or .main-val). The chrome the site stylesheet
   puts on every input - height, border, padding, background - is what
   has to go, and its attribute selectors outrank a class, hence the
   !important. */
.bjty-host { position: relative; cursor: text; }
.bjty-host .bjty-input {
  display: block; width: 100%;
  height: auto !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important;
  outline: none !important;
  font-family: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: text;
}
.bjty-host .bjty-input::placeholder { color: #a3aabb; font-weight: 600; opacity: 1; }
.bjty-host .bjty-input::-ms-clear { display: none; }

/* the panels' own value slots, restated for an input so the attribute
   selectors in style.css cannot shrink or recolour the typed text */
.hp-field .bjty-input { font-size: 17px !important; font-weight: 800 !important; color: #17233e !important; line-height: 1.25 !important; }
#hotel-search .bjty-input { font-size: 17px !important; font-weight: 800 !important; color: #17233e !important; line-height: 1.25 !important; }
#bjfSearch .bjty-input { font-size: 18px !important; font-weight: 800 !important; color: #17233e !important; line-height: 1.25 !important; }

/* ---------------------------------------------------------------
   Suggestion list
   --------------------------------------------------------------- */
.bjty {
  position: absolute; top: 100%; left: 0; z-index: 1200;
  width: min(330px, calc(100vw - 32px));
  margin-top: 8px; padding: 6px;
  background: #fff; border: 1px solid #eceae4; border-radius: 14px;
  box-shadow: 0 18px 46px -14px rgba(23, 35, 62, .35);
  max-height: 330px; overflow-y: auto;
  display: none; text-align: left; cursor: default;
}
.bjty.is-open { display: block; }
.bjty--right { left: auto; right: 0; }
.bjty__head {
  padding: 6px 10px 4px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8a93a8;
}
.bjty__opt {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px; cursor: pointer;
  transition: background-color .15s ease;
}
.bjty__opt:hover, .bjty__opt.is-active { background: #fdf1e6; }
.bjty__ico {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 8px; background: #f7f6f2; color: #f5761a; font-size: 12px;
}
.bjty__opt:hover .bjty__ico, .bjty__opt.is-active .bjty__ico { background: #fff; }
.bjty__ico svg { width: 12px; height: 12px; }
.bjty__txt { flex: 1; min-width: 0; }
.bjty__txt strong {
  display: block; font-size: 13.5px; font-weight: 700; color: #17233e; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bjty__txt strong mark { background: none; padding: 0; color: #f5761a; font-weight: 800; }
.bjty__txt small {
  display: block; margin-top: 1px; font-size: 11.5px; color: #56607a; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bjty__code { flex: none; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: #f5761a; }
.bjty__none { padding: 12px 10px; font-size: 12.5px; line-height: 1.5; color: #56607a; }

@media (max-width: 576px) {
  .bjty { width: 100%; max-height: 260px; }
}

/* the listing pages' search dock: the destination cell types too */
.bjl-panel__field--type { position: relative; cursor: text; }
.bjl-panel__field .bjty-input { font-size: 15.5px !important; font-weight: 700 !important; color: #17233e !important; line-height: 1.25 !important; }
.bjl-panel__field .bjty { top: calc(100% + 4px); left: 0; }