/* Flights, stays hub, car hire — swipe carousel chrome (matches homepage) */

body.sst-page-flights,
body.sst-page-sky22,
body.sst-page-car-rental {
  --sst-swipe-carousel-gap: 14px;
}

body.sst-page-flights .sst-commercial-routes,
body.sst-page-flights .sst-fl-region-sec,
body.sst-page-sky22 #featured-destinations,
body.sst-page-car-rental #car-destinations,
body.sst-page-car-rental .sst-car-dest-sec {
  overflow: visible;
}

body.sst-page-flights .sst-fl-routes-carousel,
body.sst-page-flights .sst-fl-regions-carousel,
body.sst-page-sky22 .sst-stays-dest-carousel,
body.sst-page-car-rental .sst-car-dest-carousel {
  position: relative;
  margin-top: 4px;
}

body.sst-page-flights .sst-fl-routes-carousel,
body.sst-page-flights .sst-fl-regions-carousel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}

body.sst-page-sky22 .sst-stays-dest-carousel,
body.sst-page-car-rental .sst-car-dest-carousel {
  margin-top: 22px;
}

body.sst-page-sky22 .sst-stays-dest-carousel {
  overflow: visible;
  padding-bottom: 10px;
}

body.sst-page-flights .sst-fl-routes-carousel-track,
body.sst-page-flights .sst-fl-regions-carousel-track,
body.sst-page-car-rental .sst-car-dest-carousel-track {
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: nowrap !important;
  gap: var(--sst-swipe-carousel-gap) !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pinch-zoom;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 6px 0 14px;
  margin: 0;
}

body.sst-page-sky22 .sst-stays-dest-carousel-track {
  display: flex !important;
  grid-template-columns: unset !important;
  gap: var(--sst-swipe-carousel-gap) !important;
  overflow-x: auto;
  overflow-y: clip;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 0 28px;
  margin: 0;
}

body.sst-page-flights .sst-fl-routes-carousel-track::-webkit-scrollbar,
body.sst-page-flights .sst-fl-regions-carousel-track::-webkit-scrollbar,
body.sst-page-sky22 .sst-stays-dest-carousel-track::-webkit-scrollbar,
body.sst-page-car-rental .sst-car-dest-carousel-track::-webkit-scrollbar {
  display: none;
}

body.sst-page-flights .sst-fl-routes-carousel-track .sst-fl-route-slide,
body.sst-page-flights .sst-fl-regions-carousel-track .sst-fl-region-slide {
  flex: 0 0 min(74vw, 240px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-width: 0;
}

body.sst-page-sky22 .sst-stays-dest-slide,
body.sst-page-car-rental .sst-car-dest-slide {
  flex: 0 0 min(88vw, 320px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-width: 0;
  display: flex;
  align-items: stretch;
  align-self: stretch;
  height: auto;
}

body.sst-page-flights .sst-fl-routes-carousel-btn,
body.sst-page-sky22 .sst-stays-dest-carousel-btn,
body.sst-page-car-rental .sst-car-dest-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #0770e3;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(7, 112, 227, 0.35);
  transition: opacity 0.2s ease, background 0.2s ease;
}

body.sst-page-flights .sst-fl-routes-carousel-btn:hover:not(:disabled),
body.sst-page-sky22 .sst-stays-dest-carousel-btn:hover:not(:disabled),
body.sst-page-car-rental .sst-car-dest-carousel-btn:hover:not(:disabled) {
  background: #0557b0;
}

body.sst-page-flights .sst-fl-routes-carousel-btn:disabled,
body.sst-page-sky22 .sst-stays-dest-carousel-btn:disabled,
body.sst-page-car-rental .sst-car-dest-carousel-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

body.sst-page-flights .sst-fl-routes-carousel-btn--prev,
body.sst-page-sky22 .sst-stays-dest-carousel-btn--prev,
body.sst-page-car-rental .sst-car-dest-carousel-btn--prev {
  left: -4px;
}

body.sst-page-flights .sst-fl-routes-carousel-btn--next,
body.sst-page-sky22 .sst-stays-dest-carousel-btn--next,
body.sst-page-car-rental .sst-car-dest-carousel-btn--next {
  right: -4px;
}

body.sst-page-flights .sst-fl-routes-carousel-hint,
body.sst-page-sky22 .sst-stays-dest-carousel-hint,
body.sst-page-car-rental .sst-car-dest-carousel-hint {
  margin: 8px 0 0;
  text-align: center;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--muted, #64748b);
}

body.sst-page-flights .sst-stays-dest-carousel-fade,
body.sst-page-flights .sst-car-dest-carousel-fade,
body.sst-page-flights .sst-fl-routes-carousel-fade,
body.sst-page-sky22 .sst-stays-dest-carousel-fade,
body.sst-page-car-rental .sst-car-dest-carousel-fade {
  display: none !important;
}

@media (min-width: 720px) {
  body.sst-page-flights .sst-fl-routes-carousel,
  body.sst-page-flights .sst-fl-regions-carousel,
  body.sst-page-sky22 .sst-stays-dest-carousel,
  body.sst-page-car-rental .sst-car-dest-carousel {
    padding: 0;
  }

  body.sst-page-flights .sst-fl-routes-carousel-track,
  body.sst-page-flights .sst-fl-regions-carousel-track,
  body.sst-page-car-rental .sst-car-dest-carousel-track {
    scroll-snap-type: x proximity;
    padding: 8px 0 16px;
  }

  body.sst-page-sky22 .sst-stays-dest-carousel-track {
    scroll-snap-type: x proximity;
    overflow-y: clip;
    padding: 10px 0 32px;
  }

  body.sst-page-flights .sst-fl-routes-carousel-track .sst-fl-route-slide,
  body.sst-page-flights .sst-fl-regions-carousel-track .sst-fl-region-slide {
    flex: 0 0 calc((100% - (2 * var(--sst-swipe-carousel-gap))) / 3);
  }

  body.sst-page-sky22 .sst-stays-dest-slide,
  body.sst-page-car-rental .sst-car-dest-slide {
    flex: 0 0 calc((100% - var(--sst-swipe-carousel-gap)) / 2);
  }

  body.sst-page-flights .sst-fl-routes-carousel-btn,
  body.sst-page-sky22 .sst-stays-dest-carousel-btn,
  body.sst-page-car-rental .sst-car-dest-carousel-btn {
    display: flex;
    opacity: 0;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.35);
  }

  body.sst-page-flights .sst-fl-routes-carousel:hover .sst-fl-routes-carousel-btn:not(:disabled),
  body.sst-page-flights .sst-fl-regions-carousel:hover .sst-fl-routes-carousel-btn:not(:disabled),
  body.sst-page-flights .sst-fl-routes-carousel:focus-within .sst-fl-routes-carousel-btn:not(:disabled),
  body.sst-page-flights .sst-fl-regions-carousel:focus-within .sst-fl-routes-carousel-btn:not(:disabled),
  body.sst-page-sky22 .sst-stays-dest-carousel:hover .sst-stays-dest-carousel-btn:not(:disabled),
  body.sst-page-sky22 .sst-stays-dest-carousel:focus-within .sst-stays-dest-carousel-btn:not(:disabled),
  body.sst-page-car-rental .sst-car-dest-carousel:hover .sst-car-dest-carousel-btn:not(:disabled),
  body.sst-page-car-rental .sst-car-dest-carousel:focus-within .sst-car-dest-carousel-btn:not(:disabled) {
    opacity: 1;
    pointer-events: auto;
  }

  body.sst-page-flights .sst-fl-routes-carousel-btn--prev,
  body.sst-page-sky22 .sst-stays-dest-carousel-btn--prev,
  body.sst-page-car-rental .sst-car-dest-carousel-btn--prev {
    left: 10px;
  }

  body.sst-page-flights .sst-fl-routes-carousel-btn--next,
  body.sst-page-sky22 .sst-stays-dest-carousel-btn--next,
  body.sst-page-car-rental .sst-car-dest-carousel-btn--next {
    right: 10px;
  }

  body.sst-page-flights .sst-fl-routes-carousel-hint,
  body.sst-page-sky22 .sst-stays-dest-carousel-hint,
  body.sst-page-car-rental .sst-car-dest-carousel-hint {
    display: none;
  }
}

@media (min-width: 1020px) {
  body.sst-page-flights .sst-fl-routes-carousel-track .sst-fl-route-slide,
  body.sst-page-flights .sst-fl-regions-carousel-track .sst-fl-region-slide {
    flex: 0 0 calc((100% - (3 * var(--sst-swipe-carousel-gap))) / 4);
  }

  body.sst-page-sky22 .sst-stays-dest-slide,
  body.sst-page-car-rental .sst-car-dest-slide {
    flex: 0 0 calc((100% - (2 * var(--sst-swipe-carousel-gap))) / 3);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.sst-page-flights .sst-fl-routes-carousel-track,
  body.sst-page-flights .sst-fl-regions-carousel-track,
  body.sst-page-sky22 .sst-stays-dest-carousel-track,
  body.sst-page-car-rental .sst-car-dest-carousel-track {
    scroll-behavior: auto;
  }

  body.sst-page-flights .sst-fl-routes-carousel-btn,
  body.sst-page-sky22 .sst-stays-dest-carousel-btn,
  body.sst-page-car-rental .sst-car-dest-carousel-btn {
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }
}

/* Stays hub — "browse stays guides by part of the world" region carousel (matches homepage swipe carousels) */

body.sst-page-sky22 .sst-stays-region-carousel {
  position: relative;
  overflow: visible;
  margin-top: 22px;
}

body.sst-page-sky22 .sst-stays-region-carousel-track {
  display: flex;
  gap: var(--sst-swipe-carousel-gap);
  overflow-x: auto;
  overflow-y: clip;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 8px 0 14px;
  margin: 0;
}

body.sst-page-sky22 .sst-stays-region-carousel-track::-webkit-scrollbar {
  display: none;
}

body.sst-page-sky22 .sst-stays-region-slide {
  flex: 0 0 min(78vw, 280px);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-width: 0;
  display: flex;
  align-items: stretch;
  align-self: stretch;
}

body.sst-page-sky22 .sst-stays-region-slide .sst-region-card {
  width: 100%;
}

body.sst-page-sky22 .sst-stays-region-carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: #0770e3;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(7, 112, 227, 0.35);
  transition: opacity 0.2s ease, background 0.2s ease;
}

body.sst-page-sky22 .sst-stays-region-carousel-btn:hover:not(:disabled) {
  background: #0557b0;
}

body.sst-page-sky22 .sst-stays-region-carousel-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

body.sst-page-sky22 .sst-stays-region-carousel-btn--prev {
  left: -4px;
}

body.sst-page-sky22 .sst-stays-region-carousel-btn--next {
  right: -4px;
}

body.sst-page-sky22 .sst-stays-region-carousel-hint {
  margin: 0;
  text-align: center;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--muted, #64748b);
}

@media (min-width: 720px) {
  body.sst-page-sky22 .sst-stays-region-carousel-track {
    scroll-snap-type: x proximity;
    padding: 10px 0 18px;
  }

  body.sst-page-sky22 .sst-stays-region-slide {
    flex: 0 0 calc((100% - (2 * var(--sst-swipe-carousel-gap))) / 3);
  }

  body.sst-page-sky22 .sst-stays-region-carousel-btn {
    display: flex;
    opacity: 0;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.35);
  }

  body.sst-page-sky22 .sst-stays-region-carousel:hover .sst-stays-region-carousel-btn:not(:disabled),
  body.sst-page-sky22 .sst-stays-region-carousel:focus-within .sst-stays-region-carousel-btn:not(:disabled) {
    opacity: 1;
    pointer-events: auto;
  }

  body.sst-page-sky22 .sst-stays-region-carousel-btn--prev {
    left: 10px;
  }

  body.sst-page-sky22 .sst-stays-region-carousel-btn--next {
    right: 10px;
  }

  body.sst-page-sky22 .sst-stays-region-carousel-hint {
    display: none;
  }
}

@media (min-width: 1020px) {
  /* All five region guides visible across the content width on desktop */
  body.sst-page-sky22 .sst-stays-region-slide {
    flex: 0 0 calc((100% - (4 * var(--sst-swipe-carousel-gap))) / 5);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.sst-page-sky22 .sst-stays-region-carousel-track {
    scroll-behavior: auto;
  }

  body.sst-page-sky22 .sst-stays-region-carousel-btn {
    opacity: 1;
    pointer-events: auto;
    transition: none;
  }
}