/* Styles for associations map page */
.association-map-card.mb-0 {
    height: 100vh;
    border: none;
    border-radius: 0;
}

.association-map-card.mb-0 .card-body {
    height: 100%;
}

#associations-map {
    border-radius: 0.375rem;
    height: 100%;
    min-height: 300px;
    width: 100%;
    box-shadow: var(--box-shadow); /* Using CSS variable from themes.css */
}

.leaflet-div-icon.custom-association-marker {
    background: #fff;
    border: 2px solid #0d6efd;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.leaflet-div-icon.custom-association-marker i {
    color: #0d6efd;
    font-size: 14px;
}

.association-map-popup {
    font-size: 14px;
}

@media (max-width: 768px) {
    #associations-map { height: 350px; }
    .leaflet-div-icon.custom-association-marker { width: 32px; height: 32px; }
}

/* Minimal semi-transparent floating filter */
.map-filter-control {
    position: relative;
    padding: 4px;
    border-radius: 999px;
    display: inline-block;
    min-width: 0;
    max-width: 420px;
}

.map-filter-control .map-filter-inner {
    background: rgba(255,255,255,0.88);
    padding: 8px 10px;
    border-radius: 999px;
    display:flex;
    gap:8px;
    align-items:center;
    color: #000;
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    backdrop-filter: blur(4px);
}

/* Input: flat and visually integrated in the pill */
.map-filter-control .map-filter-inner .filter-any,
.map-filter-control .map-filter-inner input,
.map-filter-control .map-filter-inner select {
    flex: 1 1 auto;
    min-width: 80px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    padding: 0 8px;
    height: 40px; /* align with circular buttons */
    line-height: 40px;
    font-size: 14px;
    color: #222;
}

.map-filter-control .map-filter-inner .filter-any::placeholder { color: rgba(0,0,0,0.45); }
.map-filter-control .map-filter-inner .filter-any:focus { background: transparent !important; }

/* Buttons */
.map-filter-control .map-filter-inner .filter-search {
    border: none;
    background: rgba(13,110,253,0.08);
    width: 40px; height: 40px; border-radius: 50%;
    display:flex; align-items:center; justify-content:center;
    cursor: pointer; color: #0d6efd; font-size:16px;
}
.map-filter-control .map-filter-inner .filter-search:hover { background: rgba(13,110,253,0.14); transform: translateY(-1px); }
.map-filter-control .map-filter-inner .filter-search:focus { outline: none; box-shadow: none; }

.map-filter-control .map-filter-inner .filter-clear {
    width: 36px; height: 36px; display:flex; align-items:center; justify-content:center;
    border-radius:50%; background: transparent; border: none; cursor: pointer; color: rgba(0,0,0,0.65); font-size:16px;
}
.map-filter-control .map-filter-inner .filter-clear:hover { background: rgba(0,0,0,0.06); }

.map-filter-control .map-filter-inner .filter-toggle-results {
    border: none;
    background: rgba(13,110,253,0.08);
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #0d6efd; font-size: 14px;
}
.map-filter-control .map-filter-inner .filter-toggle-results:hover { background: rgba(13,110,253,0.14); transform: translateY(-1px); }
.map-filter-control .map-filter-inner .filter-toggle-results:focus { outline: none; box-shadow: none; }

/* Results panel: fixed size for consistent layout, scroll inside */
.map-filter-control .filter-results {
    margin-top: 8px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    height: 310px; max-height: 310px;
    background: rgba(255,255,255,0.95);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    overflow: hidden; display:flex; flex-direction:column; font-size:14px; box-sizing:border-box;
}
.map-filter-control .filter-results .results-header { flex:0 0 auto; padding:8px 10px; }
.map-filter-control .filter-results .results-list { overflow-y:auto; padding:6px 8px; display:flex; flex-direction:column; gap:6px; flex:1 1 auto; min-height:0; }
.map-filter-control .filter-results .results-list:not(.has-items) { display:none; }

.map-filter-control .filter-results .result-item {
    padding:8px 10px; border-radius:6px; cursor:pointer; display:flex; flex-direction:column; justify-content:center;
    background:transparent; transition: background .12s ease, transform .12s ease; box-sizing:border-box; word-break:break-word; overflow:hidden;
    height:64px; min-height:64px; max-height:64px;
}
.map-filter-control .filter-results .result-name {
    color:#0d6efd; font-weight:600; font-size:15px; line-height:1.15; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; text-overflow:ellipsis; white-space:normal; margin:0;
}
.map-filter-control .filter-results .result-city, .map-filter-control .filter-results .result-meta { color:#6c757d; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.map-filter-control .filter-results .result-item:hover, .map-filter-control .filter-results .result-item:focus { background: rgba(13,110,253,0.04); transform: translateY(-1px); outline:none; }

@media (max-width:768px) { #associations-map { height:350px; } .leaflet-div-icon.custom-association-marker{ width:32px; height:32px } }
@media (max-width: 768px) {
    /* Fill available width: 100vw minus zoom controls (~54px) minus Leaflet margins (~20px) */
    .map-filter-control {
        display: block;
        width: calc(100vw - 80px);
        max-width: calc(100vw - 80px);
        box-sizing: border-box;
    }
    .map-filter-control .map-filter-inner {
        width: 100%;
        box-sizing: border-box;
    }
    .map-filter-control .filter-results {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        height: 220px;
        max-height: 220px;
    }
}
@media (max-width:576px) {
    .map-filter-control { min-width:160px; padding:4px 6px; }
    .map-filter-control .map-filter-inner input, .map-filter-control .map-filter-inner select { width:100px; font-size:12px; }
    .map-filter-control .filter-results .result-item { height:64px; }
}

/* Action field filter: mobile adaptations */
@media (max-width: 768px) {
    .action-field-filter-control .aff-list {
        left: 0;
        bottom: calc(100% + 6px);
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        max-width: min(320px, calc(100vw - 24px));
        gap: 4px;
        padding: 6px 8px;
        /* hide scrollbar visually but keep functional */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .action-field-filter-control .aff-list::-webkit-scrollbar { display: none; }
    .action-field-filter-control .aff-item {
        flex: 0 0 auto;
        width: 34px;
        height: 34px;
    }
    .action-field-filter-control .aff-item i { font-size: 13px; }
    /* Hide tooltips on touch devices – they block interaction */
    .action-field-filter-control .aff-item .aff-label { display: none; }
}

/* Marker color variants based on association action_field (first priority) */
.leaflet-div-icon.custom-association-marker.marker-education { border-color: #1565c0; }
.leaflet-div-icon.custom-association-marker.marker-education i { color: #1565c0; }
.leaflet-div-icon.custom-association-marker.marker-culture_heritage { border-color: #ff7043; }
.leaflet-div-icon.custom-association-marker.marker-culture_heritage i { color: #ff7043; }
.leaflet-div-icon.custom-association-marker.marker-elderly { border-color: #78909c; }
.leaflet-div-icon.custom-association-marker.marker-elderly i { color: #78909c; }
.leaflet-div-icon.custom-association-marker.marker-environment { border-color: #2e7d32; }
.leaflet-div-icon.custom-association-marker.marker-environment i { color: #2e7d32; }
.leaflet-div-icon.custom-association-marker.marker-social_assistance { border-color: #e91e63; }
.leaflet-div-icon.custom-association-marker.marker-social_assistance i { color: #e91e63; }
.leaflet-div-icon.custom-association-marker.marker-religious { border-color: #795548; }
.leaflet-div-icon.custom-association-marker.marker-religious i { color: #795548; }
.leaflet-div-icon.custom-association-marker.marker-women_equality { border-color: #8e44ad; }
.leaflet-div-icon.custom-association-marker.marker-women_equality i { color: #8e44ad; }
.leaflet-div-icon.custom-association-marker.marker-neighborhood { border-color: #00897b; }
.leaflet-div-icon.custom-association-marker.marker-neighborhood i { color: #00897b; }
.leaflet-div-icon.custom-association-marker.marker-youth { border-color: #f59e0b; }
.leaflet-div-icon.custom-association-marker.marker-youth i { color: #f59e0b; }
.leaflet-div-icon.custom-association-marker.marker-festivals_traditions { border-color: #dc3545; }
.leaflet-div-icon.custom-association-marker.marker-festivals_traditions i { color: #dc3545; }
.leaflet-div-icon.custom-association-marker.marker-economic_initiatives { border-color: #37474f; }
.leaflet-div-icon.custom-association-marker.marker-economic_initiatives i { color: #37474f; }
.leaflet-div-icon.custom-association-marker.marker-sports { border-color: #26c6da; }
.leaflet-div-icon.custom-association-marker.marker-sports i { color: #26c6da; }
.leaflet-div-icon.custom-association-marker.marker-cooperation_awareness { border-color: #5c6bc0; }
.leaflet-div-icon.custom-association-marker.marker-cooperation_awareness i { color: #5c6bc0; }
.leaflet-div-icon.custom-association-marker.marker-other { border-color: #9e9e9e; }
.leaflet-div-icon.custom-association-marker.marker-other i { color: #9e9e9e; }

/* Action-field filter control (bottom of the map) */
.action-field-filter-control {
    position: relative;
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:8px;
    padding:6px;
}
.action-field-filter-control .aff-toggle {
    width:44px; height:44px; display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,0.95); border-radius:10px; border:2px solid rgba(0,0,0,0.06);
    cursor:pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}
.action-field-filter-control .aff-toggle i { font-size:16px; color:#333; }
.action-field-filter-control .aff-list {
    position: absolute;
    left: calc(100% + 8px);
    bottom: 0;
    display:flex; gap:8px; align-items:center;
    background: rgba(255,255,255,0.98); padding:8px; border-radius:10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);
    transition: opacity .12s ease, transform .12s ease;
    opacity:0; visibility:hidden; pointer-events:none; transform: translateX(-6px);
}
.action-field-filter-control.open .aff-list { opacity:1; visibility:visible; pointer-events:auto; transform: translateX(0); }
.action-field-filter-control .aff-item {
    position: relative;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 8px;
    border: 2px solid #e9ecef;
    background: #fff;
    cursor: pointer;
    box-sizing: border-box;
}
.action-field-filter-control .aff-item i { font-size:16px; color:#333; }
.action-field-filter-control .aff-item .aff-label {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: rgba(0,0,0,0.92);
    color: #fff;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.2;
    white-space: normal;
    display: inline-block;
    opacity: 0;
    visibility: hidden;
    transition: opacity .14s ease, transform .14s ease;
    pointer-events: none;
    z-index: 1000;
    max-width: 240px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.action-field-filter-control .aff-item:hover .aff-label,
.action-field-filter-control .aff-item:focus .aff-label,
.action-field-filter-control .aff-item:focus-within .aff-label {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.action-field-filter-control .aff-item.selected { box-shadow: 0 6px 16px rgba(0,0,0,0.10); transform: translateY(-2px); }

/* Color variants for the control buttons (match marker colors) */
.action-field-filter-control .aff-item-education { border-color: #1565c0; }
.action-field-filter-control .aff-item-education i { color: #1565c0; }
.action-field-filter-control .aff-item-culture_heritage { border-color: #ff7043; }
.action-field-filter-control .aff-item-culture_heritage i { color: #ff7043; }
.action-field-filter-control .aff-item-elderly { border-color: #78909c; }
.action-field-filter-control .aff-item-elderly i { color: #78909c; }
.action-field-filter-control .aff-item-environment { border-color: #2e7d32; }
.action-field-filter-control .aff-item-environment i { color: #2e7d32; }
.action-field-filter-control .aff-item-social_assistance { border-color: #e91e63; }
.action-field-filter-control .aff-item-social_assistance i { color: #e91e63; }
.action-field-filter-control .aff-item-religious { border-color: #795548; }
.action-field-filter-control .aff-item-religious i { color: #795548; }
.action-field-filter-control .aff-item-women_equality { border-color: #8e44ad; }
.action-field-filter-control .aff-item-women_equality i { color: #8e44ad; }
.action-field-filter-control .aff-item-neighborhood { border-color: #00897b; }
.action-field-filter-control .aff-item-neighborhood i { color: #00897b; }
.action-field-filter-control .aff-item-youth { border-color: #f59e0b; }
.action-field-filter-control .aff-item-youth i { color: #f59e0b; }
.action-field-filter-control .aff-item-festivals_traditions { border-color: #dc3545; }
.action-field-filter-control .aff-item-festivals_traditions i { color: #dc3545; }
.action-field-filter-control .aff-item-economic_initiatives { border-color: #37474f; }
.action-field-filter-control .aff-item-economic_initiatives i { color: #37474f; }
.action-field-filter-control .aff-item-sports { border-color: #26c6da; }
.action-field-filter-control .aff-item-sports i { color: #26c6da; }
.action-field-filter-control .aff-item-cooperation_awareness { border-color: #5c6bc0; }
.action-field-filter-control .aff-item-cooperation_awareness i { color: #5c6bc0; }
.action-field-filter-control .aff-item-other { border-color: #9e9e9e; }
.action-field-filter-control .aff-item-other i { color: #9e9e9e; }