/* ============================================================
   نیازچی v6.2 — Modern Premium UI
   Mobile-first · Glassmorphism · Soft shadows · Smooth motion
   ============================================================ */

/* Fonts are loaded via <link> in includes/header.php (preconnect + stylesheet)
   to avoid render-blocking @import and improve LCP. */

:root {
  /* Brand */
  --brand: #e11d48;            /* rose-600 — joyful, Afghan-friendly */
  --brand-2: #f43f5e;
  --brand-dark: #be123c;
  --brand-grad: linear-gradient(135deg, #e11d48 0%, #f59e0b 100%);
  --accent-blue: #2563eb;
  --accent-green: #10b981;
  --accent-amber: #f59e0b;

  /* Light theme */
  --bg: #fafbfc;
  --bg-2: #f1f3f6;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --surface-glass: rgba(255,255,255,.78);
  --text: #0f172a;
  --text-2: #475569;
  --muted: #94a3b8;
  --border: #e5e7eb;
  --border-strong: #d1d5db;
  --ring: rgba(225,29,72,.18);

  --primary: var(--brand);
  --primary-text: #fff;
  --danger: #dc2626;
  --warn: #f59e0b;
  --ok: #10b981;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(15,23,42,.05);
  --shadow-sm: 0 2px 8px -2px rgba(15,23,42,.08), 0 1px 3px rgba(15,23,42,.04);
  --shadow-md: 0 10px 30px -12px rgba(15,23,42,.18), 0 4px 10px -4px rgba(15,23,42,.08);
  --shadow-lg: 0 24px 60px -20px rgba(15,23,42,.25);
  --shadow-brand: 0 12px 30px -10px rgba(225,29,72,.45);

  /* Radii */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 999px;

  --space: 14px;
}

[data-theme="dark"], body.theme-dark {
  --bg: #0a0e14;
  --bg-2: #11161f;
  --surface: #151b26;
  --surface-2: #1c2330;
  --surface-glass: rgba(21,27,38,.7);
  --text: #f1f5f9;
  --text-2: #cbd5e1;
  --muted: #94a3b8;
  --border: #232b3a;
  --border-strong: #2e3849;
  --ring: rgba(244,63,94,.22);
  --shadow-sm: 0 2px 8px -2px rgba(0,0,0,.5);
  --shadow-md: 0 10px 30px -12px rgba(0,0,0,.55);
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.6);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin:0; padding:0; min-height:100%;
  background: var(--bg); color: var(--text);
  font-family: 'Vazirmatn', 'Inter', Tahoma, "Segoe UI", system-ui, sans-serif;
  font-size: 14.5px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body { background:
  radial-gradient(1200px 400px at 50% -200px, rgba(225,29,72,.10), transparent 60%),
  var(--bg);
  background-attachment: fixed;
}
body.lang-en { font-family: 'Inter', system-ui, sans-serif; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--brand); color: #fff; }

.container { width:100%; max-width: 1180px; margin:0 auto; padding: 0 14px; }

/* ============================================================
   APP BAR — glass, sticky, animated
   ============================================================ */
.app-bar {
  position: sticky; top: 0; z-index: 40;
  background: var(--surface-glass);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.app-bar-inner {
  display:flex; align-items:center; gap:10px;
  padding: 10px 14px; max-width: 1180px; margin: 0 auto;
}
.app-logo {
  font-weight: 900; font-size: 20px; letter-spacing: -.5px;
  background: var(--brand-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  white-space: nowrap; padding: 4px 2px;
}
.app-search { flex: 1; position: relative; }
.app-search input {
  width: 100%; padding: 11px 40px 11px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text); font-size: 14px;
  transition: all .2s ease;
  box-shadow: var(--shadow-xs);
}
.app-search input:focus { outline:none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring); background: var(--surface); }
.app-search .search-icon { position:absolute; inset-inline-end: 14px; top:50%; transform: translateY(-50%); opacity:.55; font-size: 15px; pointer-events:none; }
body.lang-en .app-search input { padding: 11px 16px 11px 40px; }

.app-bar-tools { display:flex; gap: 2px; align-items:center; }
.icon-btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 38px; height: 38px; padding: 0 10px;
  border-radius: var(--r-full); background: transparent;
  color: var(--text); border: 0; cursor: pointer;
  font-size: 16px; transition: all .18s ease; position: relative;
}
.icon-btn:hover { background: var(--surface-2); transform: translateY(-1px); }
.icon-btn:active { transform: scale(.94); }
.lang-mini {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-full);
  padding: 5px 10px; font-size: 11px; font-weight: 600;
}
.header-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid var(--brand); }
.notif-dot {
  position:absolute; top: 2px; inset-inline-end: 2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--brand-grad); color: #fff; border-radius: var(--r-full);
  font-size: 10px; font-weight: 800;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-brand);
  animation: pop .25s ease;
}
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ============================================================
   MAIN
   ============================================================ */
.main-content { padding: 16px 14px 90px; min-height: 70vh; }
.has-bottom-nav { padding-bottom: 100px; }

/* Section headers */
h1, h2, h3 { letter-spacing: -.4px; margin: 0 0 12px; }
h1 { font-size: 22px; font-weight: 800; }
h2 { font-size: 18px; font-weight: 700; }
.section-head { display:flex; align-items:center; justify-content:space-between; margin: 18px 0 10px; }
.section-head h2 { margin: 0; }
.section-head a { color: var(--brand); font-weight: 600; font-size: 13px; }

/* ============================================================
   CITY BAR + QUICK FILTERS (chips)
   ============================================================ */
.city-bar { display:flex; align-items:center; gap: 8px; margin: 6px 0 14px; flex-wrap: wrap; }
.city-pill, .chip {
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); padding: 8px 14px;
  border-radius: var(--r-full); cursor: pointer;
  font-size: 13px; font-weight: 600;
  transition: all .15s ease; box-shadow: var(--shadow-xs);
  display: inline-flex; align-items: center; gap: 6px;
}
.city-pill:hover, .chip:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
.chip.active { background: var(--brand-grad); color: #fff; border-color: transparent; box-shadow: var(--shadow-brand); }
.chip .x { opacity: .8; font-size: 11px; }

.filter-row { display:flex; gap: 6px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; }
.filter-row::-webkit-scrollbar { display: none; }

/* City modal */
.city-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:60; align-items:flex-end; justify-content:center; backdrop-filter: blur(6px); }
.city-modal.open { display:flex; animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
.city-modal-body { background:var(--surface); border-top-left-radius:24px; border-top-right-radius:24px; width:100%; max-width:560px; max-height:82vh; display:flex; flex-direction:column; padding:18px; animation: slideUp .25s ease; box-shadow: var(--shadow-lg); }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
.city-modal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.city-search { width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:var(--r); background:var(--surface-2); color:var(--text); margin-bottom:12px; }
.city-list { list-style:none; padding:0; margin:0; overflow-y:auto; }
.city-list li { border-bottom:1px solid var(--border); }
.city-item { display:flex; justify-content:space-between; align-items:center; padding:14px 8px; }
.city-item.is-active { color:var(--brand); font-weight:700; }

/* ============================================================
   CATEGORY GRID — colorful pill icons
   ============================================================ */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 10px; padding: 8px 4px 22px; }
.cat-item { display:flex; flex-direction:column; align-items:center; gap: 8px; color: var(--text); transition: transform .15s ease; }
.cat-item:hover { transform: translateY(-3px); }
.cat-icon {
  width: 58px; height: 58px; border-radius: var(--r-lg);
  display:flex; align-items:center; justify-content:center;
  font-size: 26px; box-shadow: var(--shadow-sm);
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border);
  transition: all .2s ease;
}
.cat-item:hover .cat-icon { box-shadow: var(--shadow-md); border-color: var(--brand); }
.cat-label { font-size: 12px; font-weight: 600; text-align:center; }

/* ============================================================
   AD CARD — premium
   ============================================================ */
.ad-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .ad-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .ad-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .ad-grid { grid-template-columns: repeat(4, 1fr); } }

.ad-card {
  display:flex; gap: 12px; padding: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  transition: all .2s ease; position: relative; overflow: hidden;
}
.ad-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-strong); }
.ad-thumb {
  width: 110px; height: 110px; flex-shrink: 0;
  border-radius: var(--r); overflow: hidden;
  background: var(--surface-2);
  display:flex; align-items:center; justify-content:center;
  color: var(--muted); font-size: 28px; position: relative;
}
.ad-thumb img { width:100%; height:100%; object-fit: cover; transition: transform .35s ease; }
.ad-card:hover .ad-thumb img { transform: scale(1.05); }
.ad-body { flex:1; min-width: 0; display:flex; flex-direction:column; gap: 6px; }
.ad-title { font-size: 14.5px; font-weight: 700; color: var(--text); margin: 0; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ad-meta { display:flex; gap: 8px; font-size: 12px; color: var(--muted); align-items: center; flex-wrap: wrap; }
.ad-meta .dot { width: 3px; height: 3px; border-radius:50%; background: var(--muted); }
.ad-price { font-weight: 800; color: var(--brand); font-size: 15px; margin-top: auto; }
.ad-price .free { color: var(--ok); }

.badge {
  display:inline-flex; align-items:center; gap: 4px;
  padding: 3px 8px; border-radius: var(--r-full);
  font-size: 11px; font-weight: 700;
  background: var(--surface-2); color: var(--text-2);
}
.badge-featured { background: var(--brand-grad); color: #fff; box-shadow: var(--shadow-brand); }
.badge-verified { background: rgba(16,185,129,.12); color: var(--ok); }
.badge-urgent { background: rgba(245,158,11,.15); color: var(--accent-amber); }
.badge-new { background: rgba(37,99,235,.12); color: var(--accent-blue); }

.ad-card .badge-floating { position:absolute; top: 10px; inset-inline-end: 10px; z-index: 2; }

/* Grid card (when used) */
.ad-card.card-grid { flex-direction: column; }
.ad-card.card-grid .ad-thumb { width: 100%; height: 180px; }

/* ============================================================
   FORMS — beautiful
   ============================================================ */
.form-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow-sm);
  max-width: 520px; margin: 24px auto;
}
.form-card h1, .form-card h2 { margin-top: 0; }
.form-group { margin-bottom: 14px; }
.form-group label { display:block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.form-group .hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
input[type=text], input[type=tel], input[type=email], input[type=password], input[type=number], input[type=search], input[type=url], select, textarea {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: var(--r);
  background: var(--surface-2); color: var(--text);
  transition: all .15s ease; box-shadow: var(--shadow-xs);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring); background: var(--surface); }
textarea { min-height: 110px; resize: vertical; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap: 8px;
  padding: 11px 20px; border-radius: var(--r);
  background: var(--brand-grad); color: #fff; border: 0;
  font-weight: 700; cursor: pointer; transition: all .15s ease;
  box-shadow: var(--shadow-brand); font-size: 14px;
}
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn:active { transform: scale(.97); }
.btn.btn-ghost { background: var(--surface-2); color: var(--text); box-shadow: none; border: 1px solid var(--border); }
.btn.btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn.btn-danger { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.btn.btn-ok { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 12px 30px -10px rgba(16,185,129,.45); }
.btn.btn-block { width: 100%; }
.btn.btn-sm { padding: 7px 12px; font-size: 12px; border-radius: var(--r-sm); }

/* Alerts */
.alert { padding: 12px 14px; border-radius: var(--r); margin: 10px 0; font-size: 13px; border: 1px solid; }
.alert-error { background: rgba(220,38,38,.08); border-color: rgba(220,38,38,.3); color: var(--danger); }
.alert-ok    { background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.3); color: var(--ok); }
.alert-warn  { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.3); color: var(--accent-amber); }
.alert-info  { background: rgba(37,99,235,.08); border-color: rgba(37,99,235,.3); color: var(--accent-blue); }

/* ============================================================
   VIEW PAGE — premium hero
   ============================================================ */
.view-hero {
  background: var(--surface); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-md);
  margin-bottom: 16px;
}
.view-gallery { position: relative; background: #000; aspect-ratio: 4/3; max-height: 480px; display:flex; align-items:center; justify-content:center; overflow: hidden; }
.view-gallery img { width:100%; height:100%; object-fit: contain; }
.view-info { padding: 18px; }
.view-title { font-size: 22px; font-weight: 800; margin: 0 0 10px; }
.view-price { font-size: 26px; font-weight: 900; color: var(--brand); margin: 8px 0 14px; }
.view-desc { color: var(--text-2); line-height: 1.8; white-space: pre-line; }

.share-row { display:flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.share-btn {
  display:inline-flex; align-items:center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-full);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font-size: 13px; font-weight: 600;
  transition: all .15s ease;
}
.share-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.share-wa { color: #25d366; border-color: rgba(37,211,102,.3); }
.share-tg { color: #229ed9; border-color: rgba(34,158,217,.3); }
.share-copy { color: var(--text-2); }

/* Seller card */
.seller-card { background: var(--surface-2); border-radius: var(--r); padding: 14px; display:flex; gap: 12px; align-items:center; margin: 14px 0; }
.seller-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--brand-grad); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:18px; }
.seller-avatar img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.seller-name { font-weight: 700; }
.seller-meta { font-size: 12px; color: var(--muted); }

/* ============================================================
   CHAT — Telegram-style (v7.3)
   ============================================================ */
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* full-screen chat shell (app-bar + bottom-nav are hidden in a thread) */
/* full-bleed wrapper for the chat page */
.main-content.chat-page { padding:0 !important; margin:0; max-width:100%; min-height:0; }
.chat-layout { display:flex; height: 100vh; height: 100dvh; background: var(--bg, #eceef2); }
[data-theme="dark"] .chat-layout { background:#0e1621; }
/* list view keeps room for the bottom nav */
.chat-layout.show-list { height: calc(100vh - 66px); height: calc(100dvh - 66px); }
@media (min-width: 900px) { .chat-layout.show-list { height: 100dvh; } }

/* ----- conversation list ----- */
.chat-list { width: 100%; max-width: 420px; flex-shrink:0; overflow-y:auto;
  background: var(--surface,#fff); border-inline-end:1px solid var(--border); }
[data-theme="dark"] .chat-list { background:#17212b; border-color:#0e1621; }
.chat-list-head { font-size:18px; font-weight:800; padding:16px 16px 10px; position:sticky; top:0;
  background: var(--surface,#fff); z-index:2; }
[data-theme="dark"] .chat-list-head { background:#17212b; }
.chat-list-item { display:flex; gap:12px; align-items:center; padding:10px 14px; text-decoration:none;
  color:inherit; border-bottom:1px solid rgba(0,0,0,.04); }
[data-theme="dark"] .chat-list-item { border-color:rgba(255,255,255,.05); }
.chat-list-item:hover, .chat-list-item.active { background:rgba(59,130,246,.08); }
.cli-avatar { position:relative; width:52px; height:52px; border-radius:50%; flex-shrink:0; overflow:visible;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:20px; color:#fff;
  background:linear-gradient(135deg,#3B82F6,#8B5CF6); }
.cli-avatar img { width:52px; height:52px; border-radius:50%; object-fit:cover; }
.online-dot { position:absolute; bottom:1px; inset-inline-end:1px; width:13px; height:13px;
  border-radius:50%; background:#22c55e; border:2px solid var(--surface,#fff); }
[data-theme="dark"] .online-dot { border-color:#17212b; }
.cli-body { flex:1; min-width:0; }
.cli-top { display:flex; justify-content:space-between; gap:8px; }
.cli-name { font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cli-time { font-size:11px; color:var(--muted,#8a96a3); flex-shrink:0; }
.cli-sub { font-size:12px; color:var(--muted,#8a96a3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cli-preview { font-size:13px; color:var(--muted,#6b7280); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }

/* ----- thread ----- */
.chat-thread { flex:1; display:flex; flex-direction:column; min-width:0; }
.chat-layout.show-thread .chat-list { display:none; }
.chat-layout.show-list .chat-thread { display:none; }
@media (min-width: 900px) {
  .chat-layout.show-thread .chat-list,
  .chat-layout.show-list .chat-thread { display:flex; }
  .chat-back { display:none !important; }
}

.chat-header { display:flex; align-items:center; gap:8px; padding:8px 10px;
  background: var(--surface,#fff); border-bottom:1px solid var(--border); flex-shrink:0;
  padding-top: max(8px, env(safe-area-inset-top)); }
[data-theme="dark"] .chat-header { background:#17212b; border-color:#0e1621; }
.chat-back { font-size:26px; line-height:1; text-decoration:none; color:var(--text); padding:4px 6px; }
.ch-peek { display:flex; align-items:center; gap:10px; background:none; border:0; padding:2px; cursor:pointer;
  flex:1; min-width:0; text-align:start; color:inherit; }
.ch-avatar { width:40px; height:40px; border-radius:50%; flex-shrink:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#3B82F6,#8B5CF6); }
.ch-avatar img { width:100%; height:100%; object-fit:cover; }
.ch-info { min-width:0; }
.ch-name { font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ch-status { font-size:12px; color:var(--muted,#8a96a3); }
.ch-status .online-text { color:#22c55e; }
.ch-actions { flex-shrink:0; }

/* messages area */
.chat-messages { flex:1; overflow-y:auto; padding:14px 12px; display:flex; flex-direction:column; gap:8px;
  background: var(--chat-bg, #eceef2); }
[data-theme="dark"] .chat-messages { background:#0e1621; }
.msg-row { display:flex; align-items:flex-end; gap:4px; max-width:85%; }
.msg-row.mine { align-self:flex-end; flex-direction:row-reverse; }
.msg-row.theirs { align-self:flex-start; }
.msg { position:relative; padding:7px 11px; border-radius:14px; font-size:14px; line-height:1.55;
  word-wrap:break-word; box-shadow:0 1px 1px rgba(0,0,0,.06); animation:msgIn .18s ease; max-width:100%; }
.msg.mine { background: var(--brand-grad, linear-gradient(135deg,#3B82F6,#2563eb)); color:#fff; border-bottom-right-radius:5px; }
.msg.theirs { background: var(--surface,#fff); color: var(--text,#111); border-bottom-left-radius:5px; }
[data-theme="dark"] .msg.theirs { background:#182533; color:#e7eef5; }
.msg .time { font-size:10px; opacity:.7; margin-top:3px; display:block; text-align:end; }
.msg-text { white-space:pre-wrap; }
.msg-deleted { opacity:.7; font-style:italic; }

/* reply quote inside a bubble */
.msg-reply { display:flex; gap:6px; align-items:stretch; margin-bottom:5px; padding:3px 6px;
  border-radius:7px; background:rgba(0,0,0,.08); font-size:12.5px; }
.msg.mine .msg-reply { background:rgba(255,255,255,.18); }
.msg-reply-bar { width:3px; border-radius:3px; background:currentColor; opacity:.8; flex-shrink:0; }
.msg-reply-text { opacity:.9; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* media bubbles */
.msg-image { display:block; max-width:240px; max-height:300px; width:auto; height:auto; border-radius:10px; cursor:zoom-in; object-fit:cover; }
.msg-video { display:block; max-width:260px; max-height:320px; border-radius:10px; background:#000; }
.msg-audio { max-width:240px; }
.msg-dur { font-size:11px; opacity:.7; }
.msg-file { display:flex; align-items:center; gap:8px; text-decoration:none; color:inherit; }
.msg-file-ico { font-size:22px; }
.msg-file-name { font-size:13px; text-decoration:underline; word-break:break-all; }
.msg-location, .msg-contact { display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.msg-loc-ico, .msg-contact-ico { font-size:26px; }
.msg-loc-text small { opacity:.8; }
.msg-contact-num { font-weight:700; text-decoration:underline; }

/* per-message ⋮ trigger */
.msg-menu-btn { background:none; border:0; color:var(--muted,#9aa6b2); font-size:18px; cursor:pointer;
  padding:2px 4px; opacity:.55; align-self:center; }
.msg-menu-btn:hover { opacity:1; }

/* composer */
.chat-input { display:flex; align-items:center; gap:6px; padding:8px 10px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  background: var(--surface,#fff); border-top:1px solid var(--border); flex-shrink:0; }
[data-theme="dark"] .chat-input { background:#17212b; border-color:#0e1621; }
.chat-input #chat-text { flex:1; border:1px solid var(--border,#dfe3e8); border-radius:22px;
  padding:10px 16px; font-size:15px; background:var(--bg,#f4f5f7); color:var(--text); outline:none; }
[data-theme="dark"] .chat-input #chat-text { background:#0e1621; color:#e7eef5; border-color:#0e1621; }
.ci-btn { width:42px; height:42px; flex-shrink:0; border:0; border-radius:50%; cursor:pointer;
  font-size:20px; display:flex; align-items:center; justify-content:center; background:transparent; color:var(--muted,#6b7280); }
.ci-attach { font-size:26px; }
.ci-send { background: var(--brand-grad, linear-gradient(135deg,#3B82F6,#2563eb)); color:#fff; }
.ci-voice:active, .ci-attach:active { transform:scale(.92); }

/* recording status */
.rec-status { display:flex; align-items:center; gap:12px; padding:10px 16px; background:var(--surface,#fff);
  border-top:1px solid var(--border); }
[data-theme="dark"] .rec-status { background:#17212b; }
.rec-dot { width:12px; height:12px; border-radius:50%; background:#ef4444; animation:recPulse 1s infinite; }
@keyframes recPulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* reply context bar above composer */
.reply-bar { display:flex; align-items:center; gap:10px; padding:8px 14px; background:var(--surface,#fff);
  border-top:1px solid var(--border); }
[data-theme="dark"] .reply-bar { background:#17212b; }
.reply-bar-ico { font-size:18px; color:#3B82F6; }
.reply-bar-body { flex:1; min-width:0; border-inline-start:3px solid #3B82F6; padding-inline-start:8px; }
.reply-bar-title { font-size:12px; color:#3B82F6; font-weight:700; }
.reply-bar-text { font-size:13px; color:var(--muted,#6b7280); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reply-bar-x { background:none; border:0; font-size:16px; color:var(--muted); cursor:pointer; }

/* bottom action sheets */
.sheet { position:fixed; inset:0; z-index:9000; background:rgba(0,0,0,.4);
  display:flex; align-items:flex-end; justify-content:center; }
.sheet[hidden] { display:none; }
.sheet-card { width:100%; max-width:520px; background:var(--surface,#fff); color:var(--text);
  border-radius:18px 18px 0 0; padding:8px; box-shadow:0 -8px 30px rgba(0,0,0,.2);
  animation:sheetUp .2s ease; max-height:80vh; overflow-y:auto; }
@keyframes sheetUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
[data-theme="dark"] .sheet-card { background:#17212b; }
.sheet-title { font-weight:700; padding:10px 14px 6px; font-size:14px; color:var(--muted,#6b7280); }
.sheet-item { display:flex; align-items:center; gap:12px; width:100%; background:none; border:0;
  padding:14px 16px; font-size:15px; text-align:start; cursor:pointer; color:inherit; border-radius:12px; }
.sheet-item span { font-size:20px; width:24px; text-align:center; }
.sheet-item:hover { background:rgba(0,0,0,.05); }
[data-theme="dark"] .sheet-item:hover { background:rgba(255,255,255,.06); }
.sheet-item.danger { color:#ef4444; }
.sheet-cancel { justify-content:center; font-weight:700; color:var(--muted,#6b7280); margin-top:4px; }

/* forward list */
.fwd-list { display:flex; flex-direction:column; }
.fwd-item { margin:0; }
.fwd-row { display:flex; align-items:center; gap:12px; width:100%; background:none; border:0;
  padding:10px 14px; cursor:pointer; color:inherit; border-radius:12px; }
.fwd-row:hover { background:rgba(59,130,246,.08); }
.fwd-av { width:40px; height:40px; border-radius:50%; flex-shrink:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#3B82F6,#8B5CF6); }
.fwd-av img { width:100%; height:100%; object-fit:cover; }
.fwd-name { font-weight:600; }

/* profile panel */
.profile-sheet .profile-card { width:100%; max-width:520px; background:var(--surface,#fff); color:var(--text);
  border-radius:18px 18px 0 0; padding:26px 20px 24px; text-align:center; position:relative; animation:sheetUp .2s ease; }
[data-theme="dark"] .profile-sheet .profile-card { background:#17212b; }
.profile-x { position:absolute; top:12px; inset-inline-end:14px; background:none; border:0; font-size:18px; color:var(--muted); cursor:pointer; }
.profile-avatar { width:96px; height:96px; border-radius:50%; margin:0 auto 12px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:40px; color:#fff;
  background:linear-gradient(135deg,#3B82F6,#8B5CF6); }
.profile-avatar img { width:100%; height:100%; object-fit:cover; }
.profile-name { font-size:20px; font-weight:800; }
.profile-status { font-size:13px; color:var(--muted,#8a96a3); margin-top:2px; }
.profile-bio-label { font-size:12px; color:#3B82F6; font-weight:700; margin-top:16px; text-align:start; }
.profile-bio { font-size:14px; line-height:1.7; margin:4px 0 16px; text-align:start; white-space:pre-wrap; }

/* toast */
.nz-toast { position:fixed; bottom:80px; left:50%; transform:translateX(-50%); z-index:9999;
  background:rgba(0,0,0,.82); color:#fff; padding:8px 18px; border-radius:20px; font-size:13px; animation:msgIn .2s ease; }

/* keep old single-column fallback name */
.chat-input input[type="text"] { flex:1; }


/* ============================================================
   BOTTOM NAV — floating, glassy
   ============================================================ */
.bottom-nav {
  position: fixed; bottom: 10px; left: 10px; right: 10px;
  max-width: 540px; margin: 0 auto;
  background: var(--surface-glass);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 8px;
  display:flex; justify-content:space-around; align-items:center;
  box-shadow: var(--shadow-lg); z-index: 50;
}
.bn-item {
  flex: 1; display:flex; flex-direction:column; align-items:center; gap: 2px;
  padding: 6px 4px; color: var(--text-2); font-size: 11px; font-weight: 600;
  border-radius: var(--r); transition: all .15s ease;
}
.bn-item:hover { color: var(--brand); }
.bn-item.active { color: var(--brand); }
.bn-icon { font-size: 20px; line-height: 1; }
.bn-cta .bn-plus {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand-grad); color: #fff;
  display:flex; align-items:center; justify-content:center;
  font-size: 26px; font-weight: 700;
  box-shadow: var(--shadow-brand);
  margin-top: -22px; border: 4px solid var(--bg);
  transition: transform .15s ease;
}
.bn-cta:hover .bn-plus { transform: scale(1.08) rotate(90deg); }
.bn-cta .bn-label { margin-top: 4px; }

/* ============================================================
   MISC
   ============================================================ */
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--bg-2) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--r); }
@keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }

.empty-state { text-align:center; padding: 60px 20px; color: var(--muted); }
.empty-state .emoji { font-size: 48px; margin-bottom: 12px; }

.pagination { display:flex; gap: 6px; justify-content:center; padding: 20px 0; flex-wrap: wrap; }
.pagination a, .pagination span {
  padding: 8px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font-size: 13px; font-weight: 600;
}
.pagination .current { background: var(--brand-grad); color: #fff; border-color: transparent; }

/* Tabs */
.tabs { display:flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; }
.tab { padding: 10px 14px; color: var(--text-2); font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; }
.tab.active { color: var(--brand); border-color: var(--brand); }

/* Compare bar */
.compare-bar { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full); padding: 8px 12px; display:flex; gap: 8px; align-items:center; box-shadow: var(--shadow-lg); z-index: 45; }

/* Map */
#map { height: 360px; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }

/* Verified phone */
.verified-tick { color: var(--ok); }

/* Print */
@media print { .app-bar, .bottom-nav, .share-row, .btn { display: none !important; } }

/* ============================================================
   DIVAR-LIKE 3-COLUMN LAYOUT (v6.5)
   ============================================================ */
.divar-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 12px;
}
@media (min-width: 900px) {
  .divar-layout {
    grid-template-columns: 240px minmax(0,1fr) 260px;
    align-items: start;
  }
}

.side-title {
  font-weight: 800; font-size: 14px;
  padding: 10px 12px; color: var(--text-2);
  border-bottom: 1px solid var(--border);
}

/* Category vertical sidebar (right in RTL) */
.cat-side, .filters-side {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  position: sticky; top: 70px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
}
@media (max-width: 899px) {
  .cat-side, .filters-side {
    display: none; position: fixed; inset: 60px 8px auto 8px;
    z-index: 50; max-height: 70vh;
  }
  .cat-side.open, .filters-side.open { display: block; }
}
.cat-vlist { list-style:none; padding: 6px; margin: 0; }
.cat-vrow {
  display:flex; align-items:center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r);
  color: var(--text); font-size: 14px; font-weight: 600;
  border: 1px solid transparent;
  transition: background .15s, border-color .15s;
}
.cat-vrow:hover { background: var(--surface-2); }
.cat-vrow.is-active {
  background: color-mix(in srgb, var(--cc, var(--brand)) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--cc, var(--brand)) 45%, transparent);
  color: var(--cc, var(--brand));
}
.cat-vico {
  width: 32px; height: 32px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius: var(--r); background: var(--surface-2);
  font-size: 18px;
}

/* Mobile horizontal category strip */
.cat-strip {
  display:flex; gap: 10px; overflow-x: auto;
  padding: 10px 4px; margin: 6px 0 4px;
  scrollbar-width: none;
}
.cat-strip::-webkit-scrollbar { display:none; }
.cat-chip {
  flex: 0 0 auto;
  display:flex; flex-direction:column; align-items:center; gap: 6px;
  padding: 8px 10px; min-width: 72px;
  border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font-size: 12px; font-weight: 600;
  text-align: center;
}
.cat-chip.is-active {
  border-color: color-mix(in srgb, var(--cc, var(--brand)) 60%, transparent);
  background: color-mix(in srgb, var(--cc, var(--brand)) 10%, var(--surface));
}
.cat-chip-ico {
  width: 38px; height: 38px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: color-mix(in srgb, var(--cc, var(--brand)) 14%, var(--surface-2));
  font-size: 20px;
}
@media (min-width: 900px) { .cat-strip { display: none; } }

/* v7.3: single current-category chip on a listing page */
.cat-strip-single { padding: 10px 4px 4px; }
.cat-current-chip {
  flex: 1 1 auto;
  flex-direction: row; justify-content: space-between;
  min-width: 0; width: 100%;
  padding: 8px 12px; gap: 10px; cursor: pointer;
  font-size: 14px;
}
.cat-current-chip .cat-chip-ico { width: 30px; height: 30px; font-size: 17px; flex-shrink:0; }
.cat-current-chip > span:nth-child(2) { flex:1; text-align:start; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cat-chip-caret { color: var(--muted, #9aa6b2); font-size: 12px; flex-shrink:0; }
.cat-pop-row.is-current {
  background: color-mix(in srgb, var(--brand, #3B82F6) 12%, transparent);
  font-weight: 700;
}

/* Filters sidebar (left) */
.filters-side form { padding: 12px; }
.f-group { margin-bottom: 14px; }
.f-label { display:block; font-size: 12px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.f-range { display:flex; gap: 8px; }
.f-range input { width: 100%; padding: 8px 10px; border:1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); }
.f-check { display:flex; align-items:center; gap: 8px; font-size: 13px; padding: 6px 0; }
.btn-block { display:block; width: 100%; text-align:center; margin-top: 6px; }

/* Ad toolbar above grid */
.ad-toolbar {
  display:flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 4px 2px 12px; flex-wrap: wrap;
}
.ad-toolbar-title { font-weight: 800; font-size: 15px; color: var(--text); }
.ad-sort select {
  padding: 6px 10px; border:1px solid var(--border); border-radius: var(--r);
  background: var(--surface); color: var(--text); font-size: 13px;
}

/* Ad card – Divar style grid override */
.ad-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.ad-card.card-grid .ad-thumb { height: 160px; }
.ad-card.card-grid.is-featured { border-color: color-mix(in srgb, var(--brand) 50%, transparent); }
.thumb-badge {
  position:absolute; top: 8px; inset-inline-start: 8px;
  background: rgba(0,0,0,.6); color: #fff; font-size: 11px;
  padding: 2px 6px; border-radius: 999px;
}

/* Hide old filter toggle button styling tweaks on desktop */
@media (min-width: 900px) {
  .city-bar .filter-toggle { display: none; }
}

/* ============================================================
   v6.6 — Divar-style media gallery + category drill-down
   ============================================================ */

/* --- Media gallery (swipeable, Divar-style) --- */
.media-gallery{
  position:relative;
  width:100%;
  background:#000;
  border-radius:12px;
  overflow:hidden;
  margin:0 0 14px;
  aspect-ratio: 4 / 3;
  max-height: 70vh;
}
.media-track{
  display:flex;
  width:100%;
  height:100%;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:none;
}
.media-track::-webkit-scrollbar{ display:none; }
.media-slide{
  flex:0 0 100%;
  width:100%;
  height:100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
}
.media-slide img,
.media-slide video{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}
.media-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px; height:40px;
  border-radius:50%;
  background:rgba(0,0,0,.45);
  color:#fff;
  border:0;
  font-size:24px;
  line-height:1;
  cursor:pointer;
  z-index:2;
  display:flex; align-items:center; justify-content:center;
}
.media-prev{ left:8px; }
.media-next{ right:8px; }
@media (max-width: 720px){
  .media-nav{ display:none; }
}
.media-dots{
  position:absolute;
  bottom:10px; left:0; right:0;
  display:flex; justify-content:center; gap:6px;
  z-index:2;
  pointer-events:auto;
}
.media-dot{
  width:7px; height:7px;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  border:0; padding:0;
  cursor:pointer;
  transition: background .15s, transform .15s;
}
.media-dot.is-active{
  background:#fff;
  transform:scale(1.3);
}
.media-counter{
  position:absolute;
  top:10px;
  inset-inline-end:10px;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:12px;
  padding:3px 8px;
  border-radius:10px;
  z-index:2;
  font-variant-numeric: tabular-nums;
}

/* --- Category breadcrumb + back chip --- */
.cat-crumbs{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  padding:8px 12px;
  font-size:13px;
  color:var(--muted, #777);
  margin:6px 0 4px;
}
.cat-crumbs a{ color:var(--brand, #e11d48); text-decoration:none; }
.cat-crumbs a:hover{ text-decoration:underline; }
.cat-crumbs .is-active{ color:var(--text, #111); font-weight:600; }
.cat-crumbs .crumb-sep{ opacity:.6; }

.cat-chip-back,
.cat-vrow-back{
  background: var(--surface-2, #f3f4f6) !important;
  color: var(--text, #111) !important;
}
.cat-varrow{
  margin-inline-start:auto;
  opacity:.55;
  font-size:18px;
  line-height:1;
}

/* --- Settings logout button --- */
.settings-logout{
  margin-top:28px;
  padding-top:18px;
  border-top:1px solid var(--border, #eee);
}
.btn-danger-outline{
  display:inline-flex; align-items:center; gap:8px;
  background:transparent;
  color:#dc2626;
  border:1px solid #dc2626;
  border-radius:10px;
  padding:10px 18px;
  text-decoration:none;
  font-weight:600;
  cursor:pointer;
}
.btn-danger-outline:hover{ background:#dc2626; color:#fff; }

/* ============================================ */
/* v6.7 — Category picker, lightbox, chat menu  */
/* ============================================ */

/* --- Category drill-down picker (new.php) --- */
.cat-picker {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
}
.cp-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: var(--surface-2, #f7f7f7);
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.cp-crumbs { flex: 1; color: var(--muted, #666); }
.cp-crumbs span { color: var(--text, #111); }
.cp-back, .cp-clear {
  background: transparent; border: 1px solid var(--border);
  border-radius: 8px; padding: 4px 10px; cursor: pointer; font-size: 13px;
}
.cp-back:hover, .cp-clear:hover { background: var(--surface); }
.cp-selected {
  padding: 8px 12px; background: #e8f5ee; color: #137a3a;
  font-size: 13px; border-bottom: 1px solid var(--border);
}
.cp-list { max-height: 340px; overflow-y: auto; }
.cp-item {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: transparent; border: 0; border-bottom: 1px solid var(--border);
  padding: 12px 14px; text-align: start; font-size: 15px; cursor: pointer;
  color: var(--text, #111);
}
.cp-item:last-child { border-bottom: 0; }
.cp-item:hover { background: var(--surface-2, #fafafa); }
.cp-item .cp-name { display: flex; align-items: center; gap: 8px; }
.cp-item .cp-icon { font-size: 18px; }
.cp-item .cp-arrow { color: var(--muted, #999); font-size: 18px; }
.cp-item.is-leaf .cp-name::before { content: '◯'; color: var(--muted, #bbb); margin-inline-end: 4px; font-size: 11px; }

/* --- Lightbox (view.php & chat.php) --- */
.nz-lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; padding: 16px;
}
.nz-lightbox img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.nz-lb-close {
  position: absolute; top: 14px; inset-inline-end: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.15); color: #fff; border: 0;
  font-size: 26px; line-height: 1; cursor: pointer;
}
.nz-lb-close:hover { background: rgba(255,255,255,.3); }

/* --- Chat: messenger-style images, voice, video --- */
.msg-image {
  display: block;
  max-width: 240px;
  max-height: 280px;
  width: auto; height: auto;
  border-radius: 12px;
  cursor: zoom-in;
  object-fit: cover;
}
.msg-video {
  display: block;
  max-width: 260px;
  max-height: 320px;
  border-radius: 12px;
  background: #000;
}
.msg-audio { max-width: 260px; }

/* --- Chat 3-dot menu --- */
.ch-menu { position: relative; }
.ch-menu-pop {
  display: none;
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0;
  min-width: 200px;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 50;
  overflow: hidden;
}
.ch-menu.open .ch-menu-pop { display: block; }
.ch-menu-pop form { margin: 0; display: block; }
.ch-menu-item {
  display: block; width: 100%;
  background: transparent; border: 0;
  text-align: start; padding: 11px 14px;
  font-size: 14px; cursor: pointer;
  color: var(--text, #111);
}
.ch-menu-item:hover { background: var(--surface-2, #f6f6f6); }
.ch-menu-item.danger { color: #c62828; }
.ch-menu-item.danger:hover { background: #ffebee; }

/* === v6.8: Per-category filter form === */
.cf-form{margin:.5rem 0 1rem;padding:.75rem;border:1px solid var(--border);border-radius:12px;background:var(--surface,#fafafa)}
.cf-form-head{font-weight:700;margin-bottom:.5rem;font-size:.95rem;color:var(--fg,#333)}
.cf-row{margin-bottom:.6rem}
.cf-row label{display:block;font-size:.85rem;margin-bottom:.25rem;color:var(--muted,#666)}
.cf-range{display:flex;gap:.5rem}
.cf-range input{flex:1;min-width:0}
.cf-toggle{display:flex;align-items:center;gap:.4rem;font-size:.9rem}
.cf-block{border-top:1px dashed var(--border);padding-top:.75rem;margin-top:.75rem}

/* v6.9 cascading filters */
.cf-row select.cf-hier-parent, .cf-row select.cf-hier-child { width:100%; padding:8px; border:1px solid #ddd; border-radius:8px; background:#fff; }
.cf-row .cf-range { display:flex; gap:6px; }
.cf-row .cf-range input { flex:1; }

/* ============ v7.0 — Bottom-nav avatar ============ */
.bn-avatar { display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%; overflow:hidden;
  background:#e5e7eb; color:#374151; font-weight:700; font-size:13px; }
.bn-avatar img { width:100%; height:100%; object-fit:cover; }
[data-theme="dark"] .bn-avatar { background:#374151; color:#e5e7eb; }

/* ============ v7.0 — Telegram-style settings ============ */
.tg-settings { max-width:640px; margin:0 auto; padding:8px 0 80px; }
.tg-hero { display:flex; align-items:center; gap:14px; padding:18px 16px; }
.tg-hero-avatar { width:64px; height:64px; border-radius:50%; overflow:hidden;
  background:linear-gradient(135deg,#3B82F6,#8B5CF6); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:700; flex-shrink:0; }
.tg-hero-avatar img { width:100%; height:100%; object-fit:cover; }
.tg-hero-info { flex:1; min-width:0; }
.tg-hero-name { font-size:18px; font-weight:700; }
.tg-hero-sub  { font-size:13px; color:#6b7280; margin-top:2px; }

.tg-section { margin:14px 0; }
.tg-section-title { font-size:12px; color:#6b7280; padding:6px 18px; text-transform:none; }
.tg-list { background:#fff; border-radius:14px; margin:0 10px; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04); }
[data-theme="dark"] .tg-list { background:#1f2937; box-shadow:none; }

.tg-row { display:flex; align-items:center; gap:12px; padding:12px 14px;
  text-decoration:none; color:inherit; border-top:1px solid rgba(0,0,0,.05);
  background:transparent; }
.tg-row:first-child { border-top:0; }
[data-theme="dark"] .tg-row { border-top-color:rgba(255,255,255,.06); }
.tg-row:hover { background:rgba(59,130,246,.06); }
.tg-row-icon { width:32px; height:32px; border-radius:8px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; }
.tg-row-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.tg-row-title { font-size:15px; font-weight:500; }
.tg-row-sub   { font-size:12px; color:#6b7280; }
.tg-row-arrow { color:#9ca3af; font-size:20px; line-height:1; }
.tg-row-form { padding:8px 14px; }
.tg-row-form select { margin-inline-start:auto; border:1px solid #d1d5db;
  border-radius:8px; padding:6px 10px; background:#fff; }
[data-theme="dark"] .tg-row-form select { background:#111827; color:#e5e7eb; border-color:#374151; }
.tg-card { background:#fff; border-radius:14px; margin:0 10px; padding:16px; }
[data-theme="dark"] .tg-card { background:#1f2937; }
.tg-back { display:inline-block; margin-top:12px; color:#3B82F6; text-decoration:none; }

/* ============ v7.0 — My-ads card actions ============ */
.my-ads-head { display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:8px 4px 14px; }
.my-ads-head h1 { font-size:18px; margin:0; }
.my-ad-card { display:flex; flex-direction:column; }
.my-ad-card .ad-card-link { display:contents; }
.my-ad-actions { display:flex; gap:6px; padding:10px; border-top:1px solid rgba(0,0,0,.06); }
[data-theme="dark"] .my-ad-actions { border-top-color:rgba(255,255,255,.08); }
.my-ad-actions .btn { flex:1; text-align:center; }
.btn-sm { padding:6px 10px; font-size:13px; border-radius:8px; }
.btn-danger-outline { color:#EF4444; border:1px solid #EF4444; background:transparent; }

/* ===== v7.1 multi-step ad wizard ===== */
.wizard-steps{display:flex;gap:6px;list-style:none;padding:0;margin:0 0 18px;flex-wrap:wrap;direction:rtl;font-size:13px}
.wizard-steps li{flex:1;min-width:90px;display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:10px;background:var(--muted,#f1f3f5);color:var(--muted-foreground,#666);border:1px solid transparent}
.wizard-steps li.active{background:var(--primary,#0d6efd);color:#fff;border-color:transparent}
.wizard-steps li.done{background:#e6f4ea;color:#1b6e2d}
.wizard-steps .ws-n{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.08);font-weight:700}
.wizard-steps li.active .ws-n{background:rgba(255,255,255,.2)}
.wz-step{animation:wzFade .18s ease-out}
@keyframes wzFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.wz-nav{display:flex;justify-content:space-between;gap:10px;margin-top:18px;padding-top:14px;border-top:1px solid var(--border,#eee)}
.btn-ghost{background:transparent;border:1px solid var(--border,#ddd);color:inherit}
.req{color:#d33;margin-inline-start:2px}
.media-previews{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.mp-thumb{width:100px;border-radius:10px;overflow:hidden;border:1px solid var(--border,#eee);background:#fafafa;font-size:11px;text-align:center}
.mp-thumb img,.mp-thumb video{width:100%;height:80px;object-fit:cover;display:block}
.mp-thumb span{display:block;padding:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.review-block{background:var(--muted,#f7f7f9);border:1px solid var(--border,#eee);border-radius:12px;padding:14px;line-height:1.9}
.review-block h3{margin:0 0 10px;font-size:16px}
.rv-row{padding:4px 0;border-bottom:1px dashed var(--border,#eee)}
.rv-row:last-child{border-bottom:0}
.upload-progress{margin-top:14px}
.up-bar{width:100%;height:10px;background:#eee;border-radius:99px;overflow:hidden}
.up-bar-fill{height:100%;width:0;background:linear-gradient(90deg,#0d6efd,#22c55e);transition:width .2s ease}
.up-meta{font-size:13px;color:var(--muted-foreground,#666);margin-top:6px;text-align:center}

/* v7.2: hide app-bar pages */
.main-content.no-appbar { padding-top: 0; }

/* v7.2: category tiles (4 / 3 / 3) */
.cat-tiles{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  margin:8px 0 16px;
}
.cat-tiles .cat-tile{
  appearance:none; border:1px solid var(--border,#e5e7eb); background:#fff;
  border-radius:14px; padding:12px 6px; display:flex; flex-direction:column;
  align-items:center; gap:6px; cursor:pointer; transition:transform .1s ease, box-shadow .2s ease;
}
.cat-tiles .cat-tile:active{ transform:scale(.97) }
.cat-tiles .cat-tile:hover{ box-shadow:0 4px 12px rgba(0,0,0,.06) }
.cat-tile-ico{
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; font-size:20px;
  background:color-mix(in srgb, var(--cc,#888) 18%, transparent);
  color:var(--cc,#888);
}
.cat-tile-name{ font-size:12px; color:#333; line-height:1.2; text-align:center }
[data-theme="dark"] .cat-tiles .cat-tile{ background:#1b1b1f; border-color:#2a2a30 }
[data-theme="dark"] .cat-tile-name{ color:#e7e7ea }

/* row 1: tiles 1-4 (4 cols), row 2: tiles 5-7 (3 cols), row 3: tiles 8-10 (3 cols) */
.cat-tiles .cat-tile:nth-child(n+5):nth-child(-n+7){ grid-column: span 1; }
.cat-tiles .cat-tile:nth-child(5){ grid-column: 1 / span 1; }
.cat-tiles{ /* rebuild rows via implicit grid using auto-rows */ }
@media (max-width: 380px){
  .cat-tiles{ gap:8px }
}
/* override: make rows 2-3 explicitly 3-column by placing items */
.cat-tiles{ grid-auto-flow: row; }
.cat-tiles .cat-tile:nth-child(5),
.cat-tiles .cat-tile:nth-child(6),
.cat-tiles .cat-tile:nth-child(7){
  /* second row: 3 cols across 4-col grid → use spans */
}
/* Simpler: switch to 12-col grid for precise 4/3/3 layout */
.cat-tiles{ grid-template-columns: repeat(12, 1fr); }
.cat-tiles .cat-tile{ grid-column: span 3; } /* row1 4 tiles × 3 = 12 */
.cat-tiles .cat-tile:nth-child(n+5):nth-child(-n+7){ grid-column: span 4; } /* row2: 3 tiles × 4 = 12 */
.cat-tiles .cat-tile:nth-child(n+8):nth-child(-n+10){ grid-column: span 4; } /* row3: 3 tiles × 4 = 12 */
.cat-tiles .cat-tile:nth-child(n+11){ grid-column: span 3; } /* extras back to 4-per-row */

/* v7.2: category popover (compact panel, not fullscreen) */
.cat-pop{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
  z-index:1000; padding:16px;
}
.cat-pop[hidden]{ display:none }
.cat-pop-card{
  background:#fff; width:100%; max-width:380px;
  max-height:70vh; border-radius:16px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.25);
  animation: catPopIn .18s ease-out;
}
@keyframes catPopIn{ from{ transform:translateY(8px); opacity:0 } to{ transform:none; opacity:1 } }
.cat-pop-head{
  display:flex; align-items:center; gap:8px; padding:12px 14px;
  border-bottom:1px solid var(--border,#eee);
}
.cat-pop-head strong{ flex:1; text-align:center; font-size:15px }
.cat-pop-back, .cat-pop-close{
  border:0; background:transparent; cursor:pointer; font-size:16px; padding:4px 8px; color:#555;
}
.cat-pop-list{ list-style:none; padding:6px 0; margin:0; overflow-y:auto; }
.cat-pop-row{
  width:100%; display:flex; align-items:center; gap:10px;
  padding:10px 14px; background:transparent; border:0; cursor:pointer;
  font-size:14px; text-align:right;
}
.cat-pop-row:hover{ background:#f5f5f7 }
.cat-pop-ico{
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:16px; flex:0 0 34px;
}
.cat-pop-name{ flex:1 }
.cat-pop-arrow{ color:#aaa }
[data-theme="dark"] .cat-pop-card{ background:#1b1b1f; color:#e7e7ea }
[data-theme="dark"] .cat-pop-row:hover{ background:#26262c }
[data-theme="dark"] .cat-pop-head{ border-color:#2a2a30 }

/* v7.3: bio in settings hero */
.tg-hero-bio { font-size:13px; color:var(--muted,#6b7280); margin-top:4px; white-space:pre-wrap; line-height:1.6; }
.tg-form textarea { width:100%; border:1px solid var(--border,#d1d5db); border-radius:10px; padding:10px 12px; font:inherit; resize:vertical; background:var(--surface,#fff); color:var(--text); }
[data-theme="dark"] .tg-form textarea { background:#111827; color:#e5e7eb; border-color:#374151; }

/* ============================================================
   v7.4 additions
   ============================================================ */

/* Fix: elements with display:flex were ignoring the [hidden] attribute */
.reply-bar[hidden], .rec-status[hidden], .ci-btn[hidden], .share-row[hidden] { display:none !important; }

/* --- Optimistic chat sending (Telegram-style) --- */
.msg-row.sending .msg { opacity:.96; }
.opt-clock { display:inline-block; animation:optSpin 1.4s linear infinite; }
@keyframes optSpin { to { transform:rotate(360deg); } }
.msg-row.send-error .time { color:#ef4444; }

.opt-media { position:relative; border-radius:12px; overflow:hidden; max-width:240px; }
.opt-media img, .opt-media video { display:block; width:100%; max-height:300px; object-fit:cover; filter:brightness(.82); }
.opt-prog { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.opt-prog svg { width:56px; height:56px; transform:rotate(-90deg); }
.opt-prog .opt-ring-bg { fill:none; stroke:rgba(255,255,255,.35); stroke-width:3; }
.opt-prog .opt-ring { fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; transition:stroke-dashoffset .2s linear; }
.opt-cancel { position:absolute; width:30px; height:30px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(0,0,0,.5); color:#fff; font-size:15px; display:flex; align-items:center; justify-content:center; }
.opt-prog-sm svg { width:40px; height:40px; }
.opt-prog-sm .opt-cancel { width:24px; height:24px; font-size:12px; }
.opt-voice { display:flex; align-items:center; gap:10px; position:relative; padding:4px 2px; }
.opt-voice-ico { font-size:22px; }
.opt-voice-label { font-size:13px; }
.opt-voice .opt-prog { position:static; width:40px; height:40px; }

/* --- view.php share toggle --- */
.share-wrap { margin:14px 0; }
.share-toggle { display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:var(--surface,#fff); border:1px solid var(--border); color:var(--text);
  border-radius:22px; padding:8px 16px; font-size:14px; font-weight:600; }
.share-toggle:hover { box-shadow:var(--shadow-sm); }
.share-toggle-ico { font-size:16px; }
.share-wrap .share-row { margin-top:10px; }

/* --- new.php / edit.php image grid (2 rows of 4) --- */
.btn-pick { display:inline-flex; align-items:center; gap:6px; }
.img-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin-top:10px; }
.img-cell { position:relative; aspect-ratio:1/1; border-radius:10px; overflow:hidden;
  border:1px solid var(--border,#eee); background:#f3f4f6; }
.img-cell img, .img-cell video { width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }
.img-del { position:absolute; top:4px; inset-inline-end:4px; width:24px; height:24px; border:0; cursor:pointer;
  border-radius:50%; background:rgba(0,0,0,.6); color:#fff; font-size:13px; line-height:1;
  display:flex; align-items:center; justify-content:center; }
.img-del:hover { background:#ef4444; }
@media (max-width:520px){ .img-grid { grid-template-columns:repeat(4, 1fr); gap:6px; } }

/* --- settings privacy toggle (Telegram-style switch) --- */
.tg-switch-row { display:flex; align-items:center; gap:14px; padding:6px 0; cursor:pointer; }
.tg-switch-text { flex:1; min-width:0; }
.tg-switch-title { display:block; font-weight:600; }
.tg-switch-sub { display:block; font-size:12px; color:var(--muted,#6b7280); margin-top:2px; line-height:1.6; }
.tg-switch { position:relative; width:48px; height:28px; flex-shrink:0; }
.tg-switch input { position:absolute; opacity:0; width:0; height:0; }
.tg-switch-slider { position:absolute; inset:0; border-radius:28px; background:#cbd5e1; transition:.2s; }
.tg-switch-slider::before { content:""; position:absolute; width:22px; height:22px; border-radius:50%;
  background:#fff; top:3px; inset-inline-start:3px; transition:.2s; box-shadow:0 1px 3px rgba(0,0,0,.3); }
.tg-switch input:checked + .tg-switch-slider { background:#3B82F6; }
.tg-switch input:checked + .tg-switch-slider::before { transform:translateX(20px); }
[dir="rtl"] .tg-switch input:checked + .tg-switch-slider::before { transform:translateX(-20px); }

/* --- chat profile panel phone row --- */
.profile-info-row { display:flex; align-items:center; gap:12px; text-align:start; margin:6px 0 14px;
  padding:10px 12px; border-radius:12px; background:rgba(0,0,0,.04); }
[data-theme="dark"] .profile-info-row { background:rgba(255,255,255,.05); }
.profile-info-ico { font-size:22px; }
.profile-info-label { display:block; font-size:12px; color:var(--muted,#8a96a3); }
.profile-info-val { display:block; font-weight:700; color:#3B82F6; text-decoration:none; }

/* ===================== v7.5 additions ===================== */

/* Detail gallery placeholder when an ad has no media */
.media-gallery-empty{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--surface,#f1f5f9),rgba(0,0,0,.05));
}
[data-theme="dark"] .media-gallery-empty{ background:#0f1722; }
.media-empty-ph{ display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--muted,#94a3b8); }
.media-empty-ico{ font-size:46px; opacity:.6; }
.media-empty-txt{ font-size:13px; }

/* Reply jump highlight */
.msg-row.msg-highlight .msg{
  animation:nzReplyFlash 1.5s ease;
}
@keyframes nzReplyFlash{
  0%{ box-shadow:0 0 0 3px rgba(225,29,72,.55); }
  100%{ box-shadow:0 0 0 0 rgba(225,29,72,0); }
}
.msg-reply[data-jump]{ cursor:pointer; }

/* Clickable profile photo + lightbox 3-dot menu */
.profile-avatar.has-photo{ cursor:zoom-in; }
.nz-lb-menu{ position:fixed; top:14px; inset-inline-start:14px; z-index:10001; }
.nz-lb-dots{ width:40px; height:40px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(0,0,0,.55); color:#fff; font-size:22px; line-height:1; }
.nz-lb-pop{ margin-top:6px; background:#fff; color:#111; border-radius:10px; overflow:hidden;
  min-width:150px; box-shadow:0 8px 30px rgba(0,0,0,.35); }
.nz-lb-pop a{ display:block; padding:11px 14px; color:#111; text-decoration:none; font-size:14px; }
.nz-lb-pop a:hover{ background:rgba(0,0,0,.06); }
.nz-lb-pop[hidden]{ display:none; }

/* Existing media cells in the edit picker */
.img-cell-existing::after{
  content:"ذخیره‌شده"; position:absolute; inset-block-end:0; inset-inline-start:0; inset-inline-end:0;
  font-size:10px; text-align:center; padding:2px 0; background:rgba(0,0,0,.55); color:#fff;
}

/* Bookmarks list (chat-style) */
.bm-list{ display:flex; flex-direction:column; gap:2px; }
.bm-item{ display:flex; align-items:center; gap:10px; padding:8px 6px; border-radius:12px;
  position:relative; }
.bm-item:hover{ background:rgba(0,0,0,.04); }
[data-theme="dark"] .bm-item:hover{ background:rgba(255,255,255,.05); }
.bm-link{ display:flex; align-items:center; gap:12px; flex:1; min-width:0; text-decoration:none; color:inherit; }
.bm-thumb{ width:60px; height:60px; flex-shrink:0; border-radius:12px; overflow:hidden;
  background:var(--surface,#e2e8f0); display:flex; align-items:center; justify-content:center; }
.bm-thumb img{ width:100%; height:100%; object-fit:cover; }
.bm-thumb-ph{ font-size:24px; opacity:.5; }
.bm-body{ flex:1; min-width:0; }
.bm-title{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bm-price{ color:#e11d48; font-size:13px; margin-top:2px; }
.bm-meta{ color:var(--muted,#94a3b8); font-size:12px; margin-top:2px; }
.bm-menu-btn{ flex-shrink:0; width:34px; height:34px; border:0; background:none; cursor:pointer;
  font-size:20px; color:var(--muted,#94a3b8); border-radius:50%; }
.bm-menu-btn:hover{ background:rgba(0,0,0,.08); }

/* v7.6: chat-list per-conversation 3-dot menu */
.chat-list-row { position:relative; display:flex; align-items:stretch; }
.chat-list-row .chat-list-item { flex:1; min-width:0; }
.chat-list-row.active { background:rgba(59,130,246,.08); }
.cli-menu-btn {
  background:transparent; border:0; color:var(--muted, #888);
  font-size:20px; padding:0 12px; cursor:pointer; align-self:center;
  border-radius:8px;
}
.cli-menu-btn:hover { background:rgba(0,0,0,.06); color:inherit; }
[data-theme="dark"] .cli-menu-btn:hover { background:rgba(255,255,255,.08); }

/* v7.6: lightbox menu (download button) */
.nz-lb-menu { position:absolute; top:14px; right:60px; z-index:5; }
.nz-lb-dots { background:rgba(0,0,0,.4); color:#fff; border:0; width:36px; height:36px; border-radius:50%; font-size:18px; cursor:pointer; }
.nz-lb-pop { position:absolute; right:0; top:42px; background:#222; color:#fff; border-radius:10px; min-width:160px; padding:6px; box-shadow:0 10px 30px rgba(0,0,0,.4); }
.nz-lb-pop a { display:block; padding:8px 12px; color:#fff; text-decoration:none; border-radius:6px; }
.nz-lb-pop a:hover { background:rgba(255,255,255,.1); }

/* v8.0 — Accessibility & UX */
:focus-visible { outline: 2px solid #e11d48; outline-offset: 2px; border-radius: 4px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }
img, video { max-width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --bg: #0f1115; --surface: #161a22; --surface-2: #1e2330;
    --text: #e7e9ee; --muted: #9aa3b2; --border: #2a3142;
  }
}

/* v8.1 — Inline SVG icon system (messenger-style) */
.ic { width: 1.1em; height: 1.1em; vertical-align: -.18em; display: inline-block; flex-shrink: 0; stroke: currentColor; fill: none; }
.ic-lg { width: 1.5em; height: 1.5em; }
.ic-xl { width: 1.8em; height: 1.8em; }
.icon-btn .ic, .btn .ic, .bn-icon .ic { width: 22px; height: 22px; }
.bn-icon .ic { width: 24px; height: 24px; }
.bn-cta .ic { width: 26px; height: 26px; }
/* keep bottom-nav order natural for RTL (home first reads as right-most) */
html[dir="rtl"] .bottom-nav { flex-direction: row-reverse; }

/* v11.24.0 — UI/UX pass: skip-link, visually-hidden, noscript, forced-colors */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; inset-inline-start: 8px; top: -100px;
  z-index: 9999; padding: 10px 14px; border-radius: 8px;
  background: var(--brand); color: #fff; font-weight: 700;
  text-decoration: none; box-shadow: var(--shadow-md);
  transition: top .15s ease;
}
.skip-link:focus { top: 8px; outline: 2px solid #fff; outline-offset: 2px; }
.noscript-banner {
  padding: 10px 14px; background: #fef3c7; color: #92400e;
  text-align: center; font-weight: 600;
}
/* Bigger tap target for mini language selector (WCAG 2.5.5) */
.lang-mini { min-height: 40px; min-width: 56px; }
/* Ensure interactive icon buttons meet 44x44 recommendation on touch */
@media (pointer: coarse) {
  .icon-btn { min-width: 44px; min-height: 44px; }
}
/* Forced-colors accessibility */
@media (forced-colors: active) {
  .btn, .icon-btn, .bn-item { border: 1px solid CanvasText; }
  :focus-visible { outline: 2px solid Highlight; }
}
/* Loader helpers — reusable skeleton blocks */
.skeleton-line { display:block; height: 12px; margin: 8px 0; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--bg-2) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.skeleton-card { height: 160px; border-radius: var(--r); background: linear-gradient(90deg, var(--surface-2) 25%, var(--bg-2) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@media (prefers-reduced-motion: reduce) {
  .skeleton, .skeleton-line, .skeleton-card { animation: none; }
}
/* Form field error state */
.field-error, [aria-invalid="true"] {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 4px rgba(220,38,38,.15) !important;
}
.field-error-msg { color: var(--danger); font-size: 12px; margin-top: 4px; }