/* =====================================================================
   বাংলাদেশ ঘুরে দেখুন — Bangladesh Explorer Map
   Design language: a field traveller's map — canvas texture, stamped
   badges, a compass-and-ink palette drawn from Bangladesh's own
   landscape (paddy green, river teal, monsoon gold) rather than a
   generic SaaS card kit. Every token below is a CSS variable so it can
   be overridden from ashepashe.com's own theme stylesheet.
   ===================================================================== */

:root {
    /* --- Palette: named after what it's drawn from --- */
    --bd-paddy-green:   #14432F;   /* deep rice-field green, primary */
    --bd-paddy-green-light: #1F6B49;
    --bd-river-teal:    #1C6E7F;   /* river/water accent */
    --bd-monsoon-gold:  #C99A3B;   /* highlight / featured */
    --bd-earth-brown:   #6B4A34;   /* secondary text on light */
    --bd-canvas:        #F6F2E9;   /* warm paper background */
    --bd-canvas-dark:   #0E1A15;   /* night mode background */
    --bd-ink:           #1B2A22;   /* primary text */
    --bd-ink-soft:      #4B5A50;
    --bd-white:         #FFFFFF;
    --bd-line:          rgba(20, 67, 47, 0.18);

    /* --- Type --- */
    --bd-font-display: 'Fraunces', 'Noto Serif Bengali', Georgia, serif;
    --bd-font-body: 'Noto Sans Bengali', 'Inter', system-ui, sans-serif;
    --bd-font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    /* --- Layout --- */
    --bd-radius: 6px;
    --bd-panel-width: 380px;
    --bd-shadow: 0 12px 32px rgba(14, 26, 21, 0.18);

    color-scheme: light;
}

[data-bd-theme="night"] {
    --bd-canvas: var(--bd-canvas-dark);
    --bd-ink: #EAF2EC;
    --bd-ink-soft: #A9BDB1;
    --bd-line: rgba(234, 242, 236, 0.14);
    color-scheme: dark;
}

/* OpenStreetMap's free/keyless tiles only come in one (light) style — night
   mode reuses the same tiles but inverts them into a dark map via CSS,
   rather than depending on a second, key-gated tile service. */
[data-bd-theme="night"] .leaflet-tile-pane {
    filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.92);
}

/* --- Reset scoped to this module only --- */
.bd-explorer, .bd-explorer * { box-sizing: border-box; }

.bd-explorer {
    font-family: var(--bd-font-body);
    color: var(--bd-ink);
    background: var(--bd-canvas);
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    transition: background 0.3s ease, color 0.3s ease;
}

.bd-explorer h1, .bd-explorer h2, .bd-explorer h3 {
    font-family: var(--bd-font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
}

/* --- Top bar --- */
.bd-topbar {
    position: absolute;
    top: 16px;
    left: 16px;
    right: 16px;
    z-index: 40;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.bd-title-block {
    background: var(--bd-white);
    border: 1px solid var(--bd-line);
    border-radius: var(--bd-radius);
    padding: 10px 16px;
    box-shadow: var(--bd-shadow);
}
[data-bd-theme="night"] .bd-title-block { background: #142620; }

.bd-title-block h1 { font-size: 1.05rem; color: var(--bd-paddy-green); }
[data-bd-theme="night"] .bd-title-block h1 { color: #7FD1A8; }
.bd-title-block p { margin: 2px 0 0; font-size: 0.78rem; color: var(--bd-ink-soft); }
.bd-home-link {
    display: inline-block; font-size: 0.72rem; font-weight: 600; color: var(--bd-river-teal);
    margin-bottom: 4px; text-decoration: none;
}
.bd-home-link:hover { text-decoration: underline; }

.bd-search-wrap {
    position: relative;
    flex: 1 1 260px;
    max-width: 420px;
}

.bd-search-input {
    width: 100%;
    padding: 12px 44px 12px 16px;
    border-radius: var(--bd-radius);
    border: 1px solid var(--bd-line);
    background: var(--bd-white);
    font-family: var(--bd-font-body);
    font-size: 0.92rem;
    color: var(--bd-ink);
    box-shadow: var(--bd-shadow);
}
[data-bd-theme="night"] .bd-search-input { background: #142620; color: var(--bd-ink); }
.bd-search-input:focus { outline: 2px solid var(--bd-river-teal); outline-offset: 1px; }

.bd-search-icon {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.6;
    pointer-events: none;
}

.bd-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--bd-white);
    border: 1px solid var(--bd-line);
    border-radius: var(--bd-radius);
    box-shadow: var(--bd-shadow);
    max-height: 320px;
    overflow-y: auto;
    display: none;
    z-index: 50;
}
[data-bd-theme="night"] .bd-search-results { background: #142620; }
.bd-search-results.is-open { display: block; }

.bd-search-result {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--bd-line);
    font-size: 0.88rem;
}
.bd-search-result:last-child { border-bottom: none; }
.bd-search-result:hover, .bd-search-result.is-active { background: rgba(20, 67, 47, 0.08); }
.bd-search-result .bd-sr-en { color: var(--bd-ink-soft); font-size: 0.76rem; }

.bd-toolbar-btns { display: flex; gap: 8px; margin-left: auto; }
.bd-icon-btn {
    background: var(--bd-white);
    border: 1px solid var(--bd-line);
    border-radius: var(--bd-radius);
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: var(--bd-shadow);
    font-size: 1.05rem;
}
[data-bd-theme="night"] .bd-icon-btn { background: #142620; }
.bd-icon-btn:hover { border-color: var(--bd-river-teal); }
.bd-icon-btn:focus-visible { outline: 2px solid var(--bd-river-teal); outline-offset: 2px; }

/* --- Category rail (desktop left / mobile bottom drawer) --- */
.bd-category-rail {
    position: absolute;
    left: 16px;
    top: 84px;
    bottom: 16px;
    width: 208px;
    background: var(--bd-white);
    border: 1px solid var(--bd-line);
    border-radius: var(--bd-radius);
    box-shadow: var(--bd-shadow);
    z-index: 30;
    overflow-y: auto;
    padding: 12px;
}
[data-bd-theme="night"] .bd-category-rail { background: #142620; }

.bd-category-rail h2 {
    font-size: 0.72rem;
    text-transform: none;
    color: var(--bd-ink-soft);
    padding: 4px 6px 10px;
    border-bottom: 1px dashed var(--bd-line);
    margin-bottom: 8px;
    font-family: var(--bd-font-body);
    font-weight: 600;
}

.bd-category-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 9px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--bd-font-body);
    font-size: 0.88rem;
    color: var(--bd-ink);
}
.bd-category-item:hover { background: rgba(20, 67, 47, 0.07); }
.bd-category-item.is-active {
    background: var(--bd-paddy-green);
    color: var(--bd-white);
}
.bd-category-item .bd-cat-icon { font-size: 1.1rem; }

.bd-divider-note {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px dashed var(--bd-line);
    font-size: 0.74rem;
    color: var(--bd-ink-soft);
}

/* --- The map itself --- */
.bd-map-canvas {
    width: 100%;
    height: 100%;
    /* Leaflet's internal panes use z-index up to ~1000; without this, the
       map container never establishes its own stacking context, so those
       high z-index panes escape upward and render on top of the topbar/
       category rail/legend instead of staying contained beneath them. */
    position: relative;
    z-index: 1;
}

/* Leaflet pin styling */
.bd-pin {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: var(--bd-paddy-green);
    border: 2px solid var(--bd-white);
    box-shadow: 0 3px 8px rgba(0,0,0,0.35);
    transition: transform 0.15s ease;
}
.bd-pin span { transform: rotate(45deg); font-size: 15px; }
.bd-pin.is-featured { background: var(--bd-monsoon-gold); }
.bd-pin:hover { transform: rotate(-45deg) scale(1.12); }

.bd-cluster {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--bd-river-teal);
    color: var(--bd-white);
    font-weight: 700;
    font-family: var(--bd-font-body);
    border: 3px solid var(--bd-white);
    box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}

/* --- Info panel (desktop: right slide-in; mobile: bottom sheet) --- */
.bd-info-panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: var(--bd-panel-width);
    max-width: 92vw;
    background: var(--bd-white);
    box-shadow: -12px 0 32px rgba(14,26,21,0.18);
    z-index: 60;
    transform: translateX(105%);
    transition: transform 0.32s cubic-bezier(.2,.8,.2,1);
    overflow-y: auto;
    border-left: 1px solid var(--bd-line);
}
[data-bd-theme="night"] .bd-info-panel { background: #10201A; }
.bd-info-panel.is-open { transform: translateX(0); }

.bd-info-close {
    position: sticky;
    top: 10px;
    float: right;
    margin-right: 10px;
    background: var(--bd-white);
    border: 1px solid var(--bd-line);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    cursor: pointer;
    z-index: 5;
}
[data-bd-theme="night"] .bd-info-close { background: #10201A; color: var(--bd-ink); }

.bd-info-cover {
    width: 100%;
    height: 220px;
    object-fit: cover;
    background: var(--bd-line);
}

.bd-info-body { padding: 18px 20px 28px; }

.bd-badge {
    display: inline-block;
    font-family: var(--bd-font-body);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--bd-monsoon-gold);
    color: #3A2A05;
    margin-bottom: 8px;
    margin-right: 6px;
}

.bd-info-body h2 { font-size: 1.4rem; margin-bottom: 4px; color: var(--bd-paddy-green); }
[data-bd-theme="night"] .bd-info-body h2 { color: #7FD1A8; }
.bd-info-en { font-size: 0.85rem; color: var(--bd-ink-soft); margin-bottom: 10px; }
.bd-info-loc { font-size: 0.82rem; color: var(--bd-ink-soft); margin-bottom: 14px; }

.bd-info-desc { font-size: 0.92rem; line-height: 1.65; margin-bottom: 16px; }

.bd-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px;
    border: 1px dashed var(--bd-line);
    border-radius: var(--bd-radius);
}
.bd-info-grid div { font-size: 0.8rem; }
.bd-info-grid strong { display: block; font-size: 0.68rem; color: var(--bd-ink-soft); font-weight: 600; margin-bottom: 2px; }

.bd-coords {
    font-family: var(--bd-font-mono);
    font-size: 0.72rem;
    color: var(--bd-ink-soft);
    margin-bottom: 16px;
}

.bd-btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.bd-btn {
    font-family: var(--bd-font-body);
    font-size: 0.84rem;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: var(--bd-radius);
    border: 1px solid var(--bd-line);
    background: var(--bd-canvas);
    color: var(--bd-ink);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.bd-btn.bd-btn-primary { background: var(--bd-paddy-green); color: var(--bd-white); border-color: var(--bd-paddy-green); }
.bd-btn:hover { border-color: var(--bd-river-teal); }

.bd-related h3, .bd-nearby h3 {
    font-size: 0.85rem;
    color: var(--bd-ink-soft);
    border-top: 1px dashed var(--bd-line);
    padding-top: 14px;
    margin-bottom: 8px;
}
.bd-related ul, .bd-nearby ul { list-style: none; padding: 0; margin: 0; }
.bd-related li, .bd-nearby li { padding: 6px 0; font-size: 0.86rem; }
.bd-related a { color: var(--bd-river-teal); text-decoration: none; }
.bd-related a:hover { text-decoration: underline; }
.bd-nearby button {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--bd-ink); font-size: 0.86rem; text-align: left; font-family: var(--bd-font-body);
}
.bd-nearby button:hover { color: var(--bd-river-teal); }

/* --- Loading / empty states --- */
.bd-loading, .bd-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    z-index: 70;
    background: var(--bd-canvas);
    font-family: var(--bd-font-body);
}
.bd-loading .bd-flag { font-size: 2.2rem; margin-bottom: 10px; animation: bd-pulse 1.4s ease-in-out infinite; }
@keyframes bd-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }
.bd-loading p, .bd-empty p { color: var(--bd-ink-soft); font-size: 0.9rem; }

/* --- Legend --- */
.bd-legend {
    position: absolute;
    left: 16px;
    bottom: 16px;
    background: var(--bd-white);
    border: 1px solid var(--bd-line);
    border-radius: var(--bd-radius);
    box-shadow: var(--bd-shadow);
    padding: 10px 12px;
    font-size: 0.76rem;
    z-index: 30;
    display: none;
}
[data-bd-theme="night"] .bd-legend { background: #142620; }
.bd-legend.is-open { display: block; }
.bd-legend div { padding: 2px 0; }

/* --- Responsive: mobile bottom-sheet layout --- */
@media (max-width: 720px) {
    .bd-category-rail {
        left: 0; right: 0; top: auto; bottom: 0;
        width: 100%; height: 76px;
        display: flex; gap: 8px;
        overflow-x: auto; overflow-y: hidden;
        border-radius: 0;
        align-items: center;
        padding: 8px 10px;
    }
    .bd-category-rail h2 { display: none; }
    .bd-category-item { flex: 0 0 auto; flex-direction: column; gap: 2px; font-size: 0.68rem; padding: 6px 10px; }

    .bd-info-panel {
        top: auto; bottom: 0; right: 0; left: 0;
        width: 100%; max-width: 100%;
        height: 72vh;
        border-radius: 16px 16px 0 0;
        transform: translateY(105%);
        border-left: none;
        border-top: 1px solid var(--bd-line);
    }
    .bd-info-panel.is-open { transform: translateY(0); }
    .bd-legend { bottom: 92px; }
    .bd-topbar { right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .bd-info-panel, .bd-pin, .bd-loading .bd-flag { transition: none; animation: none; }
}