/* ═══════════════════════════════════════════════
   PAGE STYLES — Chamran Municipality v2
   ═══════════════════════════════════════════════ */

/* ── HOME HERO ── */
.hero-wrap {
  position: relative; overflow: hidden;
  background: linear-gradient(175deg, #0d4d28 0%, #1B6B3A 45%, #2d8c50 100%);
  padding: 0 0 32px;
}
.hero-bg-art {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.hero-bg-art svg { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; opacity: .12 }
.hero-top-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 20px 0;
}
.hero-greeting { font-size: 13px; color: rgba(255,255,255,.75); font-weight: 500 }
.hero-date-pill {
  background: rgba(255,255,255,.15); border-radius: var(--rf);
  padding: 5px 12px; font-size: 12px; color: rgba(255,255,255,.9); font-weight: 500;
}
.hero-content { padding: 24px 20px 0; position: relative; z-index: 1 }
.hero-title  { font-size: 32px; font-weight: 900; color: #fff; line-height: 1.2; margin-bottom: 6px }
.hero-sub    { font-size: 14px; color: rgba(255,255,255,.8); line-height: 1.65; margin-bottom: 20px }
.hero-search {
  display: flex; align-items: center;
  background: rgba(255,255,255,.92); border-radius: var(--rf);
  height: 52px; padding: 0 16px; gap: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.hero-search .mi { color: var(--osuv); font-size: 22px; flex-shrink: 0 }
.hero-search input {
  flex: 1; background: none; border: none; font-size: 15px;
  color: var(--osu); direction: rtl; font-family: 'Vazirmatn',Tahoma,sans-serif;
}
.hero-search input::placeholder { color: var(--osuv) }

/* ── QUICK GRID ── */
.q-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.q-item {
  background: var(--su0); border-radius: var(--r3);
  padding: 14px 8px; display: flex; flex-direction: column;
  align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--olv); overflow: hidden; position: relative;
  transition: all var(--mt); -webkit-tap-highlight-color: transparent;
}
.q-item::before { content: ''; position: absolute; inset: 0; background: var(--p); opacity: 0; transition: opacity var(--mt) }
.q-item:hover::before  { opacity: .05 }
.q-item:active { transform: scale(.96) }
.q-ic {
  width: 48px; height: 48px; border-radius: var(--r3);
  display: flex; align-items: center; justify-content: center; z-index: 1;
}
.q-ic .mi { font-size: 24px }
.q-lbl { font-size: 12px; font-weight: 600; color: var(--osu); text-align: center; line-height: 1.3; z-index: 1 }
/* Color variants */
.qc-green  .q-ic { background: #E8F5E9 } .qc-green  .q-ic .mi { color: #2E7D32 }
.qc-blue   .q-ic { background: #E3F2FD } .qc-blue   .q-ic .mi { color: #1565C0 }
.qc-orange .q-ic { background: #FFF3E0 } .qc-orange .q-ic .mi { color: #E65100 }
.qc-teal   .q-ic { background: var(--pc) } .qc-teal   .q-ic .mi { color: var(--p) }
.qc-purple .q-ic { background: #F3E5F5 } .qc-purple .q-ic .mi { color: #7B1FA2 }
.qc-red    .q-ic { background: var(--ec) } .qc-red    .q-ic .mi { color: var(--er) }
.qc-gold   .q-ic { background: var(--tc) } .qc-gold   .q-ic .mi { color: var(--t) }
.qc-brown  .q-ic { background: #EFEBE9 } .qc-brown  .q-ic .mi { color: #4E342E }
.qc-cyan   .q-ic { background: #E0F7FA } .qc-cyan   .q-ic .mi { color: #00695C }

/* ── COMPLAINT BANNER ── */
.complaint-banner {
  background: var(--er); border-radius: var(--r3);
  padding: 16px 18px; display: flex; align-items: center; gap: 14px;
  cursor: pointer; overflow: hidden; position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: filter var(--mt);
}
.complaint-banner:hover { filter: brightness(1.05) }
.complaint-banner:active { transform: scale(.99) }
.cb-icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.cb-icon .mi { font-size: 26px; color: #fff }
.cb-text { flex: 1 }
.cb-title { font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 2px }
.cb-sub   { font-size: 12px; color: rgba(255,255,255,.85) }
.cb-arrow { color: rgba(255,255,255,.8) }

/* ── NEWS CARDS ── */
.news-list { display: flex; flex-direction: column; gap: 10px }
.news-card {
  background: var(--su0); border-radius: var(--r3); overflow: hidden;
  border: 1px solid var(--olv); cursor: pointer;
  transition: box-shadow var(--mt);
  -webkit-tap-highlight-color: transparent;
}
.news-card:hover { box-shadow: var(--e2) }
.news-card-inner { display: flex; gap: 12px; padding: 12px }
.news-thumb-wrap { width: 80px; height: 80px; flex-shrink: 0; border-radius: var(--r2); overflow: hidden; background: var(--su2) }
.news-thumb-wrap img { width: 100%; height: 100%; object-fit: cover }
.news-thumb-icon { width: 80px; height: 80px; flex-shrink: 0; border-radius: var(--r2); background: linear-gradient(135deg,var(--pc),var(--sc)); display: flex; align-items: center; justify-content: center }
.news-thumb-icon .mi { font-size: 36px; color: var(--p); opacity: .5 }
.news-info { flex: 1; min-width: 0 }
.news-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap }
.news-date { font-size: 11px; color: var(--osuv); display: flex; align-items: center; gap: 3px }
.news-title { font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--osu) }

/* ── EMERGENCY CONTACTS ── */
.emg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.emg-card {
  background: var(--su0); border-radius: var(--r3); padding: 14px 12px;
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--olv); cursor: pointer;
  transition: box-shadow var(--mt); -webkit-tap-highlight-color: transparent;
}
.emg-card:active { transform: scale(.97) }
.emg-ic { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.emg-name { font-size: 13px; font-weight: 600; color: var(--osu) }
.emg-num  { font-size: 22px; font-weight: 900; line-height: 1 }
.emg-115 .emg-ic { background: #FFEBEE } .emg-115 .emg-ic .mi { color: #C62828 } .emg-115 .emg-num { color: #C62828 }
.emg-125 .emg-ic { background: #FFF3E0 } .emg-125 .emg-ic .mi { color: #E65100 } .emg-125 .emg-num { color: #E65100 }
.emg-110 .emg-ic { background: #E3F2FD } .emg-110 .emg-ic .mi { color: #1565C0 } .emg-110 .emg-num { color: #1565C0 }
.emg-137 .emg-ic { background: var(--pc) } .emg-137 .emg-ic .mi { color: var(--p) } .emg-137 .emg-num { color: var(--p) }

/* ── SERVICES PAGE ── */
.srv-section-hd { font-size: 14px; font-weight: 700; color: var(--osuv); margin: 20px 0 10px; letter-spacing: .3px }
.srv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.srv-card {
  background: var(--su0); border: 1px solid var(--olv); border-radius: var(--r4);
  padding: 18px 14px; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 10px; cursor: pointer;
  overflow: hidden; position: relative; transition: all var(--mt);
  -webkit-tap-highlight-color: transparent;
}
.srv-card::before { content: ''; position: absolute; inset: 0; background: var(--p); opacity: 0; transition: opacity var(--mt) }
.srv-card:hover::before { opacity: .04 }
.srv-card:hover { box-shadow: var(--e2); border-color: var(--ol) }
.srv-card:active { transform: scale(.96) }
.sc-ic { width: 54px; height: 54px; border-radius: var(--r4); display: flex; align-items: center; justify-content: center; z-index: 1 }
.sc-ic .mi { font-size: 28px }
.sc-title { font-size: 14px; font-weight: 700; z-index: 1; color: var(--osu) }
.sc-desc  { font-size: 12px; color: var(--osuv); line-height: 1.5; z-index: 1 }
.sc-badge { font-size: 11px; font-weight: 700; padding: 3px 12px; border-radius: var(--rf); z-index: 1 }
/* SC color variants */
.sc-green .sc-ic  { background: #E8F5E9 } .sc-green .sc-ic .mi  { color: #2E7D32 }
.sc-blue .sc-ic   { background: #E3F2FD } .sc-blue .sc-ic .mi   { color: #1565C0 }
.sc-orange .sc-ic { background: #FFF3E0 } .sc-orange .sc-ic .mi { color: #E65100 }
.sc-red .sc-ic    { background: var(--ec) } .sc-red .sc-ic .mi  { color: var(--er) }
.sc-gold .sc-ic   { background: var(--tc) } .sc-gold .sc-ic .mi { color: var(--t) }
.sc-teal .sc-ic   { background: var(--pc) } .sc-teal .sc-ic .mi { color: var(--p) }
.sc-purple .sc-ic { background: #F3E5F5 } .sc-purple .sc-ic .mi { color: #7B1FA2 }
.sc-brown .sc-ic  { background: #EFEBE9 } .sc-brown .sc-ic .mi  { color: #4E342E }

/* ── FORM PAGE ── */
.form-page-header { padding: 24px 20px 20px }
.fph-ey   { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; opacity: .7 }
.fph-h1   { font-size: 24px; font-weight: 900; line-height: 1.25; margin-bottom: 6px }
.fph-desc { font-size: 14px; line-height: 1.65; opacity: .8 }

.form-card { background: var(--su0); border-radius: var(--r6); padding: 22px; border: 1px solid var(--olv); box-shadow: var(--e1); margin: 0 16px 16px }
@media (max-width: 360px) { .form-card { padding: 16px; margin: 0 12px 14px } }

/* Priority tiles */
.prio-row { display: flex; gap: 8px; margin-bottom: 14px }
.prio-tile {
  flex: 1; border: 1.5px solid var(--olv); border-radius: var(--r3);
  padding: 10px 6px; text-align: center; cursor: pointer;
  transition: all var(--mt); background: var(--su);
  -webkit-tap-highlight-color: transparent;
}
.prio-tile:active { transform: scale(.97) }
.prio-tile.on { border-color: var(--p); background: var(--pc) }
.prio-tile .mi { font-size: 20px; display: block; margin-bottom: 3px }
.prio-tile span:not(.mi) { font-size: 12px; font-weight: 600 }
.prio-tile.low .mi  { color: #2E7D32 }
.prio-tile.med .mi  { color: #F57C00 }
.prio-tile.high .mi { color: var(--er) }

/* Category grid */
.cat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 14px }
@media (min-width: 400px) { .cat-grid { grid-template-columns: repeat(4,1fr) } }
.cat-tile {
  background: var(--su0); border: 1.5px solid var(--olv); border-radius: var(--r3);
  padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: pointer; transition: all var(--mt); text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.cat-tile:active { transform: scale(.97) }
.cat-tile.on { border-color: var(--p); background: var(--pc) }
.ct-ic { width: 38px; height: 38px; border-radius: var(--r2); background: var(--su2); display: flex; align-items: center; justify-content: center; transition: all var(--mt) }
.cat-tile.on .ct-ic { background: var(--p) }
.ct-ic .mi { font-size: 18px; color: var(--p); transition: color var(--mt) }
.cat-tile.on .ct-ic .mi { color: var(--op) }
.ct-lbl { font-size: 11px; font-weight: 600; color: var(--osu) }

/* ── TRACKING PAGE ── */
.track-hero { padding: 24px 16px 20px }
.track-search-card { background: var(--su0); border-radius: var(--r6); padding: 22px; margin: 0 16px 16px; border: 1px solid var(--olv); box-shadow: var(--e1) }
.track-input-row { display: flex; gap: 8px; align-items: flex-end }
.track-input-row .mf { flex: 1; margin: 0 }

.track-result { margin: 0 16px 16px; border-radius: var(--r4); border: 1px solid var(--olv); overflow: hidden; box-shadow: var(--e1); animation: pg-in .25s ease; display: none }
.track-result.show { display: block }
.tr-header { background: var(--pc); padding: 18px; display: flex; align-items: flex-start; gap: 12px }
.tr-header .mi { font-size: 26px; color: var(--opc); flex-shrink: 0; margin-top: 2px }
.tr-title { font-size: 15px; font-weight: 800; margin-bottom: 3px }
.tr-meta  { font-size: 12px; color: var(--osuv) }
.timeline { padding: 16px; display: flex; flex-direction: column }
.tl-row { display: flex; gap: 12px; padding: 6px 0; position: relative }
.tl-row:not(:last-child)::after { content: ''; position: absolute; right: 15px; top: 36px; bottom: 0; width: 2px; background: var(--olv) }
.tl-row.done::after { background: var(--p) }
.tl-dot { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--olv); background: var(--su); display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1 }
.tl-row.done .tl-dot { background: var(--p); border-color: var(--p) }
.tl-row.done .tl-dot .mi { color: var(--op) }
.tl-dot .mi { font-size: 16px; color: var(--osuv) }
.tl-ttl { font-size: 14px; font-weight: 700; margin-bottom: 1px }
.tl-sub  { font-size: 12px; color: var(--osuv) }

.resp-block { background: #E8F5E9; padding: 18px; border-top: 1px solid #C8E6C9 }
.resp-ttl  { font-size: 13px; font-weight: 700; color: #2E7D32; margin-bottom: 8px; display: flex; align-items: center; gap: 8px }
.resp-text { font-size: 14px; line-height: 1.8; color: #1B5E20; background: rgba(255,255,255,.6); border-radius: var(--r2); padding: 12px }
.resp-meta { font-size: 12px; color: #4CAF50; margin-top: 8px; display: flex; gap: 14px; flex-wrap: wrap }

/* ── TENDERS PAGE ── */
.tender-card {
  background: var(--su0); border-radius: var(--r3); padding: 16px;
  border: 1px solid var(--olv); border-right: 4px solid var(--p);
  margin-bottom: 10px; cursor: pointer; transition: box-shadow var(--mt);
  -webkit-tap-highlight-color: transparent;
}
.tender-card:hover { box-shadow: var(--e2) }
.tender-type { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: var(--rf); margin-bottom: 8px }
.tender-title { font-size: 15px; font-weight: 700; margin-bottom: 8px; line-height: 1.5 }
.tender-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--osuv); margin-top: 4px }
.tender-row .mi { font-size: 16px }

/* ── ACCOUNT PAGE ── */
.account-hero { background: linear-gradient(135deg,var(--pc),var(--sc)); padding: 28px 20px 24px; text-align: center }
.acc-avatar { width: 72px; height: 72px; border-radius: 50%; background: var(--p); display: flex; align-items: center; justify-content: center; margin: 0 auto 12px }
.acc-avatar .mi { font-size: 40px; color: var(--op) }
.acc-name { font-size: 20px; font-weight: 700; margin-bottom: 3px }
.acc-role { font-size: 13px; color: var(--osuv) }
.acc-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; padding: 16px }
.acc-stat { background: var(--su0); border-radius: var(--r3); padding: 14px; text-align: center; border: 1px solid var(--olv) }
.acc-stat-n { font-size: 24px; font-weight: 900; color: var(--p); line-height: 1 }
.acc-stat-l { font-size: 11px; color: var(--osuv); margin-top: 3px; font-weight: 500 }

/* ── PAYMENT ── */
.pay-method-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 14px }
.pay-method {
  border: 2px solid var(--olv); border-radius: var(--r3); padding: 14px 10px;
  text-align: center; cursor: pointer; transition: all var(--mt);
  -webkit-tap-highlight-color: transparent;
}
.pay-method:active { transform: scale(.97) }
.pay-method.on { border-color: var(--p); background: var(--pc) }
.pay-method .mi { font-size: 26px; color: var(--p); display: block; margin-bottom: 5px }
.pay-method span:not(.mi) { font-size: 13px; font-weight: 600 }

/* ── SETTINGS/INFO ── */
.info-sec-lbl { font-size: 11px; font-weight: 700; color: var(--p); letter-spacing: .5px; text-transform: uppercase; padding: 14px 16px 6px }

/* ── SUCCESS STATE ── */
.success-wrap { padding: 36px 20px 24px; text-align: center }
.suc-ring { width: 88px; height: 88px; border-radius: 50%; background: #E8F5E9; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; animation: pop-in .45s cubic-bezier(.34,1.56,.64,1) }
@keyframes pop-in { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }
.suc-ring .mi { font-size: 48px; color: #2E7D32 }
.suc-hl   { font-size: 24px; font-weight: 800; margin-bottom: 8px }
.suc-body { font-size: 14px; color: var(--osuv); line-height: 1.7; margin-bottom: 18px }
.ticket-box { background: var(--pc); border-radius: var(--r6); padding: 16px 24px; display: inline-block; margin-bottom: 20px }
.ticket-lbl { font-size: 11px; font-weight: 600; color: var(--opc); margin-bottom: 4px }
.ticket-num { font-size: 26px; font-weight: 900; color: var(--p); letter-spacing: 4px; font-family: monospace }
.suc-btns   { display: flex; flex-direction: column; gap: 10px; max-width: 260px; margin: 0 auto }

/* ── MAP placeholder ── */
.map-placeholder { height: 200px; background: var(--su2); border-radius: var(--r3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--osuv) }
.map-placeholder .mi { font-size: 48px; opacity: .3 }
.map-placeholder p { font-size: 14px }

/* ── FLOATING NAV extra styles ── */
#nav-bar {
  transition: box-shadow .3s;
}
#nav-bar:hover {
  box-shadow: 0 2px 12px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.08);
}

/* ── Fix padding for floating nav ── */
.main {
  padding-bottom: calc(64px + 32px + var(--safe-b));
}

/* ── Section title no border variant ── */
.sec-ttl-plain {
  font-size:15px; font-weight:800; color:var(--osu);
}

/* ── Info section label ── */
.info-sec-lbl {
  font-size:11px; font-weight:700; color:var(--p);
  letter-spacing:.5px; text-transform:uppercase;
  padding:14px 16px 6px;
}

/* ── Map placeholder ── */
.map-placeholder {
  height:200px; background:var(--su2); border-radius:var(--r3);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; color:var(--osuv);
}
.map-placeholder .mi { font-size:48px; opacity:.3 }
.map-placeholder p { font-size:14px }