/* ============================================================
   P50 Mappa Italia — Frontend CSS v1.3
   ============================================================ */

.p50-mappa-wrap {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    font-family: Arial, Helvetica, sans-serif;
}

/* ── SVG ──────────────────────────────────────────────────── */
.p50-svg-map { width: 100%; height: auto; display: block; }

.p50-region {
    fill:            var(--p50-fill-base, #aed6f0);
    stroke:          var(--p50-stroke, #1e4f80);
    stroke-width:    var(--p50-stroke-width, 1.5px);
    stroke-linejoin: round;
    cursor:          default;
    transition:      fill .15s ease;
}
.p50-region.p50-has-data       { fill: var(--p50-fill-active, #1a72b0); cursor: pointer; }
.p50-region.p50-has-data:hover { fill: var(--p50-fill-hover, #3a9fd6); }
.p50-region.p50-selected       { fill: var(--p50-fill-selected, #0d4d8a); }

/* ── Tooltip ─────────────────────────────────────────────── */
.p50-tooltip {
    position: fixed; display: none; z-index: 9990;
    background: var(--p50-popup-bg, #fff);
    border: 1.5px solid var(--p50-popup-accent, #1e4f80);
    border-radius: 5px; padding: 4px 12px;
    font-size: 12px; font-weight: 700;
    color: var(--p50-popup-title, #1a3a5c);
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,40,120,.15);
    white-space: nowrap;
}

/* ── Modal overlay ───────────────────────────────────────── */
.p50-modal-overlay {
    display: none; position: fixed; inset: 0;
    background: rgba(0,0,0,.5); z-index: 9999;
    align-items: center; justify-content: center; padding: 20px;
}
.p50-modal-overlay.p50-open { display: flex; }

/* ── Modal ───────────────────────────────────────────────── */
.p50-modal {
    background: var(--p50-popup-bg, #fff);
    border-radius: 10px; padding: 28px 30px;
    max-width: 540px; width: 100%;
    max-height: 82vh; overflow-y: auto; position: relative;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
.p50-modal-close {
    position: absolute; top: 12px; right: 14px;
    background: none; border: none; font-size: 18px;
    cursor: pointer; color: var(--p50-popup-text, #333);
    padding: 4px 8px; border-radius: 4px; line-height: 1;
    transition: background .12s;
}
.p50-modal-close:hover { background: rgba(0,0,0,.07); }

/* ── Popup intestazione ──────────────────────────────────── */
.p50-popup-title {
    color: var(--p50-popup-title, #1a3a5c);
    font-size: 20px; margin: 0 0 10px;
}
.p50-modal-badges {
    display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px;
}
.p50-badge {
    border-radius: 20px; padding: 4px 14px;
    font-size: 12px; font-weight: 700; color: #fff;
}
.p50-badge-auto { background: var(--p50-popup-accent, #1e4f80); }
.p50-badge-doc  { background: #7a3f9f; }

/* ── Card operatore ──────────────────────────────────────── */
.p50-card {
    border-radius: 6px; padding: 12px 14px;
    margin-bottom: 10px; font-size: 13px; line-height: 1.7;
    color: var(--p50-popup-text, #333);
    background: rgba(0,0,0,.03);
}
/* Bordi colorati per tipo */
.p50-card-auto { border-left: 3px solid var(--p50-popup-accent, #1e4f80); }
.p50-card-doc  { border-left: 3px solid #7a3f9f; }
.p50-card-both {
    border-left: 3px solid transparent;
    border-image: linear-gradient(to bottom, var(--p50-popup-accent, #1e4f80), #7a3f9f) 1;
}

.p50-card-name {
    display: block; font-size: 14px; font-weight: 700;
    color: var(--p50-popup-title, #1a3a5c); margin-bottom: 3px;
}
.p50-card-asref {
    display: block; font-size: 12px;
    color: var(--p50-popup-accent, #1e4f80); margin-bottom: 2px;
}
.p50-card-addr,
.p50-card-row  { display: block; }
.p50-card-note {
    display: block; margin-top: 5px;
    font-size: 12px; color: #888; font-style: italic;
}
.p50-card a { color: var(--p50-popup-accent, #1e4f80); }

.p50-empty { color: var(--p50-popup-text, #333); font-style: italic; font-size: 13px; }

@media (max-width: 600px) {
    .p50-modal { padding: 20px 16px; }
    .p50-mappa-wrap { max-width: 100%; }
}