/* =======================================================
   TRIPFLORIC TOUR DETAILS — MODERN EXPERIENCES SHELL
   Layout matching TripFloric Experiences Mockup
   ======================================================= */

:root {
  --tf-teal-primary: #0054A6;
  --tf-teal-dark: #004488;
  --tf-teal-accent: #0054A6;
  --tf-teal-light: #E8F0FA;
  --tf-teal-border: rgba(0, 84, 166, 0.2);
  --tf-teal-gradient: linear-gradient(135deg, #0054A6 0%, #004488 100%);

  --tf-text-main: #0f172a;
  --tf-text-body: #334155;
  --tf-text-muted: #64748b;
  --tf-text-light: #94a3b8;

  --tf-bg-page: #f8fafc;
  --tf-bg-card: #ffffff;
  --tf-border: #e2e8f0;
  --tf-border-subtle: #f1f5f9;

  --tf-radius-sm: 8px;
  --tf-radius: 12px;
  --tf-radius-lg: 16px;
  --tf-radius-xl: 20px;

  --tf-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.03);
  --tf-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.06);
  --tf-shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.1);
  --tf-shadow-sheet: 0 -10px 40px rgba(0, 0, 0, 0.18);
}

body.tfd-body {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  color: var(--tf-text-body);
  background-color: var(--tf-bg-page);
  line-height: 1.6;
  /* Prevent horizontal overflow on small screens WITHOUT becoming a scroll
     container — `hidden` would break position:sticky for the topbar/navbar
     and the booking rail (same treatment body.home-v2 gets in home.css). */
  overflow-x: clip;
  max-width: 100%;
}

/* ── Container ── */
.tfd-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.tfd-content-container {
  padding-bottom: 60px;
}

/* ── 1. Hero Full-Width Banner with Mint Gradient & Shapes ── */
.tfd-hero-banner {
  position: relative;
  /* Mint hero matching the reference: greener at the top, fading to white so the
     photo gallery and fact cards sit on a light surface. */
  background: linear-gradient(180deg, #E8F0FA 0%, #F1F7FD 34%, #F8FBFF 68%, #FAFCFF 100%);
  border-bottom: 1px solid #E8F0FA;
  padding: 24px 0 28px;
  overflow: hidden;
}

/* Soft brand glow behind the gallery side, mirroring the reference artwork. */
.tfd-hero-banner::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -80px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.28), rgba(96, 165, 250, 0) 68%);
  pointer-events: none;
}

.tfd-hero-bg-shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.tfd-shape-left {
  position: absolute;
  top: -30px;
  left: -50px;
  width: 380px;
  height: auto;
  opacity: 1;
}

.tfd-shape-right {
  position: absolute;
  top: -20px;
  right: -60px;
  width: 400px;
  height: auto;
  opacity: 1;
}

.tfd-hero-container {
  position: relative;
  z-index: 2;
}

/* ── Hero Split Layout (2 Columns) ── */
.tfd-hero-split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: center;
}

.tfd-hero-info {
  min-width: 0;
}

/* Breadcrumbs */
.tfd-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #0054A6;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.tfd-breadcrumb a {
  color: #0054A6;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}

.tfd-breadcrumb a:hover {
  color: #004488;
  text-decoration: underline;
}

.tfd-breadcrumb .sep {
  font-size: 12px;
  color: #0054A6;
  opacity: 0.65;
  font-weight: 600;
}

.tfd-breadcrumb .current {
  color: #475569;
  font-weight: 500;
}

/* Category Badge */
.tfd-hero-category-wrap {
  margin-bottom: 12px;
}

.tfd-category-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  background: #E8F0FA;
  color: #0054A6;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Hero Title */
.tfd-hero-title {
  font-size: 32px;
  font-weight: 800;
  color: #0c2340;
  line-height: 1.22;
  margin: 0 0 12px 0;
  letter-spacing: -0.02em;
}

/* Rating & Free Cancellation Subline */
.tfd-hero-subline {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  margin-bottom: 22px;
}

.tfd-hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: #0f172a;
}

.tfd-hero-rating i {
  color: #f59e0b;
  font-size: 14px;
}

.tfd-hero-rating .count {
  color: #64748b;
  font-weight: 500;
}

.tfd-hero-subline .divider-dot {
  color: #cbd5e1;
}

.tfd-hero-cancel-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0054A6;
  font-weight: 600;
  font-size: 13.5px;
}

.tfd-hero-cancel-badge i {
  font-size: 14px;
}

/* Feature Cards Strip */
.tfd-feature-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

@media (max-width: 1200px) and (min-width: 992px) {
  .tfd-feature-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) and (min-width: 641px) {
  .tfd-feature-cards-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 640px) and (min-width: 441px) {
  .tfd-feature-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 440px) {
  .tfd-feature-cards-grid {
    grid-template-columns: 1fr;
  }
}

.tfd-feature-card {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  background: #ffffff;
  border: 1px solid #eef2f6;
  border-radius: 12px;
  padding: 8px 10px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
}

.tfd-feat-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  background: #E8F0FA;
  color: #0054A6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.tfd-feat-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.feat-label {
  font-size: 10.5px;
  color: #64748b;
  font-weight: 500;
  line-height: 1.2;
}

.feat-val {
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  margin-top: 2px;
}

/* ── Hero Gallery Block (Main slider + 3 thumbs) ── */
.tfd-hero-gallery-wrap {
  min-width: 0;
}

.tfd-hero-gallery-grid {
  display: grid;
  grid-template-columns: 1fr 124px;
  gap: 10px;
  height: 320px;
}

.tfd-hero-main-img {
  position: relative;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  background: #0f172a;
}

.tfd-hero-main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.tfd-hero-main-img:hover img {
  transform: scale(1.02);
}

.tfd-hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  border: none;
  color: #0054A6;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  transition: all 0.2s ease;
  z-index: 5;
}

.tfd-hero-arrow:hover {
  background: #E8F0FA;
  transform: translateY(-50%) scale(1.06);
}

.tfd-hero-arrow.prev {
  left: 14px;
}

.tfd-hero-arrow.next {
  right: 14px;
}

.tfd-hero-counter-pill {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(15, 23, 42, 0.78);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  z-index: 5;
  letter-spacing: 0.5px;
}

.tfd-hero-thumbs-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  width: 124px;
}

.tfd-hero-thumb {
  flex: 1;
  min-height: 0;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  background: #0f172a;
}

.tfd-hero-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.tfd-hero-thumb:hover img {
  transform: scale(1.05);
}

.tfd-hero-more-badge {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Fallback single / placeholder */
.tfd-gallery-placeholder {
  width: 100%;
  height: 320px;
  border-radius: var(--tf-radius-xl);
  background: linear-gradient(135deg, #004488, #0054A6);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

.placeholder-art i {
  font-size: 48px;
  margin-bottom: 10px;
  opacity: 0.85;
}

.placeholder-title {
  font-size: 18px;
  font-weight: 800;
}

.placeholder-sub {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 4px;
}

.tfd-gallery-single {
  position: relative;
  width: 100%;
  height: 320px;
  border-radius: var(--tf-radius-xl);
  overflow: hidden;
  cursor: pointer;
}

.tfd-gallery-single img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tfd-view-all-btn {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--tf-radius);
  font-size: 13px;
  font-weight: 700;
  color: var(--tf-text-main);
  cursor: pointer;
  z-index: 5;
}

/* ── Photo modal (both detail pages) ──
   Panel with its own header, a gallery overview (or the single-photo stage
   with a thumbnail rail) and a facts column. Replaces the old full-bleed dark
   viewer, which opened straight onto one oversized image. */
.tfd-lb {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  box-sizing: border-box !important;
  z-index: 99999999 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(6, 10, 20, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.tfd-lb-panel {
  display: flex;
  flex-direction: column;
  width: min(1180px, 100%);
  max-width: 100%;
  height: min(780px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
  min-height: 0;
  background: var(--tf-bg-card, #ffffff);
  border-radius: var(--tf-radius-lg, 16px);
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.65);
  position: relative;
  z-index: 1;
}

.tfd-lb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--tf-border-subtle);
  flex-shrink: 0;
}

.tfd-lb-heading {
  min-width: 0;
}

.tfd-lb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tf-teal-primary);
}

.tfd-lb-heading h3 {
  margin: 3px 0 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--tf-text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tfd-lb-heading-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.tfd-lb-cta {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 20px;
  border-radius: 10px;
  background: var(--tf-teal-gradient);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: box-shadow 0.2s, transform 0.2s;
}

.tfd-lb-cta:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 84, 166, 0.32);
}

.tfd-lb-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--tf-border);
  background: #f8fafc;
  color: var(--tf-text-body);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.tfd-lb-close:hover {
  background: #fee2e2;
  border-color: #fecaca;
  color: #b91c1c;
}

.tfd-lb-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

.tfd-lb-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--tf-bg-page);
}

.tfd-lb-view {
  flex: 1;
  min-height: 0;
}

.tfd-lb-view--grid {
  overflow-y: auto;
  padding: 16px;
}

.tfd-lb-view--slide {
  display: flex;
  flex-direction: column;
}

.tfd-lb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.tfd-lb-grid-item {
  padding: 0;
  border: none;
  background: #e9eef2;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4 / 3;
}

.tfd-lb-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}

.tfd-lb-grid-item:hover img {
  transform: scale(1.05);
}

.tfd-lb-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: #fff;
  border-bottom: 1px solid var(--tf-border-subtle);
  flex-shrink: 0;
}

.tfd-lb-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--tf-border);
  background: #f8fafc;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--tf-text-main);
  cursor: pointer;
  transition: all 0.2s;
}

.tfd-lb-back:hover {
  border-color: var(--tf-teal-primary);
  color: var(--tf-teal-primary);
}

.tfd-lb-topcount {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tf-text-muted);
}

.tfd-lb-topcount strong {
  color: var(--tf-text-main);
}

.tfd-lb-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 64px;
}

.tfd-lb-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(15, 23, 42, 0.16);
  display: block;
}

.tfd-lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #cbd5e1;
  color: var(--tf-text-main);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
  transition: all 0.2s;
}

.tfd-lb-nav:hover {
  border-color: var(--tf-teal-primary);
  color: var(--tf-teal-primary);
  transform: translateY(-50%) scale(1.06);
}

.tfd-lb-nav.prev {
  left: 12px;
}

.tfd-lb-nav.next {
  right: 12px;
}

.tfd-lb-thumbs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 16px;
  background: #fff;
  border-top: 1px solid var(--tf-border);
  flex-shrink: 0;
  scrollbar-width: thin;
}

.tfd-lb-thumbs::-webkit-scrollbar {
  height: 4px;
}

.tfd-lb-thumbs::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 2px;
}

.tfd-lb-thumb {
  scroll-margin: 0 8px;
  width: 74px;
  height: 54px;
  flex-shrink: 0;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  background: #e9eef2;
  cursor: pointer;
  opacity: 0.72;
  transition: all 0.2s;
}

.tfd-lb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tfd-lb-thumb:hover {
  opacity: 1;
  border-color: #94a3b8;
}

.tfd-lb-thumb.active {
  opacity: 1;
  border-color: var(--tf-teal-primary);
  box-shadow: 0 0 0 1px var(--tf-teal-primary);
}

.tfd-lb-side {
  width: 312px;
  flex-shrink: 0;
  background: #fff;
  border-left: 1px solid var(--tf-border-subtle);
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.tfd-lb-score {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tfd-lb-score-num {
  width: 52px;
  height: 52px;
  border-radius: var(--tf-radius);
  background: var(--tf-teal-gradient);
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tfd-lb-stars {
  display: flex;
  gap: 2px;
  font-size: 12px;
  color: #cbd5e1;
}

.tfd-lb-stars .is-on {
  color: #f59e0b;
}

.tfd-lb-score-note {
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--tf-text-muted);
}

.tfd-lb-facts {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tfd-lb-facts dt {
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tf-text-light);
}

.tfd-lb-facts dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tf-text-main);
}

.tfd-lb-price {
  color: var(--tf-teal-primary) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

.tfd-lb-side-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border-radius: 10px;
  background: var(--tf-teal-gradient);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: box-shadow 0.2s, transform 0.2s;
}

.tfd-lb-side-cta:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 84, 166, 0.3);
}

.tfd-lb-reviews {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--tf-border-subtle);
}

.tfd-lb-reviews-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--tf-text-main);
}

.tfd-lb-review p {
  margin: 0 0 8px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--tf-text-body);
}

.tfd-lb-review-who {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tfd-lb-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tf-teal-light);
  color: var(--tf-teal-primary);
  font-size: 12px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tfd-lb-review-who strong {
  font-size: 12.5px;
  color: var(--tf-text-main);
}

/* The modal CTAs jump to the booking rail, which has to clear the sticky
   header — a hardcoded 90px left it (and the CTA the guest just tapped behind
   a lightbox) under the navbar at desktop. */
#tickets,
#tour-booking {
  scroll-margin-top: calc(var(--tf-topbar-h, 0px) + var(--tf-navbar-h, 68px) + 16px);
}

@media (max-width: 1024px) {
  .tfd-lb {
    padding: 0;
  }

  .tfd-lb-panel {
    width: 100%;
    height: 100%;
    border-radius: 0;
  }

  .tfd-lb-side {
    display: none;
  }
}

@media (max-width: 640px) {
  .tfd-lb-heading h3 {
    max-width: 50vw;
    font-size: 15px;
  }

  .tfd-lb-stage {
    padding: 12px 46px;
  }

  .tfd-lb-nav {
    width: 36px;
    height: 36px;
    font-size: 13px;
  }

  .tfd-lb-nav.prev {
    left: 6px;
  }

  .tfd-lb-nav.next {
    right: 6px;
  }

  .tfd-lb-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
  }

  .tfd-lb-cta {
    height: 36px;
    padding: 0 14px;
    font-size: 12.5px;
  }

  .tfd-lb-close {
    width: 36px;
    height: 36px;
  }
}

/* ── 2. Full-Width Quick Facts Bar ── */
.tfd-facts-bar-full {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--tf-border);
  border-radius: 16px;
  padding: 18px 24px;
  margin: 16px 0 28px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.tfd-facts-bar-full.tfd-facts-cols-1 {
  grid-template-columns: 1fr;
}

.tfd-facts-bar-full.tfd-facts-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.tfd-facts-bar-full.tfd-facts-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.tfd-facts-bar-full.tfd-facts-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.tfd-bar-fact {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  min-width: 0;
}

.tfd-bar-fact:not(:last-child) {
  border-right: 1px solid var(--tf-border);
}

.tfd-bar-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #E8F0FA;
  color: #0054A6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.tfd-bar-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bar-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--tf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.bar-val {
  font-size: 14px;
  font-weight: 800;
  color: var(--tf-text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}

/* ── 3. Main 2-Column Grid (Left: Content Cards, Right: Booker & Map) ── */
.tfd-main-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  align-items: start;
  margin-bottom: 48px;
}

.tfd-content-rail {
  min-width: 0;
}

/* The rail pinned at a hardcoded 90px while the sticky header is 45px (topbar)
   + 67px (navbar) = 112px tall at desktop — so the card's top edge and price
   sat UNDERNEATH the translucent header. Measure the stack instead: the header
   script publishes it live, and 4px of overlap keeps the rail flush with the
   header's bottom edge rather than leaving a seam. */
.tfd-booking-rail {
  position: sticky;
  top: calc(var(--tf-topbar-h, 0px) + var(--tf-navbar-h, 68px) + 8px);
  z-index: 20;
}

/* ── Content Cards Architecture (White card with circular icon header) ── */
.tfd-card {
  background: #ffffff;
  border: 1px solid var(--tf-border);
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.tfd-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.tfd-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #E8F0FA;
  color: #0054A6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}

.tfd-card-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--tf-text-main);
  margin: 0;
  letter-spacing: -0.01em;
}

/* Overview Body */
.tfd-overview-body {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--tf-text-body);
}

.tfd-overview-body.collapsed {
  max-height: 140px;
  overflow: hidden;
  mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}

.tfd-readmore-btn {
  background: none;
  border: none;
  color: var(--tf-teal-accent);
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 10px 0 0;
}

/* Highlights List (2 Columns) */
.tfd-highlights-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}

.tfd-highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--tf-text-body);
}

.tfd-highlight-item i {
  color: #10b981;
  font-size: 14px;
  margin-top: 3px;
  flex-shrink: 0;
}

/* Itinerary Timeline */
.tfd-itinerary-timeline {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-left: 2px;
}

.tfd-itinerary-item {
  display: flex;
  gap: 16px;
  position: relative;
  padding-bottom: 24px;
}

.tfd-itinerary-item:last-child {
  padding-bottom: 0;
}

.tfd-itinerary-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 17px;
  top: 36px;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, #10b981 0%, #cbd5e1 100%);
  z-index: 1;
}

/* Numbered Pin Badge */
.tfd-itinerary-pin {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0054A6 0%, #004488 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.5px;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(0, 84, 166, 0.25);
  border: 3px solid #ffffff;
  outline: 2px solid #D0E1F5;
  flex-shrink: 0;
  margin-top: 2px;
  z-index: 2;
  transition: transform 0.2s ease, box-shadow 0.2s ease, outline-color 0.2s ease;
}

.tfd-itinerary-item:hover .tfd-itinerary-pin {
  transform: scale(1.08);
  outline-color: #0054A6;
  box-shadow: 0 6px 14px rgba(0, 84, 166, 0.35);
}

.tfd-itinerary-content {
  flex: 1;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: all 0.2s ease;
}

.tfd-itinerary-item:hover .tfd-itinerary-content {
  border-color: #D0E1F5;
  box-shadow: 0 4px 14px rgba(0, 84, 166, 0.08);
}

.tfd-itinerary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  gap: 12px;
}

.tfd-itinerary-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.tfd-stop-badge {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #0054A6;
  background: #E8F0FA;
  border: 1px solid #D0E1F5;
  padding: 2.5px 8px;
  border-radius: 6px;
}

.step-time {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
  background: #f1f5f9;
  padding: 2.5px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.step-location {
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 2.5px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.step-location i {
  color: #e11d48;
}

.step-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--tf-text-main);
  margin: 0;
  line-height: 1.35;
}

.tfd-itinerary-extra-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.tfd-extra-pill {
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tfd-itinerary-header .chevron {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 11px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.tfd-itinerary-header:hover .chevron {
  background: #E8F0FA;
  color: #0054A6;
  border-color: #D0E1F5;
}

.step-desc {
  font-size: 13.5px;
  color: #475569;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e2e8f0;
  line-height: 1.6;
}

/* Inclusions & Exclusions (2 Columns) */
.tfd-inc-grid {
  display: grid;
  gap: 24px;
}

.tfd-inc-grid.two-cols {
  grid-template-columns: 1fr 1fr;
}

/* One list only: keep the block a readable column instead of a stretched void. */
.tfd-inc-grid.single-col {
  grid-template-columns: minmax(0, 620px);
}

.tfd-inc-col {
  display: flex;
  flex-direction: column;
}

.tfd-inc-subheading {
  font-size: 14px;
  font-weight: 800;
  margin: 0 0 14px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tfd-inc-col.included .tfd-inc-subheading {
  color: #059669;
}

.tfd-inc-col.excluded .tfd-inc-subheading {
  color: #dc2626;
}

.tfd-inc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tfd-inc-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--tf-text-body);
}

.tfd-inc-col.included li i {
  color: #10b981;
  font-size: 13px;
  margin-top: 4px;
}

.tfd-inc-col.excluded li i {
  color: #ef4444;
  font-size: 13px;
  margin-top: 4px;
}

/* Meeting Point & Operator (2 Columns) */
.tfd-meeting-operator-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.tfd-mo-col {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid var(--tf-border);
  border-radius: 12px;
}

.tfd-mo-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #E8F0FA;
  color: #0054A6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.tfd-mo-info {
  display: flex;
  flex-direction: column;
}

.tfd-mo-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--tf-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tfd-mo-val {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--tf-text-main);
  margin-top: 2px;
}

/* Good to Know (2 Columns Checklist) */
.tfd-good-to-know-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
}

.tfd-gtk-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--tf-text-body);
}

.tfd-gtk-item i {
  color: #10b981;
  font-size: 13px;
  margin-top: 4px;
  flex-shrink: 0;
}

/* FAQs Accordion */
.tfd-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tfd-faq-item {
  border: 1px solid var(--tf-border);
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
}

.tfd-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: none;
  border: none;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  color: var(--tf-text-main);
  cursor: pointer;
}

.tfd-faq-question i {
  color: var(--tf-text-light);
  font-size: 12px;
}

.tfd-faq-answer {
  padding: 0 18px 14px;
  font-size: 13.5px;
  color: var(--tf-text-muted);
  line-height: 1.6;
}

.tfd-faq-answer p {
  margin: 0;
}

/* Reviews Empty / Score */
.tfd-reviews-total-badge {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--tf-text-muted);
}

.tfd-reviews-empty {
  text-align: center;
  padding: 30px 20px;
}

.tfd-reviews-empty .empty-icon {
  font-size: 28px;
  color: #cbd5e1;
  margin-bottom: 8px;
}

.tfd-reviews-empty .empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--tf-text-main);
  margin: 0 0 4px;
}

.tfd-reviews-empty .empty-desc {
  font-size: 13px;
  color: var(--tf-text-muted);
  margin: 0;
}

/* ── 4. Booker Card & Map Card (Right Rail) ── */
.tfd-booker-card {
  background: #ffffff;
  border: 1px solid var(--tf-border);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--tf-shadow-md);
}

/* Mini Tour Top Row */
.tfd-booker-top-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--tf-border);
}

.tfd-booker-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.tfd-booker-title-wrap {
  flex: 1;
  min-width: 0;
}

.tfd-booker-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tf-text-main);
  line-height: 1.3;
}

.tfd-bestseller-badge {
  background: #0054A6;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

/* Price Block */
.tfd-booker-price-block {
  padding: 16px 0 12px;
}

.tfd-price-main-line {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.tfd-price-main-line .price-val {
  font-size: 26px;
  font-weight: 800;
  color: var(--tf-text-main);
  line-height: 1;
}

.tfd-price-main-line .price-unit {
  font-size: 13px;
  color: var(--tf-text-muted);
}

.tfd-save-callout {
  font-size: 12.5px;
  font-weight: 700;
  color: #059669;
  margin-top: 4px;
}

/* Inputs Row: Date & Travelers */
.tfd-booker-inputs-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.tfd-input-box {
  background: #ffffff;
  border: 1px solid var(--tf-border);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.tfd-input-box:hover {
  border-color: var(--tf-teal-accent);
}

.tfd-input-box .input-lbl {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--tf-text-muted);
  line-height: 1.2;
}

.tfd-input-box .input-val-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tf-text-main);
  margin-top: 2px;
}

.tfd-input-box .input-val-row i:not(.caret-icon) {
  color: var(--tf-teal-accent);
  font-size: 12px;
}

.tfd-input-box .caret-icon {
  margin-left: auto;
  font-size: 10px;
  color: var(--tf-text-light);
  transition: transform 0.25s ease;
}

.tfd-input-box .caret-icon.rotated {
  transform: rotate(180deg);
}

/* Dropdown Calendar / Counters Panel */
.tfd-booker-dropdown-panel {
  background: #f8fafc;
  border: 1px solid var(--tf-border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
}

.tfd-cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.cal-nav-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--tf-border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
}

.cal-month-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tf-text-main);
}

.tfd-dategrid-days-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--tf-text-light);
  margin-bottom: 6px;
}

.tfd-dategrid-cells {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.tfd-day-cell {
  height: 32px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--tf-text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tfd-day-cell.has-dep {
  background: #E8F0FA;
  color: #0054A6;
  font-weight: 700;
}

.tfd-day-cell.selected {
  background: var(--tf-teal-accent) !important;
  color: #fff !important;
}

.tfd-day-cell.past,
.tfd-day-cell:disabled {
  color: #cbd5e1;
  cursor: not-allowed;
  background: transparent;
}

.tfd-time-chips-wrap {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--tf-border);
}

.chips-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--tf-text-muted);
  display: block;
  margin-bottom: 6px;
}

.tfd-time-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tfd-time-chip {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--tf-border);
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.tfd-time-chip.is-selected {
  background: var(--tf-teal-accent);
  color: #fff;
  border-color: var(--tf-teal-accent);
}

/* Travelers Dropdown Panel (Hotel Occupancy Dropdown style) */
.tfd-pax-dropdown-panel.lp-occ-dropdown-tour {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 84, 166, 0.12), 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 16px 18px;
  margin-bottom: 14px;
}

.lp-occ-dropdown-tour .lp-occ-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
}

.lp-occ-dropdown-tour .lp-occ-row:last-of-type {
  border-bottom: none;
}

.lp-occ-dropdown-tour .lp-occ-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lp-occ-dropdown-tour .lp-occ-label strong {
  font-size: 13.5px;
  color: var(--tf-text-main, #0f172a);
  font-weight: 700;
}

.lp-occ-dropdown-tour .lp-occ-label span {
  font-size: 11px;
  color: var(--tf-text-muted, #64748b);
  font-weight: 500;
}

.lp-occ-dropdown-tour .lp-occ-counter {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--tf-teal-accent, #0054A6);
  border-radius: 7px;
  overflow: hidden;
  background: #ffffff;
}

.lp-occ-dropdown-tour .lp-occ-btn {
  width: 34px;
  height: 34px;
  border: none;
  border-right: 1.5px solid var(--tf-teal-accent, #0054A6);
  background: transparent;
  color: var(--tf-teal-accent, #0054A6);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
  border-radius: 0;
  padding: 0;
}

.lp-occ-dropdown-tour .lp-occ-btn:last-child {
  border-right: none;
  border-left: 1.5px solid var(--tf-teal-accent, #0054A6);
}

.lp-occ-dropdown-tour .lp-occ-btn:hover:not(:disabled) {
  background: var(--tf-teal-accent, #0054A6);
  color: #ffffff;
}

.lp-occ-dropdown-tour .lp-occ-btn:disabled {
  border-color: #e2e8f0;
  color: #cbd5e1;
  cursor: not-allowed;
  background: #f8fafc;
}

.lp-occ-dropdown-tour .lp-occ-btn:disabled:hover {
  background: #f8fafc;
  color: #cbd5e1;
}

.lp-occ-dropdown-tour .lp-occ-val {
  font-size: 15px;
  font-weight: 700;
  color: var(--tf-text-main, #0f172a);
  min-width: 36px;
  text-align: center;
  line-height: 1;
}

.lp-occ-dropdown-tour .lp-occ-done {
  width: 100%;
  padding: 10px 14px;
  background: var(--tf-teal-accent, #0054A6);
  color: #ffffff;
  border: none;
  border-radius: 7px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
  margin-top: 10px;
}

.lp-occ-dropdown-tour .lp-occ-done:hover {
  background: #003D7A;
}

/* Child Ages Selection inside Tour Booker (matching Hotel Occupancy Picker) */
.lp-occ-dropdown-tour .bk-occ-children-ages {
  margin: 12px 0;
  padding: 12px 0;
  border-top: 1px dashed #cbd5e1;
  border-bottom: 1px dashed #cbd5e1;
}

.lp-occ-dropdown-tour .bk-child-age-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.lp-occ-dropdown-tour .bk-child-age-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.lp-occ-dropdown-tour .bk-child-age-label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
}

.lp-occ-dropdown-tour .bk-child-age-select {
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #ffffff;
  color: #0f172a;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lp-occ-dropdown-tour .bk-child-age-select:focus {
  border-color: var(--tf-teal-accent, #0054A6);
  box-shadow: 0 0 0 2px rgba(0, 84, 166, 0.15);
}

.lp-occ-dropdown-tour .bk-child-age-warning {
  font-size: 11.5px;
  font-weight: 600;
  color: #d97706;
  background: #fffbeb;
  border: 1px solid #fef3c7;
  border-radius: 6px;
  padding: 6px 10px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Pricing Tiers Section Styling */
.tfd-pricing-tiers-section {
  margin-bottom: 24px;
}

.tfd-tiers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.tfd-tier-card {
  position: relative;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.tfd-tier-card:hover {
  border-color: var(--tf-teal-accent, #0054A6);
  box-shadow: 0 4px 14px rgba(0, 84, 166, 0.09);
  transform: translateY(-1px);
}

.tfd-tier-card:focus-visible {
  outline: 2px solid var(--tf-teal-accent, #0054A6);
  outline-offset: 2px;
}

.tfd-tier-card.is-selected {
  border: 2px solid var(--tf-teal-accent, #0054A6);
  background: #FAFCFF;
  box-shadow: 0 4px 18px rgba(0, 84, 166, 0.14);
  padding: 13px;
}

.tfd-tier-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.tfd-tier-name {
  font-size: 14px;
  font-weight: 800;
  color: var(--tf-text-main, #0f172a);
}

.tfd-tier-price {
  font-size: 16px;
  font-weight: 800;
  color: var(--tf-teal-accent, #0054A6);
  white-space: nowrap;
}

.tfd-tier-unit {
  font-size: 11px;
  font-weight: 500;
  color: var(--tf-text-muted, #64748b);
  margin-left: 2px;
}

.tfd-tier-meta-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.tfd-tier-meta-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--tf-text-muted, #64748b);
}

.tfd-tier-meta-item i {
  color: var(--tf-teal-accent, #0054A6);
  font-size: 11px;
  width: 14px;
  text-align: center;
}

.tfd-tier-pax-type span {
  font-weight: 600;
  color: var(--tf-text-main, #0f172a);
}

.tfd-tier-dates {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: #64748b;
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px dashed #e2e8f0;
}

.tfd-tier-dates.is-ongoing {
  color: #059669;
}

.tfd-tier-dates i {
  color: var(--tf-teal-accent, #0054A6);
  font-size: 11px;
}

/* Reserve CTA Button */
.tfd-reserve-cta-btn {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0054A6 0%, #004488 100%);
  color: #ffffff;
  border: none;
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 84, 166, 0.3);
  transition: all 0.2s ease;
  margin-bottom: 18px;
}

.tfd-reserve-cta-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 84, 166, 0.4);
}

.tfd-reserve-cta-btn:disabled {
  background: #cbd5e1;
  cursor: not-allowed;
  box-shadow: none;
}

/* 4 Trust Badges Stack */
.tfd-trust-badges-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid #f1f5f9;
}

.tfd-trust-badge-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.tfd-trust-badge-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #E8F0FA;
  color: #0054A6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 2px;
}

.tfd-trust-badge-info {
  display: flex;
  flex-direction: column;
}

.trust-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tf-text-main);
  line-height: 1.2;
}

.trust-desc {
  font-size: 11.5px;
  color: var(--tf-text-muted);
  line-height: 1.35;
  margin-top: 1px;
}

/* Map Card */
.tfd-map-card {
  border-radius: 16px;
  border: 1px solid var(--tf-border);
  background: #ffffff;
  overflow: hidden;
  margin-top: 20px;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.tfd-view-map-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: #0054A6;
  color: #ffffff;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: background 0.2s;
}

.tfd-view-map-btn:hover {
  background: #004488;
  color: #ffffff;
}

/* ── 5. Similar Experiences (4 Cards Grid) ── */
.tfd-similar-section {
  padding-top: 24px;
  margin-bottom: 20px;
}

.tfd-similar-header {
  margin-bottom: 18px;
}

.tfd-similar-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--tf-text-main);
  margin: 0;
}

.tfd-similar-subtitle {
  font-size: 13.5px;
  color: var(--tf-text-muted);
  margin: 4px 0 0 0;
}

.tfd-similar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.tfd-sim-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--tf-border);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.tfd-sim-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tf-shadow-md);
  border-color: var(--tf-teal-border);
}

.tfd-sim-img-wrap {
  position: relative;
  width: 100%;
  height: 160px;
  background: #f1f5f9;
  overflow: hidden;
}

.tfd-sim-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.tfd-sim-card:hover .tfd-sim-img-wrap img {
  transform: scale(1.05);
}

.tfd-sim-cat-pill {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(4px);
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  color: #0054A6;
}

.tfd-sim-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.tfd-sim-title {
  font-size: 14.5px;
  font-weight: 800;
  color: var(--tf-text-main);
  margin: 0 0 6px 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tfd-sim-rating-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  margin-bottom: 6px;
}

.tfd-sim-rating-row i {
  color: #f59e0b;
  font-size: 11px;
}

.tfd-sim-rating-row .rating-num {
  font-weight: 700;
  color: var(--tf-text-main);
}

.tfd-sim-rating-row .reviews-num {
  color: var(--tf-text-muted);
  font-size: 11px;
}

.tfd-sim-loc {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--tf-text-muted);
  margin-bottom: 12px;
}

.tfd-sim-loc i {
  color: var(--tf-teal-accent);
  font-size: 11px;
}

.tfd-sim-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 1px solid #f1f5f9;
}

.tfd-sim-price {
  display: flex;
  align-items: baseline;
  gap: 3px;
}

.tfd-sim-price .price-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--tf-text-main);
}

.tfd-sim-price .price-unit {
  font-size: 11px;
  color: var(--tf-text-muted);
}

.tfd-sim-arrow-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #0054A6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  transition: all 0.2s ease;
}

.tfd-sim-card:hover .tfd-sim-arrow-btn {
  background: #0054A6;
  color: #ffffff;
}

/* ── Mobile Sticky Bottom Bar & Sheet ── */
.tfd-mobile-bottom-bar {
  display: none;
}

.tfd-sheet-handle-bar {
  display: none;
}

.tfd-sheet-overlay {
  display: none;
}

/* ── Responsive Media Queries ── */
@media (max-width: 991px) {
  .tfd-hero-split {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .tfd-facts-bar-full {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
  }

  .tfd-bar-fact {
    flex: 1 1 200px !important;
    border-right: none !important;
  }

  .tfd-main-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* The rail collapses into the fixed bottom sheet — keep it in the layout
     (the booker card inside is position:fixed) but stop it reserving a
     sticky column and grid gap on mobile. */
  .tfd-booking-rail {
    display: contents;
  }

  .tfd-similar-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Mobile bottom bar active */
  .tfd-mobile-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 12px 20px;
    border-top: 1px solid var(--tf-border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
    z-index: 999;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  /* Once the footer is on screen the bar slides away, so it never covers the
     footer's bottom row. `pointer-events` keeps the invisible bar unclickable. */
  .tfd-mobile-bottom-bar.is-at-footer {
    transform: translateY(120%);
    opacity: 0;
    pointer-events: none;
  }

  .mobile-price-block {
    display: flex;
    align-items: baseline;
    gap: 4px;
  }

  .mobile-price-block .lbl {
    font-size: 12px;
    color: var(--tf-text-muted);
  }

  .mobile-price-block .val {
    font-size: 20px;
    font-weight: 800;
    color: var(--tf-text-main);
  }

  .mobile-price-block .unit {
    font-size: 11px;
    color: var(--tf-text-muted);
  }

  .mobile-reserve-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border-radius: var(--tf-radius);
    background: var(--tf-teal-gradient);
    color: #fff;
    border: none;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 84, 166, 0.3);
  }

  .tfd-sheet-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  .tfd-sheet-overlay.is-active {
    opacity: 1;
    pointer-events: auto;
  }

  .tfd-booker-card {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    border-radius: 20px 20px 0 0;
    box-shadow: var(--tf-shadow-sheet);
    z-index: 1001;
    max-height: 85vh;
    overflow-y: auto;
    padding: 12px 20px 24px;
    transform: translateY(105%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .tfd-booker-card.sheet-open {
    transform: translateY(0);
  }

  .tfd-sheet-handle-bar {
    display: flex;
    justify-content: center;
    padding: 6px 0 14px;
    cursor: pointer;
  }

  .tfd-sheet-handle {
    width: 40px;
    height: 4px;
    background: #cbd5e1;
    border-radius: 999px;
  }
}

@media (max-width: 768px) {
  .tfd-hero-title {
    font-size: 24px;
  }

  /* Booking calendar: keep the 7-column grid inside narrow viewports
     instead of forcing a horizontal scroll that reads as "broken". */
  .tfd-dategrid-cells,
  .tfd-dategrid-days-header {
    gap: 2px;
  }

  .tfd-day-cell {
    height: 34px;
    font-size: 12px;
  }

  .tfd-facts-bar-full {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 14px 18px !important;
  }

  .tfd-bar-fact {
    width: 100% !important;
    flex: none !important;
    border-right: none !important;
    padding: 6px 0 !important;
  }

  .tfd-bar-fact:not(:last-child) {
    border-bottom: 1px solid var(--tf-border) !important;
    padding-bottom: 10px !important;
  }

  .tfd-highlights-list,
  .tfd-inc-grid.two-cols,
  .tfd-meeting-operator-grid,
  .tfd-good-to-know-grid {
    grid-template-columns: 1fr;
  }

  .tfd-similar-grid {
    grid-template-columns: 1fr;
  }

}

/* ==================================================================
   Review block, hero column guards and similar-card fallback
   ------------------------------------------------------------------
   The review summary/feed classes had no styles at all, so the section
   rendered as unstyled divs the moment a tour had real reviews. The
   gallery/info wrappers were also missing their min-width guard, which
   lets a wide photo push the hero grid past its column.
   ================================================================== */

.tfd-hero-info-content,
.tfd-booker-wrapper,
.tfd-gallery-wrap,
.tfd-hero-gallery-wrap {
  min-width: 0;
}

/* Branded tile for a similar tour without a photo (no stock stand-ins) */
.tfd-sim-img-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 170px;
  color: rgba(255, 255, 255, 0.9);
  background-image:
    radial-gradient(circle at 76% 16%, rgba(96, 165, 250, 0.3), transparent 58%),
    linear-gradient(135deg, #0054A6 0%, #003D7A 100%);
}

.tfd-sim-img-fallback i {
  font-size: 30px;
  opacity: 0.9;
}

/* ── Review summary ── */
.tfd-reviews-summary {
  display: grid;
  grid-template-columns: minmax(180px, 220px) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 20px 0 4px;
  border-bottom: 1px solid var(--tf-border, #E8EDF3);
  margin-bottom: 22px;
}

.tfd-score-box {
  text-align: center;
  padding: 18px 16px;
  border-radius: 14px;
  background: var(--primary-light, #E8F0FA);
  border: 1px solid var(--primary-soft, #D0E1F5);
}

.tfd-score-box .score-num {
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: var(--primary, #0054A6);
}

.tfd-score-box .score-stars {
  display: flex;
  justify-content: center;
  gap: 3px;
  margin: 8px 0 6px;
  color: var(--warning, #F59E0B);
  font-size: 12px;
}

.tfd-score-box .score-sub {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary, #64748B);
}

/* Rating distribution */
.tfd-dist-bars {
  display: grid;
  gap: 8px;
}

.tfd-dist-bars .dist-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 32px;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-secondary, #64748B);
}

.tfd-dist-bars .dist-label {
  font-weight: 700;
  color: var(--text-primary, #0F172A);
}

.tfd-dist-bars .dist-track {
  height: 8px;
  border-radius: 999px;
  background: #EEF2F6;
  overflow: hidden;
}

.tfd-dist-bars .dist-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0054A6, #004488);
}

.tfd-dist-bars .dist-count {
  text-align: right;
  font-weight: 700;
  color: var(--text-primary, #0F172A);
}

/* ── Review feed ── */
.tfd-reviews-feed {
  display: grid;
  gap: 14px;
}

.tfd-review-card {
  padding: 18px 20px;
  border: 1px solid var(--tf-border, #E8EDF3);
  border-radius: 14px;
  background: #fff;
}

.tfd-review-card .reviewer-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tfd-review-card .reviewer-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-light, #E8F0FA);
  color: var(--primary, #0054A6);
  font-weight: 800;
  font-size: 15px;
}

.tfd-review-card .reviewer-info {
  min-width: 0;
  flex: 1;
}

.tfd-review-card .reviewer-name {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-primary, #0F172A);
}

.tfd-review-card .reviewer-date {
  font-size: 12px;
  color: var(--text-tertiary, #94A3B8);
}

.tfd-review-card .reviewer-rating {
  display: flex;
  gap: 2px;
  color: var(--warning, #F59E0B);
  font-size: 12px;
}

.tfd-review-card .reviewer-rating .empty,
.tfd-score-box .score-stars .empty {
  color: #E2E8F0;
}

.tfd-review-card .review-body {
  margin: 12px 0 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-secondary, #475569);
}

@media (max-width: 768px) {
  .tfd-reviews-summary {
    grid-template-columns: 1fr;
  }
}

/* Branded 48px stand-in for the booker thumbnail when the tour has no photo */
.tfd-booker-thumb--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  background-image: linear-gradient(135deg, #0054A6 0%, #003D7A 100%);
}

/* ── Space for the fixed mobile reserve bar ────────────────────────────────
   At ≤991px .tfd-mobile-bottom-bar is position:fixed and 63px tall, so the
   last 63px of the document sat permanently behind it — the footer's bottom
   row could never be scrolled into view. Grow the footer's own padding so its
   dark background fills the gap (padding on <body> would leave a bare band
   underneath the footer instead). */
@media (max-width: 991px) {
  body.tfd-body .site-footer {
    padding-bottom: 88px;
  }
}
/* ══════════════════════════════════════════════════════════════════════════
   "Choose your departure" — departure cards in the main content column.
   Clicking a card drives the same Alpine state the sticky booker reads, so
   the two stay in sync without any event plumbing.
   ══════════════════════════════════════════════════════════════════════════ */
.tfd-dep-lead {
  font-size: 13.5px;
  color: var(--tf-text-muted);
  margin: -6px 0 16px;
  line-height: 1.5;
}

.tfd-dep-months {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.tfd-dep-month {
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  padding: 7px 14px;
  border-radius: var(--tf-radius-sm);
  border: 1px solid var(--tf-border);
  background: #fff;
  color: var(--tf-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.tfd-dep-month:hover {
  border-color: var(--tf-teal-border);
  color: var(--tf-teal-primary);
}

.tfd-dep-month.is-active {
  background: var(--tf-teal-primary);
  border-color: var(--tf-teal-primary);
  color: #fff;
}

.tfd-dep-grid {
  display: grid;
  /* min() so the track can fall below 220px on a narrow phone instead of
     forcing a 220px column into the viewport. */
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 12px;
}

.tfd-dep-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius);
  padding: 16px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.tfd-dep-card:hover {
  border-color: var(--tf-teal-border);
  box-shadow: 0 4px 14px rgba(0, 84, 166, 0.08);
}

.tfd-dep-card:focus-visible {
  outline: 2px solid var(--tf-teal-primary);
  outline-offset: 2px;
}

/* 2px border is deliberate here: it marks the chosen departure and keeps the
   card the same overall size by borrowing a pixel from its padding. */
.tfd-dep-card.is-selected {
  border: 2px solid var(--tf-teal-primary);
  padding: 15px;
  background: #FAFCFF;
}

.tfd-dep-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 999px;
}

.tfd-dep-badge.is-hot { background: #FAECE7; color: #993C1D; }
.tfd-dep-badge.is-new { background: var(--tf-teal-light); color: var(--tf-teal-dark); }

.tfd-dep-daterow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.tfd-dep-daynum {
  font-size: 28px;
  font-weight: 800;
  color: var(--tf-text-main);
  line-height: 1;
}

.tfd-dep-dayinfo {
  display: flex;
  flex-direction: column;
  font-size: 12.5px;
  color: var(--tf-text-muted);
  line-height: 1.35;
  min-width: 0;
}

.tfd-dep-dayinfo strong {
  color: var(--tf-text-main);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}

.tfd-dep-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--tf-text-muted);
}

.tfd-dep-meta i {
  color: var(--tf-teal-primary);
  font-size: 11px;
}

.tfd-dep-bar {
  height: 5px;
  background: var(--tf-border-subtle);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}

.tfd-dep-bar > span {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--tf-teal-primary);
  transition: width 0.25s ease;
}

/* Amber once the departure is more than ~70% booked. */
.tfd-dep-bar > span.is-tight { background: #d97706; }

.tfd-dep-seats {
  font-size: 11.5px;
  color: var(--tf-text-light);
}

.tfd-dep-pricerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--tf-border-subtle);
}

.tfd-dep-price {
  font-size: 18px;
  font-weight: 800;
  color: var(--tf-text-main);
}

.tfd-dep-unit {
  font-size: 12px;
  color: var(--tf-text-muted);
}

.tfd-dep-select {
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  color: var(--tf-teal-primary);
  background: #fff;
  border: 1px solid var(--tf-teal-primary);
  border-radius: var(--tf-radius-sm);
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.tfd-dep-select:hover { background: var(--tf-teal-light); }
.tfd-dep-select.is-on { background: var(--tf-teal-primary); color: #fff; }

.tfd-dep-empty {
  font-size: 13px;
  color: var(--tf-text-muted);
  margin: 0;
}

/* ── Sold-out departures + waitlist ──────────────────────────────────────────
   A full date used to disappear from the list entirely. It now stays visible
   under this block with a "Notify me" form instead. */
.tfd-dep-waitlist {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--tf-border, #e2e8f0);
}

.tfd-dep-waitlist-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tf-text-dark, #0f172a);
  margin-bottom: 12px;
}

.tfd-dep-waitlist-head i { color: var(--tf-teal-primary, #0054A6); }

.tfd-dep-waitlist-flash {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--tf-teal-light, #E8F0FA);
  color: var(--tf-teal-primary, #0054A6);
  font-size: 13px;
  font-weight: 600;
}

.tfd-dep-waitlist-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--tf-border, #e2e8f0);
  border-radius: 10px;
  background: #f8fafc;
}

.tfd-dep-waitlist-date {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 200px;
  min-width: 0;
  font-size: 13px;
  color: var(--tf-text-dark, #0f172a);
}

.tfd-dep-waitlist-date span { color: var(--tf-text-muted, #64748b); }

.tfd-dep-waitlist-tag {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 2px 7px;
  border-radius: 999px;
  background: #fee2e2;
  color: #b91c1c;
}

.tfd-dep-waitlist-row input {
  flex: 1 1 140px;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--tf-border, #e2e8f0);
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
}

.tfd-dep-waitlist-row input:focus {
  outline: none;
  border-color: var(--tf-teal-primary, #0054A6);
  box-shadow: 0 0 0 2px rgba(0, 84, 166, .15);
}

.tfd-dep-waitlist-row button {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 16px;
  border: none;
  border-radius: 8px;
  background: var(--tf-teal-primary, #0054A6);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.tfd-dep-waitlist-row button:hover { background: #004488; }

@media (max-width: 640px) {
  .tfd-dep-daynum { font-size: 24px; }
  .tfd-dep-card { padding: 14px; }
  .tfd-dep-card.is-selected { padding: 13px; }
  .tfd-dep-waitlist-row input,
  .tfd-dep-waitlist-row button { flex: 1 1 100%; width: 100%; }
}

/* ========================================================
   TOUR DETAILS 2.0 ENHANCEMENTS — ULTRA-PREMIUM UI
   ======================================================== */

.tfd-badge-count {
  font-size: 12px;
  font-weight: 700;
  color: #0054A6;
  background: #E8F0FA;
  padding: 2.5px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  border: 1px solid rgba(0, 84, 166, 0.15);
}

/* ── Itinerary Timeline ── */
.tfd-itinerary-toggle-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  font-size: 12px;
  font-weight: 700;
  color: #0054A6;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tfd-itinerary-toggle-all:hover {
  background: #E8F0FA;
  border-color: #0054A6;
}

.tfd-itinerary-item {
  display: flex;
  gap: 16px;
  position: relative;
  margin-bottom: 0;
  padding-bottom: 4px;
}

.tfd-itinerary-pin-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 36px;
  flex-shrink: 0;
}

.tfd-itinerary-pin {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #ffffff;
  border: 2.5px solid #0054A6;
  color: #0054A6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(0, 84, 166, 0.15);
  z-index: 2;
  transition: all 0.2s ease;
}

.tfd-itinerary-pin.is-active,
.tfd-itinerary-item.is-open .tfd-itinerary-pin {
  background: linear-gradient(135deg, #0054A6 0%, #003D7A 100%) !important;
  color: #ffffff !important;
  border-color: #0054A6 !important;
  box-shadow: 0 4px 14px rgba(0, 84, 166, 0.35) !important;
  transform: scale(1.06);
}

.tfd-itinerary-line {
  width: 2px;
  flex: 1;
  min-height: 24px;
  background: linear-gradient(180deg, #0054A6 0%, #cbd5e1 100%);
  margin: 4px 0;
}

.tfd-itinerary-content {
  flex: 1;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
  transition: all 0.2s ease;
}

.tfd-itinerary-item.is-open .tfd-itinerary-content {
  border-color: rgba(0, 84, 166, 0.35);
  box-shadow: 0 4px 16px rgba(0, 84, 166, 0.06);
}

.tfd-itinerary-header .chevron i.rotated {
  transform: rotate(180deg);
}

.tfd-itinerary-header .chevron i {
  transition: transform 0.25s ease;
}

.tfd-itinerary-content .step-desc {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #e2e8f0;
  font-size: 13.5px;
  line-height: 1.65;
  color: #475569;
}

.tfd-itinerary-content .step-desc p {
  margin: 0;
}

/* ── FAQ Accordion ── */
.tfd-faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tfd-faq-item {
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
  transition: all 0.2s ease;
}

.tfd-faq-item.is-open {
  border-color: rgba(0, 84, 166, 0.4);
  border-left: 4px solid #0054A6;
  box-shadow: 0 4px 16px rgba(0, 84, 166, 0.05);
}

.tfd-faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 14px;
}

.tfd-faq-q-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.tfd-faq-q-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #E8F0FA;
  color: #0054A6;
  font-size: 11.5px;
  font-weight: 800;
  flex-shrink: 0;
}

.tfd-faq-q-text {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.4;
}

.tfd-faq-chevron-wrap {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  font-size: 11px;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.tfd-faq-item.is-open .tfd-faq-chevron-wrap {
  background: #E8F0FA;
  color: #0054A6;
}

.tfd-faq-chevron-wrap i {
  transition: transform 0.25s ease;
}

.tfd-faq-chevron-wrap i.rotated {
  transform: rotate(180deg);
}

.tfd-faq-answer {
  background: #FAFCFF;
  border-top: 1px solid #f1f5f9;
}

.tfd-faq-answer-inner {
  padding: 14px 20px 18px 60px;
  font-size: 14px;
  color: #475569;
  line-height: 1.65;
}

.tfd-faq-answer-inner p {
  margin: 0;
}

/* ── FAQ Ask Operator Box ── */
.tfd-faq-ask-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 24px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #eff6ff 0%, #E8F0FA 100%);
  border: 1px solid #D0E1F5;
  border-radius: 14px;
}

.tfd-faq-ask-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tfd-faq-ask-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #0054A6;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(0, 84, 166, 0.25);
}

.tfd-faq-ask-title {
  font-size: 14.5px;
  font-weight: 800;
  color: #0f172a;
  display: block;
}

.tfd-faq-ask-desc {
  font-size: 12.5px;
  color: #475569;
  margin: 3px 0 0;
}

.tfd-faq-ask-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 0;
  border-radius: 10px;
  background: #0054A6;
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 84, 166, 0.2);
}

.tfd-faq-ask-btn:hover {
  background: #004488;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 84, 166, 0.35);
  color: #ffffff;
}

/* ── Ask a Question Modal ── */
.tfd-inq-overlay {
  position: fixed;
  inset: 0;
  /* Above the site header (999998 in home.css). Same level as the gallery
     lightbox — the two are never open together. */
  z-index: 99999999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  background: rgba(6, 10, 20, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.tfd-inq-dialog {
  width: 100%;
  max-width: 620px;
  margin: auto;
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.5);
}

.tfd-inq-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--tf-border-subtle, #f1f5f9);
}

.tfd-inq-title {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--tf-text-main, #0f172a);
}

.tfd-inq-sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--tf-text-body, #334155);
}

.tfd-inq-close {
  border: 0;
  background: none;
  padding: 0 4px;
  font-size: 26px;
  line-height: 1;
  color: var(--tf-text-light, #94a3b8);
  cursor: pointer;
  transition: color 0.2s ease;
}

.tfd-inq-close:hover {
  color: var(--tf-text-main, #0f172a);
}

.tfd-inq-body {
  padding: 22px 24px 24px;
}

.tfd-inq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

.tfd-inq-field {
  margin-bottom: 16px;
}

.tfd-inq-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--tf-text-main, #0f172a);
}

.tfd-inq-req {
  color: #dc2626;
}

.tfd-inq-input,
.tfd-inq-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  color: var(--tf-text-main, #0f172a);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tfd-inq-input:focus,
.tfd-inq-textarea:focus {
  border-color: #0054A6;
  box-shadow: 0 0 0 3px rgba(0, 84, 166, 0.12);
}

.tfd-inq-textarea {
  min-height: 120px;
  resize: vertical;
}

.tfd-inq-help {
  margin-top: 6px;
  font-size: 12px;
  color: var(--tf-text-muted, #64748b);
}

.tfd-inq-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  background: #eff6ff;
  border: 1px solid #D0E1F5;
  border-radius: 10px;
}

.tfd-inq-note i {
  margin-top: 2px;
  color: #0054A6;
}

.tfd-inq-note p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--tf-text-body, #334155);
}

.tfd-inq-error {
  padding: 10px 14px;
  margin-bottom: 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  font-size: 13px;
  color: #dc2626;
}

.tfd-inq-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 18px;
  border: 0;
  border-radius: 10px;
  background: #0054A6;
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}

.tfd-inq-submit:hover:not(:disabled) {
  background: #004488;
}

.tfd-inq-submit:disabled {
  background: #cbd5e1;
  color: #64748b;
  cursor: not-allowed;
}

.tfd-inq-alt {
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--tf-text-muted, #64748b);
  text-align: center;
}

.tfd-inq-alt a {
  color: #0054A6;
  font-weight: 700;
}

.tfd-inq-done {
  padding: 20px 4px 8px;
  text-align: center;
}

.tfd-inq-done-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: #e8f7ee;
  color: #16a34a;
  font-size: 22px;
}

.tfd-inq-done h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  color: var(--tf-text-main, #0f172a);
}

.tfd-inq-done p {
  margin: 0 0 20px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tf-text-body, #334155);
}

.tfd-inq-alt-btn {
  padding: 10px 24px;
  border: 1px solid #0054A6;
  border-radius: 10px;
  background: #ffffff;
  color: #0054A6;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tfd-inq-alt-btn:hover {
  background: #0054A6;
  color: #ffffff;
}

/* ── Good to Know Cards ── */
.tfd-good-to-know-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.tfd-gtk-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  transition: all 0.15s ease;
}

.tfd-gtk-item:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

.tfd-gtk-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #E8F0FA;
  color: #0054A6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.tfd-gtk-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tfd-gtk-text strong {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.tfd-gtk-text span {
  font-size: 12px;
  color: #64748b;
  line-height: 1.45;
}

/* ── Booker CTA Reassurance & Map Overlay ── */
.tfd-booker-cta-subtext {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11.5px;
  color: #64748b;
  font-weight: 500;
  margin-top: 10px;
}

.tfd-booker-cta-subtext i {
  font-size: 10px;
  color: #0054A6;
}

.tfd-map-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  margin-top: 16px;
}

.tfd-map-overlay-chip {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 400;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.08);
  font-size: 11.5px;
  font-weight: 700;
  color: #0054A6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.tfd-view-map-btn {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 400;
  background: #ffffff;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.tfd-view-map-btn:hover {
  background: #0054A6;
  color: #ffffff;
  border-color: #0054A6;
}

@media (max-width: 768px) {
  .tfd-good-to-know-grid {
    grid-template-columns: 1fr;
  }
  .tfd-faq-ask-box {
    flex-direction: column;
    align-items: flex-start;
  }
  .tfd-faq-answer-inner {
    padding-left: 20px;
  }
  .tfd-inq-overlay {
    padding: 16px 12px;
  }
  .tfd-inq-grid {
    grid-template-columns: 1fr;
  }
  .tfd-inq-body {
    padding: 18px 18px 20px;
  }
  .tfd-inq-head {
    padding: 16px 18px;
  }
}

/* ── Phone refinements (≤640px / ≤480px / ≤380px) ──────────────────────────
   Measured on the live page at 320–480px: the two card headers that carry a
   trailing control (FAQ "Quick answers for guests", itinerary "Expand all")
   squeezed the heading into a ~95px column and pushed that control 4–17px past
   the card's right edge. Both headers are a flex row with
   `justify-content: space-between`, and neither child may shrink below its
   min-content width — so the title wrapped one word per line while the trailing
   control spilled outside the card and was clipped. Everything below is scoped
   to the phone range so tablet and desktop layout are untouched. */

/* Any width: a header that cannot fit its title AND its trailing control must
   wrap onto a second line instead of spilling outside the card. */
.tfd-card-header {
  flex-wrap: wrap;
  row-gap: 8px;
}

.tfd-card-header > * {
  min-width: 0;
}

@media (max-width: 640px) {
  /* 24px gutters left ~222px of content on a 320px screen. */
  .tfd-container,
  .tfd-hero-container {
    padding: 0 16px;
  }

  .tfd-card {
    padding: 18px 16px;
    border-radius: 14px;
  }

  .tfd-card-title {
    font-size: 16.5px;
  }

  /* Heading + count pill rows wrap instead of crushing the heading. */
  .tfd-card-header > div > div {
    min-width: 0;
    flex-wrap: wrap;
  }

  /* Legibility: these sat at 10–10.5px on a phone. */
  .tfd-dep-badge {
    font-size: 11px;
  }

  .tfd-input-box .input-lbl {
    font-size: 11.5px;
  }

  /* Touch targets: the departure month chips and Select buttons measured 31px
     tall, the FAQ "Helpful" button 20px — under the 36px a fingertip needs. */
  .tfd-dep-month,
  .tfd-dep-select,
  .tfd-view-all-btn,
  .tfd-itinerary-toggle-all,
  .tfd-qa-helpful,
  .tfd-readmore-btn {
    min-height: 38px;
  }

  .tfd-dep-month,
  .tfd-dep-select {
    padding: 9px 16px;
  }

  .tfd-facts-bar-full {
    padding: 14px 16px;
    margin: 14px 0 22px;
  }
}

@media (max-width: 480px) {
  /* The header splits in two: icon + title on the first line, trailing control
     on the next. Neither is squeezed and neither leaves the card. */
  .tfd-faq-card .tfd-card-header,
  .tfd-itinerary-card .tfd-card-header {
    row-gap: 10px;
  }

  .tfd-faq-card .tfd-card-header > div:first-child,
  .tfd-itinerary-card .tfd-card-header > div:first-child {
    flex: 1 1 100%;
    min-width: 0;
  }

  .tfd-faq-card .tfd-card-header > div:first-child > div,
  .tfd-itinerary-card .tfd-card-header > div:first-child > div {
    min-width: 0;
  }

  .tfd-card {
    padding: 16px 14px;
  }

  .tfd-card-title {
    font-size: 16px;
  }

  .tfd-hero-title {
    font-size: 21px;
  }
}

@media (max-width: 380px) {
  .tfd-container,
  .tfd-hero-container {
    padding: 0 14px;
  }

  .tfd-card {
    padding: 15px 13px;
  }
}

/* A long place name ("Sultanahmet Square, Istanbul") is one unbreakable word
   inside a narrow feature card; without this it paints outside the card. */
.tfd-feature-card .tfd-feat-text span {
  overflow-wrap: anywhere;
}