/* ==========================================================================
   Map Styles
   ========================================================================== */

/* ── Marker Cluster (replaces missing MarkerCluster.Default.min.css) ───── */
.marker-cluster {
    background-clip: padding-box;
    border-radius: 50%;
}
.marker-cluster div {
    width: 30px;
    height: 30px;
    margin: 5px;
    text-align: center;
    border-radius: 50%;
    font: bold 12px/30px "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.marker-cluster span {
    line-height: 30px;
}
.marker-cluster-small {
    background-color: rgba(110, 204, 57, 0.3);
}
.marker-cluster-small div {
    background-color: rgba(110, 204, 57, 0.7);
    color: #fff;
}
.marker-cluster-medium {
    background-color: rgba(240, 194, 12, 0.3);
}
.marker-cluster-medium div {
    background-color: rgba(240, 194, 12, 0.7);
    color: #fff;
}
.marker-cluster-large {
    background-color: rgba(241, 128, 23, 0.3);
}
.marker-cluster-large div {
    background-color: rgba(241, 128, 23, 0.7);
    color: #fff;
}

.map-picker-section {
    margin-top: 1.5rem;
}

.map-picker-section .map-label,
.map-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #374151;
}

.map-label-hint {
    font-weight: 400;
    font-size: 0.8rem;
    color: #9ca3af;
}

.map-container {
    height: 350px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #d1d5db;
}

.map-show-container {
    height: 300px;
    border-radius: 8px;
    overflow: hidden;
}

/* Map picker — wrapper inside location section */
.map-picker-wrapper {
    margin-top: 1.25rem;
}

/* Controls row: button + status message side by side */
.map-controls-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

/* Geocoding status feedback */
.geocode-status {
    font-size: 0.85rem;
    line-height: 1.4;
    max-width: 380px;
}

.geocode-status--loading  { color: #6b7280; }
.geocode-status--success  { color: #16a34a; }
.geocode-status--error    { color: #dc2626; }
.geocode-status--warning  { color: #d97706; }

.map-disclaimer {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-light);
}

@media (max-width: 640px) {
    .map-container {
        height: 250px;
    }
}

/* ── Search Split Layout ─────────────────────────── */
.search-split-layout {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    margin-top: 1rem;
}

.search-list-col {
    flex: 0 0 55%;
    min-width: 0;
}

.search-map-col {
    flex: 1;
    position: sticky;
    top: 80px;
    height: calc(100vh - 100px);
}

.search-map-container {
    height: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

/* Popup stilovi */
.map-popup { font-size: 0.875rem; line-height: 1.5; min-width: 160px; }
.map-popup strong { display: block; margin-bottom: 2px; color: var(--primary); }
.map-popup span { color: var(--text-light); }
.map-popup-link {
    display: inline-block;
    margin-top: 6px;
    color: var(--secondary);
    font-weight: 600;
    text-decoration: none;
}
.map-popup-link:hover { text-decoration: underline; }

/* Mobilni prikaz — mapa ide iznad liste */
@media (max-width: 768px) {
    .search-split-layout { flex-direction: column-reverse; }
    .search-list-col { flex: none; width: 100%; }
    .search-map-col { position: static; width: 100%; height: 300px; }
}