/* ============================================================
   Пазар123.мк — redesigned stylesheet
   Brand palette: ink indigo + persimmon + emerald
   Type: Manrope (display) + Inter (UI), both full Cyrillic
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap&subset=cyrillic,latin');

/* ── Tokens ── */
:root {
  /* Ink indigo — custom, deliberately off Tailwind indigo-950 */
  --primary:    #1c1a4d;
  --primary-d:  #110f33;
  --primary-m:  #322c74;
  /* Persimmon — warmer & more owned than the textbook orange-500 */
  --accent:     #fb5226;
  --accent-d:   #e63e15;
  --accent-l:   #fff3ee;
  --green:      #06966b;
  --green-d:    #047857;
  --green-l:    #ecfdf5;
  --red:        #ef4444;
  --red-d:      #dc2626;
  --gold:       #eab308;
  --text:       #0f172a;
  --text-2:     #475569;
  --text-3:     #64748b;   /* was #94a3b8 — only 2.56:1 on white, failed WCAG AA */
  --border:     #e2e8f0;
  --bg:         #f1f5f9;
  --card:       #ffffff;
  --shadow-sm:  0 1px 3px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
  --shadow:     0 4px 20px rgba(15,23,42,.09), 0 2px 6px rgba(15,23,42,.05);
  --shadow-lg:  0 12px 40px rgba(15,23,42,.14);
  --radius:     12px;
  --radius-sm:  8px;
  --header-h:   62px;
  --topbar-h:   34px;
  --font:       'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'Manrope', 'Inter', 'Segoe UI', system-ui, sans-serif;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); font-size: 14px; color: var(--text); background: var(--bg); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; }
ul { list-style: none; }

/* Display type on brand surfaces & headings */
.logo, .footer-logo, .auth-logo a,
h1, h2,
.hero h1, .section-head h2, .listings-header h1,
.ad-detail-title, .ad-detail-price,
.post-ad-page h1, .auth-panel-title, .dash-name {
  font-family: var(--font-display);
}

/* ── Container ── */
.container { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 20px; border-radius: 50px; font-size: 14px;
  font-weight: 700; border: none; transition: all .18s;
  letter-spacing: .01em;
}
.btn:active { transform: scale(.96); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-d); box-shadow: 0 4px 14px rgba(251,82,38,.35); }
.btn-accent  { background: var(--accent); color: #fff; }
.btn-accent:hover  { background: var(--accent-d); }
.btn-outline { background: transparent; color: var(--accent); border: 2px solid var(--accent); }
.btn-outline:hover { background: var(--accent-l); }
.btn-ghost   { background: transparent; color: var(--text-2); border: 1.5px solid var(--border); border-radius: 8px; }
.btn-ghost:hover   { background: var(--bg); border-color: #c8d4e0; }
.btn-lg { padding: 12px 28px; font-size: 15px; }

/* ── TOP BAR ── */
.top-bar {
  height: var(--topbar-h);
  background: var(--primary-d);
  font-size: 12px; color: rgba(255,255,255,.55);
}
.top-bar .container {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
}
.lang-switcher a, .lang-switcher span { margin-right: 6px; }
.lang-switcher a { color: rgba(255,255,255,.55); transition: color .15s; }
.lang-switcher a:hover { color: var(--accent); }
.lang-switcher .active { color: var(--accent); font-weight: 700; }
.top-links { display: flex; align-items: center; gap: 16px; }
.top-links a { color: rgba(255,255,255,.55); transition: color .15s; }
.top-links a:hover { color: #fff; }

/* ── HEADER ── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--primary);
  box-shadow: 0 2px 20px rgba(15,23,42,.25);
}
.header-inner {
  height: var(--header-h);
  display: flex; align-items: center; gap: 20px;
}

/* Logo */
.logo {
  display: flex; align-items: center; gap: 0;
  font-size: 21px; font-weight: 900; color: #fff; flex-shrink: 0;
  letter-spacing: -.5px;
}
.logo-emoji { display: none; }
.logo-text { letter-spacing: -.3px; }
.logo-text span {
  color: var(--accent);
  background: var(--accent);
  color: #fff;
  padding: 1px 6px; border-radius: 5px;
  font-size: 18px; margin: 0 1px;
}

/* Search */
.main-search {
  flex: 1; display: flex; gap: 0;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.15);
  border-radius: 50px; overflow: hidden;
  transition: border-color .2s, background .2s;
}
.main-search:focus-within {
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.35);
}
.main-search input {
  flex: 1; border: none; padding: 10px 18px;
  font-size: 14px; outline: none;
  background: transparent; color: #fff;
}
.main-search input::placeholder { color: rgba(255,255,255,.45); }
.main-search select {
  border: none; border-left: 1px solid rgba(255,255,255,.15);
  padding: 0 14px; font-size: 13px;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.8);
  outline: none; cursor: pointer; min-width: 150px;
}
.main-search select option { background: var(--primary); color: #fff; }
.main-search .search-btn {
  background: var(--accent); color: #fff; border: none;
  padding: 0 22px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background .15s; border-radius: 0 50px 50px 0;
}
.main-search .search-btn:hover { background: var(--accent-d); }

.header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.btn-post-ad {
  background: var(--accent); color: #fff !important; border: none !important;
  border-radius: 50px; font-weight: 700; font-size: 13px;
  padding: 8px 18px;
  box-shadow: 0 2px 12px rgba(251,82,38,.4);
  transition: all .18s;
}
.btn-post-ad:hover { background: var(--accent-d); box-shadow: 0 4px 18px rgba(251,82,38,.5); }

.btn-user {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.1); color: #fff;
  border: 1.5px solid rgba(255,255,255,.2); border-radius: 50px;
  padding: 7px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all .15s;
}
.btn-user:hover { background: rgba(255,255,255,.18); }
.btn-user .avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px;
}

.header-nav { display: flex; gap: 4px; }
.header-nav a {
  color: rgba(255,255,255,.75); font-size: 14px; font-weight: 500;
  padding: 6px 12px; border-radius: 8px; transition: all .15s;
}
.header-nav a:hover, .header-nav a.active {
  background: rgba(255,255,255,.12); color: #fff;
}

/* ── HERO ── */
.hero {
  background: linear-gradient(135deg, var(--primary-d) 0%, var(--primary) 50%, var(--primary-m) 100%);
  padding: 34px 0 30px;
  text-align: center; color: #fff;
  position: relative; overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(251,82,38,.12) 0%, transparent 70%);
  pointer-events: none;
}
/* The ad count is now the whole headline, so it is sized like a subtitle rather than
   like a slogan — the hero exists to hold the search box, not to fill a screen. */
.hero-title {
  font-size: 17px; font-weight: 600; opacity: .8;
  letter-spacing: 0; line-height: 1.3; margin-bottom: 20px;
}
.hero-title strong { font-weight: 800; color: #fff; opacity: 1; }

.hero-search {
  display: flex; gap: 0; max-width: 460px; margin: 0 auto 20px;
  background: #fff; border-radius: 50px; overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
  transition: max-width .45s cubic-bezier(.4,0,.2,1), box-shadow .3s;
}
.hero-search:focus-within {
  max-width: 700px;
  box-shadow: 0 12px 48px rgba(0,0,0,.35);
}
.hero-search input {
  flex: 1; border: none; padding: 15px 24px; font-size: 15px; outline: none;
  color: var(--text);
}
.hero-search select {
  border: none; border-left: 1px solid transparent;
  padding: 0; font-size: 13px; color: var(--text-2);
  background: #fafafa; outline: none; cursor: pointer;
  min-width: 0; max-width: 0; opacity: 0; overflow: hidden;
  pointer-events: none;
  transition: max-width .4s cubic-bezier(.4,0,.2,1), opacity .25s, padding .4s, border-left-color .3s;
}
.hero-search:focus-within select {
  max-width: 200px; opacity: 1;
  padding: 0 16px; border-left-color: var(--border);
  pointer-events: auto;
}
.hero-search button {
  background: var(--accent); color: #fff; border: none;
  padding: 0; font-size: 15px; font-weight: 800; cursor: pointer;
  border-radius: 0 50px 50px 0; letter-spacing: .01em;
  max-width: 0; opacity: 0; overflow: hidden;
  pointer-events: none;
  transition: max-width .4s cubic-bezier(.4,0,.2,1), opacity .25s .1s, padding .4s, background .15s;
}
.hero-search:focus-within button {
  max-width: 160px; opacity: 1;
  padding: 0 32px;
  pointer-events: auto;
}
.hero-search button:hover { background: var(--accent-d); }

.hero-stats { font-size: 12px; opacity: .55; letter-spacing: .02em; }

/* ── SECTION HEADERS ── */
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.section-head h2 {
  font-size: 18px; font-weight: 800; color: var(--text);
  position: relative; padding-left: 14px;
}
.section-head h2::before {
  content: '';
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 18px; background: var(--accent); border-radius: 2px;
}
.section-head a { font-size: 13px; color: var(--accent); font-weight: 600; }
.section-head a:hover { text-decoration: underline; }
.section-head-actions { display: flex; align-items: center; gap: 14px; }

/* ── CATEGORIES ── */
.categories-section { padding: 24px 0 4px; }

/* Collapsing the grid is a height problem, not a "hide the last N cards" problem: the
   column count changes at every breakpoint (7 / 4 / 3), so counting cards would show a
   different, sometimes half-empty, number of rows on each. Clamping to an exact multiple
   of the row height keeps whole rows visible everywhere — hence the fixed card height,
   which also stops a two-line category name from making its row taller than the rest.

   Why collapse at all: 26 top-level categories is 4 rows on a desktop and 9 on a phone,
   roughly 900px of icons before the first ad. The ads are what people came for. */
.categories-grid {
  --cat-card-h: 92px;
  --cat-gap: 12px;
  --cat-rows: 2;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--cat-gap);
  transition: max-height .35s cubic-bezier(.4,0,.2,1);
}
.categories-grid.collapsed {
  max-height: calc(var(--cat-card-h) * var(--cat-rows) + var(--cat-gap) * (var(--cat-rows) - 1));
  overflow: hidden;
}
@media (max-width: 900px) { .categories-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 550px) { .categories-grid { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { .categories-grid { transition: none; } }

.cat-toggle {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; padding: 6px 2px;
  font-size: 13px; font-weight: 600; color: var(--accent);
  min-height: 34px;                 /* keeps the tap target usable on a phone */
}
.cat-toggle:hover { text-decoration: underline; }
.cat-toggle-count { font-weight: 600; margin-left: 4px; opacity: .7; }
.cat-toggle-chev { transition: transform .25s; }
.cat-toggle[aria-expanded="false"] .cat-toggle-less { display: none; }
.cat-toggle[aria-expanded="true"]  .cat-toggle-more,
.cat-toggle[aria-expanded="true"]  .cat-toggle-count { display: none; }
.cat-toggle[aria-expanded="true"]  .cat-toggle-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .cat-toggle-chev { transition: none; } }

.cat-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: var(--cat-card-h);
  padding: 10px 8px; border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow-sm);
  border: 1.5px solid transparent;
  transition: all .2s; cursor: pointer;
}
.cat-card:hover {
  border-color: var(--accent); box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.cat-icon {
  font-size: 30px; margin-bottom: 8px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  height: 30px; color: var(--primary-m);
  transition: transform .2s, color .2s;
}
.cat-card:hover .cat-icon { transform: scale(1.12); color: var(--accent); }
.cat-name { font-size: 11px; font-weight: 700; text-align: center; color: var(--text); line-height: 1.3; }
.cat-count { font-size: 10px; color: var(--text-3); margin-top: 3px; font-weight: 600; }

/* ── MAIN LAYOUT ── */
.main-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  padding: 28px 0;
  align-items: start;
}
@media (max-width: 900px) { .main-layout { grid-template-columns: 1fr; } }

/* ── AD CARDS ── */
.ads-section { }
.ads-list { display: flex; flex-direction: column; gap: 12px; }

.ad-card {
  background: var(--card); border-radius: var(--radius);
  border: 1.5px solid var(--border); box-shadow: var(--shadow-sm);
  display: flex; gap: 0; overflow: hidden;
  transition: all .2s;
}
.ad-card:hover {
  box-shadow: var(--shadow);
  border-color: #c8d4e0;
  transform: translateY(-1px);
}
.ad-card.promoted {
  border-left: 3px solid var(--gold);
  background: linear-gradient(to right, #fffbeb 0%, #fff 80px);
}

.ad-img-wrap {
  width: 200px; flex-shrink: 0; position: relative; overflow: hidden;
  background: var(--bg);
}
.ad-img-wrap img {
  width: 100%; height: 148px; object-fit: cover;
  transition: transform .35s ease;
}
.ad-card:hover .ad-img-wrap img { transform: scale(1.06); }
.ad-img-placeholder {
  width: 100%; height: 148px; display: flex; align-items: center;
  justify-content: center; font-size: 40px; color: #d1d9e0;
  background: #f8fafc;
}

.promoted-badge {
  position: absolute; top: 8px; left: 8px;
  background: var(--gold); color: #7a4f00;
  font-size: 10px; font-weight: 800;
  padding: 3px 8px; border-radius: 20px;
  letter-spacing: .3px; text-transform: uppercase;
}

.ad-body {
  flex: 1; padding: 14px 18px; display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.ad-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.ad-category {
  font-size: 11px; color: var(--accent); font-weight: 700;
  background: var(--accent-l); padding: 2px 8px; border-radius: 20px;
  display: inline-flex; align-items: center; gap: 4px;
}
.ad-category svg { flex: none; }
.ad-location { font-size: 11px; color: var(--text-3); font-weight: 500; }
.ad-date     { font-size: 11px; color: var(--text-3); margin-left: auto; }

.ad-title {
  font-size: 15px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin: 4px 0 2px;
}
.ad-title:hover { color: var(--accent); }

.ad-desc {
  font-size: 13px; color: var(--text-2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

.ad-footer { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 8px; }
.ad-price {
  font-size: 18px; font-weight: 900; color: var(--green);
  letter-spacing: -.3px;
}
.ad-price.free { color: var(--text-3); font-size: 13px; font-weight: 600; }
.ad-seller { font-size: 12px; color: var(--text-3); margin-left: auto; font-weight: 500; }

.btn-fav {
  background: none; border: 1.5px solid var(--border); border-radius: 8px;
  width: 34px; height: 34px; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3); transition: all .15s; flex-shrink: 0;
}
.btn-fav:hover { border-color: var(--red); color: var(--red); background: #fef2f2; }
.btn-fav.active { border-color: var(--red); color: var(--red); background: #fef2f2; }

/* Grid view */
.ads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
}
.ads-grid .ad-card { flex-direction: column; }
.ads-grid .ad-img-wrap { width: 100%; }
.ads-grid .ad-img-wrap img { height: 160px; }
.ads-grid .ad-img-placeholder { height: 160px; }
.ads-grid .ad-date { margin-left: 0; }
.ads-grid .ad-title { white-space: normal; -webkit-line-clamp: 2;
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

/* ── SIDEBAR ── */
.sidebar { display: flex; flex-direction: column; gap: 16px; }

.sidebar-card {
  background: var(--card); border-radius: var(--radius);
  border: 1.5px solid var(--border); box-shadow: var(--shadow-sm);
  padding: 18px;
}
.sidebar-card h3 {
  font-size: 13px; font-weight: 800; margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-2);
}

.city-list { display: flex; flex-direction: column; gap: 1px; }
.city-link {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; border-radius: 8px; font-size: 13px; font-weight: 500;
  transition: all .12s; color: var(--text-2);
}
.city-link:hover { background: var(--accent-l); color: var(--accent); }
.city-count { font-size: 11px; color: var(--text-3); }

.cities-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.city-chip {
  padding: 5px 12px; border-radius: 20px;
  background: var(--bg); color: var(--text-2);
  font-size: 12px; font-weight: 600; border: 1.5px solid var(--border);
  transition: all .15s; cursor: pointer;
}
.city-chip:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── FILTER BAR ── */
.filter-bar {
  background: var(--card); border-radius: var(--radius);
  border: 1.5px solid var(--border); box-shadow: var(--shadow-sm);
  padding: 16px 18px; margin-bottom: 18px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
}
.filter-group { display: flex; flex-direction: column; gap: 5px; }
.filter-group label { font-size: 11px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.filter-group input, .filter-group select {
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 12px; font-size: 13px; outline: none;
  transition: border-color .15s; background: var(--card); color: var(--text);
}
.filter-group input:focus, .filter-group select:focus { border-color: var(--accent); }

.view-toggle { display: flex; gap: 4px; margin-left: auto; }
.view-btn {
  padding: 8px 11px; border-radius: 8px; background: none;
  border: 1.5px solid var(--border); font-size: 16px; color: var(--text-3);
  transition: all .15s;
}
.view-btn.active, .view-btn:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ── PAGINATION ── */
.pagination {
  display: flex; justify-content: center; gap: 6px;
  margin: 28px 0; flex-wrap: wrap;
}
.page-btn {
  min-width: 38px; height: 38px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--card);
  font-size: 14px; font-weight: 600; color: var(--text-2);
  transition: all .15s;
}
.page-btn:hover { border-color: var(--accent); color: var(--accent); }
.page-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 3px 10px rgba(251,82,38,.3); }
.page-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ── AD DETAIL ── */
.ad-detail-layout {
  display: grid; grid-template-columns: 1fr 380px;
  gap: 28px; padding: 28px 0; align-items: start;
}
@media (max-width: 900px) { .ad-detail-layout { grid-template-columns: 1fr; } }

.gallery { border-radius: var(--radius); overflow: hidden; background: #0a0a0f; box-shadow: var(--shadow); }
.gallery-main { position: relative; }
.gallery-main img { width: 100%; height: 420px; object-fit: contain; background: #0f0f1a; }
.gallery-no-img {
  width: 100%; height: 420px; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-size: 72px; color: #d1d9e0;
}
.gallery-thumbs {
  display: flex; gap: 6px; padding: 10px 12px;
  background: #0a0a0f; overflow-x: auto;
}
.gallery-thumbs::-webkit-scrollbar { height: 3px; }
.gallery-thumbs::-webkit-scrollbar-track { background: transparent; }
.gallery-thumbs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 2px; }
.gallery-thumb {
  width: 68px; height: 50px; object-fit: cover; border-radius: 6px;
  opacity: .5; cursor: pointer; flex-shrink: 0;
  transition: all .15s; border: 2px solid transparent;
}
.gallery-thumb:hover { opacity: .85; }
.gallery-thumb.active { opacity: 1; border-color: var(--accent); }

.gallery-prev, .gallery-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,.5); color: #fff;
  border: none; border-radius: 50%;
  width: 44px; height: 44px; font-size: 24px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 10; transition: all .15s; user-select: none;
  backdrop-filter: blur(4px);
}
.gallery-prev:hover, .gallery-next:hover { background: var(--accent); }
.gallery-prev { left: 12px; }
.gallery-next { right: 12px; }

.ad-detail-info { display: flex; flex-direction: column; gap: 16px; }
.ad-detail-title { font-size: 22px; font-weight: 900; line-height: 1.3; }
.ad-detail-price { font-size: 30px; font-weight: 900; color: var(--green); letter-spacing: -.5px; }
.ad-detail-price.free-price { font-size: 18px; color: var(--text-3); font-weight: 600; }

.info-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text-2); padding: 4px 0;
}
.info-row .label { font-weight: 700; color: var(--text); min-width: 85px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

.contact-card {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  box-shadow: var(--shadow-sm);
}
.contact-seller { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.contact-type { font-size: 12px; color: var(--text-3); margin-bottom: 16px; font-weight: 500; }
.contact-btn {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; width: 100%; padding: 13px;
  border-radius: 50px; font-size: 14px; font-weight: 700;
  border: none; cursor: pointer; margin-bottom: 10px;
  transition: all .18s; letter-spacing: .01em;
}
.contact-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-phone    { background: var(--green); color: #fff; }
.btn-whatsapp { background: #25D366; color: #fff; }
.btn-viber    { background: #7360F2; color: #fff; }

.ad-description {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 22px;
  box-shadow: var(--shadow-sm); line-height: 1.75; font-size: 14px;
  white-space: pre-wrap; color: var(--text-2);
}
/*
 * Same card, without the newline preservation.
 *
 * .ad-description keeps `white-space: pre-wrap` because an ad's body is typed into a
 * textarea and its line breaks are the seller's own. The static pages are hand-written
 * HTML, where every source newline and every indent then rendered as literal blank
 * space — which is what made the privacy policy read as a column of gaps on a phone.
 */
.ad-description.prose { white-space: normal; }
.ad-description.prose p { margin: 0 0 12px; }
.ad-description.prose p:last-child { margin-bottom: 0; }
.ad-description.prose ul { margin: 0 0 12px; padding-left: 20px; }
.ad-description.prose li { margin-bottom: 6px; }

.ad-description h3 { font-size: 15px; font-weight: 800; margin-bottom: 12px; color: var(--text); }

.ad-attributes {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 22px;
  box-shadow: var(--shadow-sm);
}
.ad-attributes h3 { font-size: 15px; font-weight: 800; margin-bottom: 14px; color: var(--text); }
.attr-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.attr-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 20px; padding: 5px 12px; font-size: 13px;
}
.attr-label { color: var(--text-3); font-weight: 600; }
.attr-value { color: var(--text); }

/* ── POST AD FORM ── */
.post-ad-page { padding: 28px 0 48px; }
.post-ad-page h1 { font-size: 24px; font-weight: 900; margin-bottom: 24px; }

.steps {
  display: flex; gap: 0; margin-bottom: 24px;
  background: var(--card); border-radius: var(--radius);
  border: 1.5px solid var(--border); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.step {
  flex: 1; padding: 13px 16px; text-align: center;
  font-size: 13px; font-weight: 600; color: var(--text-3);
  border-right: 1px solid var(--border); position: relative;
}
.step:last-child { border-right: none; }
.step.active { color: var(--accent); background: var(--accent-l); }
.step.done   { color: var(--green); background: var(--green-l); }
.step .step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--border); color: var(--text-3);
  font-size: 12px; font-weight: 800; margin-right: 6px;
}
.step.active .step-num { background: var(--accent); color: #fff; }
.step.done   .step-num { background: var(--green); color: #fff; }

.form-panel {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 26px;
  box-shadow: var(--shadow-sm); margin-bottom: 16px;
}
.form-panel h2 { font-size: 16px; font-weight: 800; margin-bottom: 22px; color: var(--text); }

.seller-toggle {
  display: flex; gap: 0; margin-bottom: 22px;
  border: 1.5px solid var(--border); border-radius: 50px; overflow: hidden;
  width: fit-content; background: var(--bg);
}
.seller-toggle label {
  padding: 8px 22px; font-size: 14px; font-weight: 600;
  cursor: pointer; color: var(--text-2); transition: all .15s;
}
.seller-toggle input:checked + label { background: var(--primary); color: #fff; border-radius: 50px; }
.seller-toggle input { display: none; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 12px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.form-field input, .form-field select, .form-field textarea {
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 14px; font-size: 14px; font-family: inherit;
  outline: none; transition: border-color .15s; background: var(--card); color: var(--text);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(251,82,38,.1);
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-hint { font-size: 11px; color: var(--text-3); margin-top: 2px; }

.price-row { display: flex; gap: 10px; }
.price-row input { flex: 1; }
.price-row .currency-group {
  display: flex; gap: 0; border: 1.5px solid var(--border); border-radius: 50px; overflow: hidden; background: var(--bg);
}
.price-row .currency-group label {
  padding: 0 18px; display: flex; align-items: center;
  font-size: 13px; font-weight: 700; cursor: pointer;
  transition: all .12s; color: var(--text-2);
}
.price-row .currency-group input:checked + label { background: var(--primary); color: #fff; border-radius: 50px; }
.price-row .currency-group input { display: none; }

.image-upload-zone {
  border: 2px dashed var(--border); border-radius: var(--radius);
  padding: 36px; text-align: center;
  cursor: pointer; transition: all .2s; background: var(--bg);
}
.image-upload-zone:hover { border-color: var(--accent); background: var(--accent-l); }
.upload-icon { font-size: 44px; margin-bottom: 12px; }
.upload-text { font-size: 14px; color: var(--text-2); font-weight: 600; }
.upload-hint { font-size: 12px; color: var(--text-3); margin-top: 6px; }
.image-input { display: none; }

.image-previews { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.img-preview-wrap {
  position: relative; width: 100px; height: 82px; border-radius: 8px; overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.img-preview-wrap img { width: 100%; height: 100%; object-fit: cover; }
.img-remove {
  position: absolute; top: 4px; right: 4px;
  background: rgba(0,0,0,.65); color: #fff;
  border: none; border-radius: 50%; width: 20px; height: 20px;
  font-size: 11px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s;
}
.img-remove:hover { background: var(--red); }

.form-actions {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px;
}

/* ── AUTH SPLIT ── */
.auth-split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 860px) {
  .auth-split { grid-template-columns: 1fr; }
  .auth-panel-left { display: none; }
}

.auth-panel-left {
  background: linear-gradient(145deg, var(--primary-d) 0%, var(--primary) 55%, var(--primary-m) 100%);
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 48px 40px;
}
.auth-panel-left::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}
.auth-panel-left::after {
  content: '';
  position: absolute; bottom: -120px; right: -120px;
  width: 400px; height: 400px; border-radius: 50%;
  background: rgba(251,82,38,.08);
  pointer-events: none;
}
.auth-panel-inner {
  position: relative; z-index: 1;
  max-width: 380px; width: 100%;
}
.auth-panel-logo { display: inline-block; margin-bottom: 40px; }
.auth-panel-logo img { height: 44px; }
.auth-panel-title {
  font-size: 30px; font-weight: 900; color: #fff;
  line-height: 1.2; margin-bottom: 14px; letter-spacing: -.5px;
}
.auth-panel-sub {
  font-size: 14px; color: rgba(255,255,255,.6);
  line-height: 1.7; margin-bottom: 36px;
}
.auth-features {
  list-style: none; display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 40px;
}
.auth-features li {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; color: rgba(255,255,255,.8); font-weight: 500;
}
.auth-feat-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.auth-deco-card {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 14px 16px;
  backdrop-filter: blur(4px);
}

.auth-panel-right {
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 32px; overflow-y: auto;
}
.auth-card {
  background: var(--card); border-radius: 20px;
  padding: 36px; width: 100%; max-width: 420px;
  box-shadow: var(--shadow-lg);
}

/* Legacy centered layout (kept for other pages using .auth-page) */
.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, var(--primary-d) 0%, var(--primary) 60%, var(--primary-m) 100%);
}
.auth-logo { text-align: center; margin-bottom: 28px; }
.auth-logo a { font-size: 26px; font-weight: 900; color: var(--primary); }
.auth-logo a span {
  color: #fff; background: var(--accent);
  padding: 1px 7px; border-radius: 6px; font-size: 22px; margin: 0 1px;
}

.auth-tabs {
  display: flex; gap: 0; margin-bottom: 26px;
  background: var(--bg); border-radius: 50px; padding: 4px;
}
.auth-tab {
  flex: 1; padding: 9px; text-align: center;
  font-size: 14px; font-weight: 700; color: var(--text-3);
  cursor: pointer; border-radius: 50px;
  transition: all .2s;
}
.auth-tab.active { background: var(--primary); color: #fff; }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form .form-field label { font-size: 12px; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }
.auth-form .form-field input {
  border: 1.5px solid var(--border); border-radius: 10px;
  padding: 12px 14px; font-size: 14px; width: 100%; outline: none;
  transition: all .15s; color: var(--text);
}
.auth-form .form-field input:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(251,82,38,.1);
}
.auth-form .btn { width: 100%; justify-content: center; padding: 13px; font-size: 15px; border-radius: 50px; }
.auth-divider { text-align: center; font-size: 13px; color: var(--text-3); }
.auth-divider a { color: var(--accent); font-weight: 700; }
/* ── CAPTCHA ── */
.captcha-wrap {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.captcha-wrap canvas {
  border-radius: 8px; flex-shrink: 0; display: block;
}
.captcha-refresh {
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 8px; width: 36px; height: 36px;
  font-size: 20px; cursor: pointer; color: var(--text-2);
  transition: all .15s; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.captcha-refresh:hover { background: var(--accent-l); border-color: var(--accent); color: var(--accent); }

.btn-google {
  width: 100%; display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 11px; border-radius: 50px;
  border: 1.5px solid var(--border); background: var(--card);
  font-size: 14px; font-weight: 600; color: var(--text);
  cursor: pointer; transition: all .15s; margin-bottom: 4px;
}
.btn-google:hover { background: var(--bg); border-color: #c8d4e0; box-shadow: var(--shadow-sm); }
.btn-google:disabled { opacity: .6; cursor: not-allowed; }

.auth-divider-line {
  display: flex; align-items: center; gap: 10px;
  margin: 6px 0; color: var(--text-3); font-size: 12px;
}
.auth-divider-line::before, .auth-divider-line::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

.auth-error {
  background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px;
  padding: 12px 14px; font-size: 13px; color: var(--red); font-weight: 500;
}
.auth-success {
  background: var(--green-l); border: 1px solid #6ee7b7; border-radius: 10px;
  padding: 12px 14px; font-size: 13px; color: var(--green); font-weight: 500;
}
.consent-label {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12px; color: var(--text-2); line-height: 1.5; cursor: pointer;
}
.consent-label input[type="checkbox"] {
  margin-top: 2px; flex-shrink: 0;
  width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer;
}
.consent-label a { color: var(--accent); font-weight: 600; }
.consent-label a:hover { text-decoration: underline; }

.resend-btn {
  display: inline-block; margin-top: 8px;
  background: none; border: none; padding: 0;
  font-size: 12px; color: var(--green); font-weight: 600;
  text-decoration: underline; cursor: pointer;
}
.resend-btn:hover { opacity: .75; }
.resend-btn:disabled { opacity: .5; cursor: not-allowed; text-decoration: none; }

/* ── BREADCRUMB ── */
.breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-3); padding: 12px 0;
  flex-wrap: wrap; font-weight: 500;
}
.breadcrumb a { color: var(--accent); font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: var(--border); }

/* ── LISTINGS PAGE HEADER ── */
.listings-header {
  background: var(--card); border-bottom: 1.5px solid var(--border);
  padding: 14px 0;
}
.listings-header h1 { font-size: 20px; font-weight: 900; margin-bottom: 3px; }
.listings-header .count { font-size: 13px; color: var(--text-3); font-weight: 500; }

/* ── EMPTY STATE ── */
.empty-state { padding: 64px 20px; text-align: center; }
.empty-state .icon { font-size: 68px; margin-bottom: 18px; opacity: .4; }
.empty-state h3 { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.empty-state p { font-size: 14px; color: var(--text-2); }

/* ── SKELETON ── */
.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
  border-radius: 6px;
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.sk-card {
  height: 148px; border-radius: var(--radius);
  background: var(--card); border: 1.5px solid var(--border);
  overflow: hidden; display: flex; gap: 0;
}
.sk-img   { width: 200px; flex-shrink: 0; }
.sk-img > div { width: 100%; height: 100%; }
.sk-body  { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.sk-line  { height: 12px; border-radius: 6px; }
.sk-line.short { width: 55%; }
.sk-line.long  { width: 88%; }

/* ── TOAST ── */
.toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  background: var(--primary); color: #fff; padding: 13px 20px;
  border-radius: 12px; font-size: 14px; font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: toast-in .25s ease; display: flex; align-items: center; gap: 10px;
  max-width: 320px;
}
.toast.success { background: var(--green); }
.toast.error   { background: var(--red); }
@keyframes toast-in {
  from { opacity:0; transform: translateY(12px) scale(.95); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}

/* ── FOOTER ── */
.site-footer {
  background: var(--primary-d); color: rgba(255,255,255,.6);
  padding: 44px 0 24px; margin-top: 48px;
}
.footer-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 32px; margin-bottom: 36px;
}
@media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 400px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-col h4 {
  color: #fff; font-size: 11px; font-weight: 800;
  margin-bottom: 14px; text-transform: uppercase; letter-spacing: .08em;
}
.footer-col ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col li a { font-size: 13px; color: rgba(255,255,255,.5); transition: color .15s; }
.footer-col li a:hover { color: var(--accent); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08); padding-top: 22px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px; font-size: 12px; color: rgba(255,255,255,.35);
}
.footer-logo { font-size: 18px; font-weight: 900; color: rgba(255,255,255,.7); }
.footer-logo span { color: var(--accent); }

/* ── Responsive ── */
@media (max-width: 700px) {
  .hero h1 { font-size: 22px; }
  .hero-search { flex-direction: column; border-radius: 16px; }
  .hero-search input, .hero-search select, .hero-search button {
    width: 100%; border-radius: 0; border-left: none;
  }
  .hero-search button { padding: 15px; border-radius: 0 0 16px 16px; }
  .ad-img-wrap { width: 130px; }
  .ad-img-wrap img { height: 120px; }
  .ad-img-placeholder { height: 120px; }
}

/* ── User dropdown menu ── */
.user-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  min-width: 190px; z-index: 200; padding: 6px 0;
  animation: toast-in .15s ease;
}
.user-dropdown a.user-menu-item {
  display: block; padding: 10px 16px; font-size: 13px; font-weight: 600;
  color: var(--text-2) !important; transition: all .12s;
}
.user-dropdown a.user-menu-item:hover { background: var(--bg); color: var(--accent) !important; }
.user-menu-sep { border-top: 1px solid var(--border); margin: 4px 0; }
.user-dropdown a.user-menu-logout { color: var(--red) !important; }
.user-dropdown a.user-menu-logout:hover { background: #fef2f2 !important; }

/* ── Dashboard ── */
.dash-banner {
  display: flex; align-items: center; gap: 20px;
  background: linear-gradient(135deg, var(--primary-d), var(--primary-m));
  border-radius: var(--radius); padding: 28px 32px; margin-bottom: 24px;
  color: #fff;
}
.dash-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 900; flex-shrink: 0;
}
.dash-name       { font-size: 22px; font-weight: 900; margin-bottom: 4px; }
.dash-email      { font-size: 13px; opacity: .65; }
.dash-last-login { font-size: 12px; opacity: .45; margin-top: 4px; }

.dash-stats {
  display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.dash-stat {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 18px 24px;
  display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px;
  box-shadow: var(--shadow-sm);
}
.dash-stat-val   { font-size: 28px; font-weight: 900; color: var(--accent); }
.dash-stat-label { font-size: 12px; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

.dash-profile-card {
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 24px 28px;
  box-shadow: var(--shadow-sm); margin-bottom: 24px;
}
.dash-section-title { font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.dash-section-sub   { font-size: 13px; color: var(--text-3); }

.dash-actions {
  display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 8px;
}
.dash-action-card {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: var(--card); border: 1.5px solid var(--border);
  border-radius: var(--radius); padding: 22px 28px;
  box-shadow: var(--shadow-sm); transition: all .2s; flex: 1; min-width: 120px;
  text-align: center;
}
.dash-action-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-2px); }
.dash-action-icon  { font-size: 28px; }
.dash-action-label { font-size: 13px; font-weight: 700; color: var(--text); }

/* ── Messages header button ── */
.btn-messages {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.1); color: #fff;
  border: 1.5px solid rgba(255,255,255,.2); border-radius: 50px;
  padding: 7px 14px; font-size: 13px; font-weight: 600;
  transition: all .15s; position: relative;
}
.btn-messages:hover { background: rgba(255,255,255,.18); }
.msg-badge {
  background: var(--red); color: #fff;
  font-size: 11px; font-weight: 800;
  min-width: 18px; height: 18px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 4px;
}

/* ── Compose modal (ad page) ── */
.msg-compose-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.55); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; animation: toast-in .2s ease;
}
.msg-compose-inner {
  background: var(--card); border-radius: var(--radius);
  width: 100%; max-width: 480px; box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.msg-compose-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  font-size: 14px; font-weight: 700;
}
.msg-compose-textarea {
  width: 100%; border: none; border-bottom: 1px solid var(--border);
  padding: 14px 18px; font-size: 14px; font-family: inherit;
  resize: none; outline: none; color: var(--text);
}
.msg-compose-actions {
  display: flex; gap: 10px; padding: 12px 18px; justify-content: flex-end;
}
.btn-message { background: var(--primary); color: #fff; }
.btn-message:hover { background: var(--primary-m); }

/* ── Messages inbox page ── */
.messages-layout {
  display: grid; grid-template-columns: 280px 1fr;
  gap: 0; height: calc(100vh - 180px); min-height: 400px;
  background: var(--card); border-radius: var(--radius);
  border: 1.5px solid var(--border); box-shadow: var(--shadow-sm);
  overflow: hidden;
}
@media (max-width: 700px) { .messages-layout { grid-template-columns: 1fr; } }

.conv-list {
  border-right: 1.5px solid var(--border);
  overflow-y: auto;
}
.conv-item {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.conv-item:hover   { background: var(--bg); }
.conv-item.active  { background: var(--accent-l); }
.conv-item.conv-unread .conv-name { font-weight: 900; }
.conv-item.conv-unread .conv-preview { color: var(--text); }
.conv-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; flex-shrink: 0;
}
.conv-info { flex: 1; min-width: 0; }
.conv-name    { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-preview { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.conv-time    { font-size: 11px; color: var(--text-3); flex-shrink: 0; }

.msg-thread {
  display: flex; flex-direction: column; overflow: hidden;
}
.msg-thread-empty, .msg-thread-loading {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--text-3); font-size: 14px; gap: 10px;
}
.msg-thread-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-bottom: 1px solid var(--border);
  font-size: 14px; font-weight: 700; flex-shrink: 0;
}
.msg-bubbles {
  flex: 1; overflow-y: auto; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.msg-bubble { display: flex; flex-direction: column; max-width: 70%; }
.msg-bubble.mine   { align-self: flex-end; align-items: flex-end; }
.msg-bubble.theirs { align-self: flex-start; align-items: flex-start; }
.msg-text {
  padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5;
  word-break: break-word;
}
.msg-bubble.mine   .msg-text { background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.msg-bubble.theirs .msg-text { background: var(--bg); color: var(--text); border-bottom-left-radius: 4px; border: 1.5px solid var(--border); }
.msg-time { font-size: 11px; color: var(--text-3); margin-top: 3px; padding: 0 4px; }
.msg-reply-box {
  display: flex; gap: 10px; padding: 12px 18px;
  border-top: 1.5px solid var(--border); flex-shrink: 0; align-items: flex-end;
}
.msg-reply-box textarea { flex: 1; }

/* ── Map preview ── */
.map-preview {
  position: relative; border-radius: var(--radius-sm); overflow: hidden;
  cursor: pointer; height: 150px;
  border: 1.5px solid var(--border); box-shadow: var(--shadow-sm);
  margin-bottom: 10px;
}
.map-preview-frame {
  width: 100%; height: 100%; border: none; pointer-events: none; display: block;
}
.map-preview-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0); transition: background .2s;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 10px;
}
.map-preview:hover .map-preview-overlay { background: rgba(0,0,0,.18); }
.map-expand-hint {
  background: rgba(255,255,255,.92); color: var(--text);
  font-size: 12px; font-weight: 700; padding: 5px 14px; border-radius: 20px;
  opacity: 0; transform: translateY(6px); transition: all .2s;
  box-shadow: var(--shadow-sm);
}
.map-preview:hover .map-expand-hint { opacity: 1; transform: translateY(0); }

.map-modal {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; animation: toast-in .2s ease;
}
.map-modal-inner {
  background: var(--card); border-radius: var(--radius);
  overflow: hidden; width: 100%; max-width: 640px;
  box-shadow: var(--shadow-lg);
}
.map-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  font-size: 14px; font-weight: 700;
}
.map-modal-close {
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: 8px; width: 32px; height: 32px; font-size: 14px;
  cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center;
}
.map-modal-close:hover { background: var(--red); color: #fff; border-color: var(--red); }
.map-modal-frame { width: 100%; height: 380px; border: none; display: block; }

/* ── Card flip animation ── */
.flip-wrapper { perspective: 900px; }
.flip-inner   { position: relative; transform-style: preserve-3d; }
.flip-front, .flip-back { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-front   { display: block; }
.flip-back {
  position: absolute; inset: 0;
  transform: rotateY(180deg);
  background: var(--primary);
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 18px 18px;
  border-radius: var(--radius);
  border: 1.5px solid var(--primary-m);
  display: flex; align-items: center; justify-content: center;
}
.flip-back-logo {
  font-size: 19px; font-weight: 900; color: rgba(255,255,255,.18); letter-spacing: -.5px;
}
.flip-back-logo span {
  color: rgba(251,82,38,.5); background: rgba(251,82,38,.12);
  padding: 1px 5px; border-radius: 4px;
}
@keyframes flip-in {
  0%   { transform: rotateY(180deg); }
  100% { transform: rotateY(0deg); }
}
.flip-inner.flip-animate {
  animation: flip-in .65s cubic-bezier(.4,0,.2,1) both;
}

/* ── Category entrance ── */
@keyframes cat-in {
  0%   { opacity: 0; transform: translateY(14px) scale(.9); }
  70%  { transform: translateY(-3px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
.cat-card.animate-in { animation: cat-in .4s cubic-bezier(.22,1,.36,1) both; }

/* ── Utilities ── */
.mt-16 { margin-top: 16px; }
.mb-16 { margin-bottom: 16px; }
.hidden { display: none !important; }
.loading { opacity: .5; pointer-events: none; }


/* ── Accessibility ─────────────────────────────────────────────
   Added after an audit found: no visible keyboard focus anywhere, no
   reduced-motion handling despite the staggered card animations, and 71
   interactive elements under the 44px touch-target minimum. */

/* One visible focus ring for keyboard users, on every interactive element.
   :focus-visible (not :focus) so mouse clicks don't leave rings behind. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* On the dark header the persimmon ring is low contrast — go white there. */
.site-header :focus-visible,
.top-bar :focus-visible { outline-color: #fff; }

/* Small text links (language switcher, footer) still need a 44px hit area.
   A transparent ::after keeps the layout identical and only grows the target. */
.lang-switcher a,
.footer-col a {
  position: relative;
  display: inline-block;
}
.lang-switcher a::after,
.footer-col a::after {
  content: ''; position: absolute;
  left: 0; right: 0; top: 50%;
  height: 44px; transform: translateY(-50%);
}

/* Respect the OS "reduce motion" setting: keep state changes, drop the movement.
   Without this the staggered category/ad reveals can trigger vestibular symptoms. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .cat-card:hover,
  .ad-card:hover { transform: none; }
}


/* ── Category tree navigator (listings sidebar) ────────────────
   Ads live on leaves of a 1440-node tree; this is how a visitor walks it. */
.cat-list { display: flex; flex-direction: column; gap: 1px; }
.cat-link {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: var(--radius-sm);
  font-size: 13px; color: var(--text-2); font-weight: 500;
  transition: background .15s, color .15s;
}
.cat-link:hover { background: var(--accent-l); color: var(--accent-d); }
.cat-link .city-count { color: var(--text-3); font-size: 11px; font-weight: 600; }

.cat-link-up { color: var(--text-3); font-size: 12px; padding: 5px 10px; }
.cat-link-up:hover { color: var(--accent); background: transparent; }

.cat-link-current {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; margin: 4px 0 6px;
  border-left: 3px solid var(--accent);
  background: var(--accent-l); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13px; font-weight: 700; color: var(--primary);
}
.cat-link-current svg { flex: none; color: var(--accent); }

.cat-nav-note { font-size: 12px; color: var(--text-3); padding: 6px 10px; line-height: 1.5; }


/* The home hero already presents search as the primary action; keeping the header
   search visible there put two identical inputs on screen at once. It stays on every
   other page, where there is no hero to carry it. Restored once the header sticks,
   since the hero has scrolled away by then. */
body.home .site-header .main-search { visibility: hidden; }
body.home .site-header.is-stuck .main-search { visibility: visible; }


/* ── Cascading category picker (post-ad) ───────────────────────
   One select per level of the category tree; deeper levels appear as you choose. */
.cat-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-picker-select { flex: 1 1 200px; min-width: 0; }
.form-hint-warn { color: var(--accent-d); font-weight: 600; }


/* Inline UI icons sit on the text baseline and take the colour of their container,
   which is the whole point of replacing the emoji that used to be here. */
.ui-icon { display: inline-block; vertical-align: -0.18em; flex: none; }
.contact-btn .ui-icon,
.ad-actions .ui-icon { vertical-align: -0.22em; margin-right: 2px; }
.gallery-no-img .ui-icon,
.empty-state .ui-icon { vertical-align: middle; opacity: .55; }
.map-modal-close .ui-icon { vertical-align: middle; }


/* Language switcher: the active language is a state, not a link target. */
.lang-switcher a { color: inherit; opacity: .7; transition: opacity .15s, color .15s; }
.lang-switcher a:hover { opacity: 1; color: var(--accent); }
.lang-switcher a.active { opacity: 1; font-weight: 700; color: var(--accent); cursor: default; }


/* Shown on the login page after a 401 kicked the user out mid-task. */
.session-expired-notice {
  margin: 0 0 16px; padding: 11px 14px;
  border: 1px solid var(--accent); border-left-width: 3px;
  border-radius: var(--radius-sm); background: var(--accent-l);
  color: var(--accent-d); font-size: 13px; font-weight: 600;
}


/* Restored-draft banner on the post-ad form. */
.draft-notice {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 18px; padding: 11px 14px;
  border: 1px solid var(--green); border-left-width: 3px; border-radius: var(--radius-sm);
  background: var(--green-l); color: var(--green-d); font-size: 13px; font-weight: 600;
}
.draft-discard {
  background: none; border: 1px solid currentColor; color: inherit;
  padding: 5px 10px; border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 700; font-family: inherit;
}
.draft-discard:hover { background: var(--green); color: #fff; border-color: var(--green); }


/* Per-image upload state on the post-ad form. */
.img-preview-wrap { position: relative; }
.img-state {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3px 5px; font-size: 10px; font-weight: 700; line-height: 1.3;
  text-align: center; color: #fff; background: rgba(15,23,42,.78);
}
.img-preview-wrap.img-error { outline: 2px solid var(--red); cursor: pointer; }
.img-preview-wrap.img-error .img-state { background: var(--red-d); }


/* ── Confirm dialog ────────────────────────────────────────────
   Replaces window.confirm() for destructive actions. Native <dialog> gives focus
   trapping, Esc and page inertness; only the look is ours. */
dialog.confirm-dialog {
  /* The global `* { margin: 0 }` reset overrides the UA's `margin: auto`, which is
     what centres a modal <dialog>. Without this it pins to the top-left corner. */
  margin: auto;
  border: none; padding: 0; border-radius: var(--radius);
  box-shadow: var(--shadow-lg); background: var(--card); color: var(--text);
  max-width: 420px; width: calc(100% - 32px);
}
dialog.confirm-dialog::backdrop { background: rgba(15, 23, 42, .55); }
.confirm-inner { padding: 24px 24px 18px; margin: 0; }
.confirm-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px; background: var(--accent-l); color: var(--accent-d);
}
dialog.confirm-dialog.is-danger .confirm-icon { background: #fee2e2; color: var(--red-d); }
.confirm-dialog h3 {
  font-family: var(--font-display); font-size: 17px; font-weight: 800;
  margin-bottom: 6px; color: var(--text);
}
.confirm-message { font-size: 14px; color: var(--text-2); line-height: 1.55; }
.confirm-detail {
  font-size: 12.5px; color: var(--text-3); line-height: 1.5; margin-top: 8px;
  padding: 9px 11px; border-radius: var(--radius-sm);
  background: var(--bg); border-left: 3px solid var(--border);
}
.confirm-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px;
}
.confirm-actions .btn { min-width: 104px; justify-content: center; }
.btn-danger { background: var(--red-d); color: #fff; border: none; }
.btn-danger:hover { background: #b91c1c; }

/* The dialog opens with a small rise; suppressed under reduced-motion by the
   global rule further up. */
dialog.confirm-dialog[open] { animation: confirm-in .16s ease-out; }
@keyframes confirm-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 480px) {
  .confirm-actions { flex-direction: column-reverse; }
  .confirm-actions .btn { width: 100%; }
}


/* ── Admin panel ───────────────────────────────────────────────
   Deliberately plainer than the marketplace: it is an operator tool, and looking
   different from the public site is a useful reminder of where you are. */
.admin-body { background: var(--bg); }
.admin-shell { max-width: 1100px; margin: 0 auto; padding: 40px 16px 60px; }
.admin-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 26px; margin-bottom: 18px; max-width: 100%;
}
#admin-login.admin-card { max-width: 380px; margin: 8vh auto 0; }
.admin-title { font-family: var(--font-display); font-size: 21px; font-weight: 800; }
.admin-h2 { font-family: var(--font-display); font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.admin-sub { font-size: 13px; color: var(--text-2); margin: 4px 0 18px; line-height: 1.5; }
.admin-error {
  font-size: 13px; font-weight: 600; color: var(--red-d);
  background: #fee2e2; border-radius: var(--radius-sm); padding: 9px 11px; margin-bottom: 10px;
}
.admin-back { margin-top: 16px; font-size: 13px; text-align: center; }
.admin-back a { color: var(--text-3); }
.admin-back a:hover { color: var(--accent); }

.admin-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}

/* The table is the widest thing here; let it scroll rather than the page. */
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th, .admin-table td {
  padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border);
  vertical-align: top; white-space: nowrap;
}
.admin-table th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-3); font-weight: 700; background: var(--bg);
}
.admin-table tbody tr:hover { background: var(--bg); }
.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-dim  { color: var(--text-3); font-size: 12px; }
.admin-warn { color: var(--accent-d); font-size: 11px; font-weight: 700; }
.btn-sm { padding: 5px 11px; font-size: 12px; }


/* Visually hidden but read by screen readers — the filter box has an icon, not a
   visible label, and an unlabelled input is a dead end for anyone not seeing it. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Admin filter ──────────────────────────────────────────────
   Filtering happens client-side: the user list is small and already loaded, so a
   round trip per keystroke would be slower and no more correct. */
.admin-filter { position: relative; display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.admin-filter input[type=search] {
  flex: 1 1 320px; max-width: 420px;
  padding: 9px 34px 9px 34px; font-size: 13px; font-family: inherit;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); color: var(--text);
}
.admin-filter input[type=search]:focus { border-color: var(--accent); outline: none; }
.admin-filter input[type=search]::-webkit-search-cancel-button { display: none; }
.admin-filter-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 13px; height: 13px; pointer-events: none;
  border: 1.8px solid var(--text-3); border-radius: 50%;
}
.admin-filter-icon::after {
  content: ''; position: absolute; right: -5px; bottom: -4px;
  width: 6px; height: 1.8px; background: var(--text-3); transform: rotate(45deg);
}
.admin-filter-clear {
  position: absolute; left: 392px; top: 50%; transform: translateY(-50%);
  border: none; background: none; color: var(--text-3);
  font-size: 13px; line-height: 1; padding: 4px;
}
.admin-filter-clear:hover { color: var(--accent); }

@media (max-width: 560px) {
  .admin-filter { flex-wrap: wrap; }
  .admin-filter input[type=search] { flex: 1 1 100%; max-width: none; }
  .admin-filter-clear { left: auto; right: 8px; }
}


/* ── Password reveal toggle (admin login) ──────────────────────
   Drawn in CSS rather than an emoji so it takes the theme colour and stays the
   same shape on every OS. */
.pw-wrap { position: relative; }
.pw-wrap input { width: 100%; padding-right: 42px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: none; background: none; padding: 0;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
}
.pw-toggle::before {
  content: ''; width: 17px; height: 11px;
  border: 1.7px solid var(--text-3); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transition: border-color .15s;
}
.pw-toggle::after {
  content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: var(--text-3); transition: background .15s, opacity .15s;
}
.pw-toggle:hover::before { border-color: var(--accent); }
.pw-toggle:hover::after  { background: var(--accent); }
/* "Revealed" state: a strike through the eye, the usual convention. */
.pw-toggle.is-on::before { border-color: var(--accent); }
.pw-toggle.is-on::after {
  background: var(--accent);
  box-shadow: 0 0 0 1.7px var(--card), 8px -8px 0 -1.5px var(--accent), -8px 8px 0 -1.5px var(--accent);
}


/* ── Ad video (click-to-load YouTube) ───────────────────────── */
.ad-video { margin-top: 22px; }
.ad-video h3 { margin-bottom: 10px; }
.video-frame {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16 / 9;      /* reserves the space before the image loads, so the
                                page does not jump when it arrives */
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: #000;
}
.video-frame img,
.video-frame iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.video-play {
  position: absolute; inset: 0; margin: auto;
  width: 68px; height: 48px; border: 0; border-radius: 12px;
  background: rgba(0,0,0,.72); color: #fff; font-size: 22px; line-height: 1;
  cursor: pointer; transition: background .2s;
}
.video-frame:hover .video-play { background: #FB5226; }

/* "Бесплатно" is a different claim from "По договор" and should not look the same.
   Free is a positive, definite statement — it gets the green the site already uses for
   real prices — while По договор stays muted, because it is an absence of information. */
.ad-price.free-tag,
.ad-detail-price.is-free {
  color: var(--green);
  font-weight: 800;
}