/* ======================================
   EKHAIRAT MAP PAGE – FINAL RESPONSIVE
   FITS ALL GADGETS
====================================== */

#ekhairat-map-page {
  background: #f8fafc;
}

/* Scoped reset */
#ekhairat-map-page * {
  box-sizing: border-box;
}

/* ======================================
   MAP WRAPPER – AUTO FIT ALL DEVICES
====================================== */

#ekhairat-map-page #ekhairat-map-wrapper {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;

  /* 🔥 MAIN MAGIC */
  height: min(70vh, 520px);
  min-height: 260px;

  background: #ffffff;
  overflow: hidden;
}

/* Leaflet map always fill container */
#ekhairat-map-page #ekhairat-map {
  width: 100%;
  height: 100%;
}

/* Small phones */
@media (max-width: 360px) {
  #ekhairat-map-page #ekhairat-map-wrapper {
    height: 60vh;
    min-height: 240px;
  }
}

/* Phones */
@media (max-width: 576px) {
  #ekhairat-map-page #ekhairat-map-wrapper {
    height: 65vh;
  }
}

/* Tablets */
@media (min-width: 577px) and (max-width: 992px) {
  #ekhairat-map-page #ekhairat-map-wrapper {
    height: 60vh;
  }
}

/* Desktop & large screens */
@media (min-width: 993px) {
  #ekhairat-map-page #ekhairat-map-wrapper {
    height: min(75vh, 600px);
    border-radius: 18px;
    box-shadow: 0 18px 36px rgba(0,0,0,.08);
  }
}

/* ======================================
   MAP HINT
====================================== */

#ekhairat-map-page .map-hint {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,.96);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  z-index: 30;
  pointer-events: none;
}

@media (min-width: 769px) {
  #ekhairat-map-page .map-hint {
    top: 20px;
    font-size: 14px;
  }
}

/* ======================================
   TOTAL BOX (STAT CARD)
====================================== */

/* Mobile – bottom card */
#ekhairat-map-page .total-box {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 150px;
  background: #ffffff;
  padding: 12px 16px;
  border-radius: 14px;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  z-index: 30;
}

#ekhairat-map-page .total-box h4 {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 4px;
}

#ekhairat-map-page .total-box h1 {
  font-size: 32px;
  font-weight: 800;
  color: #2563eb;
  line-height: 1;
}

#ekhairat-map-page .total-box small {
  font-size: 11px;
  color: #6b7280;
}

/* Desktop – top right */
@media (min-width: 769px) {
  #ekhairat-map-page .total-box {
    top: 20px;
    right: 20px;
    left: auto;
    bottom: auto;
    transform: none;
    min-width: 160px;
    padding: 18px 22px;
  }

  #ekhairat-map-page .total-box h1 {
    font-size: 42px;
  }
}

/* ======================================
   STATE PANEL (HIDDEN BY DEFAULT)
====================================== */

#ekhairat-map-page #state-panel {
  display: none; /* 🔥 FIX WHITE ❌ BOX */
  background: rgba(255,255,255,.97);
  z-index: 40;
}

#ekhairat-map-page #state-panel.show {
  display: block;
}

/* Desktop panel */
@media (min-width: 769px) {
  #ekhairat-map-page #state-panel {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 300px;
    max-height: 420px;
    padding: 14px;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,.15);
  }
}

/* Mobile bottom sheet */
@media (max-width: 768px) {
  #ekhairat-map-page #state-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 75vh;
    padding: 16px;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 28px rgba(0,0,0,.25);
  }
}

/* Panel header */
#ekhairat-map-page .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#ekhairat-map-page #panel-title {
  font-size: 15px;
  font-weight: 700;
}

/* Close button */
#ekhairat-map-page #panel-close {
  border: none;
  background: none;
  font-size: 20px;
  cursor: pointer;
}

/* Hide ❌ on desktop */
@media (min-width: 769px) {
  #ekhairat-map-page #panel-close {
    display: none;
  }
}

#ekhairat-map-page #panel-count {
  margin: 10px 0;
  font-weight: 600;
  font-size: 13px;
}

/* List */
#ekhairat-map-page #panel-list {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: auto;
  max-height: 300px;
}

#ekhairat-map-page #panel-list li {
  padding: 10px 8px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  font-size: 14px;
}

#ekhairat-map-page #panel-list li:hover {
  background: #f1f5ff;
  color: #2563eb;
  border-radius: 8px;
}

/* ======================================
   LEAFLET FIX
====================================== */

#ekhairat-map-page .leaflet-container {
  z-index: 0;
}

@media (max-width: 768px) {
  .leaflet-control-zoom {
    top: auto !important;
    bottom: 90px !important;
  }
}