/* === Харьков — Сауны: общий стиль === */
:root {
  --bg: #0b1020;
  --card: #0f172a;
  --muted: #94a3b8;
  --text: #e2e8f0;
  --brand: #10b981;
  --brand-2: #34d399;
  --danger: #ef4444;
  --shadow: 0 1px 0 rgba(0,0,0,.04), 0 10px 28px rgba(16,24,40,.26);
  --radius-xl: 18px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 15% -10%, rgba(16,185,129,0.18), transparent 50%),
              radial-gradient(900px 700px at 110% -10%, rgba(52,211,153,0.25), transparent 55%),
              var(--bg);
  color: var(--text);
  line-height: 1.55;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { width: min(1100px, 92vw); margin: 0 auto; padding: 20px 0 56px; }

header.site-header {
  position: static;
  background: linear-gradient(180deg, rgba(11,16,32,0.92), rgba(11,16,32,0.72));
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.header-inner { display: flex; align-items: center; gap: 16px; padding: 12px 0; }
.logo { width: 40px; height: 40px; border-radius: 12px; background: conic-gradient(from 200deg, var(--brand), var(--brand-2)); display: grid; place-items: center; font-weight: 800; color: #052e16; box-shadow: var(--shadow); }
.title-wrap { display: grid; }
.title { font-size: clamp(18px, 3vw, 24px); margin: 0; letter-spacing: .2px; }
.subtitle { margin: 0; color: var(--muted); font-size: 14px; }

.hero { padding: 0 0 10px; }
.searchbar { display: flex; gap: 10px; align-items: center; }
.searchbar input { flex: 1; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(148,163,184,.25); background: rgba(15,23,42,.7); color: var(--text); outline: none; }
.searchbar input::placeholder { color: #93a3b8; }
.searchbar button { padding: 12px 14px; border-radius: 12px; border: 0; cursor: pointer; font-weight: 600; background: linear-gradient(180deg, var(--brand), var(--brand-2)); color: #052e16; box-shadow: var(--shadow); }

/* Навигация по районам */
.district-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.district-nav a { padding: 8px 12px; border-radius: 999px; background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.28); color: #d1fae5; font-weight: 600; }
.district-nav a:hover { text-decoration: none; background: rgba(16,185,129,.18); }

/* Навигация по метро */
.metro-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.metro-nav a { padding: 8px 12px; border-radius: 999px; background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.28); color: #d1fae5; font-weight: 600; }
.metro-nav a:hover { text-decoration: none; background: rgba(16,185,129,.18); }
.metro-nav a[aria-current="page"] { pointer-events:none; opacity:.6; filter:saturate(.7); border-style:dashed; }

/* Сетка карточек */
.grid { display: grid; gap: 16px; margin-top: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.sauna-card { background: radial-gradient(400px 200px at 10% 0%, rgba(16,185,129,0.10), transparent 40%), var(--card); border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow); display: grid; grid-template-rows: auto 1fr auto; transition: transform .15s ease, border-color .2s ease; }
.sauna-card:hover { transform: translateY(-2px); border-color: rgba(52,211,153,0.35); }

.cover { position: relative; aspect-ratio: 16/9; background: #0b132b; overflow: hidden; }
.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.price-badge { position: absolute; right: 10px; top: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(5,46,22,.9); color: #a7f3d0; font-weight: 700; font-size: 14px; border: 1px solid rgba(52,211,153,.4); }

.content { padding: 14px 14px 8px; display: grid; gap: 8px; }
.name { font-size: 18px; font-weight: 800; margin: 0 0 2px; letter-spacing: .2px; }
.desc { color: var(--muted); margin: 0; font-size: 14px; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tags{ align-items: center; }
.tag{ display:inline-flex; align-items:center; white-space: nowrap; }
.tag a{ white-space: nowrap; overflow:hidden; text-overflow:ellipsis; }

.tag { padding: 6px 9px; border-radius: 999px; font-size: 12px; color: #c7f9e9; background: rgba(16,185,129,.14); border: 1px solid rgba(16,185,129,.28); }

.meta { display: grid; gap: 6px; padding: 0 14px 14px; }
.address { font-size: 14px; color: #cbd5e1; }
.district { font-size: 12px; color: #a7f3d0; opacity: .95; }
.metro    { font-size: 12px; color: #a7f3d0; opacity: .95; }

.actions { display: flex; gap: 10px; padding: 0 14px 16px 14px; }
.btn { appearance: none; border: 0; border-radius: 12px; padding: 10px 12px; cursor: pointer; font-weight: 700; background: rgba(16,185,129,.16); color: #d1fae5; border: 1px solid rgba(16,185,129,.28); }
.btn.primary { background: linear-gradient(180deg, var(--brand), var(--brand-2)); color: #052e16; }

footer { margin-top: 30px; color: var(--muted); font-size: 13px; text-align: center; }

@media (max-width: 640px) {
  .header-inner { padding: 10px 0; }
  .hero { padding-top: 0px; }
  .actions { flex-direction: column; }
}

/* Активный (текущий) район в меню */
.district-nav a[aria-current="page"]{
  pointer-events: none;
  opacity: .6;
  filter: saturate(.7);
  border-style: dashed;
}

/* SEO-блок */
.seo{margin-top:28px;padding:18px 16px;border-radius:16px;background:rgba(15,23,42,.55);border:1px solid rgba(255,255,255,.06)}
.seo h2{margin:0 0 8px;font-size:20px;letter-spacing:.2px}
.seo p,.seo ul{color:var(--muted)}
.seo ul{margin:8px 0 0;padding-left:18px}
@media (max-width:640px){ .seo{padding:16px 14px} }

/* Ссылка на район внутри карточки */
.district a{
  color: #cbd5e1;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.district a:hover{ color: var(--text); }
.district[aria-current="page"]{ opacity: .75; pointer-events: none; }

/* Ссылка на метро внутри карточки */
.metro a{
  color: #cbd5e1;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.metro a:hover{ color: var(--text); }
.metro[aria-current="page"]{ opacity: .75; pointer-events: none; }

/* Меню услуг */
.service-nav { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; }
.service-nav a { padding:8px 12px; border-radius:999px; background: rgba(52,211,153,.12); border:1px solid rgba(16,185,129,.28); color:#d1fae5; font-weight:600; text-decoration:none; }
.service-nav a:hover { background: rgba(52,211,153,.18); text-decoration:none; }
.service-nav a[aria-current="page"] { pointer-events:none; opacity:.6; filter:saturate(.7); border-style:dashed; }

.tags .tag a { color:#c7f9e9; text-decoration:none; }
.tags .tag a:hover { text-decoration:underline; }
.tag.current { opacity:.75; border-style:dashed; }

/* Обложка-картинка как ссылка */
.cover a{ display:block; width:100%; height:100%; }
.cover a:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }

/* VIP оформление */
.sauna-card.tier-vipplus{
  border-color: rgba(251,191,36,.55);
  box-shadow: 0 0 0 1px rgba(251,191,36,.25), var(--shadow);
  background:
    radial-gradient(500px 220px at 12% 0%, rgba(251,191,36,.18), transparent 45%),
    var(--card);
}
.sauna-card.tier-vip{
  border-color: rgba(245,158,11,.45);
  box-shadow: 0 0 0 1px rgba(245,158,11,.20), var(--shadow);
  background:
    radial-gradient(480px 200px at 12% 0%, rgba(245,158,11,.14), transparent 45%),
    var(--card);
}
.tier-badge{
  position:absolute; left:10px; top:10px;
  padding:6px 10px; border-radius:9px;
  font-weight:800; font-size:12px; letter-spacing:.3px;
  background: linear-gradient(180deg, #fde68a, #fbbf24);
  color:#3b2f08; border:1px solid rgba(251,191,36,.6);
}
.sauna-card.tier-vip .tier-badge{
  background: linear-gradient(180deg, #fcd34d, #f59e0b);
  border-color: rgba(245,158,11,.55);
}

/* Навигация: общие стили */
.nav-row{ display:flex; align-items:center; gap:8px; margin-top:8px; }
.nav-row > nav{ flex:1; min-width:0; }

.nav-toggle{
  display:inline-flex;  /* ← раньше чтобы не сворачивалось было display:none */
  padding:0 12px;
  border-radius:999px;
  background:#1f2937;
  border:1px solid #334155;
  color:#d1fae5;
  font-weight:600;
  height: var(--chip-row); line-height: calc(var(--chip-row) - 16px);
  white-space:nowrap; cursor:pointer;
}
.nav-toggle:hover{ background: #243041; }

/* @media (max-width:640px){ коментирую правила мобильной версии, теперь для всех версий*/
  .nav-toggle{ display:inline-flex; align-items:center; }
  .nav-row{ align-items:flex-start; }
  .nav-row.collapsed > .district-nav,
  .nav-row.collapsed > .metro-nav,
  .nav-row.collapsed > .service-nav{
    display:flex;
    flex-wrap:nowrap;
    overflow:hidden;
    max-height: var(--chip-row);
  }
  .nav-row.collapsed > .district-nav a,
  .nav-row.collapsed > .metro-nav a,
  .nav-row.collapsed > .service-nav a{
    flex:0 0 auto;
  }
/* } */

/* чипы и кнопка */
:root{ --chip-row: 36px; }
.district-nav a,
.metro-nav a,
.service-nav a{
  display:inline-flex;
  align-items:center;
  height: var(--chip-row);
  padding: 0 12px;
  line-height: 1;
}
.nav-row > .district-nav,
.nav-row > .metro-nav,
.nav-row > .service-nav{ margin-top: 0; }

/* Контакт-окно */
.contact-overlay{
  position: fixed; inset: 0;
  background: rgba(2,6,23,.6);
  backdrop-filter: blur(4px);
  display: none; align-items: flex-end; justify-content: center;
  z-index: 50;
}
.contact-overlay.show{ display: flex; }
.contact-sheet{
  width: min(540px, 94vw);
  background: var(--card);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 16px 16px 0 0;
  box-shadow: var(--shadow);
  padding: 16px; position: relative;
}
.contact-sheet h3{ margin: 0 0 8px; font-size: 18px; }
.contact-row{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.contact-close{
  position: absolute; right: 12px; top: 10px;
  background: transparent; border: 0; color: var(--text);
  font-size: 22px; cursor: pointer;
}
@media (min-width: 641px){
  .contact-overlay{ align-items: center; }
  .contact-sheet{ border-radius: 16px; }
}

/* видео в обложке */
.cover video.cover-media{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border:0;
}


/* === Метро по веткам === */
/* Базовая кнопка метро (сброс оттенка) */
.metro-nav a{
  color:#d1fae5;
  background: rgba(148,163,184,.10);
  border:1px solid rgba(148,163,184,.25);
}

/* Красная ветка */
.metro-nav a.line-red{
  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.28);
  color: #fee2e2;
}
.metro-nav a.line-red:hover{
  background: rgba(239,68,68,.20);
}

/* Синяя ветка */
.metro-nav a.line-blue{
  background: rgba(59,130,246,.14);
  border-color: rgba(59,130,246,.28);
  color: #dbeafe;
}
.metro-nav a.line-blue:hover{
  background: rgba(59,130,246,.20);
}

/* Зелёная ветка */
.metro-nav a.line-green{
  background: rgba(16,185,129,.14);
  border-color: rgba(16,185,129,.28);
  color: #d1fae5;
}
.metro-nav a.line-green:hover{
  background: rgba(16,185,129,.20);
}

/* Текущая страница остаётся с пунктиром и лёгким приглушением */
.metro-nav a[aria-current="page"]{
  pointer-events:none;
  opacity:.75;
  filter:saturate(.75);
  border-style:dashed;
}


/* табличка бдля текстов */
  .price-table {
    border-collapse: collapse;
    margin: 20px auto;
    width: 70%;
    max-width: 100%;
    border: 2px solid #058054; /* зелёный кант */
  }

  .price-table th,
  .price-table td {
    border: 1px solid #058054;
    padding: 10px 14px;
    text-align: left;
  }

  .price-table th {
    background: #058054;
  }
  
  /* центрируем второй заголовок */
  .price-table th:nth-child(2) {
    text-align: center;
  }

  /* второй столбец всегда в 1 строку */
  .price-table td:last-child {
    white-space: nowrap;
    text-align: center;
    font-weight: 600;
  }

  /* адаптив */
  @media (max-width: 700px) {
    .price-table {
      width: 95%;
    }
  }
  

/* стиль еле заметной ссылки для текстов */
  a.k-link {
    color: inherit; /* цвет текста как у основного текста */
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.3); /* светлое/полупрозрачное подчёркивание */
    text-decoration-thickness: 1px; /* тонкая линия */
  }

  a.k-link:hover {
    text-decoration-color: rgba(255, 255, 255, 0.6); /* при наведении чуть ярче */
  }