body{
background:#0a0a0a;
color:#fff;
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto;
}

/* HERO */
.hero-premium{
position:relative;
height:70vh;
border-radius:20px;
overflow:hidden;
margin-bottom:40px;
}
.hero-img{
width:100%;
height:100%;
object-fit:cover;
}
.hero-overlay{
position:absolute;
bottom:0;
padding:40px;
background:linear-gradient(to top,rgba(0,0,0,.5),transparent);
}
.price{color:#00c2a8;font-weight:700;margin-top:10px;font-size:22px;}

/* GRID */
.layout-grid{
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 40px;
    /* Ensure the grid container doesn't restrict height */
    align-items: stretch;
}


/* Hero overlay badges */
/* Hero Overlay - Availability Badge */
.hero-overlay .tours-badge {
    position: relative;     /* relative to overlay */
    display: inline-block;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    margin-top: 10px;
}

/* Same colors as tours.php */
.hero-overlay .badge-open {
    background: #00c2a8;   /* Teal */
}
.hero-overlay .badge-limited {
    background: #f56e79;   /* Pinkish/Coral */
}
.hero-overlay .badge-soldout {
    background: #555;      /* Gray */
}

/* Stack nicely with price and title */
.hero-overlay .price-badge-container {
    display: flex;
    flex-direction: column;
    gap: 2px;
}



/* SIDEBAR */
@media(min-width: 1201px) {
    .sticky-box {
        position: -webkit-sticky; /* For Safari support */
        position: sticky;
        top: 20px; /* Reduced this slightly to ensure it's visible sooner */
        z-index: 10;
        
        backdrop-filter: blur(14px);
        background: rgba(255, 255, 255, .08);
        padding: 25px;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, .15);
    }
}
.sidebar-premium{
    position: relative;
    /* This ensures the sidebar column is as tall as the main content column */
    height: 100%;
    border-radius: 10px; /* smooth curves */
    box-sizing: border-box;

    /* Black glossy transparent effect */
    
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.5));

    backdrop-filter: blur(10px);      /* glassy blur behind it */
    -webkit-backdrop-filter: blur(10px); /* Safari support */

    /* subtle shadow for depth */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    padding: 10px;
}
.sidebar-premium ul{list-style:none;padding:0}
.sidebar-premium li{
padding:10px;
cursor:pointer;
border-radius:8px;
}
.sidebar-premium li:hover{
background:rgba(255,255,255,.1);
}

/* MAIN */
.card{
background:rgba(255,255,255,.05);
padding:30px;
border-radius:16px;
margin-bottom:25px;
border-radius: 20px; /* smooth curves */
    box-sizing: border-box;

    /* Black glossy transparent effect */
    
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.5));

    backdrop-filter: blur(10px);      /* glassy blur behind it */
    -webkit-backdrop-filter: blur(10px); /* Safari support */

    /* subtle shadow for depth */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    padding: 30px;
}
.split{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}
.section-title{margin:30px 0 20px}

/* ACCORDION */
.day {
    /* Adjust 100px based on your header's height */
    scroll-margin-top: 100px; 
    border-bottom: 1px solid rgba(255,255,255,.1);
    transition: all 0.3s ease-in-out;
}
.day-header {
    padding: 20px;
    cursor: pointer;
    background: rgba(255,255,255,.03);
    /* Remove sticky positioning */
    position: relative;
    z-index: 1;
}
.day-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
}
.day.open .day-body{
max-height:2000px;
padding:20px;
}
.day-body h4{color:#00c2a8;margin-top:10px;}

/* GALLERY */
.gallery{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:15px;
margin-bottom:50px;
}
.gallery img{
width:100%;
height:200px;
object-fit:cover;
border-radius:10px;
transition:.3s;
}
.gallery img:hover{
transform:scale(1.05);
}

/* FLOAT WA */
.floating-wa{
position:fixed;
bottom:30px;
right:30px;
background:#00c2a8;
padding:14px 20px;
border-radius:50px;
color:#000;
font-weight:700;
text-decoration:none;
z-index:999;
}



.sidebar-premium li.active-day {
    background: #00c2a8;
    color: #000;
    font-weight: bold;
}

/* The Active Sidebar Item */
.sidebar-premium li {
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
    margin-bottom: 5px;
}

.sidebar-premium li.active-day {
    background: rgba(0, 194, 168, 0.15); /* Light teal tint */
    color: #00c2a8;
    border-left: 3px solid #00c2a8;
    font-weight: 600;
    padding-left: 15px; /* Slight shift to show it's active */
}




/* ACCORDION - Ensure smooth transitions */
.day {
    /* Set this to the same value as your JS headerOffset for consistency */
    scroll-margin-top: 100px; 
    border-bottom: 1px solid rgba(255,255,255,.1);
    /* Ensure the background doesn't flicker during scroll */
    background: transparent; 
}

.day-body {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
}

.day.open .day-body {
    max-height: 5000px; /* Large enough for any content */
    padding: 20px;
}
.sidebar-premium li.active-day {
    background: #00c2a8;
    color: white !important;
    font-weight: 600;
}

 Add to your CSS 
html {
    scroll-behavior: auto !important;
}


.price-badge-container{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(340px,420px));
    justify-content: center;
    gap: 6px;
    min-height: 100px; /* ensures grid has space while cards animate */
}
.tours-card {
    display: block;
    background: #1a1a1a;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    position: relative;
    transition: 0.3s ease;
    box-shadow: 0 6px 10px rgba(0,0,0,0.6);
    min-height: 320px;  /* <-- ensures card always visible */
}
/* Gray-out hero image if sold out */
.hero-premium.sold-out .hero-img {
    filter: grayscale(100%);
    opacity: 0.7; /* same effect as tours.php */
    transition: 0.3s ease;
}

/* Optional: Slight dark overlay */
.hero-premium.sold-out .hero-overlay {
    background: rgba(0,0,0,0.6); /* darker overlay for clarity */
}

/* Sold-out badge color already handled */
.hero-overlay .badge-soldout {
    background: #555;
}



/* ===== TOUR DETAILS MOBILE FLOW ===== */
@media (max-width: 768px) {

    /* STACK GRID */
    .layout-grid {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .sidebar-premium{
    display:none !important;
    
    .hero-date-badge {
    top: 54px;
    right: 14px;
    font-size: 0.65rem;
    padding: 6px 12px;
}
}

.layout-grid{
    grid-template-columns:1fr;
}
.split{
    grid-template-columns:1fr;
}

}

.hero-premium {
    position: relative;
    width: 100%;
    min-height: 60vh; /* adjust as needed */
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: blur(20px); /* start blurred */
    transition: filter 0.6s ease, opacity 0.5s ease;
    opacity: 0.85;
}

.hero-img.loaded {
    filter: blur(0);
    opacity: 1;
}

/* ── Date badge (below seats badge) ── */
.hero-date-badge {
    position: absolute;
    top: 62px; /* sits below seats badge */
    right: 22px;
    z-index: 10;

    padding: 7px 16px;
    border-radius: 30px;

    font-family: 'Montserrat', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;

    color: #fff;
    background: rgba(0, 0, 0, 0.65);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    border: 1px solid rgba(212,175,55,0.25);
    box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}

/* ── Booking bar dates ── */
.booking-bar__dates {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.75);

    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(212,175,55,0.25);

    padding: 8px 16px;
    border-radius: 8px;

    white-space: nowrap;
}
.booking-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

@media (max-width: 540px) {

    .booking-bar {
        flex-wrap: wrap;
        gap: 10px;
    }

    .booking-bar__price-wrap {
        width: 100%;
        justify-content: space-between;
    }

    .booking-bar__dates {
        width: 100%;
        text-align: center;
        font-size: 0.72rem;
        padding: 6px 12px;
    }

    .booking-bar__btn {
        width: 100%;
    }
}