/* ===================================
   STICKY SIDEBAR FIX - ADD THIS AFTER YOUR MAIN CSS
   Save as: sticky-fix.css
   Link in HTML: <link rel="stylesheet" href="sticky-fix.css">
   =================================== */

/* CRITICAL: Parent grid must use align-items: start */
.tour-content-grid {
  display: grid !important;
  grid-template-columns: 1fr 400px !important;
  gap: 60px !important;
  align-items: start !important; /* THIS IS THE KEY - prevents stretching */
}

/* Sidebar container positioning */
.tour-sidebar {
  position: relative !important;
  align-self: flex-start !important; /* Allows sticky to work */
}

/* THE STICKY MAGIC - Multiple selectors to ensure it works */
.sticky-sidebar,
.booking-card.sticky-sidebar,
.tour-sidebar .sticky-sidebar,
.tour-sidebar .booking-card {
  position: -webkit-sticky !important; /* Safari support */
  position: sticky !important;
  top: 120px !important; /* Distance from top (adjust for your header height) */
  z-index: 10 !important;
  max-height: calc(100vh - 140px) !important; /* Prevents card from being taller than screen */
  overflow-y: auto !important; /* Allows scrolling if card content is too long */
}

/* Ensure booking card has proper styling */
.booking-card {
  background: #ffffff !important;
  border: 2px solid #0092d0 !important;
  border-radius: 8px !important;
  padding: 32px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
}

/* Tablet view */
@media (max-width: 1200px) {
  .tour-content-grid {
    grid-template-columns: 1fr 350px !important;
    gap: 40px !important;
  }
}

/* Mobile view - disable sticky */
@media (max-width: 992px) {
  .tour-content-grid {
    grid-template-columns: 1fr !important;
  }
  
  .sticky-sidebar,
  .booking-card.sticky-sidebar,
  .tour-sidebar .sticky-sidebar,
  .tour-sidebar .booking-card {
    position: relative !important; /* Turn off sticky on mobile */
    top: auto !important;
  }
}

/* ===================================
   ALTERNATIVE: If the above doesn't work, use this
   =================================== */

/* Force override - use if needed */
body .tour-detail-content .tour-content-grid {
  align-items: start !important;
}

body .tour-detail-content .tour-sidebar {
  align-self: flex-start !important;
}

body .tour-detail-content .sticky-sidebar {
  position: sticky !important;
  top: 120px !important;
}