/* OSM Map Block */


/* MapLibre overrides */
.maplibregl-ctrl-group {
    border-radius: 2px;
}
.maplibregl-ctrl-group:not(:empty), .ml-drawer-fab-btn {
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
}
.maplibregl-ctrl-group button {
    width: 36px;
    height: 36px;
    color: #3b3b3b;
}
.maplibregl-ctrl-group button[disabled] {
    opacity: 0.3;
    cursor: default;
}
.maplibregl-popup-content {
    background-color: var(--wp--preset--color--bg-alt);
    box-shadow: 0 2px 7px 1px rgba(0,0,0,.3);
    color: var(--wp--preset--color--text-on-dark);
    font-size: 1rem;
}
.maplibregl-popup-content a {
    color: inherit;
}
.maplibregl-popup-content .ml-popup-title-link {
    display: block;
    line-height: 1.4;
}
.maplibregl-popup-content .ml-popup-title {
    font-weight: 600;
}
.maplibregl-popup-content .close-button-margin {
    margin-right: 1.5rem;
}

.maplibregl-popup-content .ml-popup-info-group {
    padding: 1rem 0;
    line-height: 1.2rem;
    font-size: 0.9rem;
}

.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
    border-top-color: var(--wp--preset--color--bg-alt);
}
.maplibregl-popup-close-button {
    color: var(--wp--preset--color--text-on-dark);
    font-size: 1.5rem;
    top: 4px;
    right: 4px;
    border: none;
    height: 28px;
    width: 28px;
    transition: border-color 0.15s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 4px;
}
.maplibregl-popup-close-button:hover {
    border-color: var(--wp--preset--color--text-on-dark);
    opacity: 0.8;
}
.maplibregl-ctrl-attrib.maplibregl-compact-show {
    opacity: 0.5;
}


/* OSM map styles for this control */

.osm-map .maplibregl-canvas-container.map-is-pointer {
    cursor: pointer;
}

/* Left rail UI for map (MapLibre-friendly). Keep selectors scoped to .osm-map to avoid bleed. */
.osm-map {
    position: relative;
    font-family: var(--wp--preset--font-family--indivisbile);
}
.osm-map .ml-drawer {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    max-width: 80vw;
    background: rgba(255,255,255,0.75);
    backdrop-filter: saturate(120%) blur(4px);
    color: #1d2327;
    border-right: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 0 24px rgba(0,0,0,0.10);
    z-index: 5;
    transform: translateX(0);
    transition: transform .25s ease, opacity .2s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden
}
/* Bottom placement for small screens */
.osm-map .ml-drawer.bottom {
    top: auto; /* Overrides top: 0 */
    left: 0;
    right: 0; /* Ensures full width */
    width: 100%; /* Full width */
    max-width: 100%; /* Override max-width for small screens */
    height: auto; /* Height adapts to content */
    max-height: 40vh; /* Don't cover the whole screen */
    border-right: none; /* Remove side border */
    border-top: 1px solid rgba(0,0,0,0.08); /* Add top border */
    box-shadow: 0 0 24px rgba(0,0,0,0.10); /* Keep shadow, looks fine */
    transform: translateY(0); /* Reset X transform */
    /* Must allow content to scroll vertically */
}
.osm-map .ml-drawer.collapsed { transform: translateX(-102%) }
/* Collapsed state for bottom placement */
.osm-map .ml-drawer.bottom.collapsed { transform: translateY(102%) }
/* Ensure normal collapsed state is active when bottom is not present */
.osm-map .ml-drawer:not(.bottom).collapsed { transform: translateX(-102%) }

.osm-map .ml-drawer .ml-drawer-title {
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 1rem;
}
.osm-map .ml-drawer.bottom .ml-drawer-title {
    margin-top: 1.75rem;
    margin-bottom: 1rem;
}
.osm-map .ml-drawer .ml-drawer-image {
    padding-top: 1rem;
    padding-bottom: 1.5rem;
    max-width: 130px;
}
.osm-map .ml-drawer.bottom .ml-drawer-image {
    display: none;
}

.osm-map .ml-drawer-btn {
    position: absolute;
    /* Positioning relative to the .osm-map container */
    top: 2rem; /* Adjusted to be near the top */
    left: 300px; /* Puts it right on the edge of the 300px rail */
    z-index: 6; /* Higher than the drawer (z-index: 5) */

    border: none;
    background: rgba(255,255,255,0.55);
    box-shadow: 0 0 24px rgba(0,0,0,0.10);
    border-radius: 0 4px 4px 0; /* Only round the right corners */
    padding: 0.25rem 0;
    line-height: 1;
    height: 3rem;
    cursor: pointer;
    /* Opacity to the transition */
    transition: transform .25s ease, background .2s ease, left .25s ease, top .25s ease, opacity .2s ease;
    opacity: 1; /* Default state */
}
/* Button positioning for bottom drawer (left-side button moves to bottom-left corner of the drawer) */
.osm-map .ml-drawer.bottom + .ml-drawer-btn {
    position: absolute;
    left: 50%;
    top: auto;
    transform: translate(-50%, -50%) rotate(-90deg);
    bottom: 30vh;
    right: auto;
    border-radius: 4px;
    width: 3px;
    background-color:#9c9c9c;
    z-index: 6;
    padding: 0;
}

.osm-map.drawer-collapsed .ml-drawer-btn {
    left: -50px; /* Moves the button out of sight, plus a little margin */
    /* opacity: 0 to hide button when collapsed */
    opacity: 0;
}
/* Hide the left-side collapse button completely when the drawer is in bottom mode and collapsed, as the FAB takes over */
.osm-map.drawer-collapsed .ml-drawer.bottom + .ml-drawer-btn {
    display: none;
}


.osm-map .ml-drawer-content {
    flex: 1;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px 12px;
    font-size: 13px;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.osm-map .ml-drawer-content .filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}
.osm-map .ml-drawer-content .filter-group-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.osm-map .ml-drawer.bottom .ml-drawer-content .filter-group-container {
    flex-direction: row;
}
.osm-map .ml-drawer.bottom .ml-drawer-content .filter-group-container > * {
    flex: 1;
}
.osm-map .ml-drawer-content .filter-group .filter-group-title {
    text-transform: uppercase;
    font-size: 0.85rem;
    font-weight: 600;
    padding-bottom: 0.5rem;
}
.osm-map .ml-drawer-content .filter-checkbox-item {
    display: flex; /* Use flex to align circle, checkbox, and label */
    align-items: center;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 400;
    color: #3b3b3b;
}

.osm-map .ml-drawer-content .filter-checkbox-item input[type="checkbox"] {
    margin-right: 0.75rem;
    flex-shrink: 0;
    width: 0.85rem;
    height: 0.85rem;
}

.osm-map .ml-drawer-content .filter-stage-item .stage-color-circle {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
    border: 1px solid rgba(0,0,0,0.2); /* Small border for contrast */
    flex-shrink: 0;
}
/* New Search Styles */
.osm-map .ml-drawer-content .search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.osm-map .ml-drawer-content .map-filter-input {
    width: 100%;
    box-sizing: border-box;
    font-size: 0.85rem;
}
.osm-map .ml-drawer-content .search-clear-btn {
    position: absolute;
    right: 5px;
    background: transparent;
    border: none;
    font-size: 18px;
    line-height: 1;
    color: #555;
    cursor: pointer;
    padding: 0 5px;
    display: none; /* Hidden by default */
}
/* NEW: Class to show the clear button */
/* This rule was already present and is now used by view.js */
.osm-map .ml-drawer-content .search-clear-btn.is-visible {
    display: block;
}

.osm-map .ml-drawer-content .map-reset-btn {
    width: 100%;
}
/* End of new filter styles */


/* Floating expand button shown when collapsed */
.osm-map .ml-drawer-fab {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 8;
    display: none
}
.osm-map .ml-drawer-btn:hover, .osm-map .ml-drawer-fab-btn:hover {
    background-color: #e5e5e5;
}
.osm-map .ml-drawer-fab.visible { display: block }


.osm-map .ml-drawer-fab-btn {
    background: #fff;
    border-radius: 2px;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    height: 36px;
}
.osm-map .ml-drawer-strip {
    font-size: 12px;
    color: #555;
    padding: 6px 12px;
    border-bottom: 1px dashed rgba(0,0,0,0.08)
}
/* Helper: container state flags (no layout shift; we call map.resize()) */
.osm-map.has-rail:not(.drawer-collapsed) .maplibregl-canvas {}

/* Scroll-zoom hint overlay */
.osm-map .osm-map-scroll-hint {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* Use flexbox for centering */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    background: rgba(30, 30, 34, 0.7); /* Darker, more opaque background to gray out the map */
    color: #fff;
    font-size: 1.25rem; /* Large font size */
    line-height: 1.2;
    box-shadow: none; /* No box shadow */
    pointer-events: none;
    opacity: 0;
    transition: opacity .18s ease-in-out;
    z-index: 7; /* Ensure it's above the map */
    text-align: center; /* Ensure text is centered within its own div */
}

/* Add a slight background/padding to the text itself for better readability */
.osm-map .osm-map-scroll-hint .osm-map-scroll-hint-text,
.osm-map .osm-map-scroll-hint .osm-map-touch-hint-text {
    padding: 15px 25px;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background for text */
    border-radius: 8px;
    white-space: nowrap; /* Keep text on one line */
}

/* Hide both hint text spans by default */
/* These rules were already present and are now used by view.js */
.osm-map .osm-map-scroll-hint .osm-map-scroll-hint-text,
.osm-map .osm-map-scroll-hint .osm-map-touch-hint-text {
    display: none;
}

/* Show the correct hint text based on the parent's class */
.osm-map .osm-map-scroll-hint.hint-type-scroll .osm-map-scroll-hint-text {
    display: inline-block;
}
.osm-map .osm-map-scroll-hint.hint-type-touch .osm-map-touch-hint-text {
    display: inline-block;
}


.osm-map .osm-map-scroll-hint.is-visible { opacity: 1 }


/* --- Project Marker Styles --- */
.osm-map .project-marker {
    /* Base styles moved from JS */
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;

    /* Dynamic border based on background color, set once for all markers */
    border: 2px solid white;
}

.osm-map .project-marker:hover {
    transform: scale(1.2);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}

/* Optional: Specific border color for black markers to stand out against white map */
.osm-map .project-marker[style*="rgb(0, 0, 0)"] { /* Targets default black marker */
    border-color: #999;
}

.osm-map.drawer-hidden .ml-drawer,
.osm-map.drawer-hidden .ml-drawer-btn,
.osm-map.drawer-hidden .ml-drawer-fab {
    display: none !important;
}

.project-count-display {
    transition: opacity 0.45s ease;
    color: #818181;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-bottom: 0.5rem;
}
.project-count-display.fade-out {
    opacity: 0;
}
.project-count-display.fade-in {
    opacity: 1;
}

/* Let the browser treat one-finger drags as normal scrolling */
.osm-map .maplibregl-canvas,
.osm-map .maplibregl-canvas-container {
    touch-action: auto !important; /* or: pan-x pan-y */
}

/* Make sure you’re not blocking scroll propagation */
.osm-map {
    overscroll-behavior: auto;   /* avoid contain/none here */
}