/* === GLOBAL PADDING === */
.cfs-map-dir { padding: var(--cfs-pad-m); }
@media (min-width: 768px) { .cfs-map-dir { padding: var(--cfs-pad-t); } }
@media (min-width: 1024px) { .cfs-map-dir { padding: var(--cfs-pad-d); } }

/* === HEADER ABOVE ALL === */
.cfs-global-header { margin-bottom: 20px; text-align: center; }
.cfs-header-title {
    color: #123B69;
    font-family: "verdigris-mvb-pro-big", sans-serif;
    font-size: 20px;
    font-weight: 400;
    margin: 0 0 8px;
}
.cfs-header-text {
    color: #123B69;
    font-family: "verdigris-mvb-pro-big", sans-serif;
    font-weight: 400;
    line-height: 1.3em;
    font-size: 15px;
}
.cfs-header-text p { margin: 0 0 8px; }

/* === GRID LAYOUT === */
.cfs-content { display: grid; grid-template-columns: 1fr 3fr; gap: 16px; }
.cfs-left { min-width: 260px; }
.cfs-right { min-width: 300px; }
.cfs-map { width: 100%; height: var(--cfs-map-h); border: 1px solid var(--cfs-border); border-radius: var(--cfs-radius); }

/* === SEARCH BAR – NOT STICKY === */
.cfs-topbar { padding-bottom: 8px; }
.cfs-search-wrap { display:flex; align-items:center; gap:6px; }
.cfs-search { width: 100%; padding: 8px 10px; border: 1px solid var(--cfs-border); border-radius: 6px; }
.cfs-clear { padding: 6px 10px; border: 1px solid var(--cfs-border); background: #fff; border-radius: 6px; cursor: pointer; }

/* === TOOLS & LEGEND === */
.cfs-tools { margin-top: 8px; display:flex; gap:8px; flex-wrap:wrap; }
.cfs-tools button, .cfs-tools label {
    background: var(--cfs-btn-bg);
    color: var(--cfs-btn-text);
    border: 1px solid var(--cfs-border);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 13px;
}
.cfs-tools button:hover { filter: brightness(1.1); }
.cfs-tools input { vertical-align: middle; }

.cfs-legend { display:flex; gap: 12px; align-items:center; margin: 8px 0; }
.cfs-legend .lg img { height: 18px; vertical-align: middle; margin-right: 6px; }

/* === ACCORDION SYSTEM – FULLY RESTORED === */
.cfs-accordions .cfs-loading { padding:12px; color:#666; font-style:italic; }
.cfs-accordions .country {
    border: 1px solid var(--cfs-border);
    border-radius: var(--cfs-radius);
    margin-bottom: 10px;
    background: #fff;
}
.cfs-accordions .country > button {
    width: 100%;
    text-align: left;
    background: var(--cfs-bg);
    color: var(--cfs-text);
    border: 0;
    padding: 10px 12px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--cfs-radius) var(--cfs-radius) 0 0;
}
.cfs-accordions .country > button:hover { filter: brightness(0.98); }
.cfs-accordions .country .country-body {
    padding: 10px 12px;
    display: none;
}
.cfs-accordions details { margin: 6px 0; }
.cfs-accordions summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--cfs-text);
}

/* === LIST ITEM – TWO COLUMNS === */
.cfs-location {
    padding: 10px 8px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
}
.cfs-location:hover { background: #fafafa; }
.cfs-location .cfs-location__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cfs-location .title {
    font-weight: 700;
    margin: 0;
    color: #000;
    font-size: 15px;
}
.cfs-location .meta {
    font-size: 13px;
    line-height: 1.35;
    color: #333;
    margin: 0;
}
.cfs-location .cfs-location__seal {
    width: var(--cfs-seal-list-h);
    height: var(--cfs-seal-list-h);
    display: flex;
    align-items: center;
    justify-content: center;
}
.cfs-location .cfs-location__seal img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* === NO SEAL: FULL WIDTH === */
.cfs-location:not(.has-seal) {
    grid-template-columns: 1fr;
}
.cfs-location:not(.has-seal) .cfs-location__seal { display: none; }

/* === POPUP BUBBLE – TWO COLUMNS === */
.cfs-bubble {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: start;
    padding: 0 12px 8px;
    font-size: 13px;
    line-height: 1.4;
}
.cfs-bubble__info { grid-column: 1; }
.cfs-bubble__seal { grid-column: 2; text-align: right; }
.cfs-bubble .seal { height: var(--cfs-seal-popup-h); width: auto; max-width: 100%; object-fit: contain; }

/* === POPUP WIDTH === */
.leaflet-popup-content {
    width: var(--cfs-popup-w-m) !important;
    max-width: var(--cfs-popup-w-m) !important;
    margin: 0;
}
@media (min-width: 768px) {
    .leaflet-popup-content { width: var(--cfs-popup-w-t) !important; max-width: var(--cfs-popup-w-t) !important; }
}
@media (min-width: 1024px) {
    .leaflet-popup-content { width: var(--cfs-popup-w-d) !important; max-width: var(--cfs-popup-w-d) !important; }
}

/* === SCROLLABLE LEFT + STICKY MAP (DESKTOP ONLY) === */
@media (min-width: 1024px) {
    .cfs-content {
        display: flex;
        gap: 16px;
        align-items: flex-start;
    }
    .cfs-left {
        flex: 0 0 340px;
        max-height: calc(100vh - var(--cfs-global-header-h, 0px) - 40px);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .cfs-left .cfs-topbar { flex-shrink: 0; padding-bottom: 12px; }
    .cfs-left .cfs-accordions {
        flex: 1;
        overflow-y: auto;
        padding-right: 8px;
        margin-top: 8px;
    }
    .cfs-left .cfs-accordions::-webkit-scrollbar { width: 6px; }
    .cfs-left .cfs-accordions::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 3px; }
    .cfs-left .cfs-accordions::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

    .cfs-right {
        flex: 1;
        position: sticky;
        top: 20px;
        align-self: flex-start;
    }
    .cfs-map {
        height: calc(100vh - var(--cfs-global-header-h, 0px) - 60px);
        min-height: 500px;
    }
}

/* === RESPONSIVE BREAKPOINTS === */
@media (max-width: 900px) {
    .cfs-content { grid-template-columns: 1fr; }
    .cfs-right { order: 2; }
    .cfs-left { order: 1; }
}