/* =====================================================================
   The holiday search bar  (.hp-card inside .hp-hero or .bjc-search)
   ---------------------------------------------------------------------
   One design for the two pages that carry the holiday search - the home
   page hero (Holiday/Index.cshtml, inside .bjc-search) and the /holiday
   hero (Pages/HolidayPackage.cshtml, inside .hp-hero) - so the designer
   sees the same bar on both, 2026-09-25. Both pages keep their own base
   rules for the hp-* classes (a copy each, in their inline <style>); this
   file sits on top of both and every selector here is two classes deep
   so it wins over those bases whatever the order. bj-space.css sets a
   few of the same properties with !important, which is why those are
   !important here as well.

   DESKTOP (992px up): one white bar, as wide as its words and no wider,
   centred - the title on the left as its first segment, one line, then
   the three fields with their small icons inline in the orange labels,
   hairlines between, and the SEARCH pill right after the travellers
   field. It used to stretch the whole container, so the travellers
   field was 320px wide for 140px of words and the button stood alone at
   the far end; the designer asked for that gap to go.

   PHONE AND TABLET: the stacked card - title, three fields one under
   another, the button under them, centred.

   Each page keeps two things of its own: the /holiday hero opens its
   menus downward and the home hero upward (bj-care.css - the care card
   rides up over the home hero's foot), and the home page's phone stack
   was already in bj-care.css and still is.
   ===================================================================== */

/* ---- shared, every width ---- */
.hp-hero .hp-card,
.bjc-search .hp-card {
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow:
    inset 0 1px 0 #fff,
    0 10px 24px -14px rgba(23, 35, 62, .35),
    0 40px 80px -30px rgba(0, 0, 0, .6);
}
.hp-hero .hp-card__title,
.bjc-search .hp-card__title { color: #17233e; font-weight: 800; }
.hp-hero .hp-card__title i,
.hp-hero .hp-card__title svg,
.bjc-search .hp-card__title i,
.bjc-search .hp-card__title svg { color: #17233e; }
.hp-hero .hp-field,
.bjc-search .hp-field { transition: background-color .25s ease, box-shadow .25s ease; }
.hp-hero .hp-field:hover,
.hp-hero .hp-field:focus-within,
.bjc-search .hp-field:hover,
.bjc-search .hp-field:focus-within {
  background: #fff5ec;
  box-shadow: inset 0 0 0 1px rgba(245, 118, 26, .28);
  z-index: 1;
}
.hp-hero .hp-field__label,
.bjc-search .hp-field__label { font-size: 11px !important; font-weight: 700; color: #f5761a; margin-bottom: 3px; }
.hp-hero .hp-field__label i,
.hp-hero .hp-field__label svg,
.bjc-search .hp-field__label i,
.bjc-search .hp-field__label svg { margin-right: 5px; }
.hp-hero .hp-field__value,
.bjc-search .hp-field__value { font-size: 16px !important; font-weight: 800; color: #17233e; }
.hp-hero .hp-field__sub,
.bjc-search .hp-field__sub { font-size: 11px !important; color: #7b8395; }

/* ---- the bar ---- */
@media (min-width: 992px) {
  .hp-hero .hp-card,
  .bjc-search .hp-card {
    display: flex;
    align-items: center;
    width: fit-content;
    max-width: 100% !important;
    margin: 0 auto;
    padding: 7px 7px 7px 20px !important;
    border-radius: 22px !important;
  }
  .hp-hero .hp-card__title,
  .bjc-search .hp-card__title {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 !important;
    padding: 0 18px 0 0;
    border-right: 1px solid #ece9e2;
    font-size: 14.5px !important;
    white-space: nowrap;
  }
  .hp-hero .hp-grid,
  .bjc-search .hp-grid {
    flex: 0 1 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    min-width: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  /* each field as wide as its words: the button then follows the
     travellers field instead of standing at the far end of the bar */
  .hp-hero .hp-field,
  .bjc-search .hp-field {
    flex: 0 1 auto;
    min-width: 0;
    padding: 8px 18px !important;
    border-right: 1px solid #ece9e2;
    border-bottom: 0 !important;
    border-radius: 14px;
  }
  .hp-hero .hp-field:last-child,
  .bjc-search .hp-field:last-child { border-right: 0; }
  .hp-hero .hp-field:hover,
  .hp-hero .hp-field:focus-within,
  .bjc-search .hp-field:hover,
  .bjc-search .hp-field:focus-within { border-right-color: transparent; }
  /* the typed field has no words to size itself by, so it gets a width */
  .hp-hero .hp-field--type,
  .bjc-search .hp-field--type { width: 262px; }
  .hp-hero .hp-field--type .hp-field__value,
  .bjc-search .hp-field--type .hp-field__value { width: 100%; }
  .hp-hero .hp-search-btn,
  .bjc-search .hp-search-btn {
    position: static;
    transform: none;
    align-self: center;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    width: auto;
    margin: 0 2px 0 10px;
    padding: 12px 26px !important;
    border-radius: 999px;
    font-size: 13.5px !important;
    letter-spacing: .04em;
    box-shadow: 0 10px 22px -10px rgba(245, 118, 26, .65);
  }
  .hp-hero .hp-search-btn:hover,
  .bjc-search .hp-search-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px -10px rgba(245, 118, 26, .7);
  }
  .hp-hero .hp-search-btn:active,
  .bjc-search .hp-search-btn:active { transform: translateY(1px); }
  .hp-hero .hp-drop,
  .bjc-search .hp-drop { width: 300px; }
}

/* a 1100px laptop: a notch off, so the bar still fits its container */
@media (min-width: 992px) and (max-width: 1199px) {
  .hp-hero .hp-card__title,
  .bjc-search .hp-card__title { font-size: 13.5px !important; padding-right: 14px; }
  .hp-hero .hp-field,
  .bjc-search .hp-field { padding: 8px 14px !important; }
  .hp-hero .hp-field--type,
  .bjc-search .hp-field--type { width: 222px; }
  .hp-hero .hp-field__value,
  .bjc-search .hp-field__value { font-size: 15px !important; }
  .hp-hero .hp-search-btn,
  .bjc-search .hp-search-btn { padding: 11px 20px !important; font-size: 13px !important; }
}

/* ---- the stacked card ---- */
@media (max-width: 991px) {
  .hp-hero .hp-card,
  .bjc-search .hp-card {
    max-width: none !important;
    padding: 16px 16px 18px !important;
    border-radius: 18px !important;
  }
  .hp-hero .hp-card__title,
  .bjc-search .hp-card__title { font-size: 15px !important; margin: 0 0 12px !important; }
  .hp-hero .hp-grid,
  .bjc-search .hp-grid { flex-direction: column; flex-wrap: nowrap; }
  .hp-hero .hp-field,
  .bjc-search .hp-field {
    flex: 1 1 100%;
    padding: 10px 14px !important;
    border-right: 0;
    border-bottom: 1px solid #ece9e2;
    border-radius: 0;
  }
  .hp-hero .hp-field:first-child,
  .bjc-search .hp-field:first-child { border-radius: 14px 14px 0 0; }
  .hp-hero .hp-field:last-child,
  .bjc-search .hp-field:last-child { border-bottom: 0; border-radius: 0 0 14px 14px; }
  .hp-hero .hp-search-btn,
  .bjc-search .hp-search-btn {
    position: static;
    transform: none;
    display: block;
    width: fit-content;
    margin: 14px auto 0;
    /* the page's phone scale: a thin pill, not a 44px slab */
    padding: 8px 28px !important;
    border-radius: 999px;
    font-size: 13px !important;
    line-height: 1.35;
  }
  .hp-hero .hp-search-btn:hover,
  .bjc-search .hp-search-btn:hover { transform: translateY(-1px); }
}

/* ---- the compact card, on a phone (2026-09-25, the designer's call) ----
   The stacked card stood 375px tall on a 390px phone - most of the screen.
   Now the destination keeps the full width, Travel Date and Travellers
   share the row under it, and everything is a size down. The date's hint
   line ("Flexible dates? Pick a start day") shows only when it has an
   error to report; the travellers' line ("2 Adults, 0 Children") stays,
   since the figure alone does not say who. The travellers menu, now in a
   half-width field, opens at its full 280px from the field's right edge. */
@media (max-width: 575px) {
  .hp-hero .hp-card,
  .bjc-search .hp-card { padding: 10px 10px 12px !important; border-radius: 16px !important; }
  /* room either side of the card (2026-09-25, the designer's call): its
     edges sit 30px in from the screen's on both pages - /holiday's card
     sits in a full-width box, the home page's inside a .container that
     already pads 12px, hence the two margins */
  .hp-hero .hp-card { width: auto !important; margin-left: 30px !important; margin-right: 30px !important; }
  .bjc-search .hp-card { width: auto !important; margin-left: 18px !important; margin-right: 18px !important; }
  .hp-hero .hp-card__title,
  .bjc-search .hp-card__title { font-size: 13px !important; margin: 0 0 6px !important; gap: 8px; }
  .hp-hero .hp-grid,
  .bjc-search .hp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hp-hero .hp-field,
  .bjc-search .hp-field { padding: 6px 10px !important; }
  .hp-hero .hp-field--type,
  .bjc-search .hp-field--type { grid-column: 1 / -1; }
  .hp-hero .hp-field:nth-child(2),
  .bjc-search .hp-field:nth-child(2) { border-bottom: 0; border-right: 1px solid #ece9e2; border-radius: 0 0 0 14px; }
  /* the date has no second line on a phone, so its words sit in the middle
     of the row the travellers field sets, not at its top */
  .hp-hero .hp-field:nth-child(2),
  .bjc-search .hp-field:nth-child(2) { display: flex; flex-direction: column; justify-content: center; }
  .hp-hero .hp-field:last-child,
  .bjc-search .hp-field:last-child { border-radius: 0 0 14px 0; }
  .hp-hero .hp-field__label,
  .bjc-search .hp-field__label { font-size: 10px !important; line-height: 1.3; margin-bottom: 1px; }
  .hp-hero .hp-field__value,
  .bjc-search .hp-field__value { font-size: 14px !important; line-height: 1.25; }
  .hp-hero .hp-field__sub,
  .bjc-search .hp-field__sub { font-size: 10px !important; line-height: 1.3; }
  #hpDateSub:not(.hp-field__sub--err) { display: none; }
  .hp-hero .hp-field:last-child .hp-drop,
  .bjc-search .hp-field:last-child .hp-drop { left: auto; right: 0; width: 280px; max-width: calc(100vw - 32px); }
  .hp-hero .hp-search-btn,
  .bjc-search .hp-search-btn { margin-top: 8px; padding: 6px 24px !important; font-size: 12px !important; }
}