:root {
      --brand-color: #008080; /* Teal color from reference */
      --brand-color-dark: #006666;
      --brand-color-light: #e6f2f2;
      --star-color: #ffb400;
      --text-body: #333;
      --text-muted: #666;
      --border-color: #e0e0e0;
    }

    body {
      font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      color: var(--text-body);
      background-color: #f8f9fa;
    }

    body a {
      color: var(--brand-color);
      text-decoration: none;
    }
    
    /* Remove the old hero */
    .hero { display: none; }

    /* 1. Ensure Top Bar is visible and has height */
    .top-bar {
        background-color: #212529; /* Dark bg matching your screenshot */
        color: #fff;
        padding: 8px 0;
        font-size: 0.9rem;
        position: relative;
        z-index: 1031; /* Higher than navbar initially */
    }

    /* 2. Navbar Styling - Initial State */
    .navbar {
        width: 100%;
        z-index: 1030;
        background-color: #ffffff !important; /* Force dark background */
        position: relative; /* Default position */
        margin-bottom: 0; /* Remove any bottom margin causing gaps */
    }

    /* 3. Sticky Behavior */
    .navbar.sticky {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        animation: slideDown 0.3s;
        box-shadow: 0 2px 10px rgba(172, 172, 172, 0.3);
    }

    @keyframes slideDown {
        from { transform: translateY(-100%); }
        to { transform: translateY(0); }
    }

    /* 4. Push the Gallery Grid down so it's not hidden behind the header */
    /* This compensates for the height of Topbar + Navbar */
    body {
        /* Ensure the body doesn't have weird padding */
        padding-top: 0; 
    }

    /* Adjust the Gallery Grid margin */
    .gallery-grid {
        /* Increase top margin to clear the headers */
        margin-top: 1.75rem !important; 
    }

    /* --- New Gallery Grid (Dynamic) --- */
    .gallery-grid {
      display: grid;
      gap: 8px;
      height: 450px; /* Adjust height as needed */
      max-width: 1200px;
      /* ✅ FIX: Changed margin to add 2rem of space at the top */
      /* margin: 3rem auto 1rem auto; /* (This is shorthand for top, right, bottom, left) */
      padding: 0 1rem;
    }
    .gallery-item {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      position: relative;
    }

    .gallery-item.video-item {
        background: #000;
        position: relative;
    }
    .gallery-item video,
    .gallery-item iframe {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    /* 1 Image Layout */
    .gallery-grid.gallery-count-1 {
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
    }
    .gallery-grid.gallery-count-1 .gallery-item:first-child {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
    }

    /* 2 Image Layout */
    .gallery-grid.gallery-count-2 {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 1fr;
    }
    .gallery-grid.gallery-count-2 .gallery-item:first-child { grid-column: 1 / 2; grid-row: 1 / 2; }
    .gallery-grid.gallery-count-2 .gallery-item:nth-child(2) { grid-column: 2 / 3; grid-row: 1 / 2; }

    /* 3 Image Layout */
    .gallery-grid.gallery-count-3 {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, 1fr);
    }
    .gallery-grid.gallery-count-3 .gallery-item:first-child { grid-column: 1 / 3; grid-row: 1 / 3; }
    .gallery-grid.gallery-count-3 .gallery-item:nth-child(2) { grid-column: 3 / 5; grid-row: 1 / 2; }
    .gallery-grid.gallery-count-3 .gallery-item:nth-child(3) { grid-column: 3 / 5; grid-row: 2 / 3; }

    /* 4 Image Layout */
    .gallery-grid.gallery-count-4 {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, 1fr);
    }
    .gallery-grid.gallery-count-4 .gallery-item:first-child { grid-column: 1 / 3; grid-row: 1 / 3; }
    .gallery-grid.gallery-count-4 .gallery-item:nth-child(2) { grid-column: 3 / 4; grid-row: 1 / 2; }
    .gallery-grid.gallery-count-4 .gallery-item:nth-child(3) { grid-column: 4 / 5; grid-row: 1 / 2; }
    .gallery-grid.gallery-count-4 .gallery-item:nth-child(4) { grid-column: 3 / 5; grid-row: 2 / 3; }

    /* 5 Image Layout (Original) */
    .gallery-grid.gallery-count-5 {
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(2, 1fr);
    }
    .gallery-grid.gallery-count-5 .gallery-item:first-child { grid-column: 1 / 3; grid-row: 1 / 3; }
    .gallery-grid.gallery-count-5 .gallery-item:nth-child(2) { grid-column: 3 / 4; grid-row: 1 / 2; }
    .gallery-grid.gallery-count-5 .gallery-item:nth-child(3) { grid-column: 4 / 5; grid-row: 1 / 2; }
    .gallery-grid.gallery-count-5 .gallery-item:nth-child(4) { grid-column: 3 / 4; grid-row: 2 / 3; }
    .gallery-grid.gallery-count-5 .gallery-item:nth-child(5) { grid-column: 4 / 5; grid-row: 2 / 3; }
    
    .gallery-item .view-all-btn {
      position: absolute;
      bottom: 1rem;
      right: 1rem;
      background-color: rgba(255, 255, 255, 0.9);
      color: #000;
      border: 1px solid #ccc;
    }
    
    @media (max-width: 767px) {
      .gallery-grid {
        height: 300px;
        /* Force 1-column layout on mobile regardless of count */
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
      }
      .gallery-item:not(:first-child) {
        display: none; /* Hide smaller images on mobile */
      }
      .gallery-item:first-child {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
      }
      .gallery-item .view-all-btn {
        bottom: 0.5rem;
        right: 0.5rem;
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
      }
    }
    
    /* --- Page Header --- */
    .page-header h1 {
      font-size: 2.25rem;
      font-weight: 700;
      color: #111;
      margin-bottom: 0.5rem;
    }
    .page-header .location,
    .page-header .reviews-link {
      font-size: 1rem;
      color: var(--text-muted);
    }
    .page-header .reviews-link .bi-star-fill {
      color: var(--star-color);
    }
    
    /* --- Main Content Layout --- */
    .content-section {
      background-color: #fff;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 1.5rem;
      margin-bottom: 1.5rem;
    }
    .section-title {
      font-size: 1.5rem;
      font-weight: 600;
      color: #111;
      margin-bottom: 1rem;
      padding-bottom: 0.5rem;
      border-bottom: 1px solid var(--border-color);
    }
    
    /* --- Share Box --- */
    .share-box-inline {
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .share-box-inline h6 {
      margin: 0;
      font-weight: 600;
    }
    .share-box-inline .share-icon {
      font-size: 1.25rem;
      color: var(--text-muted);
      text-decoration: none;
    }
    .share-box-inline .share-icon:hover { color: var(--brand-color); }

    /* --- Highlights / Amenities --- */
    .highlight-list {
      padding-left: 0;
      list-style-type: none;
      columns: 2;
    }
    .highlight-list li {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      margin-bottom: 0.75rem;
      font-size: 0.95rem;
    }
    .highlight-list .icon {
      color: var(--brand-color);
      font-size: 1.25rem;
    }
    @media (max-width: 576px) {
      .highlight-list { columns: 1; }
    }

    /* --- Instructors --- */
    .instructor-card {
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 1rem;
      background-color: #fff;
    }
    .instructor-photo {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 50%;
    }
    .instructor-card h6 {
      font-weight: 600;
      color: var(--brand-color);
    }
    
    /* --- Sticky Booking Box --- */
    .booking-box-sticky {
      /* position: sticky; */
      top: 20px;
      background-color: #fff;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    }
    .booking-box-header {
      padding: 1rem 1.25rem;
      border-bottom: 1px solid var(--border-color);
    }

    .booking-box-header .price-from {
      font-size: 0.9rem;
      color: var(--text-muted);
    }
    .booking-box-header .price-main {
      font-size: 1.75rem;
      font-weight: 700;
      color: #111;
    }
    .booking-box-header .price-person {
      font-size: 0.9rem;
      color: var(--text-muted);
      font-weight: 500;
    }
    .booking-box-body {
      padding: 1.25rem;
    }
    .booking-box-body .form-label {
      font-size: 0.9rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
    }
    
    /* Batch/Date selection */
    .batch-option {
      border: 1px solid var(--border-color);
      border-radius: 6px;
      padding: 0.75rem;
      margin-bottom: 0.5rem;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .batch-option:hover {
      background-color: #f8f8f8;
    }
    .batch-option.active {
      border-color: var(--brand-color);
      background-color: var(--brand-color-light);
      box-shadow: 0 0 0 2px var(--brand-color-light);
    }
    .batch-option strong { font-size: 0.9rem; }
    .batch-option .small { font-size: 0.8rem; }
    .selectBatchBtn {
      font-size: 0.85rem;
      padding: 0.25rem 0.75rem;
    }
    
    /* Accommodation selection */
    #accomList .list-group-item {
      padding: 0.75rem 1rem;
      cursor: pointer;
    }
    #accomList .list-group-item input[type="radio"] {
      margin-right: 0.5rem;
    }
    #accomList .list-group-item:hover {
      background-color: #f8f8f8;
    }
    #accomList .list-group-item.active {
       background-color: var(--brand-color-light);
       border-color: var(--brand-color);
       color: var(--text-body); /* <-- ADD THIS LINE */
    }
    .accom-price {
      font-size: 0.9rem;
      font-weight: 800;
      color: #ab1111ff;
    }
    .show-photos-btn {
      font-size: 0.85rem;
      text-decoration: none;
      font-weight: 500;
      color: var(--brand-color);
    }
    .show-photos-btn:hover {
      text-decoration: underline;
    }
    
   /* --- DESKTOP LAYOUT (Default) --- */

/* 1. The Wrapper handles the 'Sticky' scrolling now */
.sidebar-wrapper {
    position: sticky;
    top: 20px; /* Sticks to top of screen when scrolling */
    width: 100%; /* Force full width of the column */
}

/* 2. The Pricing Card (Top) */
.booking-box-card {
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    overflow: hidden;
    width: 100%; /* Fill the wrapper */
}
.booking-box-body {
    padding: 1.5rem;
    max-height: 60vh; /* Allow inner scrolling if list is too long */
    overflow-y: auto;
}

/* 3. The Footer (Bottom) */
.booking-box-footer {
    width: 100% !important; /* Force match wrapper width */
    max-width: none !important; /* REMOVE any max-width limits */
    margin-top: 10px;
    background: transparent;
    padding: 0;
    position: static; /* Sit naturally under the card */
    box-shadow: none;
    border: none;
}
.booking-btn-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}


/* --- MOBILE LAYOUT (Small Screens Only) --- */
@media (max-width: 991.98px) {
    
    /* On mobile, disable the wrapper stickiness */
    .sidebar-wrapper {
        position: static; 
    }

    /* Make the footer stick to the bottom of the screen */
    .booking-box-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        padding: 15px;
        z-index: 1050;
        border-top: 1px solid #eee;
        box-shadow: 0 -4px 10px rgba(0,0,0,0.1);
        margin-top: 0;
        border-radius: 0;
    }
    
    /* Ensure buttons are side-by-side or stacked nicely on mobile */
    .booking-btn-group {
        flex-direction: column; 
        width: 100%;
    }
    
    /* Add padding to body so footer doesn't cover content */
    body {
        padding-bottom: 120px; 
    }
}
    .booking-btn-group .btn {
      padding: 0.75rem;
      font-size: 1rem;
      font-weight: 600;
      border-radius: 6px;
    }
    .btn-brand-primary {
      background-color: var(--brand-color);
      border-color: var(--brand-color);
      color: #fff;
    }
    .btn-brand-primary:hover {
      background-color: var(--brand-color-dark);
      border-color: var(--brand-color-dark);
      color: #fff;
    }
    .btn-brand-outline {
      background-color: #fff;
      border-color: var(--brand-color);
      color: var(--brand-color);
    }
    .btn-brand-outline:hover {
      background-color: var(--brand-color-light);
      border-color: var(--brand-color);
      color: var(--brand-color);
    }

    /* Remove old fixed buttons */
    .fixed-booking-buttons { display: none; }
    
    /* Responsive Booking Box (becomes static on mobile) */
    
    @media (max-width: 991.98px) {
      /* 1. Make the desktop sidebar become a static block */
      .booking-box-sticky {
        position: static;
        top: auto;
        margin-top: 1.5rem;
      }

      /* 2. Hide the desktop buttons (which are inside the sidebar) */
      .booking-box-sticky .booking-btn-group {
        display: none; 
      }
      
      /* 3. Show the mobile-only fixed-bottom buttons */
      .fixed-booking-buttons {
        display: block; /* This overrides the 'd-lg-none' */
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        padding: 0.75rem;
        border-top: 1px solid var(--border-color);
        z-index: 1000;
      }
      
      /* 4. Add padding to the bottom of the page */
      body {
        padding-bottom: 70px; /* Space for fixed buttons */
      }
    }

    /* ===========================
   RESPONSIVE FIXES – packageDetails
   Focus: Header Gallery & CTA Buttons
   =========================== */

    /* ----- Gallery grid responsiveness ----- */
    @media (max-width: 1199px) {
      .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
      }
    }

    @media (max-width: 767px) {
      .gallery-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
      }
      .gallery-grid img,
      .gallery-grid video {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
      }
    }

    /* Center gallery inside container for small screens */
    @media (max-width: 575px) {
      .gallery-grid {
        margin: 0 auto;
        max-width: 95%;
      }
    }


    /* ----- “Request to Book” + “Send Inquiry” Buttons ----- */
    @media (max-width: 991px) {
      .booking-cta-buttons {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        position: static !important;
        width: 100% !important;
        margin-top: 15px !important;
      }
      .booking-cta-buttons .btn {
        width: 100% !important;
        font-size: 1rem !important;
        padding: 12px !important;
      }
    }

    /* For smaller mobiles, fix button text wrapping and stacking */
    @media (max-width: 575px) {
      .booking-cta-buttons .btn {
        font-size: 0.9rem !important;
        padding: 10px !important;
      }
      .booking-cta-buttons {
        margin-top: 20px !important;
      }
    }

    /* ----- Optional tweak for sticky button behavior ----- */
    @media (max-width: 480px) {
      .booking-cta-buttons {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: #fff !important;
        padding: 10px !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        z-index: 999;
      }
    }


    /* --- Accordion Styles --- */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding-bottom: 0.5rem;
  margin-bottom: 0; /* Override default */
  border-bottom: 1px solid var(--border-color);
}

/* Remove the default border from the content-section since the header has one now */
.section-header + .collapse.show, 
.section-header + .collapsing {
    padding-top: 1.5rem;
}

/* Icon Rotation */
.chevron-icon {
  transition: transform 0.3s ease;
}
.chevron-icon.rotate-180 {
  transform: rotate(180deg);
}

/* Expand All Button Styling */
.expand-toggle-btn {
  background: none;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 5px 15px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 15px;
  transition: all 0.2s;
}
.expand-toggle-btn:hover {
  background-color: #f0f0f0;
}

/* --- MOBILE GALLERY SLIDER (New) --- */
.mobile-gallery-slider {
    display: none; /* Hidden on desktop */
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    gap: 10px;
    padding: 0 15px; /* Edge spacing */
    margin-bottom: 20px;
    margin-top: 20px;
    scrollbar-width: none; /* Hide scrollbar Firefox */
}
.mobile-gallery-slider::-webkit-scrollbar {
    display: none; /* Hide scrollbar Chrome/Safari */
}
.mobile-gallery-item {
    display: inline-block;
    width: 85%; /* Shows a peek of the next image */
    height: 250px;
    border-radius: 12px;
    scroll-snap-align: center;
    position: relative;
    overflow: hidden;
    margin-right: 10px;
    flex-shrink: 0;
}
.mobile-gallery-item img, 
.mobile-gallery-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Play icon overlay for video thumbnails */
.video-overlay-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.5);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    pointer-events: none;
}

/* --- DESKTOP GRID --- */
/* Hide the grid on mobile now */
@media (max-width: 767.98px) {
    .gallery-grid {
        display: none !important;
    }
    .mobile-gallery-slider {
        display: block; /* Show slider on mobile */
    }
}

/* --- FULL SCREEN BLACK MODAL (Lightbox Style) --- */
.lightbox-modal .modal-content {
    background-color: #000; /* Pitch black background */
    border: none;
    height: 100vh; /* Force full height */
}
.lightbox-modal .modal-header {
    border-bottom: none;
    background: rgba(0,0,0,0.5); /* Semi-transparent header */
    position: absolute;
    width: 100%;
    z-index: 1060;
    top: 0;
}
.lightbox-modal .modal-title {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.lightbox-modal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%); /* Make 'X' white */
}
.lightbox-modal .modal-body {
    display: flex;
    align-items: center; /* Vertically center content */
    justify-content: center;
    height: 100%;
    padding: 0;
}
/* Ensure images/videos fit but don't overflow */
.lightbox-media {
    max-height: 100vh;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* Keeps aspect ratio intact */
}

.view-all-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
.grid-img-bg {
    width: 100%; height: 100%;
    background-size: cover; background-position: center;
    transition: transform 0.3s;
}
.gallery-item:hover .grid-img-bg { transform: scale(1.05); }

/* --- 1. Fix Review Form Overflow --- */
.rating-input {
    display: flex;
    flex-wrap: wrap; /* Allows stars to wrap to next line on small screens */
    gap: 5px;
}
.rating-input .form-check {
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
}

/* --- 3. Fix Desktop Grid Layout --- */
.gallery-grid {
    /* Ensure it doesn't push width too wide */
    width: 100%; 
    max-width: 100%;
}