/* ==========================================================================
   GoaNearby Interactive Map — Modular Stylesheet (inc/map-styles.css)
   Covers:
   1. Desktop Top Header & 10-Category Bar
   2. Left Sidebar List + Place Cards
   3. Google Maps-Style PC Side Detail Card (#pc-place-panel)
   4. Leaflet Map Canvas, Custom Pins, Active Pin Label, Layer & Zoom Controls
   5. Complete 10-Screen Mobile UX (Home, Categories, List, Map, Detail Sheet, Filters)
   ========================================================================== */

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #ffffff;
    color: #0f172a;
    overflow: hidden;
}

.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }

/* 1. Top Navbar */
#desktop-top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 62px;
    background: #ffffff;
    border-bottom: 1px solid #eef2f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    flex-shrink: 0;
    z-index: 200;
}

#mobile-top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: #ffffff;
    border-bottom: 1px solid #eef2f6;
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    flex-shrink: 0;
    z-index: 200;
}

@media (max-width: 768px) {
    #desktop-top-nav {
        display: none !important;
    }
    #mobile-top-nav {
        display: flex !important;
    }
}

/* 2. Horizontal Category Bar */
#category-bar {
    position: fixed;
    top: 62px;
    left: 0;
    right: 0;
    height: 52px;
    background: #ffffff;
    border-bottom: 1px solid #eef2f6;
    display: flex;
    align-items: center;
    padding: 0 20px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
    z-index: 190;
    gap: 8px;
}
#category-bar::-webkit-scrollbar { display: none; }

@media (max-width: 768px) {
    #category-bar {
        top: 56px;
        padding: 0 12px;
    }
}

.cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 700;
    color: #1e293b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.16s ease;
    cursor: pointer;
    flex-shrink: 0;
}
.cat-pill i {
    color: #64748b;
    font-size: 13px;
    transition: color 0.16s ease;
}
.cat-pill:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #cbd5e1;
}
.cat-pill.active {
    background: #ff5a1f !important;
    color: #ffffff !important;
    border-color: #ff5a1f !important;
    box-shadow: 0 4px 12px rgba(255, 90, 31, 0.28);
}
.cat-pill.active i {
    color: #ffffff !important;
}

/* 3. Main App Layout (Sidebar + PC Place Panel + Map) */
#app-layout {
    position: fixed;
    top: 114px; /* 62px top-nav + 52px category-bar */
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    overflow: hidden;
    background: #f1f5f9;
    z-index: 100;
}

/* 4. Left Sidebar Panel (Desktop) */
#map-sidebar {
    width: 390px;
    flex-shrink: 0;
    background: #ffffff;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 60;
}

.filter-chip-sm {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    color: #334155;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s ease;
}
.filter-chip-sm:hover,
.filter-chip-sm.active {
    border-color: #ff5a1f;
    color: #ff5a1f;
    background: #fff7ed;
}

#places-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px 24px;
}
#places-list::-webkit-scrollbar { width: 5px; }
#places-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }

.place-card-item {
    padding: 10px;
    border-radius: 14px;
    border: 1.5px solid #eef2f6;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.16s ease;
    display: flex;
    gap: 12px;
    position: relative;
    margin-bottom: 10px;
}
.place-card-item:hover {
    border-color: #cbd5e1;
    background: #fcfcfd;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
.place-card-item.active-selected {
    border-color: #ff5a1f !important;
    background: #fff8f3 !important;
    box-shadow: 0 6px 18px rgba(255, 90, 31, 0.14) !important;
}
.place-card-thumb {
    width: 96px;
    height: 76px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: #f1f5f9;
}

/* 5. Google Maps-Style PC Side Card (#pc-place-panel) */
#pc-place-panel {
    width: 390px;
    flex-shrink: 0;
    height: calc(100% - 20px);
    margin: 10px 0 10px 10px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 12px 36px rgba(15, 23, 42, 0.16), 0 2px 8px rgba(15, 23, 42, 0.08);
    border: 1px solid #e2e8f0;
    z-index: 80;
    position: relative;
    display: flex;
    flex-direction: column;
}
#pc-place-panel.hidden {
    display: none !important;
}
.pc-panel-inner {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #ffffff;
}
#pc-panel-collapse-btn {
    position: absolute;
    right: -24px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 52px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: none;
    border-radius: 0 10px 10px 0;
    box-shadow: 4px 0 12px rgba(15, 23, 42, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 90;
}
#pc-panel-collapse-btn:hover {
    background: #f8fafc;
}

.gmap-tab {
    flex: 1;
    padding: 11px 4px;
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
}
.gmap-tab:hover {
    color: #0f172a;
}
.gmap-tab.active {
    color: #00796b;
    border-bottom-color: #00796b;
}

#pcp-scroll-body::-webkit-scrollbar { width: 5px; }
#pcp-scroll-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }

/* 6. Map Area & Custom Pins */
#map-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #cbe7f5;
}
#map {
    width: 100%;
    height: 100%;
    z-index: 10;
}

.gn-pin-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gn-map-pin {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: #1a8cff;
    border: 2.2px solid #ffffff;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
    cursor: pointer;
}
.gn-map-pin i {
    transform: rotate(45deg);
    font-size: 11px;
    color: #ffffff;
}
.gn-map-pin:hover {
    transform: rotate(-45deg) scale(1.14);
}
.gn-map-pin.active {
    background: #ff5a1f !important;
    width: 36px;
    height: 36px;
    border-width: 2.5px;
    box-shadow: 0 0 0 5px rgba(255, 90, 31, 0.25), 0 6px 16px rgba(255, 90, 31, 0.55) !important;
    transform: rotate(-45deg) scale(1.12);
    z-index: 999 !important;
}
.gn-map-pin.active i {
    font-size: 13px;
}

.gn-pin-label {
    position: absolute;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.95);
    color: #1e293b;
    font-weight: 700;
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 6px;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.2);
    border: 1px solid rgba(15, 23, 42, 0.1);
    pointer-events: none;
    z-index: 50;
    transition: all 0.15s ease;
}
.gn-pin-label.active-label {
    background: #ff5a1f !important;
    color: #ffffff !important;
    font-weight: 800;
    font-size: 12px;
    padding: 3px 9px;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(255, 90, 31, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    z-index: 999 !important;
}

/* Map Controls */
#map-satellite-toggle {
    position: absolute;
    bottom: 24px;
    left: 24px;
    z-index: 100;
    background: #ffffff;
    border-radius: 14px;
    padding: 4px;
    display: flex;
    gap: 4px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.14);
    border: 1px solid #f1f5f9;
}
.map-mode-btn {
    padding: 6px 16px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
}
.map-mode-btn.active {
    background: #ff5a1f;
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(255, 90, 31, 0.3);
}
.map-mode-btn.inactive {
    background: transparent;
    color: #475569;
}

#map-actions-floating {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.map-ctrl-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.12);
    border: 1px solid #f1f5f9;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.map-ctrl-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #334155;
    font-size: 14px;
    background: #ffffff;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}
.map-ctrl-btn:hover {
    color: #ff5a1f;
    background: #f8fafc;
}

/* Scale Widget (Bottom-Right) */
#map-scale-widget {
    position: absolute;
    bottom: 24px;
    right: 24px;
    z-index: 100;
    background: rgba(255, 255, 255, 0.95);
    padding: 5px 12px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1);
    font-size: 11px;
    font-weight: 800;
    color: #334155;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.scale-bar-line {
    width: 58px;
    height: 4px;
    border: 1.5px solid #334155;
    border-top: none;
}

/* Sponsored Cards Styling */
@keyframes pavanPulseBorder {
    0%, 100% { border-color: #f59e0b; box-shadow: 0 2px 12px rgba(245, 158, 11, 0.18); }
    50% { border-color: #ff5a1f; box-shadow: 0 2px 14px rgba(255, 90, 31, 0.26); }
}
.pavan-sponsored-card {
    border: 1.5px solid #f59e0b;
    animation: pavanPulseBorder 3s ease-in-out infinite;
    border-radius: 14px;
    background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
    padding: 12px;
}

/* Filter Drawer Checkbox Rows */
.filter-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.filter-check-row:hover {
    background: #fff7ed;
}
.filter-check-row input {
    accent-color: #ff5a1f;
    width: 17px;
    height: 17px;
    cursor: pointer;
}

/* ==========================================================================
   MOBILE-SPECIFIC SCREENS & NAVIGATION (<= 768px)
   ========================================================================== */
.mob-screen {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 60px;
    background: #f8fafc;
    overflow-y: auto;
    z-index: 250;
}

.mob-cat-grid-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #eef2f6;
    border-radius: 18px;
    color: #1e293b;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
    transition: all 0.15s ease;
}
.mob-cat-grid-tile i {
    color: #334155;
}
.mob-cat-grid-tile.active {
    background: #ff5a1f;
    color: #ffffff;
    border-color: #ff5a1f;
    box-shadow: 0 6px 16px rgba(255, 90, 31, 0.28);
}
.mob-cat-grid-tile.active i {
    color: #ffffff;
}

.mob-chip {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: #f1f5f9;
    color: #334155;
    white-space: nowrap;
    border: none;
}
.mob-chip.active {
    background: #ff5a1f;
    color: #ffffff;
}

.mob-view-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    color: #475569;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}
.mob-view-pill.active {
    background: #ff5a1f;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(255, 90, 31, 0.35);
}

.mob-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    background: transparent;
    border: none;
    height: 100%;
}
.mob-nav-btn.active {
    color: #ff5a1f;
}

@media (max-width: 768px) {
    /* On Mobile, hide desktop left sidebar & PC side card; use dedicated mobile views */
    #map-sidebar {
        display: none !important;
    }
    #pc-place-panel {
        display: none !important;
    }
    #app-layout {
        top: 108px; /* 56px mobile-top-nav + 52px category-bar */
        bottom: 60px; /* Exact height of sticky mobile bottom nav */
        height: auto;
        margin-bottom: 0;
    }
    #map-satellite-toggle {
        bottom: 16px;
        left: 12px;
    }
    #map-scale-widget {
        display: none;
    }
    #map-actions-floating {
        top: 14px;
        right: 12px;
    }
    #mobile-bottom-nav {
        box-shadow: 0 -4px 18px rgba(15, 23, 42, 0.08);
    }
}

/* Loading & Toast */
#map-loading {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 350;
    gap: 12px;
}
.ld-ring {
    width: 42px;
    height: 42px;
    border: 3.5px solid #fed7aa;
    border-top-color: #ff5a1f;
    border-radius: 50%;
    animation: gnSpin 0.7s linear infinite;
}
@keyframes gnSpin { to { transform: rotate(360deg); } }

#toast {
    position: fixed;
    bottom: 76px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: rgba(15, 23, 42, 0.96);
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 700;
    padding: 9px 20px;
    border-radius: 999px;
    z-index: 9999;
    opacity: 0;
    transition: all 0.22s ease;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
}
#toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}