/* =========================
   MOBILE SWIPE HERO GALLERY
   ========================= */

.tour-gallery-swipe {
  position: relative;
  width: 100%;
  padding: 12px;
  margin-top: -8px;

  display: flex;
  gap: 12px;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;

  /* hide scrollbar */
  scrollbar-width: none;
}

.tour-gallery-swipe::-webkit-scrollbar {
  display: none;
}

.tour-gallery-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;

  border-radius: 18px;
  overflow: hidden;
}

.tour-gallery-slide img {
  width: 100%;
  height: 360px;
  /* mobile hero height */
  object-fit: cover;
  display: block;
}

/* keep your button looking good on the swipe gallery too */
@media (max-width: 991px) {
  .tour-gallery-swipe .tour-photos-btn {
    right: 16px;
    bottom: 16px;
  }
}


/* ===== Tour Detail Premium Styles ===== */
.tour-desc {
  white-space: pre-line;
}

/* --- HERO GALLERY --- */
.tour-hero {
  width: 100%;
}

.tour-gallery {
  position: relative;
  width: 100%;
  height: 520px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 10px;
  padding: 12px;
  margin-top: -8px;
}

.tour-gallery .gitem {
  border-radius: 18px;
  overflow: hidden;
}

.tour-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gitem-1 {
  grid-column: 1 / span 5;
  grid-row: 1 / span 2;
}

.gitem-2 {
  grid-column: 6 / span 4;
  grid-row: 1 / span 1;
}

.gitem-3 {
  grid-column: 10 / span 3;
  grid-row: 1 / span 1;
}

.gitem-4 {
  grid-column: 6 / span 3;
  grid-row: 2 / span 1;
}

.gitem-5 {
  grid-column: 9 / span 4;
  grid-row: 2 / span 1;
}

.tour-photos-btn {
  position: absolute;
  right: 24px;
  bottom: 24px;
  border-radius: 999px;
  padding: 12px 18px;
  font-weight: 700;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .18);
}

@media (max-width: 991px) {
  .tour-gallery {
    height: 360px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    padding: 10px;
  }

  .gitem-1,
  .gitem-2,
  .gitem-3,
  .gitem-4,
  .gitem-5 {
    grid-column: auto;
    grid-row: auto;
  }

  .tour-photos-btn {
    right: 16px;
    bottom: 16px;
  }
}

/* =========================
   MOBILE HERO DOTS ONLY
   ========================= */

.tour-gallery-swipe-wrapper {
  position: relative;
}

.tour-swipe-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 4px;
}

.tour-swipe-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .25);
  transition: transform .2s ease, background .2s ease;
}

.tour-swipe-dots .dot.active {
  background: #000;
  transform: scale(1.3);
}


/* --- TAGLINE --- */
.tour-tagline {
  background: #fff8e7;
  border: 1px solid rgba(0, 0, 0, .06);
  padding: 18px;
  border-radius: 20px;
  font-size: 1.08rem;
}

/* --- CHECKLIST --- */
.tour-checklist li {
  margin-bottom: 10px;
  font-size: 1.05rem;
}

.tour-mini-list li {
  margin-bottom: 8px;
}

/* =========================
   ✅ STEPS — rail style (like before) + fixed alignment
   ========================= */

.steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* separators come from dashed borders */
}

/* rail gradient behind numbers */
.steps::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 56px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fde68a, #fb923c);
}

/* each step = one row (number + content) */
.step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: stretch;
}

/* number column */
.step-marker {
  position: relative;
  z-index: 1;
  /* sits above the rail */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
  /* same as old design */
}

/* big number */
.step-num {
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.6rem;
  color: #1f2937;
}

/* content column (same spacing as old .step-row) */
.step-content {
  padding: 14px 10px;
  min-height: 92px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.10);
}

.step:last-child .step-content {
  border-bottom: 0;
}

/* Mobile tweak */
@media (max-width: 576px) {
  .steps::before {
    width: 50px;
  }

  .step {
    grid-template-columns: 50px 1fr;
  }

  .step-num {
    font-size: 1.45rem;
  }
}

/* Sticky card spacing */
@media (min-width: 992px) {
  .sticky-lg-top {
    top: 100px;
  }
}

/* Modal images */
.photos-modal-img {
  height: 220px;
  object-fit: cover;
}

/* --- Booking card / Calendar container --- */
.tour-book-card,
.calendar-card {
  max-width: 100%;
  overflow: hidden;
}

/* reduce padding a bit so calendar has space */
.calendar-card.p-3 {
  padding: .75rem !important;
}

.calendar-card {
  background: linear-gradient(180deg, #ffffff, #f9fbff);
  border: 1px solid #e9eef6;
  box-shadow: 0 6px 24px rgba(20, 30, 70, 0.08);
}

/* ================================
   FLATPICKR (ONE CLEAN VERSION)
   One month only + always fits
   ================================ */

/* force flatpickr to obey container width */
.calendar-card .flatpickr-calendar,
.calendar-card .flatpickr-calendar.inline,
.calendar-card .flatpickr-innerContainer,
.calendar-card .flatpickr-rContainer,
.calendar-card .flatpickr-days,
.calendar-card .dayContainer {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.calendar-card .dayContainer {
  min-width: 0 !important;
}

/* day size: looks good and fits in col-lg-5 */
.calendar-card .flatpickr-day {
  width: 44px !important;
  height: 44px !important;
  line-height: 44px !important;
  font-size: 1rem;
  border-radius: 12px;
  position: relative;
  transition: transform .08s ease, box-shadow .12s ease, background-color .12s ease;
}

/* if the card becomes narrow, shrink a little */
@media (max-width: 420px) {
  .calendar-card .flatpickr-day {
    width: 38px !important;
    height: 38px !important;
    line-height: 38px !important;
    font-size: .95rem;
  }
}

.calendar-card .flatpickr-day:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .06);
}

/* Month nav */
.calendar-card .flatpickr-months {
  margin-bottom: 8px;
}

.calendar-card .flatpickr-months .flatpickr-prev-month,
.calendar-card .flatpickr-months .flatpickr-next-month {
  color: #4b5563;
  opacity: 1;
  font-size: 1.25rem;
  transition: transform .1s ease, opacity .1s ease;
}

.calendar-card .flatpickr-months .flatpickr-prev-month:hover,
.calendar-card .flatpickr-months .flatpickr-next-month:hover {
  transform: scale(1.08);
  opacity: 0.8;
}

.calendar-card .flatpickr-current-month {
  font-weight: 700;
  letter-spacing: .2px;
}

/* Availability colors */
.calendar-card .flatpickr-day.available {
  background-color: #e9f9ef !important;
  color: #0b5b2b !important;
  border: 1px solid #c8efdb;
}

.calendar-card .flatpickr-day.limited {
  background-color: #fff5e6 !important;
  color: #8a5200 !important;
  border: 1px solid #ffe1b8;
}

.calendar-card .flatpickr-day.fully-booked {
  background-color: #fde8ea !important;
  color: #7b1d24 !important;
  text-decoration: line-through;
  border: 1px solid #f7c9cf;
}

.calendar-card .flatpickr-day.no-data {
  background-color: #f3f5f8 !important;
  color: #6c757d !important;
}

/* Today + Selected */
.calendar-card .flatpickr-day.today {
  box-shadow: inset 0 0 0 2px #3b82f6;
}

.calendar-card .flatpickr-day.selected,
.calendar-card .flatpickr-day.startRange,
.calendar-card .flatpickr-day.endRange {
  background: #3b82f6 !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 6px 16px rgba(59, 130, 246, .25);
}

/* Meter bar */
.calendar-card .flatpickr-day .day-meter {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 6%;
  height: 4px;
  border-radius: 3px;
  background: #e5e7eb;
  overflow: hidden;
}

.calendar-card .flatpickr-day .day-meter::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--fill, 0%);
  border-radius: 3px;
  background: linear-gradient(90deg, #22c55e, #16a34a);
}

.calendar-card .flatpickr-day.limited .day-meter::after {
  background: linear-gradient(90deg, #facc15, #eab308);
}

.calendar-card .flatpickr-day.fully-booked .day-meter::after {
  background: linear-gradient(90deg, #ef4444, #b91c1c);
  opacity: 0.6;
}

.calendar-card .flatpickr-day.no-data .day-meter::after {
  background: #d1d5db;
}

/* Legend */
.calendar-legend .legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.calendar-legend .lg-available {
  background: #e9f9ef;
}

.calendar-legend .lg-limited {
  background: #fff5e6;
}

.calendar-legend .lg-full {
  background: #fde8ea;
}

/* ✅ Align weekday header with day cells */
.calendar-card .flatpickr-weekdaycontainer,
.calendar-card .flatpickr-weekdays {
  width: 100% !important;
  max-width: 100% !important;
}

.calendar-card span.flatpickr-weekday {
  width: 44px !important;
  flex: 0 0 44px !important;
  max-width: 44px !important;
  text-align: center;
}

/* Match the mobile shrink breakpoint too */
@media (max-width: 420px) {
  .calendar-card span.flatpickr-weekday {
    width: 38px !important;
    flex: 0 0 38px !important;
    max-width: 38px !important;
  }
}

/* ================================
   FLATPICKR — FORCE PERFECT 7 COLUMNS
   Works with showMonths: 1
   ================================ */

.calendar-card {
  overflow: hidden;
}

/* Make the whole calendar obey the card width */
.calendar-card .flatpickr-calendar,
.calendar-card .flatpickr-calendar.inline,
.calendar-card .flatpickr-innerContainer,
.calendar-card .flatpickr-rContainer,
.calendar-card .flatpickr-days,
.calendar-card .flatpickr-weekdays {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* FORCE weekday header into a 7-col grid */
.calendar-card .flatpickr-weekdaycontainer {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  width: 100% !important;
}

/* FORCE day grid into a 7-col grid */
.calendar-card .dayContainer {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

/* IMPORTANT: remove flex/width fighting from previous attempts */
.calendar-card span.flatpickr-weekday,
.calendar-card .flatpickr-day {
  width: auto !important;
  max-width: none !important;
  flex: unset !important;
}

/* Make days square-ish without breaking the grid */
.calendar-card .flatpickr-day {
  aspect-ratio: 1 / 1;
  height: auto !important;
  line-height: normal !important;
  display: grid;
  place-items: center;
  border-radius: 12px;
  position: relative;
}

/* Ensure text is centered and clean */
.calendar-card span.flatpickr-weekday {
  text-align: center;
  font-size: 0.9rem;
  padding: 6px 0;
}

/* Keep your availability colors */
.calendar-card .flatpickr-day.available {
  background-color: #e9f9ef !important;
  color: #0b5b2b !important;
  border: 1px solid #c8efdb;
}

.calendar-card .flatpickr-day.limited {
  background-color: #fff5e6 !important;
  color: #8a5200 !important;
  border: 1px solid #ffe1b8;
}

.calendar-card .flatpickr-day.fully-booked {
  background-color: #fde8ea !important;
  color: #7b1d24 !important;
  text-decoration: line-through;
  border: 1px solid #f7c9cf;
}

.calendar-card .flatpickr-day.no-data {
  background-color: #f3f5f8 !important;
  color: #6c757d !important;
}

/* Today + selected */
.calendar-card .flatpickr-day.today {
  box-shadow: inset 0 0 0 2px #3b82f6;
}

.calendar-card .flatpickr-day.selected,
.calendar-card .flatpickr-day.startRange,
.calendar-card .flatpickr-day.endRange {
  background: #3b82f6 !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 6px 16px rgba(59, 130, 246, .25);
}

/* Meter bar stays inside each cell */
.calendar-card .flatpickr-day .day-meter {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 8%;
  height: 4px;
  border-radius: 3px;
  background: #e5e7eb;
  overflow: hidden;
}

.calendar-card .flatpickr-day .day-meter::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--fill, 0%);
  border-radius: 3px;
  background: linear-gradient(90deg, #22c55e, #16a34a);
}

.calendar-card .flatpickr-day.limited .day-meter::after {
  background: linear-gradient(90deg, #facc15, #eab308);
}

.calendar-card .flatpickr-day.fully-booked .day-meter::after {
  background: linear-gradient(90deg, #ef4444, #b91c1c);
  opacity: 0.6;
}