:root{
    --ink:#fff;
    --ink-dim:rgba(255,255,255,.9);
    --bar-bg:rgba(255,255,255,.35);
    --bar-fill:#fff;
    --glass:rgba(255,255,255,.08);
    --glass-brd:rgba(255,255,255,.28);
    --neon:0 0 18px rgba(127,241,199,.45);

    --fade:720ms;          /* длительность кросс-фейда */
    --autoplay:5200ms;     /* пауза между кадрами */
  }

  *{box-sizing:border-box}
  html,body{height:100%;margin:0;background:#000;color:var(--ink);
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
  a{color:inherit;text-decoration:none}

  /* ===== HERO (кросс-фейд) ===== */
  .hero{position:relative;height:100svh;overflow:hidden;isolation:isolate;touch-action:pan-y;background:#000}
  .stack{position:absolute;inset:0}
  .slide{
    position:absolute; inset:0; opacity:0; z-index:0;
    transition:opacity var(--fade) ease;
    will-change:opacity;
    contain:layout paint;
  }
  .slide.active{opacity:1; z-index:2}
  .slide.leaving{opacity:0; z-index:1}
  .slide picture,.slide img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  }
  /* лёгкий кинобернс */
  @keyframes kb { from{transform:scale(1.02)} to{transform:scale(1.05)} }
  .slide.active img{ animation: kb var(--autoplay) linear forwards; will-change:transform }

  /* Бейдж (верхний левый) — как просил: чуть ниже и правее */
  .badge{
    position:absolute; left:clamp(24px,6vw,60px);
    top: calc(env(safe-area-inset-top, 8px) + 28px);
    z-index:12; pointer-events:none;
    display:inline-flex; align-items:center; justify-content:center;
    padding:.42em .9em; border-radius:999px;
    font-size:12px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--ink-dim); background:rgba(0,0,0,.38);
    backdrop-filter:blur(4px) saturate(1.1); box-shadow:var(--neon);
    filter:drop-shadow(0 10px 28px rgba(0,0,0,.35));
  }

  /* Заголовок+подзаголовок — на затемнении, слева, над мини-текстом */
  .titlebox{
    position:absolute; left:clamp(14px,4.5vw,48px); right:clamp(14px,4.5vw,48px);
    bottom: calc(148px + env(safe-area-inset-bottom,0));
    z-index:11; pointer-events:none; text-align:left; color:#fff;
    text-shadow:0 14px 40px rgba(0,0,0,.55);
  }
  @media (min-width:900px){
    .titlebox{ bottom: calc(160px + env(safe-area-inset-bottom,0)); max-width:960px }
  }
  .titlebox h1{ margin:0 0 .28em; font-size:clamp(24px,6.2vw,48px); line-height:1.05; font-weight:900 }
  .titlebox .sub{ margin:0; font-size:clamp(12.5px,3.4vw,17px); color:var(--ink-dim) }
  /* направленный вход текста (перезапускается в JS) */
  .titlebox.enter-left{ animation:enterL .55s ease both }
  .titlebox.enter-right{ animation:enterR .55s ease both }
  @keyframes enterL{ from{opacity:0; transform:translateX(-16px)} to{opacity:1; transform:none} }
  @keyframes enterR{ from{opacity:0; transform:translateX(16px)}  to{opacity:1; transform:none} }

  /* Мини-описание — самый низ на градиенте */
  .mini{
    position:absolute; left:clamp(14px,4.5vw,48px); right:clamp(14px,4.5vw,48px);
    bottom: calc(90px + env(safe-area-inset-bottom,0));
    z-index:11; font-size:13px; line-height:1.5; color:rgba(255,255,255,.92);
    text-shadow:0 10px 24px rgba(0,0,0,.45);
  }
  @media (min-width:900px){ .mini{ font-size:14px; max-width:860px } }

  /* Надёжный нижний градиент */
  .hero-shade{
    position:absolute; left:0; right:0; bottom:0; height:45vh; z-index:8; pointer-events:none;
    background:linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.78) 42%, rgba(0,0,0,0) 100%);
  }
  @media (min-aspect-ratio:4/3){ .hero-shade{ height:30vh } }

  /* Сторис-чёрточки */
  .bars{position:absolute; left:0; right:0; top: env(safe-area-inset-top,8px);
    display:flex; gap:6px; padding:10px 12px 0; z-index:9}
  .bar{flex:1; height:3px; border-radius:999px; overflow:hidden; background:var(--bar-bg)}
  .bar i{display:block; height:100%; width:0%; background:var(--bar-fill)}

  /* Навигация кликами/свайпом */
  .nav{position:absolute; inset:0; z-index:10; display:flex; pointer-events:none}
  .hit{flex:1; pointer-events:auto; position:relative; height:calc(100% - 45vh)}
  .hit.left::after,.hit.right::after{
    content:""; position:absolute; top:50%; transform:translateY(-50%);
    width:38px; height:38px; border-radius:50%; background:rgba(0,0,0,.36);
    border:1px solid var(--glass-brd); backdrop-filter:blur(6px);
    opacity:0; transition:opacity .2s;
  }
  .hit.left::after{ left:12px } .hit.right::after{ right:12px }
  .hit:hover::after,.hit:active::after{ opacity:1 }
  @media (min-aspect-ratio:4/3){ .hit{ height:calc(100% - 30vh) } }

  /* Кнопки — без нижней «черты» (убрали псевдоэлемент) */
  .cta{
    position:absolute; left:0; right:0; bottom:0; z-index:11;
    padding: clamp(16px,4.5vw,28px);
    display:flex; gap:12px; justify-content:center; align-items:flex-end;
  }
  .btn{
    appearance:none; display:inline-flex; align-items:center; justify-content:center;
    height:clamp(44px,6.5vw,56px); padding:0 clamp(18px,5.2vw,28px);
    border-radius:14px; border:1px solid var(--glass-brd);
    font-weight:800; font-size:clamp(14px,3.7vw,16px);
    transition:transform .12s ease, background .2s ease;
    box-shadow:0 14px 32px rgba(0,0,0,.45); cursor:pointer;
  }
  .btn.primary{background:#fff; color:#0b1412; border-color:#fff}
  .btn.ghost{  background:var(--glass); color:#fff; backdrop-filter:blur(8px)}
  .btn:active{ transform:translateY(1px) }

  .hint{position:absolute; right:14px; bottom:calc(18px + env(safe-area-inset-bottom,0));
        font-size:12px; color:rgba(255,255,255,.85); z-index:11}
  @media (min-width:900px){ .hint{ display:none } }

  
  /* ===== TOURS: фильтры + карточки с каруселью ===== */
:root{
  --card-bg:#0b0f0d;
  --card-brd:rgba(255,255,255,.10);
  --glass-6:rgba(255,255,255,.06);
  --glass-10:rgba(255,255,255,.10);

  /* более живые акценты */
  --accent:#98ff6e;       /* цена, активные элементы */
  --accent-ink:#0b1412;
  --pill:#111713;

  /* рейтинг — сочная неоновая лаймовая плашка */
  --rate-bg:#b7ff5f;
  --rate-ink:#0b1412;
}

.tours{
  --gap:clamp(12px,2.6vw,18px);
  padding: clamp(18px,4.5vw,28px);
  margin:0 auto; max-width:1240px;
  color:#eafff6;
}

/* ФИЛЬТРЫ */
.t-filters{
  position:sticky; top:0; z-index:40;
  margin:-8px 0 14px; padding:10px 0;
  background:linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,.35), transparent);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--glass-10);
}
.t-tags-wrap{ position:relative; padding:0 42px }
.t-tags{
  display:flex; gap:10px; align-items:center;
  overflow:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  padding:2px 2px 6px;
}
.t-tags::-webkit-scrollbar{ display:none }
.t-tag{
  appearance:none; white-space:nowrap; cursor:pointer;
  border:1px solid var(--card-brd); border-radius:999px;
  background:var(--glass-6); color:#fff; font-weight:800; font-size:13px;
  padding:.55em .95em; letter-spacing:.02em;
  transition:background .2s,border-color .2s,transform .12s;
  position:relative; z-index:1; pointer-events:auto;
}
.t-tag:hover{ transform:translateY(-1px) }
.t-tag.active{ background:#fff; color:#0b1412; border-color:#fff }
.t-tags-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:32px; height:32px; display:grid; place-items:center;
  border-radius:50%; border:1px solid var(--card-brd);
  background:var(--glass-6); color:#fff; cursor:pointer;
  backdrop-filter:blur(8px); z-index:1;
}
.t-tags-arrow.left{ left:4px } .t-tags-arrow.right{ right:4px }
.t-tags-arrow svg{ width:18px; height:18px }

/* Кнопки внутри карточки */
.t-actions{
  margin: 10px 14px 14px;
  display:flex; gap:10px; align-items:center; justify-content:center;
}
.t-btn{
  appearance:none; cursor:pointer;
  border-radius:12px; border:1px solid var(--card-brd);
  font-weight:900; font-size:14px; padding:.8em 1.1em;
  background:var(--glass-6); color:#fff; transition:transform .12s, background .2s, border-color .2s;
}
.t-btn:active{ transform:translateY(1px) }
.t-btn.primary{
  background:#98ff6e; color:#0b1412; border-color:#98ff6e;
  box-shadow:0 18px 40px rgba(152,255,110,.22);
}
/* перелив для "Подробнее" раз в 6с */
.t-btn.shimmer{
  position:relative; overflow:hidden; isolation:isolate;
}
.t-btn.shimmer::after{
  content:""; position:absolute; inset:-2px;
  background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.18) 40%, transparent 55%);
  transform: translateX(-130%); pointer-events:none;
  animation: sweep 6s linear infinite;
}
@keyframes sweep {
  0%, 85% { transform: translateX(-130%); }
  100%    { transform: translateX(130%); }
}

/* СЕТКА */
.t-grid{ display:grid; gap:var(--gap); grid-template-columns:1fr }
@media (min-width:640px){ .t-grid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1100px){ .t-grid{ grid-template-columns:repeat(3,1fr) } }

/* КАРТОЧКА */
.t-card{
  background:var(--card-bg); border:1px solid var(--card-brd);
  border-radius:22px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.48);
}

/* Фото-карусель */
.t-media{ position:relative; aspect-ratio:16/10.2; overflow:hidden; }
.t-slider{ height:100%; display:flex; transition:transform .5s ease; }
.t-slide{ min-width:100%; height:100%; position:relative }
.t-slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

.t-media::after{ /* нижний градиент для читаемости текста */
  content:""; position:absolute; left:0; right:0; bottom:0; height:55%;
  background:linear-gradient(to top, rgba(0,0,0,.95), rgba(0,0,0,.25) 55%, transparent);
  pointer-events:none;
}

.t-dots{
  position:absolute; left:14px; bottom:10px; display:flex; gap:6px; z-index:3;
}
.t-dot{ width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.4); outline:1px solid rgba(0,0,0,.25) }
.t-dot.active{ background:#fff }

/* Заголовок и рейтинг на фото */
.t-title{
  position:absolute; left:14px; right:110px; bottom:26px; z-index:3;
  color:#fff; font-weight:900; font-size:clamp(17px,4.2vw,20px); line-height:1.15;
}
.t-rate{
  position:absolute; right:12px; bottom:12px; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:.5em .7em; border-radius:14px;
  background:var(--rate-bg); color:var(--rate-ink);
  border:1px solid rgba(0,0,0,.12); box-shadow:0 10px 26px rgba(0,0,0,.35);
  font-weight:900; font-size:13px;
}
.t-rate small{ opacity:.9; font-weight:800 }

/* Контент */
.t-body{ padding:14px 14px 12px }
/* сетка под фото из 3 квадратных плиток */
.t-specs{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:10px; margin:12px 0 14px;
}
.ibox{
  height:68px; border-radius:14px;
  background:var(--glass-6); border:1px solid var(--glass-10);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; text-align:center;
}
.ibox svg{ width:22px; height:22px }
.ibox small{ font-size:11.5px; line-height:1; color:#e5fff4; opacity:.95 }

/* Нижняя плашка: тип тура + цена */
.t-footer{ display:flex; align-items:center; justify-content:space-between; gap:12px }
.t-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:.55em .9em; border-radius:999px; font-weight:900; font-size:12.5px;
  color:#dfffea; background:var(--pill); border:1px solid var(--glass-10);
}
.t-price{ display:flex; align-items:baseline; gap:10px; font-weight:900; }
.t-price s{ opacity:.55; font-weight:800; font-size:14px }
.t-price .cur{
  font-size:19px; color:var(--accent);
  text-shadow:0 0 20px rgba(152,255,110,.28);
}
.t-note{
  font-size:12px; color:var(--accent); margin:8px 0 4px;
  padding:6px 10px; border-radius:10px; background:rgba(152,255,110,.08);
  border:1px solid rgba(152,255,110,.28);
}

/* === HERO floating actions === */
.hero-fabs{
  position:absolute;
  right:clamp(12px,4vw,24px);

  /* якорь только снизу — над кнопками */
  top:auto;
  bottom: calc(var(--cta-h, 0px) + 14px + env(safe-area-inset-bottom,0px));

  z-index:13;
  display:flex; flex-direction:column;
  justify-content:flex-end;         /* прижали к низу */
  align-items:center;
  gap: var(--fab-gap, 12px);        /* стабильный маленький зазор */

  transform-origin:right bottom;
  transform: scale(var(--fab-scale, 1));
}

.fab{
  width:clamp(40px, 7vh, 48px);
  height:clamp(40px, 7vh, 48px);
  border-radius:50%;
  display:grid; place-items:center;
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.22);
  background:transparent;
  color:#fff;
  cursor:pointer;
  transition:transform .15s ease;
}
.fab:active{ transform:translateY(1px) }

/* портрет: поднимаем, чтобы не перекрывали мини-текст */
@media (orientation: portrait) and (max-width: 540px){
  .hero-fabs{
    bottom: calc(var(--cta-h, 0px) + 110px + env(safe-area-inset-bottom,0px));
  }
}

/* альбомная на телефонах: держим у самого низа и делаем компактнее */
@media (orientation: landscape) and (max-height: 480px){
  :root{ --fab-gap:10px; }
  .hero-fabs{
    bottom: calc(30px + env(safe-area-inset-bottom,0px));
  }
  .fab{ width:40px; height:40px; }
}

/* десктоп и «режим ПК»: небольшой нижний отступ и правее */
@media (min-width: 900px){
  .hero-fabs{
    bottom: calc(40px + env(safe-area-inset-bottom,0px));
    right: clamp(16px, 3vw, 32px);
  }
}

.fab{
  width:clamp(40px, 7vh, 48px);
  height:clamp(40px, 7vh, 48px);
  border-radius:50%;
  display:grid; place-items:center;
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.22);
  background:transparent;
  color:#fff;
  cursor:pointer;
  transition:transform .15s ease;
}
.fab:active{ transform:translateY(1px) }

/* Иконки соцсетей — настоящие изображения, без самодельных svg */
.fab.icon{ padding:0; border-color:rgba(255,255,255,.18); background:transparent }
.fab.icon img{ width:100%; height:100%; border-radius:50%; display:block }

/* "О нас" остаётся лаймовым и мерцающим */
.fab--about{ background:#98ff6e; color:#0b1412; border-color:#98ff6e }
@keyframes pulse {
  0%{ box-shadow:0 0 0 0 rgba(152,255,110,.55) }
  70%{ box-shadow:0 0 0 14px rgba(152,255,110,0) }
  100%{ box-shadow:0 0 0 0 rgba(152,255,110,0) }
}
.fab--about.pulse{ animation:pulse 1.8s ease-out infinite }

/* (устаревшие стили брендов больше НЕ нужны — .fab--vk / .fab--tt / .fab--ig УДАЛИЛИ) */




/* ===== HOUSING (жильё) — использует ту же визуальную систему ===== */
.housing{ --gap:clamp(12px,2.6vw,18px); padding:clamp(18px,4.5vw,28px); margin:0 auto; max-width:1240px; color:#eafff6 }
.h-grid{ display:grid; gap:var(--gap); grid-template-columns:1fr }
@media (min-width:640px){ .h-grid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1100px){ .h-grid{ grid-template-columns:repeat(3,1fr) } }

.h-card{ background:var(--card-bg); border:1px solid var(--card-brd); border-radius:22px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.48) }
.h-card.h-pinned{ 
  border-color:#ff8f3a !important; 
  border-width:2px;
  box-shadow:0 24px 60px rgba(255,143,58,.35), 0 0 0 1px rgba(255,143,58,.2) inset;
}

/* медиа-карусель карточки */
.h-media{ position:relative; aspect-ratio:16/10.2; overflow:hidden }
.h-pinned-icon{
  position:absolute; top:12px; right:12px; z-index:5;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,143,58,.95); border-radius:50%; border:2px solid rgba(0,0,0,.2);
  font-size:18px; box-shadow:0 4px 12px rgba(0,0,0,.3);
  backdrop-filter:blur(4px);
  pointer-events:none;
}
.h-slider{ height:100%; display:flex; transition:transform .5s ease }
.h-slide{ min-width:100%; height:100%; position:relative }
.h-slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block }
.h-dots{ position:absolute; left:14px; bottom:10px; display:flex; gap:6px; z-index:3 }
.h-dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.4); outline:1px solid rgba(0,0,0,.25) }
.h-dot.active{ background:#fff }

.h-media::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:55%;
  background:linear-gradient(to top, rgba(0,0,0,.95), rgba(0,0,0,.25) 55%, transparent); pointer-events:none }

/* бейджи слева-верх по столбику */
.h-badges{ position:absolute; left:12px; top:12px; z-index:3; display:flex; flex-direction:column; gap:6px; 
  align-items:flex-start;            /* ✅ не растягивать бейджи на всю ширину */
}
.h-badge{ display:inline-flex; align-items:center; padding:.35em .6em; border-radius:999px; font-weight:900; font-size:12px;
  color:#0b1412; background:#ffd27a; border:1px solid rgba(0,0,0,.12) } /* ярко-оранжевые */

.h-title{ position:absolute; left:14px; right:130px; bottom:26px; z-index:3; color:#fff; font-weight:900; font-size:clamp(17px,4.2vw,20px); line-height:1.15 }

/* рейтинг (оранжевая плашка) */
.h-rate{ position:absolute; right:12px; bottom:12px; z-index:3; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:.5em .7em; border-radius:14px; background:#ff8f3a; color:#0b1412; border:1px solid rgba(0,0,0,.12); box-shadow:0 10px 26px rgba(0,0,0,.35);
  font-weight:900; font-size:13px }
.h-rate small{ opacity:.9; font-weight:800 }

/* тело карточки */
.h-body{ padding:14px 14px 12px; display:grid; gap:8px }
.h-landlord{ font-size:12.5px; opacity:.9 }
.h-price{ display:flex; align-items:baseline; gap:10px; font-weight:900 }
.h-price .now{ font-size:19px; color:#ff8f3a; text-shadow:0 0 20px rgba(255,143,58,.28) }
.h-price .other{ font-size:13px; opacity:.9 }



/* Кликалка для "?" — сам кружок ОРАНЖЕВЫЙ */
.tip{
  position: relative;                /* якорь для .tip-box */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  border-radius: 999px;
  background: #ff8f3a;               /* ЯРКО-ОРАНЖЕВЫЙ КРУЖОК */
  color: #0b1412;                    /* тёмный знак вопроса */
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  border: 1px solid #ff8f3a;         /* граница совпадает с фоном */
  box-shadow: 0 0 0 0 rgba(255,143,58,0.0);
}
.tip:hover{ filter: brightness(0.96); }
/* ВАЖНО: ::after не нужен, т.к. в разметке уже есть текст "?" внутри .tip */

/* Попап — тёмный, НЕ оранжевый */
.tip-box{
  position:absolute;
  top:50%;
  right:125%;              /* тултип слева от кружка */
  transform:translateY(-50%);
  display:none;

  background:rgba(0,0,0,.92);
  color:#fff;
  border:1px solid rgba(255,255,255,.15);
  padding:8px 12px;
  border-radius:10px;
  font-size:13px;
  line-height:1.4;

  white-space:normal;       /* разрешаем перенос */
  word-break:break-word;    /* ломаем длинные слова */
  min-width:170px;          /* ← ЗАДАЁМ МИНИМАЛЬНУЮ ШИРИНУ */
  max-width:270px;          /* ← и ограничение по максимуму */
  text-align:left;          /* нормальное выравнивание */
}

.tip.open .tip-box{ display:block; }

/* «хвостик» попапа */
.tip-box::after{
  content:"";
  position:absolute;
  top:-6px; right:10px;
  border:6px solid transparent;
  border-bottom-color: rgba(0,0,0,.92);
}

/* условия — бейджи */
.h-conds{ display:flex; flex-wrap:wrap; gap:8px }
.h-cond{ padding:.35em .6em; border-radius:999px; font-weight:800; font-size:12px; color:#eafff6; background:#2a1e12; border:1px solid rgba(255,255,255,.12) }

/* кнопки */
.h-actions{ margin: 8px 0 2px; display:flex; gap:10px; align-items:center; justify-content:center }
.h-btn{ appearance:none; cursor:pointer; border-radius:12px; border:1px solid var(--card-brd); font-weight:900; font-size:14px; padding:.8em 1.1em;
  background:var(--glass-6); color:#fff; transition:transform .12s, background .2s, border-color .2s }
.h-btn:active{ transform:translateY(1px) }
.h-btn.primary{ background:#ff8f3a; color:#0b1412; border-color:#ff8f3a; box-shadow:0 18px 40px rgba(255,143,58,.22) }
.h-btn.shimmer{ position:relative; overflow:hidden; isolation:isolate }
.h-btn.shimmer::after{ content:""; position:absolute; inset:-2px; background:linear-gradient(110deg, transparent 25%, rgba(255,255,255,.18) 40%, transparent 55%);
  transform:translateX(-130%); pointer-events:none; animation:sweep 6s linear infinite }

/* фильтры секции жилья — такие же, но свой контейнер */
.h-filters{ position:sticky; top:0; z-index:40; margin:-8px 0 14px; padding:10px 0;
  background:linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,.35), transparent);
  backdrop-filter:blur(6px); border-bottom:1px solid var(--glass-10) }
.h-tags-wrap{ position:relative; padding:0 42px }
.h-tags{ display:flex; gap:10px; align-items:center; overflow:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:2px 2px 6px }
.h-tags::-webkit-scrollbar{ display:none }
.h-tag{ appearance:none; white-space:nowrap; cursor:pointer; border:1px solid var(--card-brd); border-radius:999px; background:var(--glass-6); color:#fff;
  font-weight:800; font-size:13px; padding:.55em .95em; letter-spacing:.02em; transition:background .2s,border-color .2s,transform .12s;
  position:relative; z-index:1; pointer-events:auto }
.h-tag:hover{ transform:translateY(-1px) }
.h-tag.active{ background:#fff; color:#0b1412; border-color:#fff }
.h-tags-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:32px; height:32px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--card-brd); background:var(--glass-6); color:#fff; cursor:pointer; backdrop-filter:blur(8px); z-index:1 }
.h-tags-arrow.left{ left:4px } .h-tags-arrow.right{ right:4px }
.h-tags-arrow svg{ width:18px; height:18px }

/* ==== Рейтинг 10-точечный (кружки) для жилья ==== */
.dots{ position:relative; display:inline-flex; flex-direction:row-reverse; gap:6px }
.dots input{ position:absolute; inset:0; width:0; height:0; opacity:0; pointer-events:none }
.dots label{ width:18px; height:18px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:transparent; cursor:pointer }
.dots input:checked ~ label, .dots label:hover, .dots label:hover ~ label{ background:#ff8f3a; border-color:#ff8f3a }







/* === Bottom Sheet === */
.sheet-backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,.65);           /* темнее фон */
  backdrop-filter:blur(2px);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease; z-index:120;
}
/* === Bottom Sheet === */
.sheet{
  position:fixed; left:0; right:0; bottom:0;
  max-height:96svh;
  transform: translateY(calc(100% + 120px));
  transition:transform .33s ease;
  z-index:121;
  border-radius:22px 22px 0 0;
  background:linear-gradient(180deg, rgba(10,15,13,.88), rgba(10,15,13,.72));
  border-top:1px solid rgba(255,255,255,.18);
  box-shadow: none;
  color:#eafff6;
  --sheet-pad: clamp(18px, 4vw, 42px);

  /* структура модалки */
  display:flex;
  flex-direction:column;
  overflow:hidden;
  overscroll-behavior:contain;
}

/* Туровая шторка — НЕ тянем до самого верха, чтобы скругления были видны */
#tourSheet.sheet{
  top: auto;                     /* не цепляемся за верх */
  bottom: 0;
  max-height: 96svh;             /* чуть ниже 100svh — остаётся «воздух» сверху */
  border-radius: 22px 22px 0 0;  /* скруглённые верхние углы */
}

/* Шапка и тело с учётом вырезов (notch) */
#tourSheet .sheet-head{
  top:0;
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
}
#tourSheet .sheet-body{
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}



.sheet.open{
  transform: translateY(0);
  box-shadow: 0 -30px 60px rgba(0,0,0,.55); /* тень только когда открыта */
}
.sheet-backdrop.open{ opacity:1; pointer-events:auto 
}

/* шапка оставляем как было (sticky уже есть в твоём коде) */

/* НОВОЕ: скролл именно у тела модалки */
.sheet-body{
  flex:1;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  padding-bottom:max(12px, env(safe-area-inset-bottom));
}

/* шапка темнее */
.sheet-head{
  position:sticky; top:0;
  background:rgba(0,0,0,.55);           /* темнее шапка */
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.12);
  padding:12px 48px 10px 16px; z-index:1;
  touch-action:none;                     /* позволяем собственный свайп */
}
.sheet-drag{
  width:46px; height:4px; margin:6px auto 10px;
  border-radius:999px; background:rgba(255,255,255,.38);
}

/* круглый крестик */
.sheet-close{
  position:absolute; right:10px; top:8px;
  width:36px; height:36px; border-radius:50%; /* был скруглённый квадрат */
  display:grid; place-items:center; color:#eafff6;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18); cursor:pointer;
}
.sheet-close:active{ transform:translateY(1px) }

@media (min-width: 1200px){
  .sheet{
    --sheet-pad: clamp(32px, 4vw, 64px);
  }
}

.sheet-shell{
  display:flex;
  flex-direction:column;
  gap:clamp(20px, 3vw, 40px);
  padding:var(--sheet-pad);
  padding-bottom:calc(var(--sheet-pad) + env(safe-area-inset-bottom,0px));
  max-width:1280px;
  margin:0 auto;
  color:#f6fffb;
}
@media(max-width:767px){
  .sheet-shell{
    gap:clamp(16px, 4vw, 24px);
    padding-bottom:calc(var(--sheet-pad) + env(safe-area-inset-bottom,0px));
  }
}
.sheet-shell h2,
.sheet-shell h3,
.sheet-shell h4{
  margin:0;
}
.sheet-section{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.tour-shell{ row-gap:clamp(20px,3vw,44px); }
.tour-hero{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.tour-hero__label{
  text-transform:uppercase;
  letter-spacing:.32em;
  font-size:12px;
  color:rgba(255,255,255,.6);
}
.tour-hero__title{
  font-size:clamp(24px,4vw,48px);
  line-height:1.15;
  letter-spacing:-.01em;
}
@media(max-width:767px){
  .tour-hero__title{
    font-size:clamp(20px,4.5vw,26px);
  }
}
.tour-hero__lead{
  font-size:clamp(16px,2vw,20px);
  line-height:1.55;
  color:rgba(255,255,255,.85);
}
.tour-quick{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
@media(max-width:767px){
  .tour-quick{
    gap:6px;
  }
}
.tour-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  font-weight:600;
  font-size:14px;
}
@media(max-width:767px){
  .tour-chip{
    padding:5px 11px;
    font-size:12px;
  }
}
.tour-chip strong{ font-size:15px; }
@media(max-width:767px){
  .tour-chip strong{ font-size:13px; }
}

.tour-gallery{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.tour-gallery .t-media{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  min-height:clamp(300px, 55vh, 580px);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.02);
}
@media(max-width:767px){
  .tour-gallery .t-media{
    border-radius:20px;
    min-height:clamp(220px, 45vh, 360px);
  }
}
.tour-gallery .t-slider{ height:100%; }
.tour-gallery__thumbs{
  display:flex;
  gap:10px;
  overflow:auto;
  padding-bottom:4px;
  scrollbar-width:none;
}
.tour-gallery__thumbs::-webkit-scrollbar{ display:none }
@media(max-width:767px){
  .tour-gallery__thumbs{ display:none; }
}
.tour-thumb{
  width:96px;
  height:66px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.05);
  opacity:.65;
  transition:border-color .2s, opacity .2s, transform .2s;
}
@media(max-width:767px){
  .tour-gallery__thumbs{
    gap:6px;
    padding-bottom:2px;
  }
  .tour-thumb{
    width:72px;
    height:52px;
    border-radius:10px;
  }
}
.tour-thumb.active{
  opacity:1;
  border-color:#fff;
  transform:translateY(-2px);
}
.tour-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.tour-facts{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px,1fr));
  gap:12px;
}
@media(max-width:767px){
  .tour-facts{
    grid-template-columns:1fr;
    gap:8px;
  }
}
.tour-fact{
  padding:18px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(8,12,11,.72);
  min-height:120px;
  display:flex;
  flex-direction:column;
  gap:5px;
}
.tour-fact small{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:11px;
  color:rgba(255,255,255,.55);
}
.tour-fact span{
  font-size:16px;
  font-weight:600;
}
@media(max-width:767px){
  .tour-fact{
    padding:12px 14px;
    border-radius:18px;
    min-height:auto;
    gap:4px;
  }
  .tour-fact small{
    font-size:10px;
  }
  .tour-fact span{
    font-size:14px;
  }
}

.tour-desc p{
  margin:0;
  line-height:1.65;
  color:rgba(255,255,255,.9);
}
.tour-desc p + p{ margin-top:1em; }

.tour-includes{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.tour-includes li{
  list-style:none;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  padding:10px 16px;
  font-size:14px;
  background:rgba(255,255,255,.03);
}
@media(max-width:767px){
  .tour-includes{
    gap:6px;
  }
  .tour-includes li{
    font-size:12px;
    padding:6px 11px;
  }
}
@media(max-width:767px){
  .tour-includes{
    gap:6px;
  }
  .tour-includes li{
    font-size:12px;
    padding:6px 11px;
  }
}

.tour-route__list{
  display:flex;
  gap:14px;
  overflow:auto;
  padding-bottom:2px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
}
.tour-route__card{
  flex:0 0 min(260px, 75vw);
  border-radius:22px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(5,8,7,.9);
  overflow:hidden;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
}
@media(max-width:767px){
  .tour-route__card{
    flex:0 0 min(220px, 78vw);
    border-radius:16px;
  }
}
.route-narrative{
  display:none;
  line-height:1.55;
}
.route-narrative p{
  margin:.35em 0;
  color:rgba(255,255,255,.85);
}
.route-narrative strong{
  font-weight:700;
  margin-right:4px;
}
@media(max-width:767px){
  .tour-route__list{
    display:none;
  }
  .route-narrative{
    display:block;
  }
}
.tour-route__media{
  position:relative;
  padding-top:62%;
}
.tour-route__media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.tour-route__content{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.tour-route__title{
  font-size:15px;
  font-weight:700;
}
.tour-route__text{
  font-size:14px;
  line-height:1.55;
  color:rgba(255,255,255,.85);
}

.tour-reviews{
  display:grid;
  gap:14px;
}
@media(max-width:767px){
  .tour-reviews{
    gap:10px;
  }
}
.review-extra{
  margin-top:12px;
  display:grid;
  gap:14px;
}
@media(max-width:767px){
  .review-extra{
    margin-top:8px;
    gap:10px;
  }
}
.t-review-card{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.1);
  padding:18px;
  background:radial-gradient(circle at top,#1c2b24,#0b130f);
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  display:flex;
  flex-direction:column;
  gap:12px;
}
@media(max-width:767px){
  .t-review-card{
    border-radius:18px;
    padding:12px;
    gap:8px;
  }
}
.t-review-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.t-review-user{
  display:flex;
  align-items:center;
  gap:12px;
}
.t-review-avatar{
  width:46px;
  height:46px;
  border-radius:14px;
  background:linear-gradient(135deg,#1dbf73,#87ffe0);
  display:grid;
  place-items:center;
  font-weight:700;
  color:#052015;
}
.t-review-date{
  font-size:12px;
  color:rgba(255,255,255,.6);
}
.t-review-text{
  margin:0;
  line-height:1.6;
  color:rgba(255,255,255,.92);
}
.t-review-stars{
  color:#ffd776;
  letter-spacing:.18em;
  font-size:15px;
}
.review-more-btn{
  border-radius:999px;
  border:1px solid rgba(255,255,255,.25);
  padding:10px 20px;
  background:transparent;
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition:background .2s, border-color .2s, transform .2s;
}
.review-more-btn:hover{
  background:rgba(255,255,255,.08);
  border-color:#fff;
  transform:translateY(-1px);
}

.sheet-cta{
  position:sticky;
  bottom:0;
  left:0;
  right:0;
  z-index:10;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  margin:0 calc(var(--sheet-pad) * -1) calc(env(safe-area-inset-bottom,0px) * -1);
  padding:16px var(--sheet-pad) calc(12px + env(safe-area-inset-bottom,0px));
  background:rgba(6,8,8,.96);
  border-top:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(18px);
  box-shadow:0 -25px 60px rgba(0,0,0,.45);
  margin-top:clamp(18px,3vw,28px);
}
.sheet-cta .cta-left{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.sheet-cta .cta-price{
  font-size:20px;
  font-weight:700;
}
.sheet-cta .cta-actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:nowrap;
}
@media(max-width:767px){
  .sheet-cta--tour{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    padding:12px var(--sheet-pad) calc(10px + env(safe-area-inset-bottom,0px));
  }
  .sheet-cta--tour .cta-left{
    display:none;
  }
  .sheet-cta--tour .cta-actions{
    width:100%;
    flex-direction:column;
    gap:6px;
  }
  .sheet-cta--tour .cta-btn{
    width:100%;
    justify-content:center;
  }
}
.cta-btn{
  appearance:none;
  border:none;
  border-radius:999px;
  padding:12px 20px;
  font-weight:700;
  font-size:15px;
  cursor:pointer;
  transition:transform .2s, box-shadow .2s, background .2s;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}
@media(max-width:767px){
  .cta-btn{
    padding:10px 18px;
    font-size:14px;
  }
}
.cta-btn.primary{
  background:#fafe6f;
  color:#0e150f;
  box-shadow:0 20px 50px rgba(245,254,111,.35);
}
.cta-btn.telegram{
  background:rgba(49,167,255,.18);
  border:1px solid rgba(154,215,255,.4);
  color:#c4ecff;
}
.cta-btn.whatsapp{
  background:rgba(46,213,115,.15);
  border:1px solid rgba(158,255,201,.4);
  color:#c7ffd8;
}
.cta-btn.ghost{
  border:1px solid rgba(255,255,255,.4);
  background:transparent;
  color:#fff;
}
.cta-btn:active{ transform:translateY(1px); }

.tour-videos .v-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;
}
@media(max-width:767px){
  .tour-videos .v-grid{
    grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
    gap:8px;
  }
}
@media(min-width:600px){
  .tour-videos .v-grid{
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:12px;
  }
}
@media(min-width:1024px){
  .tour-videos{
    display:flex;
    justify-content:center;
  }
  .tour-videos .v-grid{
    max-width:920px;
    margin:0 auto;
  }
}
@media(min-width:1200px){
  .tour-videos .v-grid{
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  }
}
.tour-videos .v-item{
  position:relative;
  aspect-ratio:16/9;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  cursor:pointer;
  transition:transform .2s, border-color .2s;
}
@media(max-width:767px){
  .tour-videos .v-item{
    border-radius:12px;
  }
}
.tour-videos .v-item:active{
  transform:scale(.98);
}
.tour-videos .v-item video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.tour-videos .v-play{
  position:absolute;
  left:8px;
  bottom:8px;
  display:inline-flex;
  gap:6px;
  align-items:center;
  padding:.35em .6em;
  border-radius:999px;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(6px);
  color:#fff;
  font-weight:700;
  font-size:12px;
}
.tour-videos .v-play::before{
  content:"▶";
  font-weight:900;
  font-size:10px;
}
@media(max-width:767px){
  .tour-videos .v-play{
    font-size:11px;
    padding:.28em .5em;
  }
}

.sheet-skeleton{
  padding:var(--sheet-pad);
  display:grid;
  gap:14px;
}
.sheet-skeleton .sk{
  border-radius:16px;
  height:clamp(18px, 2vw, 34px);
  background:linear-gradient(120deg, rgba(255,255,255,.05), rgba(255,255,255,.15), rgba(255,255,255,.05));
  background-size:200% 100%;
  animation:skeleton 1.6s ease infinite;
}
.sheet-skeleton .sk-lg{
  height:clamp(220px, 45vh, 420px);
  border-radius:30px;
}
@keyframes skeleton{
  0%{ background-position:200% 0; }
  100%{ background-position:-200% 0; }
}

.house-shell{
  display:flex;
  flex-direction:column;
  gap:clamp(20px, 3vw, 36px);
  padding:var(--sheet-pad);
  padding-bottom:calc(var(--sheet-pad) + env(safe-area-inset-bottom,0px));
  max-width:1200px;
  margin:0 auto;
}
.house-hero{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.house-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.house-meta span{
  border-radius:999px;
  padding:6px 14px;
  border:1px solid rgba(255,255,255,.1);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
}
.house-gallery .t-media{
  border-radius:24px;
  min-height:clamp(260px, 45vh, 520px);
}
.house-facts{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.house-card{
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.house-card small{
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:11px;
  color:rgba(255,255,255,.6);
}
.house-card span{
  font-weight:600;
}
.house-desc p{
  margin:0;
  line-height:1.65;
  color:rgba(255,255,255,.9);
}
.house-desc p + p{ margin-top:1em; }
.house-amenities{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.house-amenities li{
  list-style:none;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  padding:10px 16px;
}
.house-host{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.1);
  padding:18px;
  background:rgba(7,10,9,.82);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.house-host strong{ font-size:16px; }


/* блокируем фон при открытом шите */
body.no-scroll{ overflow:hidden }


/* карточки гидов */
.guides{ display:grid; grid-template-columns:1fr; gap:12px; }
@media(min-width:700px){ .guides{ grid-template-columns:repeat(3,1fr) } }
.guide{
  display:flex; gap:12px; align-items:center;
  border:1px solid rgba(255,255,255,.12); border-radius:16px;
  background:rgba(255,255,255,.06); padding:10px; overflow:hidden;
}
.guide img{
  width:64px; height:64px; border-radius:14px; object-fit:cover;
  border:1px solid rgba(255,255,255,.18);
}
.ginfo{ min-width:0 }
.gname{ margin:0; font-weight:900; font-size:15px }
.gbadge{ display:inline-block; margin:4px 0 8px; font-size:12px; font-weight:800;
  padding:.35em .6em; border-radius:999px; background:#111713; border:1px solid rgba(255,255,255,.12) }
.glinks{ display:flex; flex-wrap:wrap; gap:8px; }
.glinks a{
  display:inline-flex; align-items:center; gap:6px; padding:.45em .7em;
  border-radius:10px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.07); color:#fff; font-weight:800; font-size:13px;
}
.glinks a svg{ width:16px; height:16px }




/* ==== Видеогалерея (отдельно от фото) ==== */
.v-grid{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media(min-width:800px){.v-grid{grid-template-columns:repeat(3,1fr)}}
.v-item{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;
  border:1px solid var(--glass-10);background:#000;cursor:pointer}
.v-item video,.v-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.v-play{position:absolute;left:10px;bottom:10px;display:inline-flex;gap:8px;align-items:center;
  padding:.45em .7em;border-radius:999px;background:rgba(0,0,0,.48);
  backdrop-filter:blur(6px);color:#fff;font-weight:800;font-size:13px}
.v-play::before{content:"▶";font-weight:900}

/* ==== Лайтбокс для видео ==== */
.vbox{position:fixed;inset:0;z-index:130;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.75);backdrop-filter:blur(4px);padding:16px;}
.vbox.open{display:flex}
.vbox-inner{
  width:min(90vw,820px);
  max-height:90vh;
  margin:0;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.vbox-inner video{
  width:100%;
  max-height:80vh;
  border-radius:18px;
  background:#000;
  object-fit:contain;
}
.vbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid var(--glass-10);
  background:rgba(0,0,0,.45);
  color:#fff;
  cursor:pointer;
}
.vbox-prev{left:8px} .vbox-next{right:8px}
.vbox-close{
  position:absolute;
  right:10px;
  top:10px;
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:1px solid var(--glass-10);
  background:rgba(0,0,0,.55);
  color:#fff;
  cursor:pointer;
}
@media(max-width:767px){
  .vbox-nav{
    width:34px;
    height:34px;
  }
  .vbox-prev{left:4px} .vbox-next{right:4px}
  .vbox-close{
    right:8px;
    top:8px;
  }
}

/* Фото в модалке тура — скругляем края */
#houseSheet .t-media,
#tourSheet .t-media{
  border-radius:16px;      /* можно 14–18 на вкус */
  overflow:hidden;         /* уже есть у .t-media, но дублирование тут не вредит */
  border:1px solid var(--glass-10);
}



/* === Рейтинг (звёзды) === */
.stars{
  position:relative;                 /* якорь для абсолютных input */
  display:inline-flex;
  flex-direction:row-reverse;        /* чтобы кликалка шла слева-направо */
  gap:6px;
}
.stars input{
  position:absolute; inset:0;        /* уводим из потока */
  width:0; height:0;                 /* не перекрывает ничего */
  opacity:0; pointer-events:none;
}
.stars label{
  font-size:22px; line-height:1; cursor:pointer; user-select:none;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
.stars label::before{ content:"☆"; }
.stars input:checked ~ label::before{ content:"★"; }
.stars label:hover::before,
.stars label:hover ~ label::before{ content:"★"; }

.rate-row{ display:flex; align-items:center; gap:10px; color:#fff; }

/* 1) Убрать серую вспышку на тач-устройствах (Chrome/Android, Safari) */
* { -webkit-tap-highlight-color: rgba(0,0,0,0); }

/* 2) Если элемент сфокусирован кликом/тапом — подсветку прячем */
:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* 3) Красивый розовый фокус ТОЛЬКО для клавиатуры */
:focus-visible {
  outline: none; /* не используем системный контур */
  box-shadow: 0 0 0 3px rgba(255, 20, 147, 0.35); /* DeepPink с прозрачностью */
  border-radius: 8px; /* слегка скругляем */
}

/* 4) Поддержка Firefox (его спец-селектор для клавиатуры) */
:-moz-focusring {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 20, 147, 0.35);
  border-radius: 8px;
}

/* 5) На чисто тач-устройствах вообще не показывать фокус-рамку */
@media (hover: none) and (pointer: coarse) {
  :focus, :focus-visible, :-moz-focusring {
    outline: none !important;
    box-shadow: none !important;
  }
}

#tours, #housing, #tourSheet, #houseSheet {
  content-visibility: auto;
  contain-intrinsic-size: 1200px 1200px; /* запас, чтобы не прыгал макет */
}


/* Чтобы якорь был «куда крутить», даже если карточек ещё нет */
.anchor{
  min-height: 70vh;               /* безопасная высота-заглушка */
  scroll-margin-top: 12px;        /* небольшой отступ сверху */
}

/* Плавная прокрутка для ссылок */
html{ scroll-behavior: smooth; }

/* Уже есть у тебя, но на всякий: это помогает до-отрисовкой размеров */
#tours, #housing{
  content-visibility: auto;
  contain-intrinsic-size: 1000px 1000px; /* можно 800–1200px */
}




  /* ==== BOOT LOADER ==== */
  #boot {
    position: fixed; inset: 0; z-index: 9999;
    display: none; place-items: center;
    background: radial-gradient(80% 80% at 50% 40%, rgba(0,0,0,.55), rgba(0,0,0,.92));
    color: #fff; text-align: center;
    backdrop-filter: blur(4px);
  }
  #boot.open { display: grid; }
  .boot-box {
    display:grid; gap:14px; padding:20px 22px;
    border-radius:16px; background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.18);
    min-width: 260px;
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
  }
  .boot-title { font-weight:900; font-size:16px }
  .boot-note  { opacity:.9; font-size:13px }
  /* спиннер */
  .boot-spin {
    width:44px; height:44px; margin:0 auto; border-radius:50%;
    border:3px solid rgba(255,255,255,.25);
    border-top-color:#98ff6e; animation:spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform:rotate(360deg) } }

  /* ===== СЛАЙДЕР РЕКЛАМЫ ===== */
  .ads-slider{
    margin: 16px 0 24px;
    position: relative;
    width: 100%;
    height: clamp(180px, 25vw, 280px);
    border-radius: 16px;
    overflow: hidden;
    background: #0b0f0d;
    border: 1px solid rgba(255,255,255,.1);
  }
  .ads-slider-track{
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
    will-change: transform;
  }
  .ads-slide{
    flex: 0 0 100%;
    position: relative;
    height: 100%;
    cursor: pointer;
  }
  .ads-slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .ads-slide-caption{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.7), transparent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
  }
  .ads-slider-dots{
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;
  }
  .ads-dot{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.4);
    cursor: pointer;
    transition: background .2s, transform .2s;
  }
  .ads-dot.active{
    background: #fff;
    transform: scale(1.2);
  }
  @media (min-width: 900px) {
    .ads-slider{
      height: clamp(200px, 20vw, 320px);
    }
    .ads-slide-caption{
      padding: 16px 20px;
      font-size: 15px;
    }
  }