/* css/main.css - Ba Ngoai Homestay
   Chinh sua styles tai day
*/

html {
            scroll-behavior: smooth;
        }

        .hero-overlay {
            background: linear-gradient(to bottom, rgba(30, 70, 32, 0.4), rgba(30, 70, 32, 0.9));
        }

        .tour-card,
        .shop-card,
        .gallery-item,
        .press-card {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .tour-card:hover,
        .shop-card:hover,
        .press-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .gallery-item:hover .gallery-overlay {
            opacity: 1;
        }

        .gallery-item:hover img {
            transform: scale(1.1);
        }

        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }

        ::-webkit-scrollbar-thumb {
            background: #1E4620;
            border-radius: 4px;
        }

        /* Chat bubble animation */
        @keyframes message-pop {
            0% {
                transform: scale(0.9);
                opacity: 0;
            }

            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        .chat-message {
            animation: message-pop 0.3s ease-out forwards;
        }

        /* Scroll Animations */
        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease-out;
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* Toast Animation */
        @keyframes toast-slide-in {
            0% {
                transform: translateX(100%);
                opacity: 0;
            }

            100% {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes toast-slide-out {
            0% {
                transform: translateX(0);
                opacity: 1;
            }

            100% {
                transform: translateX(100%);
                opacity: 0;
            }
        }

        .toast-enter {
            animation: toast-slide-in 0.3s ease-out forwards;
        }

        .toast-exit {
            animation: toast-slide-out 0.3s ease-in forwards;
        }

        /* ======= SCROLL PROGRESS BAR ======= */
        #scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            height: 3px;
            width: 0%;
            background: linear-gradient(to right, #F59E0B, #10B981, #F59E0B);
            background-size: 200% auto;
            z-index: 9999;
            transition: width 0.1s linear;
            animation: shimmer 2s linear infinite;
        }

        @keyframes shimmer {
            0% {
                background-position: 0% center;
            }

            100% {
                background-position: 200% center;
            }
        }

        /* ======= 3D TOUR CARDS ======= */
        .tour-card {
            transform-style: preserve-3d;
            will-change: transform;
            transition: box-shadow 0.3s ease;
        }

        .tour-card:hover {
            box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.2), 0 15px 30px -10px rgba(0, 0, 0, 0.1);
        }

        .tour-card .card-inner {
            transform-style: preserve-3d;
        }

        /* ======= FLOATING PARTICLES ======= */

        /* ======= HERO PARALLAX ======= */
        #hero-bg {
            will-change: transform;
            transition: none;
        }

        /* ======= STATS SECTION ======= */
        .stat-card {
            background: white;
            border-radius: 1.5rem;
            padding: 2rem 1.5rem;
            text-align: center;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.07);
            transition: transform 0.35s cubic-bezier(.4, 0, .2, 1), box-shadow 0.35s ease;
            position: relative;
            overflow: hidden;
        }

        .stat-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(30, 70, 32, 0.04), rgba(245, 158, 11, 0.04));
            opacity: 0;
            transition: opacity 0.3s;
        }

        .stat-card:hover::before {
            opacity: 1;
        }

        .stat-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
        }

        .stat-number {
            font-size: 3rem;
            font-weight: 900;
            line-height: 1;
            background: linear-gradient(135deg, #1E4620, #10B981);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* ======= GALLERY 3D ======= */
        .gallery-item-3d {
            transition: transform 0.5s cubic-bezier(.4, 0, .2, 1), box-shadow 0.5s ease;
            transform-style: preserve-3d;
        }

        .gallery-item-3d:hover {
            transform: scale(1.03) translateZ(20px) perspective(1000px);
            box-shadow: 0 40px 80px rgba(0, 0, 0, 0.25);
        }

        /* ======= REVIEW CARDS 3D ======= */
        .review-card {
            transition: transform 0.35s cubic-bezier(.4, 0, .2, 1), box-shadow 0.35s ease;
        }

        .review-card:hover {
            transform: translateY(-8px) rotateY(2deg) perspective(800px);
            box-shadow: 0 20px 50px rgba(30, 70, 32, 0.12);
        }

        /* ======= ANIMATED UNDERLINE NAV ======= */
        .nav-link-animated {
            position: relative;
        }

        .nav-link-animated::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 2px;
            background: #FBBF24;
            transition: width 0.3s ease;
            border-radius: 2px;
        }

        .nav-link-animated:hover::after {
            width: 100%;
        }

        /* ======= MOBILE MENU SLIDE ======= */
        #mobile-menu {
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        #mobile-menu.hidden {
            pointer-events: none;
        }

        /* ======= IMPROVED REVEALS ======= */
        .reveal {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.9s cubic-bezier(.4, 0, .2, 1), transform 0.9s cubic-bezier(.4, 0, .2, 1);
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }

        /* ======= CTA PULSE ======= */
        @keyframes cta-pulse {

            0%,
            100% {
                box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
            }

            50% {
                box-shadow: 0 0 0 14px rgba(16, 185, 129, 0);
            }
        }

        .btn-cta-pulse {
            animation: cta-pulse 2.5s infinite;
        }

        /* ======= FOOTER WAVE ======= */
        .footer-wave {
            position: absolute;
            top: -2px;
            left: 0;
            width: 100%;
            overflow: hidden;
            line-height: 0;
        }

        /* ======= ANIMATE FADE IN UP ======= */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(40px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .animate-fade-in-up {
            animation: fadeInUp 0.9s ease-out forwards;
        }

        .delay-100 {
            animation-delay: 0.1s;
            opacity: 0;
        }

        .delay-200 {
            animation-delay: 0.2s;
            opacity: 0;
        }

        .delay-300 {
            animation-delay: 0.3s;
            opacity: 0;
        }

        .delay-400 {
            animation-delay: 0.4s;
            opacity: 0;
        }

        .delay-600 {
            animation-delay: 0.6s;
            opacity: 0;
        }

        /* ======= IMAGE ZOOM ======= */
        .img-zoom {
            transition: transform 0.7s cubic-bezier(.4, 0, .2, 1);
        }

        .group:hover .img-zoom {
            transform: scale(1.08);
        }



        /* ═══════════════════════════════════════════
           MODERN UI UPGRADES 2025
        ═══════════════════════════════════════════ */

        /* — Section badge pill — */
        .section-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 18px;
            background: linear-gradient(135deg, rgba(16,185,129,0.13), rgba(245,158,11,0.08));
            border: 1px solid rgba(16,185,129,0.3);
            border-radius: 999px;
            color: #059669;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.13em;
            text-transform: uppercase;
        }
        .section-badge-orange {
            background: linear-gradient(135deg, rgba(234,88,12,0.12), rgba(245,158,11,0.08));
            border-color: rgba(234,88,12,0.25);
            color: #c2410c;
        }

        /* — Animated shimmer divider — */
        .section-divider {
            height: 3px;
            width: 64px;
            background: linear-gradient(90deg, #10B981, #F59E0B, #10B981);
            background-size: 200% auto;
            border-radius: 999px;
            margin: 1.25rem auto 0;
            animation: shimmer 3s linear infinite;
        }
        .section-divider-left {
            margin-left: 0;
        }

        /* — Gradient section heading — */
        .gradient-heading {
            background: linear-gradient(135deg, #1E4620 0%, #065f46 60%, #047857 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* — Tour card image gradient overlay (CSS only, no HTML change) — */
        .tour-card .relative.h-56,
        .tour-card .relative.h-48 {
            isolation: isolate;
        }
        .tour-card .relative.h-56::after,
        .tour-card .relative.h-48::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 55%, transparent 100%);
            opacity: 0;
            transition: opacity 0.4s ease;
            pointer-events: none;
            z-index: 1;
        }
        .tour-card:hover .relative.h-56::after,
        .tour-card:hover .relative.h-48::after {
            opacity: 1;
        }
        .tour-card .relative.h-56 > div,
        .tour-card .relative.h-48 > div {
            position: relative;
            z-index: 2;
        }

        /* — FAQ modern accordion — */
        details.faq-item {
            transition: box-shadow 0.3s ease, border-color 0.3s ease, background 0.25s ease;
        }
        details.faq-item[open] {
            background: #ffffff !important;
            border-color: rgba(16,185,129,0.3) !important;
            box-shadow: 0 6px 32px rgba(16,185,129,0.1);
        }
        details.faq-item[open] > summary {
            color: #059669;
            border-bottom: 1px solid rgba(16,185,129,0.12);
            padding-bottom: 1.25rem;
            margin-bottom: 0;
        }
        details.faq-item[open] > summary i.fa-chevron-down {
            color: #059669;
        }
        details.faq-item > summary {
            transition: color 0.2s ease;
        }

        /* — Hero secondary button animated border — */
        .btn-hero-secondary {
            position: relative;
        }
        .btn-hero-secondary::after {
            content: '';
            position: absolute;
            inset: -2px;
            background: linear-gradient(90deg, #10B981, #F59E0B, #10B981);
            background-size: 200% auto;
            border-radius: 999px;
            animation: shimmer 3s linear infinite;
            opacity: 0;
            transition: opacity 0.35s ease;
            z-index: -1;
        }
        .btn-hero-secondary:hover::after {
            opacity: 0.75;
        }

        /* — Stat card colored icon rings — */
        .stat-icon-ring {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 0.75rem;
            font-size: 1.5rem;
        }

        /* — Blog card hover upgrade — */
        .blog-card {
            transition: transform 0.35s cubic-bezier(.4,0,.2,1), box-shadow 0.35s ease !important;
        }
        .blog-card:hover {
            transform: translateY(-8px) !important;
            box-shadow: 0 24px 56px rgba(0,0,0,0.13) !important;
        }
        .blog-card img {
            transition: transform 0.6s cubic-bezier(.4,0,.2,1) !important;
        }
        .blog-card:hover img {
            transform: scale(1.08) !important;
        }

        /* — Mobile Blog Carousel (Hàng 1) — */
        .blog-row-main {
            display: flex;
            gap: 1.1rem;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            margin: 0 -1.5rem;
            padding: 0 1.5rem 1rem;
        }
        .blog-row-main::-webkit-scrollbar { display: none; }
        .blog-row-main > article {
            flex-shrink: 0;
            width: 78vw;
            max-width: 300px;
            scroll-snap-align: start;
        }
        /* Ẩn đoạn văn mô tả và link trên mobile */
        .blog-row-main > article .p-6 > p,
        .blog-row-main > article .p-6 > a {
            display: none;
        }
        /* Điều chỉnh padding card trên mobile */
        .blog-row-main > article .p-6 {
            padding: 1rem;
        }
        @media (min-width: 768px) {
            .blog-row-main {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                overflow-x: visible;
                margin: 0;
                padding: 0;
                gap: 2rem;
                scroll-snap-type: none;
            }
            .blog-row-main > article {
                width: auto;
                max-width: none;
            }
            .blog-row-main > article .p-6 > p { display: block; }
            .blog-row-main > article .p-6 > a { display: inline-block; }
            .blog-row-main > article .p-6 { padding: 1.5rem; }
        }

        /* — Swipe hint — */
        .blog-swipe-hint {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            color: #9ca3af;
            font-size: 0.72rem;
            padding: 0 0 0.75rem;
        }
        @media (min-width: 768px) { .blog-swipe-hint { display: none; } }

        /* — Category divider — */
        .blog-cat-label {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 1.75rem 0 1rem;
        }
        .blog-cat-label::before, .blog-cat-label::after {
            content: '';
            flex: 1;
            height: 1px;
        }
        .blog-cat-label::before { background: linear-gradient(90deg, transparent, #bbf7d0); }
        .blog-cat-label::after  { background: linear-gradient(90deg, #bbf7d0, transparent); }
        .blog-cat-label span {
            font-size: 0.68rem;
            font-weight: 700;
            color: #6b7280;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            white-space: nowrap;
            background: white;
            padding: 2px 8px;
            border-radius: 999px;
            border: 1px solid #d1fae5;
        }

        /* — Pickup banner gradient animate — */
        .pickup-banner {
            background: linear-gradient(135deg, #14532d, #166534, #15803d, #166534, #14532d) !important;
            background-size: 300% auto !important;
            animation: shimmer 6s linear infinite !important;
        }

        /* ═══ 🔥 PREMIUM UPGRADE — CONVERSION BOOST ═══ */
        .hero-overlay { background: linear-gradient(170deg,rgba(5,20,10,.45) 0%,rgba(15,40,20,.5) 30%,rgba(30,70,32,.75) 70%,rgba(10,25,12,.94) 100%) !important; }
        @keyframes live-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.6;transform:scale(.92)} }
        .hero-live-badge { display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:7px 16px;color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.04em;margin-bottom:1.2rem; }
        .hero-live-badge .live-dot { width:8px;height:8px;background:#4ade80;border-radius:50%;animation:live-pulse 1.6s ease-in-out infinite;flex-shrink:0; }
        .hero-trust-strip { display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:1.5rem; }
        .hero-trust-item { display:flex;align-items:center;gap:5px;color:rgba(255,255,255,.82);font-size:.75rem;font-weight:600; }
        .hero-trust-item i { color:#fbbf24; }
        .typewriter-cursor { display:inline-block;width:3px;height:.9em;background:#fbbf24;margin-left:2px;vertical-align:middle;border-radius:2px;animation:live-pulse .8s ease-in-out infinite; }
        @keyframes urgency-flash { 0%,100%{opacity:1} 50%{opacity:.8} }
        .badge-hot { display:inline-block;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;font-size:.62rem;font-weight:800;padding:3px 9px;border-radius:999px;letter-spacing:.06em;text-transform:uppercase;animation:urgency-flash 2s ease-in-out infinite;box-shadow:0 2px 8px rgba(239,68,68,.4); }
        .badge-new { display:inline-block;background:linear-gradient(135deg,#0ea5e9,#0284c7);color:#fff;font-size:.62rem;font-weight:800;padding:3px 9px;border-radius:999px;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 2px 8px rgba(14,165,233,.35); }
        .badge-limited { display:inline-block;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;font-size:.62rem;font-weight:800;padding:3px 9px;border-radius:999px;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 2px 8px rgba(245,158,11,.4); }
        .viewers-badge { display:inline-flex;align-items:center;gap:4px;font-size:.67rem;color:#fff;font-weight:600; }
        .viewers-badge .vdot { width:6px;height:6px;background:#22c55e;border-radius:50%;animation:live-pulse 1.8s ease-in-out infinite; }
        .tour-card .tour-img-wrap { position:relative;overflow:hidden; }
        .tour-card .tour-img-wrap::after { content:'';position:absolute;top:0;left:-80%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);transform:skewX(-20deg);transition:left .7s ease;pointer-events:none; }
        .tour-card:hover .tour-img-wrap::after { left:140%; }
        .tour-card:hover { box-shadow:0 32px 64px -12px rgba(0,0,0,.28),0 0 0 1px rgba(16,185,129,.12) !important; }
        .tour-quick-book { position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(20,50,22,.96),transparent);transform:translateY(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);padding:1.25rem .75rem .75rem;display:flex;gap:.5rem;z-index:5; }
        .tour-card:hover .tour-quick-book { transform:translateY(0); }
        .stars-gold { color:#f59e0b; }
        .booking-strip { background:linear-gradient(90deg,#065f46,#047857,#059669,#047857,#065f46);background-size:300% auto;animation:shimmer 5s linear infinite;color:#fff;text-align:center;padding:11px 16px;font-size:.82rem;font-weight:700;letter-spacing:.04em; }
        .booking-strip .strip-highlight { color:#fbbf24; }
        @keyframes fomo-in { 0%{transform:translateX(-120%);opacity:0} 15%{transform:translateX(6px);opacity:1} 85%{transform:translateX(0);opacity:1} 100%{transform:translateX(-120%);opacity:0} }
        .fomo-toast { position:fixed;bottom:100px;left:20px;z-index:9000;background:#fff;border-radius:14px;border-left:4px solid #10b981;box-shadow:0 8px 32px rgba(0,0,0,.16);padding:12px 16px;display:flex;align-items:center;gap:12px;max-width:290px;animation:fomo-in 5s ease-in-out forwards; }
        .fomo-toast .fomo-av { width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#10b981,#059669);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.95rem;flex-shrink:0; }
        .fomo-toast .fomo-txt { font-size:.79rem;color:#374151;line-height:1.4; }
        .fomo-toast .fomo-txt strong { color:#065f46; }
        .fomo-toast .fomo-tm { font-size:.67rem;color:#9ca3af;margin-top:2px;display:block; }
        #sticky-book-btn { position:fixed;right:24px;bottom:88px;z-index:49;transition:all .35s cubic-bezier(.4,0,.2,1); }
        #sticky-book-btn.hidden-btn { transform:translateY(130px);opacity:0;pointer-events:none; }
        @keyframes book-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.5)} 50%{box-shadow:0 0 0 12px rgba(16,185,129,0)} }
        #sticky-book-btn button { animation:book-pulse 2.5s infinite; }
        #cac-tour { background:linear-gradient(180deg,#f0fdf4 0%,#f9fafb 100%) !important; }
        @media(max-width:640px) { .hero-trust-strip{gap:10px} .hero-trust-item{font-size:.7rem} .fomo-toast{max-width:calc(100vw - 40px)} #sticky-book-btn{right:16px;bottom:80px} }
    
        /* ===== TOUR MODAL INFOGRAPHIC ===== */
        #tour-modal .infographic-timeline {
            position: relative;
        }
        #tm-schedule .bg-white {
            transition: all 0.2s ease;
        }
        #tm-schedule .group:hover .bg-white {
            transform: translateX(2px);
        }
        @keyframes slideInStep {
            from { opacity: 0; transform: translateX(-8px); }
            to   { opacity: 1; transform: translateX(0); }
        }
        #tm-schedule > div > div {
            animation: slideInStep 0.3s ease both;
        }
        #tm-schedule > div > div:nth-child(1) { animation-delay: 0.05s; }
        #tm-schedule > div > div:nth-child(2) { animation-delay: 0.10s; }
        #tm-schedule > div > div:nth-child(3) { animation-delay: 0.15s; }
        #tm-schedule > div > div:nth-child(4) { animation-delay: 0.20s; }
        #tm-schedule > div > div:nth-child(5) { animation-delay: 0.25s; }
        #tm-schedule > div > div:nth-child(6) { animation-delay: 0.30s; }
        #tm-schedule > div > div:nth-child(7) { animation-delay: 0.35s; }
        #tm-schedule > div > div:nth-child(8) { animation-delay: 0.40s; }
/* ============================================================
   FEATURE 1: SCROLL-DRIVEN MARQUEE
   ============================================================ */
.marquee-wrap { overflow: hidden; background: #fff; padding: 0 0 20px; }
.marquee-row-outer { overflow: hidden; }
.marquee-row {
    display: flex; gap: 12px; will-change: transform;
    padding: 6px 0;
}
.marquee-item {
    flex-shrink: 0; width: 300px; height: 200px;
    border-radius: 14px; overflow: hidden;
    background: #e5e7eb; cursor: pointer;
}
.marquee-item img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s ease;
}
.marquee-item:hover img { transform: scale(1.06); }
@media(min-width:768px){ .marquee-item{ width:420px; height:270px; } }

/* ============================================================
   FEATURE 2: STICKY STACKING TOUR CARDS
   ============================================================ */
.stack-container { position: relative; }
.stack-slot {
    position: relative;
    height: 88vh;
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 20px;
}
.stack-card {
    position: sticky;
    top: 80px;
    width: 100%; max-width: 820px;
    background: #fff;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,.1);
    transform-origin: top center;
    will-change: transform;
    transition: box-shadow .3s;
}
.stack-card:hover { box-shadow: 0 16px 60px rgba(0,0,0,.18); }

/* ============================================================
   FEATURE 3: MAGNETIC BUTTON
   ============================================================ */
.magnetic {
    display: inline-block;
    will-change: transform;
    transition: transform .5s cubic-bezier(.25,.46,.45,.94);
    cursor: pointer;
}
.magnetic.pulling { transition: transform .15s ease-out; }

/* ============================================================
   FEATURE 4: INTERACTIVE MAP & TESTIMONIAL SLIDER
   ============================================================ */
/* Custom Leaflet Map and Popup styling */
#map {
    z-index: 1;
}
.leaflet-popup-content-wrapper {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(8px);
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    padding: 0;
    overflow: hidden;
}
.leaflet-popup-content {
    margin: 0 !important;
    width: 260px !important;
}
.leaflet-popup-tip {
    background: rgba(255, 255, 255, 0.98);
}
.custom-div-icon {
    background: transparent;
    border: none;
}
.marker-pin {
    width: 24px;
    height: 24px;
    border-radius: 50% 50% 50% 0;
    position: absolute;
    transform: rotate(-45deg);
    left: 50%;
    top: 50%;
    margin: -12px 0 0 -12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.marker-pin i {
    transform: rotate(45deg);
    color: white;
    font-size: 10px;
}
.marker-pulse {
    border-radius: 50%;
    height: 40px;
    width: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -20px 0 0 -20px;
    animation: pulsate 1.8s ease-out infinite;
    opacity: 0;
    pointer-events: none;
}
@keyframes pulsate {
    0% { transform: scale(0.1, 0.1); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: scale(1.2, 1.2); opacity: 0; }
}

.slider-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.slider-dot.active {
    background-color: #1E4620 !important;
    width: 1.5rem !important;
}