/* =====================================================================
   Beyond Journey - enquiry modal (Request Callback / Customise My Trip)
   ---------------------------------------------------------------------
   One dialog, two modes. "Callback" is the short ask - name, number,
   when; "Customise" is the long one - party, duration, budget, style.
   Both end the same honest way: the site has no enquiry backend, so
   Submit composes the enquiry and hands it to WhatsApp/phone, and the
   success panel says exactly that instead of pretending a server got it.

   Tokens fall back to brand values so the modal works on any page.
   Everything here is prefixed .bje.
   ===================================================================== */

.bje {
  --bje-navy: var(--bjl-navy, #17233e);
  --bje-orange: var(--bjl-orange, #f5761a);
  --bje-orange-600: var(--bjl-orange-600, #d9600d);
  /* was missing, so every rule using it fell back to transparent - the
     trust-strip icon circles rendered as bare glyphs */
  --bje-orange-50: var(--bjl-orange-50, #fdf4ec);
  --bje-ink: var(--bjl-ink, #17233e);
  --bje-muted: var(--bjl-muted, #5a6377);
  --bje-faint: var(--bjl-faint, #8b93a5);
  --bje-line: var(--bjl-line, #e6e3dc);
  --bje-line-soft: var(--bjl-line-soft, #f1efe9);
  --bje-paper: var(--bjl-paper, #faf8f5);
  --bje-ok: var(--bjl-ok, #1a7f4b);
  --bje-ease: cubic-bezier(.4, 0, .2, 1);

  position: fixed; inset: 0; z-index: 1400;
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
  font-family: var(--bjl-ui, 'Poppins', 'Segoe UI', system-ui, sans-serif);
}
.bje.is-open { display: flex; }
.bje__scrim {
  position: absolute; inset: 0;
  background: rgba(11, 17, 32, .58);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}

/* while any modal is open the page behind must hold still */
body.bje-lock { overflow: hidden; }

.bje__card {
  position: relative; z-index: 2;
  width: 520px; max-width: 100%;
  max-height: min(86vh, 720px);
  display: flex; flex-direction: column;
  background: #fff; border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 60px -18px rgba(11, 17, 32, .55);
  animation: bje-in .24s var(--bje-ease) both;
}
@keyframes bje-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.bje__head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 17px 18px 14px;
  background: var(--bje-navy); color: #fff;
}
.bje__head .lead, .bje__head i.lead {
  width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .12); color: var(--bje-orange); font-size: 15px;
}
.bje__head h2 {
  margin: 0; font-size: 16.5px; font-weight: 700; line-height: 1.3;
  color: #fff; text-transform: none; letter-spacing: -.01em;
  font-family: var(--bjl-display, inherit);
}
.bje__head p { margin: 2px 0 0; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .68); }
.bje__x {
  margin-left: auto; flex: 0 0 auto;
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff;
  font-size: 12px; cursor: pointer; transition: background .18s var(--bje-ease);
}
.bje__x:hover { background: rgba(255, 255, 255, .26); }

.bje__body { padding: 16px 18px 18px; overflow-y: auto; }

/* the package the visitor came from, restated so they know the context
   travelled with them */
.bje__ctx {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 13px; padding: 9px 12px;
  background: var(--bje-paper); border: 1px solid var(--bje-line-soft); border-radius: 9px;
  font-size: 12.5px; color: var(--bje-muted);
}
.bje__ctx i { color: var(--bje-orange-600); font-size: 12px; }
.bje__ctx b { color: var(--bje-ink); }

.bje__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 12px; }

/* Both forms use the wide card: at 520px and two columns the customise
   form ran to six rows and scrolled inside the card, and the callback
   form to four. Three columns show either whole on a laptop. */
.bje__card--form { width: min(900px, calc(100vw - 40px)); max-height: min(96vh, 900px); }
.bje__card--form .bje__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.bje__card--form .bje__body { padding: 18px 24px 22px; }

/* the submit sits centred under the form at its own width, not as a
   bar across the whole card */
.bje__card--form .bje__go {
  display: inline-flex; width: auto; min-width: 240px;
  margin-left: auto; margin-right: auto; padding: 12px 30px;
}
.bje__card--form form { display: flex; flex-direction: column; }
@media (max-width: 575px) {
  .bje__card--form .bje__go { width: 100%; min-width: 0; }
}

/* The customise form must fit one laptop screen with no scrolling inside
   the card: four columns put its eleven fields in three rows, and every
   vertical gap is a step tighter than the callback form's. */
.bje__card--customise .bje__head { padding: 13px 18px 11px; }
.bje__card--customise .bje__body { padding: 12px 22px 14px; }
.bje__card--customise .bje__ctx { margin-bottom: 10px; padding: 7px 12px; }
.bje__card--customise .bje__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px 14px; }
.bje__card--customise .bje-f label { margin-bottom: 3px; }
.bje__card--customise .bje-f :where(input, select, textarea) { padding: 8px 10px; }
.bje__card--customise .bje-f textarea { min-height: 50px; }
.bje__card--customise .bje__go { margin-top: 11px; padding: 11px 16px; }
.bje__card--customise .bje__foot { margin-top: 10px; padding: 8px 12px; font-size: 12px; }
@media (max-width: 1199px) {
  .bje__card--customise .bje__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .bje__card--form .bje__grid, .bje__card--customise .bje__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bje-f { min-width: 0; }
.bje-f--wide { grid-column: 1 / -1; }
.bje-f label {
  display: block; margin: 0 0 4px;
  font-size: 11.5px; font-weight: 700; color: var(--bje-ink);
}
.bje-f label .req { color: #d23f31; }

/* style.css forces select { height:50px; width:100% } and its own input
   chrome - restated here so the two columns line up */
.bje-f :where(input, select, textarea) {
  width: 100%; height: auto; margin: 0;
  padding: 9px 11px;
  border: 1px solid var(--bje-line); border-radius: 8px;
  background: #fff; color: var(--bje-ink);
  font-family: inherit; font-size: 13px; line-height: 1.45;
  box-shadow: none;
}
.bje-f select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238b93a5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 9px;
  cursor: pointer;
}
.bje-f textarea { resize: vertical; min-height: 64px; }

/* The fixed +91 and the number read as one control, so the seam between
   them is a divider rather than two separate boxes. */
.bje-tel {
  display: grid; grid-template-columns: 54px minmax(0, 1fr);
  border: 1px solid var(--bje-line); border-radius: 8px; background: #fff;
  overflow: hidden;
}
.bje-tel:focus-within { border-color: var(--bje-orange); box-shadow: 0 0 0 3px rgba(245, 118, 26, .14); }
.bje-tel__cc {
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--bje-line); background: #faf9f7;
  font-size: 13px; font-weight: 700; color: var(--bje-ink);
}
.bje-f .bje-tel input { border: 0; border-radius: 0; box-shadow: none; }
.bje-f .bje-tel input:focus { box-shadow: none; }
.bje-tel[data-invalid] { border-color: #b3261e; }

/* The travel-date box opens a calendar (flatpickr, fetched on demand by
   js/bj-enquiry.js), so it reads as a picker, not a place to type. */
.bje-f input.bje-date {
  cursor: pointer; padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='1.5' y='2.5' width='13' height='12' rx='2' fill='none' stroke='%23f5761a' stroke-width='1.4'/%3E%3Cpath d='M1.5 6.5h13M5 1v3M11 1v3' stroke='%23f5761a' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 15px;
}

/* the calendar itself, in the brand's colours; flatpickr's own z-index
   (99999) already clears the dialog */
.flatpickr-calendar.bje-cal {
  border-radius: 14px; border: 1px solid var(--bje-line);
  box-shadow: 0 18px 46px -14px rgba(11, 17, 32, .45);
  font-family: inherit;
}
.bje-cal .flatpickr-day { border-radius: 8px; }
.bje-cal .flatpickr-day:hover, .bje-cal .flatpickr-day:focus { background: #fdf1e6; border-color: #fdf1e6; }
.bje-cal .flatpickr-day.today { border-color: var(--bje-orange); color: var(--bje-orange); font-weight: 700; }
.bje-cal .flatpickr-day.today:hover { background: #fdf1e6; }
.bje-cal .flatpickr-day.selected, .bje-cal .flatpickr-day.selected:hover, .bje-cal .flatpickr-day.selected:focus {
  background: var(--bje-orange); border-color: var(--bje-orange); color: #fff;
}
.bje-cal .flatpickr-current-month, .bje-cal .flatpickr-current-month input.cur-year { color: var(--bje-ink); font-weight: 700; }
.bje-cal .flatpickr-weekday { color: var(--bje-faint); font-weight: 700; }
.bje-cal .flatpickr-months .flatpickr-prev-month:hover svg,
.bje-cal .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--bje-orange); }
.bje-f :where(input, select, textarea):focus {
  outline: none; border-color: var(--bje-orange);
  box-shadow: 0 0 0 3px rgba(245, 118, 26, .14);
}
.bje-f [aria-invalid="true"] { border-color: #b3261e; }
.bje-f .err {
  display: block; margin: 4px 0 0;
  font-size: 11px; color: #8a2019;
}

.bje__go {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 14px; padding: 12px 16px;
  border: 0; border-radius: 9px;
  background: var(--bje-orange); color: #fff;
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background .2s var(--bje-ease);
}
.bje__go:hover { background: var(--bje-orange-600); }

.bje__foot {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 12px 0 0; padding: 9px 11px;
  border: 1px solid var(--bje-line); border-radius: 8px; background: #faf9f7;
  font-size: 11.5px; line-height: 1.55; color: var(--bje-muted, #5a6076);
  text-align: left;
}
.bje__foot i, .bje__foot svg { flex: 0 0 auto; margin-top: 2px; color: #1a7f4b; font-size: 12px; }

/* ---- success panel ---- */
.bje__done { text-align: center; padding: 8px 4px 4px; }
.bje__done .tick {
  width: 52px; height: 52px; margin: 0 auto 12px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(26, 127, 75, .12); color: var(--bje-ok); font-size: 22px;
}
.bje__done h3 {
  margin: 0 0 6px; font-size: 17px; font-weight: 700;
  color: var(--bje-ink); text-transform: none;
  font-family: var(--bjl-display, inherit);
}
.bje__done p { margin: 0 auto 14px; max-width: 380px; font-size: 13px; line-height: 1.65; color: var(--bje-muted); }
.bje__done p a { color: var(--bje-orange-600); font-weight: 700; }
.bje__done .bje__go { width: auto; padding: 11px 26px; margin: 0 auto; display: inline-flex; }

@media (max-width: 575px) {
  .bje { padding: 0; align-items: flex-end; }
  .bje__card {
    width: 100%; max-height: 92vh;
    border-radius: 16px 16px 0 0;
    animation-name: bje-up;
  }
  @keyframes bje-up {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: none; }
  }
  .bje__grid, .bje__card--form .bje__grid { grid-template-columns: 1fr; gap: 10px; }
  .bje__body { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .bje__card { animation: none; }
}


/* =====================================================================
   Flagship dialog - the Door-to-Door Care programme
   ---------------------------------------------------------------------
   The first version was five icon tiles in a row, which read as a spec
   sheet. This one leads with a photograph of the people the programme is
   for, gives every service its own picture, and closes on a gold band -
   the same gold as the "For Seniors" tile it opens from.
   ===================================================================== */
/* Five cards across needs the width; `height: auto` with a max keeps it a
   dialog rather than a page. The old 900px box held a 188px hero, five cards
   in two rows of bullet lists, a trust row and a closing band - about
   1,150px of content in a 92vh window, so it could only scroll. */
.bje__card--wide { width: min(1120px, calc(100vw - 40px)); max-height: min(94vh, 760px); }

/* ---- photographic hero ---- */
.bjfl-hero { position: relative; height: 132px; overflow: hidden; flex: 0 0 auto; }
.bjfl-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bjfl-hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(15,22,42,.94) 0%, rgba(15,22,42,.82) 46%, rgba(15,22,42,.34) 100%),
    linear-gradient(0deg, rgba(15,22,42,.7) 0%, transparent 55%);
}
/* the gold hairline that ties the dialog to the tile it opened from */
.bjfl-hero::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 3px;
  background: linear-gradient(90deg, #b8860b, #f1cf62 45%, #d4af37 100%);
}
.bjfl-hero__x { position: absolute; top: 14px; right: 14px; z-index: 4; margin: 0; }
.bjfl-hero__txt { position: absolute; left: 26px; right: 26px; bottom: 14px; z-index: 2; }
.bjfl-badge {
  display: inline-flex; align-items: center; gap: 7px;
  margin: 0 0 6px; padding: 4px 11px; border-radius: 999px;
  background: linear-gradient(90deg, #b8860b, #f1cf62);
  color: #2a1f05;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.bjfl-badge svg, .bjfl-badge i { width: 11px; height: 11px; }
.bjfl-hero__txt h2 {
  margin: 0 0 6px;
  font-family: var(--bjl-display, inherit);
  font-size: 24px; font-weight: 700; letter-spacing: -.028em; line-height: 1.1;
  color: #fff; text-transform: none;
}
.bjfl-hero__txt p { margin: 0; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .8); }
.bjfl-hero__txt p b { color: #fff; }

/* ---- the line that names who it is for ---- */
.bjfl-note {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 13px; padding: 9px 13px;
  border-radius: 10px; border: 1px solid #f0e2bd;
  background: linear-gradient(180deg, #fffaf0, #fdf6e6);
  font-size: 12.5px; line-height: 1.5; color: var(--bje-ink);
}
.bjfl-note > i, .bjfl-note > svg { flex: 0 0 auto; margin-top: 2px; width: 13px; height: 13px; color: #b8860b; }
.bjfl-note b { font-weight: 700; }

/* ---- illustrated service cards ---- */
/* Five across, one row. Three columns meant two rows and a scrollbar. */
.bjfl-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.bjfl-item {
  display: flex; flex-direction: column;
  border: 1px solid var(--bje-line); border-radius: 13px;
  background: #fff; overflow: hidden;
  transition: transform .22s var(--bje-ease), box-shadow .22s var(--bje-ease);
}
.bjfl-item:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -18px rgba(11, 17, 32, .4); }
.bjfl-item__media { position: relative; height: 78px; background: var(--bje-line-soft); }
.bjfl-item__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bjfl-item__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,17,32,.22), rgba(11,17,32,0) 55%);
}
/* the medallion straddles the foot of the picture */
.bjfl-item__ico {
  position: absolute; left: 11px; bottom: -15px; z-index: 2;
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: #fff; color: var(--bje-orange-600); font-size: 14px;
  border: 1px solid var(--bje-line-soft);
  box-shadow: 0 5px 14px -5px rgba(11, 17, 32, .42);
}
.bjfl-item__ico svg, .bjfl-item__ico i { width: 14px; height: 14px; }
.bjfl-item__body { padding: 22px 12px 13px; flex: 1 1 auto; }
.bjfl-item__body strong {
  display: block; margin: 0 0 5px;
  font-size: 12.5px; font-weight: 700; color: var(--bje-navy); line-height: 1.25;
}
.bjfl-item__body p { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--bje-muted); }
.bjfl-item__body ul { list-style: none; margin: 0; padding: 0; }
.bjfl-item__body li {
  position: relative; display: block; padding: 0 0 5px 14px;
  font-size: 12.5px; line-height: 1.55; color: var(--bje-muted);
}
.bjfl-item__body li:last-child { padding-bottom: 0; }
.bjfl-item__body li::before {
  content: ""; position: absolute; left: 2px; top: 7px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--bje-orange); opacity: .85;
}

/* ---- closing band ---- */
.bjfl-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin: 14px 0 0; padding: 13px 16px;
  border-radius: 12px;
  background:
    radial-gradient(620px 190px at 8% 0%, rgba(212, 175, 55, .2), transparent 62%),
    var(--bje-navy);
}
.bjfl-foot__ico {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(212, 175, 55, .16); border: 1px solid rgba(212, 175, 55, .45);
  color: #f1cf62; font-size: 17px;
}
.bjfl-foot__ico svg, .bjfl-foot__ico i { width: 17px; height: 17px; }
.bjfl-foot__txt { flex: 1 1 220px; min-width: 0; }
.bjfl-foot__txt strong { display: block; font-size: 14px; font-weight: 700; color: #fff; }
.bjfl-foot__txt span { display: block; margin-top: 2px; font-size: 12.5px; color: rgba(255, 255, 255, .74); }

.bjfl-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, #f1cf62 0%, #d4af37 55%, #b8860b 100%);
  color: #17233e; font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; box-shadow: 0 8px 20px -8px rgba(212, 175, 55, .85);
  transition: transform .2s var(--bje-ease), box-shadow .2s var(--bje-ease);
}
.bjfl-cta:hover { color: #17233e; transform: translateY(-2px); box-shadow: 0 14px 30px -10px rgba(212,175,55,.95); }
.bjfl-cta svg, .bjfl-cta i { width: 11px; height: 11px; }
.bjfl-cta--quiet {
  background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, .34); box-shadow: none;
}
.bjfl-cta--quiet:hover { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: none; transform: none; }

@media (max-width: 1199px) and (min-width: 992px) {
  /* five columns want about 1,100px; below that they get cramped long
     before the 2-up breakpoint arrives */
  .bjfl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
  .bje__card--wide { width: 100%; }
  .bjfl-hero { height: 156px; }
  .bjfl-hero__txt h2 { font-size: 24px; }
  .bjfl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
  .bjfl-grid { grid-template-columns: minmax(0, 1fr); }
  .bjfl-hero { height: 140px; }
  .bjfl-hero__txt { left: 18px; right: 18px; bottom: 15px; }
  .bjfl-hero__txt h2 { font-size: 21px; }
  .bjfl-cta { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .bjfl-item, .bjfl-cta { transition: none; }
  .bjfl-item:hover, .bjfl-cta:hover { transform: none; }
}

/* =====================================================================
   A note on the class prefix
   ---------------------------------------------------------------------
   The flagship panel's classes were .bjf-* until flights.html and
   hotels.html started loading this stylesheet. Those two pages already
   own the .bjf- prefix for their own layout - .bjf-hero is the flights
   page banner - and this file's `.bjf-hero { height: 188px; overflow:
   hidden }` silently collapsed it to 198px, clipping the subtitle.

   It is .bjfl-* (flagship) now. Nothing else on the site uses that.
   ===================================================================== */