◀

  ▶



// Ждём полной загрузки слайдера
document.addEventListener("DOMContentLoaded", function() {
  const sliderBlock = document.querySelector('#rec1533154741 .t-gl-slider');

  if (!sliderBlock || !sliderBlock.swiper) return;

  const prevBtn = document.getElementById('prev-slide');
  const nextBtn = document.getElementById('next-slide');

  // Клики по кастомным стрелкам переключают слайд
  prevBtn.addEventListener('click', () => {
    sliderBlock.swiper.slidePrev();
  });

  nextBtn.addEventListener('click', () => {
    sliderBlock.swiper.slideNext();
  });
});

/* Уменьшаем превью изображений в блоке uc-license */
.uc-license .t-gl05__item img {
    max-width: 50px;   /* ширина миниатюры на странице */
    height: auto;        /* сохраняем пропорции */
    object-fit: cover;   /* чтобы изображение не искажалось */
    cursor: pointer;     /* показывает, что можно кликнуть */








/* ============================================================
   1. ПАЛИТРА (CSS-переменные)
   ============================================================ */
:root{
  --gc-bg-0:      #131211;   /* самый глубокий фон (body) */
  --gc-bg-1:      #1c1a19;   /* фон секции, вариант A */
  --gc-bg-2:      #242220;   /* фон секции, вариант B (чуть светлее, для чередования) */
  --gc-bg-3:      #2c2926;   /* карточки, поповерхности */
  --gc-bg-4:      #363330;   /* инпуты, поля форм */
  --gc-border:    #3c3833;   /* тонкие разделители */

  --cream-100:    #f4efe4;   /* основной текст */
  --cream-200:    #e3dac6;   /* второстепенный текст */
  --cream-300:    #cabfa4;   /* приглушённый текст / плейсхолдеры */
  --cream-accent: #d9c39a;   /* акцент: кнопки, ссылки, иконки, цифры */
  --cream-accent-hover: #e8d6ae;
}

/* ============================================================
   2. АВТО-ВКЛЮЧЕНИЕ ПО СИСТЕМНОЙ ТЕМЕ ТЕЛЕФОНА/БРАУЗЕРА
   ============================================================
   Основной способ — media query. JS ниже дополнительно продублирует
   класс .dark-theme на , чтобы гарантированно перекрыть
   инлайн-стили Tilda (background-color/color в style="") и чтобы
   тема мгновенно переключалась при смене темы на устройстве без
   перезагрузки страницы.
*/
@media (prefers-color-scheme: dark){
  html:not(.light-theme-force){ color-scheme: dark; }
}

/* ============================================================
   3. БАЗА: фон и типографика
   ============================================================ */
html.dark-theme,
html.dark-theme body,
html.dark-theme .t-body{
  background-color: var(--gc-bg-0) !important;
  color: var(--cream-100) !important;
}

html.dark-theme *{
  border-color: var(--gc-border);
}

html.dark-theme h1, html.dark-theme h2, html.dark-theme h3,
html.dark-theme h4, html.dark-theme h5, html.dark-theme h6,
html.dark-theme .t-title, html.dark-theme .t-heading,
html.dark-theme .t-name{
  color: var(--cream-100) !important;
}

html.dark-theme p, html.dark-theme .t-text, html.dark-theme .t-descr,
html.dark-theme span, html.dark-theme li{
  color: var(--cream-200) !important;
}

/* ============================================================
   4. СЕКЦИИ — мягкое чередование графитовых оттенков,
      чтобы сохранить визуальный ритм блоков (как на светлой версии)
   ============================================================ */
html.dark-theme .t-section,
html.dark-theme .r,
html.dark-theme [class^="t-rec"]{
  background-color: transparent;
}

html.dark-theme .t-rec:nth-of-type(odd)  { background-color: var(--gc-bg-1) !important; }
html.dark-theme .t-rec:nth-of-type(even) { background-color: var(--gc-bg-2) !important; }

/* ============================================================
   5. КАРТОЧКИ / ПЛАШКИ (услуги, капельницы, отзывы, врачи)
   ============================================================ */
html.dark-theme .t-card__container,
html.dark-theme .t-store__card,
html.dark-theme .t-feed__item,
html.dark-theme .t-col,
html.dark-theme [class*="__card"],
html.dark-theme [class*="__item-inner"]{
  background-color: var(--gc-bg-3) !important;
  border: 1px solid var(--gc-border) !important;
  border-radius: 12px;
}

/* ============================================================
   6. КНОПКИ — кремовый акцент на графите (премиальный контраст)
   ============================================================ */
html.dark-theme .t-btn,
html.dark-theme .t-submit,
html.dark-theme a.t-btn,
html.dark-theme button[type="submit"]{
  background-color: var(--cream-accent) !important;
  color: var(--gc-bg-0) !important;
  border: none !important;
  transition: background-color .25s ease;
}
html.dark-theme .t-btn:hover,
html.dark-theme .t-submit:hover{
  background-color: var(--cream-accent-hover) !important;
}

/* Вторичные / прозрачные кнопки — контурные, кремовый текст */
html.dark-theme .t-btn._secondary,
html.dark-theme .t-btn-outline{
  background-color: transparent !important;
  color: var(--cream-accent) !important;
  border: 1px solid var(--cream-accent) !important;
}

/* ============================================================
   7. ФОРМЫ (запись, поповерхности форм)
   ============================================================ */
html.dark-theme .t-input,
html.dark-theme .t-input-group input,
html.dark-theme .t-input-group textarea,
html.dark-theme .t-input-block input,
html.dark-theme .t-input-block textarea{
  background-color: var(--gc-bg-4) !important;
  color: var(--cream-100) !important;
  border: 1px solid var(--gc-border) !important;
}
html.dark-theme .t-input::placeholder{
  color: var(--cream-300) !important;
}
html.dark-theme .t-checkbox__indicator{
  border-color: var(--cream-300) !important;
  background-color: var(--gc-bg-4) !important;
}

/* Попапы (форма записи, лицензия и т.д.) */
html.dark-theme .t-popup__container,
html.dark-theme .t-popup{
  background-color: var(--gc-bg-2) !important;
}
html.dark-theme .t-popup__close-icon path{
  fill: var(--cream-100) !important;
}

/* Cookie-баннер */
html.dark-theme .t-cookies-popup,
html.dark-theme [class*="cookie"]{
  background-color: var(--gc-bg-3) !important;
  color: var(--cream-100) !important;
}

/* ============================================================
   8. ШАПКА / МЕНЮ
   ============================================================ */
html.dark-theme .t-header,
html.dark-theme .t-menu,
html.dark-theme .t-menuwidgeticons{
  background-color: var(--gc-bg-0) !important;
}
html.dark-theme .t-menu__link-item,
html.dark-theme .t-menu__link-item a{
  color: var(--cream-100) !important;
}
html.dark-theme .t-menu__link-item:hover a{
  color: var(--cream-accent) !important;
}

/* ============================================================
   9. ЦИФРЫ / АКЦЕНТНЫЕ ЭЛЕМЕНТЫ (проценты, статистика на главной)
   ============================================================ */
html.dark-theme .t-number,
html.dark-theme [class*="__number"],
html.dark-theme .t-descr._big-number,
html.dark-theme strong{
  color: var(--cream-accent) !important;
}

/* ============================================================
   10. ИЗОБРАЖЕНИЯ, ИКОНКИ, ВИДЕО — оставляем как есть
    (никаких filter/invert/brightness — изображения не затемняем)
   ============================================================ */
html.dark-theme img,
html.dark-theme picture,
html.dark-theme video,
html.dark-theme .t-bgimg,
html.dark-theme svg image{
  filter: none !important;
  opacity: 1 !important;
}

/* ============================================================
   11.5. ZERO BLOCK — универсальные классы конструктора
   ============================================================
   Zero Block каждый раз генерирует свою разметку под конкретный
   блок, поэтому 100%-но точное совпадение под все ваши Zero Block
   секции без просмотра их реальной вёрстки дать нельзя — но эти
   правила покрывают подавляющее большинство типовых случаев.
   Если после публикации какой-то конкретный Zero Block блок
   останется светлым — пришлите скриншот, добавлю точечный селектор.
   ============================================================ */
html.dark-theme .tn-atom{
  color: var(--cream-200) !important;
}
html.dark-theme .tn-elem [class*="title"],
html.dark-theme .tn-elem [class*="Title"],
html.dark-theme .tn-elem [class*="heading"]{
  color: var(--cream-100) !important;
}
html.dark-theme .tn-elem [class*="text"],
html.dark-theme .tn-elem [class*="descr"]{
  color: var(--cream-200) !important;
}
/* Прямоугольники/подложки Zero Block со сплошной светлой заливкой —
   если инлайн background-color снят скриптом, они получают графит */
html.dark-theme .tn-elem__predefinedstyle,
html.dark-theme [class*="__bg"],
html.dark-theme [class*="__container"]{
  background-color: var(--gc-bg-3) !important;
}
/* Кнопки внутри Zero Block */
html.dark-theme .tn-elem [class*="button"] .tn-atom,
html.dark-theme .tn-elem a.tn-atom[href]{
  color: var(--gc-bg-0);
}

/* ============================================================
   11. ФУТЕР
   ============================================================ */
html.dark-theme .t-footer,
html.dark-theme [class*="footer"]{
  background-color: var(--gc-bg-1) !important;
  color: var(--cream-200) !important;
}
html.dark-theme .t-footer a{
  color: var(--cream-200) !important;
}
html.dark-theme .t-footer a:hover{
  color: var(--cream-accent) !important;
}

/* ============================================================
   12. Плавный переход при смене темы (не мигает)
   ============================================================ */
html.theme-transition,
html.theme-transition *{
  transition: background-color .35s ease, color .35s ease, border-color .35s ease !important;
}

/* Тонкий скроллбар в графитовом стиле (косметика, по желанию) */
html.dark-theme ::-webkit-scrollbar{ width: 10px; }
html.dark-theme ::-webkit-scrollbar-track{ background: var(--gc-bg-0); }
html.dark-theme ::-webkit-scrollbar-thumb{ background: var(--gc-bg-4); border-radius: 6px; }