/* ==========================================================================
   184 Метра — design tokens
   Палитра: от белого через светло-голубой и голубой к глубокому
   тёмно-синему (почти чёрному) — спокойная, "картографическая" гамма.
   ========================================================================== */

:root{
  --white: #FFFFFF;
  --pale: #E0E9F6;
  --sky: #A1C6EA;
  --blue: #3E68A3;
  --ink: #04080F;

  --bg: #EEF3FB;
  --surface: #FFFFFF;
  --surface-2: #E0E9F6;
  --line: #D3E0F2;
  --line-strong: #A1C6EA;

  --ink-soft: #4A5A72;
  --ink-faint: #8B9AB3;

  --primary: #3E68A3;
  --primary-dark: #26456F;
  --primary-soft: #E0E9F6;

  --accent: #A1C6EA;
  --accent-dark: #6E9BCB;
  --accent-soft: #EAF2FB;

  --premium: #04080F;
  --premium-soft: #E5E9EF;

  --danger: #C0392B;
  --danger-soft: #F7E1DE;
  --info: #3E68A3;
  --info-soft: #E0E9F6;

  /* Если у вас есть лицензионные файлы Gilroy — положите их в app/static/fonts/
     и раскомментируйте @font-face ниже; иначе используется похожий бесплатный Onest. */
  --font-display: 'Unbounded', 'Onest', sans-serif;
  --font-body: 'Gilroy', 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --radius: 18px;
  --radius-sm: 10px;
  --shadow-card: 0 1px 2px rgba(4,8,15,.05), 0 14px 32px -16px rgba(4,8,15,.22);
  --shadow-pop: 0 20px 50px -14px rgba(4,8,15,.28);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

/* Раскомментируйте и укажите пути, если добавите лицензионные файлы шрифта Gilroy:
@font-face{
  font-family: 'Gilroy';
  src: url('/static/fonts/Gilroy-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Gilroy';
  src: url('/static/fonts/Gilroy-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face{
  font-family: 'Gilroy';
  src: url('/static/fonts/Gilroy-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
*/

body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 600; margin: 0 0 .4em; color: var(--ink); letter-spacing: -0.01em; }
p{ margin: 0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; }
:focus-visible{ outline: 2px solid var(--blue); outline-offset: 2px; }

.wrap{ max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.muted{ color: var(--ink-soft); }
.mono{ font-family: var(--font-mono); }

/* ============ Header ============ */
.site-header{
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top:0; z-index: 40;
}
.header-inner{ display:flex; align-items:center; gap: 28px; height: 68px; }
.brand{ display:flex; align-items:center; gap:8px; color: var(--primary-dark); flex-shrink:0; }
.brand-mark{ color: var(--blue); display:flex; }
.brand-name{ font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.brand-name.small{ font-size: 18px; }

.main-nav{ display:flex; gap: 4px; flex:1; min-width:0; }
.main-nav a{
  padding: 8px 14px; border-radius: 999px; font-weight: 500; color: var(--ink-soft);
  transition: background .15s, color .15s; white-space: nowrap;
}
.main-nav a:hover{ background: var(--primary-soft); color: var(--primary-dark); }
.main-nav a.active{ background: var(--primary); color: #fff; }

.header-actions{ display:flex; align-items:center; gap: 14px; flex-shrink:0; }
.icon-link{ font-weight: 500; color: var(--ink-soft); font-size: 14.5px; position:relative; }
.icon-link:hover{ color: var(--primary-dark); }
.admin-link{ color: var(--primary-dark); font-weight:700; }
.badge-count{
  background: var(--blue); color:#fff; font-size: 11px; font-weight:700;
  border-radius: 999px; padding: 1px 6px; margin-left: 4px; vertical-align: top;
}

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 11px 20px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: 14.5px; cursor:pointer; transition: transform .1s, background .15s, border-color .15s, color .15s, box-shadow .15s;
  line-height:1;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--primary); color:#fff; box-shadow: 0 8px 20px -8px rgba(62,104,163,.65); }
.btn-primary:hover{ background: var(--primary-dark); }
.btn-accent{ background: var(--ink); color:#fff; }
.btn-accent:hover{ background: #0d1420; }
.btn-outline{ background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn-outline:hover{ border-color: var(--primary); color: var(--primary-dark); background: var(--primary-soft); }
.btn-danger{ background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover{ background: var(--danger); color:#fff; }
.btn-small{ padding: 7px 14px; font-size: 13.5px; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn-link{ background:none; border:none; color: var(--primary); font-weight:600; padding:0; cursor:pointer; }

/* ============ Flash messages ============ */
.flash-wrap{ padding-top: 16px; display:flex; flex-direction:column; gap:8px; }
.flash{ padding: 12px 16px; border-radius: var(--radius-sm); font-size: 14.5px; border: 1px solid transparent; }
.flash-success{ background: var(--primary-soft); color: var(--primary-dark); border-color: #c3d7ee; }
.flash-error{ background: var(--danger-soft); color: var(--danger); border-color: #ecc3bd; }
.flash-info{ background: var(--info-soft); color: var(--info); border-color: #c3d7ee; }

/* ============ Hero: asymmetric, text left / floating listing previews right ============ */
.hero{
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
  padding: 64px 0 118px;
  background-image:
    linear-gradient(rgba(224,233,246,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(224,233,246,.07) 1px, transparent 1px);
  background-size: 34px 34px;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(ellipse 700px 500px at 12% -10%, rgba(161,198,234,.3), transparent 60%),
              radial-gradient(ellipse 800px 600px at 100% 120%, rgba(62,104,163,.55), transparent 60%);
  pointer-events:none;
}
.hero-split{ position:relative; display:grid; grid-template-columns: 1.15fr 1fr; gap: 40px; align-items:center; }
.hero-text{ max-width: 600px; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family: var(--font-mono);
  font-size: 12.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--sky);
  border: 1px solid rgba(255,255,255,.28); padding: 7px 16px; border-radius: 999px; margin-bottom: 24px;
}
.hero h1{ color:#fff; font-size: clamp(32px, 4.2vw, 48px); line-height:1.12; margin-bottom: .35em; }
.hero p.lead{ color: rgba(255,255,255,.76); max-width: 520px; font-size: 16.5px; margin-bottom:0; }
.hero-stats{ display:flex; gap:40px; margin-top:36px; }
.hero-stat-num{ font-family: var(--font-mono); font-size:24px; font-weight:700; color:#fff; }
.hero-stat-lbl{ font-size:11.5px; color: rgba(255,255,255,.55); margin-top:2px; }

.hero-visual{ position:relative; height: 360px; }
.hv-card{
  position:absolute; width:206px; background: rgba(255,255,255,.09); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2); border-radius: 16px; padding: 13px; color:#fff; display:block;
  transition: transform .2s;
}
.hv-card:hover{ transform: translateY(-4px) scale(1.02) !important; }
.hv-thumb{ width:100%; height:70px; border-radius:11px; margin-bottom:9px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.hv-thumb img{ width:100%; height:100%; object-fit:cover; }
.hv-thumb svg{ width:24px; height:24px; opacity:.75; }
.hv-price{ font-family: var(--font-mono); font-weight:700; font-size:14px; }
.hv-title{ font-size:11.5px; color: rgba(255,255,255,.68); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hv-badge{ display:inline-block; font-family: var(--font-mono); font-size:9px; font-weight:700; text-transform:uppercase; padding:3px 9px; border-radius:999px; margin-bottom:7px; letter-spacing:.03em; }
.hv1{ top:0; right:50px; transform: rotate(-5deg); z-index:1; }
.hv2{ top:100px; right:196px; transform: rotate(4deg); z-index:3; box-shadow: 0 32px 64px -18px rgba(0,0,0,.55); }
.hv3{ bottom:0; right:4px; transform: rotate(-2deg); z-index:2; }

/* ============ Filter bar ============ */
.filters{
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; margin-top: -34px; position:relative; box-shadow: var(--shadow-pop);
}
.filters-row{ display:flex; flex-wrap:wrap; gap: 12px; align-items:flex-end; }
.field{ display:flex; flex-direction:column; gap:6px; min-width: 130px; }
.field label{ font-size: 12px; font-weight:600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.field.grow{ flex:1; min-width: 200px; }
input[type=text], input[type=search], input[type=email], input[type=password], input[type=number],
input[type=tel], select, textarea{
  font-family: var(--font-body); font-size: 14.5px; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink); width:100%;
}
textarea{ resize: vertical; min-height: 110px; font-family: var(--font-body); }
input:focus, select:focus, textarea:focus{ outline:none; border-color: var(--primary); background:#fff; }
.filters-toggle-row{ display:flex; gap:8px; margin-top: 14px; flex-wrap:wrap; }
.chip{
  font-size: 13px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-strong);
  color: var(--ink-soft); cursor:pointer; background:#fff;
}
.chip.active, .chip:hover{ border-color: var(--primary); color: var(--primary-dark); background: var(--primary-soft); }
details.more-filters{ margin-top: 14px; }
details.more-filters summary{ cursor:pointer; font-weight:600; color: var(--primary); font-size: 14px; list-style:none; }
details.more-filters summary::-webkit-details-marker{ display:none; }
.more-filters-grid{ display:flex; flex-wrap:wrap; gap: 12px; margin-top: 14px; }

/* ============ Recently viewed strip ============ */
.rv-section{ margin-bottom: 10px; }
.rv-track{ display:flex; gap:14px; overflow-x:auto; padding-bottom:6px; scroll-snap-type: x proximity; }
.rv-card{
  flex: 0 0 190px; scroll-snap-align:start; background: var(--surface); border:1px solid var(--line);
  border-radius: 16px; overflow:hidden; box-shadow: var(--shadow-card); transition: transform .15s;
}
.rv-card:hover{ transform: translateY(-2px); }
.rv-card-media{ position:relative; aspect-ratio: 4/3; background: var(--primary-soft); }
.rv-card-media img{ width:100%; height:100%; object-fit:cover; }
.rv-card-media .badge{ position:absolute; top:8px; left:8px; font-size:9.5px; padding:3px 8px; }
.rv-card-body{ padding: 9px 11px 11px; }
.rv-card-price{ font-family: var(--font-mono); font-weight:700; font-size:13.5px; color: var(--ink); }
.rv-card-price small{ font-weight:500; color: var(--ink-faint); }
.rv-card-title{ font-size:12px; color: var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px; }

/* ============ How it works / stats strip ============ */
.how-it-works{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  padding: 30px 32px; margin: 34px 0 10px; box-shadow: var(--shadow-card);
}
.hiw-stats{
  display:flex; gap:0; margin-bottom: 26px; padding-bottom: 24px; border-bottom: 1px dashed var(--line);
}
.hiw-stat{ flex:1; text-align:center; border-right: 1px solid var(--line); }
.hiw-stat:last-child{ border-right:none; }
.hiw-num{ font-family: var(--font-mono); font-size: 30px; font-weight:700; color: var(--ink); }
.hiw-lbl{ font-size: 12.5px; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; margin-top:2px; }
.hiw-steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.hiw-step{ position:relative; }
.hiw-step-num{
  font-family: var(--font-mono); font-size: 12px; font-weight:700; color: var(--primary);
  background: var(--primary-soft); padding: 3px 9px; border-radius: 999px; display:inline-block; margin-bottom: 10px;
}
.hiw-step h4{ font-size: 16px; margin-bottom: 6px; }
.hiw-step p{ font-size: 13.5px; margin:0; }
@media (max-width: 760px){
  .hiw-stats{ flex-direction:column; gap:14px; }
  .hiw-stat{ border-right:none; border-bottom:1px solid var(--line); padding-bottom:12px; }
  .hiw-stat:last-child{ border-bottom:none; padding-bottom:0; }
  .hiw-steps{ grid-template-columns: 1fr; }
}

/* ============ Section titles ============ */
.section-heading{ display:flex; align-items:baseline; justify-content:space-between; margin: 40px 0 18px; }
.section-heading h2{ font-size: 22px; }
.count-tag{ font-family: var(--font-mono); font-size: 13px; color: var(--ink-faint); }

/* ============ Listing grid & card (floating / rounded style) ============ */
.listing-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(272px, 320px)); gap: 24px; margin-bottom: 40px; justify-content: start; }
.listing-grid-4up{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1180px){ .listing-grid-4up{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px){ .listing-grid-4up{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .listing-grid-4up{ grid-template-columns: 1fr; } }
.listing-grid-compact{ grid-template-columns: repeat(auto-fit, minmax(220px, 260px)); }

/* ============ Layout toggle (grid / wide list) ============ */
.layout-toggle{ display:flex; background: var(--surface-2); border-radius:12px; padding:4px; gap:2px; }
.lt-btn{ width:38px; height:34px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; border-radius:9px; color: var(--ink-faint); cursor:pointer; }
.lt-btn svg{ width:16px; height:16px; }
.lt-btn.active{ background: var(--surface); color: var(--primary-dark); box-shadow: 0 1px 3px rgba(4,8,15,.15); }

/* ============ Wide row cards (alternate homepage layout) ============ */
.row-list{ display:flex; flex-direction:column; gap:20px; margin-bottom:40px; }
.row-card{ display:flex; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-card); transition: transform .18s, box-shadow .18s; }
.row-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.row-media{ position:relative; width:280px; flex-shrink:0; display:block; background: var(--primary-soft) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36"><path d="M4 20 L20 6 L36 20 M8 18 V34 H32 V18" fill="none" stroke="%233E68A3" stroke-width="1.4" opacity="0.3"/></svg>') center/36px no-repeat; }
.row-media img{ width:100%; height:100%; object-fit:cover; }
.row-body{ flex:1; padding:22px 26px; display:flex; flex-direction:column; justify-content:center; min-width:0; }
.row-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:8px; }
.row-title{ font-size:17px; font-weight:700; margin-bottom:5px; color: var(--ink); }
.row-loc{ font-size:13px; color: var(--ink-soft); display:flex; align-items:center; gap:6px; }
.row-loc svg{ width:13px; height:13px; color: var(--ink-faint); flex-shrink:0; }
.row-price{ font-family: var(--font-mono); font-size:21px; font-weight:700; white-space:nowrap; text-align:right; color: var(--ink); }
.row-price small{ display:block; font-size:11px; font-weight:500; color: var(--ink-faint); }
.row-desc{ font-size:13.5px; color: var(--ink-soft); margin:6px 0 14px; max-width:640px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.row-footer{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
.row-specs{ display:flex; gap:16px; font-size:12px; color: var(--ink-soft); }
.row-cta{ font-weight:700; font-size:13px; color: var(--primary); border:1.5px solid var(--line-strong); padding:8px 16px; border-radius:999px; }
.row-cta:hover{ border-color: var(--primary); background: var(--primary-soft); }
.row-icon-btn{ position:static !important; width:34px; height:34px; }
@media (max-width: 640px){
  .listing-grid{ grid-template-columns: 1fr; }
}
.card{
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; position: relative; box-shadow: var(--shadow-card);
  transition: transform .18s ease, box-shadow .18s ease;
  display:block;
}
.card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-pop); }

.card-media{
  position:relative; margin: 10px 10px 0; border-radius: 14px; overflow:hidden;
  aspect-ratio: 4/3;
  background: var(--primary-soft) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"><path d="M4 20 L20 6 L36 20 M8 18 V34 H32 V18" fill="none" stroke="%233E68A3" stroke-width="1.4" opacity="0.35"/></svg>') center/48px no-repeat;
}
.card-media img{ width:100%; height:100%; object-fit: cover; }

.badges{ position:absolute; top:10px; left:10px; display:flex; gap:6px; z-index:2; }
.badge{
  font-family: var(--font-mono); font-size: 10.5px; font-weight:700; letter-spacing:.03em;
  padding: 4px 10px; border-radius: 999px; text-transform: uppercase;
  backdrop-filter: blur(4px);
}
.badge-sale{ background: var(--primary); color:#fff; }
.badge-rent{ background: var(--sky); color: var(--ink); }
.badge-premium{ background: var(--ink); color:#fff; }
.badge-boost{ background: var(--blue); color:#fff; }
.badge-highlight{ background: linear-gradient(135deg, #E8A33D, #C97D1E); color:#fff; }
.badge-pending{ background: var(--danger); color:#fff; }
.badge-off{ background: var(--ink-faint); color:#fff; }

.card-fav{
  position:absolute; top:10px; right:10px; z-index:2; width:32px; height:32px; border-radius:50%;
  background: rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center;
  border: none; cursor:pointer; color: var(--ink-faint); box-shadow: 0 4px 10px rgba(4,8,15,.15);
  transition: color .15s, transform .12s;
}
.card-fav:hover{ transform: scale(1.08); }
.card-fav.active{ color: var(--danger); }
.card-fav svg{ width:16px; height:16px; }

.card-compare{
  position:absolute; top:50px; right:10px; z-index:2; width:32px; height:32px; border-radius:50%;
  background: rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center;
  border: none; cursor:pointer; color: var(--ink-faint); box-shadow: 0 4px 10px rgba(4,8,15,.15);
  transition: color .15s, transform .12s;
}
.card-compare:hover{ transform: scale(1.08); }
.card-compare.active{ color: var(--blue); background: var(--primary-soft); }
.card-compare svg{ width:15px; height:15px; }

/* When .card-fav/.card-compare are reused as regular toolbar buttons (not card overlays) */
.btn.icon-toggle-btn{ position:static; width:auto; height:auto; border-radius:999px; box-shadow:none; }
.btn.icon-toggle-btn.active{ background: var(--primary-soft); border-color: var(--primary); color: var(--primary-dark); }
.btn.icon-toggle-btn svg{ width:15px; height:15px; }

.card-body{ padding: 14px 16px 18px; }
.card-price-row{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.card-price{ font-family: var(--font-mono); font-size: 19px; font-weight: 700; color: var(--ink); }
.card-price small{ font-size: 12px; color: var(--ink-faint); font-weight: 500; margin-left: 4px; }
.card-unit{ font-size: 11.5px; color: var(--ink-faint); font-family: var(--font-mono); white-space:nowrap; }
.card-title{ font-size: 15px; font-weight: 600; margin: 6px 0 4px; color: var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-loc{ font-size: 13.5px; color: var(--ink-soft); margin-bottom: 10px; display:flex; align-items:center; gap:5px; }
.card-loc svg{ width:13px; height:13px; flex-shrink:0; color: var(--ink-faint); }
.card-specs{ display:flex; gap: 14px; font-size: 12.5px; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 11px; }
.card-specs span{ display:flex; align-items:center; gap:5px; }

.empty-state{ text-align:center; padding: 60px 20px; color: var(--ink-soft); }
.empty-state h3{ margin-bottom: 8px; }

/* ============ Pagination ============ */
.pagination{ display:flex; justify-content:center; gap:6px; margin: 30px 0 60px; }
.pagination a, .pagination span{
  min-width: 36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius: 999px; border: 1px solid var(--line); font-family: var(--font-mono); font-size: 13.5px;
}
.pagination a:hover{ border-color: var(--primary); color: var(--primary-dark); }
.pagination .current{ background: var(--primary); color:#fff; border-color: var(--primary); }

/* ============ Listing detail ============ */
.breadcrumb{ display:flex; align-items:center; gap:8px; padding: 18px 0 0; font-size:13px; color: var(--ink-faint); flex-wrap:wrap; }
.breadcrumb a:hover{ color: var(--primary-dark); }
.breadcrumb .current{ color: var(--ink-soft); max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- Top info bar ---- */
.obj-infobar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  padding: 18px 22px; margin: 16px 0 22px; box-shadow: var(--shadow-card);
}
.obj-infobar-left{ display:flex; align-items:center; gap:14px; min-width:0; }
.obj-icon{
  width:48px; height:48px; border-radius:14px; background: var(--primary-soft); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:22px;
}
.obj-infobar-title{ font-size:19px; margin:0 0 6px; max-width:520px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.obj-infobar-meta{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.obj-meta-pin{ display:flex; align-items:center; gap:5px; font-size:13px; color: var(--ink-soft); }
.obj-meta-pin svg{ width:14px; height:14px; color: var(--ink-faint); }
.obj-infobar-actions{ display:flex; gap:8px; flex-shrink:0; }

/* ---- Card wrapper reused for description / market / map blocks ---- */
.obj-card{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  padding: 24px; margin-top: 22px; box-shadow: var(--shadow-card);
}
.obj-card-title{ font-size:17px; margin-bottom:16px; }

/* ---- Icon chips row ---- */
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }
.info-chip{
  display:inline-flex; align-items:center; gap:7px; background: var(--surface-2); border:1px solid var(--line);
  border-radius: 999px; padding: 7px 14px; font-size:13px; font-weight:600; color: var(--ink);
}
.info-chip span{ font-size:15px; line-height:1; }

.desc-text{
  margin:0; line-height:1.7; white-space:pre-line; max-height: 4.7em; overflow:hidden; position:relative;
}
.desc-text.truncated:not(.expanded)::after{
  content:""; position:absolute; bottom:0; left:0; right:0; height:28px;
  background: linear-gradient(transparent, var(--surface));
}
.desc-text.expanded{ max-height:none; }

.detail-grid{ display:grid; grid-template-columns: 1.6fr 1fr; gap: 32px; align-items:start; margin: 6px 0 60px; }

/* ---- Photo grid gallery ---- */
.gallery-grid{ display:grid; grid-template-columns: 1.6fr 1fr; gap: 8px; border-radius: var(--radius); overflow:hidden; aspect-ratio: 16/9; }
.gallery-main-cell{ position:relative; border-radius: var(--radius-sm); overflow:hidden; background: var(--primary-soft); }
.gallery-main-cell img{ width:100%; height:100%; object-fit:cover; }
.gallery-empty{ display:flex; align-items:center; justify-content:center; color: var(--ink-faint); font-size:14px; grid-column: 1 / -1; }
.gallery-thumb-col{ display:flex; flex-direction:column; gap:8px; }
.gallery-thumb-cell{ position:relative; flex:1; border-radius: var(--radius-sm); overflow:hidden; background: var(--primary-soft); min-height:0; }
.gallery-thumb-cell img{ width:100%; height:100%; object-fit:cover; }
.gallery-more-overlay{
  position:absolute; inset:0; background: rgba(4,8,15,.6); color:#fff; display:flex; align-items:center;
  justify-content:center; font-weight:700; font-size:14px; cursor:pointer;
}
.gallery-expand{
  position:absolute; bottom:14px; right:14px; width:38px; height:38px; border-radius:50%; border:none;
  background: rgba(4,8,15,.55); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;
  backdrop-filter: blur(3px); transition: background .15s;
}
.gallery-expand:hover{ background: rgba(4,8,15,.8); }
.gallery-expand svg{ width:17px; height:17px; }
.gallery-thumbs{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.gallery-thumbs img{ width:74px; height:56px; object-fit:cover; border-radius: 10px; border: 2px solid transparent; cursor:pointer; }
.gallery-thumbs img.active{ border-color: var(--blue); }

.spec-sheet{ margin-top: 22px; border: 1px solid var(--line); border-radius: var(--radius); overflow:hidden; }
.spec-sheet-header{ background: var(--primary-soft); padding: 12px 18px; font-family: var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em; color: var(--primary-dark); }
.spec-row{ display:flex; justify-content:space-between; align-items:center; padding: 13px 18px; border-top: 1px solid var(--line); font-size: 14px; }
.spec-row:first-child{ border-top:none; }
.spec-row dt{ color: var(--ink-soft); display:flex; align-items:center; gap:10px; }
.spec-row dt svg{ width:18px; height:18px; color: var(--primary); flex-shrink:0; }
.spec-emoji{ font-size:16px; line-height:1; }
.spec-row dd{ margin:0; font-family: var(--font-mono); font-weight:700; color: var(--ink); }

/* ---- Market overview bar chart (real data, no fabricated series) ---- */
.market-chart{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; height:180px; padding-top:10px; }
.market-bar-col{ flex:1; display:flex; flex-direction:column; align-items:center; height:100%; }
.market-bar-value{ font-family: var(--font-mono); font-size:12px; font-weight:700; color: var(--ink-soft); margin-bottom:8px; }
.market-bar-track{ flex:1; width:100%; max-width:52px; display:flex; align-items:flex-end; background: var(--surface-2); border-radius: 10px; overflow:hidden; }
.market-bar-fill{ width:100%; border-radius:10px 10px 0 0; transition: height .4s ease; }
.market-bar-fill.muted{ background: var(--sky); }
.market-bar-fill.accent{ background: var(--blue); box-shadow: 0 -4px 14px -6px rgba(62,104,163,.6); }
.market-bar-label{ font-size:11.5px; color: var(--ink-faint); text-align:center; margin-top:10px; line-height:1.3; }

.side-panel{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; position: sticky; top: 88px; box-shadow: var(--shadow-card); }
.side-price{ font-family: var(--font-mono); font-size: 30px; font-weight:700; color: var(--ink); margin-bottom: 4px; }
.seller-box{ display:flex; align-items:center; gap:10px; margin: 16px 0; padding-top:16px; border-top:1px solid var(--line); }
.seller-avatar{ width:42px; height:42px; border-radius:50%; background: var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-family: var(--font-display); }

.detail-map{ height: 260px; border-radius: var(--radius-sm); overflow:hidden; border: 1px solid var(--line); }
.leaflet-popup-content a{ color: var(--primary); font-weight:600; }

/* ---- Lightbox ---- */
.lightbox{
  position:fixed; inset:0; background: rgba(4,8,15,.92); z-index:200; display:none;
  align-items:center; justify-content:center; padding: 40px;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:100%; max-height:100%; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox-close{
  position:absolute; top:24px; right:28px; width:42px; height:42px; border-radius:50%; border:none;
  background: rgba(255,255,255,.12); color:#fff; font-size:18px; cursor:pointer; transition: background .15s;
}
.lightbox-close:hover{ background: rgba(255,255,255,.25); }

@media (max-width: 640px){
  .gallery-grid{ grid-template-columns: 1fr; aspect-ratio: auto; }
  .gallery-thumb-col{ flex-direction:row; height:90px; }
  .obj-infobar{ flex-direction:column; align-items:flex-start; }
  .market-chart{ height:140px; }
}

/* ============ Forms (auth, listing form) ============ */
.form-page{ max-width: 480px; margin: 50px auto 80px; }
.form-card{ background:var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow-card); }
.form-card h1{ font-size: 26px; margin-bottom: 6px; }
.form-card .sub{ color: var(--ink-soft); margin-bottom: 26px; font-size: 14.5px; }
.form-group{ margin-bottom: 16px; }
.form-group label{ display:block; font-weight:600; font-size: 13.5px; margin-bottom: 6px; }
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-foot{ margin-top: 18px; font-size: 14px; color: var(--ink-soft); text-align:center; }
.checkbox-row{ display:flex; align-items:flex-start; gap:10px; background: var(--accent-soft); padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); }
.checkbox-row input{ width:auto; margin-top:3px; }
.checkbox-row .price-tag{ font-family: var(--font-mono); font-weight:700; color: var(--primary-dark); }

.listing-form-wrap{ max-width: 760px; margin: 40px auto 80px; }
.form-section{ background:var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: 28px; margin-bottom: 20px; box-shadow: var(--shadow-card); }
.form-section h3{ font-size: 17px; margin-bottom: 20px; display:flex; align-items:center; }
.pick-map{ height: 300px; border-radius: var(--radius-sm); overflow:hidden; border:1px solid var(--line-strong); margin-top: 6px; }
.map-help{ font-size: 12.5px; color: var(--ink-faint); margin-top: 6px; }
.existing-images{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom: 18px; }
.existing-images figure{ margin:0; position:relative; }
.existing-images img{ width:90px; height:70px; object-fit:cover; border-radius:10px; }
.existing-images label{ display:flex; align-items:center; gap:4px; font-size:11px; margin-top:4px; color: var(--danger); }

/* ============ Listing wizard (multi-step form) ============ */
.wizard-header{ margin: 34px 0 26px; }
.wizard-header h1{ font-size: 28px; margin-bottom:6px; }
.wizard-shell{ display:grid; grid-template-columns: 1fr 300px; gap: 30px; align-items:start; margin-bottom: 70px; }
.wizard-main{ min-width:0; }
.wizard-preview{ position: sticky; top: 88px; }
.preview-label{ font-size:12px; font-weight:700; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px; }
.preview-card{ pointer-events:none; box-shadow: var(--shadow-card) !important; }
.preview-card .card-media img{ opacity:0; animation: fadein .3s forwards; }
@keyframes fadein{ to{ opacity:1; } }

.wizard-progress{ display:flex; justify-content:space-between; margin-bottom: 28px; position:relative; }
.wizard-progress::before{ content:""; position:absolute; top:15px; left:20px; right:20px; height:2px; background: var(--line); z-index:0; }
.wizard-step-dot{
  position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:7px;
  font-size:11px; color: var(--ink-faint); cursor:default; flex:1; text-align:center; font-weight:700;
  text-transform:uppercase; letter-spacing:.02em;
}
.wizard-step-dot span{
  width:32px; height:32px; border-radius:50%; background: var(--surface); border:2px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-weight:600;
  color: var(--ink-soft); transition: all .2s;
}
.wizard-step-dot.active{ color: var(--primary-dark); }
.wizard-step-dot.active span{ background: var(--primary); border-color: var(--primary); color:#fff; }
.wizard-step-dot.done{ color: var(--ink); cursor:pointer; }
.wizard-step-dot.done span{ background: var(--ink); border-color: var(--ink); color:#fff; }

.wizard-nav{ display:flex; justify-content:space-between; margin-top: 22px; }

.field-label-sm{ font-size:12px; font-weight:700; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.05em; margin-bottom:10px; }
.step-badge{
  display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%;
  background: var(--primary); color:#fff; font-family: var(--font-mono); font-size:13px; margin-right:10px; flex-shrink:0;
}

.icon-toggle{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.icon-toggle.three{ grid-template-columns: repeat(3, 1fr); }
.icon-toggle.four{ grid-template-columns: repeat(4, 1fr); }
.icon-toggle.five{ grid-template-columns: repeat(5, 1fr); }
@media (max-width: 560px){
  .icon-toggle.four{ grid-template-columns: repeat(2, 1fr); }
  .icon-toggle.five{ grid-template-columns: repeat(2, 1fr); }
}
.type-locked-notice{ background: var(--surface-2); border:1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; }
.icon-toggle label{ margin:0; }
.icon-toggle input{ display:none; position:absolute; }
.icon-toggle span{
  display:flex; flex-direction:column; align-items:center; gap:9px; padding: 20px 10px; border-radius: 16px;
  border: 1.5px solid var(--line-strong); cursor:pointer; font-weight:600; color: var(--ink-soft); text-align:center;
  transition: border-color .15s, background .15s, color .15s, transform .1s;
}
.icon-toggle span svg{ width:26px; height:26px; }
.icon-toggle input:checked + span{ background: var(--primary); border-color: var(--primary); color:#fff; box-shadow: 0 8px 20px -10px rgba(62,104,163,.6); }
.icon-toggle span:hover{ border-color: var(--primary); transform: translateY(-1px); }

.dropzone{
  border: 2px dashed var(--line-strong); border-radius: 16px; padding: 38px 20px; text-align:center; cursor:pointer;
  position:relative; background: var(--surface-2); transition: border-color .15s, background .15s;
}
.dropzone.dragover{ border-color: var(--primary); background: var(--primary-soft); }
.dropzone input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.dropzone-hint{ display:flex; flex-direction:column; align-items:center; gap:6px; color: var(--ink-soft); font-size:14px; pointer-events:none; }
.dropzone-hint svg{ width:32px; height:32px; color: var(--primary); margin-bottom:4px; }
.dropzone-preview{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.dropzone-preview img{ width:88px; height:70px; object-fit:cover; border-radius:10px; border:1px solid var(--line); }

@media (max-width: 900px){
  .wizard-shell{ grid-template-columns: 1fr; }
  .wizard-preview{ position:static; order:-1; max-width:320px; }
  .wizard-step-dot span{ width:26px; height:26px; }
  .wizard-progress{ overflow-x:auto; }
  .hero-split{ grid-template-columns: 1fr; }
  .hero-visual{ display:none; }
  .row-card{ flex-direction:column; }
  .row-media{ width:100%; aspect-ratio:16/9; }
  .row-price{ text-align:left; }
}

/* ============ Profile ============ */
.profile-header{ display:flex; justify-content:space-between; align-items:flex-end; margin: 34px 0 10px; flex-wrap:wrap; gap:16px; }
.balance-card{ background: var(--ink); color:#fff; border-radius: var(--radius); padding: 18px 24px; display:flex; align-items:center; gap:20px; }
.balance-card .amount{ font-family: var(--font-mono); font-size: 26px; font-weight:700; }
.balance-card .label{ font-size: 12px; text-transform:uppercase; letter-spacing:.06em; color: rgba(255,255,255,.6); }
.my-listing-row{ display:flex; gap:16px; padding: 16px; background:var(--surface); border:1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; align-items:center; }
.my-listing-row img{ width:110px; height:80px; object-fit:cover; border-radius:12px; flex-shrink:0; background: var(--primary-soft); }
.my-listing-info{ flex:1; min-width:0; }
.my-listing-actions{ display:flex; gap:8px; flex-wrap:wrap; }

/* ---- Promotion package dropdown (cabinet listings) ---- */
.promo-dropdown{ position:relative; display:inline-block; }
.promo-dropdown-menu{
  display:none; position:absolute; top:calc(100% + 6px); left:0; z-index:20; background:var(--surface);
  border:1px solid var(--line); border-radius:14px; box-shadow: var(--shadow-pop); padding:6px; min-width:260px;
}
.promo-dropdown.open .promo-dropdown-menu{ display:block; }
.promo-option{
  display:flex; justify-content:space-between; align-items:center; gap:10px; width:100%; background:none;
  border:none; padding:9px 11px; border-radius:9px; cursor:pointer; font-size:13px; text-align:left; color: var(--ink);
}
.promo-option:hover{ background: var(--surface-2); }
.promo-option[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---- Highlighted listing card (purchased color-highlight package) ---- */
.card-highlighted{ border-color: #E8A33D !important; box-shadow: 0 0 0 2px rgba(232,163,61,.35), var(--shadow-card); }
.status-tags{ display:flex; gap:6px; margin: 4px 0; flex-wrap:wrap; }

/* ============ Messages ============ */
.messages-wrap{ display:grid; grid-template-columns: 320px 1fr; gap: 20px; margin: 34px 0 70px; min-height: 500px; }
.conv-list{ background:var(--surface); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; }
.conv-item{ display:block; padding: 14px 16px; border-bottom:1px solid var(--line); }
.conv-item:hover{ background: var(--surface-2); }
.conv-item .name{ font-weight:600; display:flex; justify-content:space-between; }
.conv-item .snippet{ font-size: 13px; color: var(--ink-soft); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-item .listing-tag{ font-size: 11.5px; color: var(--primary-dark); font-family: var(--font-mono); }
.thread-panel{ background:var(--surface); border:1px solid var(--line); border-radius: var(--radius); display:flex; flex-direction:column; }
.thread-header{ padding: 16px 20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.thread-body{ flex:1; padding: 20px; overflow-y:auto; display:flex; flex-direction:column; gap:10px; max-height: 480px; }
.bubble{ max-width:70%; padding:10px 14px; border-radius: 16px; font-size:14.5px; }
.bubble.mine{ align-self:flex-end; background: var(--primary); color:#fff; border-bottom-right-radius:4px; }
.bubble.theirs{ align-self:flex-start; background: var(--surface-2); border:1px solid var(--line); border-bottom-left-radius:4px; }
.bubble time{ display:block; font-size:10.5px; opacity:.65; margin-top:4px; }
.thread-form{ display:flex; gap:10px; padding: 16px; border-top:1px solid var(--line); }
.thread-form textarea{ min-height: 44px; }

/* ============ Admin ============ */
.admin-layout{ display:grid; grid-template-columns: 220px 1fr; gap: 28px; margin: 34px 0 70px; }
.admin-nav{ display:flex; flex-direction:column; gap:4px; }
.admin-nav a{ padding: 10px 14px; border-radius: 999px; font-weight:500; color: var(--ink-soft); }
.admin-nav a:hover, .admin-nav a.active{ background: var(--primary-soft); color: var(--primary-dark); }
.stat-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap:16px; margin-bottom: 30px; }
.stat-box{ background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.stat-box .num{ font-family: var(--font-mono); font-size: 28px; font-weight:700; color: var(--ink); }
.stat-box .lbl{ font-size: 12.5px; color: var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; }
.data-table{ width:100%; border-collapse: collapse; background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; }
.data-table th, .data-table td{ padding: 12px 14px; text-align:left; border-bottom:1px solid var(--line); font-size: 14px; }
.data-table th{ background: var(--surface-2); font-size:12px; text-transform:uppercase; letter-spacing:.04em; color: var(--ink-soft); }
.data-table tr:last-child td{ border-bottom:none; }
.table-actions{ display:flex; gap:6px; flex-wrap:wrap; }
.tabs{ display:flex; gap:6px; margin-bottom: 18px; }
.city-block{ background:var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding:18px; margin-bottom:14px; }
.city-block .city-name{ font-weight:700; font-family: var(--font-display); font-size:17px; margin-bottom:10px; display:flex; justify-content:space-between; align-items:center; }
.locality-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom: 12px; }
.locality-chip{ background: var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:5px 10px 5px 12px; font-size:13px; display:flex; align-items:center; gap:8px; }
.locality-chip button{ background:none; border:none; color: var(--danger); cursor:pointer; font-weight:700; padding:0; }
.inline-form{ display:flex; gap:8px; }

/* ============ Map page (full-width square card grid + big map) ============ */
.map-toolbar{
  background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  padding: 16px 20px; margin: 24px 0 0; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:14px; box-shadow: var(--shadow-card);
}
.map-greeting{ display:flex; align-items:center; gap:10px; }
.map-greeting .seller-avatar{ width:38px; height:38px; font-size:14px; }
.map-greeting .hi{ font-weight:700; font-size:15.5px; }
.deal-toggle{ display:flex; background: var(--surface-2); border-radius:999px; padding:4px; gap:2px; }
.deal-toggle a{ padding:7px 16px; border-radius:999px; font-size:13.5px; font-weight:600; color: var(--ink-soft); }
.deal-toggle a.active{ background: var(--ink); color:#fff; }
.map-mini-filters{ display:flex; gap:8px; flex-wrap:wrap; }
.map-mini-filters select{ width:auto; min-width:130px; padding:8px 12px; font-size:13.5px; }

/* Full-bleed shell: breaks out of the standard .wrap max-width so the sidebar
   grid can genuinely use the width of the screen, not a narrow container. */
.map-shell-wrap{ max-width: 1900px; margin: 0 auto; padding: 18px 24px 60px; }
.map-shell{ display:grid; grid-template-columns: minmax(460px, 620px) 1fr; gap: 22px; height: 720px; }
.map-sidebar-col{ display:flex; flex-direction:column; min-height:0; }
.map-sidebar-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 2px 2px 12px; flex-wrap:wrap; }
.map-sidebar-count{ font-family: var(--font-mono); font-size:12.5px; color: var(--ink-faint); }
.bounds-toggle{ display:flex; align-items:center; gap:7px; font-size:12.5px; color: var(--ink-soft); cursor:pointer; user-select:none; }
.bounds-toggle input{ width:15px; height:15px; accent-color: var(--primary); cursor:pointer; }
.view-toggle{ display:flex; background: var(--surface-2); border-radius:10px; padding:3px; gap:2px; flex-shrink:0; }
.view-toggle button{ width:30px; height:28px; display:flex; align-items:center; justify-content:center; border:none; background:transparent; border-radius:7px; color: var(--ink-faint); cursor:pointer; }
.view-toggle button svg{ width:15px; height:15px; }
.view-toggle button.active{ background: var(--surface); color: var(--primary-dark); box-shadow: 0 1px 3px rgba(4,8,15,.15); }

.map-sidebar{
  display:grid; grid-template-columns: repeat(2, 1fr); gap: 16px; overflow-y:auto; align-content:start;
  padding: 2px 6px 2px 2px; flex:1; min-height:0;
}
.map-sidebar.view-list{ grid-template-columns: 1fr; }

.mini-card{
  display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius: 20px;
  overflow:hidden; cursor:pointer; transition: border-color .15s, box-shadow .15s, transform .12s; position:relative;
  min-width: 0;
}
.mini-card:hover{ border-color: var(--line-strong); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.mini-card.active{ border-color: var(--blue); box-shadow: 0 0 0 3px var(--primary-soft), var(--shadow-card); }
.mini-card-media{ position:relative; aspect-ratio: 1/1; background: var(--primary-soft) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34"><path d="M4 20 L20 6 L36 20 M8 18 V34 H32 V18" fill="none" stroke="%233E68A3" stroke-width="1.4" opacity="0.3"/></svg>') center/34px no-repeat; }
.mini-card-media img{ width:100%; height:100%; object-fit:cover; }
.mini-card-media .badges{ position:absolute; top:9px; left:9px; }
.mini-card-fav{ position:absolute; top:9px; right:9px; width:28px; height:28px; }
.mini-card-fav svg{ width:14px; height:14px; }
.mini-card-compare{ position:absolute; top:45px; right:9px; width:28px; height:28px; }
.mini-card-compare svg{ width:13px; height:13px; }
.mini-card-body{ display:block; padding: 11px 13px 13px; color: inherit; min-width: 0; }
.mini-card-price{ font-family: var(--font-mono); font-weight:700; font-size:15px; color: var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-card-price small{ font-size:11px; font-weight:500; }
.mini-card-title{ font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:3px 0 2px; }
.mini-card-loc{ font-size:11.5px; color: var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* List view: horizontal compact rows instead of square tiles */
.view-list .mini-card{ flex-direction:row; border-radius:16px; }
.view-list .mini-card-media{ aspect-ratio:auto; width:104px; min-width:104px; height:88px; }
.view-list .mini-card-body{ flex:1; min-width:0; padding:10px 14px; display:flex; flex-direction:column; justify-content:center; }

.map-canvas-wrap{ border-radius: var(--radius); overflow:hidden; border: 1px solid var(--line); box-shadow: var(--shadow-card); position:relative; }
#listings-map, .map-page{ height: 100%; width:100%; }
.leaflet-attribution-flag{ display:none !important; }
.leaflet-control-attribution{ font-size:10.5px; background: rgba(255,255,255,.85) !important; }
.leaflet-div-icon.price-pin-wrap{ background:transparent; border:none; }
.price-pin-wrap{ background:transparent; border:none; }
.price-pin{
  display:inline-flex; align-items:center; gap:5px; background: var(--ink); color:#fff; font-family: var(--font-mono);
  font-size:12.5px; font-weight:700; padding:7px 13px; border-radius:999px; white-space:nowrap;
  box-shadow: 0 8px 18px -4px rgba(4,8,15,.45); position:relative; transform: translate(-50%, -100%);
  top:-8px; border: 2px solid #fff; cursor:pointer;
}
.price-pin svg{ width:13px; height:13px; opacity:.9; flex-shrink:0; }
.price-pin.rent{ background: var(--blue); }
.price-pin::after{
  content:""; position:absolute; left:50%; bottom:-6px; width:11px; height:11px; background:inherit;
  transform: translateX(-50%) rotate(45deg); border-radius:0 0 3px 0; z-index:-1; border-right:2px solid #fff; border-bottom:2px solid #fff;
}

/* ---- Teardrop location pin (single-point maps: detail page, form picker) ---- */
.pin-icon-wrap{ background:transparent; border:none; }
.pin-icon-inner{ position:relative; width:34px; height:38px; }
.pin-icon-svg{ position:relative; z-index:1; filter: drop-shadow(0 5px 8px rgba(4,8,15,.4)); }
.pin-icon-svg path{ fill: var(--blue); }
.pin-icon-hole{ fill: #fff; }
.pin-icon-pulse{
  position:absolute; left:50%; bottom:-1px; width:15px; height:6px; margin-left:-7.5px; border-radius:50%;
  background: var(--sky); opacity:.65; z-index:0; animation: pin-pulse 2.2s ease-out infinite;
}
@keyframes pin-pulse{
  0%{ transform: scaleX(1); opacity:.65; }
  70%{ transform: scaleX(2.6); opacity:0; }
  100%{ opacity:0; }
}

/* ---- Custom marker cluster badge ---- */
.cluster-icon-wrap{ background:transparent; border:none; }
.cluster-badge{
  border-radius:50%; background: var(--blue); color:#fff; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); font-weight:700; font-size:14px; border:3px solid #fff;
  box-shadow: 0 8px 22px -6px rgba(62,104,163,.7);
}

/* ---- Custom Leaflet popup: horizontal floating card ---- */
.leaflet-popup-content-wrapper{ padding:0; border-radius: 16px; overflow:hidden; box-shadow: var(--shadow-pop); border:1px solid var(--line); }
.leaflet-popup-content{ margin:0; width:280px !important; }
.leaflet-popup-tip-container{ display:none; }
.leaflet-popup-close-button{ display:none; }
.map-popup{ font-family: var(--font-body); display:flex; }
.map-popup-media{
  position:relative; width:96px; min-width:96px; height:96px; background: var(--primary-soft) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M4 20 L20 6 L36 20 M8 18 V34 H32 V18" fill="none" stroke="%233E68A3" stroke-width="1.4" opacity="0.35"/></svg>') center/28px no-repeat;
}
.map-popup-media img{ width:100%; height:100%; object-fit:cover; }
.map-popup-fav{
  position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:50%; border:none;
  background: rgba(255,255,255,.92); color: var(--ink-faint); display:flex; align-items:center; justify-content:center;
  cursor:pointer; box-shadow: 0 2px 6px rgba(4,8,15,.25);
}
.map-popup-fav svg{ width:12px; height:12px; }
.map-popup-fav.active{ color: var(--danger); }
.map-popup-body{ padding: 12px 14px; flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:4px; }
.map-popup-price{ font-family: var(--font-mono); font-weight:700; font-size:15px; color: var(--ink); }
.map-popup-title{ font-size:12.5px; font-weight:600; line-height:1.3; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; color: var(--ink-soft); }
.map-popup-btn{
  display:inline-block; background: var(--primary); color:#fff !important; font-size:11.5px; font-weight:600;
  padding:6px 11px; border-radius:999px; text-decoration:none; margin-top:4px; align-self:flex-start;
}
.map-popup-btn:hover{ background: var(--primary-dark); }

/* Floating results counter over the map, bottom-left */
.map-floating-count{
  position:absolute; left:16px; bottom:16px; z-index:500; background: rgba(4,8,15,.85); color:#fff;
  font-size:13px; font-weight:600; padding:9px 16px; border-radius:999px; box-shadow: var(--shadow-card);
  backdrop-filter: blur(4px);
}

/* ============ Footer ============ */
.site-footer{ background: var(--ink); color: rgba(255,255,255,.85); margin-top: 40px; }
.footer-inner{ display:flex; justify-content:space-between; padding: 34px 0; flex-wrap:wrap; gap:20px; }
.footer-inner .muted{ color: rgba(255,255,255,.55); max-width: 380px; }
.footer-links{ display:flex; gap:18px; }
.footer-links a:hover{ color: var(--sky); }

/* ============ Compare bar (floating, site-wide) ============ */
.compare-bar{ position:fixed; left:0; right:0; bottom:0; z-index:300; background: var(--ink); color:#fff; box-shadow: 0 -10px 30px rgba(4,8,15,.35); }
.compare-bar-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 24px; flex-wrap:wrap; }
.compare-bar-items{ display:flex; gap:10px; flex-wrap:wrap; flex:1; min-width:220px; }
.compare-bar-item{ display:flex; align-items:center; gap:8px; background: rgba(255,255,255,.1); border-radius:999px; padding:5px 10px 5px 5px; }
.compare-bar-item img{ width:28px; height:28px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.compare-bar-noimg{ width:28px; height:28px; border-radius:50%; background: rgba(255,255,255,.18); display:inline-block; flex-shrink:0; }
.compare-bar-title{ font-size:12.5px; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.compare-bar-remove{ background:none; border:none; color: rgba(255,255,255,.55); cursor:pointer; font-size:16px; line-height:1; padding:0 2px; }
.compare-bar-remove:hover{ color:#fff; }
.compare-bar-actions{ display:flex; gap:10px; flex-shrink:0; }
.compare-bar .btn-outline{ border-color: rgba(255,255,255,.3); color:#fff; }
.compare-bar .btn-outline:hover{ background: rgba(255,255,255,.12); border-color:#fff; }
#compare-go.btn-disabled{ pointer-events:none; opacity:.5; }

/* ============ Compare page ============ */
.compare-table-wrap{ overflow-x:auto; margin: 24px 0 70px; }
.compare-table{ width:100%; border-collapse:separate; border-spacing:0; min-width:640px; }
.compare-table th, .compare-table td{ padding: 12px 16px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.compare-table thead th{ background: var(--surface); position:sticky; top:0; }
.compare-col-card{ width:220px; }
.compare-col-card img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px; margin-bottom:10px; background: var(--primary-soft); }
.compare-col-title{ font-weight:700; font-size:14.5px; margin-bottom:6px; display:block; }
.compare-col-price{ font-family: var(--font-mono); font-weight:700; font-size:17px; color: var(--ink); }
.compare-row-label{ font-weight:600; color: var(--ink-soft); font-size:13.5px; white-space:nowrap; background: var(--surface-2); }
.compare-remove-btn{ background:none; border:1px solid var(--line-strong); color: var(--danger); border-radius:999px; padding:4px 12px; font-size:12px; cursor:pointer; margin-top:8px; }
.compare-remove-btn:hover{ background: var(--danger-soft); }

/* ============ Hotel room cards ============ */
.hotel-rooms-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 260px)); gap:16px; margin-bottom:10px; justify-content: start; }
@media (max-width: 640px){ .hotel-rooms-grid{ grid-template-columns: 1fr; } }
.room-card{ background: var(--surface); border:1px solid var(--line); border-radius: 16px; overflow:hidden; box-shadow: var(--shadow-card); }
.room-card-media{ position:relative; aspect-ratio: 4/3; background: var(--primary-soft) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30"><path d="M4 20 L20 6 L36 20 M8 18 V34 H32 V18" fill="none" stroke="%233E68A3" stroke-width="1.4" opacity="0.3"/></svg>') center/30px no-repeat; }
.room-card-media img{ width:100%; height:100%; object-fit:cover; }
.room-card-body{ padding: 12px 14px 14px; }
.room-card-title{ font-weight:600; font-size:14.5px; margin-bottom:4px; }
.room-card-price{ font-family: var(--font-mono); font-weight:700; font-size:15px; color: var(--ink); margin-bottom:6px; }
.room-card-price small{ font-weight:500; color: var(--ink-faint); font-size:11.5px; }
.room-card-meta{ display:flex; gap:10px; font-size:11.5px; color: var(--ink-soft); margin-bottom:6px; }
.room-photo-open{ cursor: zoom-in; }
.room-card-desc{ font-size:12.5px; color: var(--ink-soft); margin:0 0 10px; line-height:1.5; }
.room-book-btn{ width:100%; }
.room-type-badge{ position:absolute; top:9px; left:9px; background: var(--ink); color:#fff; }

.error-page{ text-align:center; padding: 100px 20px; }
.error-page .code{ font-family: var(--font-mono); font-size: 80px; color: var(--line-strong); font-weight:700; }

/* ============ Responsive ============ */
@media (max-width: 900px){
  .main-nav{ display:none; }
  .detail-grid{ grid-template-columns: 1fr; }
  .side-panel{ position:static; }
  .admin-layout{ grid-template-columns: 1fr; }
  .messages-wrap{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .map-shell{ grid-template-columns: 1fr; height:auto; }
  .map-sidebar-col{ order:2; }
  .map-sidebar{ max-height: 480px; }
  .map-canvas-wrap{ height: 420px; order:1; }
}
@media (max-width: 560px){
  .header-inner{ height:auto; padding: 12px 16px; flex-wrap:wrap; gap:10px; }
  .header-actions{ flex-wrap:wrap; gap:10px; }
  .hero{ padding: 40px 0 60px; }
}