/* Reset & Base */
:root {
    --primary-color: #1a73e8;
    --primary-light: #e8f0fe;
    --text-primary: #3c4043;
    --text-secondary: #5f6368;
    --bg-light: #f1f3f4;
    --bg-white: #ffffff;
    --border-color: #eee;
    --danger-color: #d93025;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Roboto', sans-serif; height: 100vh; overflow: hidden; background: #f5f5f5; }
img { max-width: 100%; }

/* Layout */
.app-container { position: relative; width: 100%; height: 100%; }
#map { width: 100%; height: 100%; z-index: 1; }

/* ============================================= */
/* === ROBUST AMENITY VISIBILITY (NEW) === */
/* ============================================= */

/* * 1. Define the wrapper class for the amenity icon.
 * This wrapper is HIDDEN by default and is TRANSPARENT.
 * It just controls visibility.
 */
.amenity-icon-wrapper {
    /* Default state: hidden */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    
    /* Ensure the wrapper itself is transparent and has no border/background */
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
}

/* * 2. Define the rules to SHOW icons based on zoom level + priority.
 * We just change opacity and visibility.
 */

/* Show LOW priority (and default) items at zoom 16+ */
#map.zoom-16 .amenity-icon-wrapper.priority-low,
#map.zoom-17 .amenity-icon-wrapper.priority-low,
#map.zoom-18 .amenity-icon-wrapper.priority-low,
#map.zoom-19 .amenity-icon-wrapper.priority-low {
    opacity: 1;
    visibility: visible;
}

/* Show MEDIUM priority items at zoom 13+ */
#map.zoom-13 .amenity-icon-wrapper.priority-medium,
#map.zoom-14 .amenity-icon-wrapper.priority-medium,
#map.zoom-15 .amenity-icon-wrapper.priority-medium,
#map.zoom-16 .amenity-icon-wrapper.priority-medium,
#map.zoom-17 .amenity-icon-wrapper.priority-medium,
#map.zoom-18 .amenity-icon-wrapper.priority-medium,
#map.zoom-19 .amenity-icon-wrapper.priority-medium {
    opacity: 1;
    visibility: visible;
}

/* Show HIGH priority items at zoom 11+ */
#map.zoom-11 .amenity-icon-wrapper.priority-high,
#map.zoom-12 .amenity-icon-wrapper.priority-high,
#map.zoom-13 .amenity-icon-wrapper.priority-high,
#map.zoom-14 .amenity-icon-wrapper.priority-high,
#map.zoom-15 .amenity-icon-wrapper.priority-high,
#map.zoom-16 .amenity-icon-wrapper.priority-high,
#map.zoom-17 .amenity-icon-wrapper.priority-high,
#map.zoom-18 .amenity-icon-wrapper.priority-high,
#map.zoom-19 .amenity-icon-wrapper.priority-high {
    opacity: 1;
    visibility: visible;
}
/* ============================================= */
/* === END ROBUST AMENITY VISIBILITY === */
/* ============================================= */




/* Show LOW priority (and default) items at zoom 16+ */
#map.zoom-16 .landmark-tooltip.priority-low,
#map.zoom-16 .nearby-marker-wrapper.priority-low,
#map.zoom-17 .landmark-tooltip.priority-low,
#map.zoom-17 .nearby-marker-wrapper.priority-low,
#map.zoom-18 .landmark-tooltip.priority-low,
#map.zoom-18 .nearby-marker-wrapper.priority-low,
#map.zoom-19 .landmark-tooltip.priority-low,
#map.zoom-19 .nearby-marker-wrapper.priority-low,
/* --- Add rule for items with NO priority (default to low) --- */
#map.zoom-16 .landmark-tooltip:not(.priority-high):not(.priority-medium):not(.priority-low),
#map.zoom-16 .nearby-marker-wrapper:not(.priority-high):not(.priority-medium):not(.priority-low),
#map.zoom-17 .landmark-tooltip:not(.priority-high):not(.priority-medium):not(.priority-low),
#map.zoom-17 .nearby-marker-wrapper:not(.priority-high):not(.priority-medium):not(.priority-low),
#map.zoom-18 .landmark-tooltip:not(.priority-high):not(.priority-medium):not(.priority-low),
#map.zoom-18 .nearby-marker-wrapper:not(.priority-high):not(.priority-medium):not(.priority-low),
#map.zoom-19 .landmark-tooltip:not(.priority-high):not(.priority-medium):not(.priority-low),
#map.zoom-19 .nearby-marker-wrapper:not(.priority-high):not(.priority-medium):not(.priority-low)
{
    opacity: 1;
    visibility: visible;
}
/* --- END MODIFICATION --- */

/* === NEW: PRIORITY VISIBILITY RULES === */
/* Show MEDIUM priority items at zoom 13+ (as per user comment) */
#map.zoom-13 .priority-medium,
#map.zoom-14 .priority-medium,
#map.zoom-15 .priority-medium,
#map.zoom-16 .priority-medium,
#map.zoom-17 .priority-medium,
#map.zoom-18 .priority-medium,
#map.zoom-19 .priority-medium {
    opacity: 1;
    visibility: visible;
}

/* Show HIGH priority items at zoom 11+ (sensible default) */
#map.zoom-11 .priority-high,
#map.zoom-12 .priority-high,
#map.zoom-13 .priority-high,
#map.zoom-14 .priority-high,
#map.zoom-15 .priority-high,
#map.zoom-16 .priority-high,
#map.zoom-17 .priority-high,
#map.zoom-18 .priority-high,
#map.zoom-19 .priority-high {
    opacity: 1;
    visibility: visible;
}


/* * We update these rules to also show tooltips,
 * using the same priority logic as the icons.
 */

/* Show LOW priority (and default) items at zoom 16+ */
#map.zoom-16 .landmark-tooltip.priority-low,
#map.zoom-17 .landmark-tooltip.priority-low,
#map.zoom-18 .landmark-tooltip.priority-low,
#map.zoom-19 .landmark-tooltip.priority-low,
/* --- Add rule for items with NO priority (default to low) --- */
#map.zoom-16 .landmark-tooltip:not(.priority-high):not(.priority-medium):not(.priority-low),
#map.zoom-17 .landmark-tooltip:not(.priority-high):not(.priority-medium):not(.priority-low),
#map.zoom-18 .landmark-tooltip:not(.priority-high):not(.priority-medium):not(.priority-low),
#map.zoom-19 .landmark-tooltip:not(.priority-high):not(.priority-medium):not(.priority-low)
{
    opacity: 1;
    visibility: visible;
}

/* Show MEDIUM priority items at zoom 13+ */
#map.zoom-13 .landmark-tooltip.priority-medium,
#map.zoom-14 .landmark-tooltip.priority-medium,
#map.zoom-15 .landmark-tooltip.priority-medium,
#map.zoom-16 .landmark-tooltip.priority-medium,
#map.zoom-17 .landmark-tooltip.priority-medium,
#map.zoom-18 .landmark-tooltip.priority-medium,
#map.zoom-19 .landmark-tooltip.priority-medium {
    opacity: 1;
    visibility: visible;
}

/* Show HIGH priority items at zoom 11+ */
#map.zoom-11 .landmark-tooltip.priority-high,
#map.zoom-12 .landmark-tooltip.priority-high,
#map.zoom-13 .landmark-tooltip.priority-high,
#map.zoom-14 .landmark-tooltip.priority-high,
#map.zoom-15 .landmark-tooltip.priority-high,
#map.zoom-16 .landmark-tooltip.priority-high,
#map.zoom-17 .landmark-tooltip.priority-high,
#map.zoom-18 .landmark-tooltip.priority-high,
#map.zoom-19 .landmark-tooltip.priority-high {
    opacity: 1;
    visibility: visible;
}



/* TOP BAR */
.top-bar {
    position: absolute;
    top: 0; left: 0; right: 0;
    background: #ffffff00;
    padding: 12px 16px;
    /* box-shadow: 0 1px 6px rgba(0,0,0,0.15);*/
    z-index: 10;
    display: flex;
    flex-direction: column; /* Mobile-first: stack rows */
    gap: 8px;
}
.search-container {
    display: flex;
    align-items: center;
    background: #ffffffb0;
    box-shadow: 0 1px 6px rgb(0 0 0 / 21%);
    border-radius: 24px;
    padding: 0 12px;
    height: 48px;
    /* --- NEW --- */
    flex: 1; 
    min-width: 150px;
    /* --- END NEW --- */
}
.search-form { display: flex; width: 100%; }
#search-input {
    flex: 1; border: none; background: none; font-size: 16px; outline: none; padding: 0 8px; color:#1b0aa0;
}
.search-btn {
    background: none; border: none; cursor: pointer; padding: 8px; border-radius: 50%;
}
.search-btn:hover i { color: var(--primary-color); }
.search-btn svg {
    width: 20px;
    height: 20px;
    fill: var(--text-secondary);
}

/* --- STYLED THE ICON BUTTON (menu-toggle) --- */
.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px; /* Added size */
    height: 40px; /* Added size */
    background-color: #ffffffcf;
}
.icon-btn i {
    font-size: 24px; /* Made icon larger */
    color: var(--text-secondary);
}
.icon-btn:hover i {
    color: var(--primary-color);
}
/* --- END ICON BUTTON --- */


.search-input-group {
    display: flex;
    align-items: center;
    background: var(--bg-light);
    border-radius: 24px;
    padding: 0 12px;
    height: 48px;
    transition: background 0.2s;
}

.search-input-group:focus-within {
    background: var(--bg-white);
    box-shadow: 0 1px 6px rgba(32,33,36,0.28);
}

.search-icon {
    width: 20px;
    height: 20px;
    fill: var(--text-secondary);
    margin-right: 8px;
}


.search-btn:hover svg {
    fill: var(--primary-color);
}

.category-scroll {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding: 4px 0;
    scrollbar-width: none;
}
.category-scroll::-webkit-scrollbar { display: none; }
.cat-btn {
    flex: 0 0 auto;
    background: #ffffff;
    box-shadow: 0 1px 6px rgb(0 0 0 / 47%);
    border: none;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    color: #000000;
    cursor: pointer;
}
.cat-btn.active, .cat-btn:hover { background: var(--primary-color); color: white; }

/* SIDEBARS */
.sidebar {
    position: absolute;
    top: 120px; /* Default top position */
    width: 280px;
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    z-index: 10;
    transition: transform 0.3s ease;
}
.left-sidebar { left: 16px; transform: translateX(-110%); }
.right-sidebar { right: 16px; transform: translateX(110%); }
.sidebar.open { transform: translateX(0); }

.sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
}
.sidebar-logo { height: 32px; }
.close-sidebar { background: none; border: none; font-size: 24px; cursor: pointer; }

.sidebar-nav {
    padding: 8px 0;
}

.sidebar-nav .nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.2s;
}

.sidebar-nav .nav-item:hover {
    background: var(--bg-light);
}

.sidebar-nav .nav-item.active {
    color: var(--primary-color);
    background: var(--primary-light);
}

.layer-group {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
}

.layer-group h4 {
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--text-secondary);
}

.layer-group label {
    display: block;
    margin: 4px 0;
    font-size: 14px;
}

.directions-btn {
    display: block;
    width: calc(100% - 32px);
    margin: 16px auto;
    padding: 12px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.directions-btn:hover {
    background: #1b66c9;
}

/* BOTTOM CONTROLS */
.bottom-controls {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 10;
}

.ctrl-btn {
    background: var(--bg-white);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ctrl-btn i {
    font-size: 20px;
    color: var(--text-secondary);
}

.ctrl-btn:hover i {
    color: var(--primary-color);
}
.ctrl-btn.active {
    background-color: var(--primary-light);
}
.ctrl-btn.active i {
   color: var(--primary-color);
}

/* WATERMARK */
.watermark {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #021f43;
    z-index: 100;
    backdrop-filter: blur(2px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* --- REFINED RESPONSIVE & MODAL STYLES --- */
@media (min-width: 768px) {
    .top-bar { 
        flex-direction: row; 
        align-items: center; 
        padding: 10px 16px; 
    }
    .search-container { 
        width: 400px; 
        margin-right: 16px;
        order: 2; /* [Menu] [Search] [Categories] */
        flex: 0 1 auto; /* Don't grow, don't shrink */
    }
    .category-scroll { 
        overflow: visible; 
        order: 3;
    }
    #menu-toggle {
        order: 1;
    }
    #close-left { display: none; }

    .right-sidebar { transform: none !important; }
    .left-sidebar { top: 80px; left: 16px; transform: translateX(-110%);}
    .right-sidebar { top: 80px; right: 16px; }
    .bottom-controls { bottom: 80px; }
}

/* Mobile: Modal overlay */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

/* --- *** UPDATED MOBILE LAYOUT *** --- */
@media (max-width: 767px) {
    
    /* 1. Top Bar Layout */
    .top-bar {
        flex-direction: row; /* Make top bar a row */
        flex-wrap: wrap; /* Allow categories to wrap */
        align-items: center;
    }
    .search-container {
        flex: 1; /* Search takes up available space */
        order: 1; /* [Search] */
    }
    #menu-toggle {
        display: flex; /* Show the hamburger button */
        order: 2; /* [Hamburger] */
    }
    .category-scroll {
        width: 100%; /* Make categories full width on next line */
        order: 3;
    }

    /* 2. Left sidebar (slide-in drawer) */
    .left-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 280px;
        border-radius: 0;
        transform: translateX(-100%);
        z-index: 102;
    }
    
    .sidebar.open {
        transform: translateX(0); /* Works for left sidebar */
    }
    
    /* 3. Right sidebar (slide-up panel) */
    .right-sidebar {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        top: auto;
        width: 100%;
        transform: translateY(110%);
        border-radius: 16px 16px 0 0;
        z-index: 101;
        padding-bottom: 20px;
    }
    .right-sidebar.open {
        transform: translateY(0); /* Works for right sidebar */
    }

    /* 4. Hide desktop-only things */
    #close-left { display: flex; } /* Show close button on mobile */
    
    /* Adjust sidebar top for mobile */
    .sidebar {
        top: 0; /* Full height */
    }
}
/* --- END RESPONSIVE FIX --- */


.spinner {
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.search-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- POPUPS & SIDEBAR CONTENT --- */
/* --- NEW: Button group for popup --- */
.popup-button-group {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.leaflet-popup-content .popup-btn {
    flex: 1; /* Make buttons share space */
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.leaflet-popup-content .popup-btn:hover {
    background: #1b66c9;
}


/* Style for sidebar content */
#sidebar-content-container {
    max-height: calc(77vh - 140px); /* Adjust based on header/nav height */
    overflow-y: auto;
}

#sidebar-content-container-places {
    max-height: calc(77vh - 140px); /* Adjust based on header/nav height */
    overflow-y: auto;
}

#sidebar-content-container-history {
    max-height: calc(77vh - 140px); /* Adjust based on header/nav height */
    overflow-y: auto;
}

.history-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    text-decoration: none;
    color: var(--text-primary);
    cursor: pointer;
}
.history-item:hover { background: var(--bg-light); }
.history-text { flex: 1; }
.place-name { font-weight: 500; }
.time { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.arrow-icon { fill: var(--text-secondary); width: 24px; height: 24px; }

/* Style for empty/loading content in the sidebar */
.empty-drawer {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-secondary);
}
.empty-drawer .spinner {
    margin: 0 auto;
}


/* --- UPDATED: ADVANCED DRAWING CONTROLS --- */
.draw-controls {
    position: absolute;
    max-width: 325px;
    min-width: 330px;
    top: 100px; /* Positioned below the top bar */
    right: 16px;
    display: none; /* Hidden by default */
    flex-direction: column;
    z-index: 10;
    background: var(--bg-white);
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    border: 1px solid var(--border-color);
}

.draw-panel-header {
    padding: 8px 12px;
    cursor: move;
    font-weight: 500;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 8px;
}
.draw-panel-header i {
    font-size: 16px;
    color: var(--text-secondary);
}

.draw-buttons-container {
    display: flex;
    flex-direction: row; /* Arrange buttons in a row */
    padding: 8px;
    gap: 8px;
    flex-wrap: wrap; /* Allow wrapping */
}

/* Show the panel when it has the 'open' class */
.draw-controls.open {
    display: flex;
}

.draw-btn {
    background: var(--bg-light);
    border: 1px solid var(--border-color);
    width: 36px;
    height: 36px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.draw-btn i {
    font-size: 20px;
    color: var(--text-secondary);
    transition: color 0.2s;
}

/* Style for hover and when a tool is active */
.draw-btn:hover {
    background: #e0e0e0;
}

.draw-btn.active {
    background-color: var(--primary-light);
    border-color: var(--primary-color);
}
.draw-btn.active i {
    color: var(--primary-color);
}

/* Special active state for delete */
.draw-btn[data-tool="delete"].active {
    background-color: #fce8e6;
    border-color: var(--danger-color);
}
.draw-btn[data-tool="delete"].active i {
    color: var(--danger-color);
}


/* Divider in button bar */
.draw-divider {
    width: 1px;
    background: var(--border-color);
    margin: 4px 0;
}


/* Style for the main toggle button in .bottom-controls when active */
#draw-toggle.active {
     background-color: var(--primary-light);
}
#draw-toggle.active i {
    color: var(--primary-color);
}

/* Responsive adjustments for drawing panel */
@media (max-width: 767px) {
    .draw-controls {
        top: 150px; /* Adjust position on mobile to be below top-bar */
        left: 50%;
        transform: translateX(-50%);
        width: auto; /* Allow it to size to content */
        max-width: 325px;
        min-width: 330px;
    }
    .draw-buttons-container {
        flex-wrap: wrap; /* Allow buttons to wrap */
        justify-content: center;
    }
}
/* --- END DRAWING CONTROLS --- */


/* Leaflet Routing Container Styles */
.leaflet-routing-container {
    position: absolute !important;
    top: 100px !important;
    right: 60px !important;
    width: 350px !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    background: var(--bg-white) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important;
    border: 1px solid var(--border-color) !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s ease !important;
    z-index: 1000 !important;
    display: none;
}
.leaflet-routing-container.open {
    transform: translateX(0) !important;
    display: block;
}

/* Beautiful internal styles */
.leaflet-routing-container .leaflet-routing-geocoders {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
}
.leaflet-routing-container .leaflet-routing-geocoders input {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 8px;
    font-size: 14px;
    width: 100%; /* Fix width */
}
.leaflet-routing-container .leaflet-routing-itinerary {
    padding: 0;
}
.leaflet-routing-container .leaflet-routing-error {
    padding: 16px;
    color: #d93025;
    background: #fce8e6;
    border-top: 1px solid var(--border-color);
}

/* Close button */
.routing-close-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-secondary);
    z-index: 1001;
    padding: 4px;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.routing-close-btn:hover {
    color: var(--primary-color);
    background: var(--bg-light);
}

/* Responsive adjustments for routing container */
@media (max-width: 767px) {
   /* Leaflet Routing Container Styles */
.leaflet-routing-container {
        position: fixed !important;
        top: 150px !important;
        right: 65px !important;
        width: 220px !important;
        min-height: 200px !important;
        height: auto;
        border-radius: 0 !important;
        z-index: 101 !important;
}
}

.route-summary {
    padding: 12px 16px;
    background: var(--bg-white);
    border-bottom: 1px solid var(--border-color);
    font-weight: 500;
    color: var(--text-primary);
    font-size: 14px;
}


/* Search Suggestions Dropdown */
.search-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 0 0 24px 24px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    max-height: 500px;
    max-width: 100%;
    overflow-y: auto;
    z-index: 20;
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
}
.search-container:focus-within .search-suggestions.show,
.search-container:hover .search-suggestions.show {
    display: block;
}
.search-suggestion-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 12px; /* MODIFIED: Was 8px */
    transition: background 0.2s;
}
.search-suggestion-item:hover,
.search-suggestion-item.active {
    background: var(--bg-light);
}
.search-suggestion-item:last-child {
    border-bottom: none;
}

/* MODIFIED: Replaced SVG rule with rule for <i> tag */
.search-suggestion-icon {
    font-size: 20px;
    color: var(--primary-color);
    width: 20px;
    height: 20px;
    text-align: center;
    flex-shrink: 0;
}

.search-suggestion-text {
    flex: 1;
    /* Fix for overflow */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.search-suggestion-title {
    font-weight: 500;
    color: var(--text-primary);
    /* Fix for overflow */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.search-suggestion-desc {
    font-size: 12px;
    color: var(--text-secondary);
    /* Fix for overflow */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.no-suggestions {
    padding: 16px;
    text-align: center;
    color: var(--text-secondary);
    font-style: italic;
}

/* Hide dropdown when sidebar opens (mobile) */
@media (max-width: 767px) {
    .search-suggestions {
        position: fixed;
        top: 120px; /* Position below top bar */
        left: 0;
        right: 0;
        width: 100%;
        max-height: calc(100vh - 120px);
        border-radius: 0;
    }
    .left-sidebar.open ~ .top-bar .search-suggestions {
        display: none; /* Hide if sidebar is open */
    }
}


/* ============================================= */
/* === MODAL STYLES (For Drawing & Share) === */
/* ============================================= */
.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001; /* Above modal-overlay */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    display: none; /* Hidden by default */
}

.modal-content {
    background: var(--bg-white);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    width: 100%;
    max-width: 500px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    color: var(--text-primary);
    font-weight: 500;
}

.modal-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    color: var(--text-secondary);
    padding: 4px;
    border-radius: 50%;
    display: flex;
}
.modal-close-btn:hover {
    background: var(--bg-light);
    color: var(--text-primary);
}

.modal-body {
    padding: 24px;
    max-height: 70vh;
    overflow-y: auto;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.form-group input[type="text"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: var(--bg-white);
    outline-color: var(--primary-color);
}

.form-group textarea {
    resize: vertical;
    min-height: 60px;
}

.form-group-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}
.form-group-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
}
.form-group-checkbox label {
    font-size: 14px;
    color: var(--text-primary);
}
.form-group-checkbox label small {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
}

.btn-primary, .btn-secondary {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}
.btn-primary {
    background: var(--primary-color);
    color: white;
}
.btn-primary:hover {
    background: #1b66c9;
}
.btn-secondary {
    background: var(--bg-light);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.btn-secondary:hover {
    background: #e0e0e0;
}

/* Icon Picker */
.icon-picker-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 12px;
    max-height: 150px;
    overflow-y: auto;
}
.icon-picker-list i {
    font-size: 24px;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    border: 2px solid transparent;
}
.icon-picker-list i:hover {
    background: var(--bg-light);
    color: var(--text-primary);
}
.icon-picker-list i.selected {
    color: var(--primary-color);
    background: var(--primary-light);
    border-color: var(--primary-color);
}

/* Custom Leaflet Icon Styles */
.custom-div-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border: 2px solid white;
    width: 30px;
    height: 30px;
    transition: opacity 0.2s;
}
.custom-div-icon i {
    font-size: 16px;
    color: white;
    text-shadow: 0 0 3px rgba(0,0,0,0.5);
}

/* ============================================= */
/* === LANDMARK POPUP & TOOLTIP STYLES === */
/* ============================================= */

/* Drawn Feature Popup Content */
.drawn-popup-category {
    font-size: 12px;
    font-weight: 500;
    text-transform: capitalize;
    margin-top: 4px;
}
.drawn-popup-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 6px;
    border-top: 1px solid var(--border-color);
    padding-top: 6px;
}
.drawn-popup-claimed {
    font-size: 12px;
    font-weight: 500;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
}
.drawn-popup-claimed i {
    font-size: 16px;
}
.drawn-popup-claimed.unclaimed i {
    color: var(--text-secondary);
}
.drawn-popup-claimed.owner i {
    color: #388e3c; /* Green for owner */
}

/* Landmark Tooltip (Label) */
.landmark-tooltip,
.nearby-marker-wrapper {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 500;
    color: #333;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    white-space: nowrap;
    
    /* --- Visibility control (works with zoom class on #map) --- */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}


/* ============================================= */
/* === NEW: SHARE MODAL STYLES === */
/* ============================================= */
.share-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    text-decoration: none;
    color: white;
    font-size: 24px;
    transition: transform 0.2s;
}
.share-btn:hover {
    transform: scale(1.1);
}
.share-btn.whatsapp { background: #25D366; }
.share-btn.telegram { background: #0088cc; }
.share-btn.email { background: #7f8c8d; }
.share-btn.facebook { background: #1877F2; }
.share-btn.twitter { background: #191713; } /* Updated for X */

/* Input with copy button */
.input-with-btn {
    display: flex;
    gap: 8px;
}
.input-with-btn input[type="text"] {
    flex: 1;
    background: var(--bg-light);
    border-color: var(--border-color);
}
.btn-copy {
    padding: 10px 12px;
    font-size: 18px;
    font-weight: 500;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    background: var(--bg-light);
    color: var(--text-primary);
}
.btn-copy:hover {
    background: #e0e0e0;
}
.btn-copy.copied {
    background: var(--primary-light);
    color: var(--primary-color);
    border-color: var(--primary-color);
}




/* ============================================= */
/* === NEARBY PLACES MARKER STYLES === */
/* ============================================= */
.nearby-place-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    border: 2px solid white;
    width: 30px;
    height: 30px;
    background-color: var(--primary-color); /* Default color */
    transition: opacity 0.2s; /* This transition is fine */
    font-size: 16px;
    color: white;
}
.nearby-place-icon i {
    font-size: 16px;
    color: white;
    text-shadow: 0 0 3px rgba(0,0,0,0.5);
}

/* --- UPDATED: Custom colors for new categories --- */
.nearby-place-icon.health { background-color: #d32f2f; }
.nearby-place-icon.transport { background-color: #5d4037; } /* Transport */
.nearby-place-icon.aviation { background-color: #0277bd; } /* Aviation */
.nearby-place-icon.emergency { background-color: #d32f2f; } /* Health/Emergency */
.nearby-place-icon.safety { background-color: #00796b; } /* Safety/Gov */
.nearby-place-icon.education { background-color: #7b1fa2; } /* Education */
.nearby-place-icon.lodging { background-color: #c2185b; } /* Lodging */
.nearby-place-icon.food { background-color: #c2185b; } /* Food */
.nearby-place-icon.shopping { background-color: #f57c00; } /* Shopping */
.nearby-place-icon.financial { background-color: #f57c00; } /* Financial */
.nearby-place-icon.recreation { background-color: #388e3c; } /* Recreation */
.nearby-place-icon.utilities { background-color: #5f6368; } /* Utilities */
.nearby-place-icon.religion { background-color: #7b1fa2; } /* Religion */


.nearby-popup b {
    font-size: 14px;
    color: var(--text-primary);
    display: block;
}
.nearby-popup p {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
    max-width: 200px;
    margin-bottom: 0;
}

/* ============================================= */
/* === NEW: CSS SPINNER FOR MAP LOADING === */
/* ============================================= */
/* This class is added to the #map container by nearby_places.js */
#map.loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(2px);
    z-index: 998; /* Below spinner, above tiles */
}
#map.loading::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 5px solid var(--bg-light);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: css-map-spinner 0.8s linear infinite;
    z-index: 999; /* Above map tiles and overlay */
}

@keyframes css-map-spinner {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================= */
/* === HIDE OSRM ROUTING DEMO SERVER WARNING === */
/* ============================================= */
/* This hides the "You are using OSRM's demo server..." spam */
.leaflet-routing-container > span {
    display: none !important;
}

/* ============================================= */
/* === NEW: DEVELOPER MODE TOGGLE === */
/* ============================================= */
.dev-mode-toggle {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(4px);
    padding: 6px 10px;
    border-radius: 20px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    z-index: 10;
}
.dev-mode-toggle i {
    font-size: 20px;
    color: var(--text-primary);
}
/* The switch - a checkbox with a slider */
.switch {
    position: relative;
    display: inline-block;
    width: 44px; /* Reduced size */
    height: 24px; /* Reduced size */
}
.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 18px; /* Reduced size */
    width: 18px; /* Reduced size */
    left: 3px; /* Adjusted position */
    bottom: 3px; /* Adjusted position */
    background-color: white;
    transition: .4s;
}
input:checked + .slider {
    background-color: var(--primary-color);
}
input:checked + .slider:before {
    transform: translateX(20px); /* Reduced slide */
}
/* Rounded sliders */
.slider.round {
    border-radius: 24px;
}
.slider.round:before {
    border-radius: 50%;
}
@media (max-width: 767px) {
    .dev-mode-toggle {
        top: 130px; /* Position below category scroller */
        right: 8px;
    }
}

/* ============================================= */
/* === NEW: DEVELOPER MODE BOUNDARY === */
/* ============================================= */
.developer-boundary {
    stroke: #d93025; /* Red */
    fill: none; /* <-- FIX: Was '#d93025', now it won't fill the box */
    fill-opacity: 0; /* Transparent by default */
    opacity: 0; /* <-- FIX: Hide the border by default */
    stroke-dasharray: 5, 5;
    transition: opacity 0.3s ease, fill-opacity 0.3s ease;
}