/* ── HERO ── */
.td-hero {
    min-height: 82vh;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 0;
}
.td-hero-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(6,18,44,0.97) 0%, rgba(6,18,44,0.65) 40%, rgba(6,18,44,0.4) 100%);
}
.td-hero-content {
    position: relative; z-index: 2;
    flex: 1; padding: 0 5% 2.5rem;
    max-width: 90%;
}
.breadcrumb { font-size:.76rem; color:rgba(255,255,255,.45); margin-bottom:1rem; }
.breadcrumb a { color:var(--gold); text-decoration:none; transition:color .2s; }
.breadcrumb a:hover { color:#fff; }
.breadcrumb span { margin:0 .5rem; }

.td-badge { margin-bottom:1rem; }
.td-badge-inner {
    display:inline-flex; align-items:center; gap:.45rem;
    padding:.35rem .9rem; border-radius:3px;
    font-size:.73rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}
.badge-popular { background:rgba(200,148,31,.2); border:1px solid var(--gold); color:var(--gold); }
.badge-luxury  { background:rgba(200,148,31,.2); border:1px solid var(--gold); color:var(--gold); }
.badge-new     { background:rgba(46,117,200,.25); border:1px solid var(--blue-light); color:#7fbfff; }
.badge-family  { background:rgba(37,211,102,.15); border:1px solid #25d366; color:#25d366; }
.badge-budget  { background:rgba(107,200,100,.15); border:1px solid #6bc864; color:#6bc864; }

.td-hero h1 {
    font-family:'Playfair Display',serif;
    font-size:clamp(2rem,4.5vw,3.8rem);
    font-weight:700; color:#fff; line-height:1.15; margin-bottom:.7rem;
}
#td-subtitle { font-size:1rem; color:rgba(255,255,255,.7); line-height:1.7; margin-bottom:1.4rem; }

.td-meta-row { display:flex; flex-wrap:wrap; gap:.7rem; }
.td-meta-item {
    display:inline-flex; align-items:center; gap:.45rem;
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15);
    backdrop-filter:blur(4px);
    color:#fff; font-size:.8rem; padding:.35rem .85rem; border-radius:30px;
}
.td-meta-item i { color:var(--gold); font-size:.75rem; }

/* Hero price box */
.td-hero-price-box {
    position:relative; z-index:2;
    background:rgba(8,20,45,0.85);
    border:1px solid rgba(200,148,31,.3);
    backdrop-filter:blur(10px);
    padding:1.8rem 1.6rem;
    margin:0 5% 2.5rem 0;
    border-radius:8px;
    min-width:220px;
    text-align:center;
    flex-shrink:0;
    align-self:flex-end;
}
.tdp-from { font-size:.72rem; color:rgba(255,255,255,.5); letter-spacing:.1em; text-transform:uppercase; }
.tdp-amount { font-family:'Playfair Display',serif; font-size:2.6rem; font-weight:700; color:var(--gold); line-height:1; margin:.2rem 0; }
.tdp-pp { font-size:.75rem; color:rgba(255,255,255,.45); margin-bottom:1.1rem; }
.td-enquire-btn { width:100%; justify-content:center; border-radius:5px; font-size:.8rem; padding:.8rem; }
.td-call-btn {
    display:block; text-align:center; margin-top:.7rem;
    color:rgba(255,255,255,.6); font-size:.78rem; text-decoration:none; transition:color .2s;
}
.td-call-btn:hover { color:var(--gold); }
.td-call-btn i { margin-right:.4rem; }

/* ── QUICK FACTS BAR ── */
.td-facts {
    background:var(--blue);
    display:flex; flex-wrap:wrap;
    justify-content:center;
}
.td-fact {
    display:flex; align-items:center; gap:.7rem;
    padding:1.1rem 2rem;
    border-right:1px solid rgba(255,255,255,.08);
    color:#fff;
}
.td-fact:last-child { border-right:none; }
.td-fact i { font-size:1.2rem; color:var(--gold); }
.td-fact-label { font-size:.68rem; color:rgba(255,255,255,.45); letter-spacing:.08em; text-transform:uppercase; }
.td-fact-val { font-size:.9rem; font-weight:600; color:#fff; }

/* ── MAIN LAYOUT ──
   KEY RULES FOR STICKY TO WORK:
   1. display:grid (not flex)
   2. align-items:start  ← makes each column only as tall as its content
   3. overflow:visible   ← overflow:hidden/clip on a grid parent breaks sticky
   4. No ancestor between body and .td-layout can have overflow:hidden
   ─────────────────────────────────────────────────── */
.td-layout {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 3.5rem 5%;
    overflow: visible;
}

/* ── SECTIONS ── */
.td-section { margin-bottom:3rem; }
.td-section h2 {
    font-family:'Playfair Display',serif;
    font-size:1.6rem; font-weight:700; color:var(--text);
    margin-bottom:1.1rem; padding-bottom:.7rem;
    border-bottom:2px solid var(--border);
    display:flex; align-items:center; gap:.6rem;
}
.td-section h2 i { color:var(--gold); font-size:1rem; }

/* Overview */
#td-overview { font-size:.93rem; color:var(--muted); line-height:1.9; }
.td-destinations { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.1rem; }
.td-dest-pill {
    display:inline-flex; align-items:center; gap:.5rem;
    background:var(--blue-pale); border:1px solid var(--border);
    color:var(--blue); font-size:.8rem; font-weight:600;
    padding:.35rem .85rem; border-radius:30px;
}

/* Highlights */
.td-highlights-grid { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
.td-hl-item {
    display:flex; align-items:flex-start; gap:.6rem;
    font-size:.88rem; color:var(--text); line-height:1.6;
}
.td-hl-item i { color:var(--gold); margin-top:.18rem; flex-shrink:0; }

/* Itinerary */
.td-itinerary-note {
    font-size:.82rem; color:var(--muted); font-style:italic;
    background:var(--blue-pale); border-left:3px solid var(--blue-light);
    padding:.7rem 1rem; border-radius:0 4px 4px 0; margin-bottom:1.4rem;
}

.td-itinerary-timeline { position: relative; padding-left: 2.5rem; margin-top: 1rem; }

/* Dashed vertical line */
.td-itinerary-timeline::before {
    content: ''; position: absolute; left: 16px; top: 0; bottom: 0;
    width: 2px; background: rgba(200, 148, 31, 0.3); /* Gold line */
}

.iti-item { position: relative; margin-bottom: 1.5rem; }

/* Round Marker with Day Number */
.iti-marker {
    position: absolute; left: -2.5rem; top: 0.8rem;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--gold); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Playfair Display', serif; font-weight: 700; font-size: 0.9rem;
    box-shadow: 0 0 0 6px var(--white); z-index: 2;
    transition: transform 0.3s;
}

.iti-content {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    transition: border-color 0.3s, box-shadow 0.3s;
}

.iti-item.active .iti-content {
    border-color: var(--gold);
    box-shadow: 0 4px 15px rgba(200,148,31,0.1);
}
.iti-item.active .iti-marker {
    transform: scale(1.1);
}

.iti-header {
    padding: 1.2rem 1.5rem; display: flex; justify-content: space-between; align-items: center;
    cursor: pointer;
}

.iti-title {
    font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 700;
    color: var(--text); margin: 0;
}

.iti-icon { color: var(--gold); font-size: 1rem; transition: transform 0.3s; }

.iti-body { padding: 0 1.5rem 1.5rem 1.5rem; display: none; }
.iti-body p { font-size: 0.95rem; color: var(--muted); line-height: 1.7; margin-bottom: 1rem; }

.iti-hl { list-style: none; padding: 0; margin: 0; }
.iti-hl li {
    font-size: 0.9rem; color: var(--text); margin-bottom: 0.6rem;
    display: flex; align-items: flex-start; gap: 0.6rem;
}
.iti-hl li i { color: var(--gold); margin-top: 0.25rem; font-size: 0.8rem; }

@media (max-width: 768px) {
    .td-itinerary-timeline { padding-left: 1.8rem; }
    .td-itinerary-timeline::before { left: 9px; }
    .iti-marker { left: -1.8rem; width: 28px; height: 28px; font-size: 0.75rem; top: 1rem; }
    .iti-header { padding: 1rem; }
    .iti-title { font-size: 1.05rem; }
}
/* Inclusions */
.td-inc-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.td-inc-grid h4 { font-size:.9rem; font-weight:700; color:var(--text); margin-bottom:.8rem; display:flex; align-items:center; gap:.4rem; }
.td-inc-list, .td-exc-list { list-style:none; }
.td-inc-list li, .td-exc-list li {
    display:flex; align-items:flex-start; gap:.55rem;
    font-size:.85rem; color:var(--muted); margin-bottom:.5rem; line-height:1.6;
}
.td-inc-list li i { color:#25D366; flex-shrink:0; margin-top:.18rem; }
.td-exc-list li i { color:#E24B4A; flex-shrink:0; margin-top:.18rem; }

/* Hotels */
.td-hotels-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; }
.td-hotel-card {
    background:var(--white); border:1px solid var(--border);
    border-radius:6px; padding:1.2rem;
    transition:border-color .25s,transform .25s;
}
.td-hotel-card:hover { border-color:var(--gold); transform:translateY(-3px); }
.td-hotel-city { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-light); margin-bottom:.3rem; }
.td-hotel-name { font-family:'Playfair Display',serif; font-size:.97rem; font-weight:700; color:var(--text); margin-bottom:.35rem; }
.td-hotel-stars { color:var(--gold); font-size:.72rem; margin-bottom:.4rem; }
.td-hotel-note { font-size:.78rem; color:var(--muted); display:flex; align-items:flex-start; gap:.4rem; }
.td-hotel-note i { color:var(--gold); margin-top:.12rem; flex-shrink:0; }

/* Gallery */
.td-gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.8rem; }
.td-gallery-item { border-radius:6px; overflow:hidden; aspect-ratio:4/3; }
.td-gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform .4s; cursor:zoom-in; }
.td-gallery-item:hover img { transform:scale(1.05); }

/* Reviews */
.td-reviews { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.2rem; }
.td-review { background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:1.4rem; }
.td-review-stars { color:var(--gold); font-size:.75rem; margin-bottom:.6rem; }
.td-review-text { font-size:.87rem; color:var(--text); font-style:italic; line-height:1.8; margin-bottom:1rem; }
.td-review-author { display:flex; align-items:center; gap:.7rem; }
.td-review-av {
    width:38px; height:38px; border-radius:50%;
    background:var(--blue); border:2px solid var(--gold);
    display:flex; align-items:center; justify-content:center;
    font-family:'Playfair Display',serif; font-weight:700; color:var(--gold); font-size:.82rem;
    flex-shrink:0;
}
.td-review-name { font-size:.88rem; font-weight:700; color:var(--text); }
.td-review-loc { font-size:.75rem; color:var(--muted); }
.td-review-loc i { margin-right:.3rem; }

/* ── STICKY SIDEBAR ──
   WORKS because:
   - .td-layout has align-items:start (column height = content height, not stretched)
   - .td-layout has overflow:visible (not hidden/clip)
   - html/body have no overflow:hidden (removed in common.css)
   - top:96px accounts for the fixed floating header pill height
   ─────────────────────────────────────────────────── */

.td-sticky {
    position: sticky;
    top: 110px;
    /* That's it. align-items:start on .td-layout makes this work.
       DO NOT add max-height, overflow-y, or height here —
       those turn .td-sticky into a scroll container and break sticky. */
}

.td-price-card {
    background:var(--blue); border-radius:8px;
    padding:1.6rem; margin-bottom:1.2rem; text-align:center;
    border:1px solid rgba(200,148,31,.25);
}
.tdspc-label { font-size:.7rem; color:rgba(255,255,255,.5); letter-spacing:.1em; text-transform:uppercase; }
.tdspc-price { font-family:'Playfair Display',serif; font-size:2.2rem; font-weight:700; color:var(--gold); line-height:1; margin:.25rem 0; }
.tdspc-pp { font-size:.75rem; color:rgba(255,255,255,.4); }
.td-sidebar-call {
    display:block; text-align:center; margin-top:.8rem;
    color:rgba(255,255,255,.6); font-size:.8rem; text-decoration:none; transition:color .2s;
}
.td-sidebar-call:hover { color:var(--gold); }
.td-sidebar-call i { margin-right:.3rem; }

.td-trust-list {
    background:var(--bg); border:1px solid var(--border);
    border-radius:6px; padding:1rem 1.2rem; margin-bottom:1.2rem;
}
.td-trust-item {
    display:flex; align-items:center; gap:.6rem;
    font-size:.82rem; color:var(--text); padding:.4rem 0;
    border-bottom:1px solid var(--border);
}
.td-trust-item:last-child { border-bottom:none; }
.td-trust-item i { color:var(--gold); width:14px; flex-shrink:0; }

.td-nav {
    background:var(--white); border:1px solid var(--border);
    border-radius:6px; padding:1rem 1.2rem;
}
.td-nav h4 {
    font-family:'Playfair Display',serif; font-size:.9rem; color:var(--text);
    margin-bottom:.7rem; padding-bottom:.5rem; border-bottom:1px solid var(--border);
}
.td-nav a {
    display:flex; align-items:center; gap:.5rem;
    color:var(--muted); text-decoration:none; font-size:.82rem;
    padding:.38rem .3rem; transition:color .2s;
}
.td-nav a i { color:var(--gold); width:14px; font-size:.75rem; }
.td-nav a:hover { color:var(--blue); }

/* ── NOT FOUND ── */
.not-found {
    min-height:60vh; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center; padding:4rem 5%;
}
.not-found i { font-size:4rem; color:var(--border); margin-bottom:1.2rem; }
.not-found h2 { font-family:'Playfair Display',serif; color:var(--text); margin-bottom:.7rem; }
.not-found p { color:var(--muted); margin-bottom:1.5rem; }

/* ── CTA BAND ── */
.cta-band {
    background:linear-gradient(135deg,var(--blue) 0%,var(--blue-mid) 100%);
    padding:5rem 5%; text-align:center; position:relative;
    /* NO overflow:hidden here — it would break any sticky elements above */
    overflow: clip;
}
.cta-band::before {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at center,rgba(200,148,31,.18) 0%,transparent 70%);
    pointer-events:none;
}
.cta-band h2 { font-family:'Playfair Display',serif; font-size:clamp(1.9rem,4vw,3rem); font-weight:700; color:#fff; margin-bottom:.9rem; position:relative; }
.cta-band h2 em { color:var(--gold); font-style:italic; }
.cta-band > p { color:rgba(255,255,255,.65); font-size:1rem; margin-bottom:2.4rem; position:relative; }
.cta-band .btn-gold { position:relative; }
.cta-band .btn-outline {
    display:inline-flex; align-items:center; gap:.5rem;
    border:1.5px solid rgba(255,255,255,.5); color:#fff;
    padding:.9rem 2.2rem; font-size:.82rem; font-weight:600;
    font-family:'Nunito Sans',sans-serif; letter-spacing:.1em; text-transform:uppercase;
    border-radius:3px; cursor:pointer; text-decoration:none;
    background:transparent; position:relative;
    transition:border-color .25s,background .25s,transform .2s;
}
.cta-band .btn-outline:hover {
    border-color:var(--gold); background:rgba(200,148,31,.15);
    transform:translateY(-2px); color:#fff;
}

/* ── RESPONSIVE ── */

/* Tablet — keep 2 columns but tighter */
@media (max-width:1100px) {
    .td-layout {
        grid-template-columns: 1fr 260px;
        gap: 2rem;
        padding: 2.5rem 4%;
    }
}

/* Below 768px — stack to single column, sidebar goes below content */
@media (max-width:768px) {
    .td-layout {
        grid-template-columns: 1fr;
        padding: 2rem 5%;
    }
    /* On single column, sticky makes no sense — go static */
    .td-sticky {
        position: static;
        max-height: none;
        overflow-y: visible;
    }
    .td-highlights-grid { grid-template-columns:1fr; }
    .td-inc-grid { grid-template-columns:1fr; }
    .td-days::before { left:28px; }
    .td-day-num { width:56px; height:56px; font-size:.7rem; }
    .td-facts { flex-direction:column; }
    .td-fact { border-right:none; border-bottom:1px solid rgba(255,255,255,.08); }
    .td-fact:last-child { border-bottom:none; }

    /* On mobile hero, stack price box below content */
    .td-hero { flex-direction:column; align-items:stretch; }
    .td-hero-content { padding-bottom:1.5rem; }
    .td-hero-price-box {
        margin:0; border-radius:0; border-left:none; border-right:none;
        text-align:left; display:flex; flex-wrap:wrap; align-items:center; gap:1rem;
    }
    .tdp-from,.tdp-pp { display:none; }
    .tdp-amount { font-size:1.8rem; }
}