/* ============================================
   SpeedBikeGo — Glass redesign (mockup-aligned)
   Наслаивается ПОСЛЕ styles.css, активен с html.sbg-redesign
   ============================================ */

html.sbg-redesign {
  color-scheme: light dark;

  --brand-navy: #3b3aff;
  --brand-speed: #ff5a36;
  --brand-vn: #da251d;

  /* до footer-скрипта: нижний отступ под плавающий dock */
  --sbg-dock-h: 88px;

  --topbar-float-y: 14px;
  --appbar-h: 60px;
  /* низ «пилюльной» шапки = отступ для сайдбара / контента */
  --top-h: calc(var(--topbar-float-y) + var(--appbar-h));

  --radius-shell: 22px;
  --radius-pill: 999px;

  --glass-border-light: rgba(255, 255, 255, 0.7);
  --glass-shadow: 0 8px 32px rgba(40, 30, 80, 0.1);
  --glass-shadow-hover: 0 16px 48px rgba(40, 30, 80, 0.16);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

/* Светлая палитра по умолчанию (если нет data-theme до первого скрипта темы) */
html.sbg-redesign{
  --bg: #f3eef9;
  --text: #1a1a2e;
  --muted: rgba(26, 26, 46, 0.62);

  --layer: rgba(255, 255, 255, 0.65);
  --layer2: rgba(255, 255, 255, 0.82);
  --border: rgba(26, 26, 46, 0.12);

  --accent: var(--brand-navy);
  --link: color-mix(in oklab, var(--brand-navy) 82%, var(--brand-speed) 18%);
  --link-hover: color-mix(in oklab, var(--brand-speed) 45%, black 25%);

  --page-bg:
    radial-gradient(900px 700px at 88% -5%, rgba(232, 216, 255, 0.95), transparent 55%),
    radial-gradient(800px 600px at 8% 10%, rgba(255, 212, 184, 0.55), transparent 50%),
    radial-gradient(700px 500px at 55% 45%, rgba(197, 224, 255, 0.45), transparent 55%),
    linear-gradient(180deg, #f3eef9 0%, #f4eff9 42%, #ece8f4 100%);

  --appbar-opacity: 72%;
  --surface-blur: 18px;

  --card-bg: rgba(255, 255, 255, 0.52);
  --card-stroke: var(--glass-border-light);

  --shadow-1: var(--glass-shadow);
  --inner-1: var(--glass-inset);

  --btn-primary-bg: linear-gradient(135deg, var(--brand-speed), #ff8a3c);
  --btn-primary-border: transparent;
  --btn-hover-border: rgba(26, 26, 46, 0.14);

  --tb-bg: rgba(255, 255, 255, 0.55);
  --tb-border: rgba(255, 255, 255, 0.75);
  --tb-btn-bg: rgba(255, 255, 255, 0.72);
  --tb-btn-border: rgba(26, 26, 46, 0.1);
  --tb-pop-bg: rgba(255, 255, 255, 0.94);
  --tb-hover: rgba(26, 26, 46, 0.06);
}

html.sbg-redesign[data-theme="light"]{
  /* дублирует базу: явный light после переключателя темы */
  --bg: #f3eef9;
  --text: #1a1a2e;
  --muted: rgba(26, 26, 46, 0.62);
  --layer: rgba(255, 255, 255, 0.65);
  --layer2: rgba(255, 255, 255, 0.82);
  --border: rgba(26, 26, 46, 0.12);
  --accent: var(--brand-navy);
  --page-bg:
    radial-gradient(900px 700px at 88% -5%, rgba(232, 216, 255, 0.95), transparent 55%),
    radial-gradient(800px 600px at 8% 10%, rgba(255, 212, 184, 0.55), transparent 50%),
    radial-gradient(700px 500px at 55% 45%, rgba(197, 224, 255, 0.45), transparent 55%),
    linear-gradient(180deg, #f3eef9 0%, #f4eff9 42%, #ece8f4 100%);
  --card-bg: rgba(255, 255, 255, 0.52);
  --tb-bg: rgba(255, 255, 255, 0.55);
  --tb-border: rgba(255, 255, 255, 0.75);
  --tb-btn-bg: rgba(255, 255, 255, 0.72);
  --tb-btn-border: rgba(26, 26, 46, 0.1);
}

html.sbg-redesign[data-theme="dark"]{
  --bg: #0a0814;
  --text: #f0f0fa;
  --muted: rgba(240, 240, 250, 0.65);

  --layer: rgba(255, 255, 255, 0.06);
  --layer2: rgba(255, 255, 255, 0.1);
  --border: rgba(255, 255, 255, 0.14);

  --accent: color-mix(in oklab, var(--brand-navy) 65%, white 35%);
  --link: color-mix(in oklab, var(--brand-speed) 70%, white 18%);
  --link-hover: var(--brand-speed);

  --page-bg:
    radial-gradient(820px 640px at 80% -8%, rgba(42, 26, 85, 0.9), transparent 58%),
    radial-gradient(720px 520px at -5% 20%, rgba(255, 90, 54, 0.18), transparent 55%),
    radial-gradient(600px 480px at 50% 50%, rgba(26, 58, 85, 0.5), transparent 60%),
    linear-gradient(180deg, #0a0814 0%, #0d0a18 50%, #0a0814 100%);

  --appbar-opacity: 76%;
  --surface-blur: 20px;

  --card-bg: rgba(255, 255, 255, 0.07);
  --card-stroke: rgba(255, 255, 255, 0.14);

  --shadow-1: 0 8px 32px rgba(0, 0, 0, 0.5);
  --inner-1: inset 0 1px 0 rgba(255, 255, 255, 0.1);

  --btn-primary-bg: linear-gradient(135deg, var(--brand-speed), #ff8a3c);
  --btn-primary-border: transparent;
  --btn-hover-border: rgba(255, 255, 255, 0.18);

  --tb-bg: rgba(20, 18, 32, 0.72);
  --tb-border: rgba(255, 255, 255, 0.12);
  --tb-btn-bg: rgba(255, 255, 255, 0.08);
  --tb-btn-border: rgba(255, 255, 255, 0.16);
  --tb-pop-bg: rgba(18, 16, 28, 0.96);
  --tb-hover: rgba(255, 255, 255, 0.08);
}

/* Базовая страница */
html.sbg-redesign body{
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  background: var(--page-bg, var(--bg));
  background-attachment: fixed, fixed, fixed, fixed;
  background-repeat: no-repeat;
  /* shell сам даёт padding-top через свой внутренний отступ */
  padding-top: 0 !important;
  /* margin-left = 0, layout управляется через sbg-shell grid */
  margin-left: 0 !important;
  /* padding-bottom тоже управляется sbg-main, обнуляем base-rule от footer.php */
  padding-bottom: 0 !important;
}

/* ===== SHELL — grid-обёртка (sidebar + main), точно как в макете ===== */
html.sbg-redesign .sbg-shell{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--sidebar-w, 240px) 1fr;
  gap: 18px;
  max-width: 1320px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + var(--appbar-h) + var(--topbar-float-y) + 6px) 16px 0;
  box-sizing: border-box;
  /* align-items: start = ячейки по высоте контента, sticky работает */
  align-items: start;
}

@media (max-width: 979px){
  html.sbg-redesign .sbg-shell{
    grid-template-columns: 1fr;
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ===== sbg-main — правая ячейка grid shell ===== */
html.sbg-redesign .sbg-main{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--sbg-dock-h, 88px) + 20px);
}
/* (прямые дети sbg-main ниже по файлу — с !important) */

/* Анимированные blob (как в мокапе) */
html.sbg-redesign body::before,
html.sbg-redesign body::after{
  content: "";
  position: fixed;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.5;
  z-index: 0;
  pointer-events: none;
  animation: sbg-blob-drift 28s ease-in-out infinite;
}
html.sbg-redesign body::before{
  width: 520px; height: 520px;
  top: -140px; left: -100px;
  background: #e8d8ff;
}
html.sbg-redesign body::after{
  width: 580px; height: 580px;
  bottom: -160px; right: -120px;
  background: #ffd4b8;
  animation-delay: -10s;
  animation-duration: 34s;
}

html.sbg-redesign[data-theme="dark"] body::before{
  background: #2a1a55;
  opacity: 0.35;
}
html.sbg-redesign[data-theme="dark"] body::after{
  background: #ff5a36;
  opacity: 0.22;
}

@keyframes sbg-blob-drift{
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(50px, -40px) scale(1.06); }
  66% { transform: translate(-30px, 28px) scale(0.96); }
}

html.sbg-redesign .sbg-main,
html.sbg-redesign .sbg-shell,
html.sbg-redesign .sidebar{
  position: relative;
  z-index: 1;
}
html.sbg-redesign .topbar{
  /* topbar — поверх shell */
  z-index: 100;
}
html.sbg-redesign .mobile-menu{
  position: fixed;
  z-index: 1100;
}
/* ТОЛЬКО прямые дети sbg-main (page-level container) — без авто-центрирования */
html.sbg-redesign .sbg-main > .container{
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* padding внутри контейнера сохраняем — он задаётся индивидуально */
}
html.sbg-redesign main{
  position: relative;
  z-index: 1;
}

/* ---------- Плавающая pill topbar (разметка из topbar.php) ---------- */
html.sbg-redesign .topbar{
  top: calc(env(safe-area-inset-top, 0px) + var(--topbar-float-y));
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: calc(100% - 28px);
  max-width: 1320px;
  height: var(--appbar-h);
  border-radius: var(--radius-pill);
  border: 1px solid var(--tb-border);
  border-bottom: 1px solid var(--tb-border);
  background: var(--tb-bg);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: var(--glass-shadow), var(--glass-inset);
}
html.sbg-redesign .topbar .inner{
  padding: 0 14px 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Центральная навигация топбара (как .topbar-nav в макете) */
html.sbg-redesign .sbg-topbar-nav{
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
html.sbg-redesign .sbg-topbar-nav-link{
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
  white-space: nowrap;
}
html.sbg-redesign .sbg-topbar-nav-link:hover{
  background: var(--layer2);
}
html.sbg-redesign .sbg-topbar-nav-link.active{
  background: var(--brand-speed);
  color: #fff;
  box-shadow: 0 4px 14px rgba(255, 90, 54, 0.4);
}
@media (max-width: 900px){
  html.sbg-redesign .sbg-topbar-nav{
    display: none;
  }
}

/* ===== Топбар — адаптив для узких экранов ===== */
/* На узких экранах — скрываем поисковую строку топбара, она есть в hero/фильтрах */
@media (max-width: 640px){
  html.sbg-redesign .sbg-topbar-search{
    display: none !important;
  }
  html.sbg-redesign .topbar .inner{
    gap: 6px !important;
    padding: 0 8px !important;
  }
  html.sbg-redesign .topbar .brand{
    font-size: 13px !important;
    gap: 5px !important;
  }
  html.sbg-redesign .topbar .brand img{
    width: 22px !important;
    height: 22px !important;
  }
}

@media (max-width: 400px){
  html.sbg-redesign .topbar .brand strong{
    display: none !important;
  }
  html.sbg-redesign .topbar .inner{
    gap: 4px !important;
    padding: 0 6px !important;
  }
}

html.sbg-redesign .tb-btn{
  border-radius: var(--radius-pill);
  box-shadow: none;
  border: 1px solid var(--tb-btn-border);
  background: var(--tb-btn-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
html.sbg-redesign .tb-btn:hover{
  border-color: var(--brand-speed);
  box-shadow: 0 0 0 3px rgba(255, 90, 54, 0.12);
}

/* ===== Бренд / логотип в топбаре (как в макете) ===== */
html.sbg-redesign .topbar .brand{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}
html.sbg-redesign .topbar .brand img{
  width: 28px;
  height: 28px;
  border-radius: 8px;
  object-fit: contain;
}
/* SpeedBikeGo: «Speed» обычный, «BikeGo» жирный в цвете brand-speed */
html.sbg-redesign .topbar .brand strong{
  font-weight: 800;
  letter-spacing: -0.02em;
}
html.sbg-redesign .topbar .brand strong b{
  color: var(--brand-speed);
  font-weight: 900;
}
html.sbg-redesign[data-theme="light"] .topbar .brand,
html.sbg-redesign[data-theme="light"] .topbar .tb-btn{
  color: var(--text);
}

/* ---------- Сайдбар — STICKY (отдельный блок), не прокручивается со страницей ---------- */
html.sbg-redesign .sidebar{
  position: sticky !important;
  /* прилипает под плавающим топбаром */
  top: calc(env(safe-area-inset-top, 0px) + var(--appbar-h) + var(--topbar-float-y) + 6px) !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  /* ширина берётся из grid-колонки, max-width для надёжности */
  width: 100% !important;
  /* высота до низа вьюпорта. Нижний dock центрирован — левую колонку не занимает, поэтому НЕ вычитаем --sbg-dock-h
     (иначе на страницах с dock высота меньше, чем в /admin, где dock не подключается). */
  height: calc(
    100vh
    - env(safe-area-inset-top, 0px)
    - var(--appbar-h)
    - var(--topbar-float-y)
    - 6px
    - env(safe-area-inset-bottom, 0px)
    - 14px
  ) !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  /* скролл только внутри .scroll — одинаковая «коробка» на всех страницах */
  overflow: hidden !important;
  align-self: start;
  /* стеклянный блок */
  border-radius: var(--radius-shell);
  border: 1px solid var(--tb-border);
  background: var(--tb-bg);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: var(--glass-shadow), var(--glass-inset);
}
html.sbg-redesign .sidebar .scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}
html.sbg-redesign .sidebar .scroll::-webkit-scrollbar,
html.sbg-redesign .sidebar::-webkit-scrollbar{ width: 3px; }
html.sbg-redesign .sidebar .scroll::-webkit-scrollbar-thumb,
html.sbg-redesign .sidebar::-webkit-scrollbar-thumb{ background: var(--card-stroke); border-radius: 2px; }
html.sbg-redesign .sidebar .scroll::-webkit-scrollbar-track,
html.sbg-redesign .sidebar::-webkit-scrollbar-track{ background: transparent; }

/* На мобилке сайдбар скрыт (grid-template-columns: 1fr), мобильное меню его заменяет */
@media (max-width: 979px){
  html.sbg-redesign .sidebar{ display: none !important; }
}

html.sbg-redesign .sidebar .group{
  border-radius: 16px;
  border: 1px solid var(--card-stroke);
  background: var(--card-bg);
  box-shadow: var(--shadow-1), var(--inner-1);
}
html.sbg-redesign .sidebar .nav a.current,
html.sbg-redesign .mobile-menu .list a.tb-btn.current{
  background: linear-gradient(135deg, rgba(59, 58, 255, 0.14), rgba(255, 90, 54, 0.1)) !important;
  border-color: var(--card-stroke) !important;
  font-weight: 600;
}

/* ---------- Карточки / кнопки ---------- */
html.sbg-redesign .card{
  border-radius: var(--radius-shell);
  border: 1px solid var(--card-stroke);
  background: var(--card-bg);
  box-shadow: var(--shadow-1), var(--inner-1);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}

html.sbg-redesign .btn:not(.btn-danger):not(.btn-outline),
html.sbg-redesign button:not(.tb-btn):not(.btn-danger):not([class*="btn-outline"]):not(.menu-toggle){
  border-radius: var(--radius-pill);
}

html.sbg-redesign .btn.btn-primary,
html.sbg-redesign button.btn-primary,
html.sbg-redesign input[type="submit"].btn-primary{
  background: linear-gradient(135deg, var(--brand-speed), #ff8a3c) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 6px 20px rgba(255, 90, 54, 0.35);
  font-weight: 600;
}
html.sbg-redesign .btn.btn-primary:hover,
html.sbg-redesign button.btn-primary:hover{
  filter: brightness(1.05);
  box-shadow: 0 10px 28px rgba(255, 90, 54, 0.45);
}

/* ===== site-footer: в glass-redesign NOT fixed, вписывается в поток sbg-main ===== */
html.sbg-redesign .site-footer{
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  top: auto !important;
  max-height: none !important;
  overflow: visible !important;
  border-radius: var(--radius-shell) !important;
  border: 1px solid var(--card-stroke) !important;
  border-top: 1px solid var(--card-stroke) !important;
  background: var(--card-bg) !important;
  box-shadow: var(--glass-shadow), var(--glass-inset) !important;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  margin: 0 !important;
}
html.sbg-redesign .site-footer-inner{
  max-height: none !important;
  overflow: visible !important;
}
html.sbg-redesign body{
  padding-bottom: 0 !important;
}
/* Нижний padding для sbg-main уже задан через var(--sbg-dock-h) */

/* ===== body padding-top убран, sbg-shell сам даёт зазор ===== */
/* (body без отступа сверху — shell берёт на себя) */

/* ---------- Хедер мини-страниц (.header из styles.css) ---------- */
html.sbg-redesign .header{
  top: calc(env(safe-area-inset-top, 0px) + var(--topbar-float-y));
  left: 50%;
  transform: translateX(-50%);
  right: auto;
  width: calc(100% - 28px);
  max-width: 1320px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--tb-border);
  background: var(--tb-bg);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: var(--glass-shadow), var(--glass-inset);
}

/* ---------- Мобильное меню ---------- */
html.sbg-redesign .mobile-menu .panel{
  border-radius: var(--radius-shell) var(--radius-shell) 0 0;
}

/* ---------- Поля ввода ---------- */
html.sbg-redesign input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.sbg-redesign select,
html.sbg-redesign textarea{
  border-radius: 14px;
}
html.sbg-redesign input:focus,
html.sbg-redesign select:focus,
html.sbg-redesign textarea:focus{
  border-color: var(--brand-speed) !important;
  box-shadow: 0 0 0 4px rgba(255, 90, 54, 0.12);
  outline: none;
}

/* ---------- Контейнер шире, как в макапе ---------- */
html.sbg-redesign .container{
  max-width: 1320px;
}

/* ---------- Узкие экраны: шапка на всю ширину ---------- */
@media (max-width: 640px){
  html.sbg-redesign .topbar,
  html.sbg-redesign .header{
    width: calc(100% - 16px);
    border-radius: 20px;
  }
}

/* ========== Главная (index): hero, сетка каталога, карточки ========== */
/* Плотнее: badges → заголовок → type → контент (меньше вертикальный gap колонки) */
html.sbg-redesign body.page-home .sbg-main{
  gap: 4px !important;
}
/* ===== Кнопки скачивания — компактная строка без контейнера, выравнивание вправо ===== */
/* ===== Store badges — строка 1 (вверху, по правому краю) ===== */
html.sbg-redesign body.page-home .store-badges-row{
  order: unset !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ===== Type buttons — строка 2, сразу под badges ===== */
/* убираем огромный margin у .type-buttons контейнера */
html.sbg-redesign body.page-home .type-buttons{
  margin: 0 !important;
  padding: 0 !important;
}
html.sbg-redesign body.page-home .store-badges-row .store-badge-btn{
  padding: 7px 14px 7px 10px !important;
  border-radius: 999px !important;  /* пилюля */
  gap: 8px !important;
  min-width: auto !important;
  height: 38px !important;
}
html.sbg-redesign body.page-home .store-badges-row .store-badge-icon{
  width: 20px !important;
  height: 20px !important;
}
html.sbg-redesign body.page-home .store-badges-row .store-badge-text{
  display: flex;
  flex-direction: column;
  gap: 0;
}
html.sbg-redesign body.page-home .store-badges-row .store-badge-subtitle{
  font-size: 8px !important;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
html.sbg-redesign body.page-home .store-badges-row .store-badge-title{
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1.2;
}

/* Заголовок раздела (аренда/продажа/услуги) — сразу над кнопками типов, компактные отступы */
html.sbg-redesign body.page-home .sbg-home-section-head{
  text-align: center;
  max-width: 1320px;
  margin: 4px auto 6px;
  padding: 0 max(16px, env(safe-area-inset-left)) 0 max(16px, env(safe-area-inset-right));
  box-sizing: border-box;
}
html.sbg-redesign body.page-home .sbg-home-section-title{
  margin: 0 0 4px;
  font-size: clamp(1.15rem, 2.8vw, 1.45rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--text);
}
html.sbg-redesign body.page-home .sbg-home-section-tag{
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--muted, #64748b);
}
/* Меньше зазор между заголовком раздела и кнопками аренда/продажа/услуги */
html.sbg-redesign body.page-home .sbg-home-section-head + .type-buttons{
  margin-top: 2px !important;
}
/* Минимальный зазор между кнопками типов и блоком .container (hero / фильтры / лента) */
html.sbg-redesign body.page-home .type-buttons + .container{
  margin-top: 0 !important;
}
html.sbg-redesign body.page-home .container{
  padding-top: 6px !important;
}

html.sbg-redesign body.page-home .sbg-hero{
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 24px;
  align-items: center;
  padding: 28px 32px;
  margin: 0 0 14px;
  background: var(--card-bg);
  border: 1px solid var(--card-stroke);
  border-radius: var(--radius-shell);
  box-shadow: var(--shadow-1), var(--inner-1);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  position: relative;
  overflow: hidden;
}
html.sbg-redesign body.page-home .sbg-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(255, 90, 54, 0.12), transparent 52%);
  pointer-events: none;
}
html.sbg-redesign body.page-home .sbg-hero-copy{
  position: relative;
  z-index: 1;
  min-width: 0;
}
html.sbg-redesign body.page-home .sbg-hero-tag{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  margin-bottom: 12px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-navy), var(--brand-speed));
}
html.sbg-redesign body.page-home .sbg-hero-title{
  margin: 0 0 12px;
  font-size: clamp(26px, 4.2vw, 40px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
}
html.sbg-redesign body.page-home .sbg-hero-accent{
  background: linear-gradient(135deg, var(--brand-navy), var(--brand-speed));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html.sbg-redesign body.page-home .sbg-hero-lead{
  margin: 0 0 20px;
  max-width: 520px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}
html.sbg-redesign body.page-home .sbg-hero-cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
html.sbg-redesign body.page-home .sbg-hero-cta-secondary.btn-ghost{
  border: 1px solid var(--card-stroke) !important;
  background: var(--layer2) !important;
  color: var(--text) !important;
  font-weight: 600;
  padding: 12px 18px;
}
html.sbg-redesign body.page-home .sbg-hero-cta-secondary.btn-ghost:hover{
  border-color: var(--brand-speed) !important;
  box-shadow: 0 0 0 3px rgba(255, 90, 54, 0.1);
}
html.sbg-redesign body.page-home .sbg-hero-stats{
  display: flex;
  flex-wrap: wrap;
  gap: 22px 28px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid color-mix(in oklab, var(--text) 10%, transparent);
}
html.sbg-redesign body.page-home .sbg-hero-stat-num{
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  background: linear-gradient(135deg, var(--brand-navy), var(--brand-speed));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html.sbg-redesign body.page-home .sbg-hero-stat-label{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-top: 4px;
}
html.sbg-redesign body.page-home .sbg-hero-visual{
  position: relative;
  z-index: 1;
  aspect-ratio: 1;
  max-height: 280px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--brand-navy), var(--brand-speed));
  display: grid;
  place-items: center;
  box-shadow: 0 20px 60px rgba(59, 58, 255, 0.22);
}
html.sbg-redesign body.page-home .sbg-hero-visual::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.28));
  pointer-events: none;
}
html.sbg-redesign body.page-home .sbg-hero-emoji{
  position: relative;
  z-index: 1;
  font-size: clamp(72px, 12vw, 110px);
  line-height: 1;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.25));
}

@media (max-width: 900px){
  html.sbg-redesign body.page-home .sbg-hero{
    grid-template-columns: 1fr;
    padding: 22px 20px;
  }
  html.sbg-redesign body.page-home .sbg-hero-visual{
    max-height: 220px;
    aspect-ratio: 16/10;
  }
}

/* Тип объявления: более спокойные «чипы» под стекло */
html.sbg-redesign body.page-home .sbg-type-rail .type-btn::before,
html.sbg-redesign body.page-home .sbg-type-rail .type-btn::after{
  display: none !important;
}
html.sbg-redesign body.page-home .sbg-type-rail .type-btn{
  transform-style: flat;
  animation: none;
  min-width: 140px;
  padding: 10px 18px !important;
  border-radius: 14px;
  box-shadow: var(--shadow-1), var(--inner-1);
  border: 1px solid var(--card-stroke);
  background: var(--card-bg);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
html.sbg-redesign body.page-home .sbg-type-rail .type-btn:hover{
  transform: translateY(-3px);
  box-shadow: var(--glass-shadow-hover), var(--inner-1);
}
html.sbg-redesign body.page-home .sbg-type-rail .type-icon{
  animation: none;
  filter: none;
}
html.sbg-redesign body.page-home .sbg-type-rail .rent-btn,
html.sbg-redesign body.page-home .sbg-type-rail .sale-btn,
html.sbg-redesign body.page-home .sbg-type-rail .service-btn{
  color: var(--text);
  background: var(--card-bg);
  border-color: var(--card-stroke);
}
html.sbg-redesign body.page-home .sbg-type-rail .type-btn.active{
  border-color: var(--brand-speed);
  box-shadow: 0 0 0 3px rgba(255, 90, 54, 0.15), var(--shadow-1);
}

/* Сортировка — пилюля как в макапе */
html.sbg-redesign body.page-home .sbg-sort-rail{
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  border: 1px solid var(--card-stroke);
  box-shadow: var(--shadow-1), var(--inner-1);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
html.sbg-redesign body.page-home .sbg-sort-rail .sort-chip.active{
  background: var(--brand-speed) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(255, 90, 54, 0.35);
}

/* ==========================================================
   КАТАЛОГ: listing cards — вертикальные, 3 col (как в макете)
   ========================================================== */

/* Секция объявлений — 3-col grid как в mockup .catalog-grid */
html.sbg-redesign .search-layout .listings-section,
html.sbg-redesign body.page-home .search-layout .listings-section{
  /* ВАЖНО: убираем max-height + overflow из base CSS index.php */
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  padding-right: 0 !important;
  /* grid как в макете */
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  align-items: start;
  align-content: start;
}
/* search-layout тоже сбрасываем ограничения index.php */
html.sbg-redesign .search-layout{
  display: block !important;
  min-height: 0 !important;
  overflow: visible !important;
}

@media (max-width: 1280px){
  html.sbg-redesign .search-layout .listings-section,
  html.sbg-redesign body.page-home .search-layout .listings-section{
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px){
  html.sbg-redesign .search-layout .listings-section,
  html.sbg-redesign body.page-home .search-layout .listings-section{
    grid-template-columns: 1fr !important;
  }
}

/* Карточка: вертикальная как в mockup .bike-card */
html.sbg-redesign .search-layout .listing-card,
html.sbg-redesign body.page-home .search-layout .listing-card{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  /* НЕ min-height:0 — иначе auto-height flex column обрезает контент */
  min-height: auto !important;
  height: auto !important;
  margin-bottom: 0 !important;
  overflow: hidden !important;
  border-radius: var(--radius-shell) !important;
  background: var(--card-bg) !important;
  border: 1px solid var(--card-stroke) !important;
  box-shadow: var(--glass-shadow), var(--glass-inset) !important;
  /* отключаем contain/content-visibility из base CSS для корректного рендера */
  contain: style !important;
  content-visibility: visible !important;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s, border-color 0.3s;
}

@media (hover: hover){
  html.sbg-redesign .search-layout .listing-card:hover,
  html.sbg-redesign body.page-home .search-layout .listing-card:hover{
    transform: translateY(-4px) !important;
    box-shadow: var(--glass-shadow-hover), var(--glass-inset) !important;
    border-color: color-mix(in oklab, var(--brand-speed) 40%, var(--card-stroke)) !important;
  }
}

/* Фото — aspect-ratio 4/3 как в mockup .bike-image */
html.sbg-redesign .search-layout .listing-image-wrap,
html.sbg-redesign body.page-home .search-layout .listing-image-wrap{
  width: 100% !important;
  min-width: 0 !important;
  /* ВАЖНО: НЕ fixed height — aspect-ratio задаёт размер */
  height: auto !important;
  aspect-ratio: 4/3 !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  background: linear-gradient(135deg, var(--bg, #f3eef9), var(--layer));
}

/* Контент карточки — ВАЖНО: flex:0 0 auto (не flex:1) чтобы контент показывался в auto-height flex-column */
html.sbg-redesign .search-layout .listing-content,
html.sbg-redesign body.page-home .search-layout .listing-content{
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 14px 16px 16px !important;
  color: var(--text) !important;
  min-height: 0 !important;
  position: relative !important;
}
html.sbg-redesign .search-layout .listing-content::before,
html.sbg-redesign body.page-home .search-layout .listing-content::before{
  display: none !important;
}

/* Заголовок карточки — по центру */
html.sbg-redesign .search-layout .listing-title,
html.sbg-redesign body.page-home .search-layout .listing-title{
  font-size: 15px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--text) !important;
  position: relative !important;
  text-align: center !important;
}

/* Цены — сетка 2 колонки: день/нед | мес/3мес */
html.sbg-redesign .search-layout .listing-card .prices{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px 6px !important;
}
html.sbg-redesign .search-layout .listing-card .prices .price-chip{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
  padding: 5px 8px !important;
  border-radius: 8px !important;
  background: var(--layer2) !important;
  font-size: 12px !important;
  white-space: nowrap !important;
}
html.sbg-redesign .search-layout .listing-card .prices .price-chip .lbl{
  color: var(--muted) !important;
  font-size: 11px !important;
}
html.sbg-redesign .search-layout .listing-card .prices .price-chip b{
  font-weight: 700 !important;
  color: var(--text) !important;
  font-size: 12px !important;
}
/* Одна цена — во всю ширину */
html.sbg-redesign .search-layout .listing-card .prices .price-chip:only-child{
  grid-column: 1 / -1 !important;
}
html.sbg-redesign .search-layout .listing-card .listing-actions{
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin-top: 4px;
}
html.sbg-redesign .search-layout .listing-card .btn-details{
  flex: 1;
  text-align: center;
  border-radius: var(--radius-pill) !important;
  font-weight: 600;
  font-size: 13px;
  padding: 10px 16px !important;
}

/* ===== Переключатель вида: объявления / карта+объявления / только карта ===== */
html.sbg-redesign body.page-home .sbg-view-toggle{
  display: flex;
  gap: 0;
  border-radius: var(--radius-pill);
  background: var(--card-bg);
  border: 1px solid var(--card-stroke);
  box-shadow: var(--shadow-1), var(--inner-1);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  overflow: hidden;
  flex-shrink: 0;
}
html.sbg-redesign body.page-home .sbg-view-toggle .sbg-view-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  text-decoration: none;
}
html.sbg-redesign body.page-home .sbg-view-toggle .sbg-view-btn + .sbg-view-btn{
  border-left: 1px solid var(--card-stroke);
}
html.sbg-redesign body.page-home .sbg-view-toggle .sbg-view-btn.active{
  background: var(--brand-speed);
  color: #fff;
  font-weight: 600;
}
html.sbg-redesign body.page-home .sbg-view-toggle .sbg-view-btn:hover:not(.active){
  background: var(--layer2);
  color: var(--text);
}

/* sort+view строка */
html.sbg-redesign body.page-home .sbg-sortview-row{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
html.sbg-redesign body.page-home .sbg-sortview-row .sort-bar{
  flex: 1;
  margin-bottom: 0 !important;
}

/* скрытие секций по режиму:
   - по умолчанию (no class) / view-list: только объявления, карта скрыта
   - view-both: оба блока видны
   - view-map: только карта, объявления скрыты */
html.sbg-redesign body.page-home .search-layout .map-section{ display: none !important; }
html.sbg-redesign body.page-home .search-layout.view-both .map-section{ display: block !important; }
html.sbg-redesign body.page-home .search-layout.view-map .map-section{ display: block !important; }
html.sbg-redesign body.page-home .search-layout.view-map .listings-section{ display: none !important; }

/* Пагинация вне grid карточек */
html.sbg-redesign body.page-home .sbg-pagination{
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px 0 8px;
  border-top: 1px solid var(--card-stroke);
  margin-top: 8px;
}

/* Кнопка избранного */
html.sbg-redesign .search-layout .fav-btn,
html.sbg-redesign body.page-home .search-layout .fav-btn{
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-decoration: none !important;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.2s;
  z-index: 2;
}
html.sbg-redesign .search-layout .fav-btn.active,
html.sbg-redesign body.page-home .search-layout .fav-btn.active{
  background: var(--brand-speed) !important;
  color: #fff !important;
  border-color: transparent !important;
}

/* Карточка на карте */
html.sbg-redesign body.page-home .search-layout .map-section{
  border-radius: var(--radius-shell);
  border: 1px solid var(--card-stroke);
  box-shadow: var(--shadow-1), var(--inner-1);
}

html.sbg-redesign body.page-home .sbg-glass-panel{
  overflow: hidden;
}

/* ---------- Доступность: focus ---------- */
html.sbg-redesign .sbg-visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 1px, 1px);
  white-space: nowrap;
  border: 0;
}
html.sbg-redesign :focus-visible{
  outline: 3px solid color-mix(in oklab, var(--brand-speed) 75%, transparent);
  outline-offset: 2px;
}

/* ---------- Topbar: глобальный поиск ---------- */
html.sbg-redesign .topbar .inner{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}
html.sbg-redesign .sbg-topbar-search{
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 440px;
  margin: 0 auto;
}
html.sbg-redesign .sbg-topbar-search-input{
  width: 100%;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--tb-btn-border);
  background: var(--tb-btn-bg);
  color: var(--text);
  font-size: 14px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
html.sbg-redesign[data-theme="dark"] .sbg-topbar-search-input{
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
html.sbg-redesign .sbg-topbar-search-input::placeholder{
  color: var(--muted);
}
@media (max-width: 760px){
  html.sbg-redesign .sbg-topbar-search{
    display: none;
  }
}

/* ---------- macOS-style dock ---------- */
html.sbg-redesign .sbg-dock{
  position: fixed;
  left: 50%;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 1300;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 8px 14px 10px;
  border-radius: 28px;
  border: 1px solid var(--card-stroke);
  background: var(--card-bg);
  box-shadow: var(--glass-shadow-hover), var(--inner-1);
  -webkit-backdrop-filter: blur(22px) saturate(175%);
  backdrop-filter: blur(22px) saturate(175%);
}
html.sbg-redesign .sbg-dock-item{
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  text-decoration: none !important;
  font-size: 0;
  line-height: 0;
  color: var(--text);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
  border: 1px solid transparent;
  background: color-mix(in oklab, var(--layer2) 55%, transparent);
}
html.sbg-redesign .sbg-dock-item .sbg-dock-img{
  width: 24px;
  height: 24px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
  pointer-events: none;
}
html.sbg-redesign .sbg-dock-item:hover{
  transform: translateY(-10px) scale(1.12);
  box-shadow: 0 12px 28px rgba(40, 30, 80, 0.18);
  border-color: color-mix(in oklab, var(--brand-speed) 35%, var(--card-stroke));
}
html.sbg-redesign .sbg-dock-item.active{
  border-color: var(--brand-speed);
  box-shadow: 0 0 0 3px rgba(255, 90, 54, 0.12);
}
html.sbg-redesign .sbg-dock-badge{
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  background: linear-gradient(135deg, var(--brand-speed), #ff8a3c);
  color: #fff;
  pointer-events: none;
}
html.sbg-redesign .sbg-dock-divider{
  align-self: stretch;
  width: 1px;
  margin: 8px 2px;
  background: color-mix(in oklab, var(--text) 12%, transparent);
}

/* Подсказки над кнопками (текст из data-tooltip в PHP / i18n для всех языков) */
html.sbg-redesign .sbg-dock-item[data-tooltip]::after{
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 7px 11px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  max-width: min(240px, 72vw);
  text-align: center;
  white-space: normal;
  word-wrap: break-word;
  color: var(--text);
  background: color-mix(in oklab, var(--card-bg) 96%, transparent);
  border: 1px solid var(--card-stroke);
  box-shadow: var(--glass-shadow), 0 8px 28px rgba(15, 10, 30, 0.35);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
  z-index: 1400;
}
@media (hover: hover) and (pointer: fine){
  html.sbg-redesign .sbg-dock-item[data-tooltip]:hover::after{
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
}
html.sbg-redesign .sbg-dock-item[data-tooltip]:focus-visible::after{
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
html.sbg-redesign .sbg-dock-item[data-tooltip]{
  outline: none;
}
html.sbg-redesign .sbg-dock-item[data-tooltip]:focus-visible{
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--brand-speed) 55%, transparent);
  border-color: color-mix(in oklab, var(--brand-speed) 40%, var(--card-stroke));
}

/* ===== Dock — не вылезать за границы экрана на мобайле ===== */
@media (max-width: 640px){
  html.sbg-redesign .sbg-dock{
    /* растягиваем от края до края с отступами */
    left: 8px !important;
    right: 8px !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    padding: 6px 8px 8px !important;
    gap: 3px !important;
    border-radius: 20px !important;
    justify-content: space-around !important;
  }
  html.sbg-redesign .sbg-dock-item{
    /* адаптивный размер через vw */
    width: clamp(32px, 8.5vw, 42px) !important;
    height: clamp(32px, 8.5vw, 42px) !important;
    border-radius: 10px !important;
    flex-shrink: 1 !important;
  }
  html.sbg-redesign .sbg-dock-item .sbg-dock-img{
    width: clamp(17px, 4.8vw, 22px) !important;
    height: clamp(17px, 4.8vw, 22px) !important;
  }
  html.sbg-redesign .sbg-dock-divider{
    display: none !important;
  }
}

@media (max-width: 400px){
  html.sbg-redesign .sbg-dock{
    left: 4px !important;
    right: 4px !important;
    padding: 5px 6px 7px !important;
    gap: 2px !important;
  }
  html.sbg-redesign .sbg-dock-item{
    width: clamp(30px, 8vw, 36px) !important;
    height: clamp(30px, 8vw, 36px) !important;
  }
  html.sbg-redesign .sbg-dock-item .sbg-dock-img{
    width: clamp(15px, 4vw, 19px) !important;
    height: clamp(15px, 4vw, 19px) !important;
  }
}

/* ---------- Bike: двухколоночный каркас ---------- */
html.sbg-redesign body.page-bike .sbg-bike-detail .card{
  max-width: none;
}
html.sbg-redesign body.page-bike .sbg-bike-detail{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 20px;
  align-items: start;
}
@media (max-width: 1080px){
  html.sbg-redesign body.page-bike .sbg-bike-detail{
    grid-template-columns: 1fr;
  }
}
html.sbg-redesign body.page-bike .sbg-bike-aside .card{
  border-radius: var(--radius-shell);
}
@media (min-width: 1081px){
  html.sbg-redesign body.page-bike .sbg-bike-aside{
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + var(--top-h) + 18px);
  }
}
html.sbg-redesign body.page-bike #bikeLocationMap.sbg-leaflet-stage,
html.sbg-redesign body.page-bike .sbg-leaflet-stage{
  border: 1px solid var(--card-stroke);
  box-shadow: var(--shadow-1), var(--inner-1);
}

/* Leaflet pin + popup (bike.php marker) */
html.sbg-redesign .sbg-leaflet-divicon{ background: none !important; border: none !important; }
html.sbg-redesign .sbg-leaflet-pin-wrap{
  position: relative;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
}
html.sbg-redesign .sbg-leaflet-dot{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-speed), var(--brand-navy));
  box-shadow: 0 6px 16px rgba(255, 90, 54, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.85);
}
html.sbg-redesign .sbg-leaflet-pulse{
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: color-mix(in oklab, var(--brand-speed) 55%, transparent);
  animation: sbg-pin-pulse 2s ease-out infinite;
  pointer-events: none;
}
@keyframes sbg-pin-pulse{
  0%{ transform: scale(0.6); opacity: 0.9; }
  100%{ transform: scale(2.4); opacity: 0; }
}
html.sbg-redesign .leaflet-popup-content-wrapper{
  border-radius: var(--radius-shell);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--card-stroke);
  background: var(--card-bg);
  box-shadow: var(--glass-shadow), var(--inner-1);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

/* Главная: единая ширина попапа карты (одиночный маркер и кластер, все страницы списка) */
html.sbg-redesign body.page-home .leaflet-popup.sbg-map-popup .leaflet-popup-content{
  box-sizing: border-box;
  width: 300px;
  min-width: 300px;
  max-width: min(92vw, 300px);
  margin: 10px 12px 12px;
}
html.sbg-redesign body.page-home .sbg-map-popup__wrap{
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  width: 100%;
  box-sizing: border-box;
}
html.sbg-redesign body.page-home .sbg-map-popup__hdr{
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 4px;
  color: var(--text);
}
html.sbg-redesign body.page-home .sbg-map-popup__hint{
  font-size: 12px;
  color: var(--text-2, #64748b);
  margin-bottom: 8px;
}
/* Одиночное объявление: фото сверху */
html.sbg-redesign body.page-home .sbg-map-popup__wrap--single .sbg-map-popup__photo{
  margin: 0 0 10px;
  border-radius: var(--radius-shell, 12px);
  overflow: hidden;
  border: 1px solid var(--card-stroke);
  background: rgba(0,0,0,.06);
  aspect-ratio: 16 / 10;
  max-height: 160px;
}
html.sbg-redesign body.page-home .sbg-map-popup__photo-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  vertical-align: middle;
}
html.sbg-redesign body.page-home .sbg-map-popup__body--single{
  text-align: center;
}
html.sbg-redesign body.page-home .sbg-map-popup__title{
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  display: block;
  margin-bottom: 6px;
  line-height: 1.25;
}
html.sbg-redesign body.page-home .sbg-map-popup__city{
  font-size: 13px;
  color: var(--text-2, #64748b);
  display: block;
  margin-bottom: 10px;
}
html.sbg-redesign body.page-home .sbg-map-popup__cta{
  display: inline-block;
  background: #007bff;
  color: #fff !important;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
/* Кластер: строка с превью */
html.sbg-redesign body.page-home .sbg-cluster-popup__list{
  max-height: min(48vh, 320px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  margin: 8px 0 0;
  padding-right: 2px;
}
html.sbg-redesign body.page-home .sbg-cluster-item{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--card-stroke);
}
html.sbg-redesign body.page-home .sbg-cluster-item:last-child{
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
html.sbg-redesign body.page-home .sbg-cluster-item__thumb-link{
  flex: 0 0 auto;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--card-stroke);
  background: rgba(0,0,0,.06);
  line-height: 0;
}
html.sbg-redesign body.page-home .sbg-cluster-item__thumb{
  width: 76px;
  height: 57px;
  object-fit: cover;
  display: block;
}
html.sbg-redesign body.page-home .sbg-cluster-item__main{
  flex: 1;
  min-width: 0;
}
html.sbg-redesign body.page-home .sbg-cluster-item__title{
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: block;
  line-height: 1.3;
  margin-bottom: 4px;
}
html.sbg-redesign body.page-home .sbg-cluster-item__city{
  font-size: 12px;
  color: var(--text-2, #64748b);
  display: block;
  margin-bottom: 6px;
}
html.sbg-redesign body.page-home .sbg-cluster-item__more{
  font-size: 13px;
  color: #007bff !important;
  font-weight: 500;
  text-decoration: none;
}
html.sbg-redesign body.page-home .sbg-cluster-popup__pager{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--card-stroke);
  font-size: 13px;
  color: var(--text-2, #475569);
  width: 100%;
  box-sizing: border-box;
}
html.sbg-redesign body.page-home .sbg-cluster-popup__pager button{
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--card-stroke);
  background: color-mix(in oklab, var(--card-bg) 88%, transparent);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  touch-action: manipulation;
}
html.sbg-redesign body.page-home .sbg-cluster-popup__pager button:disabled{
  opacity: 0.45;
  cursor: not-allowed;
}
html.sbg-redesign body.page-home .leaflet-marker-icon.marker-cluster-small,
html.sbg-redesign body.page-home .leaflet-marker-icon.marker-cluster-medium,
html.sbg-redesign body.page-home .leaflet-marker-icon.marker-cluster-large{
  cursor: pointer;
}

/* ---------- Календарь бронирования — 7 дней/строка (недельный грид) ---------- */
html.sbg-redesign .sbg-cal-glass.calendar-wrap{
  border-radius: var(--radius-shell);
  border: 1px solid var(--card-stroke);
  padding: 10px;
  box-shadow: var(--shadow-1), var(--inner-1);
  background: color-mix(in oklab, var(--card-bg) 92%, transparent);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
html.sbg-redesign .sbg-cal-glass .calendar14{
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 4px !important;
}
html.sbg-redesign .sbg-cal-glass .calendar14 .day{
  border-radius: 10px !important;
  backdrop-filter: saturate(140%) blur(4px);
  min-height: 52px !important;
}
html.sbg-redesign body.page-bike .sbg-cal-glass .calendar14 .day-paid,
html.sbg-redesign body.page-bike .sbg-cal-glass .calendar14 .day-reserved{
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--brand-speed) 25%, transparent);
}

/* ---------- Профиль ---------- */
html.sbg-redesign body.page-profile h1{
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
html.sbg-redesign body.page-profile .profile-summary{
  gap: 10px;
}
html.sbg-redesign body.page-profile .profile-summary-item{
  border-radius: 14px;
  padding: 10px 12px !important;
  border: 1px solid color-mix(in oklab, var(--card-stroke) 95%, transparent) !important;
  background: color-mix(in oklab, var(--card-bg) 88%, transparent) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
html.sbg-redesign[data-theme="dark"] body.page-profile .profile-summary-item{
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Fallback без backdrop-filter */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  html.sbg-redesign .topbar,
  html.sbg-redesign .sidebar,
  html.sbg-redesign .card,
  html.sbg-redesign .sbg-dock,
  html.sbg-redesign .sbg-cal-glass.calendar-wrap{
    background: color-mix(in oklab, var(--layer2) 96%, transparent);
  }
}

/* ============================================
   Fullscreen Lightbox (медиаплеер для фото)
   ============================================ */
#sbgLightbox{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: sbgLbFadeIn .18s ease;
}
#sbgLightbox[hidden]{ display: none !important; }
@keyframes sbgLbFadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
.sbg-lb-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 15, 0.92);
  backdrop-filter: blur(28px) saturate(140%);
  cursor: pointer;
}
.sbg-lb-wrap{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 96vw;
  max-height: 94vh;
}
#sbgLbImg{
  display: block;
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 32px 96px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.08);
  animation: sbgLbZoomIn .2s cubic-bezier(.34,1.56,.64,1);
}
@keyframes sbgLbZoomIn{
  from{ transform: scale(.88); opacity: 0; }
  to{ transform: scale(1); opacity: 1; }
}
#sbgLbClose{
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
#sbgLbClose:hover{ background: rgba(255,255,255,0.22); }
.sbg-lb-caption{
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  font-weight: 500;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
  padding: 6px 16px;
  border-radius: 999px;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80vw;
}
/* курсор «лупа» на изображениях-карточках */
html.sbg-redesign .listing-image[data-lb]{
  cursor: zoom-in;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html.sbg-redesign body::before,
  html.sbg-redesign body::after{
    animation: none !important;
  }
  html.sbg-redesign .listing-card:hover,
  html.sbg-redesign body.page-home .search-layout .listing-card:hover{
    transform: none;
  }
  html.sbg-redesign .sbg-dock-item{
    transition: none;
  }
  html.sbg-redesign .sbg-dock-item:hover{
    transform: none;
  }
  html.sbg-redesign .sbg-leaflet-pulse{
    animation: none !important;
    opacity: 0.35;
  }
}

/* ═══════════════════════════════════════════════════════
   ВНУТРЕННИЙ ЧАТ — /chat/
   ═══════════════════════════════════════════════════════ */

/* ── Shell & layout ─────────────────────────────────── */
.sbg-chat-shell {
  padding-top: 20px !important;
  padding-bottom: 120px !important;
  max-width: 700px !important;
}

.sbg-chat-page {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Chat list header ───────────────────────────────── */
.sbg-chat-list-header {
  margin-bottom: 16px;
}
.sbg-chat-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--fg, #fff);
  margin: 0;
}

/* ── Conversation rows ──────────────────────────────── */
.sbg-chat-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sbg-conv-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.10);
  text-decoration: none;
  color: inherit;
  transition: background 0.18s, transform 0.15s;
}
.sbg-conv-row:hover {
  background: rgba(255,255,255,0.11);
  transform: translateY(-1px);
}
.sbg-conv-row.unread {
  background: rgba(96,165,250,0.12);
  border-color: rgba(96,165,250,0.25);
}

.sbg-conv-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(96,165,250,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--fg, #fff);
  flex-shrink: 0;
  text-transform: uppercase;
}
.sbg-conv-avatar--lg {
  width: 36px;
  height: 36px;
  font-size: 16px;
}

.sbg-conv-body {
  flex: 1;
  min-width: 0;
}
.sbg-conv-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}
.sbg-conv-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--fg, #fff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sbg-conv-time {
  font-size: 12px;
  color: var(--muted, rgba(255,255,255,0.5));
  flex-shrink: 0;
}
.sbg-conv-preview {
  font-size: 13px;
  color: var(--muted, rgba(255,255,255,0.55));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sbg-chat-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #3b82f6;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ── Empty / loading ────────────────────────────────── */
.sbg-chat-loading,
.sbg-chat-err {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted, rgba(255,255,255,0.5));
  font-size: 14px;
}
.sbg-chat-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--muted, rgba(255,255,255,0.5));
  font-size: 15px;
}

/* ═══════════════════════════════════════════════════════
   СТРАНИЦА ДИАЛОГА — /chat/conversation.php
   ═══════════════════════════════════════════════════════ */
body.sbg-conversation-page {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}
body.sbg-conversation-page .sbg-topbar,
body.sbg-conversation-page nav.topbar {
  flex-shrink: 0;
}

.sbg-conv-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  padding: 0 12px;
}

/* ── Conversation header ────────────────────────────── */
.sbg-conv-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0 8px;
  flex-shrink: 0;
}
.sbg-conv-back {
  font-size: 22px;
  color: var(--fg, #fff);
  text-decoration: none;
  padding: 6px;
  border-radius: 10px;
  transition: background 0.15s;
  line-height: 1;
}
.sbg-conv-back:hover { background: rgba(255,255,255,0.12); }
.sbg-conv-partner-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--fg, #fff);
}

/* ── Messages area ──────────────────────────────────── */
.sbg-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scroll-behavior: smooth;
}

.sbg-msg {
  display: flex;
  flex-direction: column;
  max-width: 75%;
}
.sbg-msg--mine {
  align-self: flex-end;
  align-items: flex-end;
}
.sbg-msg--theirs {
  align-self: flex-start;
  align-items: flex-start;
}
.sbg-msg-bubble {
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
}
.sbg-msg--mine .sbg-msg-bubble {
  background: #3b82f6;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.sbg-msg--theirs .sbg-msg-bubble {
  background: rgba(255,255,255,0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--fg, #fff);
  border-bottom-left-radius: 4px;
}
.sbg-msg-time {
  font-size: 11px;
  color: var(--muted, rgba(255,255,255,0.4));
  margin-top: 3px;
  padding: 0 4px;
}

/* ── Compose bar ────────────────────────────────────── */
.sbg-compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 0 16px;
  flex-shrink: 0;
}
.sbg-compose-input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--fg, #fff);
  font-size: 14px;
  font-family: inherit;
  resize: none;
  outline: none;
  line-height: 1.5;
  min-height: 46px;
  max-height: 140px;
  transition: border-color 0.2s;
}
.sbg-compose-input::placeholder { color: rgba(255,255,255,0.4); }
.sbg-compose-input:focus { border-color: rgba(96,165,250,0.6); }
.sbg-compose-send {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: #3b82f6;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.12s;
}
.sbg-compose-send:hover { background: #2563eb; transform: scale(1.06); }
.sbg-compose-send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ── "Write owner" button on bike page ──────────────── */
.sbg-chat-write-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  background: rgba(59,130,246,0.2);
  border: 1px solid rgba(96,165,250,0.4);
  color: #93c5fd;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s, transform 0.15s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.sbg-chat-write-btn:hover {
  background: rgba(59,130,246,0.35);
  transform: translateY(-1px);
}