/* =======================================================
   TRIPFLORIC EVENT DETAILS
   Page-scoped additions on top of the shared tour-details
   shell (tour-details.css). Only rules that are either
   specific to ticket selling or that correct a shared class
   for this page live here — the hero, facts bar, cards,
   gallery and section grid all come from tour-details.css so
   the two detail pages stay identical. The photo modal is the
   exception: it uses the hotel-detail panel layout (header,
   gallery overview, info column) rather than the tour page's
   full-bleed dark lightbox.
   ======================================================= */

/* ── Facts bar: the shared rule hard-codes 4 columns, but an event
      can legitimately have 2 or 3 facts. auto-fit keeps them evenly
      distributed instead of leaving a hole on the right. ── */
.tfd-facts-bar-full {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}

/* ── Hero extras ── */
.tfd-category-pill--accent {
  background: #fff4e5;
  color: #b45309;
}

.tfd-hero-summary {
  font-size: 15px;
  color: #0054A6;
  line-height: 1.55;
  max-width: 52ch;
  margin-top: 10px;
}

/* ── Good to Know item text (shared rule styles the icon only) ── */
.tfd-gtk-item strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--tf-text-main);
  margin-bottom: 2px;
}

.tfd-gtk-item span {
  display: block;
  font-size: 13px;
  color: var(--tf-text-muted);
  line-height: 1.5;
}

/* ── Schedule rows: the shared itinerary rules give .step-location icons a
      size that renders the glyphs as near-solid blocks. Give them a legible
      size/colour and separate the doors and seat counters. ── */
.step-location {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 12.5px;
}

.step-location span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.step-location i {
  font-size: 11px;
  color: var(--tf-teal-primary);
  width: 12px;
  text-align: center;
}

/* ── Venue card link ── */
.tfd-mo-link {
  color: var(--tf-teal-primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Date & time picker: one full-width field instead of the two-column
      traveller/date row the tour booker uses. ── */
.tfd-input-box--full {
  grid-column: 1 / -1;
}

.tfd-input-box--full .input-val-row {
  justify-content: flex-start;
}

.tfd-rail-price-note {
  display: block;
  font-size: 11.5px;
  color: var(--tf-text-light);
  margin-top: 2px;
}

/* ── Occurrence (date) panel ── */
.tfd-session-panel {
  max-height: 320px;
  overflow-y: auto;
}

.tfd-session-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.tfd-session-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius);
  background: #ffffff;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.tfd-session-chip:hover:not(:disabled) {
  border-color: var(--tf-teal-primary);
  background: #F5FAFE;
}

.tfd-session-chip.is-selected {
  border-color: var(--tf-teal-primary);
  background: var(--tf-teal-light);
  box-shadow: inset 0 0 0 1px var(--tf-teal-primary);
}

.tfd-session-chip.is-disabled,
.tfd-session-chip:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: #f8fafc;
}

.tfd-session-chip__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tfd-session-chip__main strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--tf-text-main);
}

.tfd-session-chip__main span {
  font-size: 12px;
  color: var(--tf-text-muted);
}

.tfd-session-chip__flag {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 999px;
  background: #F1F7FD;
  color: var(--tf-teal-primary);
  white-space: nowrap;
}

.tfd-session-chip__flag.is-low {
  background: #fff4e5;
  color: #b45309;
}

.tfd-session-chip__flag.is-off {
  background: #fdecec;
  color: #b91c1c;
}

/* Same flag used in the schedule list */
.tfd-session-flag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
}

.tfd-session-flag.is-off {
  background: #fdecec;
  color: #b91c1c;
}

/* ── Schedule row action ──
      Each selectable date in the timeline carries its own way into the ticket
      rail, so picking a date there does not mean hunting for the rail and
      picking it a second time. ── */
.tfd-session-book {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 16px;
  border: 1px solid var(--tf-teal-border);
  border-radius: var(--tf-radius-sm);
  background: var(--tf-teal-light);
  color: var(--tf-teal-dark);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.tfd-session-book i {
  font-size: 12px;
}

/* The trailing arrow only nudges on hover — no layout shift. */
.tfd-session-book i:last-child {
  transition: transform 0.15s;
}

.tfd-session-book:hover {
  background: var(--tf-teal-primary);
  border-color: var(--tf-teal-primary);
  color: #fff;
}

.tfd-session-book:hover i:last-child {
  transform: translateX(3px);
}

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

/* Replaces the action when the date cannot be booked. */
.tfd-session-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--tf-text-muted);
}

/* ── Ticket tiers ── */
.tfd-tier-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}

.tfd-tier-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--tf-border);
  border-radius: var(--tf-radius);
  background: #ffffff;
}

.tfd-tier-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

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

.tfd-tier-desc {
  font-size: 12px;
  color: var(--tf-text-muted);
  overflow-wrap: anywhere;
}

.tfd-tier-stock {
  font-size: 11px;
  font-weight: 600;
  color: var(--tf-text-light);
  margin-top: 3px;
}

.tfd-tier-stock.is-low {
  color: #b45309;
}

.tfd-tier-buy {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.tfd-tier-price {
  font-size: 14px;
  font-weight: 800;
  color: var(--tf-teal-primary);
  white-space: nowrap;
}

/* Pre-sale price, kept visible so the blanket discount is honest. */
.tfd-tier-was {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--tf-text-light);
  margin-right: 5px;
}

.tfd-tier-empty {
  text-align: center;
  padding: 26px 16px;
  border: 1px dashed var(--tf-border);
  border-radius: var(--tf-radius);
  color: var(--tf-text-muted);
}

.tfd-tier-empty i {
  font-size: 22px;
  opacity: 0.4;
  display: block;
  margin-bottom: 8px;
}

.tfd-tier-empty p {
  font-weight: 700;
  color: var(--tf-text-body);
  margin-bottom: 2px;
}

.tfd-tier-empty span {
  font-size: 12.5px;
}

/* ── Total + selection note ── */
.tfd-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0 6px;
  border-top: 1px solid var(--tf-border-subtle);
}

.tfd-total-label {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tf-text-muted);
}

.tfd-total-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--tf-text-main);
}

.tfd-total-note {
  font-size: 12px;
  color: var(--tf-text-light);
  margin-bottom: 12px;
}

/* ── Guest reviews ── */
.tfd-ev-reviews-summary {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--tf-border-subtle);
}

.tfd-ev-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.tfd-ev-score .score {
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  color: var(--tf-teal-primary);
}

.tfd-ev-score-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  color: var(--tf-text-muted);
}

.tfd-ev-stars {
  display: inline-flex;
  gap: 2px;
}

.tfd-ev-stars i {
  font-size: 12px;
  color: #d8dee6;
}

.tfd-ev-stars i.is-on {
  color: #f0a500;
}

.tfd-ev-dist {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tfd-ev-dist-row {
  display: grid;
  grid-template-columns: 32px 1fr 34px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--tf-text-muted);
}

.dist-bar {
  height: 7px;
  border-radius: 999px;
  background: #eef2f6;
  overflow: hidden;
}

.dist-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--tf-teal-primary);
}

.dist-count {
  text-align: right;
}

.tfd-ev-reviews-feed {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tfd-ev-review {
  padding: 16px 18px;
  border: 1px solid var(--tf-border-subtle);
  border-radius: var(--tf-radius);
  background: #FAFCFF;
}

.tfd-ev-review-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

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

.tfd-ev-review-head strong {
  display: block;
  font-size: 13.5px;
  color: var(--tf-text-main);
}

.tfd-ev-review-date {
  margin-left: auto;
  font-size: 12px;
  color: var(--tf-text-light);
}

.tfd-ev-review h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--tf-text-main);
  margin-bottom: 4px;
}

.tfd-ev-review p {
  font-size: 13.5px;
  color: var(--tf-text-body);
  line-height: 1.6;
}

.tfd-ev-review-reply {
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--tf-teal-primary);
  background: #ffffff;
  border-radius: 0 var(--tf-radius-sm) var(--tf-radius-sm) 0;
}

.tfd-ev-review-reply strong {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--tf-teal-primary);
  margin-bottom: 3px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .tfd-ev-reviews-summary {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .tfd-ev-score {
    flex-direction: row;
    justify-content: flex-start;
    gap: 14px;
  }

  .tfd-ev-score .score {
    font-size: 32px;
  }

  .tfd-ev-score-meta {
    align-items: flex-start;
  }
}/* The photo modal lives in tour-details.css — both detail pages load that sheet. */

@media (max-width: 640px) {
  .tfd-good-to-know-grid {
    grid-template-columns: 1fr;
  }

  .tfd-tier-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .tfd-tier-buy {
    width: 100%;
    justify-content: space-between;
  }

  .tfd-hero-summary {
    font-size: 14px;
  }
}
/* ══ Share row (hero) ══════════════════════════════════════════════════════
   Sits under the wishlist heart. Native share sheet on mobile, copy-to-
   clipboard elsewhere; the network links work with or without JavaScript. */
.tfd-share-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 4px 0 12px;
}

.tfd-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  min-width: 40px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #475569;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.tfd-share-btn:hover {
  color: #0054A6;
  border-color: #0054A6;
  transform: translateY(-1px);
}

.tfd-share-btn--primary {
  color: #ffffff;
  border-color: transparent;
  background: linear-gradient(135deg, #0054A6 0%, #004488 100%);
}

.tfd-share-btn--primary:hover {
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(0, 84, 166, 0.3);
}

@media (max-width: 575px) {
  .tfd-share-btn { height: 36px; padding: 0 10px; font-size: 12px; }
}

/* ══ Review invitation ═════════════════════════════════════════════════════
   Shown to a guest with a completed booking for this event (see
   ReviewEligibility::forListing). Sits above the review feed so it is the
   first thing they read in the section. */
.tfd-ev-review-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid #E8F0FA;
  border-radius: var(--tf-radius-sm, 10px);
  background: #F1F7FD;
}

.tfd-ev-review-cta-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tfd-ev-review-cta-text strong {
  font-size: 14px;
  color: var(--tf-text-main, #1e293b);
}

.tfd-ev-review-cta-text span {
  font-size: 13px;
  color: var(--tf-text-body, #64748b);
}

.tfd-ev-review-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  height: 40px;
  padding: 0 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  background: linear-gradient(135deg, #0054A6 0%, #004488 100%);
  transition: all 0.2s;
}

.tfd-ev-review-cta-btn:hover {
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 84, 166, 0.3);
}

@media (max-width: 640px) {
  .tfd-ev-review-cta-btn { width: 100%; justify-content: center; }
}

/* ══ Luxury Event Enhancements (Hero, Schedule, Actions, Map) ══════════════ */
.tfd-category-pill--loc {
  background: rgba(0, 84, 166, 0.08);
  color: #0054A6;
  border: 1px solid rgba(0, 84, 166, 0.15);
}

.tfd-category-pill--policy {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.tfd-hero-rating-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 12px 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0, 84, 166, 0.1);
}

.tfd-hero-meta-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tfd-hero-rating {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tfd-hero-rating .score {
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
}

.tfd-hero-rating .count {
  font-size: 13px;
  color: #64748b;
}

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

.meta-sep {
  color: #cbd5e1;
}

.tfd-action-bar-hero {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tfd-share-pill-group {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  padding: 4px 8px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.tfd-share-pill-group .share-lbl {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  margin-left: 4px;
  margin-right: 2px;
}

.tfd-social-btn {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tfd-social-btn.wa {
  background: #f0fdf4;
  color: #16a34a;
}

.tfd-social-btn.wa:hover {
  background: #dcfce7;
}

.tfd-social-btn.fb {
  background: #eff6ff;
  color: #2563eb;
}

.tfd-social-btn.fb:hover {
  background: #dbeafe;
}

.tfd-social-btn.copy {
  background: #f8fafc;
  color: #475569;
}

.tfd-social-btn.copy:hover {
  background: #e2e8f0;
}

/* Schedule Session VIP Badge Cards */
.tfd-ev-sessions-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}

.tfd-session-badge-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.tfd-session-badge-card:hover {
  border-color: #0054A6;
  box-shadow: 0 6px 20px rgba(0, 84, 166, 0.08);
  transform: translateY(-1px);
}

.tfd-session-badge-card.is-bookable {
  border-left: 4px solid #0054A6;
}

.tfd-session-cal-block {
  width: 68px;
  height: 72px;
  flex-shrink: 0;
  background: linear-gradient(180deg, #eff6ff 0%, #E8F0FA 100%);
  border: 1px solid #D0E1F5;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.tfd-session-cal-block .cal-day {
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  color: #0054A6;
}

.tfd-session-cal-block .cal-month {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #047857;
  margin-top: 3px;
}

.tfd-session-cal-block .cal-dow {
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
}

.tfd-session-details {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tfd-session-time-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tfd-session-time-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 3px 10px;
  border-radius: 6px;
}

.tfd-session-doors-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  padding: 3px 8px;
  border-radius: 6px;
}

.tfd-session-long-title {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  line-height: 1.35;
}

.tfd-session-desc-note {
  font-size: 13px;
  color: #64748b;
  margin: 0;
  line-height: 1.45;
}

.tfd-session-select-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding: 10px 18px;
  border-radius: 10px;
  background: #0054A6;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 2px 8px rgba(0, 84, 166, 0.2);
}

.tfd-session-select-btn:hover {
  background: #004488;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 84, 166, 0.3);
}

.tfd-session-select-btn.is-selected {
  background: #004488;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Sticky Booker Reassurance Subtext */
.tfd-booker-cta-subtext {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: #047857;
  text-align: center;
}

/* Map Overlay Chip */
.tfd-map-overlay-chip {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #0f172a;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

@media (max-width: 640px) {
  .tfd-session-badge-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .tfd-session-select-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ══ Curated "You Might Also Like" Event Cards ═════════════════════════════ */
.tfd-similar-section {
  padding-top: 48px;
  margin-top: 40px;
  border-top: 1px solid #e2e8f0;
  margin-bottom: 30px;
}

.tfd-similar-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.tfd-similar-header-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tfd-similar-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0054A6;
}

.tfd-similar-eyebrow i {
  color: #0054A6;
}

.tfd-similar-title {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.25;
}

.tfd-similar-subtitle {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}

.tfd-similar-view-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #0054A6;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.tfd-similar-view-all:hover {
  background: #0054A6;
  border-color: #0054A6;
  color: #ffffff;
  transform: translateX(2px);
}

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

.tfd-sim-card-wrap {
  display: flex;
  min-width: 0;
}

.tfd-sim-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  position: relative;
}

.tfd-sim-card:hover {
  transform: translateY(-5px);
  border-color: #0054A6;
  box-shadow: 0 16px 32px rgba(0, 84, 166, 0.12);
}

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

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

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

.tfd-sim-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, transparent 40%, rgba(0,0,0,0.25) 100%);
  pointer-events: none;
}

.tfd-sim-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  max-width: calc(100% - 56px);
}

.tfd-sim-cat-pill {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(226, 232, 240, 0.85);
  padding: 2.5px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  color: #0054A6;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
  letter-spacing: 0.01em;
  line-height: 1.25;
}

.tfd-sim-img-wrap > .tfd-sim-cat-pill {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}

.tfd-sim-cat-pill i {
  font-size: 9px;
  color: #0054A6;
}

.tfd-sim-heart-wrap {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
}

.tfd-sim-heart-wrap .bk-card-heart {
  position: static !important;
  margin: 0 !important;
}

.tfd-sim-feat-tag {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(254, 243, 199, 0.95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(253, 230, 138, 0.9);
  color: #b45309;
  font-size: 10px;
  font-weight: 800;
  padding: 2.5px 7px;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.tfd-sim-img-wrap > .tfd-sim-feat-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}

.tfd-sim-feat-tag i {
  font-size: 8.5px;
  color: #d97706;
}

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

.tfd-sim-title {
  font-size: 15px;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 10px 0;
  line-height: 1.35;
  height: 40px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s ease;
}

.tfd-sim-card:hover .tfd-sim-title {
  color: #0054A6;
}

.tfd-sim-chips-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.tfd-sim-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
}

.tfd-sim-chip--date {
  background: #f0f9ff;
  border: 1px solid #e0f2fe;
  color: #0369a1;
}

.tfd-sim-chip--date i {
  color: #0284c7;
  font-size: 11px;
}

.tfd-sim-chip--loc {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  color: #475569;
}

.tfd-sim-chip--loc i {
  color: #0054A6;
  font-size: 10px;
}

.tfd-sim-proof-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  height: 22px;
}

.tfd-sim-rating {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
}

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

.tfd-sim-rating .rating-val {
  font-weight: 800;
  color: #0f172a;
}

.tfd-sim-rating .rating-count {
  font-size: 11px;
  color: #64748b;
}

.tfd-sim-rating.is-new {
  color: #64748b;
  font-weight: 600;
  font-size: 11.5px;
}

.tfd-sim-rating.is-new i {
  color: #94a3b8;
}

.tfd-sim-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #0054A6;
  background: #E8F0FA;
  padding: 2px 7px;
  border-radius: 999px;
}

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

.tfd-sim-price-block {
  display: flex;
  flex-direction: column;
}

.tfd-sim-price-block .price-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  line-height: 1;
  margin-bottom: 3px;
}

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

.tfd-sim-price-block .price-val {
  font-size: 16px;
  font-weight: 900;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.tfd-sim-price-block .price-val.is-free {
  color: #047857;
  font-size: 14.5px;
}

.tfd-sim-price-block .price-unit {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
}

.tfd-sim-arrow-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #f1f5f9;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.tfd-sim-card:hover .tfd-sim-arrow-btn {
  background: #0054A6;
  color: #ffffff;
  transform: translateX(2px);
}

@media (max-width: 1100px) {
  .tfd-similar-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .tfd-similar-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .tfd-similar-grid {
    grid-template-columns: 1fr;
  }
}

/* ══ Ticket quantity stepper ══════════════════════════════════════════════
   `.counter-ctrls` / `.ctrl-btn` / `.ctrl-val` had NO styles anywhere — the
   markup was shipping the browser's raw 8x20px default buttons next to the
   price on every tier row, which read as broken and was impossible to tap.
   These are real controls now: 34px targets on desktop, 44px on a phone. */
.counter-ctrls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.ctrl-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 9px;
  border: 1px solid var(--tf-border);
  background: #ffffff;
  color: var(--tf-teal-primary);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.ctrl-btn:hover:not(:disabled) {
  background: #eff6ff;
  border-color: var(--tf-teal-primary);
}

.ctrl-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ctrl-val {
  min-width: 24px;
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--tf-text-main);
}

/* ══ Touch refinements (≤991px) ══════════════════════════════════════════
   Everything at and below 991px is thumb territory — that is where this page
   swaps its booking rail for the fixed bottom sheet. Measured there: the share
   buttons rendered 30x30 and "Get Directions" 28px tall. */
@media (max-width: 991px) {
  .ctrl-btn {
    width: 44px;
    height: 44px;
    font-size: 17px;
    border-radius: 11px;
  }

  .tfd-social-btn {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    font-size: 14px;
  }

  .tfd-mo-val.tfd-mo-link {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
  }
}

/* ══ Phone refinements (≤640px) ══════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Price and stepper each get a full line inside the stacked tier row when
     they cannot share one. */
  .tfd-tier-buy {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .tfd-tier-price {
    font-size: 15px;
  }
}




/* ══ Universal Mobile Responsiveness & Anti-Overflow Guard ══ */
html,
body.tfd-body {
  overflow-x: clip !important;
  max-width: 100vw !important;
  width: 100% !important;
}

.tfd-container {
  width: 100%;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px;
  padding-right: 24px;
  box-sizing: border-box !important;
}

.tfd-hero-container,
.tfd-content-container {
  width: 100%;
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

.tfd-similar-section {
  width: 100%;
  box-sizing: border-box !important;
}

.tfd-similar-grid,
.tfd-sim-card-wrap,
.tfd-sim-card {
  box-sizing: border-box !important;
}

@media (max-width: 1024px) {
  .tfd-container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 640px) {
  .tfd-container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

@media (max-width: 768px) {
  .tfd-facts-bar-full {
    grid-template-columns: 1fr !important;
  }
  .tfd-meeting-operator-grid {
    grid-template-columns: 1fr !important;
  }
  .tfd-hero-split {
    flex-direction: column !important;
  }
  .tfd-main-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .tfd-similar-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .tfd-sim-card {
    width: 100% !important;
  }
  .tfd-hero-gallery-wrap,
  .tfd-hero-gallery-grid {
    width: 100% !important;
    max-width: 100% !important;
  }
}