:root {
  --navy: #17106b;
  --green: #45b649;
  --green-dark: #208e4e;
  --cyan: #35c7e8;
  --muted: #63718a;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; font-family: Arial, Helvetica, sans-serif; }
button, a { font: inherit; }
.map-page { width: 100%; height: 100vh; position: relative; background: #dcecf2; }
.map-header {
  height: 92px;
  padding: 9px max(18px, calc((100vw - 1200px)/2));
  position: relative;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-bottom: 4px solid var(--green);
  box-shadow: 0 4px 18px rgba(20,33,61,.12);
}
.map-header img { width: 104px; height: 70px; object-fit: contain; }
.brand-copy { display: flex; flex-direction: column; gap: 3px; }
.brand-copy strong { color: var(--navy); font-size: 24px; }
.brand-copy span { color: var(--muted); font-size: 13px; font-weight: 650; }
.municipality-badge { margin-left: auto; padding: 10px 14px; border-radius: 999px; color: var(--green-dark); background: #eaf8ee; font-size: 13px; font-weight: 850; }
.full-map { position: absolute; inset: 92px 0 0; z-index: 1; }
.leaflet-container { font-family: Arial, Helvetica, sans-serif; }
.leaflet-control-attribution { font-size: 9px !important; }
.payment-pin-shell, .user-pin-shell { border: 0; background: transparent; }
.payment-pin {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50% 50% 50% 10px;
  transform: rotate(-45deg);
  color: #fff;
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  border: 3px solid #fff;
  box-shadow: 0 8px 20px rgba(20,33,61,.4);
}
.payment-pin b { transform: rotate(45deg); font-size: 13px; }
.user-pin {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(53,199,232,.28);
  border: 2px solid var(--cyan);
  box-shadow: 0 0 0 8px rgba(53,199,232,.2);
}
.user-pin i { width: 14px; height: 14px; border-radius: 50%; background: var(--navy); border: 3px solid #fff; }
.point-popup { min-width: 205px; display: flex; flex-direction: column; gap: 7px; }
.point-popup b { color: var(--navy); font-size: 16px; }
.point-popup span { color: var(--muted); }
.point-popup a { margin-top: 4px; padding: 9px 10px; border-radius: 9px; text-align: center; text-decoration: none; color: #fff !important; background: var(--green); font-weight: 800; }
.map-control {
  width: min(760px, calc(100% - 28px));
  position: absolute;
  z-index: 900;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  padding: 15px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 22px;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(15px);
  box-shadow: 0 16px 45px rgba(20,33,61,.25);
}
.control-status { display: flex; align-items: center; gap: 11px; }
.status-dot { width: 13px; height: 13px; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgba(69,182,73,.14); }
.map-control.locating .status-dot { background: var(--cyan); animation: pulse 1.1s infinite; }
.map-control.error .status-dot { background: #f2a33b; box-shadow: 0 0 0 5px rgba(242,163,59,.15); }
.control-status div { display: flex; flex-direction: column; gap: 3px; }
.control-status strong { color: var(--navy); font-size: 17px; }
.control-status small { color: var(--muted); font-size: 12px; }
.retry-button { position: absolute; top: 13px; right: 14px; border: 0; border-radius: 10px; padding: 9px 12px; color: #fff; background: var(--navy); font-weight: 800; cursor: pointer; }
.municipality-picker { margin-top: 13px; display: flex; gap: 7px; overflow-x: auto; }
.municipality-picker button { flex: 1; min-width: 105px; border: 1px solid #dce9f0; border-radius: 12px; padding: 9px 10px; color: var(--muted); background: #f5fafc; font-size: 12px; font-weight: 800; cursor: pointer; }
.municipality-picker button.active { color: #fff; border-color: var(--navy); background: var(--navy); }
@keyframes pulse { 50% { transform: scale(1.3); opacity: .6; } }

@media (max-width: 600px) {
  .map-header { height: 76px; padding: 7px 11px; gap: 8px; }
  .map-header img { width: 72px; height: 58px; }
  .brand-copy strong { font-size: 17px; }
  .brand-copy span { font-size: 9px; }
  .municipality-badge { padding: 7px 9px; font-size: 10px; }
  .full-map { inset: 76px 0 0; }
  .map-control { bottom: 11px; padding: 13px; border-radius: 18px; }
  .control-status strong { font-size: 15px; }
  .control-status small { max-width: 240px; font-size: 10px; }
  .retry-button { position: static; width: 100%; margin-top: 10px; }
  .municipality-picker { padding-bottom: 2px; }
  .municipality-picker button { min-width: 94px; }
}