/* THEME «Мир шлюх — Бери рядом»
 * Product-каталог, светлая лёгкая тема.
 * Акцент — ягодный (наследник палитры Babylon, но на светлом),
 * карточки — крупные, плотные, текст НА фото (Tescort-паттерн):
 * Имя, возраст, телефон. Системный стек, без веб-шрифтов. */

:root {
  --bg: oklch(1 0 0);
  --surface: oklch(0.968 0.008 25);
  --line: oklch(0.9 0.015 45);
  --text: oklch(0.25 0.03 20);
  --muted: oklch(0.53 0.03 25);
  --accent: oklch(0.58 0.2 18);
  --accent-ink: oklch(0.99 0 0); /* белый: насыщенный средний тон → только белый текст (H-K) */
  --accent-deep: oklch(0.48 0.17 18); /* текст-ссылки на белом: держит 4.5:1 на мелком кегле */
  --gold-ink: oklch(0.86 0.15 85); /* luminous gold текст на тёмной пилюле VIP */
  --radius: 14px;
  --card-radius: 8px;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a { color: inherit; }

.wrap { max-width: 1440px; margin: 0 auto; padding: 0 10px 48px; }

/* ---- header ---- */
.top { position: sticky; top: 0; z-index: 40; background: var(--surface); border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; gap: 14px; padding-top: 10px; padding-bottom: 10px; }
.logo { font-weight: 800; letter-spacing: 0.02em; text-decoration: none; font-size: 19px; white-space: nowrap; }
.logo span { display: block; font-size: 12px; font-weight: 500; color: var(--accent-deep); letter-spacing: 0.06em; }
.nav { display: flex; gap: 2px; overflow-x: auto; margin-left: auto; }
.nav a { padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--muted); white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.nav a:hover { color: var(--text); background: var(--surface); }
.city { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.city select { min-height: 44px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); padding: 0 10px; }

h1 { font-size: 26px; margin: 14px 0 6px; }
.lead { color: var(--muted); max-width: 72ch; margin: 0 0 8px; }
.count { color: var(--muted); font-size: 14px; }
.crumbs { font-size: 13px; color: var(--muted); margin-top: 10px; }
.crumbs a { text-decoration: none; }

/* ---- filters (tescort-паттерн) ---- */
.filters { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0 10px; }
.filters a {
  flex-shrink: 0; text-decoration: none; font-weight: 600; font-size: 14px;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: 999px; padding: 9px 16px; min-height: 44px;
  display: inline-flex; align-items: center;
}
.filters a:hover { border-color: var(--accent); color: var(--accent-deep); }
.filters a[aria-current="page"] { border-color: var(--accent); color: var(--accent-deep); background: oklch(0.95 0.03 18); }

/* ---- grid: 5 в ряд на десктопе, крупно и плотно ---- */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 700px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 10px; } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(5, 1fr); gap: 10px; } }

/* ---- карточка: всё на фото, чуть выпуклая ---- */
.m-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  overflow: hidden;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.7), 0 1px 2px oklch(0.3 0.02 20 / 0.08), 0 4px 14px oklch(0.3 0.02 20 / 0.1);
}
.m-card:hover {
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.7), 0 2px 4px oklch(0.3 0.02 20 / 0.1), 0 8px 22px oklch(0.3 0.02 20 / 0.14);
}
.m-photo {
  position: relative; display: block; text-decoration: none;
  aspect-ratio: 3 / 4;
  background: linear-gradient(160deg, oklch(0.85 0.04 350), oklch(0.78 0.06 20));
}
.m-face {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 84px; font-weight: 800; color: oklch(1 0 0 / 0.55);
}
.m-badges { position: absolute; top: 8px; left: 8px; display: flex; gap: 6px; flex-wrap: wrap; max-width: 62%; }
.m-badges b { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; border-radius: 999px; padding: 4px 9px; }
.b-new { background: var(--accent); color: var(--accent-ink); }
.b-ver { background: oklch(0.35 0.05 160); color: #fff; }
.b-vip { background: oklch(0.28 0.06 30); color: var(--gold-ink); }
.b-hit { background: var(--accent-deep); color: #fff; }
.b-vid { background: oklch(0.35 0.08 250); color: #fff; }
.m-badges.big b { font-size: 13px; padding: 6px 12px; }
.m-meta {
  position: absolute; top: 8px; right: 8px; font-size: 11px; font-weight: 600;
  background: oklch(0.2 0.02 20 / 0.7); color: #fff; border-radius: 999px; padding: 3px 9px;
}
.m-info {
  position: absolute; left: 0; right: 0; bottom: 0; display: block;
  padding: 26px 10px 10px; color: #fff;
  background: linear-gradient(transparent, oklch(0.2 0.03 20 / 0.88));
}
.m-info b { display: block; font-size: 18px; }
.m-info i { display: block; font-style: normal; font-size: 13px; opacity: 0.92; }
.m-actions { display: flex; gap: 6px; padding: 6px; background: var(--surface); }
.m-phone {
  flex: 1 1 auto; display: block; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  font-size: 13px; font-weight: 500; min-height: 38px; border-radius: 6px;
  padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.m-phone.open { background: oklch(0.35 0.05 160); }
.m-tg {
  flex: 0 0 38px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; text-decoration: none;
  background: var(--surface); color: var(--accent-deep);
  border: 1px solid var(--line); min-height: 38px;
}
.m-tg:hover { border-color: var(--accent); }
.m-card.big .m-photo { aspect-ratio: 3 / 4; max-height: 60vh; }

/* ---- age-gate 18+ ---- */
.veil {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 16px;
  background: oklch(0.2 0.02 20 / 0.92);
}
.veil-card {
  max-width: 380px; background: var(--bg); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 24px; text-align: center;
}
.age-mark { font-size: 30px; font-weight: 800; color: var(--accent-deep); }
.veil-card p { color: var(--muted); }
.veil-card .btn-primary { width: 100%; min-height: 48px; }

/* ---- избранное: сердечко без подложки ---- */
.m-fav {
  position: absolute; right: 6px; bottom: 54px; z-index: 2;
  border: 0; background: transparent; cursor: pointer;
  font-size: 26px; line-height: 1; padding: 4px; color: #fff;
  text-shadow: 0 1px 4px oklch(0.2 0.02 20 / 0.8);
}
.m-fav[aria-pressed="true"] { color: var(--accent); text-shadow: 0 0 6px oklch(1 0 0 / 0.9), 0 1px 4px oklch(0.2 0.02 20 / 0.6); }

/* ---- шаринг ---- */
.share { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; font-size: 14px; color: var(--muted); }
.share a { color: var(--accent-deep); }

/* ---- отзывы ---- */
.reviews { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.reviews li { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.reviews p { margin: 6px 0 0; }
.stars { color: var(--accent-deep); font-weight: 700; }

/* ---- таблица услуг ---- */
.svc-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; }
.svc-table th, .svc-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.svc-table th { color: var(--muted); font-weight: 600; }
.svc-table td:last-child { white-space: nowrap; font-weight: 700; color: var(--accent-deep); }

/* ---- поиск и сортировка ---- */
.find { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin: 4px 0 12px; }
.find label { font-size: 13px; color: var(--muted); display: block; }
.find-q { flex: 1 1 220px; }
.find-q input, .find-s select {
  width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--text); padding: 8px 12px; font-size: 16px; margin-top: 4px;
}
.find-s { flex: 0 1 200px; }
.find-p { flex: 0 1 130px; }
.find-p input {
  width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--text); padding: 8px 12px; font-size: 16px; margin-top: 4px;
}

/* ---- легенда бейджей ---- */
.legend { list-style: none; padding: 0; margin: 8px 0; display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.legend li { display: inline-flex; gap: 6px; align-items: center; }
.legend b { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; border-radius: 999px; padding: 4px 9px; }

/* ---- пагинация ---- */
.pager { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 16px 0 4px; }
.pager a {
  text-decoration: none; font-size: 14px; font-weight: 600; background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px;
  min-height: 44px; display: inline-flex; align-items: center;
}
.pager a[aria-current="page"] { border-color: var(--accent); color: var(--accent-deep); }

/* ---- TG-полоса ---- */
.tg-band {
  display: block; text-align: center; text-decoration: none; font-weight: 700;
  border: 1px solid var(--accent); color: var(--accent-deep);
  border-radius: 999px; padding: 10px 16px; min-height: 44px;
  margin: 12px 0;
}
.tg-band:hover { background: var(--accent); color: var(--accent-ink); }

/* ---- лента новых ---- */
.rail { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.rail .m-card { flex: 0 0 200px; }

/* ---- шаги проверки ---- */
.steps { margin: 8px 0; padding-left: 22px; display: grid; gap: 8px; }
.steps li::marker { color: var(--accent-deep); font-weight: 800; }

/* ---- схема метро ---- */
.metro-map { max-width: 560px; margin: 8px 0; }
.metro-map svg { width: 100%; height: auto; display: block; }
.metro-map ellipse { fill: none; stroke: var(--line); stroke-width: 3; }
.metro-map a circle { fill: var(--accent); }
.metro-map a:hover circle { fill: var(--accent-deep); }
.metro-map a text { fill: var(--muted); font-size: 11px; text-anchor: middle; }
.metro-map a:hover text { fill: var(--text); }

/* ---- подборки / статьи ---- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.chips a {
  text-decoration: none; font-size: 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px;
  min-height: 44px; display: inline-flex; align-items: center;
}
.chips a:hover { border-color: var(--accent); color: var(--accent-deep); }
h2 { font-size: 20px; margin: 26px 0 6px; }
details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; margin: 8px 0; }
details summary { cursor: pointer; padding: 12px 0; font-weight: 700; }
.posts { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .posts { grid-template-columns: 1fr 1fr; } }
.post { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.post h2 { margin: 0 0 6px; font-size: 18px; }
.post a { color: var(--accent-deep); }

/* ---- профиль ---- */
.prof { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 10px; }
@media (min-width: 760px) { .prof { grid-template-columns: 340px 1fr; align-items: start; } }
.params { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 4px; }
.params li { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.params b { color: var(--accent-deep); }
.params .k { color: var(--muted); }
.warn { background: oklch(0.95 0.05 85); border: 1px solid oklch(0.85 0.08 85); border-radius: 10px; padding: 10px 12px; font-size: 14px; }
.street label { display: block; font-size: 14px; color: var(--muted); }
.street input {
  width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 12px; font-size: 16px; background: var(--surface); color: var(--text); margin-top: 4px;
}
.sugs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sugs button { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; padding: 8px 12px; min-height: 44px; cursor: pointer; font-size: 14px; }
.street-out { font-weight: 600; }

.foot { color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 24px; }
.foot a { color: var(--accent-deep); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
a, button { transition: background-color 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out; }

/* ---- фото в карточках ---- */
.card-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- галерея профиля ---- */
.gal { display: flex; flex-direction: column; gap: 8px; }
.gal-main { position: relative; aspect-ratio: 3 / 4; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.gal-main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gal-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.gal-thumbs button { border: 1px solid var(--line); border-radius: 10px; padding: 0; cursor: pointer; background: var(--surface); flex-shrink: 0; }
.gal-thumbs button[aria-pressed="true"] { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 1px; }
.gal-thumbs img { display: block; width: 72px; height: 96px; object-fit: cover; border-radius: 10px; }

/* ---- sticky CTA профиля (только мобила) ---- */
.cta-bar { display: none; }
@media (max-width: 759px) {
  .cta-bar {
    display: flex; gap: 10px; align-items: center;
    position: sticky; bottom: 0; z-index: 30;
    background: var(--bg); border-top: 1px solid var(--line);
    padding: 10px 2px; margin-top: 10px;
  }
  .cta-bar .price { font-weight: 800; font-size: 17px; white-space: nowrap; }
  .cta-bar .m-phone { border-radius: 10px; }
}
.m-phone.big { min-height: 48px; border-radius: 0 0 var(--radius) var(--radius); }
.report { margin-top: 12px; }
.report select, .adm-form select {
  width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--text); padding: 0 12px; font-size: 16px;
}
.report .btn, .tag.btn { cursor: pointer; font-family: inherit; margin-top: 8px; min-height: 44px; }

/* ---- фото в админке ---- */
.adm-photos { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.adm-photo { display: flex; flex-direction: column; gap: 6px; align-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.adm-photo img { display: block; width: 96px; height: 128px; object-fit: cover; border-radius: 8px; }
.adm-photo button { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; padding: 7px 12px; min-height: 40px; cursor: pointer; font-size: 13px; }
.adm-photo button:hover { border-color: var(--accent); color: var(--accent-deep); }

/* ---- админка ---- */
.tag {
  display: inline-flex; align-items: center; min-height: 32px;
  font-size: 12px; color: var(--muted);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 10px; text-decoration: none;
}
button.tag { cursor: pointer; font-family: inherit; font-size: 13px; }
.btn-primary {
  display: inline-block; border: 0; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  font-size: 16px; font-weight: 700; min-height: 44px;
  border-radius: 10px; padding: 0 20px;
}
.field { display: block; margin: 12px 0; }
.field > span { display: block; margin-bottom: 4px; font-size: 14px; color: var(--muted); }
.field input {
  width: 100%; min-height: 44px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); padding: 8px 12px; font-size: 16px;
}
.field textarea {
  width: 100%; background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px;
  color: var(--text); padding: 8px 12px; font-size: 15px; font-family: inherit;
}
.form-grid-3 { display: grid; grid-template-columns: 1fr; gap: 0 10px; }
@media (min-width: 760px) { .form-grid-3 { grid-template-columns: 1fr 1fr 1fr; } }
.adm-scroll { overflow-x: auto; }
.adm-pub { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; margin: 12px 0; }
.adm-pub label { font-size: 14px; color: var(--muted); }
.adm-pub input { min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; font-size: 16px; background: var(--bg); color: var(--text); }
.adm-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.adm-table th, .adm-table td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.adm-table th { color: var(--muted); font-weight: 600; }
.flag { color: var(--accent-deep); font-weight: 700; }
.adm-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.adm-acts form { display: inline; }
.adm-acts button { border: 1px solid var(--line); background: var(--surface); color: var(--text); border-radius: 999px; padding: 7px 12px; min-height: 40px; cursor: pointer; font-size: 13px; }
.adm-acts button:hover { border-color: var(--accent); color: var(--accent-deep); }
.adm-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-top: 12px; }
.adm-checks { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 12px 0; display: flex; gap: 12px; flex-wrap: wrap; }
.adm-checks legend { font-size: 14px; color: var(--muted); padding: 0 6px; }
.adm-checks label { display: inline-flex; gap: 6px; align-items: center; font-size: 15px; }
.adm-checks input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); }