/* MapLibre ACF Field — Frontend Styles */

.mlacf-map-wrap {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    margin: 1.5em 0;
    position: relative;
}

.mlacf-map-canvas {
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease;
}

/* ── Pin marker (upright SVG location pin, anchored at bottom-center) ── */
.mlacf-fe-marker--pin {
    width: 32px;
    height: 32px;
    background: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!--%20License%3A%20CC%20Attribution.%20Made%20by%20Saeedworks%3A%20https%3A%2F%2Fdribbble.com%2Fsaeedworks%20--%3E%3Csvg%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20id%3D%22style%3Dbulk%22%3E%3Cg%20id%3D%22location%22%3E%3Cpath%20id%3D%22vector%20(Stroke)%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.9461%2021.1315L8.89129%2021.0787L8.89035%2021.0778C8.81273%2021.0023%208.73386%2020.9254%208.65394%2020.8471C7.2824%2019.5029%205.57222%2017.7231%204.34999%2015.6268C3.12314%2013.5227%202.35382%2011.04%202.96276%208.32592C5.09133%20-1.11519%2018.9197%20-1.10413%2021.0372%208.33595C21.6639%2011.1292%2020.831%2013.6741%2019.5403%2015.8149C18.2545%2017.9477%2016.4747%2019.7455%2015.0992%2021.0783C14.0956%2022.0555%2013.1259%2022.7323%2012.0296%2022.7449C10.9283%2022.7576%209.95462%2022.098%208.95039%2021.1357L8.9461%2021.1315Z%22%20fill%3D%22%23e63946%22%2F%3E%3Cpath%20id%3D%22ellipse%20(Stroke)%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8.75%209.5C8.75%207.70507%2010.2051%206.25%2012%206.25C13.7949%206.25%2015.25%207.70507%2015.25%209.5C15.25%2011.2949%2013.7949%2012.75%2012%2012.75C10.2051%2012.75%208.75%2011.2949%208.75%209.5Z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat center/contain;
    cursor: pointer;
    transition: transform 0.15s;
    /* No rotation needed — SVG is already upright */
}

.mlacf-fe-marker--pin:hover { transform: scale(1.15); }

.mlacf-fe-marker--pin span{
    display: block;
    margin: 0 auto;
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    background: #fff;
    width: 16px;
    height: 16px;
    text-align: center;
    border-radius: 9px;
    transform: translateY(6px);
}

/* ── Numbered circle marker ── */
.mlacf-fe-marker--num {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #e63946;
    border: 2.5px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.mlacf-fe-marker--num:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}

/* ── Popup ── */
.mlacf-popup {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 13px;
    line-height: 1.4;
}

.mlacf-popup strong {
    display: block;
    font-size: 13px;
    color: #1a1a2e;
}

.maplibregl-popup-content {
    border-radius: 8px !important;
    padding: 8px 13px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
}

/* ── Lazy load placeholder ── */
.mlacf-map-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #f0f4f8;
    border-radius: inherit;
    z-index: 1;
}

.mlacf-map-placeholder-text {
    font-size: 13px;
    color: #94a3b8;
    font-family: sans-serif;
}

.maplibregl-ctrl-group button { margin: 0 !important; }