/*
 * Egypt Water Map – Main Map CSS
 * Pixel-perfect copy from خريطة رئيسية.html
 * Scoped under .egypt-water-app-wrapper to isolate from WP theme
 */

/* ─── Full-screen isolation: break out of any WP theme wrapper ─── */
.egypt-water-app-wrapper {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 9990;
  overflow: hidden;
}

/* ─── Variables (exact from HTML) ─── */
.egypt-water-app-wrapper {
  --blue:#1a56db;
  --blue-light:#e8f0fe;
  --blue-dark:#0f3a8a;
  --purple:#059669;
  --purple-light:#ecfdf5;
  --white:#ffffff;
  --bg:#f0f4f8;
  --border:#dde3ec;
  --text:#1e2a3a;
  --muted:#5a6a80;
  --green:#059669;
  --shadow:0 2px 12px rgba(30,42,58,.10);
  --shadow-lg:0 4px 24px rgba(30,42,58,.14);
  --radius:12px;
  --header-h:76px;
  --sidebar-w:300px;

  font-family:'Cairo',sans-serif;
  background:var(--bg);
  color:var(--text);
  box-sizing:border-box;
  direction:rtl;
}

.egypt-water-app-wrapper *,
.egypt-water-app-wrapper *::before,
.egypt-water-app-wrapper *::after {
  margin:0;padding:0;box-sizing:border-box;
}

/* ─── Loading ─── */
.egypt-water-app-wrapper #loading{
  position:fixed;inset:0;background:var(--blue-dark);z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  transition:opacity .4s ease
}
.egypt-water-app-wrapper #loading .spin{
  width:52px;height:52px;border:3px solid rgba(255,255,255,.25);
  border-top-color:#fff;border-radius:50%;animation:ewm-spin .9s linear infinite
}
.egypt-water-app-wrapper #loading p{color:#fff;font-size:1rem;font-weight:600;letter-spacing:.02em}
@keyframes ewm-spin{to{transform:rotate(360deg)}}

/* ─── Layout ─── */
.egypt-water-app-wrapper #app{display:flex;flex-direction:column;height:100vh}

/* ─── Header ─── */
.egypt-water-app-wrapper header{
  height:var(--header-h);background:var(--white);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;padding:0 20px;
  gap:12px;z-index:500;flex-shrink:0;box-shadow:var(--shadow)
}
.egypt-water-app-wrapper .brand{display:flex;align-items:center;gap:12px;min-width:0}
.egypt-water-app-wrapper .brand-icon{
  width:42px;height:42px;border-radius:10px;background:var(--white);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden
}
.egypt-water-app-wrapper .brand-icon i{color:#fff;font-size:18px}
.egypt-water-app-wrapper .brand-icon img{width:100%;height:100%;object-fit:contain}
.egypt-water-app-wrapper .brand-text h1{font-size:.95rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;line-height:1.4}
.egypt-water-app-wrapper .brand-text p{font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
.egypt-water-app-wrapper .stats{display:flex;gap:8px;flex-shrink:0}
.egypt-water-app-wrapper .stat{
  background:var(--bg);border:1px solid var(--border);border-radius:10px;
  padding:6px 14px;text-align:center;min-width:70px
}
.egypt-water-app-wrapper .stat-n{font-size:1.25rem;font-weight:700;color:var(--blue);line-height:1}
.egypt-water-app-wrapper .stat-l{font-size:.68rem;color:var(--muted);margin-top:2px}

/* ─── Body ─── */
.egypt-water-app-wrapper .body{display:flex;flex:1;overflow:hidden}

/* ─── Sidebar ─── */
.egypt-water-app-wrapper #sidebar{
  width:var(--sidebar-w);background:var(--white);border-left:1px solid var(--border);
  display:flex;flex-direction:column;z-index:400;overflow:hidden;flex-shrink:0;
  transition:transform .3s ease
}
.egypt-water-app-wrapper .sidebar-header{padding:16px 18px 10px;border-bottom:1px solid var(--border)}
.egypt-water-app-wrapper .sidebar-header h2{font-size:.9rem;font-weight:700;color:var(--text);margin:0 0 10px 0}
.egypt-water-app-wrapper .filter-tabs{display:flex;gap:6px;flex-wrap:wrap}
.egypt-water-app-wrapper .ftab{
  padding:5px 12px;border-radius:20px;border:1px solid var(--border);
  background:transparent;cursor:pointer;font-family:'Cairo',sans-serif;
  font-size:.78rem;font-weight:600;color:var(--muted);transition:all .2s ease;white-space:nowrap
}
.egypt-water-app-wrapper .ftab.active,.egypt-water-app-wrapper .ftab:hover{background:var(--blue);border-color:var(--blue);color:#fff}
.egypt-water-app-wrapper .ftab.purple.active,.egypt-water-app-wrapper .ftab.purple:hover{background:var(--purple);border-color:var(--purple);color:#fff}
.egypt-water-app-wrapper .stations-list{flex:1;overflow-y:auto;padding:10px}
.egypt-water-app-wrapper .stations-list::-webkit-scrollbar{width:4px}
.egypt-water-app-wrapper .stations-list::-webkit-scrollbar-track{background:transparent}
.egypt-water-app-wrapper .stations-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
.egypt-water-app-wrapper .station-card{
  padding:12px 14px;border-radius:10px;border:1px solid var(--border);
  margin-bottom:8px;cursor:pointer;transition:all .2s ease;background:var(--white)
}
.egypt-water-app-wrapper .station-card:hover{border-color:var(--blue);box-shadow:var(--shadow)}
.egypt-water-app-wrapper .station-card.active{border-color:var(--blue);background:var(--blue-light)}
.egypt-water-app-wrapper .sc-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.egypt-water-app-wrapper .sc-badge{
  width:28px;height:28px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;flex-shrink:0;font-size:11px
}
.egypt-water-app-wrapper .sc-badge.water{background:var(--blue);color:#fff}
.egypt-water-app-wrapper .sc-badge.sewage{background:#059669;color:#fff}
.egypt-water-app-wrapper .sc-name{font-size:.82rem;font-weight:700;color:var(--text);line-height:1.3}
.egypt-water-app-wrapper .sc-gov{
  display:inline-flex;align-items:center;gap:3px;
  font-size:.7rem;color:var(--muted);margin-top:2px
}
.egypt-water-app-wrapper .sc-cap{font-size:.73rem;color:var(--blue);font-weight:600}

/* ─── Map ─── */
.egypt-water-app-wrapper #map{flex:1;z-index:1}

/* ─── Mobile toggle ─── */
.egypt-water-app-wrapper #sidebar-toggle{
  display:none;position:fixed;bottom:20px;right:20px;z-index:600;
  width:48px;height:48px;border-radius:50%;background:var(--blue);border:none;
  color:#fff;font-size:18px;cursor:pointer;box-shadow:var(--shadow-lg)
}

/* ─── Legend ─── */
.map-legend{
  background:var(--white) !important;border:1px solid var(--border) !important;border-radius:var(--radius) !important;
  padding:14px 16px !important;box-shadow:var(--shadow) !important;min-width:160px;
  font-family:'Cairo',sans-serif !important;direction:rtl !important;
}
.legend-title{font-size:.8rem;font-weight:700;color:var(--text);margin-bottom:10px}
.leg-item{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:.78rem;color:var(--muted)}
.leg-dot{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0}
.leg-dot.water{background:#1a56db;color:#fff}
.leg-dot.sewage{background:#059669;color:#fff}

/* ─── Custom marker ─── */
.mk{
  width:36px;height:36px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.25);cursor:pointer;
  border:2px solid rgba(255,255,255,.7)
}
.mk.water{background:#1a56db}
.mk.sewage{background:#059669}
.mk i{transform:rotate(45deg);color:#fff;font-size:14px}
.mk.mk-img{padding:4px}
.mk.mk-img img{width:100%;height:100%;object-fit:contain;transform:rotate(45deg);border-radius:50%}

/* ─── Popup ─── */
.leaflet-popup-content-wrapper{border-radius:12px!important;padding:0!important;overflow:hidden;border:1px solid #dde3ec;box-shadow:0 4px 24px rgba(30,42,58,.14)!important;direction:rtl}
.leaflet-popup-content{margin:0!important;width:300px!important;font-family:'Cairo',sans-serif}
.leaflet-popup-content {
    text-align: center;
}
.leaflet-popup-content h3,
.leaflet-popup-content p,
.leaflet-popup-content span {
    text-align: center;
}
.popup-img-wrap{position:relative;width:100%;height:160px;overflow:hidden;background:#dde8f8;flex-shrink:0}
.popup-img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.popup-img-wrap .ph{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px
}
.popup-img-wrap .ph i{font-size:38px;opacity:.3}
.popup-img-wrap .ph span{font-size:.75rem;opacity:.45;font-family:'Cairo',sans-serif}
.popup-img-badge{
  position:absolute;bottom:8px;right:8px;
  background:rgba(0,0,0,.5);color:#fff;font-size:.63rem;
  padding:3px 8px;border-radius:20px;font-family:'Cairo',sans-serif
}
.popup-head{padding:12px 16px 10px;border-bottom:1px solid #dde3ec}
.popup-type{
  display:inline-flex;align-items:center;gap:5px;font-size:.7rem;font-weight:700;
  padding:3px 10px;border-radius:20px;margin-bottom:6px
}
.popup-type.water{background:#e8f0fe;color:#1a56db}
.popup-type.sewage{background:#ecfdf5;color:#059669}
.popup-head h3{font-size:.92rem;font-weight:700;color:#1e2a3a;margin:0}
.popup-head .gov{font-size:.75rem;color:#5a6a80}
.popup-body{padding:12px 16px}
.pi{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid #dde3ec;font-size:.78rem}
.pi:last-child{border-bottom:none}
.pi-label{color:#5a6a80}
.pi-val{font-weight:700;color:#1e2a3a}
.pi-val.green{color:#059669}
.popup-link{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin:10px 16px 14px;padding:9px;border-radius:8px;background:#1a56db;
  color:#fff!important;text-decoration:none!important;font-size:.8rem;font-weight:600;
  font-family:'Cairo',sans-serif;transition:background .2s ease
}
.popup-link:hover{background:#0f3a8a}

/* ─── Responsive (exact from HTML) ─── */
@media(max-width:768px){
  .egypt-water-app-wrapper{--header-h:60px;--sidebar-w:100%}
  .egypt-water-app-wrapper header{padding:0 14px}
  .egypt-water-app-wrapper .brand-text p{display:none}
  .egypt-water-app-wrapper .stat-n{font-size:1.1rem}
  .egypt-water-app-wrapper .stat-l{font-size:.65rem}
  .egypt-water-app-wrapper .stats .stat:last-child{display:none}
  .egypt-water-app-wrapper #sidebar{
    position:fixed;bottom:0;left:0;right:0;width:100%;height:55vh;
    border-left:none;border-top:1px solid var(--border);border-radius:16px 16px 0 0;
    transform:translateY(100%)
  }
  .egypt-water-app-wrapper #sidebar.open{transform:translateY(0)}
  .egypt-water-app-wrapper #sidebar-toggle{display:flex;align-items:center;justify-content:center}
  .map-legend{bottom:80px!important}
  .leaflet-popup-content{width:250px!important}
}
@media(max-width:400px){
  .egypt-water-app-wrapper .stats{gap:5px}
  .egypt-water-app-wrapper .stat{padding:5px 10px;min-width:60px}
  .egypt-water-app-wrapper .brand-icon{width:36px;height:36px}
  .egypt-water-app-wrapper .brand-icon i{font-size:15px}
  .egypt-water-app-wrapper .brand-text h1{font-size:.85rem}
}