/**
 * attr-details.css — Attraction Detail Page Styles
 * Annora Ceylon — Ceylon Midnight Obsidian · Antique Gold · Dark Luxury Theme
 *
 * ⚠  ALL values reference variables defined in main.css — zero hardcoded hex,
 *    zero hardcoded fonts, zero hardcoded spacing outside of main.css tokens.
 * ⚠  DO NOT add inline CSS or JS to attr-details.html.
 * ⚠  Hero section (sections 5) is owned by attr-details.js —
 *    .attr-detail-hero-wrapper, -image, -overlay, -content are untouched.
 * ⚠  Map section (section 13) uses a dark filter wrapper over the Google Maps
 *    iframe + a dark Leaflet tile provider for the mini-map.
 *
 * Sections:
 *   1.  Loading overlay
 *   2.  Error overlays
 *   3.  Main content wrapper
 *   4.  Breadcrumb
 *   5.  Hero section (preserved — minimal additions only)
 *   6.  Section headers
 *   7.  Travel tip cards
 *   8.  Things-to-do / activity cards
 *   9.  CTA section
 *  10.  Overview section
 *  11.  Sidebar cards (map preview + booking + weather)
 *  12.  Photo gallery
 *  13.  Interactive map (dark filter treatment)
 *  14.  Related destinations & tour package cards
 *  15.  Testimonials carousel nav fix
 *  16.  Shared button helpers
 *  17.  Section backgrounds
 *  18.  Inline loading / error states
 *  19.  Leaflet brand integration (dark theme)
 *  20.  Keyframes
 *  21.  Responsive
 *  22.  Accessibility
 */

/* ─────────────────────────────────────────────────────────────
   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 OVERLAYS (full-screen + inline)
───────────────────────────────────────────────────────────────*/
.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);
}

.ad-error-icon  { color: var(--color-gold); }
.ad-error-title { color: var(--text-primary); font-family: var(--font-display); }
.ad-error-lead  { color: var(--text-muted); }


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


/* ─────────────────────────────────────────────────────────────
   4.  BREADCRUMB
───────────────────────────────────────────────────────────────*/
.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;
}
.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); }
.breadcrumb-item.active    { color: var(--text-primary); font-weight: var(--font-weight-semibold); }


/* ─────────────────────────────────────────────────────────────
   5.  HERO SECTION — PRESERVED EXACTLY
   attr-details.js requires: #hero-wrapper, #destination-hero-image,
   .attr-detail-hero-overlay, .attr-detail-hero-content,
   #destination-category, #destination-name, #destination-location,
   .attr-detail-quick-info
───────────────────────────────────────────────────────────────*/
.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(13, 13, 15, 0.10) 0%,
        rgba(13, 13, 15, 0.38) 38%,
        rgba(13, 13, 15, 0.72) 70%,
        rgba(13, 13, 15, 0.90) 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(var(--color-gold-rgb), 0.18);
    border: 1px solid rgba(var(--color-gold-rgb), 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(13, 13, 15, 0.55) !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 — glass, matching dark aesthetic */
.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(--gradient-gold) !important;
    border-color: var(--color-gold) !important;
    color: var(--color-navy-deep) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-gold) !important;
}


/* ─────────────────────────────────────────────────────────────
   6.  SECTION HEADERS — consistent across all sections
───────────────────────────────────────────────────────────────*/
.ad-section-title {
    font-family: var(--font-display);
    font-size: clamp(var(--text-xl), 2.8vw, var(--text-3xl));
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: var(--leading-snug);
    letter-spacing: var(--ls-tight);
    margin-bottom: var(--spacing-2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
}

.ad-section-subtitle {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--spacing-1);
}

/* Animated icon badge next to section title */
.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);
    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;
}
.ad-section-title:hover .section-icon,
h2:hover .section-icon {
    background: var(--color-gold);
    color: var(--color-navy-deep);
    box-shadow: var(--shadow-gold);
}

/* Gold accent rule */
.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
───────────────────────────────────────────────────────────────*/
.attr-tip-card {
    background: var(--gradient-card);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-xl);
    padding: 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 bar */
.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-deep);
    box-shadow: var(--shadow-gold);
    transform: scale(1.08) rotate(-4deg);
}
/* Override any Bootstrap color utilities on icons inside tip cards */
.attr-tip-icon i.text-warning,
.attr-tip-icon i.text-primary { color: var(--color-gold) !important; }
.attr-tip-card:hover .attr-tip-icon i.text-warning,
.attr-tip-card:hover .attr-tip-icon i.text-primary { color: var(--color-navy-deep) !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-gold-light); }
.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 & TRAIL CARDS
───────────────────────────────────────────────────────────────*/
.attr-thing-card,
.attr-trail-card {
    background: var(--gradient-card);
    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 bar */
.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); }

.attr-thing-header,
.attr-trail-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-deep);
    box-shadow: var(--shadow-gold);
    transform: scale(1.06);
}

.attr-thing-number {
    width: 26px;
    height: 26px;
    background: var(--color-navy-mid);
    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);
    flex-shrink: 0;
}
.attr-thing-card:hover .attr-thing-number {
    background: var(--color-gold);
    color: var(--color-navy-deep);
}

.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-gold-light); }

.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-gold-light);
}


/* ─────────────────────────────────────────────────────────────
   9.  CTA SECTION
───────────────────────────────────────────────────────────────*/
.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; }

.ad-cta-title {
    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);
}
.ad-cta-lead {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    color: var(--text-muted);
    line-height: var(--leading-relaxed);
}

/* Book-now primary button */
.btn-book-now {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3-5) var(--spacing-8);
    background: var(--gradient-gold);
    color: var(--color-navy-deep);
    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-gold);
    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 {
    background: var(--gradient-gold-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(var(--color-gold-rgb), 0.45);
    color: var(--color-navy-deep);
    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);
}

/* Quick facts card */
.attr-detail-quick-facts {
    border: 1px solid var(--border-gold) !important;
    border-radius: var(--radius-xl) !important;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    background: var(--gradient-card) !important;
    transition: var(--transition-premium);
}
.attr-detail-quick-facts:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--color-gold) !important;
}
.attr-detail-quick-facts .card-header {
    background: linear-gradient(135deg, var(--color-gold-bg), var(--bg-secondary)) !important;
    border-bottom: 1px solid var(--border-gold) !important;
    padding: var(--spacing-4) var(--spacing-5);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
}
.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) !important;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}
.attr-detail-quick-facts .card-header h3 i { color: var(--color-gold) !important; }
.attr-detail-quick-facts .card-body { padding: var(--spacing-5) !important; background: transparent !important; }

.ad-facts-label {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-gold) !important;
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    margin-bottom: var(--spacing-2);
    display: flex;
    align-items: center;
    gap: var(--spacing-1-5);
}
.ad-facts-label i { color: var(--color-gold) !important; }
.ad-facts-value {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}
.ad-facts-list {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}


/* ─────────────────────────────────────────────────────────────
   11.  SIDEBAR CARDS — map preview, booking, weather
───────────────────────────────────────────────────────────────*/
.attr-detail-map-card,
.attr-detail-book-card,
.ad-weather-card {
    border: 1px solid var(--border-gold) !important;
    border-radius: var(--radius-xl) !important;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    background: var(--gradient-card) !important;
    transition: var(--transition-premium);
    margin-bottom: var(--spacing-4);
}
.attr-detail-map-card:hover,
.attr-detail-book-card:hover,
.ad-weather-card:hover {
    box-shadow: var(--shadow-premium);
    border-color: var(--color-gold) !important;
    transform: translateY(-4px);
}

/* Mini Leaflet preview */
.attr-detail-map-preview {
    height: 180px;
    position: relative;
    background: var(--color-navy-deep);
    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 { 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);
}
.ad-icon-gold    { color: var(--color-gold); }
.ad-icon-danger  { color: var(--color-error-text); }
.ad-sidebar-location-text { font-size: var(--text-sm); color: var(--text-muted); }

/* Card headers (booking + weather) */
.attr-detail-book-card .card-header,
.ad-weather-card .card-header,
.card .card-header.bg-primary {
    background: var(--gradient-primary) !important;
    padding: var(--spacing-4) var(--spacing-5);
    border-bottom: 1px solid var(--border-secondary) !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
}
.attr-detail-book-card .card-header h3,
.ad-weather-card .card-header h3,
.card .card-header.bg-primary h3 {
    color: var(--color-gold-light) !important;
    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-header h3 i,
.ad-weather-card .card-header h3 i,
.card .card-header.bg-primary h3 i { color: var(--color-gold) !important; }

.attr-detail-book-card .card-body { padding: var(--spacing-5) !important; background: transparent !important; }
.ad-sidebar-body-text { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-relaxed); }

/* Booking card button row */
.attr-detail-book-card .d-grid { gap: var(--spacing-2); }

/* 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;
}
.ad-weather-icon { color: var(--color-gold) !important; }
.attr-detail-weather-temp {
    font-family: var(--font-display);
    font-size: var(--text-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gold);
    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);
    background: var(--color-navy-deep);
}
.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;
    filter: brightness(0.90) saturate(1.05);
}
.gallery-item:hover img { transform: scale(1.06); filter: brightness(0.95) saturate(1.10); }

/* Magnify icon on hover */
.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-gold-light);
    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.  INTERACTIVE MAP — DARK THEME TREATMENT
   Google Maps iframe (injected by renderMap()) inside
   .attr-detail-map-wrapper which applies a dark CSS filter.
   The filter inverts the light map to a near-dark tone then
   hue-rotates back so colours remain recognisable.
   Leaflet mini-map uses a dark tile URL (see attr-details.js).
───────────────────────────────────────────────────────────────*/
.attr-detail-map-wrapper {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    border: 1px solid var(--border-gold);
    box-shadow: var(--shadow-lg);
    transition: var(--transition-premium);
    /* Dark map filter — inverts the light Google Maps tile to obsidian,
       then hue-rotate(180deg) corrects vegetation and water hues */
    filter: invert(0.92) hue-rotate(180deg) saturate(0.85) brightness(0.88);
}
.attr-detail-map-wrapper:hover {
    box-shadow: var(--shadow-premium);
    border-color: var(--color-gold);
}
/* Remove the filter from the Leaflet popup so text stays readable */
.attr-detail-map-wrapper .leaflet-popup-content-wrapper,
.attr-detail-map-wrapper .leaflet-popup-tip {
    filter: invert(1) hue-rotate(180deg) !important;
}

.attr-detail-map-container {
    height: 480px;
    width: 100%;
    position: relative;
    z-index: 0;
}
.attr-detail-map-container .leaflet-container,
#destination-map.leaflet-container {
    height: 100% !important;
    width: 100% !important;
    z-index: 0;
    border-radius: 0;
}
/* iframe inserted by renderMap() */
.attr-detail-map-container iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
}


/* ─────────────────────────────────────────────────────────────
   14.  RELATED DESTINATIONS & TOUR PACKAGE CARDS
───────────────────────────────────────────────────────────────*/
#related-destinations-grid .card,
#tour-packages-grid .card {
    border: 1px solid var(--border-gold) !important;
    border-radius: var(--radius-xl) !important;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: var(--transition-premium);
    background: var(--gradient-card) !important;
}
#related-destinations-grid .card:hover,
#tour-packages-grid .card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-premium);
    border-color: var(--color-gold) !important;
}
#related-destinations-grid .card img,
#tour-packages-grid .card img {
    transition: transform 0.5s ease;
    filter: brightness(0.88) saturate(1.05);
}
#related-destinations-grid .card:hover img,
#tour-packages-grid .card:hover img {
    transform: scale(1.05);
    filter: brightness(0.95) saturate(1.10);
}
#related-destinations-grid .card .card-body,
#tour-packages-grid .card .card-body {
    padding: var(--spacing-4) var(--spacing-5) !important;
    background: transparent !important;
}
#related-destinations-grid .card .card-title,
#tour-packages-grid .card .card-title {
    font-family: var(--font-display);
    font-size: var(--text-base);
    color: var(--text-primary);
    margin-bottom: var(--spacing-2);
}
#related-destinations-grid .card .card-text,
#tour-packages-grid .card .card-text {
    font-size: var(--text-sm);
    color: var(--text-muted);
}
#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-footer {
    background: transparent !important;
    border-top: 1px solid var(--border-secondary) !important;
    padding: var(--spacing-3) var(--spacing-4) !important;
}

/* Package badge colour variants — token-only */
.ad-badge-accent  { background: var(--gradient-gold) !important;  color: var(--color-navy-deep) !important; }
.ad-badge-primary { background: var(--gradient-primary) !important; color: var(--color-gold-light) !important; }
.ad-badge-green   { background: var(--gradient-green) !important;  color: var(--color-white) !important; }

/* More packages CTA wrapper */
.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;
}
.ad-packages-cta-title { color: var(--text-primary) !important; font-family: var(--font-display); }
.ad-packages-cta-text  { color: var(--text-muted) !important; font-size: var(--text-base); }


/* ─────────────────────────────────────────────────────────────
   15.  TESTIMONIALS CAROUSEL NAV FIX
   The template generates: .sv-carousel-shell > .sv-nav + .sv-track + .sv-nav
   and .sv-dots. These rules ensure layout and dark styling.
───────────────────────────────────────────────────────────────*/
#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;
}

/* Arrow buttons — dark theme (obsidian background, gold on hover) */
#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(--gradient-card) !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-gold) !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-gray-400) !important;
    opacity: 0.50 !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.  SHARED BUTTON HELPERS
───────────────────────────────────────────────────────────────*/

/* Ghost / outline button (dark-theme safe) */
.ad-btn-ghost {
    background: transparent;
    color: var(--color-gold);
    border: 1.5px solid rgba(var(--color-gold-rgb), 0.50);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-3) var(--spacing-7);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-sm);
    letter-spacing: var(--ls-wide);
    transition: var(--transition-smooth);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ad-btn-ghost:hover {
    background: var(--color-gold-bg-hover);
    border-color: var(--color-gold);
    color: var(--color-gold-light);
    transform: translateY(-2px);
    text-decoration: none;
}

/* Subtle outline button for sidebar links / card footers */
.ad-btn-outline {
    background: transparent;
    color: var(--color-gold);
    border: 1px solid rgba(var(--color-gold-rgb), 0.40);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-2) var(--spacing-5);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--text-sm);
    letter-spacing: var(--ls-wide);
    transition: var(--transition-smooth);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ad-btn-outline:hover {
    background: var(--color-gold-bg-hover);
    border-color: var(--color-gold);
    color: var(--color-gold-light);
    transform: translateY(-1px);
    text-decoration: none;
}

/* Inline spinner */
.ad-inline-spinner {
    display: inline-block;
    width: 48px;
    height: 48px;
    border: 3px solid var(--border-primary);
    border-top-color: var(--color-gold);
    border-radius: var(--radius-full);
    animation: tt-spin 0.85s linear infinite;
    margin-bottom: var(--spacing-4);
}
.ad-inline-loading-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--text-primary);
    margin-bottom: var(--spacing-2);
}
.ad-inline-loading-text {
    font-size: var(--text-base);
    color: var(--text-muted);
}

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


/* ─────────────────────────────────────────────────────────────
   17.  SECTION BACKGROUNDS — alternating dark surfaces
───────────────────────────────────────────────────────────────*/
.attr-detail-tips     { background: var(--bg-secondary); padding: var(--spacing-16) 0; }
.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); }


/* ─────────────────────────────────────────────────────────────
   18.  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; }


/* ─────────────────────────────────────────────────────────────
   19.  LEAFLET BRAND INTEGRATION — dark theme
   Mini-map popup / controls styled to the dark palette.
───────────────────────────────────────────────────────────────*/
.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(--text-muted) !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-secondary) !important;
    color: var(--text-secondary) !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-mid) !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: var(--bg-overlay) !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-gold-dark) !important; }


/* ─────────────────────────────────────────────────────────────
   20.  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; }


/* ─────────────────────────────────────────────────────────────
   21.  RESPONSIVE
───────────────────────────────────────────────────────────────*/
@media (max-width: 991.98px) {
    .attr-detail-hero-wrapper    { height: 72vh; min-height: 500px; }
    .attr-detail-map-container   { height: 400px; }
}
@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); }
    .ad-btn-ghost                { width: 100%; }
}
@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; }
    #back-to-top                 { bottom: var(--spacing-5); right: var(--spacing-5); }
}


/* ─────────────────────────────────────────────────────────────
   22.  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 — ANNORA CEYLON ATTR-DETAILS v5.0 — DARK LUXURY THEME
   www.annoraceylon.com · Designed by Perlyn-IT
───────────────────────────────────────────────────────────────*/