/* 1. ГЛОБАЛЬНЫЕ НАСТРОЙКИ */
:root {
  --brand: #0066ff;
  --brand-light: #e6f0ff;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --bg-site: #f8fafc;
  --border: #e2e8f0;
  --card-bg: #ffffff;
  --radius-lg: 20px;
  --radius-md: 12px;
  --shadow-soft: 0 2px 15px rgba(0, 0, 0, 0.04);
}

* { box-sizing: border-box; }

body { 
  font-family: 'Inter', system-ui, -apple-system, sans-serif; 
  margin: 0; 
  padding: 0;
  background: var(--bg-site); 
  color: var(--text-main); 
  line-height: 1.6;
  /* Гарантирует, что контент не будет прижат к краям на огромных мониторах */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 2. ЦЕНТРАЦИЯ (Исправлено!) */
.wrap { 
  width: 100%;
  max-width: 1240px; /* Ширина контента */
  margin-left: auto !important; 
  margin-right: auto !important; 
  padding-left: 20px;
  padding-right: 20px;
}

/* 3. ШАПКА (На всю ширину, но контент внутри по центру) */
/* ОБНОВЛЕННАЯ ШАПКА */
.topbar {
  background: #ffffff;
  border-bottom: 1px solid #f1f5f9;
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 16px 0;
  /* Легкий эффект тени только при скролле (опционально) */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}

.container-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
}

/* ЛОГОТИП */
.logo {
  text-decoration: none;
  font-size: 24px;
  font-weight: 800;
  display: flex;
  align-items: center;
  letter-spacing: -1px;
}
.logo-text { color: #0f172a; }
.logo-plus { color: #0066ff; } /* Синий акцент */

/* НАВИГАЦИЯ */
.nav {
  display: flex;
  gap: 28px;
  margin-left: 40px;
}
.nav a {
  text-decoration: none;
  color: #64748b;
  font-weight: 600;
  font-size: 15px;
  transition: color 0.2s ease;
}
.nav a:hover {
  color: #0066ff;
}

/* ДЕЙСТВИЯ ПОЛЬЗОВАТЕЛЯ */
.user-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.user-link {
  text-decoration: none;
  color: #0f172a;
  font-weight: 600;
  font-size: 14px;
}

.logout-icon {
  color: #94a3b8;
  font-size: 18px;
  transition: color 0.2s;
}
.logout-icon:hover { color: #ef4444; }

/* КНОПКА ПОДАТЬ ОБЪЯВЛЕНИЕ */
.btn-add {
  background: #0f172a; /* Темный графитовый */
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-add:hover {
  background: #0066ff;
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 102, 255, 0.2);
}

.plus-icon {
  font-size: 18px;
  line-height: 1;
}

/* АДАПТИВНОСТЬ ДЛЯ ШАПКИ */
@media (max-width: 850px) {
  .nav { display: none; } /* Скрываем навигацию на планшетах */
  .btn-add span { display: none; } /* Оставляем только плюс на мобилках */
  .btn-add { padding: 10px 15px; }
}
/* 4. СЕТКА (Фильтр слева + Карточки справа) */
.grid { 
  display: grid; 
  grid-template-columns: 280px 1fr; 
  gap: 30px; 
  margin-top: 30px; 
  margin-bottom: 50px;
}

/* ТОТ САМЫЙ ФИЛЬТР, КОТОРЫЙ ВАМ ПОНРАВИЛСЯ */
.filters { 
  background: var(--card-bg); 
  border: 1px solid var(--border); 
  border-radius: var(--radius-lg); 
  padding: 24px; 
  height: fit-content;
  position: sticky; 
  top: 100px;
  box-shadow: var(--shadow-soft);
}

.filter { margin-bottom: 20px; }
.filter label { 
  display: block; 
  font-size: 12px; 
  font-weight: 700; 
  margin-bottom: 8px; 
  text-transform: uppercase; 
  color: var(--text-muted); 
  letter-spacing: 0.5px;
}

.filter input, .filter select { 
  width: 100%; 
  padding: 10px 14px; 
  border: 1px solid var(--border); 
  border-radius: var(--radius-md); 
  background: #fcfcfd; 
  font-size: 14px; 
  transition: all 0.2s;
}

.filter input:focus { 
  border-color: var(--brand); 
  outline: none; 
  box-shadow: 0 0 0 4px var(--brand-light); 
}

/* 5. КАРТОЧКИ ОБЪЯВЛЕНИЙ */
.cards { 
  display: grid; 
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
  gap: 20px; 
}

.card { 
  background: var(--card-bg); 
  border-radius: var(--radius-lg); 
  text-decoration: none; 
  color: var(--text-main); 
  display: block; 
  transition: all 0.3s ease;
  border: 1px solid var(--border);
  overflow: hidden;
}

.card:hover { 
  transform: translateY(-5px); 
  box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

.thumb { 
  width: 100%; 
  aspect-ratio: 16/10; 
  background: #f1f5f9; 
  overflow: hidden; 
}

.thumb img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

.meta { padding: 16px; }

.title { 
  font-weight: 700; 
  font-size: 16px; 
  margin-bottom: 6px; 
  line-height: 1.3;
}

.price { 
  font-size: 18px; 
  font-weight: 800; 
  color: var(--brand); 
}

/* КНОПКИ */
.btn { 
  background: var(--text-main); 
  color: #fff; 
  padding: 10px 20px; 
  border-radius: var(--radius-md); 
  text-decoration: none; 
  font-weight: 600; 
  font-size: 14px;
}
/* ГЛАВНЫЙ БЛОК (HERO) */
.hero {
  padding: 60px 0 40px;
  text-align: center;
  background: #fff;
  border-bottom: 1px solid var(--border);
}

.hero h1 {
  font-size: 42px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0 0 12px;
  letter-spacing: -1.5px;
}

.hero p {
  font-size: 18px;
  color: var(--text-muted);
  margin-bottom: 32px;
}

/* ПОИСКОВАЯ СТРОКА */
.hero-search {
  max-width: 800px;
  margin: 0 auto 32px;
  display: flex;
  background: #fff;
  padding: 8px;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  border: 1px solid var(--border);
  gap: 10px;
}

.search-group {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  border-right: 1px solid var(--border);
}

.search-group:last-of-type { border-right: none; }

.search-group i { color: var(--brand); font-size: 16px; }

.search-group input {
  width: 100%;
  border: none;
  padding: 12px 0;
  font-size: 15px;
  font-weight: 500;
  outline: none;
  background: transparent;
}

.btn-search {
  background: var(--brand);
  color: #fff;
  border: none;
  padding: 0 32px;
  border-radius: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.2s;
}
.btn-search:hover { background: var(--text-main); }

/* БЫСТРЫЕ КАТЕГОРИИ */
.hero-categories {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-categories a {
  text-decoration: none;
  background: var(--bg-site);
  padding: 10px 20px;
  border-radius: 50px;
  color: var(--text-main);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--border);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.hero-categories a:hover {
  border-color: var(--brand);
  color: var(--brand);
  background: #fff;
}

/* ИСПРАВЛЕНИЕ ЗАГОЛОВКА СЕКЦИИ */
.section-title {
  text-align: center;
  margin: 40px 0 24px;
  font-size: 24px;
  font-weight: 800;
}

/* ФУТЕР ПО ЦЕНТРУ */
.footer {
  text-align: center;
  padding: 40px 0;
  border-top: 1px solid var(--border);
  background: #fff;
  color: var(--text-muted);
  margin-top: 60px;
}
.map-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 14px;
}

#map {
  height: calc(100vh - 160px);
  border-radius: 14px;
  border: 1px solid #eee;
}

.map-list {
  overflow-y: auto;
  max-height: calc(100vh - 160px);
}

.map-count {
  margin-bottom: 10px;
  font-weight: 600;
}

@media (max-width: 980px){
  .map-layout {
    grid-template-columns: 1fr;
  }
  #map {
    height: 320px;
  }
}

textarea { width:100%; padding:10px; border:1px solid #ddd; border-radius:10px; background:#fff; resize:vertical; }

.suggest { display:none; border:1px solid #eee; background:#fff; border-radius:12px; margin-top:6px; overflow:hidden; }
.s-item { padding:10px; cursor:pointer; border-top:1px solid #f3f3f3; }
.s-item:first-child { border-top:0; }
.s-item:hover { background:#fafafa; }


.notice { padding:10px; border-radius:12px; margin-bottom:10px; border:1px solid #eee; }
.notice.ok { background:#f3fff4; }
.notice.err { background:#fff3f3; }
.contact-row a { color:#111; }

.ad-head { margin-top: 6px; }
.ad-breadcrumbs a { color:#222; text-decoration:none; }
.ad-title { margin: 8px 0; }
.ad-meta { color:#666; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.badge { background:#111; color:#fff; padding:2px 8px; border-radius:999px; font-size:12px; }
.ad-price { font-size: 26px; font-weight: 800; margin-top: 10px; }
.muted { color:#666; }

.ad-grid { display:grid; grid-template-columns: 1.5fr 0.8fr; gap: 14px; margin-top: 12px; }
.cardbox { background:#fff; border:1px solid #eee; border-radius:14px; padding:12px; margin-bottom: 14px; }

.gallery { background:#fff; border:1px solid #eee; border-radius:14px; overflow:hidden; }
.gallery-main { height: 380px; background:#f0f0f0; display:flex; align-items:center; justify-content:center; }
.gallery-main img { width:100%; height:100%; object-fit:cover; }
.gallery-thumbs { display:flex; gap:8px; padding:10px; overflow:auto; border-top:1px solid #eee; }
.thumb-btn { border:0; padding:0; background:transparent; cursor:pointer; }
.thumb-btn img { width:84px; height:60px; object-fit:cover; border-radius:10px; border:1px solid #eee; }

.props { width:100%; border-collapse:collapse; }
.props th, .props td { padding:8px 0; border-bottom:1px solid #f0f0f0; text-align:left; vertical-align:top; }
.props th { width: 45%; color:#555; font-weight:600; }

#adMap { height: 280px; border-radius: 14px; border:1px solid #eee; }

@media (max-width: 980px){
  .ad-grid { grid-template-columns: 1fr; }
  .gallery-main { height: 260px; }
}

/* АДАПТИВНОСТЬ */
@media (max-width: 1024px) {
  .grid { grid-template-columns: 1fr; }
  .filters { position: static; margin-bottom: 20px; }
}

@media (max-width: 600px) {
  .cards { grid-template-columns: 1fr; }
  .wrap { padding: 0 15px; }
}