:root {
    --bg: #0B1220;
    --bg-soft: #0F1830;
    --map-fill: #16213A;
    --map-stroke: #2C3E63;
    --gold: #C4661D;
    --gold-soft: rgba(196,102,29,0.18);
    --teal: #0E8F8C;
    --text: #E9EEF5;
    --muted: #8FA0BE;
    --card: #101B33;
    --card-border: #26365A;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}
/*
body {
    background: radial-gradient(120% 120% at 15% 0%, #16223F 0%, var(--bg) 55%);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    padding: 32px 16px 64px;
}*/
.page {
    max-width: 1300px;
    margin: 0 auto;
}
.eyebrow {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal);
    margin: 0 0 10px;
}

h1 {
    font-family: 'Sora', sans-serif;
    font-weight: 700;
    font-size: clamp(24px, 4vw, 36px);
    margin: 0 0 8px;
    line-height: 1.15;
}

.sub {
    color: var(--muted);
    font-size: 14.5px;
    margin: 0 0 28px;
    max-width: 56ch;
}
/*
.map-shell {
    position: relative;
    background: linear-gradient(180deg, var(--bg-soft), #0B1327);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: clamp(14px, 3vw, 30px);
    box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
}
*/
.map-wrap {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    aspect-ratio: 1/1;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 0 100px 0 #0000000f;
}
.india-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
    user-select: none;
}

.pins-layer {
    position: absolute;
    inset: 0;
}

.pin {
    position: absolute;
    transform: translate(-50%,-50%);
    width: 16px;
    height: 16px;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.pin-dot {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #184c9c;
    box-shadow: 0 0 0 3px #184c9c5e, 0 0 14px #184c9ca6;
    z-index: 2;
    border: 1.5px solid #fff;
}
.pin.is-group .pin-dot {
    background: #184c9c;
    box-shadow: 0 0 0 3px #184c9c4f, 0 0 14px #184c9c80;
}
.pin-ring {
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    border: 1.5px solid var(--gold);
    opacity: 0;
    animation: pulse 2.6s ease-out infinite;
}

.pin.is-group .pin-ring {
    border-color: var(--teal);
}

@keyframes pulse {
    0% {
        transform: scale(0.4);
        opacity: 0.55;
    }

    75% {
        transform: scale(1.7);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}
.pin-badge {
    position: absolute;
    top: -9px;
    right: -11px;
    background: #184c9c;
    color: #fff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1;
    padding: 2.5px 4.5px;
    border-radius: 999px;
    z-index: 3;
    display: none;
}
.pin:hover .pin-dot, .pin:focus-visible .pin-dot {
    transform: scale(1.2);
}

.pin:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
    border-radius: 50%;
}

/* ---- Tooltip (desktop: floating card) ---- */
.tooltip {
    position: absolute;
    z-index: 20;
    width: 480px;
    background: #f4f4f4;
    border: 1px solid var(--card-border);
    border-left: 3px solid #b3bdc6;
    border-radius: 12px;
    padding: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .16s ease, transform .16s ease;
    pointer-events: none;
    box-shadow: 0 20px 40px -18px rgba(0,0,0,0.7);
}

    .tooltip.is-group {
        border-left-color: var(--teal);
    }

    .tooltip.visible {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
.tt-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}
.tt-photo {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--card-border);
    flex-shrink: 0;
}
.tt-name {
    font-size: 14px;
    font-weight: 500;
    margin: 0;
    line-height: 17px;
    color: #000;
    font-family: "Poppins", sans-serif;
}
.tt-loc {
    font-size: 11px;
    color: #184c9c;
    margin: 2px 0 0;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: "Poppins", sans-serif;
}
    .tt-loc .code {
        color: var(--gold);
        display: none;
    }

.tooltip.is-group .tt-loc .code {
    color: var(--teal);
}
.tt-count {
    font-size: 11.5px;
    color: #434343;
    margin: 0 0 8px;
    padding-bottom: 8px;
    border-bottom: 1px dashed var(--card-border);
    font-family: "Poppins", sans-serif;
    display: none;
}
.tt-list {
    max-height: 190px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.tt-row {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
}
    .tt-row img {
        width: 46px;
        height: 46px;
        border-radius: 7px;
        object-fit: cover;
        border: 1px solid var(--card-border);
    }
    .tt-row span {
        font-size: 12.5px;
        color: #434343;
        font-family: "Poppins", sans-serif;
    }

.tt-list::-webkit-scrollbar {
    width: 5px;
}

.tt-list::-webkit-scrollbar-thumb {
    background: var(--card-border);
    border-radius: 4px;
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    justify-content: center;
    margin-top: 22px;
    font-size: 12.5px;
    color: var(--muted);
}

    .legend span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

.swatch {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

    .swatch.gold {
        background: var(--gold);
    }

    .swatch.teal {
        background: var(--teal);
    }

.note {
    text-align: center;
    color: var(--muted);
    font-size: 12px;
    margin-top: 14px;
}
.mappage .left {
    text-align: center;
}
.page.mappage {
    padding: 50px 15px;
}
.locationname.three h3.ul-event-details-inner-title {
    margin: 12px 0 3px 0;
}
/* ---- Mobile: tooltip becomes a bottom sheet ---- */
@media (max-width:640px) {
    .tooltip {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: 12px;
        top: auto;
        width: auto;
        transform: translateY(12px);
    }

        .tooltip.visible {
            transform: translateY(0);
        }
}

@media (prefers-reduced-motion: reduce) {
    .pin-ring {
        animation: none;
        display: none;
    }

    .tooltip {
        transition: none;
    }
}