.broedplaatsen-map-layout {
    position: relative;
    width: 100%;
    margin: 2rem 0;
}

.broedplaatsen-map-layout .map-container {
    background-color: var(--linnen);
    gap: 56px;
    margin-top: 2.5rem;
    padding: 40px;
}

.broedplaatsen-map-layout .results-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.broedplaatsen-map-layout .map-results-container {
    grid-row-start: 2;
    height: 642px;
    overflow-y: scroll;
}

.broedplaatsen-map-layout .results-container {
    height: auto;
}

.broedplaatsen-map-layout .map {
    grid-row-start: span 2;
}

.broedplaatsen-map-layout .map-filter {
    flex-shrink: 0;
}

.broedplaatsen-map-layout .results-counter {
    flex-shrink: 0;
    margin-bottom: 12px;
}

.broedplaatsen-map-layout .results-counter .counter-text {
    font-size: 14px;
}

.broedplaatsen-map-layout .filter-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.broedplaatsen-map-layout .filter-label {
    font-size: 16px;
    font-weight: 600;
    line-height: 150%;
}

.broedplaatsen-map-layout .filter-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.broedplaatsen-map-layout .filter-btn {
    padding: 8px 8px 8px 20px;
    display: flex;
    align-items: center;
    gap: 8px;

    border: 1px solid rgba(19, 15, 64, 0.10);
    background: var(--white);
    color: var(--text-main);

    font-size: 16px;
    line-height: 120%;
    letter-spacing: -0.32px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 180ms ease-in-out;
}

.broedplaatsen-map-layout .filter-btn .filter-icon {
    width: 32px;
    height: 32px;
    aspect-ratio: 1/1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Ccircle cx='16' cy='16' r='15.5649' stroke='%23130F40' stroke-width='0.870206'/%3E%3C/svg%3E");
    background-size: contain;
    position: relative;
}

.broedplaatsen-map-layout .filter-btn .filter-icon:after {
    content: '';
    position: absolute;
    height: 32px;
    width: 32px;
    top: 0;
    left: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'%3E%3Ccircle cx='16' cy='16' r='16' fill='%23C51717'/%3E%3Cmask id='mask0_682_1285' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='7' y='7' width='18' height='18'%3E%3Crect x='7.46667' y='7.7334' width='17.0667' height='17.0667' fill='%23D9D9D9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_682_1285)'%3E%3Cpath d='M14.2578 18.7666L20.4007 12.6236C20.5064 12.5178 20.6302 12.4637 20.7719 12.4615C20.9137 12.4592 21.0397 12.5133 21.15 12.6236C21.2604 12.734 21.3156 12.8607 21.3156 13.0037C21.3156 13.1469 21.2604 13.2736 21.15 13.384L14.7077 19.8373C14.5791 19.9658 14.4292 20.03 14.2578 20.03C14.0864 20.03 13.9364 19.9658 13.8078 19.8373L10.8389 16.8684C10.7332 16.7626 10.6811 16.637 10.6825 16.4915C10.6838 16.3462 10.7396 16.2184 10.85 16.1081C10.9603 15.9977 11.087 15.9426 11.23 15.9426C11.3732 15.9426 11.5 15.9977 11.6103 16.1081L14.2578 18.7666Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");
    opacity: 0;
    transition: opacity 180ms ease;
}

.broedplaatsen-map-layout .filter-btn.active .filter-icon:after {
    opacity: 1;
}

.broedplaatsen-map-layout .map-results {
    flex: 1;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.broedplaatsen-map-layout .map-results::-webkit-scrollbar {
    width: 6px;
}

.broedplaatsen-map-layout .map-results::-webkit-scrollbar-track {
    background: var(--linnen);
    border-radius: 3px;
}

.broedplaatsen-map-layout .map-results::-webkit-scrollbar-thumb {
    background: var(--kobalt-opaque);
    border-radius: 3px;
}

.broedplaatsen-map-layout .map-results::-webkit-scrollbar-thumb:hover {
    background: var(--kobalt);
}

.broedplaatsen-map-layout .result-item:not(:last-child) {
    margin-bottom: 12px;
}

.broedplaatsen-map-layout .result-item .link-card .link-card-overlay {
    background-color: var(--kobalt);
    transition: background-color 180ms ease-in-out;
}

.broedplaatsen-map-layout .result-item .link-card .link-card-overlay:after {
    background-color: var(--linnen);
}

.broedplaatsen-map-layout .result-item .link-card .link-card-content {
    padding: 20px 24px;
}

.broedplaatsen-map-layout .result-item.active .link-card .link-card-overlay {
    background-color: var(--red);
}


.broedplaatsen-map-layout .result-title {
    margin-bottom: 12px;
    color: var(--white);
}

.broedplaatsen-map-layout .result-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.broedplaatsen-map-layout .result-tags .tag {
    display: inline-block;
    padding: 4px 8px;
    color: var(--white);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 14px;
}

.broedplaatsen-map-layout .result-text {
    font-size: 14px;
    color: var(--white);
    margin-bottom: 12px;
}

.broedplaatsen-map-layout .result-info-container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.broedplaatsen-map-layout .result-info-container>p {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 0;
    color: var(--white);
    font-size: 14px;
}

.broedplaatsen-map-layout .no-results {
    padding: 2rem;
    text-align: center;
    color: var(--kobalt);
}

.broedplaatsen-map-layout .loading-state {
    padding: 2rem;
    text-align: center;
    color: var(--kobalt);
}

.broedplaatsen-map-layout .map {
    height: 100%;
    overflow: hidden;
}

/* Error State */
.broedplaatsen-map-layout .map-error {
    padding: 2rem;
    text-align: center;
    background: #fee;
    border: 1px solid #fcc;
    border-radius: 8px;
    color: #c33;
}

@media screen and (max-width: 1200px) {
    .broedplaatsen-map-layout .map-container {
        gap: 1.5rem;
        padding: 2rem;
    }
}

@media screen and (max-width: 992px) {
    .broedplaatsen-map-layout .map-container {
        padding: 1.5rem 1rem;
        flex-direction: column;
    }

    .broedplaatsen-map-layout .results-container {
        height: fit-content;
    }

    .broedplaatsen-map-layout .map {
        height: 700px;
    }

    .broedplaatsen-map-layout .map-results-container {
        grid-row-start: auto;
    }
}

@media screen and (max-width: 767px) {
    .broedplaatsen-map-layout .map-container {
        gap: 1rem;
        padding: 1.5rem 0.5rem;
    }
}

/* Google Maps Controls Styling */
.broedplaatsen-map-layout .map .gm-control-active {
    background-color: var(--white) !important;
    border: 1px solid rgba(19, 15, 64, 0.10) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

.broedplaatsen-map-layout .map .gm-control-active>img {
    filter: brightness(0) saturate(100%);
}

.broedplaatsen-map-layout .map .gm-fullscreen-control,
.broedplaatsen-map-layout .map .gm-svpc {
    background-color: var(--white) !important;
    border: 1px solid rgba(19, 15, 64, 0.10) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}