/* Home hero date picker (daterangepicker, single date). Rounded panel to match the pill inputs,
   Cabin/Bubblegum type and the brand palette. Scoped to the home: the booking pages keep theirs. */
body.homepage .daterangepicker.single {
  margin-top: 10px;
  padding: 14px 14px 12px;
  border: 0;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(20, 39, 44, 0.22), 0 2px 6px rgba(20, 39, 44, 0.08);
  font-family: "Cabin", sans-serif;
  color: #14272c;
}
body.homepage .daterangepicker.single::before,
body.homepage .daterangepicker.single::after { display: none; }
body.homepage .daterangepicker.single .drp-calendar { padding: 0; max-width: none; }
body.homepage .daterangepicker.single .calendar-table { padding: 0; border: 0; border-radius: 0; background: transparent; }
body.homepage .daterangepicker.single .calendar-table table { border-collapse: separate; border-spacing: 2px; }

body.homepage .daterangepicker.single .calendar-table th,
body.homepage .daterangepicker.single .calendar-table td {
  width: 42px; min-width: 42px; height: 42px;
  border: 0; border-radius: 12px;
  font-size: 15px; line-height: 42px; font-weight: 600;
}
/* month title and arrows */
body.homepage .daterangepicker.single .calendar-table th.month {
  height: 40px; line-height: 40px;
  font-family: "Bubblegum Sans", cursive; font-size: 22px; font-weight: 400; color: #14272c;
}
body.homepage .daterangepicker.single .calendar-table th.prev,
body.homepage .daterangepicker.single .calendar-table th.next { height: 40px; border-radius: 50%; }
body.homepage .daterangepicker.single .calendar-table th.prev span,
body.homepage .daterangepicker.single .calendar-table th.next span { border-color: #14272c; border-width: 0 2px 2px 0; padding: 4px; }
body.homepage .daterangepicker.single .calendar-table th.prev.available:hover,
body.homepage .daterangepicker.single .calendar-table th.next.available:hover { background: #f4f1ea; }
/* weekday row */
body.homepage .daterangepicker.single .calendar-table thead tr:last-child th {
  height: 30px; line-height: 30px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #5f6e6f;
}
/* days */
body.homepage .daterangepicker.single .calendar-table td.available:hover { background: #fff6ee; color: #14272c; }
body.homepage .daterangepicker.single .calendar-table td.off,
body.homepage .daterangepicker.single .calendar-table td.off:not(.disabled) { opacity: 1; color: #c3cacd; font-weight: 400; }
body.homepage .daterangepicker.single .calendar-table td.disabled,
body.homepage .daterangepicker.single .calendar-table td.off.disabled {
  opacity: 1; color: #c3cacd; font-weight: 400; text-decoration: none; background: transparent; cursor: default;
}
body.homepage .daterangepicker.single .calendar-table td.today:not(.active) { box-shadow: inset 0 0 0 2px #e3eaec; }
body.homepage .daterangepicker.single .calendar-table td.active,
body.homepage .daterangepicker.single .calendar-table td.active:hover {
  background: #f37720; color: #fff; font-weight: 700;
  box-shadow: 0 6px 14px rgba(243, 119, 32, 0.35);
}

@media only screen and (max-width: 480px) {
  body.homepage .daterangepicker.single { width: auto; max-width: calc(100vw - 20px); padding: 10px; }
  body.homepage .daterangepicker.single .calendar-table th,
  body.homepage .daterangepicker.single .calendar-table td { width: 38px; min-width: 38px; height: 38px; line-height: 38px; font-size: 14px; }
}

/* Phones and small tablets: the hero inputs are hidden so the plugin cannot anchor the panel;
   show it centred on screen instead of stuck to the top of the page. */
@media only screen and (max-width: 767px) {
  body.homepage .daterangepicker.single.show-calendar {
    position: fixed !important;
    top: 50% !important; left: 50% !important; right: auto !important;
    transform: translate(-50%, -50%);
    margin: 0;
    box-shadow: 0 24px 70px rgba(20, 39, 44, 0.45), 0 2px 6px rgba(20, 39, 44, 0.1);
  }
}

/* ---------- Booking bar (desktop ≥992px) ----------
   The pill from step 1 of the booking (style.css ".section-calendar .calendar") drawn over the
   illustration; inc/hero_booking_bar.php writes it, assets/js/hero-booking.js runs it. */
@media only screen and (min-width: 992px) {
  /* H1, reviews and the bar as one tight group, centred in the hero: style.css spreads them apart with
     auto margins (the old box was taller and ate that space) */
  /* The block hangs from the top of the hero (style.css centres it with translateY(-50%), which pushed the
     H1 up or down with the height of the selector: B's card is taller than A's pill). Same H1 position in
     both; 130px higher than on 10-14 (80 + 50) from 1000px tall; the -29px floor keeps the H1 ~26px under the logo on shorter screens; taller screens add 50vh. */
  body.homepage #section-1.hero.hero-home .hero-content { top: max(51px, calc(min(50vh, 540px) - 449px)); transform: none; translate: none; }
  body.homepage #section-1.hero .hero-content .hero-text { margin: 0 auto; }
  body.homepage #section-1.hero .hero-content .hero-trustpilot.hero-trustpilot--inline { margin-top: 14px; margin-bottom: 32px; }
  body.homepage #section-1.hero .hero-content :is(.hero-text, .hero-trustpilot) { translate: none; }
  body.homepage #section-1.hero .hero-booking { width: 100%; margin-bottom: auto; }
  body.homepage #section-1.hero .hero-booking .section-calendar .container { max-width: none; padding: 0; }
  body.homepage #section-1.hero .hero-booking .calendar {
    border-color: #fff;
    /* first shadow: a 3px blue lip along the whole bottom edge, the same blue as the tab below */
    box-shadow: 0 3px 0 #206c83, 0 18px 50px rgba(20, 39, 44, 0.2), 0 2px 6px rgba(20, 39, 44, 0.08);
  }
  body.homepage #section-1.hero .hero-booking .calendar .calendar-item { padding-top: 8px; padding-bottom: 8px; } /* 6px taller than step 1 */
  /* trial: no "Dates" / "Locations" headings; a divider between the two groups and room for the pill's curve */
  body.homepage #section-1.hero .hero-booking .calendar .calendar-item.label-column { display: none; }
  body.homepage #section-1.hero .hero-booking .calendar .calendar-item.calendar-pickup { margin-left: 18px; }
  body.homepage #section-1.hero .hero-booking .calendar .calendar-item.location-pickup { border-left: 2px solid #C7D3D8; margin-left: 2px; }
  /* wider location cells: room between "Int. Airport" and the caret (step 1 has them at 160px) */
  body.homepage #section-1.hero .hero-booking .calendar .calendar-item.location-pickup,
  body.homepage #section-1.hero .hero-booking .calendar .calendar-item.location-dropoff { width: 186px; }
  body.homepage #section-1.hero .hero-booking .calendar .calendar-item.location-pickup .value .date,
  body.homepage #section-1.hero .hero-booking .calendar .calendar-item.location-dropoff .value .date { max-width: 170px; }
  /* a returning visitor: the dates of their last search (assets/js/interest.js) in orange until they pick others */
  body.homepage #section-1.hero .hero-booking[data-returning] .calendar .calendar-item.calendar-pickup .value .date,
  body.homepage #section-1.hero .hero-booking[data-returning] .calendar .calendar-item.calendar-dropoff .value .date { color: #d9650f; }
  body.homepage #section-1.hero .hero-booking .calendar .calendar-item .value { cursor: pointer; }
  body.homepage #section-1.hero .hero-booking .calendar .calendar-item input,
  body.homepage #section-1.hero .hero-booking .calendar .calendar-item .select2-container { cursor: pointer; }
  body.homepage #section-1.hero .hero-booking .calendar .calendar-item.modify .btn { white-space: nowrap; }
  body.homepage #section-1.hero .hero-booking .calendar .calendar-item.modify .btn svg { vertical-align: -4px; }

  /* the six reasons, one at a time: an orange tab growing out of the bottom of the bar (the bar sits
     above it, so the tab's top edge is hidden behind the pill) */
  body.homepage #section-1.hero .hero-booking .calendar { position: relative; z-index: 1; }
  body.homepage #section-1.hero .hero-booking-usp { display: flex; justify-content: center; margin-top: -8px; }
  body.homepage #section-1.hero .hero-booking-usp-tab {
    display: grid;
    padding: 18px 26px 11px; border-radius: 0 0 18px 18px;
    background: #206c83; color: #fff; /* the site's dark blue (the hover of #4E9DB5), not the ink */
    font-family: "Cabin", sans-serif; font-size: 15px; line-height: 1.2; font-weight: 600;
    letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
    box-shadow: 0 10px 24px rgba(32, 108, 131, 0.32), 0 2px 6px rgba(20, 39, 44, 0.1);
  }
  /* concave corners where the tab grows out of the 3px lip: a square either side, blue outside a quarter
     circle. The tab starts 8px up behind the pill, so the lip's bottom edge is at 11px from the tab top. */
  body.homepage #section-1.hero .hero-booking-usp-tab { position: relative; }
  body.homepage #section-1.hero .hero-booking-usp-tab::before,
  body.homepage #section-1.hero .hero-booking-usp-tab::after {
    content: ""; position: absolute; top: 10px; width: 14px; height: 14px;
  }
  body.homepage #section-1.hero .hero-booking-usp-tab::before {
    right: 100%;
    background: radial-gradient(circle 14px at 0 100%, transparent calc(100% - 1px), #206c83 100%);
  }
  body.homepage #section-1.hero .hero-booking-usp-tab::after {
    left: 100%;
    background: radial-gradient(circle 14px at 100% 100%, transparent calc(100% - 1px), #206c83 100%);
  }
  body.homepage #section-1.hero .hero-booking-usp-item {
    grid-area: 1 / 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    opacity: 0; transform: translateY(14px);
    transition: opacity 0.35s ease, transform 0.35s ease;
  }
  body.homepage #section-1.hero .hero-booking-usp-item.is-active { opacity: 1; transform: none; }
  body.homepage #section-1.hero .hero-booking-usp-item.is-leaving { opacity: 0; transform: translateY(-14px); }
  body.homepage #section-1.hero .hero-booking-usp-item svg { flex: none; color: #f37720; }
  @media (prefers-reduced-motion: reduce) {
    body.homepage #section-1.hero .hero-booking-usp-item { transition: none; transform: none; }
  }
}

/* ---------- Location dropdown (select2) on the home ----------
   style.css styles it only under .book-template (the booking pages); same look here. */
body.homepage .select2-dropdown.select2-calendar-dropdown {
  background: #fff;
  border: 3px solid #4E9DB5;
  border-radius: 9px;
  box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.16);
  margin-top: 23px;
  padding: 16px;
  box-sizing: border-box;
  overflow: visible;
}
body.homepage .select2-dropdown.select2-calendar-dropdown .select2-results__options { max-height: 320px; overflow-y: auto; }
body.homepage .select2-dropdown.select2-calendar-dropdown .select2-results__option {
  padding: 13px 18px;
  border-radius: 50px;
  border: 1px solid #C7D3D8;
  color: #14272C;
  font-family: Cabin, sans-serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  transition: all .3s ease;
}
body.homepage .select2-dropdown.select2-calendar-dropdown .select2-results__option:not(:last-child) { margin-bottom: 10px; }
body.homepage .select2-dropdown.select2-calendar-dropdown .select2-results__option--highlighted.select2-results__option--selectable,
body.homepage .select2-dropdown.select2-calendar-dropdown .select2-results__option--selected {
  background-color: transparent !important;
  border-color: #F37720 !important;
  color: #F37720 !important;
}
body.homepage .select2-blue-border .select2-dropdown-arrow:before { border-color: transparent transparent #4E9DB5 transparent; }
body.homepage .select2-dropdown.select2-dropdown--above.select2-blue-border .select2-dropdown-arrow:before { border-color: #4E9DB5 transparent transparent transparent; }

/* ─── Home hero (canvas version): a daytime sky ─── */
body.homepage .hero.hero-home { background: #c2e7f7; }
/* the illustration sits lower so there is more sky: the hills slide under the offer band */
@media only screen and (min-width: 992px) { body.homepage #section-1.hero .hero-canvas { transform: translateY(80px); } }

/* phone form of the hero: a returning visitor's dates (assets/js/interest.js) in orange until they pick others,
   like the desktop bar; text-fill too, the read-only inputs are drawn with it */
body.homepage #calendar form[data-returning] #t-start,
body.homepage #calendar form[data-returning] #t-end { color: #d9650f; -webkit-text-fill-color: #d9650f; }