/* Object Buurtinfo – map shortcode styles */

.buurtradar-wrap {
    /* Colours */
    --color-border: #e0e0e0;
    --color-text: #333;
    --color-muted: #555;
    --color-subtle: #888;
    --color-surface: #f0f0f0;
    --color-bg: #fff;
    --color-accent: #1a73e8;

    /* Typography */
    --font-size: 14px;
    --font-size-sm: 12px;
    --font-size-xs: 11px;

    /* Border radius */
    --radius: 4px;
    --radius-map: 6px;

    /* Legend */
    --legend-gap: 6px;
    --sidebar-width: 220px;

    /* Buttons */
    --btn-border-width: 1px;
    --btn-border-radius: var(--radius);
    --btn-background-color: var(--color-bg);
    --btn-color: var(--color-text);
    --btn-default-border-color: var(--color-border);
    --btn-active-border-color: var(--color-text);
    --btn-active-background-color: var(--color-bg);
    --btn-box-shadow: 0 1px 1px 0 #3c3a3a0f;
    --btn-active-box-shadow: none;

    /* Checkbox */
    --checkbox-border-color: var(--color-text);
    --checkbox-border-width: 1px;
    --checkbox-size: 14px;
    --checkbox-border-radius: 2px;

    /* Tooltip */
    --tooltip-max-width: 250px;
    --tooltip-box-shadow: 0 2px 1px rgba(0, 0, 0, .18);
    --tooltip-padding: 10px 14px 10px 12px;

    /* Marker pin */
    --pin-size: 38px;
    --pin-icon-size: 16px;
    --pin-icon-color: #fff;

    margin: 1em 0;
    position: relative;
}

/* ----------------------------------------------------------------
   Layout: sidebar
   ---------------------------------------------------------------- */

.buurtradar-wrap--sidebar {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: auto;
    gap: 0 16px;
    align-items: start;

    .buurtradar-map-toggle {
        padding-bottom: 8px;
        margin-bottom: 8px;
        border-bottom: 1px solid var(--color-border);
    }

    .buurtradar-legend-area {
        height: var(--buurtradar-map-height, 500px);
        display: flex;
        flex-direction: column;
    }

    .buurtradar-map-legend {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: 0;
        overflow-y: auto;
        padding-right: 10px;
        flex: 1;
    }

    .buurtradar-legend-btn {
        display: flex;
        width: 100%;
    }
}

/* ----------------------------------------------------------------
   Legend
   ---------------------------------------------------------------- */

.buurtradar-map-toggle {
    margin-bottom: 10px;
}

.buurtradar-map-legend {
    margin-bottom: 10px;
}

.buurtradar-map-legend__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--legend-gap);
}

.buurtradar-legend-toggle-all,
.buurtradar-legend-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: var(--btn-border-radius);
    cursor: pointer;
    font-size: var(--font-size);
    line-height: 1.4;
    transition: all .2s ease-in-out;
    text-align: left;
}

.buurtradar-legend-toggle-all {
    border: var(--btn-border-width) solid var(--btn-default-border-color);
    background: var(--btn-background-color);
    color: var(--btn-color);
}

.buurtradar-legend-toggle-all:hover {
    border-color: var(--btn-active-border-color);
}

.buurtradar-legend-toggle-all__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M41-24.9c-9.4-9.4-24.6-9.4-33.9 0S-2.3-.3 7 9.1l528 528c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-96.4-96.4c2.7-2.4 5.4-4.8 8-7.2 46.8-43.5 78.1-95.4 93-131.1 3.3-7.9 3.3-16.7 0-24.6-14.9-35.7-46.2-87.7-93-131.1-47.1-43.7-111.8-80.6-192.6-80.6-56.8 0-105.6 18.2-146 44.2L41-24.9zM204.5 138.7c23.5-16.8 52.4-26.7 83.5-26.7 79.5 0 144 64.5 144 144 0 31.1-9.9 59.9-26.7 83.5l-34.7-34.7c12.7-21.4 17-47.7 10.1-73.7-13.7-51.2-66.4-81.6-117.6-67.9-8.6 2.3-16.7 5.7-24 10l-34.7-34.7zM325.3 395.1c-11.9 3.2-24.4 4.9-37.3 4.9-79.5 0-144-64.5-144-144 0-12.9 1.7-25.4 4.9-37.3L69.4 139.2c-32.6 36.8-55 75.8-66.9 104.5-3.3 7.9-3.3 16.7 0 24.6 14.9 35.7 46.2 87.7 93 131.1 47.1 43.7 111.8 80.6 192.6 80.6 37.3 0 71.2-7.9 101.5-20.6l-64.2-64.2z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.buurtradar-legend-toggle-all[data-all-active="false"] {

    .buurtradar-legend-toggle-all__icon {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M288 32c-80.8 0-145.5 36.8-192.6 80.6-46.8 43.5-78.1 95.4-93 131.1-3.3 7.9-3.3 16.7 0 24.6 14.9 35.7 46.2 87.7 93 131.1 47.1 43.7 111.8 80.6 192.6 80.6s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1 3.3-7.9 3.3-16.7 0-24.6-14.9-35.7-46.2-87.7-93-131.1-47.1-43.7-111.8-80.6-192.6-80.6zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64-11.5 0-22.3-3-31.7-8.4-1 10.9-.1 22.1 2.9 33.2 13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-12.2-45.7-55.5-74.8-101.1-70.8 5.3 9.3 8.4 20.1 8.4 31.7z"/></svg>');
    }
}

.buurtradar-legend-btn {
    border: var(--btn-border-width) solid var(--btn-default-border-color);
    background: var(--btn-background-color);
    color: var(--btn-color);
    box-shadow: var(--btn-box-shadow);
}

.buurtradar-legend-btn:hover {
    border-color: var(--buurtradar-color, var(--btn-default-border-color));
}

.buurtradar-legend-btn[aria-pressed="true"] {
    border-color: var(--buurtradar-color, var(--btn-default-border-color));
    box-shadow: var(--btn-active-box-shadow);

    .buurtradar-legend-btn__checkbox {
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M434.8 70.1c14.3 10.4 17.5 30.4 7.1 44.7l-256 352c-5.5 7.6-14 12.3-23.4 13.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l101.5 101.5 234-321.7c10.4-14.3 30.4-17.5 44.7-7.1z"/></svg>');
    }
}

.buurtradar-legend-btn__checkbox {
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    border: var(--checkbox-border-width) solid var(--buurtradar-color, #555);
    border-radius: var(--checkbox-border-radius);
    background-size: calc(var(--checkbox-size) / 2);
    background-repeat: no-repeat;
    background-position: center;
}

.buurtradar-legend-btn__icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.buurtradar-legend-btn__icon svg {
    width: 100%;
    height: 100%;
    fill: var(--buurtradar-color, var(--btn-color));
    color: var(--buurtradar-color, var(--btn-color));
}

.buurtradar-legend-btn__count {
    margin-left: auto;
    font-size: var(--font-size-xs);
    color: var(--color-subtle);
    background: var(--color-surface);
    border-radius: 10px;
    padding: 0 6px;
    line-height: 18px;
    min-width: 18px;
    text-align: center;
    flex-shrink: 0;
}

/* ----------------------------------------------------------------
   Loading / error states
   ---------------------------------------------------------------- */

.buurtradar-map-loading {
    padding: 12px 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    color: var(--color-muted);
    font-size: var(--font-size);
}

/* ----------------------------------------------------------------
   Map canvas
   ---------------------------------------------------------------- */

.buurtradar-map {
    width: 100%;
    border-radius: var(--radius-map);
}

.buurtradar-map-wrapper {
    position: relative;
}

/* ----------------------------------------------------------------
   Tooltip overlay
   ---------------------------------------------------------------- */

.buurtradar-tooltip {
    position: absolute;
    z-index: 9999;
    background: var(--color-bg);
    border-radius: var(--radius);
    box-shadow: var(--tooltip-box-shadow);
    padding: var(--tooltip-padding);
    max-width: var(--tooltip-max-width);
    font-size: var(--font-size);
    line-height: 1.4;
    pointer-events: auto;
    display: none;
    left: 15px;
    bottom: 15px;
}

.buurtradar-tooltip--visible {
    display: block;
}

.buurtradar-tooltip__close {
    position: absolute;
    top: 6px;
    right: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    line-height: 1;
    color: var(--color-muted);
}

.buurtradar-tooltip__body {
    padding-right: 14px;
}

.buurtradar-tooltip__category {
    display: block;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--color-subtle);
    margin-bottom: 2px;
}

.buurtradar-tooltip__name {
    font-weight: bold;
}

.buurtradar-tooltip__address {
    color: var(--color-muted);
}

/* ----------------------------------------------------------------
   Radius circles legend
   ---------------------------------------------------------------- */

.buurtradar-radius-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-top: 8px;
    font-size: var(--font-size-sm);
    color: var(--color-muted);
}

.buurtradar-radius-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.buurtradar-radius-item__line {
    display: inline-block;
    width: 22px;
    height: 2px;
    background: var(--buurtradar-radius-color, #555);
    border-radius: 1px;
    flex-shrink: 0;
}

.buurtradar-radius-item--search {
    font-weight: 500;
    color: var(--color-accent);
}

.buurtradar-radius-item--search em {
    font-style: normal;
    font-weight: 400;
    color: var(--color-muted);
    margin-left: 3px;
}

.buurtradar-radius-item__circle {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-accent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    flex-shrink: 0;
}

/* ----------------------------------------------------------------
   Custom marker pin (AdvancedMarkerElement)
   ---------------------------------------------------------------- */

@keyframes buurtradar-pin-in {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

@keyframes buurtradar-pin-out {
    from { transform: scale(1); opacity: 1; }
    to   { transform: scale(0); opacity: 0; }
}

.buurtradar-pin {
    position: relative;
    width: 38px;
    height: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transform-origin: bottom center;
}

.buurtradar-pin--hidden {
    display: none;
}

.buurtradar-pin--entering {
    animation: buurtradar-pin-in 0.2s ease forwards;
}

.buurtradar-pin--leaving {
    animation: buurtradar-pin-out 0.2s ease forwards;
    pointer-events: none;
}

.buurtradar-pin--active {
    transform: scale(1.25);
    transition: transform 0.15s ease;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
    z-index: 10;
}

.buurtradar-pin__head {
    width: var(--pin-size);
    height: var(--pin-size);
    border-radius: 50%;
    background: var(--buurtradar-pin-color, #555);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.buurtradar-pin__icon {
    width: var(--pin-icon-size);
    height: var(--pin-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
}

.buurtradar-pin__icon svg {
    width: 100%;
    height: 100%;
    fill: var(--pin-icon-color);
    color: var(--pin-icon-color);
}

.buurtradar-pin__tip {
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 14px solid var(--buurtradar-pin-color, #555);
    flex-shrink: 0;
    margin-top: -3px;
}

/* ----------------------------------------------------------------
   Collapsible legend on mobile
   ---------------------------------------------------------------- */

.buurtradar-legend-mobile-toggle {
    display: none;
}

@media (max-width: 600px) {
    .buurtradar-legend-area--collapsible {

        .buurtradar-legend-mobile-toggle {
            display: flex;
            align-items: center;
            gap: 6px;
            width: 100%;
            padding: 8px 12px;
            background: var(--btn-background-color);
            border: 1px solid var(--btn-default-border-color);
            border-radius: var(--btn-border-radius);
            cursor: pointer;
            font-size: var(--font-size);
            font-weight: 500;
            color: var(--color-text);
            margin-bottom: 6px;
            box-shadow: var(--btn-box-shadow);

            &::after {
                content: '';
                display: inline-block;
                margin-left: auto;
                flex-shrink: 0;
                width: 14px;
                height: 14px;
                background-color: currentColor;
                -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M209.5 369c-9.4 9.4-24.6 9.4-33.9 0L15.5 209c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l143 143 143-143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-160 160z'/%3E%3C/svg%3E");
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M209.5 369c-9.4 9.4-24.6 9.4-33.9 0L15.5 209c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l143 143 143-143c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-160 160z'/%3E%3C/svg%3E");
                -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
                -webkit-mask-size: contain;
                mask-size: contain;
                -webkit-mask-position: center;
                mask-position: center;
                transition: transform 0.2s ease;
            }
        }

        .buurtradar-map-toggle,
        .buurtradar-map-legend {
            display: none;
        }

        .buurtradar-map-legend__inner {
            flex-direction: column;
        }

        &.buurtradar-legend-area--open {

            > .buurtradar-legend-mobile-toggle {
                border-color: var(--buurtradar-color, var(--btn-default-border-color));
                box-shadow: var(--btn-active-box-shadow);
            }

            .buurtradar-map-toggle,
            .buurtradar-map-legend {
                display: block;
            }

            .buurtradar-legend-mobile-toggle::after {
                transform: rotate(180deg);
            }
        }
    }
}