@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Noto+Naskh+Arabic:wght@600;700&display=swap');

/* ═══════════════════════════════════════
   DESIGN TOKENS — Islamic Heritage Palette
═══════════════════════════════════════ */
:root {
  /* Parchment & Stone */
  --parch:    #F9F3E8;
  --parch2:   #F2E8D5;
  --parch3:   #E8D9BE;
  --parch4:   #D9C9A8;

  /* Forest Greens */
  --forest:   #2C5F3E;
  --forestD:  #1E4429;
  --forestL:  #3A7A52;
  --forestXL: #EAF3ED;
  --forestBo: rgba(44,95,62,.22);

  /* Gold / Amber */
  --gold:     #A07828;
  --goldB:    #C49A35;
  --goldL:    #FBF3DC;
  --goldBo:   rgba(160,120,40,.25);
  --goldGlow: rgba(196,154,53,.18);

  /* Terracotta accent */
  --terra:    #8B4A2A;
  --terraL:   rgba(139,74,42,.09);
  --terraBo:  rgba(139,74,42,.2);

  /* Neutral muted */
  --stone:    #7A6E5E;
  --stoneL:   rgba(122,110,94,.08);
  --stoneBo:  rgba(122,110,94,.2);

  /* Text — improved contrast */
  --t1: #161007;
  --t2: #2E2210;
  --t3: #574A30;
  --t4: #8A7A62;

  /* Borders */
  --bo:  rgba(100,75,30,.1);
  --bo2: rgba(100,75,30,.17);
  --bo3: rgba(100,75,30,.28);

  /* Shadows */
  --sh:  0 2px 8px  rgba(60,40,10,.08);
  --shM: 0 4px 20px rgba(60,40,10,.12);
  --shL: 0 10px 40px rgba(60,40,10,.16);

  --r:  14px;
  --rs: 10px;
  --rx: 8px;

  --font-title: 'Noto Naskh Arabic', serif;
  --font-body:  'IBM Plex Sans Arabic', sans-serif;

  --hh: 64px;
  --panel-w: 400px;
}

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { height:100% }
body {
  height:100%; overflow:hidden;
  font-family: var(--font-body);
  background: var(--parch);
  color: var(--t1);
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  font-size: 15px;
}

/* ═══════════════════════════════════════
   ISLAMIC GEOMETRIC PATTERN SVG (inline)
═══════════════════════════════════════ */
.geo-pattern {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='0.7'%3E%3Cpolygon points='28,4 52,16 52,40 28,52 4,40 4,16'/%3E%3Cpolygon points='28,12 44,20 44,36 28,44 12,36 12,20'/%3E%3Cline x1='28' y1='4' x2='28' y2='12'/%3E%3Cline x1='52' y1='16' x2='44' y2='20'/%3E%3Cline x1='52' y1='40' x2='44' y2='36'/%3E%3Cline x1='28' y1='52' x2='28' y2='44'/%3E%3Cline x1='4' y1='40' x2='12' y2='36'/%3E%3Cline x1='4' y1='16' x2='12' y2='20'/%3E%3C/g%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════
   APP SHELL
═══════════════════════════════════════ */
.app { display:flex; flex-direction:column; height:100dvh; }

/* ═══════════════════════════════════════
   HEADER
═══════════════════════════════════════ */
.hdr {
  height: var(--hh);
  flex-shrink: 0;
  display: flex; align-items: center;
  padding: 0 18px;
  gap: 10px;
  background: var(--forest);
  position: relative;
  z-index: 500;
  box-shadow: 0 3px 16px rgba(20,40,25,.3);
  overflow: hidden;
}

/* geometric overlay — repeating Islamic pattern across full header */
.hdr::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image: url('../img/islam.png');
  background-size: 220px auto;
  background-repeat: repeat;
  opacity: 0.13;
}

/* decorative gold line at bottom */
.hdr::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background: var(--goldB);
  opacity: .6;
}

/* ornamental divs removed — pattern handled by hdr::before only */
.hdr-ornament, .hdr-ornament--r, .hdr-ornament--l { display:none !important; }

.hdr-brand {
  display:flex; align-items:center; gap:10px;
  text-decoration:none; position:relative; z-index:1;
}
.hdr-logo { height:38px; width:auto; object-fit:contain; }
.hdr-txt h1 {
  font-family: var(--font-title);
  font-size:1.08rem; font-weight:700; color:#fff;
  margin-bottom:2px; line-height:1.2;
  text-shadow:0 1px 4px rgba(0,0,0,.3);
}
.hdr-txt .sub {
  font-size:.65rem; color:rgba(255,255,255,.75);
  font-weight:500; display:block; font-family:var(--font-body);
}
.hdr-sp { flex:1; }

.hdr-actions { display:flex; align-items:center; gap:8px; position:relative; z-index:2; }

/* mobile tab buttons */
.hdr-tab {
  display:none; /* shown only mobile */
  align-items:center; justify-content:center; gap:6px;
  height:36px; padding:0 13px;
  border-radius: var(--rs);
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  color:rgba(255,255,255,.80);
  font-family:var(--font-body); font-size:.72rem; font-weight:600;
  cursor:pointer; transition:all .18s; white-space:nowrap;
  line-height:1; letter-spacing:.01em;
}
.hdr-tab svg { width:14px; height:14px; display:block; flex-shrink:0; }
.hdr-tab.active {
  background:rgba(255,255,255,.22);
  color:#fff; border-color:rgba(255,255,255,.40);
}
.hdr-tab:hover { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.35); }
.hdr-tab:active { transform:scale(.94); }

.hdr-btn {
  width:36px; height:36px; border-radius:var(--rs);
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  color:rgba(255,255,255,.85);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; position:relative; transition:all .18s;
  line-height:1;
}
.hdr-btn:hover  { background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.38); }
.hdr-btn:active { transform:scale(.92); }
.hdr-btn svg { width:16px; height:16px; display:block; }

.hdr-badge {
  position:absolute; top:-5px; left:-5px;
  min-width:16px; height:16px; border-radius:8px;
  background:var(--goldB); color:#fff;
  font-size:.5rem; font-weight:800;
  display:none; align-items:center; justify-content:center;
  padding:0 3px; border:2px solid var(--forest);
}
.hdr-badge.on { display:flex; }

/* ═══════════════════════════════════════
   BODY WRAP — Google Maps style split
═══════════════════════════════════════ */
.body-wrap {
  flex:1; display:flex;
  overflow:hidden; position:relative;
}

/* ═══════════════════════════════════════
   LIST PANEL
═══════════════════════════════════════ */
.panel--list {
  width: var(--panel-w);
  flex-shrink:0;
  display:flex; flex-direction:column;
  overflow: visible;          /* MUST be visible so dropdowns escape */
  background: var(--parch);
  border-left: 2px solid var(--bo3);
  position:relative; z-index:9999;
  box-shadow: 2px 0 20px rgba(60,40,10,.1);
}

/* decorative top border on panel */
.panel--list::before {
  content:''; display:block; height:3px; flex-shrink:0;
  background: var(--goldB);
}

/* Search area */
.panel-search {
  padding:12px 14px 8px;
  background: var(--parch);
  border-bottom:1px solid var(--bo);
}

.srch { position:relative; }
.srch input {
  width:100%; padding:10px 40px 10px 14px;
  border-radius: var(--rs);
  background: var(--parch2);
  border:1.5px solid var(--bo2);
  color:var(--t1); font-family:var(--font-body); font-size:.9rem; font-weight:500;
  outline:none; transition:border .18s, box-shadow .18s;
}
.srch input::placeholder { color:var(--t4); }
.srch input:focus { border-color:var(--forest); box-shadow:0 0 0 3px var(--forestXL); }
.srch-ico {
  position:absolute; right:13px; top:50%;
  transform:translateY(-50%); color:var(--t4);
  pointer-events:none; line-height:0;
}
.srch-ico svg { width:14px; height:14px; }

/* Filters */
.panel-filters {
  padding:8px 14px 6px;
  background:var(--parch);
  border-bottom:1px solid var(--bo);
  position:relative; z-index:700;
  overflow:visible;
}

.frow {
  display:flex; gap:7px; align-items:center;
  overflow:visible;
  padding-bottom:2px;
}

/* dropdown wrapper */
.fd-wrap { position:relative; flex-shrink:0; z-index:700; }

.fd-btn {
  height:32px; padding:0 11px 0 9px;
  border-radius:20px;
  border:1.5px solid var(--bo2);
  background:var(--parch2);
  color:var(--t2);
  font-family:var(--font-body); font-size:.75rem; font-weight:700;
  cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  transition:all .15s; box-shadow:var(--sh);
  line-height:1;
}
.fd-btn .fd-ico   { width:9px; height:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.fd-btn .fd-caret { width:9px; height:9px; flex-shrink:0; opacity:.5; transition:transform .2s; display:flex; align-items:center; justify-content:center; }
.fd-btn .fd-ico svg, .fd-btn .fd-caret svg { display:block; }
.fd-btn:hover  { background:var(--parch3); color:var(--t1); }
.fd-btn.active { background:var(--forestXL); color:var(--forest); border-color:var(--forestBo); font-weight:800; }
.fd-btn.open .fd-caret { transform:rotate(180deg); }

.fd-menu {
  position:absolute; top:calc(100% + 6px); right:0;
  min-width:190px;
  background:var(--parch);
  border:1.5px solid var(--bo3);
  border-radius:var(--r);
  box-shadow:var(--shL);
  z-index:9999; overflow:hidden; display:none;
  animation:dropIn .18s cubic-bezier(.34,1.3,.64,1) both;
}
.fd-menu.open { display:block; }

@keyframes dropIn {
  from { opacity:0; transform:translateY(-5px) scale(.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

/* top line on dropdown */
.fd-menu::before {
  content:''; display:block; height:2px;
  background: var(--forest);
}

.fd-item {
  display:flex; align-items:center; gap:8px;
  padding:10px 14px;
  font-size:.8rem; font-weight:600; color:var(--t2);
  cursor:pointer; transition:background .1s;
  border-bottom:1px solid var(--bo); font-family:var(--font-body);
  line-height:1;
}
.fd-item:last-child { border-bottom:none; }
.fd-item:hover { background:var(--parch2); color:var(--t1); }
.fd-item.sel  { color:var(--forest); background:var(--forestXL); font-weight:800; }
.fd-item svg  { width:11px; height:11px; flex-shrink:0; display:block; }
.fd-count { margin-right:auto; font-size:.63rem; color:var(--t4); background:var(--parch3); padding:1px 6px; border-radius:10px; }
.fd-check { margin-right:auto; opacity:0; display:flex; align-items:center; }
.fd-item.sel .fd-check { opacity:1; color:var(--forest); }
.fd-check svg { width:11px; height:11px; display:block; }

/* chip */
.fc {
  height:32px; padding:0 13px; border-radius:20px;
  border:1.5px solid var(--bo2); background:var(--parch2); color:var(--t2);
  font-family:var(--font-body); font-size:.75rem; font-weight:700;
  cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  transition:all .15s; flex-shrink:0; box-shadow:var(--sh);
  line-height:1;
}
.fc:hover  { background:var(--parch3); color:var(--t1); }
.fc:active { transform:scale(.95); }
.fc svg    { width:9px; height:9px; flex-shrink:0; display:block; }
.fc.on     { background:var(--forestXL); color:var(--forest); border-color:var(--forestBo); font-weight:800; }
.fc.all-on { background:var(--forest); color:#fff; border-color:var(--forest); }

#fd-overlay { position:fixed; inset:0; z-index:9998; display:none; }
#fd-overlay.active { display:block; }

/* Count bar */
.panel-count {
  padding:6px 14px 4px;
  display:flex; align-items:center; gap:7px;
  font-size:.76rem; color:var(--t3); font-weight:600;
  border-bottom:1px solid var(--bo);
}
.count-gem {
  width:6px; height:6px; border-radius:50%;
  background:var(--goldB);
  box-shadow:0 0 6px var(--goldGlow);
  flex-shrink:0;
}
.panel-count strong { color:var(--forest); font-weight:800; }

/* Scroll area */
.panel-scroll {
  flex:1; overflow-y:auto;
  padding:8px 10px 14px;
  -webkit-overflow-scrolling:touch;
}
.panel-scroll::-webkit-scrollbar { width:4px; }
.panel-scroll::-webkit-scrollbar-thumb { background:var(--parch3); border-radius:2px; }

/* ═══════════════════════════════════════
   CARD
═══════════════════════════════════════ */
.cd {
  background:var(--parch);
  border:1.5px solid var(--bo2);
  border-radius:var(--r);
  margin-bottom:8px; cursor:pointer;
  transition:all .18s; overflow:hidden;
  box-shadow:var(--sh);
  position:relative;
}

/* left gold accent line */
.cd::before {
  content:''; position:absolute;
  right:0; top:12px; bottom:12px; width:3px;
  background:transparent; border-radius:2px;
  transition:background .18s;
}

.cd:hover { background:var(--parch2); box-shadow:var(--shM); transform:translateX(-2px); border-color:var(--bo3); }
.cd:active { transform:scale(.99); }
.cd.act { border-color:var(--forestBo); background:var(--forestXL); }
.cd.act::before { background:var(--forest); }

.cd-inner { padding:11px 14px 11px 11px; }

.cd-top {
  display:flex; align-items:flex-start;
  justify-content:space-between; gap:8px; margin-bottom:7px;
}
.cd-n {
  font-family:var(--font-title);
  font-size:1rem; font-weight:700;
  line-height:1.45; color:var(--t1);
}

/* badges */
.bg {
  flex-shrink:0; padding:3px 9px; border-radius:20px;
  font-size:.56rem; font-weight:700;
  display:inline-flex; align-items:center; gap:3px;
  line-height:1.2; white-space:nowrap; border:1px solid transparent;
  font-family:var(--font-body);
}
.bg svg { width:8px; height:8px; flex-shrink:0; }
.bg.by { background:var(--forestXL); color:var(--forest); border-color:var(--forestBo); }
.bg.bn { background:var(--stoneL);   color:var(--stone);  border-color:var(--stoneBo); }
.bg.bh { background:var(--goldL);    color:var(--gold);   border-color:var(--goldBo); }
.bg.bu { background:var(--stoneL);   color:var(--stone);  border-color:var(--stoneBo); }

/* meta */
.cd-meta { display:flex; flex-direction:column; gap:4px; }
.cd-r {
  display:flex; align-items:center; gap:5px;
  font-size:.78rem; color:var(--t2); font-weight:500;
}
.cd-r svg { width:10px; height:10px; flex-shrink:0; color:var(--t4); }
.cd-qiyam { color:var(--forest) !important; }
.cd-qiyam strong { font-weight:800; }

/* divider */
.cd-divider {
  height:1px; margin:9px 0;
  background: var(--bo2);
}

/* actions */
.cd-acts { display:flex; gap:6px; }

.cb {
  display:inline-flex; align-items:center; justify-content:center;
  gap:4px; padding:6px 11px; border-radius:var(--rx);
  font-family:var(--font-body); font-size:.73rem; font-weight:700;
  cursor:pointer; text-decoration:none; border:none; transition:all .13s; white-space:nowrap;
  line-height:1;
}
.cb:active { transform:scale(.93); }
.cb svg    { width:10px; height:10px; flex-shrink:0; display:block; }
.cb-nav    { background:var(--goldL); color:var(--gold); border:1.5px solid var(--goldBo); }
.cb-nav:hover { background:#f0e4b0; }
.cb-fav    { background:var(--parch3); color:var(--t3); border:1.5px solid var(--bo2); }
.cb-fav:hover { background:var(--parch4); }
.cb-fav.on { color:var(--goldB); background:var(--goldL); border-color:var(--goldBo); }
.cb-audio  { background:var(--goldL); color:var(--gold); border:1.5px solid var(--goldBo); }
.cb-audio:hover { background:#f5e8b8; }
.cb-audio svg { width:10px; height:10px; }

/* empty */
.emp { text-align:center; padding:48px 20px; color:var(--t4); }
.emp svg { width:30px; height:30px; opacity:.18; margin-bottom:12px; }
.emp h4  { font-size:.88rem; color:var(--t3); font-weight:700; margin-bottom:4px; font-family:var(--font-title); }
.emp p   { font-size:.73rem; }

/* ═══════════════════════════════════════
   MAP PANEL
═══════════════════════════════════════ */
.panel--map {
  flex:1; position:relative; overflow:hidden;
}

#map { width:100%; height:100%; }

/* near button */
.map-near-btn {
  position:absolute; bottom:20px; right:16px; z-index:500;
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:0 18px; height:42px;
  border-radius:21px;
  background: var(--forest);
  border:2px solid rgba(255,255,255,.2);
  color:#fff;
  font-family:var(--font-body); font-size:.76rem; font-weight:700;
  cursor:pointer; line-height:1;
  box-shadow:0 4px 16px rgba(20,50,30,.4);
  transition:all .18s;
}
.map-near-btn:hover  { transform:translateY(-2px); box-shadow:0 8px 24px rgba(20,50,30,.45); background:var(--forestL); }
.map-near-btn:active { transform:scale(.95); }
.map-near-btn svg    { width:16px; height:16px; display:block; flex-shrink:0; }

/* ═══════════════════════════════════════
   LEAFLET OVERRIDES
═══════════════════════════════════════ */
.leaflet-container { background:var(--parch2) !important; font-family:var(--font-body) !important; }
.leaflet-container a { color:#2c5f3e !important; -webkit-tap-highlight-color:rgb(44 95 62 / 56%) !important; }

.leaflet-control-zoom {
  border:none !important; border-radius:var(--rs) !important;
  overflow:hidden; box-shadow:var(--shM) !important;
}
.leaflet-control-zoom a {
  background:var(--parch) !important; color:var(--t2) !important;
  border-bottom:1px solid var(--bo2) !important;
  width:34px !important; height:34px !important; line-height:34px !important; font-size:15px !important;
}
.leaflet-control-zoom a:hover { background:var(--parch2) !important; }

.leaflet-popup-content-wrapper {
  background:var(--parch) !important; border:1.5px solid var(--bo3) !important;
  border-radius:var(--r) !important; box-shadow:var(--shL) !important; padding:0 !important;
}
.leaflet-popup-content { margin:0 !important; min-width:235px !important; }
.leaflet-popup-tip { background:var(--parch) !important; }
.leaflet-control-attribution { background:rgba(249,243,232,.85) !important; color:var(--t4) !important; font-size:8px !important; }

/* Marker */
.mk { width:28px; height:34px; display:flex; align-items:center; justify-content:center; }
.mk-b {
  width:22px; height:22px; border-radius:50% 50% 50% 0;
  background: var(--forest);
  transform:rotate(-45deg);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 10px rgba(20,50,30,.4); border:2.5px solid rgba(255,255,255,.85);
  transition:all .2s;
}
.mk:hover .mk-b { transform:rotate(-45deg) scale(1.18); }
.mk-d { width:6px; height:6px; border-radius:50%; background:#fff; transform:rotate(45deg); }

/* Popup */
.pop { padding:14px 16px; direction:rtl; text-align:right; background:var(--parch); }
.leaflet-popup-content-wrapper { direction:rtl !important; }
.leaflet-popup-content { direction:rtl !important; text-align:right !important; }

/* close button — clean positioning */
.leaflet-popup-close-button {
  left:8px !important;
  right:auto !important;
  top:8px !important;
  width:20px !important;
  height:20px !important;
  line-height:20px !important;
  font-size:14px !important;
  padding:0 !important;
  text-align:center !important;
  color:var(--t3) !important;
  background:var(--parch2) !important;
  border-radius:50% !important;
  border:1px solid var(--bo2) !important;
}
.leaflet-popup-close-button:hover { background:var(--parch3) !important; color:var(--t1) !important; }

/* top bar */
.pop::before { content:''; display:block; height:3px; margin:-14px -16px 12px; background: var(--forest); }
.pop-n {
  font-family:var(--font-title); font-size:.95rem; font-weight:700;
  color:var(--t1); margin-bottom:8px; line-height:1.4;
  padding-left:30px;
}
.pop-r { display:flex; align-items:center; gap:5px; margin-bottom:5px; font-size:.78rem; color:var(--t2); font-family:var(--font-body); }
.pop-r svg { width:11px; height:11px; color:var(--t4); flex-shrink:0; }
.pop-r .pl { color:var(--t4); font-weight:600; }
.pop-qiyam { color:var(--forest) !important; }
.pop-qiyam strong { font-weight:800; }
.pop-a { display:flex; gap:6px; margin-top:10px; padding-top:10px; border-top:1px solid var(--bo2); }
.pop-b {
  flex:1; display:flex; align-items:center; justify-content:center; gap:4px;
  padding:7px; border-radius:var(--rx); font-family:var(--font-body); font-size:.69rem; font-weight:700;
  cursor:pointer; text-decoration:none; border:none; transition:all .13s;
}
.pop-b svg { width:11px; height:11px; flex-shrink:0; }
.pb-n    { background:var(--goldL); color:var(--gold); border:1.5px solid var(--goldBo); }
.pb-n:hover { background:#f0e4b0; }
.pb-f    { background:var(--parch3); color:var(--t3); border:1.5px solid var(--bo2); }
.pb-f.on { color:var(--goldB); background:var(--goldL); border-color:var(--goldBo); }
.pop-b.pb-audio { background:var(--goldL); color:var(--gold); border:1.5px solid var(--goldBo); }

/* user location */
.usr-loc { background:none !important; border:none !important; }
.usr-dot { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:14px; height:14px; border-radius:50%; background:#3B82F6; border:2.5px solid #fff; box-shadow:0 1px 6px rgba(59,130,246,.5); }
.usr-pulse { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; border-radius:50%; background:rgba(59,130,246,.15); animation:uPulse 2s ease-out infinite; }
@keyframes uPulse { 0%{transform:translate(-50%,-50%) scale(.5);opacity:1}100%{transform:translate(-50%,-50%) scale(1.5);opacity:0} }

/* ═══════════════════════════════════════
   FAVORITES OVERLAY
═══════════════════════════════════════ */
.fav-panel {
  position:fixed !important;
  top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
  z-index:99999 !important;
  background:var(--parch);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.fav-panel.hide { display:none !important; }

.fav-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  background:var(--forest);
  position:relative; overflow:hidden;
}
.fav-hdr::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image: url('../img/islam.png');
  background-size: 220px auto;
  background-repeat: repeat;
  opacity: 0.13;
}

/* fav-ornament removed — pattern via fav-hdr::before */
.fav-title {
  font-family:var(--font-title); font-size:.95rem; font-weight:700; color:#fff;
  display:flex; align-items:center; gap:8px; position:relative; z-index:2;
}
.fav-title svg { width:16px; height:16px; color:rgba(255,220,80,.9); }
.fav-close {
  width:30px; height:30px; border-radius:var(--rx);
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.85);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background .15s; position:relative; z-index:2;
}
.fav-close:hover { background:rgba(255,255,255,.22); }
.fav-close svg { width:13px; height:13px; }
.fav-scroll { flex:1; overflow-y:auto; padding:10px 12px; }

/* ═══════════════════════════════════════
   TOAST
═══════════════════════════════════════ */
.toast {
  position:fixed; bottom:20px; right:50%;
  transform:translateX(50%) translateY(70px);
  background:var(--forestD); color:var(--parch);
  padding:9px 18px; border-radius:24px;
  font-family:var(--font-body); font-size:.78rem; font-weight:600;
  z-index:9999; transition:all .3s cubic-bezier(.34,1.3,.64,1);
  box-shadow:var(--shL); white-space:nowrap; opacity:0; pointer-events:none;
  border:1px solid var(--goldBo);
}
.toast.show { transform:translateX(50%) translateY(0); opacity:1; }

/* ═══════════════════════════════════════
   ANNOUNCEMENT
═══════════════════════════════════════ */
#announcement {
  position:fixed; top:14px; left:50%;
  transform:translateX(-50%) translateY(-90px);
  z-index:9999; background:var(--forest); color:#fff;
  font-family:var(--font-body); font-size:.83rem; font-weight:700;
  padding:10px 18px 10px 12px; border-radius:14px;
  box-shadow:0 4px 20px rgba(20,50,30,.3), 0 0 0 2px var(--goldBo);
  display:flex; align-items:center; gap:10px;
  max-width:min(92vw,500px); line-height:1.4;
  transition:transform .4s cubic-bezier(.34,1.3,.64,1), opacity .4s ease;
  opacity:0; pointer-events:none; overflow:hidden;
}
#announcement.show { transform:translateX(-50%) translateY(0); opacity:1; pointer-events:auto; }
#announcement.hide-out { transform:translateX(-50%) translateY(-90px); opacity:0; }
#ann-text { flex:1; }
#ann-progress { position:absolute; bottom:0; left:0; height:3px; background:rgba(255,255,255,.3); width:100%; transform-origin:right; transition:none; }
#ann-close { background:rgba(255,255,255,.15); border:none; color:#fff; width:22px; height:22px; border-radius:50%; font-size:.72rem; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
#ann-close:hover { background:rgba(255,255,255,.28); }

/* ═══════════════════════════════════════
   AUDIO BAR
═══════════════════════════════════════ */
#audioBar {
  position:fixed; bottom:0; left:0; right:0; z-index:1000;
  background:var(--parch);
  border-top:2px solid var(--bo3);
  box-shadow:0 -4px 24px rgba(60,40,10,.12);
  padding:10px 16px 12px;
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-body);
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  padding-bottom:max(12px,env(safe-area-inset-bottom));
}
#audioBar.visible { transform:translateY(0); }
body.audio-open .panel-scroll { padding-bottom:92px; }
body.audio-open .toast { bottom:90px; }

.ab-play { width:42px; height:42px; border-radius:50%; background:var(--forest); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; flex-shrink:0; box-shadow:0 2px 8px rgba(20,50,30,.3); transition:transform .15s,background .15s; }
.ab-play:hover  { background:var(--forestD); }
.ab-play:active { transform:scale(.88); }
.ab-play svg    { width:17px; height:17px; }
.ab-info { flex:1; min-width:0; }
.ab-mosque { font-family:var(--font-title); font-size:.82rem; font-weight:700; color:var(--t1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:2px; }
.ab-imam   { font-size:.71rem; color:var(--t3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:5px; }
.ab-track  { display:flex; align-items:center; gap:7px; }
.ab-prog   { flex:1; height:4px; background:var(--parch3); border-radius:2px; cursor:pointer; position:relative; overflow:hidden; }
.ab-fill   { height:100%; background:var(--forest); border-radius:2px; width:0%; transition:width .1s linear; pointer-events:none; }
.ab-time   { font-size:.67rem; color:var(--t4); white-space:nowrap; min-width:34px; text-align:left; }
.ab-close  { width:30px; height:30px; border-radius:50%; background:var(--parch2); border:1.5px solid var(--bo2); display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--t3); flex-shrink:0; transition:all .15s; }
.ab-close:hover { background:var(--parch3); }
.ab-close svg { width:12px; height:12px; }

/* ═══════════════════════════════════════
   DESKTOP — side by side (Google Maps style)
═══════════════════════════════════════ */
@media (min-width:769px) {
  .hdr-tab { display:none !important; }

  .panel--list {
    display:flex; /* always visible */
  }

  .panel--map {
    display:flex; /* always visible */
  }
}

/* ═══════════════════════════════════════
   MOBILE
═══════════════════════════════════════ */
@media (max-width:768px) {
  :root { --hh:54px; --panel-w:100%; }

  .hdr { padding:0 12px; }
  .hdr-logo { height:32px; }
  .hdr-txt h1 { font-size:.88rem; }
  .hdr-txt .sub { font-size:.57rem; }
  .hdr-btn { width:32px; height:32px; }
  .hdr-btn svg { width:14px; height:14px; }

  /* show tabs on mobile */
  .hdr-tab { display:inline-flex; }

  .body-wrap { position:relative; }

  /* both panels fill the full body; toggled by active class */
  .panel--list, .panel--map {
    position:absolute; inset:0;
    width:100%; transition:opacity .25s, transform .25s;
  }

  .panel--list { order:1; }
  .panel--map  { order:2; }

  /* hide inactive panel on mobile */
  .panel--list.hidden { opacity:0; pointer-events:none; transform:translateX(30px); }
  .panel--map.hidden  { opacity:0; pointer-events:none; transform:translateX(-30px); }

  .map-near-btn {
    bottom:16px; right:12px;
    padding:0 13px; height:38px;
  }

  .panel-scroll { padding:6px 10px 14px; }
}

@media (max-width:380px) {
  .hdr-txt .sub { display:none; }
  /* hdr-ornament removed */
  .fd-btn { font-size:.7rem; }
  .fc     { font-size:.7rem; padding:0 10px; }
}