/* ============================================================
   Map Shared – scoped styles for all language variants
   Root selector: .wvc-map-root
   ============================================================ */

.wvc-map-root *,
.wvc-map-root *::before,
.wvc-map-root *::after { box-sizing: border-box; }

.wvc-map-root .wvc-map-wrap {
  display:        flex;
  flex-direction: column;
  background:     #f9fafb;
  min-height:     60vh;
  font-family:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
@media (min-width: 768px) {
  .wvc-map-root .wvc-map-wrap { flex-direction:row; height:32rem; min-height:unset; }
}

.wvc-map-root .wvc-map-sidebar {
  width:100%; background:#fff; padding:16px;
  border-bottom:1px solid #e5e7eb; overflow-y:auto; flex-shrink:0;
}
@media (min-width: 768px) {
  .wvc-map-root .wvc-map-sidebar { width:320px; border-bottom:none; border-right:1px solid #e5e7eb; overflow-y:visible; }
}

.wvc-map-root .wvc-map-card {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; margin:8px 0; border-radius:10px;
  border:1px solid #e5e7eb; background:#f9fafb;
  cursor:pointer; user-select:none;
  transition:background .2s, border-color .2s, box-shadow .2s;
}
.wvc-map-root .wvc-map-card:hover { background:#f3f4f6; }
.wvc-map-root .wvc-map-card.wvc-map-card--active {
  background:#fef2f2; border:2px solid #fecaca;
  box-shadow:0 4px 10px rgba(0,0,0,.08);
}
.wvc-map-root .wvc-map-card-left { display:flex; align-items:center; gap:12px; }

.wvc-map-root .wvc-map-flag {
  width:40px; height:40px; border-radius:50%; overflow:hidden;
  border:1px solid #e5e7eb; flex-shrink:0;
  box-shadow:0 1px 3px rgba(0,0,0,.1); display:flex;
}
.wvc-map-root .wvc-map-city { display:block; font-weight:600; font-size:15px; color:#111827; line-height:1.3; }
.wvc-map-root .wvc-map-ctry { display:block; font-size:13px; color:#6b7280; }

.wvc-map-root .wvc-map-chevron {
  width:16px; height:16px; flex-shrink:0;
  fill:none; stroke:#ef4444; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}

.wvc-map-root .wvc-map-mapbox {
  flex:1; position:relative; background:#fff; min-height:24rem; overflow:hidden;
}
@media (min-width: 768px) { .wvc-map-root .wvc-map-mapbox { min-height:auto; } }

.wvc-map-root .wvc-map-clearbtn {
  position:absolute; top:14px; right:14px; z-index:10;
  background:#fff; border:1px solid #d1d5db; border-radius:8px;
  padding:7px 16px; font-size:13px; font-weight:500; color:#374151;
  cursor:pointer; box-shadow:0 2px 5px rgba(0,0,0,.1);
  transition:box-shadow .2s, background .2s; font-family:inherit;
}
.wvc-map-root .wvc-map-clearbtn:hover { background:#f9fafb; box-shadow:0 4px 10px rgba(0,0,0,.15); }

.wvc-map-root .wvc-map-svg { display:block; width:100%; height:100%; }

.wvc-map-root .wvc-map-geo {
  fill:#BCBCBC; stroke:#3e4143; stroke-width:0.5;
  transform-box:fill-box; transform-origin:center;
  transition:fill .5s ease-out, stroke .5s ease-out, transform .2s ease-out;
  cursor:pointer;
}
.wvc-map-root .wvc-map-geo[data-hl]  { fill:#C00000; stroke:#C00000; stroke-width:1; }
.wvc-map-root .wvc-map-geo:hover     { fill:#C00000; stroke:#C00000; stroke-width:0.8; transform:scale(1.02); }

@keyframes wvc-map-ping {
  75%, 100% { transform:scale(2); opacity:0; }
}
