/* =============================================================================
   package-details.css — Tour Detail Page Styles
   SSP TOURS | Emerald Daylight (white theme) | Uses ONLY variables from main.css
   No hardcoded colours, fonts or spacing.
   Photos stay at full brightness: no dark overlays.
   Hero follows template-hero-section.css: text straight on the photo,
   bottom left, kept legible by soft letter shadows only (no card).
   =============================================================================

   SECTIONS
   1.  Loading Overlay
   2.  Hero Slideshow
   3.  Hero Content & Typography
   4.  Hero Buttons
   5.  Slide Info Overlay
   6.  Quick Facts
   7.  Tour Overview
   8.  Experience Highlights
   9.  Itinerary / Day Cards
   10. Pagination
   11. Responsive
   ============================================================================= */

/* ─── 1. LOADING OVERLAY ──────────────────────────────────────────────────── */

.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-index-max);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    transition: opacity 0.5s ease;
}

.loading-overlay:not(.active) {
    pointer-events: none;
    opacity: 0;
}

.loading-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid var(--border-primary);
    border-top-color: var(--color-navy);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.loading-text {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.hero-loading {
    opacity: 0.5;
    animation: pulse 1.4s ease-in-out infinite alternate;
}

@keyframes pulse {
    from { opacity: 0.4; }
    to   { opacity: 0.8; }
}


/* ─── 2. HERO SLIDESHOW ───────────────────────────────────────────────────── */

/* Top padding clears the floating header shell (template-header.js puts
   pages with #tourHero into hero-mode: the header goes transparent/fixed
   with no body padding, so this section starts at y:0 behind it). The
   calc() reads the same --tt-header-h/--tt-util-h custom properties
   template-header.css defines — see template-hero-section.css for the
   identical pattern used on other hero types. */
.tour-hero {
    position: relative;
    min-height: 88vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: var(--bg-secondary);
    /* Same legibility treatment as template-hero-section.css: the photo
       stays untouched, only the letters get a thin outline and soft shadow. */
    --hero-ink-shadow:
        0 1px 1px var(--color-dark-80),
        0 2px 4px var(--color-dark-70),
        0 4px 18px var(--color-dark-70),
        0 8px 36px var(--color-dark-50);
    --hero-ink-shadow-sm:
        0 1px 1px var(--color-dark-90),
        0 1px 3px var(--color-dark-80),
        0 2px 10px var(--color-dark-70),
        0 4px 20px var(--color-dark-50);
    --hero-ink-stroke: 0.6px var(--color-dark-70);
    --hero-ink-stroke-sm: 0.4px var(--color-dark-70);
    padding-top: calc(var(--tt-util-h, 48px) + var(--tt-header-h, 100px));
}

.lazzora-hero-slideshow {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
}

.lazzora-hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 2s ease-in-out;
    z-index: 1;
}

.lazzora-hero-slide.active {
    opacity: 1;
}

/* Emerald Daylight: no veil over the photos. Kept as an empty hook so the
   markup does not need to change. */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: var(--gradient-overlay);
    pointer-events: none;
    z-index: 2;
}


/* ─── 3. HERO CONTENT & TYPOGRAPHY ───────────────────────────────────────── */

/* Text straight on the photo, bottom left (template-hero-section pattern) */
.hero-content {
    position: relative;
    z-index: 3;
    max-width: min(560px, 50vw);
    padding: var(--spacing-12) 0 var(--spacing-16);
    background: transparent;
}

.tour-code-display {
    display: inline-flex;
    align-items: center;
    background: var(--color-dark-30);
    color: var(--color-white);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-white-60);
    box-shadow: 0 2px 10px var(--color-dark-30);
    font-family: var(--font-label);
    font-weight: var(--font-weight-semibold);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: var(--ls-widest);
    margin-bottom: var(--spacing-3);
    -webkit-text-stroke: var(--hero-ink-stroke-sm);
    text-shadow: var(--hero-ink-shadow-sm);
    paint-order: stroke fill;
}

.tour-title {
    position: relative;
    font-family: var(--font-display);
    font-size: clamp(var(--text-4xl), 3.8vw, var(--text-6xl));
    font-weight: var(--font-weight-normal);
    font-variation-settings: "opsz" 144, "SOFT" 50;
    letter-spacing: var(--ls-tight);
    line-height: var(--leading-tight);
    color: var(--color-white);
    -webkit-text-stroke: var(--hero-ink-stroke);
    text-shadow: var(--hero-ink-shadow);
    paint-order: stroke fill;
    text-wrap: balance;
    margin-bottom: var(--spacing-3);
    padding-bottom: var(--spacing-3);
}

/* Gold rule under the title, as on the template hero */
.tour-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 64px;
    height: 2px;
    border-radius: var(--radius-full);
    background: var(--sheen-gold);
    box-shadow: 0 1px 8px var(--color-dark-30);
}

.tour-subtitle {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(var(--text-base), 1.3vw, var(--text-xl));
    font-weight: var(--font-weight-normal);
    line-height: var(--leading-snug);
    color: var(--color-white);
    -webkit-text-stroke: var(--hero-ink-stroke-sm);
    text-shadow: var(--hero-ink-shadow-sm);
    paint-order: stroke fill;
    max-width: 50ch;
    margin-bottom: var(--spacing-3);
}

.tour-duration {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
    -webkit-text-stroke: var(--hero-ink-stroke-sm);
    text-shadow: var(--hero-ink-shadow-sm);
    paint-order: stroke fill;
    margin-bottom: var(--spacing-5);
}

.tour-duration i {
    color: var(--color-gold-light);
}


/* ─── 4. HERO BUTTONS ─────────────────────────────────────────────────────── */

/* Pill buttons from main.css: emerald primary; the second button is a
   clear glass pill with a white hairline, like the template hero badges. */
.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-3);
}

.hero-buttons .btn {
    gap: var(--spacing-2);
}

.hero-buttons .btn-outline-light {
    background: var(--color-dark-30);
    color: var(--color-white);
    box-shadow: inset 0 0 0 1px var(--color-white-60), 0 2px 10px var(--color-dark-30);
    text-shadow: var(--hero-ink-shadow-sm);
}

.hero-buttons .btn-outline-light:hover {
    background: var(--color-dark-50);
    color: var(--color-white);
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px var(--color-gold-light), 0 2px 10px var(--color-dark-30);
}


/* ─── 5. SLIDE INFO OVERLAY ───────────────────────────────────────────────── */

.slide-info-overlay {
    display: none; /* shown by package-details.js once a slide caption exists */
    position: absolute;
    bottom: var(--spacing-5);
    right: var(--spacing-5);
    background: var(--color-white-90);
    color: var(--text-primary);
    padding: var(--spacing-2) var(--spacing-3-5);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    z-index: 4;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--color-royal-light);
    box-shadow: var(--shadow-md);
    pointer-events: none;
}

.slide-day {
    font-family: var(--font-label);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-widest);
    color: var(--color-gold-dark);
    margin-bottom: var(--spacing-0-5);
}

.slide-location {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}


/* ─── 6. QUICK FACTS ──────────────────────────────────────────────────────── */

.quick-facts-section {
    background: var(--bg-secondary);
    padding: 60px 0;
}

.fact-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-2xl);
    padding: 28px 20px;
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    height: 100%;
}

.fact-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-gold);
}

.fact-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-gold-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    color: var(--color-gold-dark);
    font-size: 1.25rem;
    transition: background 0.25s ease;
}

.fact-card:hover .fact-icon {
    background: var(--color-gold-glow);
}

.fact-label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-widest);
    color: var(--color-royal-dark);
    margin-bottom: 4px;
}

.fact-value {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}


/* ─── 7. TOUR OVERVIEW ────────────────────────────────────────────────────── */

.overview-section {
    background: var(--bg-primary);
    padding: 72px 0;
}

.section-label {
    display: inline-block;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-widest);
    color: var(--color-gold-dark);
    margin-bottom: 10px;
}

.section-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: var(--font-weight-normal);
    font-variation-settings: "opsz" 144;
    letter-spacing: var(--ls-tight);
    color: var(--text-primary);
    margin-bottom: 6px;
    position: relative;
    padding-bottom: 16px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--gradient-gold);
    border-radius: 2px;
}

.section-title.text-center::after {
    left: 50%;
    transform: translateX(-50%);
}

.overview-lead {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--text-secondary);
    line-height: 1.75;
    margin-bottom: 18px;
}

.overview-content p {
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 14px;
}

.overview-image-wrap {
    position: relative;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.overview-image-wrap img {
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
}


/* ─── 8. EXPERIENCE HIGHLIGHTS ───────────────────────────────────────────── */

.highlight-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-2xl);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    height: 100%;
}

.highlight-card:hover {
    border-color: var(--border-gold);
    box-shadow: var(--shadow-lg);
}

.highlight-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--bg-gold-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold-dark);
    font-size: 1rem;
}

.highlight-card:nth-child(even) .highlight-icon {
    background: var(--color-royal-bg);
    color: var(--color-navy);
}

.highlight-title {
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.highlight-desc {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.6;
}


/* ─── 9. ITINERARY / DAY CARDS ────────────────────────────────────────────── */

.itinerary-section {
    background: var(--bg-secondary);
    padding: 72px 0;
}

.day-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.3s ease;
}

.day-card:hover {
    box-shadow: var(--shadow-lg);
}

/* Pearl header with a gold card cap; the metallic sheen stays on the
   small day badge only (large areas stay flat). */
.day-card-header {
    position: relative;
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: var(--spacing-6) var(--spacing-8) var(--spacing-5);
    border-bottom: 1px solid var(--border-primary);
}

.day-card-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: var(--spacing-6);
    right: var(--spacing-6);
    height: 3px;
    background: var(--sheen-gold);
    border-radius: 0 0 var(--radius-xs) var(--radius-xs);
}

.day-badge {
    display: inline-block;
    background: var(--sheen-emerald);
    color: var(--color-white);
    box-shadow: var(--shadow-metal);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-full);
    font-family: var(--font-label);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-widest);
    margin-bottom: var(--spacing-2);
}

.day-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: var(--font-weight-medium);
    font-variation-settings: "opsz" 144;
    color: var(--text-primary);
    margin-bottom: var(--spacing-1-5);
}

.day-distance {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--spacing-1-5);
}

.day-distance i {
    color: var(--color-navy);
}

.day-card-body {
    padding: 28px;
}

.day-image-wrap {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.day-image-wrap img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}

/* White frosted caption band (no dark gradient over the photo) */
.day-image-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-2-5) var(--spacing-4);
    background: var(--color-white-90);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--color-royal-light);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
}

.day-description {
    font-family: var(--font-body);
    font-size: 0.93rem;
    color: var(--text-muted);
    line-height: 1.78;
    margin-bottom: 20px;
}

.activities-box {
    background: var(--bg-secondary);
    border-left: 3px solid var(--color-gold);
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
    padding: 18px 20px;
}

.activities-title {
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.activities-title i {
    color: var(--color-navy);
}

.activities-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.activities-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--text-muted);
    padding: 4px 0;
    line-height: 1.55;
}

.activities-list li::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-gold);
    margin-top: 6px;
}


/* ─── 10. PAGINATION ──────────────────────────────────────────────────────── */

.pagination-wrap {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-2xl);
    padding: 18px 24px;
}

.pagination-info {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Pagination + jump-select are now pkg-pagination / pkg-page-link / pkg-select
   — see the v2.0 REBUILD ADDITIONS block near the end of this file. The old
   Bootstrap .pagination/.page-link/.form-select overrides that used to live
   here were removed since nothing in the markup uses those classes any more. */


/* ─── 11. RESPONSIVE ──────────────────────────────────────────────────────── */

@media (max-width: 1199.98px) {
    .tour-title { font-size: 3rem; }
}

@media (max-width: 991.98px) {
    .tour-hero {
        min-height: 80vh;
        padding-top: calc(var(--tt-util-h, 48px) + var(--tt-header-h, 100px));
    }
    .tour-title { font-size: 2.6rem; }
    .day-card-body { padding: 20px; }
}

@media (max-width: 767.98px) {
    .tour-hero {
        /* template-header.css collapses --tt-util-h/--tt-ann-h to 0 and
           --tt-header-h to 76px at this same breakpoint. */
        padding-top: var(--tt-header-h, 76px);
    }

    .hero-content {
        max-width: none;
        padding: var(--spacing-10) 0 var(--spacing-12);
    }

    .hero-buttons {
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .hero-buttons .btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }

    .slide-info-overlay {
        bottom: 12px;
        right: 12px;
        left: 12px;
        text-align: center;
    }

    .section-title::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .day-image-wrap img { height: 200px; }

    .pagination-wrap {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .tour-title { font-size: 2rem; }
    .tour-subtitle { font-size: 1rem; }
    .day-card-header { padding: 16px 18px; }
    .day-card-body { padding: 16px 18px; }
    .fact-card { padding: 20px 14px; }
}

/* ═══════════════════════════════════════════════════════════════
   OVERVIEW SLIDESHOW
═══════════════════════════════════════════════════════════════ */
.ov-slideshow {
    position: relative;
    border-radius: var(--radius-2xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: var(--bg-secondary);
    user-select: none;
}

.ov-slides {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    cursor: pointer;
}

.ov-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.55s ease;
}
.ov-slide.active { opacity: 1; }

.ov-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Day/title caption: white frosted band at the bottom of each slide.
   Extra bottom padding leaves room for the dots row. */
.ov-caption {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: var(--spacing-2-5) var(--spacing-4) var(--spacing-6);
    background: var(--color-white-90);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--color-royal-light);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    pointer-events: none;
}
.ov-day {
    font-family: var(--font-label);
    font-size: var(--mobile-text-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    color: var(--color-white);
    background: var(--sheen-emerald);
    padding: var(--spacing-0-5) var(--spacing-2);
    border-radius: var(--radius-full);
    white-space: nowrap;
}
.ov-loc {
    font-size: var(--mobile-text-sm);
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Prev / Next arrows */
.ov-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-white-90);
    color: var(--text-primary);
    border: none;
    box-shadow: var(--shadow-royal);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
    z-index: 5;
    backdrop-filter: blur(4px);
}
.ov-arrow:hover {
    background: var(--color-white);
    color: var(--color-navy);
    transform: translateY(-50%) scale(1.08);
}
.ov-prev { left: 10px; }
.ov-next { right: 10px; }

/* Dot indicators */
.ov-dots {
    position: absolute;
    bottom: var(--spacing-2);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    z-index: 5;
}
.ov-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: none;
    background: var(--color-royal);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}
.ov-dot.active {
    background: var(--color-navy);
    transform: scale(1.25);
}

@media (max-width: 767.98px) {
    .ov-slides { aspect-ratio: 3 / 2; }
    .ov-arrow  { width: 30px; height: 30px; font-size: 1.1rem; }
}

/* =============================================================================
   v2.0 REBUILD ADDITIONS — SSP TOURS
   Fixes + premium pass on top of the sections above (Emerald Daylight
   white theme since v3.0). This block:
   1. Replaces Bootstrap grid/utility classes (container/row/col-*, pagination,
      form-select) used only for LAYOUT with custom pkg- classes, so this page
      no longer depends on bootstrap.min.css for structure (Bootstrap CSS/JS
      stays loaded only for header/footer/booking-section compatibility).
   2. Adds premium touches (ambient orbs, glass cards, deeper hover states)
      matching the template-about-srilanka.html "Living Collection" language.
   3. Repositions + resizes the Journey Map (moved in HTML to sit directly
      after the hero — see lct001.html). template-map-component.css was not
      available when this was written, so these are best-effort overrides
      scoped under .pkg-map-hero-slot with two-class specificity. If anything
      still clips or fights the original styling, send that file and this
      section gets tightened to match exactly.
   ============================================================================= */

/* ─── Layout primitives (replace Bootstrap .container/.row/.col-*) ───────── */
.pkg-container { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--spacing-8); }
.pkg-container--narrow { max-width: var(--container-narrow); }
.pkg-hero__inner { max-width: 760px; }

@media (max-width: 767.98px) {
    .pkg-container { padding: 0 var(--spacing-5); }
}

/* ─── Ambient background orbs (premium touch, matches about-srilanka) ────── */
.quick-facts-section, .overview-section, .itinerary-section { position: relative; overflow: hidden; isolation: isolate; }
.pkg-section-orb {
    position: absolute; z-index: 0; border-radius: var(--radius-full);
    filter: blur(90px); opacity: 0.22; pointer-events: none;
}
.pkg-section-orb--gold  { width: 380px; height: 380px; top: -140px; right: -80px; background: var(--color-gold-glow); }
.pkg-section-orb--green { width: 320px; height: 320px; bottom: -120px; left: -80px; background: var(--color-green-pale); }
.quick-facts-section > .pkg-container,
.overview-section > .pkg-container,
.itinerary-section > .pkg-container { position: relative; z-index: 1; }

/* ─── Quick Facts grid (replaces Bootstrap .row / col-md-6 col-lg-3) ──────── */
.pkg-facts-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-5);
}
.pkg-facts__col { display: block; }
.fact-card { height: 100%; }
@media (max-width: 991.98px) { .pkg-facts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .pkg-facts-grid { grid-template-columns: 1fr; } }

/* ─── Overview: 2 columns — Text | (Photo + Best Time + Route Map) stacked ──
   Each stacked item gets the FULL right-column width (nothing shares width
   side-by-side inside it), which is why the map renders comfortably here
   even though this reads as fewer columns than the 3-col attempt. */
.pkg-overview-grid {
    display: grid; grid-template-columns: 7fr 5fr; gap: var(--spacing-8); align-items: start;
}
.pkg-overview-grid__side { display: flex; flex-direction: column; gap: var(--spacing-4); }

@media (max-width: 991.98px) {
    .pkg-overview-grid { grid-template-columns: 1fr; }
    .pkg-overview-grid__side { order: -1; }
}

/* ─── Highlights grid (replaces col-md-4 col-sm-6) ────────────────────────── */
.pkg-highlights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-4); }
.pkg-highlights__col { display: block; }
.highlight-card { height: 100%; }
@media (max-width: 767.98px) { .pkg-highlights-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .pkg-highlights-grid { grid-template-columns: 1fr; } }

/* ─── Day-card internal grid (replaces row g-4 / col-lg-5 / col-lg-7) ─────── */
.pkg-day-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--spacing-6); }
@media (max-width: 991.98px) { .pkg-day-grid { grid-template-columns: 1fr; } }

/* ─── Custom pagination (replaces Bootstrap .pagination/.page-item/.page-link) ── */
.pkg-pagination { display: flex; align-items: center; gap: var(--spacing-1); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.pkg-page-item { display: block; }
.pkg-page-link {
    display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 var(--spacing-2);
    font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-secondary);
    background: transparent; border: 1px solid var(--border-primary); border-radius: var(--radius-md);
    cursor: pointer; transition: var(--transition-elegant);
}
.pkg-page-link:hover { background: var(--bg-gold-light); color: var(--color-gold-dark); border-color: var(--border-gold); }
.pkg-page-item--active .pkg-page-link,
.pkg-page-link--active {
    background: var(--sheen-emerald); border-color: var(--color-navy); color: var(--color-white);
    font-weight: var(--font-weight-semibold); box-shadow: var(--shadow-metal);
}
.pkg-page-item--disabled .pkg-page-link,
#prevPage:disabled, #nextPage:disabled {
    color: var(--text-lighter); background: var(--bg-secondary); border-color: var(--border-secondary);
    cursor: not-allowed; pointer-events: none;
}
.pkg-page-item--disabled { pointer-events: none; }

/* Prev/Next nav buttons (id="prevPage"/"nextPage") share the same look */
#prevPage, #nextPage {
    display: inline-flex; align-items: center; gap: var(--spacing-1-5); height: 34px; padding: 0 var(--spacing-3);
    font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-secondary);
    background: transparent; border: 1px solid var(--border-primary); border-radius: var(--radius-full);
    cursor: pointer; transition: var(--transition-elegant);
}
#prevPage:hover, #nextPage:hover { background: var(--bg-gold-light); color: var(--color-gold-dark); border-color: var(--border-gold); }

/* Custom select (replaces Bootstrap .form-select) */
.pkg-select {
    font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-secondary);
    border: 1px solid var(--border-primary); border-radius: var(--radius-md);
    padding: var(--spacing-1-5) var(--spacing-8) var(--spacing-1-5) var(--spacing-3);
    background-color: var(--bg-secondary);
    background-image: linear-gradient(45deg, transparent 50%, var(--color-gold-dark) 50%), linear-gradient(135deg, var(--color-gold-dark) 50%, transparent 50%);
    background-position: right var(--spacing-4) center, right calc(var(--spacing-4) + 5px) center;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
    appearance: none; -webkit-appearance: none; min-width: 180px; cursor: pointer;
}
.pkg-select:focus { border-color: var(--color-gold); box-shadow: 0 0 0 3px var(--color-gold-glow-sm); outline: none; }

/* ─── Error state (shown in the hero, on the photo) ──────────────────────── */
.pkg-error__title { color: var(--color-white); font-family: var(--font-display); text-shadow: var(--hero-ink-shadow); }
.pkg-error__msg { color: var(--color-white); font-family: var(--font-body); text-shadow: var(--hero-ink-shadow-sm); }
.pkg-error__btn {
    display: inline-flex; align-items: center; gap: var(--spacing-2); margin-top: var(--spacing-4);
    padding: var(--spacing-2-5) var(--spacing-6); border-radius: var(--radius-full);
    background: var(--color-dark-30); color: var(--color-white); border: 1px solid var(--color-white-60);
    cursor: pointer; font-family: var(--font-body); font-weight: var(--font-weight-semibold);
    transition: var(--transition-elegant);
}
.pkg-error__btn:hover { background: var(--color-dark-50); border-color: var(--color-gold-light); transform: translateY(-1px); }

/* =============================================================================
   BEST TIME TO TRAVEL — compact planning card.
   Populated from data.travelAdvisory by populateTravelAdvisory() in JS.
   ============================================================================= */
.pkg-best-time {
    background: var(--gradient-card); border: 1px solid var(--border-primary); border-radius: var(--radius-2xl);
    padding: var(--spacing-5);
}
.pkg-best-time__head {
    display: flex; align-items: center; gap: var(--spacing-2);
    font-family: var(--font-display); font-size: var(--text-md); font-weight: var(--font-weight-semibold);
    color: var(--text-primary); margin-bottom: var(--spacing-3);
}
.pkg-best-time__head i { color: var(--color-gold-dark); }
.pkg-best-time__row { display: flex; align-items: flex-start; gap: var(--spacing-3); margin-bottom: var(--spacing-2); flex-wrap: wrap; }
.pkg-best-time__row-label {
    display: inline-flex; align-items: center; gap: var(--spacing-1-5); flex-shrink: 0; padding-top: 3px;
    font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--font-weight-semibold);
    text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-muted); min-width: 52px;
}
.pkg-best-time__row-label i { font-size: var(--text-xs); }
.pkg-month-chips { display: flex; flex-wrap: wrap; gap: var(--spacing-1-5); }
.pkg-month-chip {
    display: inline-block; padding: var(--spacing-0-5) var(--spacing-2-5); border-radius: var(--radius-full);
    font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--font-weight-medium);
}
.pkg-month-chip--ideal { background: var(--color-success-light); color: var(--color-success); border: 1px solid rgba(var(--color-success-rgb), 0.35); }
.pkg-month-chip--avoid { background: var(--color-warning-light); color: var(--color-warning); border: 1px solid rgba(var(--color-warning-rgb), 0.35); }
.pkg-best-time__note {
    font-family: var(--font-body); font-size: var(--text-xs); color: var(--text-muted); line-height: var(--leading-normal);
    margin: var(--spacing-3) 0 0; padding-top: var(--spacing-3); border-top: 1px solid var(--border-secondary);
}

/* =============================================================================
   ROUTE MAP — map + stops merged into ONE card (not two stacked boxes).
   Stops render as a compact horizontal chip trail directly under the canvas
   — enough to make the numbered markers meaningful without a second card.
   template-map-component.html renders its own centered title row + a
   Bootstrap .row.g-4 col-lg-8/col-lg-4 split — both overridden below since
   they assume a full-page-width context.

   Canvas gets height/width only — position is deliberately left alone.
   (Earlier version set position:absolute on this exact element, which is
   Leaflet's own `.leaflet-container`; that desynced its internal tile panes
   and made it render the wrong country entirely. Do not reintroduce that.)
   ============================================================================= */
.pkg-map-sidebar__label {
    display: flex; align-items: center; gap: var(--spacing-2);
    font-family: var(--font-primary); font-size: var(--text-xs); font-weight: var(--font-weight-bold);
    letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--color-gold-dark);
}
.pkg-map-sidebar__label i { font-size: var(--text-sm); }

/* One merged card: rounded border/background on the OUTER wrapper; the
   injected frame + legend lose their individual card chrome and become
   sections within it, split by a thin divider. */
.pkg-map-sidebar {
    background: var(--gradient-card); border: 1px solid var(--border-primary); border-radius: var(--radius-2xl);
    overflow: hidden; box-shadow: var(--shadow-sm);
}
.pkg-map-sidebar .journey-map-section > .container > .row.justify-content-center { display: none; }
.pkg-map-sidebar .journey-map-section { padding: 0; margin: 0; }
.pkg-map-sidebar .journey-map-section > .container { padding: 0; max-width: none; }
.pkg-map-sidebar .row.g-4 { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.pkg-map-sidebar .row.g-4 > [class*="col-"] { width: 100%; max-width: 100%; padding: 0; }

.pkg-map-sidebar .journey-map-frame {
    position: relative; height: 260px;
    border-radius: 0; border: none; background: transparent; box-shadow: none; /* card chrome now lives on .pkg-map-sidebar */
}
.pkg-map-sidebar .journey-map-canvas {
    height: 100% !important; width: 100% !important;
    /* Daylight basemap: map tiles shown at their natural brightness. */
    filter: none;
}
/* Leaflet's own zoom controls / attribution (standard leaflet.css classes):
   white controls with ink glyphs on the light map. */
.pkg-map-sidebar .leaflet-control-zoom a { background: var(--color-white); color: var(--text-primary); border-color: var(--border-primary); }
.pkg-map-sidebar .leaflet-control-zoom a:hover { background: var(--bg-secondary); color: var(--color-navy); }
.pkg-map-sidebar .leaflet-control-attribution { background: var(--color-white-90); color: var(--text-muted); font-size: var(--mobile-text-xs); }
.pkg-map-sidebar .leaflet-control-attribution a { color: var(--color-navy); }

.pkg-map-sidebar .journey-map-loading {
    position: absolute; inset: 0; z-index: 2; /* fine to be absolute — it's a plain loading overlay, not the Leaflet container */
    display: flex; align-items: center; justify-content: center; gap: var(--spacing-2);
    font-family: var(--font-body); font-size: var(--text-xs); color: var(--text-muted);
    background: var(--bg-primary);
}

/* Stops — compact horizontal chip trail, part of the same card, divided
   from the map by a thin border instead of its own separate box.
   NOTE: the template already renders its own numbered marker per stop (we
   saw it double up with an earlier ::before counter attempt here — visible
   as two different numbers side by side). No counter is added here; content
   structure inside each <li> is left alone since template-map-component.js
   wasn't available to confirm it, and guessing at hiding specific child
   elements risked hiding the place name entirely. Compactness comes from
   smaller font/padding + wrapping, not from stripping content. */
.pkg-map-sidebar .journey-map-legend {
    background: transparent; border: none; border-top: 1px solid var(--border-secondary);
    border-radius: 0; padding: var(--spacing-3) var(--spacing-4);
}
.pkg-map-sidebar .journey-map-legend-title { display: none; } /* redundant next to our own "Route Map" label above the card */
.pkg-map-sidebar .journey-map-stops {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: var(--spacing-2); max-height: 96px; overflow-y: auto;
    font-size: 0.82em; /* shrinks whatever the template's own stop markup renders, without touching its structure */
}
.pkg-map-sidebar .journey-map-stops li {
    display: inline-flex; align-items: center; gap: var(--spacing-1-5);
    background: var(--bg-primary); border: 1px solid var(--border-secondary); border-radius: var(--radius-lg);
    padding: var(--spacing-1) var(--spacing-2);
}
.pkg-map-sidebar .journey-map-note { display: none; } /* not needed at this compact size */

@media (max-width: 575.98px) {
    .pkg-map-sidebar .journey-map-frame { height: 220px; }
}
/* =============================================================================
   v3.0 EMERALD DAYLIGHT — classes that replace former inline styles in the
   tour-details/lctNNN.html pages (no inline CSS in page files).
   ============================================================================= */
.pkg-section-head { margin: 0 auto var(--spacing-8); text-align: center; }
.pkg-subhead {
    font-family: var(--font-display);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}
.pkg-section-intro {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* Small screens: text block stays bottom left like the site hero template,
   and the slide caption chip is hidden (the template hides its caption at
   this size too). !important beats the inline display set by the JS. */
@media (max-width: 767.98px) {
    .hero-buttons { align-items: stretch; }
    .hero-buttons .btn { max-width: none; }
    .slide-info-overlay { display: none !important; }
}