/* ============================================================
   وقفی نو — pages/map.css
   Shared Leaflet coverage-map styling, used on the homepage and
   anywhere else a real interactive map of Iran is shown
   (e.g. admin coverage-map page).
   ============================================================ */

.map-shell {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  position: relative;
}
#coverage-map { height: clamp(20rem, 55vw, 26.875rem); width: 100%; background: var(--surface-soft); }
.leaflet-container { height: 100%; width: 100%; font-family: var(--font-body); z-index: 1; }
.map-shell--sm #coverage-map { height: clamp(14rem, 32vw, 19rem); }
.local-map-canvas { position: relative; width: 100%; height: 100%; overflow: hidden; background: radial-gradient(ellipse at 52% 48%, var(--surface) 0 35%, var(--surface-soft) 36% 100%); }
.local-map-canvas::before { content: 'ایران'; position: absolute; inset: 18% 23%; display: grid; place-items: center; border: 2px solid color-mix(in srgb, var(--brand-500) 35%, transparent); border-radius: 45% 55% 48% 52%; color: color-mix(in srgb, var(--brand-600) 45%, transparent); font-size: clamp(2rem, 7vw, 4rem); font-weight: 800; transform: rotate(-8deg); }
.local-map-pin { position: absolute; z-index: 2; transform: translate(-50%, -50%); border: 0; background: none; cursor: pointer; padding: 8px; }
.local-map-pin span { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--brand-600); border: 3px solid #fff; box-shadow: 0 0 0 4px rgba(21, 101, 216, .28); }
.local-map-popup { position: absolute; z-index: 3; transform: translate(-50%, calc(-100% - 18px)); width: min(220px, 55vw); padding: .75rem; border-radius: 12px; background: var(--card-bg); box-shadow: var(--shadow-md); direction: rtl; text-align: right; }
.local-map-popup strong, .local-map-popup small { display: block; }.local-map-popup small { color: var(--brand-600); }.local-map-popup p { margin: .3rem 0 0; font-size: .75rem; color: var(--ink-soft); }
.map-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  color: var(--ink-soft);
  font-size: .875rem;
  gap: .5rem;
  z-index: 1;
  pointer-events: none;
}
.map-pin-wrap { background: none; border: 0; }
.map-pin {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand-600);
  border: 3px solid #fff;
  box-shadow: 0 0 0 4px rgba(21, 101, 216, .28);
  position: relative;
}
.map-pin::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(21, 101, 216, .4);
  animation: pin-pulse 2s ease-out infinite;
}
@keyframes pin-pulse {
  from { transform: scale(.5); opacity: 1; }
  to { transform: scale(1.5); opacity: 0; }
}
.leaflet-popup-content-wrapper {
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  font-family: var(--font-body);
}
.leaflet-popup-content { margin: .875rem 1.125rem; direction: rtl; text-align: right; }
.map-popup__name { font-weight: 700; font-size: .875rem; color: var(--ink); display: block; }
.map-popup__city { color: var(--brand-600); font-size: .75rem; font-weight: 600; }
.map-popup__desc { color: var(--ink-soft); font-size: .75rem; margin-top: .3rem; }
#province-picker { height: clamp(18rem, 45vw, 24rem); width: 100%; background: var(--surface-soft); cursor: crosshair; }

.map-loading .loading-logo {
  width: 2.6rem;
  height: 2.6rem;
  margin-inline-end: .45rem;
  vertical-align: middle;
}