/**
 * attr-details.css — Premium Destination Detail Page
 * Ranshire Ceylon · Ceylon Midnight Forest × Sunrise Gold
 *
 * ⚠  ALL values reference main.css tokens only — no hardcoded colours/fonts/spacing.
 * ⚠  Compact, refined design: smaller cards, tighter grid, professional premium feel.
 * Version: 4.0.0
 */

/* ============================================================
   1. LOADING OVERLAY
   ============================================================ */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: var(--gradient-depth);
    z-index: var(--z-index-maximum);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-5);
    color: var(--text-white);
    transition: opacity 0.65s cubic-bezier(0.4, 0, 0.2, 1);
}
.loading-overlay.fade-out { opacity: 0; pointer-events: none; }

.loading-spinner {
    width: 52px;
    height: 52px;
    border: 2.5px solid var(--color-white-20);
    border-top-color: var(--color-gold);
    border-radius: var(--radius-full);
    animation: tt-spin 0.85s linear infinite;
    box-shadow: 0 0 18px var(--color-gold-glow);
}
.loading-text {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--ls-wider);
    color: var(--color-gold-light);
}
.loading-progress {
    width: 240px;
    height: 2px;
    background: var(--color-white-20);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.loading-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-light), var(--color-gold-dark));
    background-size: 200% 100%;
    border-radius: var(--radius-full);
    animation: tt-shimmer-load 1.6s ease-in-out infinite, tt-progress 2.8s ease forwards;
}
.loading-message {
    font-size: var(--text-sm);
    color: var(--color-white-65);
    letter-spacing: var(--ls-wide);
}

/* ============================================================
   2. ERROR OVERLAY
   ============================================================ */
.error-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-dark-90);
    backdrop-filter: blur(16px);
    z-index: var(--z-index-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
}

/* ============================================================
   3. MAIN CONTENT WRAPPER
   ============================================================ */
.main-content-wrapper { opacity: 0; transition: opacity 0.6s ease 0.1s; }
.main-content-wrapper.ready { opacity: 1; }

/* ============================================================
   4. BREADCRUMB — single-line, minimal
   ============================================================ */
.attr-breadcrumb {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-secondary);
    padding: var(--spacing-2-5) 0;
}
.attr-breadcrumb .breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    font-size: var(--text-sm);
    list-style: none;
    gap: 0;
}
.attr-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: '/';
    padding: 0 var(--spacing-2);
    color: var(--color-gray-400);
    font-size: var(--text-xs);
}
.breadcrumb-item a {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
}
.breadcrumb-item a:hover { color: var(--color-gold-dark); }
.breadcrumb-item.active {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-sm);
}

/* ============================================================
   5. HERO SECTION
   ============================================================ */
.attr-detail-hero-wrapper {
    position: relative;
    height: 88vh;
    min-height: 580px;
    max-height: 920px;
    overflow: hidden;
}
.attr-detail-hero-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center 40%;
    transform: scale(1.06);
    transition: transform 14s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    filter: brightness(0.88) saturate(1.1);
}
.attr-detail-hero-wrapper.hero-loaded .attr-detail-hero-image { transform: scale(1); }

.attr-detail-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        170deg,
        rgba(15, 35, 24, 0.12) 0%,
        rgba(15, 35, 24, 0.35) 38%,
        rgba(15, 35, 24, 0.70) 70%,
        rgba(15, 35, 24, 0.88) 100%
    );
    z-index: 2;
}
.attr-detail-hero-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-bottom: var(--spacing-14);
    z-index: 3;
}

/* Category badge */
.attr-detail-category {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-1) var(--spacing-4);
    background: rgba(232, 168, 32, 0.18);
    border: 1px solid rgba(232, 168, 32, 0.50);
    backdrop-filter: blur(10px);
    color: var(--color-gold-light);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--ls-widest);
    text-transform: uppercase;
    margin-bottom: var(--spacing-4);
    animation: tt-fade-up 0.7s ease both;
}

/* Title */
.attr-detail-title {
    font-family: var(--font-display) !important;
    font-size: clamp(2.4rem, 6vw, 4.8rem) !important;
    font-weight: var(--font-weight-bold) !important;
    color: var(--color-white) !important;
    -webkit-text-fill-color: var(--color-white) !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    line-height: 1.08 !important;
    letter-spacing: -0.025em !important;
    margin-bottom: var(--spacing-3) !important;
    text-shadow: 0 2px 20px rgba(15, 35, 24, 0.50) !important;
    animation: tt-fade-up 0.9s ease both;
    position: relative;
}
.attr-detail-title::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: var(--gradient-gold);
    border-radius: var(--radius-full);
    margin-top: var(--spacing-3);
    animation: tt-expand-line 0.9s ease 0.9s both;
}
.attr-detail-title::before { display: none; }

.attr-detail-location {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    color: var(--color-white-80);
    font-size: var(--text-base);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-7);
    animation: tt-fade-up 1.1s ease both;
}
.attr-detail-location i { color: var(--color-gold); font-size: var(--text-sm); }

/* Hero nav pills — smaller, more refined */
.attr-detail-quick-info {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-2);
    animation: tt-fade-up 1.3s ease both;
}
.attr-detail-quick-info .btn {
    background: rgba(255,255,255,0.10) !important;
    backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    color: var(--color-white) !important;
    border-radius: var(--radius-full) !important;
    padding: var(--spacing-2) var(--spacing-5) !important;
    font-size: var(--text-xs) !important;
    font-weight: var(--font-weight-semibold) !important;
    letter-spacing: var(--ls-wide) !important;
    min-height: 34px !important;
    transition: var(--transition-elegant) !important;
    text-transform: uppercase;
}
.attr-detail-quick-info .btn:hover {
    background: var(--color-gold) !important;
    border-color: var(--color-gold) !important;
    color: var(--color-navy) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-gold) !important;
}

/* ============================================================
   6. SECTION HEADERS — refined, no bulky icon
   ============================================================ */
/* Use main.css .section-title + .section-subtitle, override icon */
.section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--color-gold-bg);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-full);
    color: var(--color-gold);
    font-size: var(--text-sm);
    margin-right: var(--spacing-3);
    vertical-align: middle;
    box-shadow: 0 0 10px var(--color-gold-glow-sm);
    animation: tt-glow-pulse 3.5s ease-in-out infinite;
    transition: var(--transition-elegant);
    flex-shrink: 0;
    position: relative;
    top: -2px;
}
.section-title:hover .section-icon,
h2:hover .section-icon {
    background: var(--color-gold);
    color: var(--color-navy);
    box-shadow: var(--shadow-gold);
}

/* Gold accent rule under section title */
.attr-gold-rule {
    display: block;
    width: 44px;
    height: 2px;
    background: var(--gradient-gold);
    border-radius: var(--radius-full);
    margin: var(--spacing-3) auto var(--spacing-2);
}

/* ============================================================
   7. TRAVEL TIP CARDS — compact, horizontal on wider screens
   ============================================================ */
.attr-tip-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5) var(--spacing-5);
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: var(--transition-premium);
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
/* Bottom gold accent line */
.attr-tip-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: var(--gradient-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.40s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.attr-tip-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-premium);
    border-color: var(--color-gold);
}
.attr-tip-card:hover::after { transform: scaleX(1); }

.attr-tip-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto var(--spacing-4);
    background: var(--color-gold-bg);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold);
    font-size: var(--text-lg);
    transition: var(--transition-premium);
    box-shadow: 0 3px 10px var(--color-gold-glow-sm);
    flex-shrink: 0;
}
.attr-tip-card:hover .attr-tip-icon {
    background: var(--color-gold);
    color: var(--color-navy);
    box-shadow: var(--shadow-gold);
    transform: scale(1.08) rotate(-4deg);
}
.attr-tip-icon i.text-warning,
.attr-tip-icon i.text-primary { color: var(--color-gold) !important; transition: color var(--transition-fast); }
.attr-tip-card:hover .attr-tip-icon i.text-warning,
.attr-tip-card:hover .attr-tip-icon i.text-primary { color: var(--color-navy) !important; }

.attr-tip-card h3 {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-2);
    transition: color var(--transition-fast);
    line-height: var(--leading-snug);
}
.attr-tip-card:hover h3 { color: var(--color-navy-deep); }
.attr-tip-card p {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
    margin: 0;
}

/* ============================================================
   8. THINGS-TO-DO / ACTIVITY CARDS — compact horizontal layout
   ============================================================ */
.attr-thing-card, .attr-trail-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5) var(--spacing-6);
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: var(--transition-premium);
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-direction: column;
}
/* Top accent line */
.attr-thing-card::after, .attr-trail-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--gradient-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.40s cubic-bezier(0.4, 0, 0.2, 1);
}
.attr-thing-card:hover, .attr-trail-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-premium);
    border-color: var(--color-gold);
}
.attr-thing-card:hover::after, .attr-trail-card:hover::after { transform: scaleX(1); }

/* Compact icon + number row */
.attr-thing-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-4);
}
.attr-thing-icon, .attr-activity-icon {
    width: 48px;
    height: 48px;
    background: var(--color-gold-bg);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold);
    font-size: var(--text-lg);
    transition: var(--transition-elegant);
    box-shadow: 0 3px 8px var(--color-gold-glow-sm);
    flex-shrink: 0;
}
.attr-thing-card:hover .attr-thing-icon,
.attr-thing-card:hover .attr-activity-icon {
    background: var(--color-gold);
    color: var(--color-navy);
    box-shadow: var(--shadow-gold);
    transform: scale(1.06);
}
.attr-thing-number {
    width: 26px;
    height: 26px;
    background: var(--color-navy);
    color: var(--color-gold);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    transition: var(--transition-elegant);
    letter-spacing: 0;
    flex-shrink: 0;
}
.attr-thing-card:hover .attr-thing-number {
    background: var(--color-gold);
    color: var(--color-navy);
}
.attr-thing-title, .attr-trail-title {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-2);
    transition: color var(--transition-fast);
    line-height: var(--leading-snug);
}
.attr-thing-card:hover .attr-thing-title,
.attr-trail-card:hover .attr-trail-title { color: var(--color-navy-deep); }

.attr-trail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-4);
}
.attr-trail-icon {
    font-size: var(--text-xl);
    color: var(--color-gold);
    transition: transform var(--transition-elegant), color var(--transition-fast);
}
.attr-trail-card:hover .attr-trail-icon {
    transform: scale(1.12);
    color: var(--color-navy);
}

/* ============================================================
   9. CTA SECTION — refined, not oversized
   ============================================================ */
.attr-detail-cta {
    background: linear-gradient(135deg,
        var(--color-gold-bg) 0%,
        var(--bg-primary) 50%,
        var(--color-green-bg) 100%);
    padding: var(--spacing-16) 0;
    border-top: 1px solid var(--border-gold);
    border-bottom: 1px solid var(--border-gold);
    position: relative;
    overflow: hidden;
}
.attr-detail-cta::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 220px; height: 220px;
    background: radial-gradient(circle, var(--color-gold-glow) 0%, transparent 65%);
    pointer-events: none;
}
.attr-detail-cta::after {
    content: '';
    position: absolute;
    bottom: -60px; left: -60px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, var(--color-green-pale) 0%, transparent 65%);
    pointer-events: none;
}
.attr-detail-cta .container { position: relative; z-index: 2; }
.attr-detail-cta h2 {
    font-family: var(--font-display);
    font-size: clamp(var(--text-2xl), 3.5vw, var(--text-4xl));
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    margin-bottom: var(--spacing-3);
}

/* Book-now CTA */
.btn-book-now {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3-5) var(--spacing-8);
    background: var(--gradient-primary);
    color: var(--color-white);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-sm);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    border-radius: var(--radius-full);
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-elegant);
    box-shadow: var(--shadow-navy);
    position: relative;
    overflow: hidden;
    min-height: 48px;
}
.btn-book-now::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--color-white-20), transparent);
    transform: translateX(-100%);
    transition: transform 0.65s ease;
}
.btn-book-now:hover {
    transform: translateY(-2px);
    box-shadow: var(--glow-navy);
    color: var(--color-white);
    text-decoration: none;
}
.btn-book-now:hover::before { transform: translateX(100%); }

/* ============================================================
   10. OVERVIEW SECTION
   ============================================================ */
.attr-detail-description {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
}
.attr-detail-description p:first-of-type::first-letter {
    font-family: var(--font-display);
    font-size: 3em;
    font-weight: var(--font-weight-bold);
    float: left;
    line-height: 0.78;
    padding-right: var(--spacing-2);
    padding-top: var(--spacing-1);
    color: var(--color-gold-dark);
}

/* Quick facts — compact */
.attr-detail-quick-facts {
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    background: var(--bg-primary);
    transition: var(--transition-premium);
}
.attr-detail-quick-facts:hover { box-shadow: var(--shadow-lg); border-color: var(--color-gold); }
.attr-detail-quick-facts .card-header {
    background: linear-gradient(135deg, var(--color-gold-bg), var(--bg-secondary));
    border-bottom: 1px solid var(--border-gold);
    padding: var(--spacing-4) var(--spacing-5);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.attr-detail-quick-facts .card-header h3 {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
.attr-detail-quick-facts .card-header h3 i { color: var(--color-gold); }
.attr-detail-quick-facts .card-body { padding: var(--spacing-5); }
.attr-detail-quick-facts h4 {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-navy);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    margin-bottom: var(--spacing-2);
    display: flex;
    align-items: center;
    gap: var(--spacing-1-5);
}
.attr-detail-quick-facts h4 i { color: var(--color-gold); }

/* ============================================================
   11. SIDEBAR CARDS — compact
   ============================================================ */
.attr-detail-map-card,
.attr-detail-book-card {
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    background: var(--bg-primary);
    transition: var(--transition-premium);
    margin-bottom: var(--spacing-4);
}
.attr-detail-map-card:hover,
.attr-detail-book-card:hover {
    box-shadow: var(--shadow-premium);
    border-color: var(--color-gold);
    transform: translateY(-4px);
}

/* Map mini-preview */
.attr-detail-map-preview {
    height: 180px;
    position: relative;
    background: var(--bg-secondary);
    overflow: hidden;
    z-index: 0;
}
.attr-detail-map-preview .leaflet-container,
#map-preview-leaflet.leaflet-container {
    height: 100% !important;
    width: 100% !important;
    z-index: 0;
}
.attr-detail-map-preview .leaflet-control-container { display: none; }

.attr-detail-map-card .p-4,
.attr-detail-map-card .p-3 {
    padding: var(--spacing-4) !important;
}
.attr-detail-map-card h3 {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-2);
}
.attr-detail-map-card .btn {
    font-size: var(--text-sm);
    padding: var(--spacing-2-5) var(--spacing-4);
}

/* Book card header */
.attr-detail-book-card .card-header,
.card .card-header.bg-primary {
    background: var(--gradient-primary) !important;
    padding: var(--spacing-4) var(--spacing-5);
    border-bottom: none;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.attr-detail-book-card .card-header h3,
.card .card-header.bg-primary h3 {
    color: var(--color-white);
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
.attr-detail-book-card .card-body { padding: var(--spacing-5); }

/* Weather widget */
.attr-detail-weather-placeholder {
    background: linear-gradient(135deg, var(--color-gold-bg), var(--bg-green-light));
    border-radius: var(--radius-lg);
    padding: var(--spacing-4);
    text-align: center;
}
.attr-detail-weather-temp {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gold-dark);
    line-height: 1;
    margin-bottom: var(--spacing-1);
}
.attr-detail-weather-desc {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-3);
}
.attr-detail-weather-info {
    display: flex;
    justify-content: center;
    gap: var(--spacing-5);
    font-size: var(--text-sm);
    color: var(--text-muted);
}

/* ============================================================
   12. PHOTO GALLERY
   ============================================================ */
.gallery-item {
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--border-gold);
    position: relative;
    aspect-ratio: 4/3;
    box-shadow: var(--shadow-xs);
    transition: var(--transition-premium);
    cursor: pointer;
    margin-bottom: var(--spacing-5);
}
.gallery-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-dark-30);
    opacity: 0;
    transition: opacity var(--transition-elegant);
    pointer-events: none;
    z-index: 1;
}
.gallery-item:hover {
    box-shadow: var(--shadow-premium);
    border-color: var(--color-gold);
    transform: translateY(-5px);
}
.gallery-item:hover::after { opacity: 1; }
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    content: '\f00e';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    color: var(--color-white);
    font-size: var(--text-2xl);
    z-index: 3;
    opacity: 0;
    transition: all var(--transition-elegant);
}
.gallery-item:hover::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ============================================================
   13. MAIN INTERACTIVE MAP
   ============================================================ */
.attr-detail-map-container {
    height: 480px;
    width: 100%;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--border-gold);
    box-shadow: var(--shadow-lg);
    transition: var(--transition-premium);
    position: relative;
    z-index: 0;
}
.attr-detail-map-container:hover {
    box-shadow: var(--shadow-premium);
    border-color: var(--color-gold);
}
.attr-detail-map-container .leaflet-container,
#destination-map.leaflet-container {
    height: 100% !important;
    width: 100% !important;
    z-index: 0;
    border-radius: var(--radius-xl);
}

/* ============================================================
   14. RELATED DESTINATIONS & TOUR PACKAGE CARDS — compact
   ============================================================ */
#related-destinations-grid .card,
#tour-packages-grid .card {
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: var(--transition-premium);
    background: var(--bg-primary);
}
#related-destinations-grid .card:hover,
#tour-packages-grid .card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-premium);
    border-color: var(--color-gold);
}
#related-destinations-grid .card img,
#tour-packages-grid .card img { transition: transform 0.5s ease; }
#related-destinations-grid .card:hover img,
#tour-packages-grid .card:hover img { transform: scale(1.05); }

#tour-packages-grid .card .badge {
    position: absolute;
    top: var(--spacing-3);
    right: var(--spacing-3);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--ls-wide);
    border-radius: var(--radius-full);
    padding: var(--spacing-1) var(--spacing-3);
}
#tour-packages-grid .card .card-body { padding: var(--spacing-4) var(--spacing-5); }
#tour-packages-grid .card .card-footer {
    background: transparent;
    border-top: 1px solid var(--border-secondary);
    padding: var(--spacing-3) var(--spacing-4);
}
#tour-packages-grid .card .card-title { font-size: var(--text-base); margin-bottom: var(--spacing-2); }
#tour-packages-grid .card .card-text { font-size: var(--text-sm); }

/* CTA wrapper in packages */
.premium-cta-wrapper {
    background: linear-gradient(135deg, var(--color-gold-bg), var(--color-green-bg)) !important;
    border: 1px solid var(--border-gold) !important;
    border-radius: var(--radius-xl) !important;
    padding: var(--spacing-8) !important;
}

/* ============================================================
   15. TESTIMONIALS CAROUSEL NAV FIX
   
   The testimonials template generates:
     .sv-carousel-shell
       .sv-nav.sv-nav--prev   (arrow button LEFT)
       .sv-track              (Bootstrap carousel)
       .sv-nav.sv-nav--next   (arrow button RIGHT)
     .sv-dots                 (dot indicators)

   The issue: .sv-nav buttons exist in the template HTML but
   the Bootstrap .carousel-control-prev / .carousel-control-next
   inside .sv-track are hidden via CSS. The sv-nav buttons
   sit OUTSIDE the track — they must call the Bootstrap carousel.
   The fix is to ensure template-testimonials.css nav rules
   apply and override any conflicting Bootstrap display rules.
   ============================================================ */

/* Force the shell layout when testimonials load on this page */
#testimonials-container #testimonials .sv-carousel-shell,
#testimonials .sv-carousel-shell {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    z-index: 2 !important;
}
#testimonials-container #testimonials .sv-track,
#testimonials .sv-track {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

/* Ensure sv-nav buttons are always visible and clickable */
#testimonials-container .sv-nav,
#testimonials .sv-nav {
    flex-shrink: 0 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: var(--radius-full) !important;
    border: 1.5px solid var(--border-gold) !important;
    background: var(--color-white-90) !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: var(--shadow-sm) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: var(--color-navy) !important;
    transition: var(--transition-elegant) !important;
    pointer-events: auto !important;
    z-index: 10 !important;
    position: relative !important;
}
#testimonials-container .sv-nav--prev,
#testimonials .sv-nav--prev { margin-right: var(--spacing-3) !important; }

#testimonials-container .sv-nav--next,
#testimonials .sv-nav--next { margin-left: var(--spacing-3) !important; }

#testimonials-container .sv-nav:hover,
#testimonials .sv-nav:hover {
    background: var(--gradient-gold) !important;
    border-color: var(--color-gold) !important;
    box-shadow: var(--shadow-gold) !important;
    color: var(--color-navy-deep) !important;
    transform: scale(1.1) !important;
}

/* Dots */
#testimonials-container .sv-dots,
#testimonials .sv-dots {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--spacing-2) !important;
    margin-top: var(--spacing-6) !important;
    z-index: 2 !important;
    position: relative !important;
}
#testimonials-container .sv-dot,
#testimonials .sv-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: var(--radius-full) !important;
    border: none !important;
    background: var(--color-gold-glow) !important;
    opacity: 0.5 !important;
    cursor: pointer !important;
    transition: var(--transition-elegant) !important;
    padding: 0 !important;
}
#testimonials-container .sv-dot.active,
#testimonials .sv-dot.active,
#testimonials-container .sv-dot[aria-current="true"],
#testimonials .sv-dot[aria-current="true"] {
    width: 26px !important;
    border-radius: var(--radius-sm) !important;
    background: var(--gradient-gold) !important;
    opacity: 1 !important;
}

/* ============================================================
   16. NEWSLETTER SECTION
   ============================================================ */
.premium-newsletter {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-primary));
    border-top: 1px solid var(--border-secondary);
}
.newsletter-content {
    background: var(--bg-primary);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-xl);
    padding: var(--spacing-8) var(--spacing-10);
    box-shadow: var(--shadow-md);
    position: relative;
    overflow: hidden;
}
.newsletter-content::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 160px; height: 160px;
    background: radial-gradient(circle, var(--color-gold-glow) 0%, transparent 65%);
    pointer-events: none;
}
.newsletter-content h3 {
    font-family: var(--font-display);
    font-size: clamp(var(--text-xl), 2.5vw, var(--text-2xl));
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-2);
}

/* ============================================================
   17. BACK-TO-TOP
   ============================================================ */
#back-to-top {
    position: fixed;
    bottom: var(--spacing-7);
    right: var(--spacing-7);
    width: 44px;
    height: 44px;
    background: var(--gradient-primary);
    color: var(--color-gold);
    border: none;
    border-radius: var(--radius-full);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--z-index-fixed);
    box-shadow: var(--shadow-navy);
    cursor: pointer;
    transition: var(--transition-elegant);
    font-size: var(--text-sm);
}
#back-to-top:hover {
    transform: translateY(-3px);
    box-shadow: var(--glow-navy);
    background: var(--gradient-gold);
    color: var(--color-navy);
}
#back-to-top.show { display: flex; }

/* ============================================================
   18. SECTION BACKGROUNDS
   ============================================================ */
.attr-detail-tips     { background: var(--bg-secondary); }
.attr-detail-overview { background: var(--bg-primary); }
.attr-detail-things   { background: var(--bg-secondary); }
.attr-detail-hiking   { background: var(--bg-primary); }
.attr-detail-gallery  { background: var(--bg-secondary); }
.attr-detail-map      { background: var(--bg-primary); }
.attr-detail-related  { background: var(--bg-secondary); }
.attr-detail-tours    { background: var(--bg-primary); }

/* ============================================================
   19. INLINE LOADING / ERROR STATES
   ============================================================ */
.attr-loading-overlay { padding: var(--spacing-16) 0; text-align: center; }
.attr-error-message   { padding: var(--spacing-16) 0; text-align: center; }

/* ============================================================
   20. LEAFLET BRAND INTEGRATION
   ============================================================ */
.leaflet-popup-content-wrapper {
    background: var(--bg-primary) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    border: 1px solid var(--border-gold) !important;
    padding: 0 !important;
}
.leaflet-popup-content {
    margin: var(--spacing-3) var(--spacing-4) !important;
    font-family: var(--font-primary) !important;
    font-size: var(--text-sm) !important;
    color: var(--text-secondary) !important;
    line-height: var(--leading-normal) !important;
    min-width: 140px;
}
.leaflet-popup-tip { background: var(--bg-primary) !important; }
.leaflet-popup-close-button {
    color: var(--color-navy) !important;
    font-size: var(--text-base) !important;
    top: var(--spacing-2) !important;
    right: var(--spacing-2) !important;
    font-weight: var(--font-weight-bold) !important;
}
.leaflet-popup-close-button:hover { color: var(--color-gold) !important; }
.leaflet-control-zoom a {
    background: var(--bg-primary) !important;
    color: var(--color-navy) !important;
    border-color: var(--border-primary) !important;
    font-weight: var(--font-weight-bold) !important;
    transition: var(--transition-fast) !important;
}
.leaflet-control-zoom a:hover {
    background: var(--color-navy) !important;
    color: var(--color-gold) !important;
}
.leaflet-control-zoom {
    border: none !important;
    box-shadow: var(--shadow-md) !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden;
}
.leaflet-control-attribution {
    background: rgba(255,255,255,0.9) !important;
    backdrop-filter: blur(8px);
    font-size: 0.65rem !important;
    color: var(--text-lighter) !important;
    padding: 2px var(--spacing-2) !important;
}
.leaflet-control-attribution a { color: var(--color-navy) !important; }

/* ============================================================
   21. KEYFRAMES
   ============================================================ */
@keyframes tt-spin {
    to { transform: rotate(360deg); }
}
@keyframes tt-fade-up {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes tt-expand-line {
    from { width: 0; opacity: 0; }
    to   { width: 56px; opacity: 1; }
}
@keyframes tt-shimmer-load {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@keyframes tt-progress {
    from { width: 0%; }
    to   { width: 80%; }
}
@keyframes tt-glow-pulse {
    0%, 100% { box-shadow: 0 0 6px var(--color-gold-glow-sm); }
    50%       { box-shadow: 0 0 16px var(--color-gold-glow); }
}
@keyframes tt-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-5px); }
}
.tt-map-marker { animation: tt-float 2.5s ease-in-out infinite; }

/* ============================================================
   22. RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
    .attr-detail-hero-wrapper { height: 72vh; min-height: 500px; }
    .attr-detail-map-container { height: 400px; }
    .newsletter-content { padding: var(--spacing-7); }
}
@media (max-width: 767.98px) {
    .attr-detail-hero-wrapper { height: 64vh; min-height: 440px; }
    .attr-detail-title { font-size: clamp(1.8rem, 7vw, 2.8rem) !important; }
    .attr-detail-quick-info .btn { font-size: 0.65rem !important; padding: var(--spacing-1-5) var(--spacing-3) !important; }
    .attr-detail-map-container { height: 340px; }
    .attr-tip-card, .attr-thing-card, .attr-trail-card { padding: var(--spacing-5); }
    .newsletter-content { padding: var(--spacing-5); }
    #back-to-top { bottom: var(--spacing-5); right: var(--spacing-5); }
}
@media (max-width: 575.98px) {
    .attr-detail-hero-wrapper { height: 58vh; min-height: 380px; }
    .attr-detail-title { font-size: clamp(1.6rem, 6vw, 2.2rem) !important; }
    .loading-progress { width: 200px; }
    .attr-detail-map-container { height: 280px; }
}

/* ============================================================
   23. ACCESSIBILITY
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}
@media (prefers-contrast: high) {
    .attr-tip-card, .attr-thing-card, .attr-trail-card,
    .gallery-item, #tour-packages-grid .card,
    .attr-detail-map-card, .attr-detail-book-card,
    .attr-detail-quick-facts { border-width: 2px !important; }
}

/* ============================================================
   END — ranshire TRAVELS ATTR-DETAILS v4.0.0
   ============================================================ */