/* رادار القيمة العقارية — أخضر زمردي عميق + نحاسي، RTL، الهاتف أولاً */
:root {
  --bg: #f4f6f4;
  --surface: #ffffff;
  --border: #dde5e0;
  --text: #17211d;
  --text2: #5b6b64;
  --muted: #8a9992;
  --brand: #0d4d3d;
  --brand-2: #0a3b2f;
  --brass: #a9853a;
  --brass-2: #8f6f2f;
  --danger: #b3372e;
  --success: #1e7a52;
  --radius: 14px;
  --shadow: 0 4px 18px rgba(13, 77, 61, 0.08);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Segoe UI", Tahoma, "Noto Kufi Arabic", sans-serif;
  background: var(--bg); color: var(--text);
  font-size: 17px; line-height: 1.7;
}
#app { min-height: 100dvh; display: flex; flex-direction: column; }

/* الشريط العلوي */
.topbar {
  background: var(--brand); color: #fff;
  padding: 14px 16px padding-top: max(14px, env(safe-area-inset-top));
  padding: max(14px, env(safe-area-inset-top)) 16px 14px;
  display: flex; align-items: center; gap: 12px;
  position: sticky; top: 0; z-index: 20;
}
.topbar-mark {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  background: var(--brass); color: #fff; font-weight: 800; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
}
.topbar-title { font-weight: 700; flex: 1; }
.topbar .tagline { font-size: 12px; color: #cfe3db; display: block; font-weight: 400; }

main.page { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: 16px 14px calc(32px + env(safe-area-inset-bottom)); }

/* أزرار */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(135deg, #1e7a44 0%, var(--brand) 55%, var(--brand-2) 100%);
  color: #fff; border: none; border-radius: var(--radius);
  padding: 13px 20px; font-size: 16px; font-weight: 700; font-family: inherit;
  min-height: 46px; cursor: pointer; text-decoration: none;
  box-shadow: 0 4px 14px rgba(13, 77, 61, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  transition: filter 0.15s, transform 0.1s, box-shadow 0.15s;
}
.btn:hover { filter: brightness(1.12); box-shadow: 0 6px 18px rgba(13, 77, 61, 0.4); }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.btn.gold {
  background: linear-gradient(135deg, #d3a53f 0%, var(--brass) 100%);
  box-shadow: 0 4px 16px rgba(169, 133, 58, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.btn.gold:hover { filter: brightness(1.08); }
.btn.brass { background: var(--brass); }
.btn.brass:hover { background: var(--brass-2); }
.btn.ghost { background: transparent; color: var(--brand); border: 1.5px solid var(--brand); }
.btn.ghost:hover { background: rgba(13, 77, 61, 0.06); }
.btn.danger { background: var(--danger); }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* البطاقات */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px; margin-bottom: 14px;
}
.track-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.track-no { font-weight: 800; font-size: 18px; color: var(--brand); }
.badge { background: #e8eef0; color: var(--text2); border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.badge.report { background: #e7f0e9; color: var(--success); }
.badge.danger { background: #f7e4e2; color: var(--danger); }
/* توهج الحالة الحية في «متابعة طلبي» — قانون العائلة: أزرق = الدور عليك، أخضر = طلبك ماشي */
@keyframes pulseGlowGreen { 0%,100% { box-shadow: 0 0 0 3px rgba(13,77,61,.12); } 50% { box-shadow: 0 0 0 9px rgba(13,77,61,.26); } }
@keyframes pulseGlowBlue { 0%,100% { box-shadow: 0 0 0 3px rgba(46,111,216,.16); } 50% { box-shadow: 0 0 0 9px rgba(46,111,216,.32); } }
.badge.pulse { animation: pulseGlowGreen 2.4s ease-in-out infinite; }
.badge.pulse.urgent { animation: pulseGlowBlue 2.4s ease-in-out infinite; }
/* نبض هادئ لزر «تتبع طلبي» — توهج ذهبي + يكبر شوي */
@keyframes softPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(201,162,75,.30); transform: scale(1); }
  50% { box-shadow: 0 0 16px 4px rgba(201,162,75,.45); transform: scale(1.05); }
}
.pulse-soft { animation: softPulse 2.4s ease-in-out infinite; }
.hint { font-size: 13px; color: var(--muted); }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.detail-grid > div {
  background: #f7f9f8; border-radius: 10px; padding: 8px 12px; font-size: 14px; font-weight: 600;
}
.detail-grid span { display: block; font-size: 11.5px; color: var(--muted); font-weight: 400; }
.locked-note { background: #f7f9f8; border: 1px dashed var(--border); border-radius: 10px; padding: 10px 14px; font-size: 14px; color: var(--text2); }
.locked-note.ok { background: #e7f4ea; border: 1px solid #1e7a44; color: #14532d; }
.locked-note.alert { background: #fdecec; border: 1px solid #c0392b; color: #7f1d1d; }
.pdf-frame { width: min(92vw, 720px); height: min(78vh, 940px); background: #fff; border-radius: 12px; overflow: hidden; }
.pdf-frame iframe { width: 100%; height: 100%; border: none; }
.viewer-hint { margin: 10px 0 0; font-size: 13.5px; color: rgba(243, 236, 217, 0.85); text-align: center; }
.pdf-open-card { background: #fff; border-radius: 14px; padding: 26px 18px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.img-viewer .pdf-open-card { width: min(88vw, 420px); }
.pdf-open-icon {
  width: 64px; height: 64px; border-radius: 14px; background: #eef2f1; color: #c0392b;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; letter-spacing: .5px;
}
.pdf-open-title { margin: 2px 0 0; font-weight: 700; font-size: 17px; color: var(--text); }
.pdf-open-sub { margin: 0; font-size: 13.5px; color: var(--text2); line-height: 1.7; }

/* نماذج */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.input, .field input, .field select, .field textarea {
  width: 100%; border: 1.5px solid var(--border); border-radius: 10px;
  padding: 12px 14px; font-size: 16px; font-family: inherit; background: #fff; color: var(--text);
}
.input:focus, .field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand);
}
.invalid { border-color: var(--danger) !important; background: #fdf3f2; }
.err-banner {
  background: #f7e4e2; color: var(--danger); border-radius: 10px;
  padding: 12px 16px; font-weight: 700; margin-bottom: 14px;
}
.toast {
  position: fixed; bottom: calc(24px + env(safe-area-inset-bottom)); right: 50%; transform: translateX(50%);
  background: var(--danger); color: #fff; border-radius: 999px; padding: 12px 24px;
  font-size: 16px; font-weight: 700; z-index: 90; box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  max-width: 90vw; text-align: center;
}
.toast.ok { background: var(--success); }

/* الشريط الزمني */
.timeline { list-style: none; margin: 14px 0 0; padding: 0; display: flex; justify-content: space-between; position: relative; }
.timeline::before { content: ""; position: absolute; top: 7px; right: 12px; left: 12px; height: 2px; background: var(--border); }
.tl-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--border); display: block; margin: 0 auto 6px; position: relative; z-index: 1; }
li.done .tl-dot, li.current .tl-dot { background: var(--brand); }
li.current .tl-dot { box-shadow: 0 0 0 4px rgba(13, 77, 61, 0.15); animation: pulseGlowGreen 2.4s ease-in-out infinite; }
.timeline.urgent li.current .tl-dot { animation: pulseGlowBlue 2.4s ease-in-out infinite; }
.tl-label { font-size: 10.5px; color: var(--text2); display: block; text-align: center; }
.timeline li { flex: 1; position: relative; }

/* الصور */
.thumb { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); cursor: zoom-in; }
.report-preview img { max-width: 100%; border-radius: 12px; display: block; }
.report-preview iframe { width: 100%; height: 420px; border: 1px solid var(--border); border-radius: 12px; }
.img-viewer {
  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
.img-viewer img { max-width: 100%; max-height: calc(100dvh - 90px); border-radius: 10px; }
.viewer-close {
  margin-top: 14px; background: #fff; color: #111; border: none; border-radius: 999px;
  padding: 10px 30px; font-size: 15px; font-weight: 700; min-height: 44px; cursor: pointer;
}
.site-flag {
  display: inline-block; margin-inline-start: 8px; background: var(--danger); color: #fff;
  border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 700;
}

/* قفل الموظف */
.lock-gate { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.lock-card {
  width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; padding: 28px 22px; display: flex; flex-direction: column; gap: 12px;
  text-align: center; box-shadow: var(--shadow);
}
.lock-card .topbar-mark { align-self: center; }
.lock-card h2 { margin: 4px 0 0; color: var(--brand); }
.lock-err { color: var(--danger); font-weight: 700; margin: 0; }
.lock-reset { background: none; border: none; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: 13px; margin-top: 4px; font-family: inherit; }

/* لوحة الموظف */
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.metric { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; text-align: center; }
.metric b { display: block; font-size: 24px; color: var(--brand); }
.metric span { font-size: 12px; color: var(--muted); }
.filter-row { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 8px; margin-bottom: 8px; }
.filter-row button {
  flex: none; border: 1.5px solid var(--border); background: #fff; color: var(--text2);
  border-radius: 999px; padding: 7px 14px; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.filter-row button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.filter-row button.hot { border-color: var(--brass); color: var(--brass); box-shadow: 0 0 0 2px rgba(169, 133, 58, .15); }
.filter-row button.on.hot { background: var(--brass); border-color: var(--brass); color: #fff; }
.search-row { display: flex; gap: 8px; margin-bottom: 14px; }
.search-row input { flex: 1; }
.fee-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.fee-presets button {
  border: 1.5px solid var(--border); background: #fff; color: var(--brand);
  border-radius: 999px; padding: 7px 14px; font-weight: 700; cursor: pointer; font-size: 14px; font-family: inherit;
}
.fee-presets button.on { background: var(--brass); border-color: var(--brass); color: #fff; }

/* الرئيسية */
.hero { background: var(--brand); color: #fff; border-radius: 18px; padding: 26px 20px; text-align: center; margin-bottom: 16px; }
.hero h1 { margin: 0 0 6px; font-size: 24px; }
.hero p { margin: 0 0 18px; color: #cfe3db; font-size: 14px; }
.home-grid { display: grid; gap: 12px; }
.home-grid .btn { width: 100%; }

footer.foot { text-align: center; padding: 18px; color: var(--muted); font-size: 12px; }
.nav-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.nav-tabs a { flex: 1; text-align: center; padding: 11px; border-radius: var(--radius); font-weight: 700; text-decoration: none; color: var(--text2); background: #fff; border: 1px solid var(--border); }
.nav-tabs a.on { background: var(--brand); color: #fff; border-color: var(--brand); }

/* نظام الحسابات — المدير والموظفون */
.topbar-user { color: #fff; opacity: .85; font-size: .8rem; margin-inline-start: auto; }
.admin-panel h3 { margin: 0 0 4px; }
.admin-panel .input { margin: 8px 0; }
.user-row { display: flex; flex-direction: column; gap: 6px; }
.user-row-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.user-row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.user-row-actions .btn { padding: 8px 14px; min-height: 0; font-size: .85rem; }
.role-badge { font-size: .72rem; background: var(--muted-bg, #eee); color: var(--ink, #333); border-radius: 999px; padding: 3px 10px; }
.role-badge.role-admin { background: #14532d; color: #fff; }
.role-badge.role-off { background: #7f1d1d; color: #fff; }
.reset-box { display: flex; flex-direction: column; gap: 6px; background: var(--muted-bg, #f6f5f2); border-radius: 12px; padding: 10px; }
.audit-row { display: flex; flex-direction: column; gap: 4px; }
.audit-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.audit-action { font-size: .82rem; color: var(--brand, #14532d); font-weight: 600; }
.audit-req, .audit-details { font-size: .85rem; color: var(--muted, #666); }
.audit-ts { font-size: .75rem; color: var(--muted, #999); }

/* رحلة الطلب — إحساس تطبيق */
.wiz-progress { height: 6px; background: rgba(0,0,0,.08); }
.wiz-bar { height: 100%; background: linear-gradient(90deg, var(--brand), #1a6b52); transition: width .3s; }
.wiz-count { text-align: center; font-size: .78rem; color: var(--muted); margin: 10px 0 0; }
.wiz-title { margin: 0 0 6px; font-size: 1.35rem; }
.wiz-card { display: flex; flex-direction: column; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }.mh-cat-row .chip{flex:1 1 0;min-width:0;text-align:center;height:44px;display:flex;align-items:center;justify-content:center;white-space:nowrap;font-size:.85rem;padding:8px 6px}
.chip { border: 1.5px solid rgba(13, 77, 61, 0.45); color: var(--brand); background: rgba(13, 77, 61, 0.05); border-radius: 999px; padding: 10px 18px; font-size: .95rem; min-height: 0; transition: all 0.15s; }
.chip.on {
  background: linear-gradient(135deg, #1e7a44, var(--brand-2)); color: #fff;
  border-color: transparent; font-weight: 700;
  box-shadow: 0 4px 12px rgba(13, 77, 61, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.doc-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1.5px dashed var(--brand); border-radius: 14px; padding: 14px; margin: 8px 0; background: #fff; min-height: 0; }
.doc-row.done { border-style: solid; border-color: var(--success); background: #f2faf5; }
.doc-name { font-size: .92rem; word-break: break-word; }
.doc-act { font-size: .8rem; color: var(--brand); white-space: nowrap; }
.wiz-review { margin-bottom: 10px; }
.rev-row { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed rgba(0,0,0,.08); font-size: .9rem; }
.rev-row:last-child { border-bottom: none; }
.rev-row span { color: var(--muted); }
.wiz-btns { margin-top: 14px; }

/* الرئيسية — مطابقة للأصل */
.home { padding-top: max(28px, env(safe-area-inset-top)); }
.hero {
  background: linear-gradient(160deg, var(--brand) 0%, #0a2d21 75%);
  border-radius: 24px; padding: 34px 24px 30px; color: #f3ecd9;
  text-align: center; position: relative; overflow: hidden; box-shadow: var(--shadow);
}
.hero::after {
  content: ""; position: absolute; top: -70px; left: -70px; width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(201, 162, 75, 0.28), transparent 65%); pointer-events: none;
}
.mark {
  width: 88px; height: 88px; margin: 0 auto 14px; border-radius: 50%;
  background: rgba(243, 236, 217, 0.09); border: 1.5px solid rgba(201, 162, 75, 0.6);
  display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; color: #f3ecd9;
}
.hero h1 { margin: 0; font-size: 25px; position: relative; z-index: 1; }
.hero .tagline { color: var(--brass); font-weight: 600; margin: 4px 0 10px; position: relative; z-index: 1; }
.hero-sub { margin: 0; color: rgba(243, 236, 217, 0.82); font-size: 15px; position: relative; z-index: 1; }
.actions { display: grid; gap: 12px; margin-top: 20px; }
.action-card:not(.primary) { border-color: rgba(169, 133, 58, 0.45); }
.action-card:not(.primary) .action-icon { color: #9c7c2f; }
.action-card {
  display: flex; align-items: center; gap: 16px; text-align: right;
  background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; min-height: 84px; cursor: pointer; font: inherit; color: inherit;
  width: 100%; transition: transform 0.15s ease; box-shadow: var(--shadow); text-decoration: none;
}
.action-card:active { transform: scale(0.985); }
.action-card.primary {
  background: linear-gradient(135deg, #1e7a44 0%, var(--brand) 55%, var(--brand-2) 100%);
  color: #fff; border-color: transparent;
  box-shadow: 0 6px 20px rgba(13, 77, 61, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.action-icon {
  flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(211, 165, 63, 0.16), rgba(169, 133, 58, 0.1));
  display: flex; align-items: center; justify-content: center; color: #9c7c2f;
  border: 1px solid rgba(169, 133, 58, 0.3);
}
.action-card.primary .action-icon { background: rgba(243, 236, 217, 0.12); color: var(--brass); }
.action-text { display: flex; flex-direction: column; align-items: flex-start; }
.action-title { font-size: 19px; font-weight: 700; }
.action-sub { font-size: 14px; color: var(--text2); }
.action-card.primary .action-sub { color: rgba(243, 236, 217, 0.75); }
.home-emp { display: block; text-align: center; margin: 18px auto 4px; color: var(--muted); font-size: .85rem; }
.fineprint { text-align: center; color: var(--muted); font-size: 12.5px; margin-top: 14px; }

/* شريط التثبيت */
#install-bar {
  position: fixed; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: linear-gradient(135deg, #1e7a44, var(--brand-2)); color: #f3ecd9;
  border-radius: 16px; padding: 12px 16px;
  box-shadow: 0 8px 24px rgba(10, 59, 47, 0.4);
}
#install-bar span { font-size: .85rem; line-height: 1.4; }
#install-bar button {
  flex: 0 0 auto; border: none; border-radius: 999px; padding: 10px 20px; min-height: 0;
  background: linear-gradient(135deg, #d3a53f, var(--brass)); color: #fff;
  font: inherit; font-weight: 700; cursor: pointer;
}

/* لمسات جذب الانتباه */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 6px 20px rgba(13, 77, 61, 0.35), 0 0 0 0 rgba(30, 122, 68, 0.45); }
  50% { box-shadow: 0 6px 24px rgba(13, 77, 61, 0.5), 0 0 0 10px rgba(30, 122, 68, 0); }
}
.action-card.primary { animation: pulse-glow 2.4s ease-in-out infinite; }

@keyframes gold-glow {
  0%, 100% { box-shadow: 0 4px 16px rgba(169, 133, 58, 0.45), 0 0 0 0 rgba(211, 165, 63, 0.5); }
  50% { box-shadow: 0 4px 20px rgba(169, 133, 58, 0.6), 0 0 0 9px rgba(211, 165, 63, 0); }
}
.btn.gold { animation: gold-glow 2s ease-in-out infinite; }

/* لمعة عابرة تمسح الزر كل بضع ثوان */
@keyframes shine {
  0% { transform: translateX(-160%) skewX(-18deg); }
  55%, 100% { transform: translateX(260%) skewX(-18deg); }
}
.btn, .action-card.primary { position: relative; overflow: hidden; }
.btn::after, .action-card.primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  animation: shine 3.2s ease-in-out infinite;
}
.action-card.primary::after { animation-duration: 3.8s; }

/* الصفحة الواحدة */
.form-sec { margin-bottom: 14px; }
/* ترويسة النظام الصغيرة — نموذج التقدير */
.topbar-slim { padding: max(8px, env(safe-area-inset-top)) 14px 8px; gap: 8px; }
.topbar-slim .topbar-mark-slim { width: 28px; height: 28px; border-radius: 8px; font-size: 14px; }
.topbar-slim .topbar-title-slim { font-size: 0.95rem; }
/* السلسلة المتتالية: الكل ظاهر — القادم مطفي ومقفول، والمطلوب الآن متوهج */
.sec-dim { opacity: 0.42; pointer-events: none; filter: grayscale(0.35); }
/* قانون العائلة (٢٨/٩ بطلب صاحب المكتب): الأزرق = «الدور عليك» — لون مميز واضح يعرفه المواطن فوراً */
.form-sec.sec-glow { border: 2px solid #2e6fd8; animation: secGlowBlue 2.4s ease-in-out infinite; position: relative; }
@keyframes secGlowBlue {
  0%, 100% { box-shadow: 0 0 0 4px rgba(46, 111, 216, 0.14); }
  50% { box-shadow: 0 0 0 8px rgba(46, 111, 216, 0.30); }
}
.req-badge {
  position: absolute; top: -12px; right: 14px;
  background: #2e6fd8; color: #fff;
  font-size: 0.78rem; font-weight: 800;
  padding: 4px 14px; border-radius: 999px;
  box-shadow: 0 2px 10px rgba(46, 111, 216, 0.40);
}
/* الخانة المقفولة داخل قسم الموقع — بانتظار اكتمال يلي قبلها (٢٨/٩) */
.field.fld-locked { opacity: 0.45; pointer-events: none; }
.sec-title { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.05rem; color: var(--brand); }
.sec-num {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #d3a53f, var(--brass)); color: #fff; font-size: 0.95rem;
}


/* الأزرار الثانوية بهوية ذهبية */
.btn.ghost {
  background: #fff; color: #9c7c2f;
  border: 1.5px solid rgba(169, 133, 58, 0.55);
  box-shadow: 0 2px 8px rgba(169, 133, 58, 0.12);
}
.btn.ghost:hover { background: rgba(211, 165, 63, 0.08); }

.thumb.pdf-thumb {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 52px; border-radius: 12px;
  background: rgba(211, 165, 63, 0.1); border: 1.5px solid rgba(169, 133, 58, 0.4);
  color: #9c7c2f; font-weight: 700; text-decoration: none; font-size: .9rem;
}

/* الشريط العلوي لقسم المكتب — سطران مرتبان */
.admin-topbar { flex-wrap: wrap; gap: 10px; }
.tb-row1 { display: flex; align-items: center; gap: 10px; width: 100%; }
.tb-col { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-topbar .topbar-title { font-size: 1.05rem; white-space: nowrap; }
.admin-topbar .topbar-user { font-size: .78rem; margin: 0; }
.tb-row2 { display: flex; gap: 8px; width: 100%; flex-wrap: wrap; }
.tb-nav {
  flex: 1 1 auto; text-align: center; border-radius: 10px; padding: 9px 10px; min-height: 0;
  border: 1.5px solid rgba(201, 162, 75, 0.7); color: #f3ecd9;
  background: rgba(243, 236, 217, 0.08);
  font: inherit; font-weight: 700; font-size: .88rem; text-decoration: none; cursor: pointer;
  white-space: nowrap;
}
.tb-nav:active { background: rgba(243, 236, 217, 0.18); }

/* ---------- صفحة العروض والخدمات ---------- */
.offer-card { position: relative; padding: 16px; margin-bottom: 12px; border: 1px solid rgba(13, 77, 61, 0.14); }
.offer-badge { position: absolute; top: 12px; left: 12px; background: #c9a24b; color: #fff; font-size: .75rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.offer-title { margin: 0 0 6px; color: #0d4d3d; font-size: 1.05rem; }
.offer-desc { margin: 0 0 10px; color: #4a5a53; font-size: .92rem; line-height: 1.7; }
.offer-price { margin: 0; color: #0d4d3d; font-weight: 700; font-size: .95rem; background: #eef3f0; display: inline-block; padding: 4px 12px; border-radius: 8px; }

/* ---------- الرئيسية المدمجة — السوق أولاً + الزر النابض (قرار 26/9) ---------- */
.mh-hero{background:linear-gradient(135deg,#0d4d3d,#143327);color:#faf7f0;padding:14px 14px 14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;border-radius:0 0 18px 18px;box-shadow:0 2px 12px #14332740}.mh-hero-row{display:flex;align-items:center;gap:12px;flex:1 1 100%}.mh-hero .mh-val{margin:0;flex:1 1 100%}
.mh-hero-mark{width:52px;height:52px;border-radius:50%;overflow:hidden;flex-shrink:0;border:2px solid #c9a24b66}
.mh-hero-mark img{width:100%;height:100%;object-fit:cover}
.mh-hero h1{font-size:1.12rem;color:#c9a24b;margin:0}
.mh-tagline{font-size:.82rem;color:#e8e2d2;margin:2px 0 0;font-weight:600}
.mh-controls{padding:12px 14px 0}
.mh-row{display:flex;gap:8px;align-items:center}.mh-row .chip,.mh-row .mh-city{flex:1 1 0;min-width:0;box-sizing:border-box;height:44px;text-align:center;display:flex;align-items:center;justify-content:center;font-size:.9rem}
.mh-city{border:1.5px solid rgba(13,77,61,.45);background:rgba(13,77,61,.05);padding:8px 10px;border-radius:999px;font-family:inherit;font-size:.95rem;min-height:44px;color:var(--brand)}
.mh-count{font-size:.82rem;color:#7a8a7e;font-weight:700;margin:8px 16px 10px}
.mh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:13px;padding:0 14px}
.mh-loading,.mh-empty{grid-column:1/-1;text-align:center;color:#7a8a7e;padding:36px 12px;font-size:.95rem;line-height:1.9}
.mh-card{background:#fff;border-radius:15px;overflow:hidden;box-shadow:0 2px 12px #22301f14;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}
.mh-card:hover{transform:translateY(-3px);box-shadow:0 6px 18px #22301f24}
.mh-card-img{position:relative;aspect-ratio:4/3;background:#e8e2d2 center/cover no-repeat}
.mh-badge{position:absolute;top:9px;right:9px;padding:4px 12px;border-radius:999px;font-size:.74rem;font-weight:800;color:#faf7f0;background:#0d4d3d}
.mh-badge.sold{background:#6b6b6b}
.mh-kind{position:absolute;bottom:9px;right:9px;background:#143327e0;color:#c9a24b;padding:3px 11px;border-radius:999px;font-size:.74rem;font-weight:700}
.mh-card-body{padding:11px 13px}
.mh-card-title{font-weight:800;font-size:.98rem;margin-bottom:3px;color:#22301f}
.mh-card-meta{font-size:.8rem;color:#7a8a7e;margin-bottom:7px}
.mh-card-price{color:#0d4d3d;font-weight:800;font-size:1.15rem}
.mh-links{display:flex;gap:10px;justify-content:center;padding:18px 14px 6px;flex-wrap:wrap}
.mh-modal{position:fixed;inset:0;background:#14332799;display:flex;align-items:center;justify-content:center;padding:12px;z-index:50}
.mh-modal-card{position:relative;background:#faf7f0;border-radius:17px;max-width:620px;width:100%;min-width:0;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow-y:auto;box-shadow:0 18px 50px #0000004d;padding:15px}
.mh-modal-x{position:sticky;top:0;float:left;margin-left:6px;background:#14332722;border:none;color:#0d4d3d;width:36px;height:36px;border-radius:50%;font-size:1.05rem;cursor:pointer;z-index:2}
.mh-gallery{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px}
.mh-gallery img{width:230px;aspect-ratio:4/3;object-fit:cover;border-radius:11px;flex-shrink:0;background:#e8e2d2}
.mh-price{color:#0d4d3d;font-size:1.35rem;font-weight:800;margin:4px 0}
.mh-title{font-size:1.05rem;margin:0 0 8px;color:#22301f}
.mh-specs{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}
.mh-spec{background:#fff;border:1px solid #e5ddc9;border-radius:10px;padding:7px 11px;font-size:.84rem;color:#7a8a7e}
.mh-spec b{color:#0d4d3d}
.mh-desc{background:#fff;border-radius:11px;padding:12px;margin:10px 0;font-size:.92rem;line-height:1.9;white-space:pre-wrap;color:#22301f}
.mh-loc-label{font-weight:800;color:#0d4d3d;margin:12px 2px 8px;font-size:.92rem}
.mh-map{height:230px;border-radius:12px;border:1px solid #d8d2c2;background:#dfe7e3;z-index:1}
.leaflet-container.mh-map{touch-action:none}
.mh-wa{display:block;width:100%;background:#25d366;color:#fff;font-family:inherit;font-weight:800;padding:14px;border:none;border-radius:12px;font-size:1rem;min-height:48px;cursor:pointer;margin-top:12px}
.mh-full-link{display:block;text-align:center;margin-top:10px;background:#fff;border:1px dashed #c9a24b;border-radius:10px;padding:10px 12px;font-size:.84rem;color:#0d4d3d;text-decoration:none;word-break:break-all}
.mh-fab{position:fixed;bottom:22px;left:18px;background:linear-gradient(135deg,#c9a24b,#a8842f);color:#143327;font-weight:800;font-size:1rem;padding:15px 24px;border-radius:999px;border:2px solid #fff;z-index:40;cursor:pointer;font-family:inherit;overflow:hidden;animation:mh-pulse 2.2s ease-in-out infinite;box-shadow:0 4px 14px #14332755}
.mh-fab::after{content:"";position:absolute;top:0;bottom:0;width:45%;background:linear-gradient(90deg,transparent,#ffffff66,transparent);animation:mh-shine 3.2s ease-in-out infinite}
.mh-fab:active{transform:scale(.96)}
@keyframes mh-pulse{0%,100%{box-shadow:0 4px 14px #14332755,0 0 0 0 #d3a53f66}50%{box-shadow:0 6px 20px #14332766,0 0 0 12px #d3a53f00}}
@keyframes mh-shine{0%{transform:translateX(-160%) skewX(-18deg)}55%,100%{transform:translateX(260%) skewX(-18deg)}}
.leaflet-container{font-family:inherit}
.mh-pin{background:none;border:none}

/* الشريط الذهبي للتقدير — الرئيسية المدمجة (نفس روح واجهة السوق) */
.mh-val{display:block;text-align:center;margin:8px 10px 0;padding:9px 14px;border-radius:999px;font-weight:800;font-size:.95rem;color:#143327;text-decoration:none;background:linear-gradient(120deg,#a8842f,#e2c06a,#f6e3a1,#c9a24b,#a8842f);background-size:300% 100%;border:2px solid #ffffffee;box-shadow:0 4px 14px #14332755;animation:val-shift 2.8s linear infinite,val-pulse 2.2s ease-in-out infinite}
@keyframes val-shift{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@keyframes val-pulse{0%,100%{box-shadow:0 4px 14px #14332755,0 0 0 0 #ffffff99}50%{box-shadow:0 4px 14px #14332755,0 0 0 10px #ffffff00}}