/* Tour Detail Page — Luxury Visual Upgrade */
/* Scope: visual polish only. No layout changes, no JS, no booking logic touched. */

/* ============================================================
   1. HERO BANNER — richer gradient, tighter title
   ============================================================ */
.modern-tour-banner {
  min-height: 520px !important;
}
.modern-tour-banner .banner-overlay {
  background: linear-gradient(to bottom,
    rgba(13,27,42,0.15) 0%,
    rgba(13,27,42,0.50) 60%,
    rgba(13,27,42,0.82) 100%) !important;
}
.modern-tour-banner .banner-content h1 {
  font-size: clamp(1.75rem, 4vw, 2.75rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.35) !important;
}
/* Gold accent line under title */
.modern-tour-banner .banner-content h1::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  background: var(--luxury-accent, #C9A84C);
  border-radius: 2px;
  margin-top: 12px;
}
@media (max-width: 767px) {
  .modern-tour-banner {
    min-height: 340px !important;
  }
}

/* ============================================================
   2. PAGE BACKGROUND
   ============================================================ */
.bravo_detail_tour {
  background: #F4F6F9 !important;
}

/* ============================================================
   3. SECTION CARDS — luxury shell
   ============================================================ */
.tour-section .bg-white.rounded-4.border-light.shadow-4.px-30.py-30,
.tour-section .bg-white.px-30.py-30 {
  background: #FFFFFF !important;
  border: 1px solid rgba(201,168,76,0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 16px rgba(13,27,42,0.06), 0 1px 4px rgba(13,27,42,0.04) !important;
}
.tour-section .bg-white.rounded-4.border-light.shadow-4.px-30.py-30:hover,
.tour-section .bg-white.px-30.py-30:hover {
  box-shadow: 0 6px 24px rgba(13,27,42,0.10), 0 2px 8px rgba(13,27,42,0.06) !important;
  border-color: rgba(201,168,76,0.25) !important;
}

/* ============================================================
   4. SECTION HEADINGS — gold underline accent
   ============================================================ */
.tour-section h3.text-22 {
  color: var(--luxury-primary, #0D1B2A) !important;
  font-weight: 700 !important;
  font-size: 1.2rem !important;
  letter-spacing: -0.01em !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
  display: block !important;
  margin-bottom: 20px !important;
}
.tour-section h3.text-22::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: var(--luxury-accent, #C9A84C);
  border-radius: 2px;
  margin-top: 8px;
}

/* ============================================================
   5. SIDEBAR NAV — luxury pill style
   ============================================================ */
.tour-sidebar {
  background: #FFFFFF !important;
  border: 1px solid rgba(201,168,76,0.15) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(13,27,42,0.08) !important;
  padding: 20px 16px !important;
}
.tour-sidebar-nav-link {
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #4A5568 !important;
  padding: 9px 12px !important;
  transition: all 0.2s ease !important;
}
.tour-sidebar-nav-link:hover {
  background: rgba(201,168,76,0.08) !important;
  color: var(--luxury-primary, #0D1B2A) !important;
}
.tour-sidebar-nav-link.active {
  background: linear-gradient(135deg, rgba(201,168,76,0.15), rgba(201,168,76,0.08)) !important;
  color: var(--luxury-primary, #0D1B2A) !important;
  font-weight: 600 !important;
  border-left: 3px solid var(--luxury-accent, #C9A84C) !important;
}
.tour-sidebar-nav-icon {
  font-size: 14px !important;
}

/* ============================================================
   6. TOUR SNAPSHOT ICONS
   ============================================================ */
.tour-section #tour-overview .d-flex > i.icon-clock,
.tour-section #tour-overview .d-flex > i.icon-customer,
.tour-section #tour-overview .d-flex > i.icon-location,
.tour-section #tour-overview .d-flex > i.icon-route {
  color: var(--luxury-accent, #C9A84C) !important;
}

/* ============================================================
   7. ITINERARY — new lux-* classes (timeline style)
   ============================================================ */
.lux-itinerary::before {
  background: linear-gradient(to bottom,
    rgba(201,168,76,0.90) 0%,
    rgba(201,168,76,0.25) 85%,
    transparent 100%) !important;
}
.lux-day-badge {
  background: linear-gradient(135deg, #C9A84C 0%, #E8C97A 100%) !important;
  box-shadow: 0 3px 12px rgba(201,168,76,0.45) !important;
}
.lux-day-card {
  border: 1px solid rgba(201,168,76,0.18) !important;
  box-shadow: 0 2px 14px rgba(13,27,42,0.06) !important;
}
.lux-day-card:hover {
  border-color: rgba(201,168,76,0.42) !important;
  box-shadow: 0 6px 24px rgba(13,27,42,0.10) !important;
}
.lux-day-card.is-open {
  border-color: rgba(201,168,76,0.45) !important;
  box-shadow: 0 6px 24px rgba(201,168,76,0.12) !important;
}
.lux-day-toggle {
  background: rgba(201,168,76,0.10) !important;
  border: 1px solid rgba(201,168,76,0.28) !important;
  color: #C9A84C !important;
}
.lux-day-content {
  background: #FAFAF8 !important;
  border-top: 1px solid rgba(201,168,76,0.14) !important;
}
.lux-see-details { color: #C9A84C !important; }

/* ============================================================
   8. INCLUDE / EXCLUDE — refined colors (new lux-ie-* classes)
   ============================================================ */
.lux-ie-wrap {
  box-shadow: 0 4px 28px rgba(13,27,42,0.10) !important;
  border: 1px solid rgba(201,168,76,0.20) !important;
}
.lux-included {
  background: linear-gradient(160deg, #FBF7EC 0%, #F0E6C8 100%) !important;
}
.lux-excluded {
  background: linear-gradient(160deg, #0D1B2A 0%, #162436 100%) !important;
}

/* ============================================================
   9. FAQ ACCORDION — luxury style
   ============================================================ */
.bravo-faq-lists .accordion__item {
  border: 1px solid rgba(13,27,42,0.08) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 4px rgba(13,27,42,0.04) !important;
  margin-bottom: 8px !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.bravo-faq-lists .accordion__item:hover {
  border-color: rgba(201,168,76,0.30) !important;
  box-shadow: 0 4px 12px rgba(13,27,42,0.08) !important;
}
.bravo-faq-lists .accordion__item.is-active {
  border-color: rgba(201,168,76,0.40) !important;
  box-shadow: 0 4px 16px rgba(13,27,42,0.10) !important;
}
.bravo-faq-lists .accordion__icon {
  background: rgba(201,168,76,0.10) !important;
  border: 1px solid rgba(201,168,76,0.25) !important;
  color: var(--luxury-accent, #C9A84C) !important;
}
.bravo-faq-lists .accordion__button .button {
  color: var(--luxury-primary, #0D1B2A) !important;
  font-weight: 600 !important;
}

/* ============================================================
   10. PRICING SECTION PANELS
   ============================================================ */
#tour-pricing {
  background: #FFFFFF !important;
  border: 1px solid rgba(201,168,76,0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 16px rgba(13,27,42,0.06) !important;
}
.pricing-outer-container .panel {
  border: 1px solid rgba(13,27,42,0.10) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 6px rgba(13,27,42,0.04) !important;
  margin-bottom: 12px !important;
}
.pricing-outer-container .panel:hover {
  border-color: rgba(201,168,76,0.35) !important;
  box-shadow: 0 4px 16px rgba(13,27,42,0.08) !important;
}
.pricing-outer-container .panel.active {
  border-color: var(--luxury-accent, #C9A84C) !important;
  box-shadow: 0 6px 24px rgba(201,168,76,0.15) !important;
}
.pricing-outer-container .setting-title {
  background: linear-gradient(135deg, #FAFAF8 0%, #FFFFFF 100%) !important;
}
.pricing-outer-container .panel.active .setting-title {
  background: linear-gradient(135deg, rgba(201,168,76,0.08) 0%, rgba(201,168,76,0.04) 100%) !important;
  border-bottom: 1px solid rgba(201,168,76,0.20) !important;
}
.pricing-outer-container .setting-title i.fa:first-child {
  color: var(--luxury-accent, #C9A84C) !important;
}
.pricing-outer-container .setting-title h3 {
  color: var(--luxury-primary, #0D1B2A) !important;
}
.pricing-outer-container .panel.active .accordion-arrow {
  color: var(--luxury-accent, #C9A84C) !important;
}
/* Pricing card headers */
.pricing-card-header {
  background: linear-gradient(135deg, var(--luxury-primary, #0D1B2A) 0%, #1B2E45 100%) !important;
}
/* Residency selector active button */
.btn-group .btn.active {
  background: var(--luxury-accent, #C9A84C) !important;
  border-color: var(--luxury-accent, #C9A84C) !important;
  color: var(--luxury-primary, #0D1B2A) !important;
  font-weight: 600 !important;
}
.btn-group .btn:hover {
  color: var(--luxury-accent, #C9A84C) !important;
}

/* ============================================================
   11. BOOKING FORM — luxury shell
   ============================================================ */
#tour-booking {
  background: #FFFFFF !important;
  border: 1px solid rgba(201,168,76,0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 16px rgba(13,27,42,0.06) !important;
}
/* Booking tabs */
.nav-enquiry {
  background: #F8F6F1 !important;
  border-bottom: 1px solid rgba(201,168,76,0.20) !important;
  border-radius: 12px 12px 0 0 !important;
}
.enquiry-item.active {
  color: var(--luxury-primary, #0D1B2A) !important;
  border-bottom-color: var(--luxury-accent, #C9A84C) !important;
  font-weight: 700 !important;
}
.enquiry-item:hover {
  background: rgba(201,168,76,0.06) !important;
}
/* Booking summary header */
.booking-summary-header {
  border: 1px solid rgba(201,168,76,0.20) !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #FAFAF8 0%, #FFFFFF 100%) !important;
}
/* Section dividers */
.section-divider {
  background: rgba(201,168,76,0.06) !important;
  border-top: 1px solid rgba(201,168,76,0.15) !important;
  border-bottom: 1px solid rgba(201,168,76,0.15) !important;
  border-radius: 4px !important;
  padding: 6px 10px !important;
}
.section-divider span {
  color: var(--luxury-primary, #0D1B2A) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}
/* Grand total box */
.grand-total-box {
  background: linear-gradient(135deg, rgba(201,168,76,0.08) 0%, rgba(201,168,76,0.04) 100%) !important;
  border: 1px solid rgba(201,168,76,0.25) !important;
  border-radius: 12px !important;
}
.total-row .amount {
  color: var(--luxury-primary, #0D1B2A) !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
}
/* Proceed to checkout button */
.bravo_single_book_wrap .button.-md.-dark-1.text-white,
#bravo_tour_book_app button[style*="background: #111827"],
#bravo_tour_book_app button[style*="background:#111827"] {
  background: linear-gradient(135deg, var(--luxury-primary, #0D1B2A) 0%, #1B2E45 100%) !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 4px 16px rgba(13,27,42,0.25) !important;
  transition: all 0.25s ease !important;
}
/* No-selection prompt CTA */
.no-selection-prompt button {
  background: var(--luxury-accent, #C9A84C) !important;
  color: var(--luxury-primary, #0D1B2A) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(201,168,76,0.30) !important;
}
/* Date selection prompt CTA */
.date-selection-prompt button {
  background: linear-gradient(135deg, #C9A84C 0%, #E8C97A 100%) !important;
  color: var(--luxury-primary, #0D1B2A) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}

/* ============================================================
   12. PREMIUM STEPPER — gold accent
   ============================================================ */
.premium-stepper {
  border: 1px solid rgba(201,168,76,0.25) !important;
  border-radius: 12px !important;
}
.premium-stepper:hover,
.premium-stepper:focus-within {
  border-color: var(--luxury-accent, #C9A84C) !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.12) !important;
}
.premium-stepper-btn.plus {
  background: linear-gradient(135deg, var(--luxury-primary, #0D1B2A) 0%, #1B2E45 100%) !important;
  box-shadow: 0 2px 6px rgba(13,27,42,0.20) !important;
}
.premium-stepper-btn.plus:hover {
  box-shadow: 0 4px 12px rgba(13,27,42,0.30) !important;
}
.guest-selector-item:hover {
  border-color: rgba(201,168,76,0.35) !important;
  box-shadow: 0 4px 12px rgba(201,168,76,0.10) !important;
}

/* ============================================================
   13. HOTEL CARDS ON DETAIL PAGE
   ============================================================ */
.tour-hotel-card {
  border: 1px solid rgba(13,27,42,0.08) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(13,27,42,0.06) !important;
}
.tour-hotel-card:hover {
  border-color: rgba(201,168,76,0.30) !important;
  box-shadow: 0 6px 20px rgba(13,27,42,0.10) !important;
}
.tour-hotel-card__title {
  color: var(--luxury-primary, #0D1B2A) !important;
}
/* Hotel carousel nav arrows */
.arrow-left-hover:hover,
.arrow-right-hover:hover {
  background: var(--luxury-accent, #C9A84C) !important;
  border-color: var(--luxury-accent, #C9A84C) !important;
  color: var(--luxury-primary, #0D1B2A) !important;
}
/* Pagination dots */
.pagination.-dots .swiper-pagination-bullet-active {
  background: var(--luxury-accent, #C9A84C) !important;
}

/* ============================================================
   14. MAP SECTION
   ============================================================ */
.map-controls {
  border: 1px solid rgba(201,168,76,0.15) !important;
  border-radius: 14px 14px 0 0 !important;
  background: linear-gradient(135deg, #FAFAF8 0%, #FFFFFF 100%) !important;
}
.stat-item i {
  color: var(--luxury-accent, #C9A84C) !important;
}
.map-actions .btn-outline-primary {
  border-color: var(--luxury-accent, #C9A84C) !important;
  color: var(--luxury-accent, #C9A84C) !important;
}
.map-actions .btn-outline-primary:hover {
  background: var(--luxury-accent, #C9A84C) !important;
  color: var(--luxury-primary, #0D1B2A) !important;
}

/* ============================================================
   15. MOBILE BOTTOM BAR
   ============================================================ */
.bravo-more-book-mobile {
  border-top: 1px solid rgba(201,168,76,0.20) !important;
  box-shadow: 0 -4px 20px rgba(13,27,42,0.10) !important;
}
.bravo-more-book-mobile .btn-primary,
.bravo-more-book-mobile a.rounded-4 {
  background: linear-gradient(135deg, var(--luxury-primary, #0D1B2A) 0%, #1B2E45 100%) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(13,27,42,0.25) !important;
}
.bravo-more-book-mobile .text-price {
  color: var(--luxury-primary, #0D1B2A) !important;
  font-weight: 800 !important;
}

/* ============================================================
   16. RELATED TOURS SECTION
   ============================================================ */
.bravo_content .layout-pt-lg .sectionTitle__title {
  color: var(--luxury-primary, #0D1B2A) !important;
}
.bravo_content .layout-pt-lg .button.-blue-1 {
  background: rgba(201,168,76,0.12) !important;
  color: var(--luxury-accent, #C9A84C) !important;
  border: 1px solid rgba(201,168,76,0.25) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}
.bravo_content .layout-pt-lg .button.-blue-1:hover {
  background: var(--luxury-accent, #C9A84C) !important;
  color: var(--luxury-primary, #0D1B2A) !important;
}

/* ============================================================
   17. GALLERY NAV ARROWS
   ============================================================ */
#tour-gallery .luxury-nav-arrow:hover {
  background: var(--luxury-accent, #C9A84C) !important;
  border-color: var(--luxury-accent, #C9A84C) !important;
  color: var(--luxury-primary, #0D1B2A) !important;
}
#tour-gallery .luxury-thumbnail-item.active {
  border-color: var(--luxury-accent, #C9A84C) !important;
}

/* ============================================================
   18. CONTENT TABLES — luxury borders
   ============================================================ */
.content-text table th {
  background: linear-gradient(135deg, rgba(201,168,76,0.08) 0%, rgba(201,168,76,0.04) 100%) !important;
  border-color: rgba(201,168,76,0.20) !important;
  color: var(--luxury-primary, #0D1B2A) !important;
  font-weight: 700 !important;
}
.content-text table td {
  border-color: rgba(13,27,42,0.08) !important;
}
.content-text table tr:nth-child(even) td {
  background: rgba(201,168,76,0.03) !important;
}

/* ============================================================
   19. REVIEW SECTION
   ============================================================ */
.bravo_detail_tour .review-score-box,
.bravo_detail_tour .flex-center.bg-blue-1 {
  background: linear-gradient(135deg, var(--luxury-accent, #C9A84C) 0%, #E8C97A 100%) !important;
  color: var(--luxury-primary, #0D1B2A) !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
}
/* Star icons */
.bravo_detail_tour .icon-star,
.bravo_detail_tour .fa-star {
  color: var(--luxury-gold, #C9A84C) !important;
}

/* ============================================================
   20. COMPACT SPACING — tighter, more modern
   ============================================================ */
.tour-section {
  margin-bottom: 20px !important;
}
@media (max-width: 767px) {
  .tour-section {
    margin-bottom: 14px !important;
  }
}

/* ============================================================
   SAFETY ZONE — booking/payment untouched
   ============================================================ */
/* The following are intentionally NOT styled here:
   - .bravo-booking-form internals (Vue data/computed)
   - .checkout-*
   - .payment-*
   - .mpesa-*
   - #price-breakdown-container values
   - .price-summary-value amounts
   - form submit handlers */