.map-locations-wrapper .map-container {
    min-height: 300px;
}

/* Updated popup styles to work with new popup structure */
.map-locations-wrapper .leaflet-popup-content {
    margin: 16px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
}

.map-locations-wrapper .leaflet-popup-content-wrapper {
    max-width: 300px !important;
    min-width: 250px !important;
}

/* Article popup specific overrides in map-locations */
.map-locations-wrapper .article-map-popup {
    width: 100% !important;
    min-width: 250px !important;
    max-width: 300px !important;
}

.map-locations-wrapper .article-map-popup .popup-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}

.map-locations-wrapper .article-map-popup .popup-image,
.map-locations-wrapper .article-map-popup .popup-icon {
    flex-shrink: 0 !important;
    width: 50px !important;
    height: 40px !important;
}

.map-locations-wrapper .article-map-popup .popup-info {
    flex-grow: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.map-locations-wrapper .article-map-popup .popup-info h6 {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    margin: 0 0 2px 0 !important;
    color: #212529 !important;
}

.map-locations-wrapper .article-map-popup .popup-info small {
    font-size: 11px !important;
    line-height: 1.2 !important;
    color: #6c757d !important;
    margin: 0 !important;
}

.map-locations-wrapper .article-map-popup .popup-actions {
    display: flex !important;
    gap: 4px !important;
    margin-top: 8px !important;
    flex-wrap: wrap !important;
}

.map-locations-wrapper .article-map-popup .popup-actions .btn {
    font-size: 10px !important;
    padding: 2px 6px !important;
    line-height: 1.3 !important;
}

/* Business popup specific overrides in map-locations */
.map-locations-wrapper .business-map-popup {
    width: 100% !important;
    min-width: 250px !important;
    max-width: 300px !important;
}

.map-locations-wrapper .business-map-popup .popup-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}

.map-locations-wrapper .business-map-popup .popup-image {
    flex-shrink: 0 !important;
    width: 50px !important;
    height: 40px !important;
}

.map-locations-wrapper .business-map-popup .popup-info {
    flex-grow: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.map-locations-wrapper .business-map-popup .popup-info h6 {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    margin: 0 0 2px 0 !important;
    color: #212529 !important;
}

.map-locations-wrapper .business-map-popup .popup-info .text-muted {
    font-size: 11px !important;
    line-height: 1.2 !important;
    color: #6c757d !important;
    margin: 0 0 2px 0 !important;
}

.map-locations-wrapper .business-map-popup .business-rating {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    gap: 1px !important;
}

.map-locations-wrapper .business-map-popup .popup-actions {
    display: flex !important;
    gap: 4px !important;
    margin-top: 8px !important;
    flex-wrap: wrap !important;
}

.map-locations-wrapper .business-map-popup .popup-actions .btn {
    font-size: 10px !important;
    padding: 2px 6px !important;
    line-height: 1.3 !important;
}

.map-locations-wrapper .map-popup {
    min-width: auto !important;
    width: 100% !important;
}

.map-locations-wrapper .popup-header {
    margin-bottom: 8px !important;
}

.map-locations-wrapper .popup-info h6 {
    margin: 0 0 4px 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
}

.map-locations-wrapper .popup-info small,
.map-locations-wrapper .popup-location,
.map-locations-wrapper .popup-city {
    font-size: 11px !important;
    color: #6c757d !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

.map-locations-wrapper .popup-actions {
    margin-top: 8px !important;
    border-top: none !important;
    padding-top: 0 !important;
}

.map-locations-wrapper .popup-actions .btn {
    font-size: 11px !important;
    padding: 4px 8px !important;
}

.map-locations-wrapper .map-loading,
.map-locations-wrapper .map-error {
    border-radius: inherit;
}

.map-locations-wrapper .btn-group-sm .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

.card-map-body {
    padding: 1rem; /* fallback */
    background: #fff;
    border-radius: 0 0 .5rem .5rem;
}

@media (min-width: 768px) {
    .card-map-body { padding: 1.25rem 1.5rem; }
}

@media (max-width: 768px) {
    .map-controls .d-flex {
        flex-direction: column;
        gap: 0.5rem;
    }

    .map-controls .btn-group {
        width: 100%;
    }

    .map-controls .btn-group .btn {
        flex: 1;
    }
}


.location-details .location-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.9rem;
}

.location-details .location-item i {
    margin-right: 0.5rem;
    width: 1rem;
    text-align: center;
}

.location-details .location-item:last-child {
    margin-bottom: 0;
}



.map-locations-wrapper .map-controls .btn-group { display:flex; gap:.65rem; }
.map-locations-wrapper .map-controls .btn-group .btn {
    font-weight:500;
    border-width:1.5px;
    padding:.45rem .5rem;
    border-radius:12px !important;
    width:128px;
    text-align:center;
    justify-content:center;
    display:inline-flex;
    align-items:center;
    margin-top:.5rem; /* added extra top margin */
}
.map-locations-wrapper .map-controls .btn-group .btn i { margin-right:4px; }
.map-locations-wrapper .map-controls .btn-group .btn:focus { box-shadow:0 0 0 .15rem rgba(13,110,253,.25); }
/* Ensure legend/map info do not overlap small screens by increasing vertical space */
@media (max-width: 576px){
  .map-locations-wrapper { height:520px !important; }
  .map-locations-wrapper .map-container { min-height:460px; }
  .map-locations-wrapper .map-locations-map { min-height:460px !important; height:460px !important; }
  .map-locations-wrapper .map-controls .btn-group { flex-wrap:nowrap; gap:.45rem; overflow-x:auto; }
  .map-locations-wrapper .map-controls .btn-group .btn { flex:0 0 110px; width:110px; font-size:.7rem; padding:.5rem .4rem; margin-top:.4rem; }
  .map-locations-wrapper .map-controls .btn-group::-webkit-scrollbar { height:6px; }
  .map-locations-wrapper .map-controls .btn-group::-webkit-scrollbar-thumb { background:#ced4da; border-radius:3px; }
}

.map-locations-wrapper .map-info .legend-inline { margin-bottom:.1rem; margin-top:-.35rem; }
.map-locations-wrapper .map-info .legend-item i { font-size:.9rem; }
.map-locations-wrapper .map-info .legend-item span { font-size:.75rem; }
@media (max-width:576px){
  .map-locations-wrapper .map-info .legend-inline { gap:1rem; margin-top:-.25rem; }
  .map-locations-wrapper .map-info .legend-item span { font-size:.7rem; }
}
/* Enhanced counters styling */
.map-locations-wrapper .map-info { margin-top:2.8rem !important; }
@media (max-width:576px){ .map-locations-wrapper .map-info { margin-top:2.2rem !important; } }
.map-locations-wrapper .map-info [data-role="map-counts"] {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:.6rem .75rem;
  font-size:.72rem;
  line-height:1.2;
}
.map-locations-wrapper .map-info [data-role="map-counts"] span.count-all,
.map-locations-wrapper .map-info [data-role="map-counts"] span.count-articles-wrapper,
.map-locations-wrapper .map-info [data-role="map-counts"] span.count-businesses-wrapper {
  background:#f1f3f5;
  padding:.35rem .7rem;
  border-radius:50rem;
  box-shadow:0 1px 2px rgba(0,0,0,.05);
  font-weight:500;
}
.dark .map-locations-wrapper .map-info [data-role="map-counts"] span.count-all,
.dark .map-locations-wrapper .map-info [data-role="map-counts"] span.count-articles-wrapper,
.dark .map-locations-wrapper .map-info [data-role="map-counts"] span.count-businesses-wrapper {
  background:#1e293b;
  color:#e2e8f0;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.map-locations-wrapper .map-info [data-role="map-counts"] .count-articles { color:#0d6efd; }
.map-locations-wrapper .map-info [data-role="map-counts"] .count-businesses { color:#198754; }

/* Panel συντεταγμένων */
.map-locations-wrapper .current-coords { pointer-events:none; }
.dark .map-locations-wrapper .current-coords { background:#0f172a; border-color:#1e293b; color:#e2e8f0; }
.map-locations-wrapper .current-coords .fw-semibold { font-weight:600; }
.map-locations-wrapper .current-coords { bottom:0; left:0; }
@media (max-width:576px){ .map-locations-wrapper .current-coords { font-size:.55rem; padding:.3rem .45rem; } }



.mobile-location-btn {
    font-size: 0.85rem;
}

.popup-business-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
}

.popup-business-placeholder {
    width: 60px;
    height: 60px;
    background-color: #f8f9fa;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    font-size: 1.5rem;
}

.business-map-popup {
    min-width: auto !important;
    max-width: 280px !important;
}

.business-map-popup .popup-info h6 {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
}

.business-map-popup .popup-address,
.business-map-popup .popup-phone,
.business-map-popup .popup-navigation {
    font-size: 11px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}


/* === Map Markers - Responsive Sizing === */
.custom-map-marker {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.custom-map-marker.zoom-responsive {
    transition: all 0.2s ease;
}

.marker-pin {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transition: all 0.2s ease;
}

.marker-pin.highlighted {
    filter: drop-shadow(0 0 8px rgba(255, 102, 0, 0.6));
}

.marker-pin i {
    transition: font-size 0.2s ease, text-shadow 0.2s ease;
    display: block;
    line-height: 1;
}

/* Map marker hover effects */
.custom-map-marker:hover .marker-pin i {
    transform: scale(1.1);
    filter: brightness(1.2);
}

.custom-map-marker.zoom-responsive:hover {
    z-index: 1000 !important;
}

/* Ensure markers are properly positioned */
.leaflet-marker-icon.custom-map-marker {
    margin-left: 0 !important;
    margin-top: 0 !important;
}

/* Responsive marker adjustments for different zoom levels */
@media (max-width: 768px) {
    .marker-pin i {
        filter: drop-shadow(0 0 3px rgba(0,0,0,0.5)) !important;
    }
}

/* ====================================
   MAP FULLSCREEN MODE
   ==================================== */

/* Fullscreen wrapper - only !important on position/z-index to override Bootstrap */
.map-locations-wrapper.map-fullscreen {
    position: fixed !important;
    inset: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    z-index: 9999 !important;
    background: #fff;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

/* Fullscreen container */
.map-locations-wrapper.map-fullscreen .map-container {
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    width: 100vw;
}

/* Fullscreen map element */
.map-locations-wrapper.map-fullscreen .map-locations-map {
    height: 100vh;
    min-height: 100vh;
    width: 100vw;
}

/* Fullscreen Leaflet container */
.map-locations-wrapper.map-fullscreen .leaflet-container {
    height: 100vh;
    min-height: 100vh;
    width: 100vw;
}

/* ====================================
   FULLSCREEN MAP MODAL
   ==================================== */

/* Ensure modal is truly fullscreen on all devices */
.modal-fullscreen .modal-dialog {
    margin: 0;
    max-width: 100%;
    width: 100vw;
    height: 100vh;
}

.modal-fullscreen .modal-content {
    height: 100vh;
    max-height: 100vh;
    border: none;
    border-radius: 0;
}

.modal-fullscreen .modal-body {
    flex: 1;
    overflow: hidden;
    height: 100%;
}

/* Modal map container fullscreen */
.modal-fullscreen .modal-map-container,
.modal-fullscreen .map-locations-wrapper,
.modal-fullscreen .map-container {
    height: 100% !important;
    min-height: 100% !important;
}

.modal-fullscreen .map-locations-map,
.modal-fullscreen .leaflet-container {
    height: 100% !important;
    min-height: 100% !important;
}

/* Mobile specific adjustments */
@media (max-width: 576px) {
    .map-coordinates-overlay {
        font-size: 0.75rem;
        padding: 0.5rem;
        margin: 0.5rem;
    }
}