/* Trip single redesign. Scoped to the new template so production trip pages stay untouched. */
:root { --ph-site-sticky-offset: 0px; }

/* responsive.css applies overflow-x:hidden to body on mobile; clip avoids creating a sticky scroll container. */
html.ph-trip-redesign-page,
body.ph-trip-redesign-page { overflow-x: clip !important; overflow-y: visible !important; }

.ph-trip-layout {
  --ph-trip-ink: #17145c;
  --ph-trip-accent: #ee883e;
  --ph-trip-line: #e6e8ee;
  color: #252630;
}

/* Keep all sticky descendants in an unclipped, naturally sized content column. */
.ph-trip-layout #main-trip-content,
.ph-trip-layout .ph-trip-columns,
.ph-trip-layout .left-package-container,
.ph-trip-layout .right-package-container { min-width: 0; overflow: visible; }
.ph-trip-layout .ph-trip-columns { align-items: stretch; }
.ph-trip-layout .left-package-container { align-self: stretch; }
.ph-trip-layout .hide-desktop-scroll,
.ph-trip-layout .number-travelers,
.ph-trip-layout .bottom-content .mt-1 { display: none !important; }

/* Sticky wrapper stays inside the left trip column; only its child scrolls sideways. */
.ph-trip-layout .ph-package-nav {
  position: sticky;
  top: calc(var(--ph-site-sticky-offset) + 10px);
  z-index: 900;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 14px 0 28px;
  overflow: visible;
  border: 1px solid var(--ph-trip-line);
  border-radius: 12px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 5px 18px rgba(23,20,92,.08);
}
.ph-trip-layout .ph-package-nav__scroller {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.ph-trip-layout .ph-package-nav__scroller::-webkit-scrollbar { display: none; width: 0; height: 0; }
.ph-trip-layout .ph-package-nav a {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 96px;
  min-height: 48px;
  padding: 9px 13px 11px;
  border-bottom: 3px solid transparent;
  color: #353845;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.ph-trip-layout .ph-package-nav a i { color: var(--ph-trip-accent); }
.ph-trip-layout .ph-package-nav a:hover,
.ph-trip-layout .ph-package-nav a.is-active {
  color: var(--ph-trip-ink);
  border-bottom-color: var(--ph-trip-accent);
  background: #fffaf6;
}
.ph-trip-layout .ph-package-nav a:focus-visible { outline: 2px solid var(--ph-trip-accent); outline-offset: -2px; }
.ph-trip-layout section[id] { scroll-margin-top: calc(var(--ph-site-sticky-offset) + 82px); }

/* Keep only the desktop booking card sticky; the early card is the mobile version. */
.ph-trip-layout .right-package-container > .right-package-parent {
  position: sticky;
  top: calc(var(--ph-site-sticky-offset) + 16px);
  height: auto;
  align-self: flex-start;
}
.ph-trip-layout .left-package-container > .ph-mobile-trip-card {
  position: static;
  top: auto;
  margin-top: 12px !important;
  padding-top: 0 !important;
}
.ph-trip-layout .ph-mobile-trip-card > .right-package { margin-top: 0 !important; }
.ph-trip-layout .right-package { position: relative; }
.ph-trip-layout .custom-right-package { padding-top: 58px !important; }
.ph-trip-layout .top-seller-badge {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  left: auto !important;
  z-index: 3;
  width: auto;
  min-width: 84px;
  max-width: calc(100% - 24px);
  margin: 0 !important;
  padding: 6px 10px;
  overflow: hidden;
  box-sizing: border-box;
  font-size: 11px;
  line-height: 1.05;
  text-align: center;
  border-radius: 0 8px 0 8px;
}
.ph-trip-layout .top-seller-badge .fold { right: -10px; }

.ph-trip-layout #includes,
.ph-trip-layout #excludes,
.ph-trip-layout #reviews { padding: 28px 0; border-bottom: 1px solid var(--ph-trip-line); }
.ph-trip-layout #departures { scroll-margin-top: calc(var(--ph-site-sticky-offset) + 82px); }
.ph-trip-layout #includes .content-inside,
.ph-trip-layout #excludes .content-inside,
.ph-trip-layout #reviews .ph-trip-reviews__content { line-height: 1.75; }

/* Responsive gallery without imposing an image count limit. */
.ph-trip-layout .ph-trip-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.ph-trip-layout .ph-trip-gallery-item {
  display: block;
  min-width: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: #f1f2f5;
}
.ph-trip-layout .ph-trip-gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.ph-trip-layout .ph-trip-gallery-item:hover img { transform: scale(1.035); }

/* Centered month navigation, responsive calendar, and the original departure booking details. */
.ph-trip-layout .ph-departure-calendar-nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  margin: 24px 0 16px;
  padding: 0 52px;
}
.ph-trip-layout .ph-departure-calendar-nav .ph-departure-calendar-title {
  margin: 0;
  color: var(--ph-trip-ink);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}
.ph-trip-layout .ph-departure-step {
  position: absolute;
  top: 50%;
  right: 0;
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--ph-trip-ink);
  font-size: 15px;
  cursor: pointer;
}
.ph-trip-layout .ph-departure-step[data-direction="previous"] { right: auto; left: 0; }
.ph-trip-layout .ph-departure-step:hover { background: #282478; }
.ph-trip-layout .ph-departure-step[hidden] { display: none !important; }
.ph-trip-layout .ph-departure-step:focus-visible { outline: 3px solid rgba(238,136,62,.55); outline-offset: 3px; }
.ph-trip-layout .ph-departure-month-panel[hidden],
.ph-trip-layout .ph-departure-day-details[hidden] { display: none !important; }
.ph-trip-layout .ph-departure-calendar-title { margin: 0 0 14px; color: var(--ph-trip-ink); font-size: 20px; font-weight: 800; }
.ph-trip-layout .ph-departure-calendar {padding: 14px; border: 1px solid var(--ph-trip-line); border-radius: 14px; background: #fff; }
.ph-trip-layout .ph-calendar-weekdays,
.ph-trip-layout .ph-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ph-trip-layout .ph-calendar-weekdays { margin-bottom: 6px; color: #666a76; text-align: center; font-size: 12px; font-weight: 700; }
.ph-trip-layout .ph-calendar-cell {
  display: flex;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 0;
  border-radius: 9px;
  color: #353845;
  background: transparent;
  font: inherit;
}
.ph-trip-layout .ph-calendar-cell.is-empty { pointer-events: none; }
.ph-trip-layout .ph-calendar-day { cursor: pointer; font-weight: 700; }
.ph-trip-layout .ph-calendar-day:hover,
.ph-trip-layout .ph-calendar-day.is-selected { color: #fff; background: var(--ph-trip-ink); }
.ph-trip-layout .ph-calendar-day i { position: absolute; bottom: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--ph-trip-accent); }
.ph-trip-layout .ph-calendar-day.is-selected i { background: #fff; }
.ph-trip-layout .ph-departure-details-list { max-width: 760px; margin-top: 16px; }
.ph-trip-layout .ph-departure-card {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: center;
  margin: 0 0 10px;
  padding: 16px;
  border: 1px solid var(--ph-trip-line);
  border-radius: 12px;
  background: #fff;
}
.ph-trip-layout .ph-departure-note { grid-column: 1 / -1; margin: 0; color: #626575; }
.ph-trip-layout .ph-departure-card__detail { display: flex; flex-direction: column; gap: 4px; }
.ph-trip-layout .ph-departure-card__detail span { color: #757987; font-size: 12px; }
.ph-trip-layout .ph-departure-card__detail strong { color: #252630; font-size: 14px; }
.ph-trip-layout .ph-departure-card__price strong { color: var(--ph-trip-accent); font-size: 17px; }
.ph-trip-layout .ph-departure-card form { margin: 0; }
.ph-trip-layout .ph-departure-card form button { padding: 10px 15px; border: 0; border-radius: 7px; color: #fff; background: var(--ph-trip-accent); font-weight: 700; white-space: nowrap; }

@media (min-width: 1200px) {
  .ph-trip-layout .left-package-container { padding-right: 28px; }
  .ph-trip-layout .right-package-container { padding-left: 18px; }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .ph-trip-layout .ph-trip-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-trip-layout .ph-package-nav a { min-width: 100px; }
}

@media (min-width: 992px) {
  .ph-trip-layout .ph-mobile-trip-card { display: none !important; }
  .ph-trip-layout .right-package-container > .right-package-parent {
    position: sticky;
    top: calc(var(--ph-site-sticky-offset) + 16px);
    align-self: flex-start;
  }
}

@media (max-width: 991.98px) {
  .ph-trip-layout .ph-mobile-trip-card { margin-top: 12px !important; padding-top: 0 !important; }
  .ph-trip-layout .ph-mobile-trip-card .top-seller-badge { top: 8px !important; right: 10px !important; }
  .ph-trip-layout .ph-trip-columns { row-gap: 0; }
}

@media (max-width: 767.98px) {
  .ph-trip-layout .ph-package-nav {
    top: calc(var(--ph-site-sticky-offset) + 4px);
    margin: 10px 0 22px;
    border-width: 0 0 1px;
    border-radius: 0;
    box-shadow: 0 4px 12px rgba(23,20,92,.08);
  }
  .ph-trip-layout .ph-package-nav__scroller { gap: 2px; padding: 0 5px; }
  .ph-trip-layout .ph-package-nav a { min-width: 104px; min-height: 48px; padding: 9px 12px 10px; gap: 7px; font-size: 13px; }
  .ph-trip-layout section[id] { scroll-margin-top: calc(var(--ph-site-sticky-offset) + 72px); }
  .ph-trip-layout .ph-trip-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .ph-trip-layout .ph-departure-calendar { padding: 10px 7px; }
  .ph-trip-layout .ph-departure-calendar-nav { min-height: 44px; margin: 18px 0 14px; padding: 0 48px; }
  .ph-trip-layout .ph-departure-calendar-nav .ph-departure-calendar-title { font-size: 20px; }
  .ph-trip-layout .ph-departure-step { width: 40px; height: 40px; font-size: 13px; }
  .ph-trip-layout .ph-calendar-cell { min-height: 42px; font-size: 13px; }
  .ph-trip-layout .ph-calendar-weekdays { font-size: 11px; }
  .ph-trip-layout .ph-departure-card { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; padding: 14px; }
  .ph-trip-layout .ph-departure-card form { grid-column: 1 / -1; }
  .ph-trip-layout .ph-departure-card form button { width: 100%; }
  .ph-trip-layout .top-seller-badge { top: 8px !important; right: 10px !important; min-width: 76px; max-width: calc(100% - 20px); padding: 5px 8px; font-size: 10px; }
  .ph-trip-layout .top-seller-badge .fold { display: none; }
}

@media (max-width: 380px) {
  .ph-trip-layout .ph-trip-gallery-grid { grid-template-columns: 1fr; }
  .ph-trip-layout .ph-calendar-cell { min-height: 36px; border-radius: 7px; font-size: 12px; }
  .ph-trip-layout .ph-departure-card__detail strong { font-size: 13px; }
}