/* ============================================================================================
   Mobile price-summary sheet + bottom bar for the .hp2 journey pages (Summary.cshtml,
   CarHireSummary.cshtml, TransferSearchResults.cshtml, CarHireSearchResults.cshtml) - the same
   pattern AccommodationItem/ProductPage/BasketPage already use: below the page's own mobile
   breakpoint the price sidebar is hidden and only opens from the fixed bottom bar's
   "View details" (journeySummarySheet.js moves the sidebar into the sheet while it's open).

   Markup hooks:
     [data-mobile-summary="980"|"860"]  the page's sidebar - hidden at/below that width
     .journey-dock[data-breakpoint="980"|"860"]  new bottom bar - shown at/below that width
     .journey-dock__details  "View details" link-button, also usable inside the existing
                              .hire-dock/.xfer-dock bars
   ============================================================================================ */

.journey-dock {
  display: none;
}

/* "View details" under the price, in any bottom bar. */
.journey-dock__details {
  appearance: none;
  display: block;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  color: var(--home-primary-dark, #218887);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.journey-dock__quote {
  appearance: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.journey-dock__quote strong {
  display: block;
  font-family: var(--home-font-display, "Montserrat", "Lato", sans-serif);
  font-size: 22px;
  font-weight: 800;
  color: var(--home-text, #3c4e5a);
  line-height: 1.1;
}

.journey-dock__quote strong small {
  font-size: 13px;
  font-weight: 700;
  color: var(--home-text-muted, #707070);
}

.journey-dock .btn {
  flex-shrink: 0;
  min-height: 48px;
}

/* ---- The bottom sheet (a native <dialog>, created by journeySummarySheet.js) - same as every
   other journey page's price sheet (JourneyPages.css .journey-drawer-modal, BasketPage-v2.css
   .bp-modal-summary): rises from the bottom edge where the bottom bar's "View details" sits,
   full width, 80% of the screen tall, rounded top corners, drag handle, round grey close button
   top-right, content scrolls inside. ---- */

.journey-sheet {
  position: fixed;
  inset: auto 0 0 0;
  width: 100vw;
  max-width: 100vw;
  height: 80dvh;
  max-height: 80dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 18px 18px 0 0;
  background: #fff;
  box-shadow: 0 -12px 40px rgba(16, 68, 67, 0.2);
  overflow: hidden;
  display: none;
  flex-direction: column;
}

.journey-sheet[open] {
  display: flex;
  animation: journey-drawer-in 0.3s ease;
}

.journey-sheet.is-closing {
  animation: journey-drawer-out 0.3s ease forwards;
}

@keyframes journey-drawer-in {
  from { transform: translateY(100%); }
  to { transform: none; }
}

@keyframes journey-drawer-out {
  from { transform: none; }
  to { transform: translateY(100%); }
}

.journey-sheet::backdrop {
  background: rgba(16, 68, 67, 0.45);
}

.journey-sheet__head {
  position: relative;
  flex-shrink: 0;
  min-height: 56px;
  padding: 22px 58px 10px 16px;
  border-bottom: 1px solid var(--home-border, #d8e0e0);
}

/* Drag handle - a visual cue that this is a sheet. */
.journey-sheet__head::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 36px;
  height: 4px;
  margin-left: -18px;
  border-radius: 999px;
  background: #d0d8d8;
}

.journey-sheet__title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #141515;
}

.journey-sheet__close {
  position: absolute;
  top: 16px;
  right: 10px;
  z-index: 1;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #eef1f1;
  color: #3c4e5a;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.journey-sheet__close:hover {
  background: #e4e8e8;
}

.journey-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 14px 12px calc(18px + env(safe-area-inset-bottom)) 16px;
  /* Thin, light scrollbar in its own reserved gutter (never over the content). */
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #c9d6d6 transparent;
}

.journey-sheet__body::-webkit-scrollbar {
  width: 4px;
}

.journey-sheet__body::-webkit-scrollbar-track {
  background: transparent;
}

.journey-sheet__body::-webkit-scrollbar-thumb {
  background: #c9d6d6;
  border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .journey-sheet[open],
  .journey-sheet.is-closing {
    animation: none;
  }
}
/* The moved sidebar: shown (overrides each page's own mobile hide), no card chrome - the sheet is
   the card now. */
.journey-sheet .summary,
.journey-sheet [data-mobile-summary],
.journey-sheet .desktop-summary {
  display: block !important;
  position: static !important;
  margin: 0;
  border: 0;
  box-shadow: none;
  padding: 0;
}

html.journey-sheet-open {
  overflow: hidden;
}

/* ---- Desktop sticky sidebars - same fix as AccommodationItem/ProductPage/BasketPage: a
   sticky sidebar taller than the viewport could never have its bottom (Continue button,
   included list...) scrolled into view. Capped to the visible space below the sticky offset
   (top: 16px on all of these) and scrolls on its own. ---- */

/* Flight-only summary (Summary.cshtml): a single white card - hidden scrollbar + white bottom
   fade, exactly like the other pages' cards. Its mobile sheet takes over below 861px. */
@media (min-width: 861px) {
  .hp2 aside.summary {
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .hp2 aside.summary::-webkit-scrollbar {
    display: none;
  }

  .hp2 aside.summary::after {
    content: "";
    position: sticky;
    bottom: -16px;
    display: block;
    height: 24px;
    margin: 0 -16px -16px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 85%);
    pointer-events: none;
  }

  .journey-sheet aside.summary::after {
    display: none;
  }
}

/* Car hire (.hire-aside) and transfer (.xfer-aside) sidebars: wrappers around several separate
   cards with the grey page showing between them, so a white fade would read as a smear - these
   get the thin light scrollbar instead, in its own gutter so it never sits over a card. */
@media (min-width: 981px) {
  .hp2 .hire-aside,
  .hp2 .xfer-aside {
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #c9d6d6 transparent;
  }

  .hp2 .hire-aside::-webkit-scrollbar,
  .hp2 .xfer-aside::-webkit-scrollbar {
    width: 4px;
  }

  .hp2 .hire-aside::-webkit-scrollbar-track,
  .hp2 .xfer-aside::-webkit-scrollbar-track {
    background: transparent;
  }

  .hp2 .hire-aside::-webkit-scrollbar-thumb,
  .hp2 .xfer-aside::-webkit-scrollbar-thumb {
    background: #c9d6d6;
    border-radius: 999px;
  }
}

/* ---- Breakpoints: hide the page's sidebar, show the bottom bar ---- */

@media (max-width: 980px) {
  .hp2 [data-mobile-summary="980"] {
    display: none;
  }

  .journey-dock[data-breakpoint="980"] {
    display: flex;
  }

  body:has(.journey-dock[data-breakpoint="980"]) {
    padding-bottom: 84px;
  }
}

@media (max-width: 860px) {
  .hp2 [data-mobile-summary="860"] {
    display: none;
  }

  .journey-dock[data-breakpoint="860"] {
    display: flex;
  }

  body:has(.journey-dock[data-breakpoint="860"]) {
    padding-bottom: 84px;
  }
}

.journey-dock[data-breakpoint] {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid var(--home-border, #d8e0e0);
  box-shadow: 0 -8px 24px rgba(16, 68, 67, 0.12);
}

/* Must come after the rule above so the base "hidden unless in breakpoint" still wins on desktop. */
@media (min-width: 981px) {
  .journey-dock[data-breakpoint="980"] {
    display: none;
  }
}

@media (min-width: 861px) {
  .journey-dock[data-breakpoint="860"] {
    display: none;
  }
}