/*
Theme Name:  شهرداری چمران — پرتال شهری
Theme URI:   https://chamran.ir
Author:      Chamran Municipality
Description: پرتال جامع خدمات الکترونیک شهرداری چمران — Material You M3 — موبایل فرست
Version:     2.1.0
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 8.1
License:     GPL-2.0-or-later
Text Domain: chamran
Tags:        rtl-language, full-width-template, custom-logo, custom-menu
*/

/* ═══════════════════════════════════════════════
   M3 DESIGN TOKENS — Emerald Green Palette
   ═══════════════════════════════════════════════ */
:root {
  --p:   #1B6B3A; --op:  #FFFFFF;
  --pc:  #A8F0C2; --opc: #002110;
  --s:   #4E6B56; --os:  #FFFFFF;
  --sc:  #CEE9D7; --osc: #0B1F13;
  --t:   #7B6300; --ot:  #FFFFFF;
  --tc:  #FFDF9E; --otc: #261A00;
  --er:  #BA1A1A; --oer: #FFFFFF;
  --ec:  #FFDAD6; --oec: #410002;
  --bg:  #F6FBF4; --obg: #181D19;
  --su:  #F6FBF4; --osu: #181D19;
  --suv: #DCE5DC; --osuv:#3D4B3F;
  --su0: #FFFFFF; --su1: #EFF5EE; --su2: #E9F0E8; --su3: #E3EAE2; --su4: #DDE4DC;
  --ol:  #6C756D; --olv: #BBC5BB;
  --isu: #2D332E; --iosu:#EEF3EC; --ip: #8DD4AA;
  --su-e1: color-mix(in srgb, var(--p) 5%,  var(--su));
  --su-e2: color-mix(in srgb, var(--p) 8%,  var(--su));
  --r1:4px; --r2:8px; --r3:12px; --r4:16px; --r5:20px; --r6:28px; --rf:9999px;
  --e1: 0 1px 2px rgba(0,0,0,.25),0 1px 3px 1px rgba(0,0,0,.12);
  --e2: 0 1px 2px rgba(0,0,0,.25),0 2px 6px 2px rgba(0,0,0,.12);
  --e3: 0 1px 3px rgba(0,0,0,.25),0 4px 8px 3px rgba(0,0,0,.12);
  --e4: 0 2px 3px rgba(0,0,0,.25),0 6px 10px 4px rgba(0,0,0,.12);
  --mt: .28s cubic-bezier(.2,0,0,1);
  --me: .5s  cubic-bezier(.2,0,0,1);
  --md: .3s  cubic-bezier(0,0,0,1);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*,::before,::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:16px; -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body {
  font-family:'Vazirmatn',Tahoma,sans-serif;
  background:var(--bg); color:var(--obg);
  direction:rtl; text-align:right;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh; overflow-x:hidden;
}
a { text-decoration:none; color:inherit }
button,input,textarea,select { font-family:inherit; outline:none }
ul,ol { list-style:none }
img { display:block; max-width:100%; height:auto }

/* ── Icons ── */
.mi {
  font-family:'Material Icons Round';
  font-style:normal; font-weight:400; font-size:24px;
  line-height:1; direction:ltr;
  display:inline-flex; align-items:center; justify-content:center;
  user-select:none; vertical-align:middle; flex-shrink:0;
  font-variation-settings:'FILL' 1;
}
.mi-o { font-variation-settings:'FILL' 0 }

/* ═══ APP SHELL ═══ */
#app {
  display:flex; flex-direction:column;
  min-height:100dvh;
  max-width:480px; margin:0 auto;
  background:var(--su0);
  position:relative;
  overflow:hidden;
}
@media (min-width:600px) {
  body { background:color-mix(in srgb,var(--p) 6%,#fff) }
  #app { box-shadow:var(--e4); min-height:100dvh }
}
@media (min-width:1024px) {
  body { background:var(--su2) }
  #app { max-width:520px }
}

/* ── Top App Bar ── */
#top-bar {
  height:64px; background:var(--su-e2);
  display:flex; align-items:center; padding:0 4px 0 16px; gap:4px;
  position:sticky; top:0; z-index:200;
  transition:box-shadow var(--mt);
  border-bottom:1px solid transparent;
  flex-shrink:0;
}
#top-bar.scrolled { box-shadow:var(--e2); border-bottom-color:var(--olv) }
.bar-lead  { display:flex; align-items:center; gap:10px; flex:1; min-width:0 }
.logo-chip { width:40px; height:40px; border-radius:var(--r3); background:var(--p); display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.logo-chip .mi { font-size:22px; color:var(--op) }
.bar-site-name { font-size:17px; font-weight:800; color:var(--p); line-height:1.2 }
.bar-site-tag  { font-size:11px; font-weight:500; color:var(--osuv) }
.bar-actions   { display:flex }

/* ── Icon Button ── */
.ibtn {
  width:48px; height:48px; border-radius:var(--rf);
  display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; cursor:pointer;
  color:var(--osuv); position:relative; overflow:hidden;
  -webkit-tap-highlight-color:transparent;
}
.ibtn::before { content:''; position:absolute; inset:0; background:currentColor; opacity:0; border-radius:inherit; transition:opacity var(--mt) }
.ibtn:hover::before  { opacity:.08 }
.ibtn:active::before { opacity:.14 }
.ibtn .mi { z-index:1 }
.ibtn .bdot { position:absolute; top:8px; right:8px; width:8px; height:8px; border-radius:50%; background:var(--er); border:1.5px solid var(--su-e2); z-index:2 }

/* ── FLOATING NAV BAR — pill / rounded rectangle ── */
#nav-bar {
  position:fixed;
  bottom:16px;
  left:50%;
  transform:translateX(-50%);
  width:calc(100% - 32px);
  max-width:calc(480px - 32px);
  height:64px;
  background:var(--isu);
  border-radius:var(--rf);
  box-shadow:var(--e4), 0 0 0 1px rgba(255,255,255,.06);
  display:flex;
  z-index:300;
  overflow:hidden;
  padding:0 8px;
}
@media (min-width:600px) {
  #nav-bar { max-width:calc(480px - 32px) }
}

/* nav items */
.nd {
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px;
  cursor:pointer; position:relative; overflow:hidden;
  border:none; background:transparent; color:rgba(255,255,255,.55);
  -webkit-tap-highlight-color:transparent;
  transition:color var(--mt);
  border-radius:var(--r5);
  margin:8px 2px;
}
.nd::before {
  content:''; position:absolute; inset:0; border-radius:var(--r5);
  background:transparent; transition:background var(--md); pointer-events:none;
}
.nd:hover::before  { background:rgba(255,255,255,.08) }
.nd:active::before { background:rgba(255,255,255,.14) }
.nd.on { color:#fff }
.nd.on::before { background:rgba(255,255,255,.12) }
.nd .mi { font-size:22px; z-index:1; font-variation-settings:'FILL' 0; transition:font-variation-settings var(--mt) }
.nd.on .mi { font-variation-settings:'FILL' 1 }
.nd-lbl { font-size:11px; font-weight:500; z-index:1; white-space:nowrap }
.nd.on .nd-lbl { font-weight:700 }

/* ── Main Content ── */
.main {
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding-bottom:calc(64px + 16px + 16px + var(--safe-b));
  -webkit-overflow-scrolling:touch;
}

/* ═══ BUTTONS ═══ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:none; cursor:pointer;
  font-family:'Vazirmatn',Tahoma,sans-serif;
  font-size:14px; font-weight:600; letter-spacing:.1px;
  height:40px; padding:0 24px; border-radius:var(--rf);
  position:relative; overflow:hidden;
  transition:box-shadow var(--mt); white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.btn::before { content:''; position:absolute; inset:0; background:currentColor; opacity:0; border-radius:inherit; transition:opacity var(--mt); pointer-events:none }
.btn:hover::before  { opacity:.08 }
.btn:active::before { opacity:.13 }
.btn .mi { font-size:18px; z-index:1; flex-shrink:0 }
.btn span:not(.mi) { z-index:1 }
.btn:disabled { opacity:.45; cursor:not-allowed }
.btn-f  { background:var(--p);  color:var(--op) }  .btn-f:not(:disabled):hover  { box-shadow:var(--e1) }
.btn-t  { background:var(--sc); color:var(--osc) } .btn-t:not(:disabled):hover  { box-shadow:var(--e1) }
.btn-o  { background:transparent; color:var(--p); border:1.5px solid var(--ol) }
.btn-tx { background:transparent; color:var(--p); padding:0 12px }
.btn-e  { background:var(--er); color:var(--oer) }
.btn-w  { width:100% }
.btn-sm { height:34px; font-size:13px; padding:0 16px }
.btn-sm .mi { font-size:16px }

/* ═══ SNACKBAR ═══ */
.snack {
  position:fixed; bottom:calc(64px + 24px + var(--safe-b)); left:50%;
  transform:translateX(-50%) translateY(calc(100% + 20px));
  min-width:min(320px,calc(100vw - 48px));
  max-width:min(360px,calc(100vw - 32px));
  background:var(--isu); color:var(--iosu);
  border-radius:var(--r2); padding:14px 16px;
  display:flex; align-items:center; gap:10px;
  box-shadow:var(--e3); z-index:9999;
  transition:transform var(--md),opacity var(--mt);
  opacity:0; pointer-events:none;
  font-size:14px; font-weight:500;
}
.snack.on { transform:translateX(-50%) translateY(0); opacity:1; pointer-events:auto }
.snk-txt  { flex:1; line-height:1.5 }
.snk-act  { color:var(--ip); font-size:14px; font-weight:700; cursor:pointer; background:none; border:none; font-family:inherit; flex-shrink:0 }

/* ═══ M3 TEXT FIELDS ═══ */
.mf { margin-bottom:14px }
.mf-lbl { font-size:12px; font-weight:600; color:var(--osuv); display:block; margin-bottom:4px }
.mf-lbl .req { color:var(--er) }
.mf-in  { position:relative }
.mf input,.mf textarea,.mf select {
  width:100%; background:var(--su4);
  border:none; border-bottom:1.5px solid var(--ol);
  border-radius:var(--r1) var(--r1) 0 0;
  padding:14px 46px 14px 14px;
  font-size:15px; color:var(--osu); direction:rtl; appearance:none;
  font-family:'Vazirmatn',Tahoma,sans-serif;
  transition:border-color .18s,background .18s;
}
.mf textarea { min-height:100px; resize:vertical; border-radius:var(--r1) var(--r1) 0 0 }
.mf input::placeholder,.mf textarea::placeholder { color:var(--osuv); opacity:.55 }
.mf input:focus,.mf textarea:focus,.mf select:focus { border-bottom:2px solid var(--p); background:color-mix(in srgb,var(--p) 6%,var(--su4)) }
.mf-ic { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--osuv); pointer-events:none }
.mf-ic .mi { font-size:20px }
.mf-hint { font-size:12px; color:var(--osuv); padding:3px 14px 0 }
.mf.err input,.mf.err textarea,.mf.err select { border-bottom-color:var(--er) }
.mf.err .mf-lbl,.mf.err .mf-hint { color:var(--er) }
.sel-w { position:relative }
.sel-w::after { content:'expand_more'; font-family:'Material Icons Round'; font-variation-settings:'FILL' 1; position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:20px; color:var(--osuv); pointer-events:none }
.col2 { display:grid; grid-template-columns:1fr 1fr; gap:0 12px }
.col3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0 10px }

/* ═══ CARDS ═══ */
.card { background:var(--su0); border-radius:var(--r3); border:1px solid var(--olv); overflow:hidden; transition:box-shadow var(--mt) }
.card-e { background:var(--su-e1); border-radius:var(--r3); box-shadow:var(--e1) }

/* ═══ LIST ITEMS ═══ */
.mli { display:flex; align-items:center; min-height:56px; padding:10px 16px; gap:14px; cursor:pointer; position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent }
.mli::before { content:''; position:absolute; inset:0; background:var(--osu); opacity:0; transition:opacity var(--mt) }
.mli:hover::before  { opacity:.07 }
.mli:active::before { opacity:.13 }
.mli-ico { width:40px; height:40px; flex-shrink:0; border-radius:var(--rf); background:var(--sc); color:var(--osc); display:flex; align-items:center; justify-content:center }
.mli-ico .mi { font-size:20px }
.mli-ico.p { background:var(--pc); color:var(--opc) }
.mli-ico.t { background:var(--tc); color:var(--otc) }
.mli-ico.e { background:var(--ec); color:var(--oec) }
.mli-txt { flex:1; min-width:0 }
.mli-hl  { font-size:15px; font-weight:600; color:var(--osu); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mli-sub { font-size:13px; color:var(--osuv); margin-top:1px; line-height:1.45 }
.mli-tr  { color:var(--osuv); flex-shrink:0 }
.dvd     { height:1px; background:var(--olv) }
.dvd-i   { margin-right:70px }

/* ═══ STEPPER ═══ */
.stepper { display:flex; align-items:center; padding:20px 24px 0; position:relative }
.stepper::before { content:''; position:absolute; top:36px; right:56px; left:56px; height:1px; background:var(--olv) }
.mstep { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; z-index:1 }
.sdot { width:32px; height:32px; border-radius:50%; border:2px solid var(--olv); background:var(--su); display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:var(--osuv); transition:all var(--mt) }
.mstep.done .sdot { background:var(--p); border-color:var(--p); color:var(--op); font-family:'Material Icons Round'; font-size:16px }
.mstep.cur  .sdot { background:var(--p); border-color:var(--p); color:var(--op); box-shadow:0 0 0 3px color-mix(in srgb,var(--p) 25%,transparent) }
.slbl { font-size:11px; font-weight:500; color:var(--osuv) }
.mstep.cur .slbl { color:var(--p); font-weight:700 }
.prog   { height:4px; background:var(--su4); border-radius:var(--rf); overflow:hidden }
.prog-f { height:100%; background:var(--p); border-radius:var(--rf); transition:width .42s var(--mt) }

/* ═══ ALERTS & BADGES ═══ */
.alert { display:flex; gap:12px; padding:13px 16px; border-radius:var(--r3); margin-bottom:14px; font-size:14px; line-height:1.55 }
.alert .mi { font-size:20px; flex-shrink:0; margin-top:1px }
.alert strong { display:block; font-weight:700; margin-bottom:1px }
.a-info { background:var(--tc); color:var(--otc) }
.a-warn { background:#FFF8E1; color:#4E342E }
.a-ok   { background:#E8F5E9; color:#1B5E20 }
.a-err  { background:var(--ec); color:var(--oec) }
.badge { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700; padding:3px 10px; border-radius:var(--rf) }
.b-p { background:var(--pc); color:var(--opc) }
.b-s { background:var(--sc); color:var(--osc) }
.b-t { background:var(--tc); color:var(--otc) }
.b-e { background:var(--ec); color:var(--oec) }
.b-g { background:#E8F5E9; color:#1B5E20 }
.b-y { background:#FFF8E1; color:#E65100 }
.b-n { background:var(--su2); color:var(--osuv) }

/* ═══ UPLOAD ZONE ═══ */
.upload-zone { border:2px dashed var(--olv); border-radius:var(--r4); padding:22px 16px; text-align:center; cursor:pointer; margin-bottom:12px; transition:all var(--mt); background:var(--su1); -webkit-tap-highlight-color:transparent }
.upload-zone:hover,.upload-zone.drag { border-color:var(--p); background:var(--pc) }
.upload-zone input { display:none }
.uz-ic { width:48px; height:48px; border-radius:50%; background:var(--pc); display:flex; align-items:center; justify-content:center; margin:0 auto 10px }
.uz-ic .mi { font-size:24px; color:var(--opc) }
.upload-zone h4 { font-size:14px; font-weight:700; margin-bottom:3px }
.upload-zone p  { font-size:12px; color:var(--osuv) }
.fchips { display:flex; flex-wrap:wrap; gap:6px }
.fchip { height:30px; padding:0 12px; border-radius:var(--r2); background:var(--sc); color:var(--osc); display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500 }
.fchip .mi { font-size:14px; cursor:pointer }

/* ═══ RADIO CHIPS ═══ */
.rchip-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px }
.rchip { height:34px; padding:0 16px; border-radius:var(--r2); border:1.5px solid var(--ol); background:transparent; display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:500; color:var(--osuv); cursor:pointer; overflow:hidden; position:relative; transition:all var(--mt); font-family:inherit; -webkit-tap-highlight-color:transparent }
.rchip input[type=radio],.rchip input[type=checkbox] { display:none }
.rchip::before { content:''; position:absolute; inset:0; background:var(--osu); opacity:0; transition:opacity var(--mt) }
.rchip:hover::before { opacity:.07 }
.rchip.on { background:var(--sc); border-color:transparent; color:var(--osc) }
.rchip .mi { font-size:16px; z-index:1 }
.rchip span:not(.mi) { z-index:1 }
.m-check { display:flex; align-items:flex-start; gap:12px; padding:8px 0; cursor:pointer; font-size:14px; line-height:1.55 }
.m-check input { width:18px; height:18px; accent-color:var(--p); cursor:pointer; flex-shrink:0; margin-top:2px }

/* ═══ REVIEW BOXES ═══ */
.rv-sec { margin-bottom:16px }
.rv-ttl { font-size:11px; font-weight:700; color:var(--p); letter-spacing:.5px; text-transform:uppercase; padding-bottom:7px; border-bottom:1.5px solid var(--pc); margin-bottom:10px }
.rv-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px 20px }
.rv-lbl  { font-size:11px; color:var(--osuv); font-weight:500; margin-bottom:1px }
.rv-val  { font-size:14px; font-weight:600 }
.rv-s2   { grid-column:span 2 }
.rv-txt  { background:var(--su2); border-radius:var(--r2); padding:12px; font-size:14px; line-height:1.8 }

/* ═══ FORM WRAPPER ═══ */
.fc { padding:20px }
.fsec-ttl { font-size:13px; font-weight:700; color:var(--p); display:flex; align-items:center; gap:8px; padding-bottom:10px; border-bottom:1.5px solid var(--pc); margin-bottom:14px }
.fsec-ttl .mi { font-size:18px }
.form-acts { display:flex; justify-content:space-between; gap:10px; padding:12px 0 0; margin-top:8px; border-top:1px solid var(--olv) }
.cap-row { display:flex; gap:12px; align-items:flex-start; margin-bottom:14px }
.cap-box { background:var(--pc); border-radius:var(--r3); padding:14px 20px; font-size:22px; font-weight:900; color:var(--p); letter-spacing:5px; text-align:center; user-select:none; flex-shrink:0; min-width:120px }
.cap-row .mf { flex:1; margin:0 }

/* ═══ SUCCESS ═══ */
.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) }
.suc-ring .mi { font-size:48px; color:#2E7D32 }
@keyframes pop-in { from{transform:scale(0);opacity:0} to{transform:scale(1);opacity:1} }
.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 }

/* ═══ SECTION HELPERS ═══ */
.sec { padding:20px 16px 0 }
.sec-hd  { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px }
.sec-ttl { font-size:15px; font-weight:800; color:var(--osu); display:flex; align-items:center; gap:8px }
.sec-ttl::before { content:''; width:4px; height:18px; background:var(--p); border-radius:var(--rf); display:inline-block }
.sec-more { font-size:13px; font-weight:600; color:var(--p); cursor:pointer; background:none; border:none; font-family:inherit }

/* ═══ SPINNER ═══ */
.spin { display:inline-block; width:20px; height:20px; border:2.5px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:sp .8s linear infinite }
@keyframes sp { to{transform:rotate(360deg)} }

/* Scrollbar */
::-webkit-scrollbar { width:4px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--olv); border-radius:var(--rf) }

/* Admin bar */
body.admin-bar #top-bar { top:32px }
@media (max-width:782px) { body.admin-bar #top-bar { top:46px } }