/*
 * ==========================================================================
 * VETSOVET UI KIT — Кастомные стили (v2.0 Production)
 * Подключён через main.tpl.php: addMainTplCSSName(['theme', 'vetsovet'])
 *
 * ✅ НЕ перетирается SCSS-компилятором (отдельный файл вне pipeline)
 * ✅ Переживает любую очистку кэша в adminке
 * ✅ Использует реальные CSS-классы из шаблонов InstantCMS 2.x
 *
 * НАСТРОЙКА HERO-БЛОКА:
 *   В админке → Виджеты → HTML-виджет → поле "CSS класс обёртки"
 *   введите: vs-hero
 *   После этого блок получит полное Hero-оформление.
 * ==========================================================================
 */

/* --- Google Fonts (Montserrat) --------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ==========================================================================
   1. DESIGN TOKENS (CSS Custom Properties)
   ========================================================================== */
:root {
  /* Palette */
  --vs-bg:            #FAF8F5;
  --vs-primary:       #FF7A45;
  --vs-primary-dark:  #e56531;
  --vs-primary-light: rgba(255, 122, 69, 0.12);
  --vs-success:       #52C41A;
  --vs-text:          #2C2A29;
  --vs-text-muted:    #888888;
  --vs-white:         #ffffff;

  /* Borders & Shadows */
  --vs-border:        rgba(44, 42, 41, 0.07);
  --vs-shadow-xs:     0 1px 3px rgba(44, 42, 41, 0.04);
  --vs-shadow-sm:     0 4px 12px rgba(44, 42, 41, 0.06);
  --vs-shadow-md:     0 8px 28px rgba(44, 42, 41, 0.08);
  --vs-shadow-hover:  0 20px 50px rgba(44, 42, 41, 0.12);

  /* Shape */
  --vs-radius-xs:     6px;
  --vs-radius-sm:     10px;
  --vs-radius-md:     16px;
  --vs-radius-lg:     28px;

  /* Motion */
  --vs-transition:    all 0.28s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ==========================================================================
   2. GLOBAL TYPOGRAPHY & RESET
   ========================================================================== */
body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
p, span, a, li, td, th,
input, select, textarea, button,
.navbar, .nav-link, .btn, .badge,
.card-header, .card-body, .card-footer {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

body {
  background-color: var(--vs-bg) !important;
  color: var(--vs-text) !important;
}

a {
  color: var(--vs-primary);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--vs-primary-dark);
  text-decoration: none;
}

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */
.btn-primary {
  color: var(--vs-white) !important;
  background-color: var(--vs-primary) !important;
  border-color: var(--vs-primary) !important;
  box-shadow: none !important;
  border-radius: var(--vs-radius-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  transition: var(--vs-transition) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--vs-primary-dark) !important;
  border-color: var(--vs-primary-dark) !important;
  box-shadow: 0 6px 18px rgba(255, 122, 69, 0.35) !important;
}
.btn-success {
  color: var(--vs-white) !important;
  background-color: var(--vs-success) !important;
  border-color: var(--vs-success) !important;
  box-shadow: none !important;
  border-radius: var(--vs-radius-xs) !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   4. GLOBAL CARDS / FORMS / BADGES RESET (убираем 3D-градиенты bootstrap)
   ========================================================================== */
.card,
.card-header,
.card-footer,
.dropdown-menu,
.form-control,
.alert,
.badge {
  box-shadow: none !important;
  background-image: none !important;
  text-shadow: none !important;
  border-radius: var(--vs-radius-xs) !important;
}
.form-control:focus {
  border-color: var(--vs-primary) !important;
  box-shadow: 0 0 0 3px var(--vs-primary-light) !important;
  outline: none !important;
}
.badge-primary { background-color: var(--vs-primary) !important; }
.badge-success { background-color: var(--vs-success) !important; }

/* ==========================================================================
   5. HEADER — светлый, залипающий, с тенью при скролле
   ========================================================================== */
.icms-header {
  background-color: var(--vs-white) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1020 !important;
  box-shadow: 0 4px 20px rgba(44, 42, 41, 0.05) !important;
  border-bottom: 1px solid var(--vs-border) !important;
  transition: box-shadow 0.3s ease !important;
}

.icms-header__top {
  background-color: var(--vs-white) !important;
  color: var(--vs-text) !important;
  border-bottom: 1px solid var(--vs-border) !important;
  font-size: 0.82rem !important;
}
.icms-header__top a {
  color: var(--vs-text) !important;
  transition: color 0.2s !important;
}
.icms-header__top a:hover { color: var(--vs-primary) !important; }

.icms-header__middle {
  background-color: var(--vs-white) !important;
  color: var(--vs-text) !important;
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
.icms-header__middle a {
  color: var(--vs-text) !important;
  transition: color 0.2s !important;
}
.icms-header__middle a:hover { color: var(--vs-primary) !important; }

.icms-header__bottom {
  background-color: var(--vs-white) !important;
  border-bottom: none !important;
}

/* Навигационные ссылки */
.icms-navbar .nav-link,
.nav-menu .nav-link,
.navbar-nav .nav-link {
  color: var(--vs-text) !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  transition: color 0.2s ease !important;
}
.icms-navbar .nav-link:hover,
.nav-menu .nav-link:hover,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-item.active .nav-link {
  color: var(--vs-primary) !important;
}

/* ==========================================================================
   6. FOOTER — тёплый бежевый, минималистичный
   ========================================================================== */
.icms-footer {
  border-top: 1px solid var(--vs-border) !important;
  margin-top: auto !important;
}

.icms-footer__middle {
  background-color: var(--vs-bg) !important;
  background-image: none !important;  /* убираем карту мира */
  color: var(--vs-text) !important;
  border-top: none !important;
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
.icms-footer__middle a {
  color: var(--vs-text) !important;
  font-weight: 500 !important;
  transition: color 0.2s !important;
}
.icms-footer__middle a:hover { color: var(--vs-primary) !important; }

.icms-footer__bottom {
  background-color: var(--vs-bg) !important;
  color: var(--vs-text-muted) !important;
  border-top: 1px solid var(--vs-border) !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  font-size: 0.82rem !important;
}
.icms-footer__bottom a {
  color: var(--vs-text-muted) !important;
  transition: color 0.2s !important;
}
.icms-footer__bottom a:hover { color: var(--vs-primary) !important; }

/* ==========================================================================
   7. HERO BLOCK (HTML-виджет)
   ==========================================================================
   Как включить:
   Админка → Виджеты → ваш HTML-виджет → поле "CSS класс обёртки (wrapper)" → vs-hero
   ========================================================================== */

/* Обёртка виджета: .vs-hero .icms-widget.card */
.vs-hero .icms-widget.card {
  background: linear-gradient(135deg, #fff9f6 0%, var(--vs-bg) 100%) !important;
  border: 1px solid rgba(255, 122, 69, 0.10) !important;
  border-radius: var(--vs-radius-lg) !important;
  box-shadow: 0 16px 48px rgba(44, 42, 41, 0.06), 0 0 0 0 transparent !important;
  padding: 0 !important;
  margin-top: 28px !important;
  margin-bottom: 44px !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Декоративный оранжевый акцент сверху */
.vs-hero .icms-widget.card::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--vs-primary) 0%, #ffb347 100%) !important;
  border-radius: var(--vs-radius-lg) var(--vs-radius-lg) 0 0 !important;
  z-index: 1 !important;
}

/* card-body внутри hero */
.vs-hero .icms-widget.card > .card-body {
  padding: 80px 60px !important;
  text-align: center !important;
}

/* Контент HTML-виджета внутри hero */
.vs-hero .icms-widget.card .icms-widget__html_block {
  font-size: 38px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: var(--vs-text) !important;
  letter-spacing: -0.6px !important;
  max-width: 860px !important;
  margin: 0 auto !important;
}

/* Параграфы в Hero */
.vs-hero .icms-widget.card .icms-widget__html_block p {
  font-size: 18px !important;
  font-weight: 400 !important;
  color: var(--vs-text-muted) !important;
  line-height: 1.7 !important;
  margin-top: 20px !important;
  letter-spacing: 0 !important;
}

/* Кнопки в Hero */
.vs-hero .icms-widget.card .icms-widget__html_block .btn,
.vs-hero .icms-widget.card .icms-widget__html_block a.btn {
  margin-top: 28px !important;
  padding: 14px 36px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
}

/* Адаптив Hero */
@media (max-width: 991px) {
  .vs-hero .icms-widget.card > .card-body {
    padding: 56px 36px !important;
  }
  .vs-hero .icms-widget.card .icms-widget__html_block {
    font-size: 30px !important;
  }
}
@media (max-width: 575px) {
  .vs-hero .icms-widget.card > .card-body {
    padding: 40px 24px !important;
  }
  .vs-hero .icms-widget.card .icms-widget__html_block {
    font-size: 22px !important;
  }
  .vs-hero .icms-widget.card .icms-widget__html_block p {
    font-size: 15px !important;
  }
}

/* ==========================================================================
   8. WIDGET WRAPPER GENERAL — убираем лишние рамки, делаем прозрачным
   ========================================================================== */

/* Стандартная обёртка виджета */
.icms-widget.card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 36px !important;
}

/* Hero уже кастомный — не перекрываем его */
.vs-hero .icms-widget.card {
  background: linear-gradient(135deg, #fff9f6 0%, var(--vs-bg) 100%) !important;
  border: 1px solid rgba(255, 122, 69, 0.10) !important;
  box-shadow: 0 16px 48px rgba(44, 42, 41, 0.06) !important;
}

.icms-widget.card > .card-body {
  padding: 0 !important;
}

/* Заголовок виджета (h3.card-header) — читается как чёткий заголовок раздела */
.icms-widget.card > h3.card-header,
.icms-widget.card > h2.card-header {
  background: transparent !important;
  border: none !important;
  padding: 0 0 18px 0 !important;
  margin-bottom: 0 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--vs-text) !important;
  letter-spacing: -0.2px !important;
}
/* Оранжевый маркер-акцент перед заголовком раздела (кроме hero) */
.icms-widget.card > h3.card-header::before,
.icms-widget.card > h2.card-header::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 22px;
  margin-right: 12px;
  border-radius: 4px;
  background: var(--vs-primary);
}
.vs-hero .icms-widget.card > h3.card-header::before,
.vs-hero .icms-widget.card > h2.card-header::before { content: none !important; }

/* ==========================================================================
   9. CONTENT LIST — CSS Grid + Premium-карточки
   ==========================================================================
   Реальные классы из default_list.tpl.php:
   .content_list.default_list → контейнер
   .content_list_item         → карточка
   ========================================================================== */

/* Контейнер списка: меняем float на Grid */
.content_list.default_list,
.content_list.shelters_list,
.content_list.vetclinics_list,
.content_list.zooavito_list,
.content_list.petshops_list,
.content_list.catalog_list,
.content_list.albums_list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 24px !important;
  /* Сбрасываем стандартную float-разметку */
  float: none !important;
  width: 100% !important;
  overflow: visible !important;
  margin-top: 0 !important;
}

/* Карточка элемента */
.content_list_item,
.content_list_item.shelters_list_item,
.content_list_item.vetclinics_list_item,
.content_list_item.zooavito_list_item,
.content_list_item.petshops_list_item,
.content_list_item.catalog_list_item,
.content_list_item.albums_list_item {
  background: var(--vs-white) !important;
  border-radius: var(--vs-radius-md) !important;
  border: 1px solid var(--vs-border) !important;
  box-shadow: var(--vs-shadow-xs) !important;
  padding: 24px 26px !important;
  margin: 0 !important;
  float: none !important;
  width: auto !important;
  clear: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  transition: var(--vs-transition) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Оранжевая полоска-акцент при hover */
.content_list_item::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--vs-primary), #ffb347) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.3s ease !important;
  border-radius: 0 0 var(--vs-radius-md) var(--vs-radius-md) !important;
}
.content_list_item::before {
  content: none !important; /* убираем clearfix */
}
.content_list_item:hover::after {
  transform: scaleX(1) !important;
}

/* Hover: карточка приподнимается */
.content_list_item:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--vs-shadow-hover) !important;
  border-color: rgba(255, 122, 69, 0.15) !important;
}

/* Заголовок записи (h3 с ссылкой) */
.content_list_item h3.value {
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  margin: 0 0 4px 0 !important;
  color: var(--vs-text) !important;
}
.content_list_item h3.value a {
  color: var(--vs-text) !important;
  transition: color 0.2s ease !important;
}
.content_list_item h3.value a:hover {
  color: var(--vs-primary) !important;
}

/* Поля контента внутри карточки */
.content_list_item .icms-content-fields {
  flex: 1 !important;
}

/* Метка поля (название поля) */
.content_list_item .title_top,
.content_list_item .title_left {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: var(--vs-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 3px !important;
}

/* Значение поля */
.content_list_item .value {
  font-size: 0.9rem !important;
  color: var(--vs-text) !important;
}

/* Инфо-бар (иконки рейтинга, просмотров и т.д.) */
.content_list_item .info_bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--vs-border) !important;
}
.content_list_item .bar_item {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 0.78rem !important;
  color: var(--vs-text-muted) !important;
  font-weight: 500 !important;
}
.content_list_item .bar_item svg {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.6 !important;
}

/* Теги */
.content_list_item .tags_bar {
  margin-top: 10px !important;
}
.content_list_item .icms-btn-tag {
  font-size: 0.72rem !important;
  padding: 2px 10px !important;
  border-radius: 50px !important;
  border-color: var(--vs-border) !important;
  color: var(--vs-text-muted) !important;
  font-weight: 600 !important;
}
.content_list_item .icms-btn-tag:hover {
  background-color: var(--vs-primary) !important;
  border-color: var(--vs-primary) !important;
  color: var(--vs-white) !important;
}

/* Адаптив Grid */
@media (max-width: 575px) {
  .content_list.default_list,
  .content_list.shelters_list,
  .content_list.vetclinics_list,
  .content_list.zooavito_list,
  .content_list.petshops_list,
  .content_list.catalog_list,
  .content_list.albums_list {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}
@media (min-width: 576px) and (max-width: 991px) {
  .content_list.default_list,
  .content_list.shelters_list,
  .content_list.vetclinics_list,
  .content_list.zooavito_list,
  .content_list.petshops_list,
  .content_list.catalog_list,
  .content_list.albums_list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (min-width: 992px) {
  .content_list.default_list,
  .content_list.shelters_list,
  .content_list.vetclinics_list,
  .content_list.zooavito_list,
  .content_list.petshops_list,
  .content_list.catalog_list,
  .content_list.albums_list {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ==========================================================================
   10. PAGINATION — стилизация пагинации
   ========================================================================== */
.icms-pagebar .page-item .page-link {
  color: var(--vs-text) !important;
  border-color: var(--vs-border) !important;
  border-radius: var(--vs-radius-xs) !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  transition: var(--vs-transition) !important;
}
.icms-pagebar .page-item.active .page-link {
  background-color: var(--vs-primary) !important;
  border-color: var(--vs-primary) !important;
  color: var(--vs-white) !important;
}
.icms-pagebar .page-item .page-link:hover {
  background-color: var(--vs-primary-light) !important;
  color: var(--vs-primary) !important;
  border-color: var(--vs-primary) !important;
}

/* ==========================================================================
   11. SCROLL-TO-TOP button
   ========================================================================== */
#scroll-top {
  background-color: var(--vs-primary) !important;
  border-color: var(--vs-primary) !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: var(--vs-shadow-md) !important;
  transition: var(--vs-transition) !important;
}
#scroll-top:hover {
  background-color: var(--vs-primary-dark) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--vs-shadow-hover) !important;
}

/* ==========================================================================
 * FILTER PANEL — Виджет фильтра (v1.0)
 * Классы из filter-panel.tpl.php:
 *   .icms-filter-panel          — внешний контейнер (div)
 *   .icms-filter-link__open     — кнопка «Показать фильтр»
 *   .icms-filter-container      — тело панели (bg-light убираем)
 *   .button-submit.btn-primary  — кнопка «Применить» (из html_submit())
 *   .cancel_filter_link         — кнопка «Отмена»
 * ========================================================================== */

/* ── Внешний контейнер ─────────────────────────────────────────────────── */
.icms-filter-panel {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,.07);
  border: none !important;
  overflow: hidden;
  margin-bottom: 1.25rem;
}

/* Убираем серый фон gui-panel и Bootstrap bg-light */
.icms-filter-panel.gui-panel {
  border: none !important;
  padding: 0 !important;
}

/* ── Кнопка «Показать фильтр» ─────────────────────────────────────────── */
.icms-filter-link__open.btn.btn-light {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.25rem;
  background: #ffffff !important;
  color: var(--vs-text-primary) !important;
  font-weight: 600;
  font-size: .95rem;
  border: none !important;
  border-radius: 16px;
  box-shadow: none !important;
  transition: var(--vs-transition);
}

.icms-filter-link__open.btn.btn-light:hover {
  background: var(--vs-bg-secondary) !important;
  color: var(--vs-primary) !important;
}

/* ── Тело панели (убираем bg-light) ───────────────────────────────────── */
.icms-filter-container {
  background: #ffffff !important;
  padding: 1.25rem !important;
  border-top: 1px solid var(--vs-border) !important;
}

/* Крестик «закрыть» */
.icms-filter-container .close {
  color: var(--vs-text-muted);
  opacity: .6;
  transition: opacity .2s;
}
.icms-filter-container .close:hover {
  opacity: 1;
  color: var(--vs-danger, #e74c3c);
}

/* ── Метки полей ───────────────────────────────────────────────────────── */
.icms-filter-container .form-group label {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--vs-text-muted);
  margin-bottom: .35rem;
}

/* ── Поля формы: input, select, textarea ──────────────────────────────── */
.icms-filter-container .form-control {
  border-radius: 8px !important;
  border: 1.5px solid var(--vs-border) !important;
  background: var(--vs-bg-secondary) !important;
  color: var(--vs-text-primary) !important;
  font-size: .9rem;
  padding: .5rem .85rem;
  height: auto;
  transition: border-color .2s, box-shadow .2s;
  box-shadow: none !important;
  appearance: auto;
}

.icms-filter-container .form-control:focus {
  border-color: var(--vs-primary) !important;
  box-shadow: 0 0 0 3px rgba(255, 122, 69, .15) !important;
  background: #ffffff !important;
  outline: none;
}

/* ── Чекбоксы и радио-кнопки в фильтре ───────────────────────────────── */
.icms-filter-container .input_checkbox_list {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.icms-filter-container .input_checkbox_list .form-check,
.icms-filter-container .input_checkbox_list .form-check-inline {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .3rem .5rem;
  border-radius: 6px;
  transition: background .15s;
  cursor: pointer;
}

.icms-filter-container .input_checkbox_list .form-check:hover,
.icms-filter-container .input_checkbox_list .form-check-inline:hover {
  background: var(--vs-bg-secondary);
}

.icms-filter-container .form-check-input {
  accent-color: var(--vs-primary);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* ── Кнопка «Применить» (html_submit → .button-submit.btn-primary) ────── */
.icms-filter-container .button.btn.button-submit,
.icms-filter-container .btn.button-submit.btn-primary {
  background: var(--vs-primary) !important;
  border-color: var(--vs-primary) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  padding: .55rem 1.4rem !important;
  font-weight: 700 !important;
  font-size: .9rem !important;
  letter-spacing: .02em;
  transition: background .2s, transform .15s, box-shadow .2s !important;
  box-shadow: 0 4px 12px rgba(255, 122, 69, .3) !important;
}

.icms-filter-container .button.btn.button-submit:hover,
.icms-filter-container .btn.button-submit.btn-primary:hover {
  background: var(--vs-primary-dark) !important;
  border-color: var(--vs-primary-dark) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(255, 122, 69, .4) !important;
}

.icms-filter-container .button.btn.button-submit:active,
.icms-filter-container .btn.button-submit.btn-primary:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 6px rgba(255, 122, 69, .25) !important;
}

/* ── Кнопка «Отмена» ──────────────────────────────────────────────────── */
.icms-filter-container .cancel_filter_link.btn.btn-secondary {
  background: transparent !important;
  border: 1.5px solid var(--vs-border) !important;
  color: var(--vs-text-muted) !important;
  border-radius: 8px !important;
  padding: .55rem 1.1rem !important;
  font-weight: 500 !important;
  font-size: .9rem !important;
  transition: all .2s !important;
}

.icms-filter-container .cancel_filter_link.btn.btn-secondary:hover {
  border-color: var(--vs-text-muted) !important;
  color: var(--vs-text-primary) !important;
  background: var(--vs-bg-secondary) !important;
}

/* ── Ссылка «# Постоянная ссылка на фильтр» ──────────────────────────── */
.icms-filter-container .btn.btn-link {
  color: var(--vs-text-muted) !important;
  font-size: .78rem;
  padding-left: 0;
  text-decoration: none;
  opacity: .7;
  transition: opacity .2s;
}

.icms-filter-container .btn.btn-link:hover {
  opacity: 1;
  color: var(--vs-primary) !important;
  text-decoration: underline;
}

/* ── Адаптив: на мобильных кнопки в столбик ──────────────────────────── */
.icms-filter-container .buttons {
  margin-top: 1rem;
  gap: .5rem;
}

@media (max-width: 767px) {
  .icms-filter-container .button.btn.button-submit,
  .icms-filter-container .cancel_filter_link {
    width: 100% !important;
    text-align: center;
  }
}

/* ==========================================================================
 * CATEGORIES WIDGET — Виджет «Рубрики»
 * Разметка из wrapper.tpl.php + categories.tpl.php:
 *   .icms-widget.card                  — внешняя обёртка виджета
 *   h3.card-header                     — заголовок «Рубрики»
 *   .card-body                         — тело с контентом
 *   .icms-content-subcats              — ul-список категорий
 *   li.my-2[.active][.folder]          — элемент списка
 *   a.h5[.text-dark]                   — ссылка категории
 *   span.text-warning                  — иконка папки (SVG) — скрываем
 *   sup                                — счётчик записей → делаем badge
 *   ul.list-unstyled.pl-3              — вложенный список
 * ========================================================================== */

/* ── Карточка виджета с категориями ───────────────────────────────────── */
.icms-widget.card:has(.icms-content-subcats) {
  background: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid rgba(44, 42, 41, 0.04) !important;
  box-shadow: 0 4px 15px rgba(44, 42, 41, 0.06) !important;
  overflow: hidden;
}

/* Заголовок виджета (h3.card-header) */
.icms-widget.card:has(.icms-content-subcats) > .card-header {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(44, 42, 41, 0.07) !important;
  padding: 1rem 1.25rem !important;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-weight: 700 !important;
  font-size: .82rem !important;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--vs-text-muted) !important;
  border-radius: 0 !important;
}

/* Тело виджета */
.icms-widget.card:has(.icms-content-subcats) > .card-body {
  padding: .75rem .65rem !important;
  background: #ffffff !important;
}

/* ── Список категорий ─────────────────────────────────────────────────── */
.icms-content-subcats {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.icms-content-subcats.my-n2 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.icms-content-subcats li {
  list-style: none !important;
  margin: 2px 0 !important;
  padding: 0 !important;
  position: relative;
}

/* my-2 у li переопределяем */
.icms-content-subcats li.my-2 {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

/* ── Ссылка категории (a.h5 из шаблона) ───────────────────────────────── */
.icms-content-subcats a.h5 {
  display: flex !important;
  align-items: center !important;
  gap: .5rem;
  padding: .6rem .85rem !important;
  border-radius: 8px !important;
  color: var(--vs-text-primary) !important;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: .88rem !important;
  font-weight: 500 !important;
  line-height: 1.4;
  text-decoration: none !important;
  transition: all .2s ease !important;
  border-left: 3px solid transparent;
  margin: 0 !important;
}

/* Иконку папки (SVG) скрываем — делаем чистый текстовый список */
.icms-content-subcats a.h5 > span.text-warning {
  display: none !important;
}

/* Текст названия */
.icms-content-subcats a.h5 > span:not(.text-warning) {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Стрелка для категорий с детьми (li.folder) ───────────────────────── */
.icms-content-subcats li.folder > a.h5::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg) translateY(1px);
  opacity: .4;
  flex-shrink: 0;
  transition: transform .2s ease;
}

.icms-content-subcats li.folder.active > a.h5::after {
  transform: rotate(45deg) translateY(-1px);
  opacity: .7;
}

/* ── Hover ────────────────────────────────────────────────────────────── */
.icms-content-subcats a.h5:hover {
  background: rgba(255, 122, 69, .06) !important;
  color: var(--vs-primary) !important;
  border-left-color: rgba(255, 122, 69, .3) !important;
  padding-left: 1.05rem !important;
}

/* ── Активная (текущая) категория — оранжевая полоска слева ───────────── */
.icms-content-subcats li.active > a.h5 {
  background: rgba(255, 122, 69, .09) !important;
  color: var(--vs-primary) !important;
  border-left-color: var(--vs-primary) !important;
  font-weight: 700 !important;
  padding-left: 1.05rem !important;
}

/* Bootstrap добавляет text-dark на активную ссылку — переопределяем */
.icms-content-subcats li.active > a.h5.text-dark {
  color: var(--vs-primary) !important;
}

/* ── Счётчик записей (sup) → badge-«пилюля» ──────────────────────────── */
.icms-content-subcats a.h5 > sup {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: rgba(44, 42, 41, .08);
  color: var(--vs-text-muted) !important;
  font-size: .67rem !important;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  line-height: 1;
  vertical-align: middle !important;
  position: static !important;
  flex-shrink: 0;
  transition: background .2s, color .2s;
}

.icms-content-subcats a.h5:hover > sup,
.icms-content-subcats li.active > a.h5 > sup {
  background: rgba(255, 122, 69, .15) !important;
  color: var(--vs-primary) !important;
}

/* ── Вложенные подкатегории (ul.list-unstyled.pl-3) ───────────────────── */
.icms-content-subcats > li > ul.list-unstyled {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 2px 0 4px .85rem !important;
  border-left: 2px solid rgba(44, 42, 41, .07);
  padding-left: .25rem !important;
}

.icms-content-subcats > li > ul.list-unstyled li {
  margin: 1px 0 !important;
}

.icms-content-subcats > li > ul.list-unstyled a.h5 {
  font-size: .82rem !important;
  font-weight: 400 !important;
  color: var(--vs-text-muted) !important;
  padding: .45rem .75rem !important;
}

.icms-content-subcats > li > ul.list-unstyled a.h5:hover {
  color: var(--vs-primary) !important;
  padding-left: .9rem !important;
}

/* ── Адаптив ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .icms-content-subcats a.h5 {
    padding: .7rem 1rem !important;
    font-size: .92rem !important;
  }

  .icms-widget.card:has(.icms-content-subcats) > .card-body {
    padding: .5rem .5rem !important;
  }
}

/* ==========================================================================
 * CATEGORIES WIDGET — OVERRIDE v2 (жёсткое переопределение)
 * Побеждает Bootstrap .h5, .my-2, .card-body, sup и прочие системные классы
 * Добавлено ПОСЛЕДНИМ — максимальный приоритет каскада без ID-хаков
 * ========================================================================== */

/* ── Тело карточки: нормальный padding ────────────────────────────────── */
.icms-widget.card:has(.icms-content-subcats) > .card-body {
  padding: 20px !important;
}

/* ── Заголовок виджета: сброс Bootstrap card-header ──────────────────── */
.icms-widget.card:has(.icms-content-subcats) > h3.card-header,
.icms-widget.card:has(.icms-content-subcats) > .card-header {
  font-size: 18px !important;
  font-weight: 800 !important;
  padding: 20px 20px 16px !important;
  border-bottom: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: var(--vs-text-primary) !important;
  letter-spacing: -.01em !important;
  text-transform: none !important;
  font-family: 'Montserrat', 'Inter', sans-serif !important;
  line-height: 1.2 !important;
}

/* ── Список: сброс Bootstrap list-unstyled и my-n2 ───────────────────── */
ul.icms-content-subcats,
ul.icms-content-subcats.list-unstyled,
ul.icms-content-subcats.my-n2 {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* ── Элементы списка: сброс my-2 ─────────────────────────────────────── */
ul.icms-content-subcats li,
ul.icms-content-subcats li.my-2 {
  margin: 0 0 4px 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* ── Ссылки: победа над .h5 Bootstrap ────────────────────────────────── */
ul.icms-content-subcats li a,
ul.icms-content-subcats li a.h5 {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  margin: 0 0 2px 0 !important;
  border-radius: 8px !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  color: var(--vs-text-primary) !important;
  font-family: 'Montserrat', 'Inter', sans-serif !important;
  border-left: 3px solid transparent !important;
  transition: all .18s ease !important;
  background: transparent !important;
}

/* Иконка папки — убрать */
ul.icms-content-subcats li a > span.text-warning,
ul.icms-content-subcats li a.h5 > span.text-warning {
  display: none !important;
}

/* Текст названия — занимает всё свободное место */
ul.icms-content-subcats li a > span:not(.text-warning),
ul.icms-content-subcats li a.h5 > span:not(.text-warning) {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ── Hover ────────────────────────────────────────────────────────────── */
ul.icms-content-subcats li a:hover,
ul.icms-content-subcats li a.h5:hover {
  background: rgba(255, 122, 69, .07) !important;
  color: var(--vs-primary) !important;
  border-left-color: rgba(255, 122, 69, .35) !important;
  padding-left: 20px !important;
}

/* ── Активная рубрика ─────────────────────────────────────────────────── */
ul.icms-content-subcats li.active > a,
ul.icms-content-subcats li.active > a.h5,
ul.icms-content-subcats li.active > a.h5.text-dark {
  background: rgba(255, 122, 69, .10) !important;
  color: var(--vs-primary) !important;
  border-left-color: var(--vs-primary) !important;
  font-weight: 700 !important;
  padding-left: 20px !important;
}

/* ── Счётчик (sup) → фиксированный badge ─────────────────────────────── */
ul.icms-content-subcats li a sup,
ul.icms-content-subcats li a.h5 sup {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 22px !important;
  min-width: 22px !important;
  font-size: 12px !important;
  border-radius: 11px !important;
  background: #f0f0f0 !important;
  color: #666 !important;
  margin-left: auto !important;
  padding: 0 6px !important;
  font-weight: 700 !important;
  font-family: 'Montserrat', sans-serif !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  transition: background .18s, color .18s !important;
}

ul.icms-content-subcats li a:hover sup,
ul.icms-content-subcats li.active > a sup {
  background: rgba(255, 122, 69, .15) !important;
  color: var(--vs-primary) !important;
}

/* ── Вложенные подкатегории ───────────────────────────────────────────── */
ul.icms-content-subcats li > ul.list-unstyled,
ul.icms-content-subcats li > ul.list-unstyled.pl-3 {
  padding: 4px 0 4px 12px !important;
  margin: 0 0 4px 16px !important;
  border-left: 2px solid rgba(44, 42, 41, .08) !important;
  list-style: none !important;
}

ul.icms-content-subcats li > ul.list-unstyled li a,
ul.icms-content-subcats li > ul.list-unstyled li a.h5 {
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 7px 12px !important;
  color: var(--vs-text-muted) !important;
}

ul.icms-content-subcats li > ul.list-unstyled li a:hover {
  color: var(--vs-primary) !important;
  padding-left: 16px !important;
}

/* ==========================================================================
   SINGLE ITEM VIEW — Премиальная стилизация карточки записи
   ========================================================================== */

/* 1. Обертка записи (полноценная карточка) */
.content_item {
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 32px !important;
  box-shadow: 0 4px 24px rgba(44, 42, 41, 0.05) !important;
  margin-bottom: 40px !important;
}

/* 2. Заголовок страницы (h1) */
#content h1,
.content_item h1,
h1 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 32px !important;
  color: #2C2A29 !important;
  margin-bottom: 24px !important;
  line-height: 1.2 !important;
}

/* 3. Двухколоночная сетка полей */
.icms-content-fields {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  align-items: start !important;
}

/* Медиа-запрос для мобильных устройств < 768px */
@media (max-width: 767px) {
  .icms-content-fields {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .content_item {
    padding: 20px !important;
  }
}

/* 4. Стилизация полей */
.icms-content-fields .field {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  width: auto !important;
}

/* Метки полей */
.icms-content-fields .field .field_label,
.icms-content-fields .field .title_left,
.icms-content-fields .field .title_top {
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #888 !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 6px !important;
}

/* Значения полей */
.icms-content-fields .field .value {
  font-size: 16px !important;
  color: #2C2A29 !important;
}

/* Поля с изображениями/галереей (занимают всю ширину) */
.icms-content-fields .field.field_photo,
.icms-content-fields .field.field_image,
.icms-content-fields .field.field_images,
.icms-content-fields .field.ft_image,
.icms-content-fields .field.ft_images {
  grid-column: 1 / -1 !important;
}

.icms-content-fields .field.field_photo img,
.icms-content-fields .field.field_image img,
.icms-content-fields .field.field_images img,
.icms-content-fields .field.ft_image img,
.icms-content-fields .field.ft_images img {
  border-radius: 12px !important;
}

/* Поля с описанием/текстом (занимают всю ширину) */
.icms-content-fields .field.field_text,
.icms-content-fields .field.field_html,
.icms-content-fields .field.ft_text,
.icms-content-fields .field.ft_html {
  grid-column: 1 / -1 !important;
  margin-top: 16px !important;
}

/* ==========================================================================
   MICRO-DESIGN OF FIELDS — Микро-дизайн отдельных полей UI
   ========================================================================== */

/* А) Поле "Телефон" (Phone) */
.icms-content-fields .field.f_phone .value a {
  display: inline-block !important;
  background: #52C41A !important;
  color: #ffffff !important;
  padding: 12px 24px !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  box-shadow: 0 4px 15px rgba(82, 196, 26, 0.3) !important;
  transition: all 0.2s ease !important;
}

.icms-content-fields .field.f_phone .value a:hover {
  background: #3f9b11 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(82, 196, 26, 0.4) !important;
}

.icms-content-fields .field.f_phone .value a:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 8px rgba(82, 196, 26, 0.2) !important;
}

/* Б) Поле "Услуги" (Services / list_multiple) */
.icms-content-fields .field.f_services .value ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

.icms-content-fields .field.f_services .value ul li {
  background: #f0f0f0 !important;
  color: #555555 !important;
  padding: 6px 12px !important;
  border-radius: 50px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  list-style: none !important;
}

/* В) Поле "Срочно" (is_urgent - Зооавито) */
.icms-content-fields .field.f_is_urgent {
  grid-column: 1 / -1 !important;
}

/* Скрываем заголовок */
.icms-content-fields .field.f_is_urgent .field_label {
  display: none !important;
}

/* Значение как красная плашка-алерт */
.icms-content-fields .field.f_is_urgent .value {
  display: inline-block !important;
  background: #FF4D4F !important;
  color: #ffffff !important;
  padding: 4px 12px !important;
  border-radius: 8px !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  letter-spacing: 0.05em !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ДОПОЛНИТЕЛЬНЫЙ ДИЗАЙН КАРТОЧКИ ЗАПИСИ И ПОЛЕЙ
   ────────────────────────────────────────────────────────────────────────── */

/* Ограничение ширины карточки записи, если нет сайдбара */
.content_item {
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 40px !important;
}

/* Ограничение размеров главного фото в карточке */
.content_item .field.f_photo .value img,
.content_item .field.ft_image .value img,
.content_item .field.field_photo .value img,
.content_item .field.field_image .value img {
  width: 100% !important;
  height: 400px !important;
  object-fit: cover !important;
  border-radius: 16px !important;
  margin-bottom: 24px !important;
}

@media (max-width: 767px) {
  .content_item .field.f_photo .value img,
  .content_item .field.ft_image .value img,
  .content_item .field.field_photo .value img,
  .content_item .field.field_image .value img {
    height: 250px !important;
  }
}

/* Красивая типографика описания */
.content_item .field.field_text .value,
.content_item .field.field_html .value,
.content_item .field.ft_text .value,
.content_item .field.ft_html .value,
.content_item .field.f_content .value {
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: #444444 !important;
}

/* Выравнивание кнопки телефона */
.icms-content-fields .field.f_phone .value {
  display: flex !important;
  justify-content: flex-start !important;
}
.icms-content-fields .field.f_phone .value a {
  align-self: start !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   ДОПОЛНИТЕЛЬНЫЕ ИСПРАВЛЕНИЯ СПИСКОВ, ФОТО И КОММЕНТАРИЕВ
   ────────────────────────────────────────────────────────────────────────── */

/* Жесткие лимиты для фото внутри записи */
.content_item .field_image img,
.content_item .field.field_image .value img,
.content_item .field.ft_image .value img,
.content_item .field.f_photo .value img {
  max-height: 400px !important;
  width: 100% !important;
  object-fit: cover !important;
  border-radius: 16px !important;
}

/* Ограничение ширины самой записи */
.content_item {
  max-width: 960px !important;
  margin: 0 auto 40px auto !important;
}

/* Принудительно заставим ВСЕ списки контента работать по нашей Grid-сетке */
.content_list,
.icms-widget__list,
.icms-widget__content_list {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 20px !important;
  float: none !important;
  width: 100% !important;
}

/* ==========================================================================
   COMMENTS — реальные классы InstantCMS 2.x (.media.comment)
   .icms-comment-rating (голоса) | .media-body (.user, .icms-comment-html)
   ========================================================================== */

/* Карточка комментария */
#comments_list .comment.media {
  background: var(--vs-white) !important;
  border: 1px solid var(--vs-border) !important;
  border-radius: var(--vs-radius-md) !important;
  box-shadow: var(--vs-shadow-xs) !important;
  padding: 18px 20px !important;
  margin: 0 0 16px 0 !important;
}
/* Вложенные ответы — отступ по уровню */
#comments_list .comment.ns-1 { margin-left: 28px !important; }
#comments_list .comment.ns-2 { margin-left: 56px !important; }
#comments_list .comment.ns-3,
#comments_list .comment.ns-4,
#comments_list .comment.ns-5 { margin-left: 84px !important; }
#comments_list .comment.selected-comment { border-color: rgba(255,122,69,.4) !important; }

/* Колонка рейтинга (голоса вверх/вниз) */
#comments_list .comment .icms-comment-rating {
  min-width: 34px !important; color: var(--vs-text-muted) !important;
}
#comments_list .comment .icms-comment-rating .value {
  font-weight: 700 !important; font-size: 14px !important; color: var(--vs-text) !important; margin: 2px 0 !important;
}
#comments_list .comment .icms-comment-rating_btn:hover { opacity: 1 !important; }

/* Аватар (micro, инлайн в шапке) */
#comments_list .comment .icms-user-avatar img {
  border-radius: 50% !important; width: 32px !important; height: 32px !important;
  object-fit: cover !important;
}

/* Имя автора */
#comments_list .comment .media-body .user {
  font-weight: 700 !important; color: var(--vs-text) !important; font-size: 14px !important;
}
#comments_list .comment .media-body .user:hover { color: var(--vs-primary) !important; }
#comments_list .comment .media-body h6 small { font-size: 12px !important; }

/* Текст комментария */
#comments_list .comment .icms-comment-html {
  font-size: 14.5px !important; line-height: 1.6 !important; color: #3f3b39 !important;
}

/* Форма добавления комментария */
#comments_add_form textarea,
#comments_add_form .tox-tinymce {
  border-radius: 12px !important;
  border: 1px solid rgba(44, 42, 41, 0.10) !important;
  transition: border-color 0.2s ease !important;
}
#comments_add_form textarea:focus { border-color: #FF7A45 !important; outline: none !important; }

/* Кнопка «Добавить/Обновить» — оранжевая (btn-primary уже оранжевый глобально,
   тут только форма; ПРОЧИЕ кнопки (Отмена/Превью) НЕ трогаем) */
#comments_add_form .button-add,
#comments_add_form .button-update {
  font-weight: 700 !important; border-radius: 10px !important; padding: 9px 24px !important;
}

/* ==========================================================================
   AUTH PAGES & FORMS — Стилизация форм Входа и Регистрации
   ========================================================================== */

/* Обертка всей формы (центрированное белое окно) */
form[action="/auth/login"],
form[action="/auth/register"],
.auth_login_form {
  max-width: 450px !important;
  margin: 60px auto !important;
  background: #ffffff !important;
  padding: 40px !important;
  border-radius: 20px !important;
  box-shadow: var(--vs-shadow-md) !important;
  border: 1px solid var(--vs-border) !important;
}

/* Скрываем легенду внутри формы, так как используем h1 */
form[action="/auth/login"] legend,
form[action="/auth/register"] legend {
  display: none !important;
}

/* Центрирование и стилизация h1 заголовка на страницах входа/регистрации */
/* Общий стиль заголовка страницы (списки, записи) */
article.col-lg > h1 {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 28px !important;
  line-height: 1.25 !important;
  color: #2C2A29 !important;
  margin: 4px 0 20px 0 !important;
}
/* Центрирование — ТОЛЬКО на страницах авторизации (где есть auth-форма) */
article.col-lg:has(form[action^="/auth/"]) > h1 {
  max-width: 450px !important;
  margin: 40px auto -30px auto !important;
  text-align: center !important;
  font-size: 24px !important;
}

/* Поля ввода (Inputs & Labels) */
form[action="/auth/login"] input[type="text"],
form[action="/auth/login"] input[type="email"],
form[action="/auth/login"] input[type="password"],
form[action="/auth/register"] input[type="text"],
form[action="/auth/register"] input[type="email"],
form[action="/auth/register"] input[type="password"],
form[action="/auth/register"] select,
.auth_login_form input {
  height: 48px !important;
  border-radius: 10px !important;
  background-color: #FAF8F5 !important;
  border: 1px solid rgba(44, 42, 41, 0.08) !important;
  padding: 10px 16px !important;
  font-size: 15px !important;
  color: #2C2A29 !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}

form[action="/auth/login"] input:focus,
form[action="/auth/register"] input:focus,
form[action="/auth/register"] select:focus {
  border-color: #FF7A45 !important;
  background-color: #ffffff !important;
  box-shadow: 0 0 0 4px rgba(255, 122, 69, 0.1) !important;
  outline: none !important;
}

/* Подписи к полям (label) */
form[action="/auth/login"] label,
form[action="/auth/register"] label {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #888888 !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Главная кнопка Вход / Регистрация */
form[action="/auth/login"] .buttons button[type="submit"],
form[action="/auth/register"] .buttons button[type="submit"] {
  width: 100% !important;
  height: 48px !important;
  background-color: #FF7A45 !important;
  border-color: #FF7A45 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-family: 'Montserrat', sans-serif !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 15px rgba(255, 122, 69, 0.2) !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

form[action="/auth/login"] .buttons button[type="submit"]:hover,
form[action="/auth/register"] .buttons button[type="submit"]:hover {
  background-color: #e56531 !important;
  border-color: #e56531 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(255, 122, 69, 0.3) !important;
}

form[action="/auth/login"] .buttons button[type="submit"]:active,
form[action="/auth/register"] .buttons button[type="submit"]:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 10px rgba(255, 122, 69, 0.15) !important;
}

/* Кнопка Регистрация / Отмена на всю ширину */
form[action="/auth/login"] .buttons .btn-secondary.button-cancel {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin-top: 12px !important;
  margin-left: 0 !important;
  background: transparent !important;
  border: 1px solid rgba(44, 42, 41, 0.1) !important;
  color: #666666 !important;
  border-radius: 10px !important;
  height: 48px !important;
  line-height: 32px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

form[action="/auth/login"] .buttons .btn-secondary.button-cancel:hover {
  background: #FAF8F5 !important;
  color: #2C2A29 !important;
  border-color: rgba(44, 42, 41, 0.2) !important;
}

/* ==========================================================================
   USER PROFILE TABS — Стилизация личного кабинета (вкладок)
   ========================================================================== */

.profile_menu.nav-tabs,
.nav-tabs.content_vetclinics_comments_tab,
.nav-tabs {
  border-bottom: 2px solid rgba(44, 42, 41, 0.06) !important;
  margin-bottom: 24px !important;
  gap: 8px !important;
}

.profile_menu.nav-tabs .nav-link,
.nav-tabs .nav-link {
  border: none !important;
  background: transparent !important;
  color: #666666 !important;
  font-weight: 600 !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  position: relative !important;
  transition: color 0.2s ease !important;
}

.profile_menu.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:hover {
  color: #FF7A45 !important;
}

.profile_menu.nav-tabs .nav-link.active,
.nav-tabs .nav-link.active {
  color: #FF7A45 !important;
  background: transparent !important;
}

.profile_menu.nav-tabs .nav-link.active::after,
.nav-tabs .nav-link.active::after {
  content: "" !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background-color: #FF7A45 !important;
  border-radius: 2px !important;
}


/* ==========================================================================
   PREMIUM LAYOUTS & POLISH — Тонкая доработка Grid-сетки списков
   ========================================================================== */

/* Переупорядочивание элементов внутри карточки списка (.content_list_item) */
.content_list_item .icms-content-fields {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  width: 100% !important;
}

/* 1. Главная картинка: сверху, во всю ширину, высота 200px, кадрирование */
.content_list_item .field.f_photo,
.content_list_item .field.f_image,
.content_list_item .field.ft_image,
.content_list_item .field.field_photo,
.content_list_item .field.field_image {
  grid-column: 1 / -1 !important;
  order: 1 !important;
  margin: -24px -26px 16px -26px !important;
  overflow: hidden !important;
  border-top-left-radius: 16px !important;
  border-top-right-radius: 16px !important;
}

.content_list_item .field.f_photo .value img,
.content_list_item .field.f_image .value img,
.content_list_item .field.ft_image .value img,
.content_list_item .field.field_photo .value img,
.content_list_item .field.field_image .value img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

/* 2. Заголовок карточки: Montserrat 800, 20px, темно-серый */
.content_list_item .field.f_title {
  grid-column: 1 / -1 !important;
  order: 2 !important;
  margin-bottom: 4px !important;
}

.content_list_item .field.f_title h3.value,
.content_list_item .field.f_title .value a {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  color: #2C2A29 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  text-decoration: none !important;
}

.content_list_item .field.f_title .value a:hover {
  color: var(--vs-primary) !important;
}

/* 3. Описание карточки: Montserrat 400, 14px, графитовый */
.content_list_item .field.f_content {
  grid-column: 1 / -1 !important;
  order: 3 !important;
  margin-bottom: 12px !important;
}

.content_list_item .field.f_content .value,
.content_list_item .field.f_content .value p {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #555555 !important;
  margin: 0 !important;
}

/* 4. Мелкие характеристики: группировка внизу в виде аккуратных плашек-бейджей */
.content_list_item .field:not(.f_photo):not(.f_image):not(.ft_image):not(.field_photo):not(.field_image):not(.f_title):not(.f_content) {
  order: 4 !important;
  background: #FAF8F5 !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(44, 42, 41, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.content_list_item .field:not(.f_photo):not(.f_image):not(.ft_image):not(.field_photo):not(.field_image):not(.f_title):not(.f_content) .title_left {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #888888 !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 2px !important;
}

.content_list_item .field:not(.f_photo):not(.f_image):not(.ft_image):not(.field_photo):not(.field_image):not(.f_title):not(.f_content) .value {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #2C2A29 !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   PREMIUM INNER DETAILS — Стилизация внутренней страницы (.content_item)
   ────────────────────────────────────────────────────────────────────────── */

/* Ограничение ширины детальной карточки */
.content_item {
  max-width: 1000px !important;
  margin: 0 auto 40px auto !important;
}

/* Заголовки групп полей как аккуратные разделители */
.icms-content-fields__group_title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #2C2A29 !important;
  border-bottom: 1px solid rgba(44, 42, 41, 0.08) !important;
  padding-bottom: 6px !important;
  margin-bottom: 20px !important;
  margin-top: 32px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* Жесткие лимиты для фото */
.content_item .field_image img,
.content_item .field.field_image .value img,
.content_item .field.ft_image .value img,
.content_item .field.f_photo .value img,
.content_item .field.ft_photo .value img {
  max-height: 400px !important;
  width: 100% !important;
  object-fit: cover !important;
  border-radius: 16px !important;
}

/* Стилизация таблицы характеристик */
.content_item_props table.table,
.content_item_props table.table th,
.content_item_props table.table td {
  border: none !important;
}

.content_item_props table.table thead th {
  background: transparent !important;
  border-bottom: 2px solid #2C2A29 !important;
  color: #2C2A29 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  padding: 12px 8px !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  letter-spacing: 0.05em !important;
}

.content_item_props table.table tbody tr {
  border-bottom: 1px dashed rgba(44, 42, 41, 0.12) !important;
  background: transparent !important;
  transition: background-color 0.2s ease !important;
}

.content_item_props table.table tbody tr:hover {
  background-color: rgba(44, 42, 41, 0.02) !important;
}

.content_item_props table.table tbody td {
  padding: 12px 8px !important;
  vertical-align: middle !important;
}

/* Название свойства */
.content_item_props table.table tbody td.title {
  color: #888888 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  width: 40% !important;
}

/* Значение свойства */
.content_item_props table.table tbody td.value {
  color: #2C2A29 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}


/* ==========================================================================
   VETSOVET — Семантичная карточка списка (.vs-card)  [v3 · 2026]
   Разметка: templates/vetsovet/content/default_list.tpl.php
   Зоны: media (фото/заглушка) → body (заголовок, описание, мета, услуги)
         → footer (телефон-CTA)
   ========================================================================== */

/* Сбрасываем padding базовой карточки — медиа во всю ширину сверху */
.content_list_item.vs-card { padding: 0 !important; gap: 0 !important; }

/* ── Медиа ─────────────────────────────────────────────────────────────── */
.vs-card .vs-card__media {
  display: block; position: relative;
  height: 168px; overflow: hidden;
  background: #f1ede8;
  border-top-left-radius: var(--vs-radius-md);
  border-top-right-radius: var(--vs-radius-md);
}
.vs-card .vs-card__media > a { display: block; width: 100%; height: 100%; }
.vs-card .vs-card__media img {
  width: 100% !important; height: 100% !important;
  max-width: none !important; max-height: none !important;
  object-fit: cover !important; display: block; border-radius: 0 !important;
  transition: transform .5s cubic-bezier(.25,.8,.25,1);
}
.vs-card:hover .vs-card__media img { transform: scale(1.05); }

/* Заглушка-инициал (когда фото нет) */
.vs-card .vs-card__ph {
  position: absolute; inset: 0; text-decoration: none;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 52px;
  color: #fff; letter-spacing: .02em; user-select: none;
  background: linear-gradient(135deg,
      hsl(var(--ph-hue, 28) 62% 60%),
      hsl(calc(var(--ph-hue, 28) + 28) 68% 50%));
}
.vs-card .vs-card__ph::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 70% 25%, rgba(255,255,255,.18), transparent 55%);
}

/* ── Тело ──────────────────────────────────────────────────────────────── */
.vs-card .vs-card__body {
  flex: 1 1 auto;
  display: flex; flex-direction: column; gap: 9px;
  padding: 18px 22px 14px;
}

/* Заголовок */
.vs-card .vs-card__title {
  font-family: 'Montserrat', sans-serif; font-weight: 800;
  font-size: 18px; line-height: 1.3; margin: 0; color: var(--vs-text);
}
.vs-card .vs-card__title a { color: var(--vs-text) !important; text-decoration: none; }
.vs-card .vs-card__title a:hover { color: var(--vs-primary) !important; }
.vs-card .vs-card__actions .btn { padding: 0 6px; color: var(--vs-text-muted); box-shadow: none; }
.vs-card .vs-card__title .parent_title { font-size: 13px; font-weight: 600; color: var(--vs-text-muted); }

/* Описание — максимум 3 строки */
.vs-card .vs-card__desc {
  font-size: 14px; line-height: 1.55; color: #6b6764; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.vs-card .vs-card__desc p { margin: 0; }

/* Мета-строки (адрес, режим работы …) */
.vs-card .vs-card__rows {
  list-style: none; margin: 3px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 7px;
}
.vs-card .vs-card__row {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13.5px; line-height: 1.45; color: #4a4644;
}
.vs-card .vs-card__row-ic { flex: 0 0 16px; margin-top: 1px; color: var(--vs-primary); opacity: .9; }
.vs-card .vs-card__row-ic svg { width: 14px; height: 14px; }
.vs-card .vs-card__row-val { flex: 1 1 auto; min-width: 0; }
.vs-card .vs-card__row-val a { color: #4a4644; }
.vs-card .vs-card__row-val a:hover { color: var(--vs-primary); }

/* Услуги — чипы */
.vs-card .vs-card__chips ul {
  list-style: none; margin: 5px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.vs-card .vs-card__chips li {
  background: var(--vs-bg); color: #5a5654;
  border: 1px solid var(--vs-border);
  padding: 4px 11px; border-radius: 50px;
  font-size: 12px; font-weight: 600; line-height: 1.5;
}

/* ── Подвал: телефон-CTA ───────────────────────────────────────────────── */
.vs-card .vs-card__footer { padding: 0 22px 20px; margin-top: auto; }
.vs-card .vs-card__call {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; height: 46px;
  background: var(--vs-success); color: #fff !important;
  border-radius: var(--vs-radius-sm);
  font-weight: 700; font-size: 15px; letter-spacing: .01em;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(82, 196, 26, .28);
  transition: var(--vs-transition);
}
.vs-card .vs-card__call svg { width: 16px; height: 16px; }
.vs-card .vs-card__call:hover {
  background: #46a916; transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(82, 196, 26, .36);
}

/* tags / info-bar внутри новой карточки — выравниваем по padding тела */
.vs-card .tags_bar { padding: 0 22px; margin-top: 0 !important; }
.vs-card .mobile-menu-wrapper__info_bar { padding: 0 22px 16px; }
.vs-card .info_bar { margin-top: 0 !important; }

/* Мобайл */
@media (max-width: 575px) {
  .vs-card .vs-card__media { height: 150px; }
  .vs-card .vs-card__body { padding: 16px 18px 12px; }
  .vs-card .vs-card__footer { padding: 0 18px 18px; }
}

/* ==========================================================================
   VETSOVET — Детальная страница записи (.vs-item)  [v3 · 2026]
   Разметка: templates/vetsovet/content/default_item.tpl.php
   Hero-фото + 2 колонки: описание/услуги (main) + карточка контактов (aside)
   ========================================================================== */

.content_item.vs-item { max-width: 1000px !important; margin: 0 auto 48px !important; }

/* Hero-фото */
.vs-item__hero {
  margin: 4px 0 28px; border-radius: var(--vs-radius-md); overflow: hidden;
  background: #f1ede8; line-height: 0;
}
.vs-item__hero img,
.vs-item__hero a { display: block; width: 100%; }
.vs-item__hero img {
  width: 100% !important; height: 360px !important;
  max-height: 360px !important; max-width: none !important;
  object-fit: cover !important; border-radius: var(--vs-radius-md) !important;
}

/* Сетка */
.vs-item__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 36px; align-items: start;
}
.vs-item__grid--full { grid-template-columns: minmax(0, 1fr); }
.vs-item__main { min-width: 0; }

/* Описание
   ⚠️ Контент часто вставляется из Word — тот тащит инлайн-стили вида
   style="margin-bottom: .0001pt" на КАЖДОМ <p>, которые побеждают обычный CSS
   (инлайн-атрибут весит больше правила без !important) и визуально склеивают
   абзацы в «простыню», даже если в HTML реально есть отдельные <p>. Поэтому
   вся типографика внутри .vs-item__desc/.vs-item__block — через !important. */
.vs-item__desc { font-size: 16px; line-height: 1.75; color: #3f3b39; }
.vs-item__desc p { margin: 0 0 14px !important; }
.vs-item__desc p:last-child { margin-bottom: 0 !important; }
.vs-item__desc h1, .vs-item__desc h2, .vs-item__desc h3,
.vs-item__desc h4, .vs-item__desc h5, .vs-item__desc h6 {
  margin: 22px 0 12px !important; line-height: 1.3 !important;
}
.vs-item__desc h1:first-child, .vs-item__desc h2:first-child, .vs-item__desc h3:first-child { margin-top: 0 !important; }
.vs-item__desc ul, .vs-item__desc ol { margin: 0 0 14px !important; padding-left: 22px !important; }
.vs-item__desc li { margin-bottom: 6px !important; }
.vs-item__desc blockquote { margin: 0 0 14px !important; padding: 12px 18px !important; border-left: 3px solid var(--vs-primary); background: var(--vs-primary-light); border-radius: 0 var(--vs-radius-sm) var(--vs-radius-sm) 0; }

/* Секции (услуги, реквизиты …) */
.vs-item__section { margin-top: 28px; }
.vs-item__h {
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: .06em; color: var(--vs-text-muted);
  margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--vs-border);
}
.vs-item__block { font-size: 15px; line-height: 1.7; color: #4a4644; }
.vs-item__block p { margin: 0 0 14px !important; }
.vs-item__block p:last-child { margin-bottom: 0 !important; }
.vs-item__block ul, .vs-item__block ol { margin: 0 0 14px !important; padding-left: 22px !important; }
.vs-item__block li { margin-bottom: 6px !important; }
.vs-item__chips li { font-size: 13px; padding: 6px 14px; }

/* Карточка контактов (aside) */
.vs-item__aside { position: sticky; top: 20px; }
.vs-item__contacts {
  background: var(--vs-white); border: 1px solid var(--vs-border);
  border-radius: var(--vs-radius-md); box-shadow: var(--vs-shadow-sm); padding: 22px;
}
.vs-item__call { height: 50px; margin-bottom: 18px; }
.vs-item__call:last-child { margin-bottom: 0; }

.vs-item__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.vs-item__row { display: flex; gap: 12px; align-items: flex-start; }
.vs-item__row-ic {
  flex: 0 0 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: var(--vs-primary-light); color: var(--vs-primary); border-radius: 10px;
}
.vs-item__row-ic svg { width: 15px; height: 15px; }
.vs-item__row-txt { display: flex; flex-direction: column; gap: 1px; padding-top: 1px; min-width: 0; }
.vs-item__row-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--vs-text-muted); }
.vs-item__row-val { font-size: 14.5px; color: var(--vs-text); line-height: 1.4; }
.vs-item__row-val a { color: var(--vs-primary); }

/* Адаптив */
@media (max-width: 860px) {
  .vs-item__grid { grid-template-columns: 1fr; gap: 24px; }
  .vs-item__aside { position: static; }
  .vs-item__hero img { height: 240px !important; max-height: 240px !important; }
}

/* ==========================================================================
   AUTH — расширение на регистрацию (когда включат) + restore/reset
   Префиксный селектор покрывает /auth/registration и /auth/register
   ========================================================================== */
form[action^="/auth/regist"],
form[action^="/auth/restore"],
form[action^="/auth/reset"] {
  max-width: 450px !important; margin: 60px auto !important;
  background: #fff !important; padding: 40px !important;
  border-radius: 20px !important; box-shadow: var(--vs-shadow-md) !important;
  border: 1px solid var(--vs-border) !important;
}
form[action^="/auth/regist"] legend,
form[action^="/auth/restore"] legend,
form[action^="/auth/reset"] legend { display: none !important; }

form[action^="/auth/regist"] input[type="text"],
form[action^="/auth/regist"] input[type="email"],
form[action^="/auth/regist"] input[type="password"],
form[action^="/auth/regist"] select,
form[action^="/auth/restore"] input,
form[action^="/auth/reset"] input {
  height: 48px !important; border-radius: 10px !important;
  background-color: #FAF8F5 !important; border: 1px solid rgba(44,42,41,.08) !important;
  padding: 10px 16px !important; font-size: 15px !important; color: #2C2A29 !important;
  transition: all .2s ease !important; box-shadow: none !important;
}
form[action^="/auth/regist"] input:focus,
form[action^="/auth/regist"] select:focus,
form[action^="/auth/restore"] input:focus,
form[action^="/auth/reset"] input:focus {
  border-color: #FF7A45 !important; background-color: #fff !important;
  box-shadow: 0 0 0 4px rgba(255,122,69,.1) !important; outline: none !important;
}
form[action^="/auth/regist"] label,
form[action^="/auth/restore"] label,
form[action^="/auth/reset"] label {
  font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important;
  color: #888 !important; letter-spacing: .05em !important; margin-bottom: 6px !important; display: block !important;
}
form[action^="/auth/regist"] .buttons button[type="submit"],
form[action^="/auth/restore"] .buttons button[type="submit"],
form[action^="/auth/reset"] .buttons button[type="submit"] {
  width: 100% !important; height: 48px !important;
  background-color: #FF7A45 !important; border-color: #FF7A45 !important;
  color: #fff !important; font-weight: 700 !important; border-radius: 10px !important;
  box-shadow: 0 4px 15px rgba(255,122,69,.2) !important; transition: all .2s ease !important;
}
form[action^="/auth/regist"] .buttons button[type="submit"]:hover,
form[action^="/auth/restore"] .buttons button[type="submit"]:hover,
form[action^="/auth/reset"] .buttons button[type="submit"]:hover {
  background-color: #e56531 !important; transform: translateY(-1px) !important;
}

/* ── Hero CTA-кнопки + подзаголовок ─────────────────────────────────────── */
.vs-hero .icms-widget__html_block .vs-hero__cta {
  display: flex !important; gap: 14px !important;
  justify-content: center !important; flex-wrap: wrap !important;
  margin-top: 30px !important;
}
.vs-hero .icms-widget__html_block .vs-hero__cta .btn {
  margin-top: 0 !important; min-width: 190px !important;
}
.vs-hero .icms-widget__html_block .btn.btn-light {
  background: #fff !important; color: var(--vs-text) !important;
  border: 1px solid var(--vs-border) !important; box-shadow: var(--vs-shadow-xs) !important;
}
.vs-hero .icms-widget__html_block .btn.btn-light:hover {
  background: var(--vs-bg) !important; color: var(--vs-primary) !important;
  border-color: rgba(255,122,69,.3) !important;
}

/* ── Бейдж «Срочно» (is_urgent) ─────────────────────────────────────────── */
/* ⚠️ .vs-urgent-badge — прямой ребёнок .vs-card__body (display:flex;
   flex-direction:column, БЕЗ align-items), поэтому по дефолту (align-items:
   stretch) растягивался на всю ширину карточки, несмотря на inline-flex —
   stretch управляет тем, как РОДИТЕЛЬ размещает ребёнка по кросс-оси, а не
   тем, как ребёнок раскладывает СВОИХ детей. align-self возвращает бейджу
   его собственную ширину по контенту, не трогая соседние h3/div/ul, которым
   full-width как раз нужен (у них НЕТ display:flex — там align-items их не
   стягивал бы, но и не расширял; они и так block=100% сами по себе). */
.vs-urgent-badge {
  display: inline-flex; align-items: center; align-self: flex-start; gap: 6px;
  width: fit-content; flex: 0 0 auto;
  background: #FF4D4F; color: #fff !important;
  padding: 5px 13px; border-radius: 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  margin: 0 0 16px; line-height: 1;
}
.vs-urgent-badge svg { width: 13px; height: 13px; }
.vs-card .vs-urgent-badge { margin: 0 0 8px; }

/* ── Телефон-CTA в карточке контактов детальной (.vs-item__call) ─────────
   (стиль .vs-card__call не достаёт сюда — у .vs-item нет предка .vs-card) */
.vs-item__call {
  display: flex !important; align-items: center; justify-content: center; gap: 9px;
  width: 100%; height: 50px;
  background: var(--vs-success); color: #fff !important;
  border-radius: var(--vs-radius-sm);
  font-weight: 700; font-size: 16px; letter-spacing: .01em;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(82, 196, 26, .28);
  transition: var(--vs-transition);
}
.vs-item__call svg { width: 17px; height: 17px; }
.vs-item__call:hover {
  background: #46a916; color: #fff !important;
  transform: translateY(-2px); box-shadow: 0 8px 22px rgba(82, 196, 26, .36);
}

/* ── Подкатегории каталога — аккуратные чипы (.icms-content-subcats) ────── */
.icms-content-subcats.list-inline {
  display: flex !important; flex-wrap: wrap !important; gap: 10px !important;
  padding: 0 !important; margin: 0 0 8px 0 !important; list-style: none !important;
}
.icms-content-subcats > li {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  margin: 0 !important; padding: 9px 16px !important;
  background: var(--vs-white) !important; border: 1px solid var(--vs-border) !important;
  border-radius: 50px !important; box-shadow: var(--vs-shadow-xs) !important;
  font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important;
  color: var(--vs-text) !important; transition: var(--vs-transition) !important;
}
.icms-content-subcats > li:hover {
  border-color: rgba(255, 122, 69, .3) !important;
  box-shadow: var(--vs-shadow-sm) !important; transform: translateY(-1px);
}
.icms-content-subcats > li svg {
  display: none !important; /* по просьбе клиента — только название папки, без значка */
}
.icms-content-subcats > li a { color: var(--vs-text) !important; }
.icms-content-subcats > li:hover a { color: var(--vs-primary) !important; }
.icms-content-subcats .icms-content-subcats__count {
  font-size: 11px !important; color: var(--vs-text-muted) !important; top: 0 !important;
  background: var(--vs-bg) !important; padding: 1px 8px !important; border-radius: 50px !important; margin-left: 2px !important;
}

/* ==========================================================================
   12. CONTENT ADD CTA — яркая кнопка «+ Добавить …» на страницах разделов
   ========================================================================== */
.vs-add-cta-wrap {
  display: flex;
  align-items: center;
  margin: 0 14px 0 0; /* toolbox=flex-row align-center: без верт. margin, только правый отступ от «Подписаться» */
}
.vs-add-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  color: var(--vs-white) !important;
  background: linear-gradient(135deg, var(--vs-primary) 0%, #ff9a5f 100%) !important;
  border: none !important;
  border-radius: 50px !important;
  box-shadow: 0 8px 22px rgba(255, 122, 69, 0.30) !important;
  transition: var(--vs-transition) !important;
}
.vs-add-cta:hover,
.vs-add-cta:focus {
  color: var(--vs-white) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(255, 122, 69, 0.42) !important;
}
.vs-add-cta svg {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 auto;
}
@media (max-width: 767px) {
  /* .icms-body-toolbox переходит в flex-direction:column — CTA во всю ширину под заголовком */
  .vs-add-cta-wrap { width: 100%; margin: 12px 0 0; }
  .vs-add-cta { width: 100%; justify-content: center; }
}

/* ==========================================================================
   13. CONTENT ITEM FORM — премиальная форма создания/редактирования
   (item_form.tpl.php → .vs-form-page, renderForm form_class=vs-item-form)
   ========================================================================== */
/* — Контейнер-карточка — */
.vs-form-page {
  max-width: 800px;
  margin: 40px auto;
  padding: 40px;
  background: var(--vs-white);
  border-radius: 20px;
  box-shadow: var(--vs-shadow-md);
}
.vs-form-page > h1 {
  font-size: 26px !important;
  font-weight: 700 !important;
  margin: 0 0 28px !important;
  color: var(--vs-text) !important;
}

/* — Табы формы — */
.vs-form-page .form-tabs .nav-tabs {
  border-bottom: 1px solid var(--vs-border) !important;
  margin-bottom: 26px !important;
  gap: 4px;
  flex-wrap: wrap;
}
.vs-form-page .form-tabs .nav-tabs .nav-link {
  border: none !important;
  color: var(--vs-text-muted) !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  border-radius: var(--vs-radius-sm) var(--vs-radius-sm) 0 0 !important;
  transition: var(--vs-transition) !important;
}
.vs-form-page .form-tabs .nav-tabs .nav-link:hover {
  color: var(--vs-primary) !important;
  background: var(--vs-primary-light) !important;
}
.vs-form-page .form-tabs .nav-tabs .nav-link.active {
  color: var(--vs-primary) !important;
  background: transparent !important;
  border-bottom: 2px solid var(--vs-primary) !important;
}

/* — Fieldset / legend / метки — */
.vs-form-page fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.vs-form-page fieldset > legend {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--vs-text) !important;
  border: none !important;
  margin-bottom: 16px !important;
}
.vs-form-page .form-group {
  margin-bottom: 20px !important;
}
.vs-form-page .form-group > label {
  font-weight: 600 !important;
  font-size: 14px !important;
  color: var(--vs-text) !important;
  margin-bottom: 8px !important;
}

/* — Поля ввода / select — */
.vs-form-page .form-control {
  height: 46px !important;
  padding: 0 16px !important;
  background: #FAFAF8 !important;
  border: 1.5px solid var(--vs-border) !important;
  border-radius: var(--vs-radius-sm) !important;
  font-size: 15px !important;
  color: var(--vs-text) !important;
  box-shadow: none !important;
  transition: var(--vs-transition) !important;
}
.vs-form-page select.form-control { cursor: pointer; }
.vs-form-page textarea.form-control,
.vs-form-page .form-control.textarea {
  height: auto !important;
  min-height: 130px !important;
  padding: 14px 16px !important;
  line-height: 1.6 !important;
  resize: vertical;
}
.vs-form-page .form-control:focus {
  background: var(--vs-white) !important;
  border-color: var(--vs-primary) !important;
  box-shadow: 0 0 0 4px var(--vs-primary-light) !important;
  outline: none !important;
}
.vs-form-page .form-control::placeholder { color: #B8B5B2 !important; }

/* input-group (префикс/суффикс, напр. телефон/цена) */
.vs-form-page .input-group-text {
  height: 46px !important;
  background: #F2F0ED !important;
  border: 1.5px solid var(--vs-border) !important;
  color: var(--vs-text-muted) !important;
  font-size: 14px !important;
}

/* — Подсказки и ошибки — */
.vs-form-page .icms-forms-hint .hint { color: var(--vs-text-muted) !important; }
.vs-form-page .field_error .form-control { border-color: #E5484D !important; }
.vs-form-page .invalid-feedback { color: #E5484D !important; font-weight: 500 !important; }

/* — Загрузчики изображений (ребрендинг круглых виджетов images/styles.css) — */
/* Одиночное фото: круг → светлый + штриховая рамка + оранжевая иконка камеры */
.vs-form-page .widget_image_single .upload.block,
.vs-form-page .widget_image_single .qq-upload-button {
  background-color: var(--vs-primary-light) !important;
  border: 2px dashed rgba(255, 122, 69, 0.5) !important;
}
.vs-form-page .widget_image_single .qq-upload-button {
  background-image: url("data:image/svg+xml,%3csvg width='32' height='26' viewBox='0 0 32 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M30.9354 4.33069C30.2966 3.66149 29.4145 3.26605 28.4106 3.26605H23.3612V3.20522C23.3612 2.44476 23.057 1.71472 22.5399 1.22803C22.0228 0.710921 21.3232 0.406738 20.5627 0.406738H11.4373C10.6464 0.406738 9.94677 0.710921 9.42966 1.22803C8.91255 1.74514 8.60837 2.44476 8.60837 3.20522V3.26605H3.58935C2.58555 3.26605 1.70342 3.66149 1.06464 4.33069C0.425856 4.96948 0 5.88202 0 6.85541V22.0037C0 23.0075 0.395437 23.8896 1.06464 24.5284C1.70342 25.1672 2.61597 25.5931 3.58935 25.5931H28.4106C29.4145 25.5931 30.2966 25.1976 30.9354 24.5284C31.5741 23.8896 32 22.9771 32 22.0037V6.85541C32 5.85161 31.6046 4.96948 30.9354 4.33069ZM30.4183 22.0037H30.3878C30.3878 22.5512 30.1749 23.0379 29.8099 23.4029C29.4449 23.768 28.9582 23.9809 28.4106 23.9809H3.58935C3.04183 23.9809 2.55513 23.768 2.19011 23.4029C1.8251 23.0379 1.61217 22.5512 1.61217 22.0037V6.85541C1.61217 6.30788 1.8251 5.82119 2.19011 5.45617C2.55513 5.09115 3.04183 4.87822 3.58935 4.87822H9.46008C9.91635 4.87822 10.2814 4.5132 10.2814 4.05693V3.1748C10.2814 2.8402 10.403 2.53602 10.616 2.32309C10.8289 2.11016 11.1331 1.98849 11.4677 1.98849H20.5627C20.8973 1.98849 21.2015 2.11016 21.4144 2.32309C21.6274 2.53602 21.7491 2.8402 21.7491 3.1748V4.05693C21.7491 4.5132 22.1141 4.87822 22.5703 4.87822H28.4411C28.9886 4.87822 29.4753 5.09115 29.8403 5.45617C30.2053 5.82119 30.4183 6.30788 30.4183 6.85541V22.0037Z' fill='%23FF7A45'/%3e%3cpath d='M15.9985 6.94678C13.9301 6.94678 12.0441 7.79849 10.7057 9.1369C9.33692 10.5057 8.51562 12.3612 8.51562 14.4297C8.51562 16.4981 9.36734 18.3841 10.7057 19.7225C12.0746 21.0913 13.9301 21.9126 15.9985 21.9126C18.067 21.9126 19.9529 21.0609 21.2913 19.7225C22.6601 18.3536 23.4814 16.4981 23.4814 14.4297C23.4814 12.3612 22.6297 10.4753 21.2913 9.1369C19.9529 7.79849 18.067 6.94678 15.9985 6.94678ZM20.1354 18.597C19.0708 19.6312 17.6107 20.3004 15.9985 20.3004C14.3864 20.3004 12.9263 19.6312 11.8616 18.597C10.797 17.5323 10.1582 16.0723 10.1582 14.4601C10.1582 12.8479 10.8274 11.3878 11.8616 10.3232C12.9263 9.25857 14.3864 8.61978 15.9985 8.61978C17.6107 8.61978 19.0708 9.28899 20.1354 10.3232C21.2 11.3878 21.8388 12.8479 21.8388 14.4601C21.8692 16.0723 21.2 17.5323 20.1354 18.597Z' fill='%23FF7A45'/%3e%3cpath d='M26.8303 9.89701C27.6535 9.89701 28.3208 9.22969 28.3208 8.40651C28.3208 7.58333 27.6535 6.91602 26.8303 6.91602C26.0072 6.91602 25.3398 7.58333 25.3398 8.40651C25.3398 9.22969 26.0072 9.89701 26.8303 9.89701Z' fill='%23FF7A45'/%3e%3c/svg%3e") !important;
}
.vs-form-page .widget_image_single .upload.block:hover,
.vs-form-page .widget_image_single .qq-upload-button:hover {
  background-color: rgba(255, 122, 69, 0.18) !important;
  border-color: var(--vs-primary) !important;
}
/* Превью одиночного/множественного фото — мягкая рамка вместо серой */
.vs-form-page .widget_image_single .preview.block,
.vs-form-page .widget_image_multi .preview.multi-block {
  border: 1.5px solid var(--vs-border) !important;
  box-shadow: var(--vs-shadow-xs) !important;
}
/* Множественная загрузка: серую кнопку → штриховая брендовая дропзона */
.vs-form-page .widget_image_multi .qq-upload-button {
  min-height: 46px !important;
  color: var(--vs-primary) !important;
  font-weight: 600 !important;
  background-color: var(--vs-primary-light) !important;
  border: 2px dashed rgba(255, 122, 69, 0.5) !important;
  border-radius: var(--vs-radius-md) !important;
  background-image: url("data:image/svg+xml,%3csvg width='32' height='26' viewBox='0 0 32 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M30.9354 4.33069C30.2966 3.66149 29.4145 3.26605 28.4106 3.26605H23.3612V3.20522C23.3612 2.44476 23.057 1.71472 22.5399 1.22803C22.0228 0.710921 21.3232 0.406738 20.5627 0.406738H11.4373C10.6464 0.406738 9.94677 0.710921 9.42966 1.22803C8.91255 1.74514 8.60837 2.44476 8.60837 3.20522V3.26605H3.58935C2.58555 3.26605 1.70342 3.66149 1.06464 4.33069C0.425856 4.96948 0 5.88202 0 6.85541V22.0037C0 23.0075 0.395437 23.8896 1.06464 24.5284C1.70342 25.1672 2.61597 25.5931 3.58935 25.5931H28.4106C29.4145 25.5931 30.2966 25.1976 30.9354 24.5284C31.5741 23.8896 32 22.9771 32 22.0037V6.85541C32 5.85161 31.6046 4.96948 30.9354 4.33069ZM30.4183 22.0037H30.3878C30.3878 22.5512 30.1749 23.0379 29.8099 23.4029C29.4449 23.768 28.9582 23.9809 28.4106 23.9809H3.58935C3.04183 23.9809 2.55513 23.768 2.19011 23.4029C1.8251 23.0379 1.61217 22.5512 1.61217 22.0037V6.85541C1.61217 6.30788 1.8251 5.82119 2.19011 5.45617C2.55513 5.09115 3.04183 4.87822 3.58935 4.87822H9.46008C9.91635 4.87822 10.2814 4.5132 10.2814 4.05693V3.1748C10.2814 2.8402 10.403 2.53602 10.616 2.32309C10.8289 2.11016 11.1331 1.98849 11.4677 1.98849H20.5627C20.8973 1.98849 21.2015 2.11016 21.4144 2.32309C21.6274 2.53602 21.7491 2.8402 21.7491 3.1748V4.05693C21.7491 4.5132 22.1141 4.87822 22.5703 4.87822H28.4411C28.9886 4.87822 29.4753 5.09115 29.8403 5.45617C30.2053 5.82119 30.4183 6.30788 30.4183 6.85541V22.0037Z' fill='%23FF7A45'/%3e%3cpath d='M15.9985 6.94678C13.9301 6.94678 12.0441 7.79849 10.7057 9.1369C9.33692 10.5057 8.51562 12.3612 8.51562 14.4297C8.51562 16.4981 9.36734 18.3841 10.7057 19.7225C12.0746 21.0913 13.9301 21.9126 15.9985 21.9126C18.067 21.9126 19.9529 21.0609 21.2913 19.7225C22.6601 18.3536 23.4814 16.4981 23.4814 14.4297C23.4814 12.3612 22.6297 10.4753 21.2913 9.1369C19.9529 7.79849 18.067 6.94678 15.9985 6.94678ZM20.1354 18.597C19.0708 19.6312 17.6107 20.3004 15.9985 20.3004C14.3864 20.3004 12.9263 19.6312 11.8616 18.597C10.797 17.5323 10.1582 16.0723 10.1582 14.4601C10.1582 12.8479 10.8274 11.3878 11.8616 10.3232C12.9263 9.25857 14.3864 8.61978 15.9985 8.61978C17.6107 8.61978 19.0708 9.28899 20.1354 10.3232C21.2 11.3878 21.8388 12.8479 21.8388 14.4601C21.8692 16.0723 21.2 17.5323 20.1354 18.597Z' fill='%23FF7A45'/%3e%3cpath d='M26.8303 9.89701C27.6535 9.89701 28.3208 9.22969 28.3208 8.40651C28.3208 7.58333 27.6535 6.91602 26.8303 6.91602C26.0072 6.91602 25.3398 7.58333 25.3398 8.40651C25.3398 9.22969 26.0072 9.89701 26.8303 9.89701Z' fill='%23FF7A45'/%3e%3c/svg%3e") !important;
}
.vs-form-page .widget_image_multi .qq-upload-button:hover {
  background-color: rgba(255, 122, 69, 0.18) !important;
  border-color: var(--vs-primary) !important;
  color: var(--vs-primary-dark) !important;
}
.vs-form-page .widget_image_multi .qq-upload-drop-area.qq-upload-drop-area-active {
  background-color: var(--vs-primary) !important;
}

/* — Кнопки формы: большой коралловый «Сохранить/Опубликовать» — */
.vs-form-page .buttons {
  margin-top: 34px !important;
  padding-top: 26px;
  border-top: 1px solid var(--vs-border);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
/* База для всех кнопок формы: flex-центрирование текста (иначе при height+разном padding текст «прыгает») */
.vs-form-page .buttons .btn,
.vs-form-page .buttons .button-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 52px !important;
  padding: 0 28px !important;
  margin: 0 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  border-radius: var(--vs-radius-sm) !important;
}
.vs-form-page .buttons .button-submit {
  padding: 0 44px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--vs-white) !important;
  background: var(--vs-primary) !important;
  border-color: var(--vs-primary) !important;
  box-shadow: 0 8px 22px rgba(255, 122, 69, 0.30) !important;
}
.vs-form-page .buttons .button-submit:hover {
  background: var(--vs-primary-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(255, 122, 69, 0.42) !important;
}

/* — Адаптив — */
@media (max-width: 767px) {
  .vs-form-page {
    margin: 20px auto;
    padding: 24px 18px;
    border-radius: 16px;
  }
  .vs-form-page > h1 { font-size: 22px !important; margin-bottom: 20px !important; }
  .vs-form-page .buttons .button-submit { width: 100%; }
}

/* ==========================================================================
   14. BILLING / МОНЕТИЗАЦИЯ — премиальные платёжные интерфейсы
   Реальные классы: billing/widgets/plans (.pricing-*), plan.tpl (.billing-plan),
   profile_tab (.balance-info.balance / .plan), deposit.tpl (.billing-deposit),
   history.tpl (.billing-log, .positive/.negative/.zero), success/fail (.vs-billing-result)
   ========================================================================== */

/* ---- 14.1 Pricing cards (SaaS-сетка тарифов) — перекрываем синюю тему billing/styles.css ---- */
.pricing-desc { margin-bottom: 2.5rem !important; color: var(--vs-text-muted); }
.vs-pricing-heading {
  font-size: 30px !important;
  font-weight: 800 !important;
  color: var(--vs-text) !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 8px !important;
}
.pricing-desc p { margin: 0 !important; font-size: 15px !important; }
.pricing-wraper {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: 28px !important;
  align-items: stretch !important;
  margin: 1rem 0 !important;
}
.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--vs-white) !important;
  border: 1.5px solid var(--vs-border) !important;
  border-radius: var(--vs-radius-md) !important;
  box-shadow: var(--vs-shadow-md) !important;
  padding: 8px !important;
  max-width: none !important;
  transition: var(--vs-transition) !important;
}
.pricing-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--vs-shadow-hover) !important;
}
.pricing-card > .card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 24px 22px !important; }
/* Выделенный (VIP/популярный) тариф */
.pricing-card.popular {
  background: linear-gradient(180deg, #fff8f4 0%, var(--vs-white) 60%) !important;
  border: 2px solid var(--vs-primary) !important;
  box-shadow: 0 20px 50px rgba(255, 122, 69, 0.20) !important;
  transform: none !important;
}
.pricing-card.popular:hover { transform: translateY(-6px) !important; }
.pricing-popular-badge {
  position: absolute !important;
  top: -14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(135deg, var(--vs-primary) 0%, #ff9a5f 100%) !important;
  color: var(--vs-white) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 7px 16px !important;
  border-radius: 50px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  box-shadow: 0 6px 16px rgba(255, 122, 69, 0.35) !important;
  white-space: nowrap;
}
.pricing-card .plan-name {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--vs-text) !important;
  margin: 6px 0 6px !important;
}
.pricing-card .plan-description { color: var(--vs-text-muted) !important; font-size: 14px !important; margin-bottom: 18px !important; }
.pricing-card .pricing-card-title { margin: 0 0 22px !important; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pricing-card .price-amount {
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  color: var(--vs-text) !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
}
.pricing-card .price-period { color: var(--vs-text-muted) !important; font-size: 15px !important; }
.pricing-card .plan-features { display: flex; flex-direction: column; gap: 10px !important; margin-bottom: 24px !important; }
.pricing-card .plan-features__item { display: flex; gap: 10px !important; align-items: flex-start; font-size: 14px; color: var(--vs-text); }
.pricing-card .plan-features__item > * { display: flex; align-items: center; }
.pricing-card .plan-features__item .text-success { color: var(--vs-success) !important; }
.pricing-card .plan-features__item.text-muted { color: var(--vs-text-muted) !important; }
.pricing-card .plan-features__item svg { width: 16px; height: 16px; }
/* Кнопка выбора тарифа — фирменная коралловая */
.pricing-card .btn { margin-top: auto !important; height: 48px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700 !important; border-radius: var(--vs-radius-sm) !important; }
.pricing-card .btn-primary { background: var(--vs-primary) !important; border-color: var(--vs-primary) !important; box-shadow: 0 8px 20px rgba(255,122,69,.28) !important; }
.pricing-card .btn-primary:hover { background: var(--vs-primary-dark) !important; }
.pricing-card .btn-outline-primary {
  color: var(--vs-primary) !important;
  border: 1.5px solid var(--vs-primary) !important;
  background: transparent !important;
}
.pricing-card .btn-outline-primary:hover { color: var(--vs-white) !important; background: var(--vs-primary) !important; }

/* ---- 14.2 Форма покупки тарифа (plan.tpl.php .billing-plan) ---- */
.billing-plan .card,
.billing-deposit .card {
  border: 1.5px solid var(--vs-border) !important;
  border-radius: var(--vs-radius-md) !important;
  box-shadow: var(--vs-shadow-sm) !important;
}
.billing-plan .card-body,
.billing-deposit .card-body { padding: 28px !important; }
.billing-plan .plan-features { display: flex; flex-direction: column; gap: 8px; }
.billing-plan .plan-features__item { display: flex; gap: 8px; align-items: flex-start; }
.billing-plan .plan-features__item .text-success { color: var(--vs-success) !important; }
.billing-plan #plan-price { font-size: 1.6rem !important; font-weight: 800 !important; color: var(--vs-primary) !important; }

/* Инпуты суммы (пополнение баланса — форма депозита и admin-модалка add_balance): h48/r10 + фирменная оранжевая подсветка фокуса */
.billing-deposit .form-control,
.vs-balance-form .form-control {
  height: 48px !important;
  padding: 0 16px !important;
  background: #FAFAF8 !important;
  border: 1.5px solid var(--vs-border) !important;
  border-radius: var(--vs-radius-sm) !important;
  font-size: 15px !important;
  color: var(--vs-text) !important;
  box-shadow: none !important;
  transition: var(--vs-transition) !important;
}
.billing-deposit .form-control:focus,
.vs-balance-form .form-control:focus {
  background: var(--vs-white) !important;
  border-color: var(--vs-primary) !important;
  box-shadow: 0 0 0 4px var(--vs-primary-light) !important;
  outline: none !important;
}
.billing-deposit .input-group-text {
  height: 48px !important;
  background: #F2F0ED !important;
  border: 1.5px solid var(--vs-border) !important;
  border-radius: 0 var(--vs-radius-sm) var(--vs-radius-sm) 0 !important;
  color: var(--vs-text-muted) !important;
}
.vs-balance-form .buttons .button-submit {
  height: 48px !important;
  padding: 0 32px !important;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700 !important;
  border-radius: var(--vs-radius-sm) !important;
  background: var(--vs-primary) !important;
  border-color: var(--vs-primary) !important;
}
.vs-balance-form .buttons .button-submit:hover { background: var(--vs-primary-dark) !important; }

/* ---- 14.3 Кошелёк: «банковская карта» баланса (profile_tab .balance-info.balance) ---- */
.balance-info.balance.card {
  border: none !important;
  border-radius: var(--vs-radius-md) !important;
  background: linear-gradient(135deg, #3a3735 0%, #2C2A29 55%, #201f1e 100%) !important;
  box-shadow: 0 18px 45px rgba(44, 42, 41, 0.28) !important;
  overflow: hidden;
  position: relative;
}
/* декоративное свечение + «чип» банковской карты */
.balance-info.balance.card::before {
  content: "";
  position: absolute;
  top: -40%; right: -10%;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(255,122,69,0.22) 0%, rgba(255,122,69,0) 70%);
  pointer-events: none;
}
.balance-info.balance.card::after {
  content: "";
  position: absolute;
  top: 26px; right: 28px;
  width: 44px; height: 32px;
  border-radius: 6px;
  background: linear-gradient(135deg, #f4c56b, #d9a441);
  opacity: 0.9;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}
.balance-info.balance.card > .card-body { padding: 24px !important; position: relative; z-index: 1; }
.balance-info.balance .card-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0 0 4px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255,255,255,0.65) !important;
}
.balance-info.balance .card-title > span {
  font-size: 2.7rem !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  color: var(--vs-white) !important;
  text-transform: none;
  letter-spacing: -0.01em;
}
.balance-info.balance .card-title > small { color: rgba(255,255,255,0.6) !important; text-transform: none; letter-spacing: 0; font-weight: 500; }
/* Кнопки действий на тёмной карте */
.balance-info.balance .balance-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px !important;
  margin-top: 22px !important;
}
.balance-info.balance .balance-actions .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px !important;
  font-weight: 600 !important;
  border-radius: var(--vs-radius-sm) !important;
}
.balance-info.balance .balance-actions .btn svg { width: 18px; height: 18px; }
/* «Пополнить» — фирменная коралловая CTA */
.balance-info.balance .balance-actions .btn.deposit {
  background: linear-gradient(135deg, var(--vs-primary) 0%, #ff9a5f 100%) !important;
  border: none !important;
  color: var(--vs-white) !important;
  box-shadow: 0 8px 22px rgba(255,122,69,.4) !important;
}
.balance-info.balance .balance-actions .btn.deposit:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255,122,69,.5) !important; }
/* Прочие действия — светлый контур на тёмном фоне */
.balance-info.balance .balance-actions .btn:not(.deposit) {
  background: rgba(255,255,255,0.08) !important;
  border: 1.5px solid rgba(255,255,255,0.22) !important;
  color: rgba(255,255,255,0.92) !important;
}
.balance-info.balance .balance-actions .btn:not(.deposit):hover {
  background: rgba(255,255,255,0.16) !important;
  border-color: rgba(255,255,255,0.45) !important;
  color: var(--vs-white) !important;
}

/* ---- 14.4 Карточка текущего тарифа (profile_tab .balance-info.plan) ---- */
.balance-info.plan.card {
  border: 1.5px solid var(--vs-border) !important;
  border-radius: var(--vs-radius-md) !important;
  box-shadow: var(--vs-shadow-sm) !important;
}
.balance-info.plan .card-body { padding: 24px 26px !important; }

/* ---- 14.5 Депозит: таблица цен + выбор платёжной системы ---- */
.billing-deposit .billing-prices-info .card { background: var(--vs-bg) !important; }
.billing-deposit .table { margin: 0 !important; }
.billing-deposit .table th { border: none !important; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--vs-text-muted) !important; padding: 8px 12px !important; }
.billing-deposit .table td { border: none !important; border-top: 1px solid var(--vs-border) !important; padding: 10px 12px !important; }
.vs-pay-single { font-weight: 600; color: var(--vs-text); }
/* Интерактивные карточки платёжных систем (deposit multi-system) */
.vs-pay-systems { display: flex; flex-wrap: wrap; gap: 12px; }
.vs-pay-system {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 180px;
  min-height: 56px;
  margin: 0;
  padding: 12px 16px;
  background: #FAFAF8;
  border: 2px solid var(--vs-border);
  border-radius: var(--vs-radius-sm);
  cursor: pointer;
  transition: var(--vs-transition);
}
.vs-pay-system input { position: absolute; opacity: 0; pointer-events: none; }
.vs-pay-system__title { font-weight: 600; font-size: 14px; color: var(--vs-text); }
.vs-pay-system:hover { border-color: rgba(255,122,69,.5); background: var(--vs-white); box-shadow: var(--vs-shadow-sm); }
.vs-pay-system:has(input:checked) {
  border-color: var(--vs-primary);
  background: var(--vs-primary-light);
  box-shadow: 0 0 0 3px var(--vs-primary-light);
}
.vs-pay-system:has(input:checked)::after {
  content: "";
  position: absolute; top: 10px; right: 12px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--vs-primary);
}

/* ---- 14.6 История транзакций (history.tpl.php .billing-log) — минимализм ---- */
.billing-log.table { border: none !important; margin: 0 !important; }
.billing-log.table thead th {
  border: none !important;
  border-bottom: 1.5px solid var(--vs-border) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--vs-text-muted) !important;
  padding: 10px 14px !important;
  background: transparent !important;
}
.billing-log.table tbody td {
  border: none !important;
  border-bottom: 1px solid rgba(44, 42, 41, 0.06) !important;
  padding: 13px 14px !important;
  vertical-align: middle;
  background: transparent !important;
  color: var(--vs-text) !important;
}
/* убираем «зебру» и жирные рамки bootstrap */
.billing-log.table.table-striped tbody tr:nth-of-type(odd) td { background: transparent !important; }
.billing-log.table.table-hover tbody tr:hover td { background: var(--vs-bg) !important; }
.billing-log tbody tr:last-child td { border-bottom: none !important; }
/* название операции — аккуратный графитовый текст, без синих bootstrap-ссылок */
.billing-log tbody td a { color: var(--vs-text) !important; font-weight: 500 !important; }
.billing-log tbody td a:hover { color: var(--vs-primary) !important; }
/* суммы: + зелёный, − нейтральный графит (не красный!), 0 приглушённый */
.billing-log .positive { color: var(--vs-success) !important; font-weight: 700 !important; }
.billing-log .negative { color: var(--vs-text) !important; font-weight: 600 !important; }
.billing-log .zero { color: var(--vs-text-muted) !important; }
/* отменённые операции — мягкий янтарный тон вместо резкого bg-warning */
.billing-log tbody tr.bg-warning { background: transparent !important; }
.billing-log tbody tr.bg-warning td { background: rgba(245, 205, 121, 0.14) !important; }

/* ---- 14.7 Страницы результата платежа (success.tpl.php / fail.tpl.php) ---- */
.vs-billing-result {
  max-width: 500px !important;
  margin: 80px auto !important;
  padding: 48px 32px !important;
  text-align: center !important;
  background: var(--vs-white) !important;
  border: 1px solid var(--vs-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--vs-shadow-md) !important;
}
.vs-billing-result h1,
.vs-billing-result .display-4 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  color: #2C2A29 !important;
  margin-bottom: 12px !important;
}
.vs-billing-result .lead,
.vs-billing-result p { color: var(--vs-text-muted) !important; font-size: 16px !important; line-height: 1.5 !important; margin-bottom: 8px; }
.vs-billing-result .status { background: var(--vs-bg) !important; border: none !important; border-radius: var(--vs-radius-sm) !important; margin-top: 18px; text-align: left; }

/* Иконка результата: круг 80x80 + галочка/крестик */
.vs-result-icon { width: 80px; height: 80px; margin: 0 auto 22px; animation: vs-result-pop .35s cubic-bezier(.18,.89,.32,1.28) both; }
.vs-result-icon svg { width: 100%; height: 100%; display: block; }
.vs-result-icon__circle { stroke-width: 2; }
.vs-result-icon__mark { stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.vs-result-icon--ok .vs-result-icon__circle { stroke: #52C41A; fill: #52C41A; }
.vs-result-icon--ok .vs-result-icon__mark { stroke: #ffffff; }
.vs-result-icon--fail .vs-result-icon__circle { stroke: #FF4D4F; fill: #FF4D4F; }
.vs-result-icon--fail .vs-result-icon__mark { stroke: #ffffff; }
@keyframes vs-result-pop { 0% { transform: scale(0.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* ---- Success: кнопка на всю ширину текстового блока ---- */
.vs-billing-result--success .continue,
.vs-billing-result--success .btn-lg {
  width: 100% !important;
  margin-top: 26px !important;
  height: 54px; padding: 0 24px !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px !important; font-weight: 700 !important;
  border-radius: var(--vs-radius-sm) !important;
  background: var(--vs-primary) !important;
  border-color: var(--vs-primary) !important;
  box-shadow: 0 8px 22px rgba(255,122,69,.3) !important;
}
.vs-billing-result--success .continue:hover,
.vs-billing-result--success .btn-lg:hover { background: var(--vs-primary-dark) !important; transform: translateY(-1px); }

/* ---- Fail: две кнопки — «Повторить попытку» (светлый контур) + «Вернуться назад» (коралловая) ---- */
.vs-billing-result__actions {
  display: flex;
  gap: 12px;
  margin-top: 26px !important;
}
.vs-billing-result__actions .btn {
  flex: 1 1 0;
  height: 54px; padding: 0 20px !important;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px !important; font-weight: 700 !important;
  border-radius: var(--vs-radius-sm) !important;
}
.vs-billing-result__actions .vs-btn-retry {
  background: var(--vs-white) !important;
  border: 1.5px solid var(--vs-border) !important;
  color: var(--vs-text) !important;
}
.vs-billing-result__actions .vs-btn-retry:hover {
  border-color: rgba(44,42,41,.25) !important;
  background: var(--vs-bg) !important;
}
.vs-billing-result__actions .continue {
  background: var(--vs-primary) !important;
  border-color: var(--vs-primary) !important;
  color: var(--vs-white) !important;
  box-shadow: 0 8px 22px rgba(255,122,69,.3) !important;
}
.vs-billing-result__actions .continue:hover { background: var(--vs-primary-dark) !important; }
@media (max-width: 480px) {
  .vs-billing-result__actions { flex-direction: column; }
}

/* ---- 14.8 Адаптив billing ---- */
@media (max-width: 767px) {
  .balance-info.balance .card-title > span { font-size: 2.2rem !important; }
  .balance-info.balance .balance-actions .btn { flex: 1 1 100%; }
  .vs-billing-result { margin: 24px auto !important; padding: 32px 22px !important; }
  .pricing-wraper { gap: 20px !important; }
}

/* ==========================================================================
   15. КАРТА / ГЕО — премиальный контейнер интерактивной карты (Яндекс map-widget)
   Реальные цели: .vs-map (обёртка-гаджет), .vs-map__frame (iframe карты).
   Контроллер geo в этой сборке — селектор города (chosen), НЕ карта; карта
   строится из поля `coordinates` (string "lat, lng") на детальной странице.
   ========================================================================== */
.vs-map-section { margin-top: 8px; }
.vs-map-section .vs-item__h { display: flex; align-items: center; gap: 8px; }
.vs-map-section .vs-item__h svg { width: 18px; height: 18px; color: var(--vs-primary); flex: 0 0 auto; }

/* Обёртка-«гаджет»: комфортная высота, скругление, парящая тень, тонкая рамка */
.vs-map {
  position: relative;
  width: 100%;
  height: 480px;
  border-radius: var(--vs-radius-md) !important; /* 16px */
  box-shadow: var(--vs-shadow-sm) !important;
  border: 1px solid var(--vs-border) !important;
  overflow: hidden !important;               /* углы самой карты режутся по контуру рамки */
  background: var(--vs-bg);
  transition: var(--vs-transition);
}
.vs-map:hover { box-shadow: var(--vs-shadow-md) !important; }
.vs-map__frame,
.vs-map iframe {
  display: block;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}

/* ---- 15.1 Гео-селектор города (chosen-дропдауны в модалке #geo_window) ---- */
/* Инпут поиска внутри chosen — как наши формы: h44, r10, мягкий фон, оранж-фокус */
#geo_window .chosen-container .chosen-single,
#geo_window .chosen-container-single .chosen-single {
  height: 44px !important;
  line-height: 44px !important;
  padding: 0 16px !important;
  background: #FAFAF8 !important;
  border: 1.5px solid var(--vs-border) !important;
  border-radius: var(--vs-radius-sm) !important;
  box-shadow: none !important;
  color: var(--vs-text) !important;
  font-family: 'Montserrat', sans-serif !important;
}
#geo_window .chosen-container-active .chosen-single {
  border-color: var(--vs-primary) !important;
  box-shadow: 0 0 0 4px var(--vs-primary-light) !important;
}
#geo_window .chosen-container .chosen-single div b {
  background-position: right center !important;
}
#geo_window .chosen-container .chosen-drop {
  border: 1px solid var(--vs-border) !important;
  border-radius: 0 0 var(--vs-radius-sm) var(--vs-radius-sm) !important;
  box-shadow: var(--vs-shadow-md) !important;
}
#geo_window .chosen-container .chosen-search input {
  height: 40px !important;
  border: 1.5px solid var(--vs-border) !important;
  border-radius: var(--vs-radius-xs) !important;
  font-family: 'Montserrat', sans-serif !important;
}
/* Пункты списка городов — интерактивные, hover оранжевый оттенок */
#geo_window .chosen-container .chosen-results li {
  font-family: 'Montserrat', sans-serif !important;
  padding: 9px 16px !important;
  color: var(--vs-text) !important;
  transition: background .15s ease;
}
#geo_window .chosen-container .chosen-results li.highlighted {
  background: rgba(255, 122, 69, 0.04) !important;
  color: var(--vs-text) !important;
}
#geo_window .chosen-container .chosen-results li.result-selected {
  background: var(--vs-primary-light) !important;
  color: var(--vs-primary-dark) !important;
  font-weight: 600 !important;
}
/* Кнопка «Выбрать» города — фирменная коралловая */
#geo_window .buttons .btn,
#geo_window #select-geo-city {
  height: 44px !important;
  padding: 0 24px !important;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700 !important;
  border-radius: var(--vs-radius-sm) !important;
  background: var(--vs-primary) !important;
  border-color: var(--vs-primary) !important;
  color: var(--vs-white) !important;
}
#geo_window .buttons .btn:hover,
#geo_window #select-geo-city:hover { background: var(--vs-primary-dark) !important; }

/* ---- 15.2 Сводная карта раздела (default_list.tpl.php): чёткое отделение от фильтра и сетки карточек ---- */
.vs-map-list-block {
  margin-bottom: 40px !important;
  padding-top: 4px;
}
.vs-map-list-heading {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: var(--vs-text) !important;
  letter-spacing: -0.2px !important;
  margin: 0 0 16px !important;
}
.vs-map-list-heading::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 22px;
  margin-right: 12px;
  border-radius: 4px;
  background: var(--vs-primary);
}
.vs-map--list {
  box-shadow: var(--vs-shadow-md) !important;
  border-color: rgba(44, 42, 41, 0.12) !important;
}

/* ---- 15.3 Адаптив карты ---- */
@media (max-width: 767px) {
  .vs-map { height: 320px; }
  .vs-map-list-block { margin-bottom: 28px !important; }
  .vs-map-list-heading { font-size: 19px !important; }
}

/* ==========================================================================
   16. МЕССЕНДЖЕР (controllers/messages) — реальный DOM #pm_window/.icms-messages
   Автоподключаемый controllers/messages/styles.css (calc-height, старый треугольный
   «хвостик» пузыря через .content:before, зелёные bg-success_light) — перекрываем.
   Composer использует редактор Imperavi Redactor (JS-генерируемый DOM) — вместо
   гадания по внутренним классам стилизуем НАДЁЖНЫЕ точки: обёртку .editor.editor-*
   (статичная, из шаблона) и [contenteditable="true"] (гарантированный атрибут
   редактируемой области у любой версии редактора).
   Область применения — только полноэкранная страница /messages (не .modal-messages
   попап из шапки — у него уже корректная адаптивная модальная логика, не трогаем).
   ========================================================================== */

/* ---- 16.1 Обёртка — премиальная карточка мессенджера (desktop/tablet, от 768px) ---- */
@media (min-width: 768px) {
  .icms-messages:not(.modal-messages) {
    height: 650px !important;
    background: var(--vs-white) !important;
    border-radius: var(--vs-radius-md) !important;
    box-shadow: var(--vs-shadow-sm) !important;
    border: 1px solid var(--vs-border) !important;
    overflow: hidden !important;
  }
  /* Настоящий двухколоночный UI: список слева, чат справа, ОБА видны одновременно,
     независимо от .d-none, который JS переключает для мобильной drill-down навигации */
  .icms-messages:not(.modal-messages) .layout {
    display: flex !important;
    flex-wrap: nowrap !important;
  }
  .icms-messages:not(.modal-messages) .right-panel,
  .icms-messages:not(.modal-messages) .left-panel {
    display: block !important;
  }
  .icms-messages:not(.modal-messages) .right-panel {
    flex: 0 0 320px;
    max-width: 320px;
    border-right: 1px solid var(--vs-border) !important;
  }
  .icms-messages:not(.modal-messages) .left-panel {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
  }
  /* На десктопе кнопка «‹ назад к списку» внутри диалога не нужна */
  .icms-messages:not(.modal-messages) #contact_toggle { display: none !important; }
}

/* ---- 16.2 Список контактов — аккуратные строки ---- */
.icms-messages__contacts-block { background: var(--vs-white) !important; }
#user_search_panel.pannel-toolbar {
  background: var(--vs-white) !important;
  border-bottom: 1px solid var(--vs-border) !important;
  padding: 12px !important;
}
#user_search_panel input {
  height: 40px !important;
  padding: 0 14px !important;
  background: #FAFAF8 !important;
  border: 1.5px solid var(--vs-border) !important;
  border-radius: var(--vs-radius-sm) !important;
  font-size: 14px !important;
  box-shadow: none !important;
  transition: var(--vs-transition) !important;
}
#user_search_panel input:focus {
  border-color: var(--vs-primary) !important;
  box-shadow: 0 0 0 3px var(--vs-primary-light) !important;
  outline: none !important;
}

.icms-messages__contacts-list.list-group { background: var(--vs-white) !important; }
.icms-messages__contacts-list .contact.list-group-item {
  padding: 12px 16px !important;
  border: none !important;
  border-bottom: 1px solid rgba(44, 42, 41, 0.05) !important;
  background: transparent !important;
  transition: background-color .15s ease;
}
.icms-messages__contacts-list .contact.list-group-item:hover {
  background: rgba(255, 122, 69, 0.04) !important;
}
.icms-messages__contacts-list .contact.list-group-item.active {
  background: var(--vs-primary-light) !important;
  box-shadow: inset 3px 0 0 var(--vs-primary);
}
.icms-messages__contacts-list .contact.list-group-item.active .contact_nickname > span {
  color: var(--vs-primary-dark) !important;
  font-weight: 700 !important;
}

/* Круглые аватары контактов */
.icms-messages__contacts-list .icms-user-avatar {
  width: 44px; height: 44px;
  flex: 0 0 auto;
  display: inline-flex;
}
.icms-messages__contacts-list .icms-user-avatar img,
.icms-messages__contacts-list .icms-user-avatar .icms-profile-avatar__default {
  width: 100%; height: 100%;
  border-radius: 50% !important;
  object-fit: cover;
  display: flex; align-items: center; justify-content: center;
}

.contact_nickname > span {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  color: var(--vs-text) !important;
}
/* Дата последнего сообщения под именем — мелкая, приглушённая (единственная доступная
   в реальной вёрстке «вторая строка» контакта; превью текста сообщения шаблон не выводит) */
.contact_nickname small {
  font-size: 12px !important;
  color: var(--vs-text-muted) !important;
  margin-top: 2px !important;
}
.icms-messages__contacts-list .counter.badge {
  background: var(--vs-primary) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 3px 7px !important;
}

/* ---- 16.3 Диалоговое окно ---- */
.icms-messages-toolbar.pannel-toolbar {
  background: var(--vs-white) !important;
  border-bottom: 1px solid var(--vs-border) !important;
  padding: 10px 16px !important;
}
.icms-messages-toolbar .contact_nickname { font-weight: 700 !important; color: var(--vs-text) !important; }
.icms-messages-toolbar .user_date_log { font-size: 12px !important; color: var(--vs-text-muted) !important; }
.icms-messages-toolbar .icms-user-avatar {
  width: 40px; height: 40px; display: inline-flex;
}
.icms-messages-toolbar .icms-user-avatar img,
.icms-messages-toolbar .icms-user-avatar .icms-profile-avatar__default {
  width: 100%; height: 100%; border-radius: 50% !important; object-fit: cover;
  display: flex; align-items: center; justify-content: center;
}

.icms-messages-chat.bg-gray { background: var(--vs-bg) !important; padding: 16px !important; }
.icms-messages-chat h6 { font-size: 12px !important; color: var(--vs-text-muted) !important; text-transform: uppercase; letter-spacing: .04em; }

/* ---- 16.4 «Пузыри» сообщений — современный чат-баблы, без старого треугольника ---- */
.icms-messages-chat .content:before,
.icms-messages-chat .message-my .content:before {
  content: none !important;
}
.icms-messages-chat .message .content {
  max-width: 72%;
  padding: 9px 14px !important;
  border-radius: 12px 12px 12px 0 !important;   /* входящие: острый нижний левый угол */
  background: #f5f5f5 !important;
  color: var(--vs-text) !important;
  box-shadow: none !important;
}
.icms-messages-chat .message-my .content {
  border-radius: 12px 12px 0 12px !important;   /* исходящие: острый нижний правый угол */
  background: rgba(255, 122, 69, 0.08) !important;
  color: var(--vs-text) !important;
}
/* Имя автора внутри пузыря избыточно в личном диалоге 1:1 — скрываем, оставляем метку времени */
.icms-messages-chat .content .title { justify-content: flex-end !important; }
.icms-messages-chat .content .author { display: none !important; }
.icms-messages-chat .content .date,
.icms-messages-chat .content .date-new {
  font-size: 11px !important;
  color: var(--vs-text-muted) !important;
  font-weight: 400 !important;
  display: inline-flex; align-items: center; gap: 4px;
}
.icms-messages-chat .content .date svg { width: 10px; height: 10px; opacity: .7; }
.icms-messages-chat .content .date-new.highlight_new { color: var(--vs-primary) !important; }
.icms-messages-chat .message_text { font-size: 14.5px !important; line-height: 1.45 !important; margin-top: 2px; }

/* Аватары в диалоге — компактные, у нижнего края пузыря */
.icms-messages-chat .message { align-items: flex-end !important; }
.icms-messages-chat .user_avatar.icms-user-avatar {
  width: 30px; height: 30px; display: inline-flex;
}
.icms-messages-chat .user_avatar.icms-user-avatar img,
.icms-messages-chat .user_avatar.icms-user-avatar .icms-profile-avatar__default {
  width: 100%; height: 100%; border-radius: 50% !important; object-fit: cover;
  display: flex; align-items: center; justify-content: center;
}
.icms-messages-chat .message-my .content.selected { background: var(--vs-primary-light) !important; }

/* ---- 16.5 Форма отправки — скруглённое поле + круглая коралловая кнопка ---- */
.composer { background: var(--vs-white) !important; border-top: 1px solid var(--vs-border) !important; }
.composer .editor {
  background: #FAFAF8 !important;
  border: 1.5px solid var(--vs-border) !important;
  border-radius: 24px !important;
  padding: 8px 16px !important;
  transition: var(--vs-transition) !important;
  overflow: hidden;
}
.composer .editor:focus-within {
  border-color: var(--vs-primary) !important;
  box-shadow: 0 0 0 3px var(--vs-primary-light) !important;
  background: var(--vs-white) !important;
}
/* Надёжные точки таргетинга редактора: textarea-фолбэк и любой contenteditable */
.composer .editor textarea,
.composer .editor [contenteditable="true"] {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14.5px !important;
  min-height: 22px !important;
  padding: 4px 0 !important;
}
.composer .buttons { padding: 0 2px !important; }
.composer .ctrenter_hint { font-size: 11px !important; }

/* Круглая коралловая кнопка «Отправить» с иконкой */
#pm-send-btn.btn {
  width: 44px; height: 44px;
  padding: 0 !important;
  border-radius: 50% !important;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--vs-primary) !important;
  border-color: var(--vs-primary) !important;
  box-shadow: 0 6px 16px rgba(255, 122, 69, 0.32) !important;
  transition: var(--vs-transition) !important;
}
#pm-send-btn.btn:hover { background: var(--vs-primary-dark) !important; transform: translateY(-1px); }
/* DOM: <button><span><svg/>Отправить</span></button> — текст лежит рядом с svg как text-node.
   font-size:0 на обёртке схлопывает текст до нуля, у svg свои explicit px-размеры — виден только значок. */
#pm-send-btn.btn span {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0 !important;
}
#pm-send-btn.btn svg { width: 17px; height: 17px; color: var(--vs-white) !important; margin: 0 !important; }

/* ---- 16.6 Адаптив мессенджера ---- */
@media (max-width: 767px) {
  .icms-messages .icms-messages-chat .message .content { max-width: 84%; }
}

/* ==========================================================================
   17. ДОРАБОТКИ ПО ТЗ — рекламный баннер, футер-галерея, «Поделиться»,
       форма подписки, защитные стили форума
   --------------------------------------------------------------------------
   Раскладка темы (header/footer) собирается из БД (cms_layout_rows/cols),
   поэтому баннер/галерея/форма вынесены в HTML-виджеты на позиции:
   баннер → con_header (ряд во всю ширину под меню, все стр.);
   галерея → pos_11 (левый столбец футера); форма → pos_32 (правый столбец).
   ========================================================================== */

/* ---- 17.1 Рекламный баннер под шапкой — см. секцию 21.6 (.vs-banner-card) ---- */

/* ---- 17.2 Фотогалерея в футере (.vs-footer-gallery) --------------------- */
.vs-footer-gallery__title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--vs-text-muted) !important;
  margin: 0 0 12px;
}
.vs-footer-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.vs-footer-gallery a { display: block; line-height: 0; }
.vs-footer-gallery img {
  height: 80px;
  width: auto;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--vs-border);
  transition: var(--vs-transition);
}
.vs-footer-gallery a:hover img {
  transform: translateY(-2px);
  box-shadow: var(--vs-shadow-sm);
  border-color: var(--vs-primary);
}

/* ---- 17.3 Кнопки «Поделиться» (.vs-share-buttons) ----------------------- */
.vs-share-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 4px;
}
.vs-share-buttons__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--vs-text-muted);
  margin-right: 2px;
}
.vs-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 40px;
  padding: 0 15px;
  border-radius: var(--vs-radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none !important;
  border: 1.5px solid var(--vs-border);
  background: var(--vs-white);
  color: var(--vs-text) !important;
  cursor: pointer;
  transition: var(--vs-transition);
}
.vs-share-btn svg { width: 16px; height: 16px; flex: 0 0 auto; fill: currentColor; }
.vs-share-btn:hover {
  border-color: var(--vs-primary);
  color: var(--vs-primary-dark) !important;
  box-shadow: var(--vs-shadow-xs);
  transform: translateY(-1px);
}
/* Лёгкий бренд-акцент иконок при наведении */
.vs-share-btn--vk:hover { color: #2787F5 !important; border-color: #2787F5; }
.vs-share-btn--ok:hover { color: #EE8208 !important; border-color: #EE8208; }
.vs-share-btn--tg:hover { color: #29A9EB !important; border-color: #29A9EB; }
@media (max-width: 575px) {
  .vs-share-btn { padding: 0 12px; font-size: 0; gap: 0; }  /* на узких — только иконки */
  .vs-share-btn svg { width: 18px; height: 18px; }
  .vs-share-buttons__label { font-size: 13px; }
}

/* ---- 17.4 Форма подписки на рассылку (.vs-newsletter-form) --------------- */
.vs-newsletter { max-width: 420px; }
.vs-newsletter__title {
  font-size: 15px;
  font-weight: 800;
  color: var(--vs-text) !important;
  margin: 0 0 4px;
}
.vs-newsletter__sub {
  font-size: 13px;
  color: var(--vs-text-muted) !important;
  margin: 0 0 12px;
  line-height: 1.4;
}
.vs-newsletter-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.vs-newsletter-form input[type="email"] {
  flex: 1 1 180px;
  min-width: 0;
  height: 44px;
  padding: 0 16px;
  border: 1.5px solid var(--vs-border);
  border-radius: 10px;
  background: var(--vs-white);
  font-size: 14px;
  color: var(--vs-text);
  transition: var(--vs-transition);
}
.vs-newsletter-form input[type="email"]:focus {
  border-color: var(--vs-primary);
  box-shadow: 0 0 0 3px var(--vs-primary-light);
  outline: none;
}
.vs-newsletter-form button {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 20px;
  border: none;
  border-radius: 10px;
  background: var(--vs-primary);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--vs-transition);
}
.vs-newsletter-form button:hover {
  background: var(--vs-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(255, 122, 69, 0.32);
}
.vs-newsletter-form.is-busy { opacity: .65; pointer-events: none; }
.vs-newsletter__msg {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.4;
  display: none;
}
.vs-newsletter__msg.is-ok  { color: var(--vs-success); display: block; }
.vs-newsletter__msg.is-err { color: #FF4D4F; display: block; }

/* ---- 17.5 Форум (защитные переопределения) ------------------------------
   ВНИМАНИЕ: компонент форума в системе НЕ установлен (нет контроллера forum,
   нет таблиц cms_forum*). Блок ниже инертен и добавлен на будущее: если форум
   будет установлен, его таблицы/кнопки сразу унаследуют наш UI-кит вместо
   стоковых Bootstrap-рамок. */
.forum_table,
table.forum_table {
  border: none !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--vs-white) !important;
  border-radius: var(--vs-radius-md) !important;
  box-shadow: var(--vs-shadow-sm) !important;
  overflow: hidden !important;
}
.forum_table th,
.forum_table td {
  border: none !important;
  border-bottom: 1px solid var(--vs-border) !important;
  padding: 14px 16px !important;
  vertical-align: middle !important;
}
.forum_table thead th {
  background: var(--vs-bg) !important;
  font-weight: 700 !important;
  color: var(--vs-text) !important;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .03em;
}
.forum_table tr:last-child td { border-bottom: none !important; }
.forum_table tbody tr:hover td { background: rgba(255, 122, 69, 0.04) !important; }
.forum_topic {
  border: 1px solid var(--vs-border) !important;
  border-radius: var(--vs-radius-md) !important;
  background: var(--vs-white) !important;
  box-shadow: var(--vs-shadow-xs) !important;
  padding: 18px 20px !important;
  margin-bottom: 14px !important;
}
/* Кнопки создания тем/ответов — в стиле UI-кита (оранжевые) */
.forum_new_topic,
.forum_add_topic,
a.forum-add-topic,
.btn-forum-new {
  background: var(--vs-primary) !important;
  border-color: var(--vs-primary) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: var(--vs-radius-sm) !important;
  padding: 10px 22px !important;
  box-shadow: 0 6px 16px rgba(255, 122, 69, 0.28) !important;
  transition: var(--vs-transition) !important;
}
.forum_new_topic:hover,
.forum_add_topic:hover,
a.forum-add-topic:hover,
.btn-forum-new:hover { background: var(--vs-primary-dark) !important; transform: translateY(-1px); }

/* ==========================================================================
   18. ГАЛЕРЕЯ ФОТО (Зооавито и др.) — поле type=images (множественная загрузка)
   --------------------------------------------------------------------------
   Движок (slick-слайдер, lightbox) уже подключается самим полем через
   templates/default/assets/fields/images_view.tpl.php — здесь только визуал.
   Форма добавления/редактирования (.widget_image_multi) уже стилизована
   в секции 13, здесь — только вывод готовой галереи на странице записи.
   ========================================================================== */
.vs-gallery-section { margin-top: 4px; }
.vs-item__gallery a { display: inline-block; padding: 0 4px; }
.vs-item__gallery img.img-thumbnail {
  height: 160px;
  width: auto;
  max-width: none;
  object-fit: cover;
  border-radius: var(--vs-radius-sm) !important;
  border: 1px solid var(--vs-border) !important;
  padding: 0 !important;
  box-shadow: var(--vs-shadow-xs);
  transition: var(--vs-transition);
}
.vs-item__gallery a:hover img.img-thumbnail {
  box-shadow: var(--vs-shadow-sm);
  transform: translateY(-2px);
}
/* Точки пагинации slick — под брендовый акцент */
.vs-item__gallery .slick-dots { position: static; margin-top: 10px; }
.vs-item__gallery .slick-dots li button:before { font-size: 8px; color: var(--vs-border); opacity: 1; }
.vs-item__gallery .slick-dots li.slick-active button:before { color: var(--vs-primary); }
@media (max-width: 575px) {
  .vs-item__gallery img.img-thumbnail { height: 120px; }
}

/* ==========================================================================
   19. ФОРУМ (нативный компонент forum) — интеграция в дизайн vetsovet
   --------------------------------------------------------------------------
   Компонент грузит собственный templates/default/controllers/forum/styles.css
   (стоковая СИНЯЯ тема #008cba/#2980b9, бордюрные таблицы). vetsovet.css грузится
   позже в каскаде → перекрываем через !important (проверенный подход billing/messages).
   Классы: index → .category-table/.category; раздел → .threads-table/.thread_view;
   тема → .posts-table/.post/.post-content-cell/.post-user-cell.
   ========================================================================== */

/* ---- 19.0 Заголовок форума + служебные элементы (RSS, «Действия», вкладки) ----
   .forum_rss_icon предшествует <h1> ТОЛЬКО в шаблонах forum (index.tpl.php,
   category_view.tpl.php) — безопасный якорь, не задевает другие страницы сайта,
   у которых <h1> лежит в других обёртках (.icms-body-toolbox либо вовсе без обёртки,
   но без .forum_rss_icon перед ним). */
.forum_rss_icon ~ h1 {
  display: flex !important;
  align-items: center !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.2px !important;
  color: var(--vs-text) !important;
  margin: 6px 0 4px !important;
}
.forum_rss_icon ~ h1::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 24px;
  margin-right: 12px;
  border-radius: 4px;
  background: var(--vs-primary);
}
/* RSS-ссылки: были голым текстом «темы»/«сообщения», плавающим у breadcrumbs —
   даём каждой вид маленькой чип-кнопки, чтобы не выглядело обрывком верстки */
.forum_rss_icon {
  float: right !important;
  display: flex !important;
  gap: 8px !important;
  margin: 2px 0 0 !important;
}
.forum_rss_icon .rss_icon {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--vs-text-muted) !important;
  padding: 6px 12px !important;
  background: var(--vs-bg) !important;
  border-radius: var(--vs-radius-xs) !important;
  transition: var(--vs-transition) !important;
}
.forum_rss_icon .rss_icon:hover { color: var(--vs-primary-dark) !important; background: var(--vs-primary-light) !important; }

/* Вкладки «Все / Удалённые темы» (content_datasets) — были стоковым Bootstrap-синим,
   единственное синее пятно на полностью оранжевом сайте */
.dataset-pills .nav-link {
  border-radius: var(--vs-radius-sm) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--vs-text-muted) !important;
  padding: 8px 16px !important;
  transition: var(--vs-transition) !important;
}
.dataset-pills .nav-link:hover { background: var(--vs-primary-light) !important; color: var(--vs-primary-dark) !important; }
.dataset-pills .nav-link.active {
  background: var(--vs-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(255, 122, 69, 0.24) !important;
}

/* Панель «Действия» (addToolButton) — сайт-вайд служебный дропдаун для админов,
   виден и на форуме (настройки раздела/темы); был голым bootstrap-серым баром */
.cp_toolbar {
  background: var(--vs-white) !important;
  border: 1px solid var(--vs-border) !important;
  border-radius: var(--vs-radius-sm) !important;
  box-shadow: var(--vs-shadow-xs) !important;
  padding: 3px !important;
}
.cp_toolbar .nav-link {
  color: var(--vs-text-muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: var(--vs-radius-xs) !important;
  padding: 6px 12px !important;
}
.cp_toolbar .nav-link:hover { background: var(--vs-primary-light) !important; color: var(--vs-primary-dark) !important; }
.cp_toolbar .dropdown-menu {
  border-radius: var(--vs-radius-sm) !important;
  border: 1px solid var(--vs-border) !important;
  box-shadow: var(--vs-shadow-md) !important;
}

/* ---- 19.1 Индекс форума: таблица разделов ---- */
.category-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--vs-white) !important;
  border-radius: var(--vs-radius-md) !important;
  box-shadow: var(--vs-shadow-sm) !important;
  overflow: hidden !important;
  border: 1px solid var(--vs-border) !important;
  margin: 6px 0 44px !important; /* отступ до следующего виджета (Зооавито/Ветклиники) */
  clear: both;
}
/* Шапка таблицы: синяя → графитовая с оранжевым не кричим, делаем нейтрально-тёплой */
.category-table-header tr {
  background: var(--vs-bg) !important;
  color: var(--vs-text) !important;
  font-weight: 700 !important;
  height: auto !important;
  text-transform: uppercase;
  font-size: 11.5px !important;
  letter-spacing: .03em;
}
.category-table-header td {
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--vs-border) !important;
  color: var(--vs-text-muted) !important;
}
/* Ряд-раздел */
.category td { padding: 18px 20px !important; }
.category-ceil,
.threads-count,
.posts-count,
.last-post {
  border-right: none !important;
  border-bottom: 1px solid var(--vs-border) !important;
  border-left: none !important;
  vertical-align: middle !important;
}
.category:last-child .category-ceil,
.category:last-child .threads-count,
.category:last-child .posts-count,
.category:last-child .last-post { border-bottom: none !important; }
.category:hover td { background: rgba(255, 122, 69, 0.035) !important; }
/* Warm-зебра вместо холодного стокового #f5f5f5 — под палитру --vs-bg */
.category-table .odd { background: var(--vs-bg) !important; }
.category-table .odd:hover td { background: rgba(255, 122, 69, 0.05) !important; }
/* ⚠️ .is_first_parent триггерится на ВСЕХ разделах первого уровня (level==1) —
   в плоской структуре форума (без вложенных подфорумов) это НОРМА, а не «заголовок
   группы», поэтому НЕ красим фоном — иначе все строки сливаются в одинаковую заливку.
   Тонированную «папку» оставляем только настоящему as_folder (colspan=4, редкий кейс
   вложенных подфорумов) — у него другая структура строки, визуально это оправдано. */
.category.category-as-folder {
  background: var(--vs-primary-light) !important;
  border: none !important;
}
.category.category-as-folder a { color: var(--vs-primary-dark) !important; font-weight: 700 !important; }

/* Иконка раздела: были голой жёлтой SVG-заглушкой вплотную к тексту (float:left,
   без карточки) — заворачиваем в компактный округлый бейдж на брендовой подложке,
   как .vs-item__row-ic по всему сайту.
   ⚠️ .category-title и .category-description — ДВА ОТДЕЛЬНЫХ соседних <div> внутри
   .category-ceil (не один блок с текстом!). display:flex на .category-ceil расставлял
   их в ОДИН РЯД с иконкой (а не «иконка слева, заголовок+описание в столбик справа»),
   отсюда наезд текста друг на друга. Правильно: иконка — position:absolute, а место под
   неё резервируем через padding-left на самом .category-ceil — тогда title/description
   остаются обычными block-элементами и естественно идут друг под другом. */
.category .category-ceil {
  position: relative !important;
  padding-left: 76px !important;
  min-height: 46px;
}
.category-icon {
  position: absolute !important;
  left: 20px !important;
  top: 0 !important;
  float: none !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: var(--vs-radius-sm) !important;
  background: var(--vs-primary-light) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.category-icon a { display: flex !important; align-items: center; justify-content: center; width: 100%; height: 100%; }
.category-icon img { width: 22px !important; height: 22px !important; border-radius: var(--vs-radius-xs) !important; }
.category-icon.default_icon a { width: 20px !important; height: 20px !important; background-size: contain !important; background-position: center !important; opacity: .5 !important; }
.category-title, .category-description { margin-left: 0 !important; }
/* Заголовок раздела + описание */
.category-title a {
  font-size: 15.5px !important;
  font-weight: 700 !important;
  color: var(--vs-text) !important;
  transition: color .15s;
}
.category-title a:hover { color: var(--vs-primary) !important; }
.category-description { font-size: 13px !important; color: var(--vs-text-muted) !important; margin-top: 3px; }
.threads-count, .posts-count { text-align: center !important; font-weight: 700 !important; color: var(--vs-text) !important; }
.last-post-date { font-size: 12px !important; color: var(--vs-text-muted) !important; }
.last-post-user a, .last-post-thread a { color: var(--vs-primary-dark) !important; }

/* ---- 19.2 Кнопка «Новая тема» и кнопки форума → оранжевый UI-кит ---- */
.new_thread_button a,
a.new_thread_button,
.button-poll-result {
  display: inline-flex !important;
  align-items: center; gap: 7px;
  background: var(--vs-primary) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: var(--vs-radius-sm) !important;
  padding: 11px 22px !important;
  box-shadow: 0 6px 16px rgba(255, 122, 69, 0.28) !important;
  transition: var(--vs-transition) !important;
  text-decoration: none !important;
}
.new_thread_button a:hover,
a.new_thread_button:hover,
.button-poll-result:hover {
  background: var(--vs-primary-dark) !important;
  transform: translateY(-1px);
}

/* ---- 19.3 Раздел форума: список тем ---- */
.threads-table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: var(--vs-white) !important;
  border: 1px solid var(--vs-border) !important;
  border-radius: var(--vs-radius-md) !important;
  overflow: hidden !important;
  box-shadow: var(--vs-shadow-sm) !important;
  width: 100%;
  margin: 6px 0 44px !important;
  clear: both;
}
.threads-table .odd { background: var(--vs-bg) !important; }
.threads-table-header {
  background: var(--vs-bg) !important;
  color: var(--vs-text-muted) !important;
  text-transform: uppercase;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: .03em;
}
.threads-table-header td { padding: 12px 14px !important; border-bottom: 1px solid var(--vs-border) !important; }
.thread_view td { padding: 14px !important; border-bottom: 1px solid var(--vs-border) !important; vertical-align: middle !important; }
.thread_view:hover td { background: rgba(255, 122, 69, 0.035) !important; }
.thread-link a, a.thread-link {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--vs-text) !important;
}
.thread-link a:hover { color: var(--vs-primary) !important; }
.thread-link.is_new_thread a, .is_new_thread .thread-link { color: var(--vs-primary-dark) !important; }
.thread-preview, .thread-desc { font-size: 12.5px !important; color: var(--vs-text-muted) !important; }
.thread-info-avatar img, .thread-info .avatar img {
  border-radius: 50% !important; width: 32px; height: 32px; object-fit: cover;
}
.threads-table-stats-count { font-weight: 700 !important; color: var(--vs-text) !important; }
.thread-icon-new, .thread-icon-gotonewpost { color: var(--vs-primary) !important; }
.not-threads, .not_threads {
  background: var(--vs-white) !important;
  border: 1px dashed var(--vs-border) !important;
  border-radius: var(--vs-radius-md) !important;
  color: var(--vs-text-muted) !important;
  padding: 32px !important; text-align: center;
}

/* ---- 19.4 Тема форума: посты ---- */
.posts-table {
  border-collapse: separate !important;
  border-spacing: 0 0 16px 0 !important;
  width: 100%;
  margin: 6px 0 44px !important;
}
.posts-table-header {
  background: var(--vs-bg) !important;
  color: var(--vs-text-muted) !important;
  padding: 10px 14px !important;
}
.post {
  background: var(--vs-white) !important;
  border: 1px solid var(--vs-border) !important;
  border-radius: var(--vs-radius-md) !important;
  box-shadow: var(--vs-shadow-xs) !important;
  overflow: hidden;
  margin-bottom: 16px !important;
}
.post-is-new { border-color: var(--vs-primary) !important; box-shadow: 0 0 0 2px var(--vs-primary-light) !important; }
/* Левая колонка автора */
.post-user-cell, .post-user-cell-mobile {
  background: var(--vs-bg) !important;
  border-right: 1px solid var(--vs-border) !important;
  padding: 16px !important;
  vertical-align: top;
}
.post-user-avatar img, .post-user-avatar-mobile img {
  border-radius: 50% !important; object-fit: cover;
  border: 2px solid var(--vs-white);
  box-shadow: var(--vs-shadow-xs);
}
.post-user-link, .post-user-link-mobile { font-weight: 700 !important; color: var(--vs-text) !important; }
.post-user-link a { color: var(--vs-text) !important; }
.post-user-groups-title, .post-user-group {
  font-size: 11px !important; color: var(--vs-text-muted) !important;
}
.post-user-signature { font-size: 12px !important; color: var(--vs-text-muted) !important; border-top: 1px dashed var(--vs-border); margin-top: 10px; padding-top: 8px; }
/* Тело поста */
.post-content-cell, .post-content-cell-mobile { padding: 16px 18px !important; vertical-align: top; }
.post-content { font-size: 14.5px !important; line-height: 1.6 !important; color: var(--vs-text) !important; }
.post-date, .post-edit-date { font-size: 12px !important; color: var(--vs-text-muted) !important; }
.post-links a { color: var(--vs-text-muted) !important; transition: color .15s; }
.post-links a:hover { color: var(--vs-primary) !important; }
.post-is-pinned { color: var(--vs-primary) !important; }
/* Цитаты */
.post-content blockquote {
  border-left: 3px solid var(--vs-primary) !important;
  background: var(--vs-primary-light) !important;
  border-radius: 0 var(--vs-radius-sm) var(--vs-radius-sm) 0 !important;
  padding: 10px 14px !important;
  margin: 8px 0 !important;
}
.post-content blockquote .blockquote-footer { color: var(--vs-primary-dark) !important; }

/* ---- 19.5 Пагинация форума ---- */
.pagebar { margin: 20px 0 !important; }
.pagebar a, .pagebar span {
  border-radius: var(--vs-radius-xs) !important;
  border-color: var(--vs-border) !important;
}
.pagebar .current, .pagebar a:hover {
  background: var(--vs-primary) !important;
  border-color: var(--vs-primary) !important;
  color: #fff !important;
}

/* ---- 19.6 Форма создания темы / ответа ---- */
.forum-posts-list textarea,
.thread_add textarea,
#thread_add textarea,
.fast-content-edit-form textarea {
  border: 1.5px solid var(--vs-border) !important;
  border-radius: var(--vs-radius-sm) !important;
}
.forum-posts-list textarea:focus,
.fast-content-edit-form textarea:focus {
  border-color: var(--vs-primary) !important;
  box-shadow: 0 0 0 3px var(--vs-primary-light) !important;
}

/* ---- 19.7 Адаптив форума ---- */
@media (max-width: 767px) {
  .category-table-header, .threads-table-header { display: none !important; }
  .category td, .thread_view td { padding: 12px !important; }
  .category-ceil { gap: 10px !important; }
  .category-icon { flex: 0 0 36px !important; width: 36px !important; height: 36px !important; }
  .category-icon img { width: 18px !important; height: 18px !important; }
  .category-table, .threads-table, .posts-table { margin-bottom: 28px !important; }
  .forum_rss_icon { float: none !important; margin: 0 0 10px !important; }
  .post-user-cell { border-right: none !important; border-bottom: 1px solid var(--vs-border) !important; }
}

/* ==========================================================================
   20. СОГЛАСОВАНИЕ ВЫПАДАЮЩИХ МЕНЮ + ЛИЧНЫЙ КАБИНЕТ В ШАПКЕ (по скринам юзера)
   ========================================================================== */

/* ---- 20.1 Bootstrap .dropdown-item — глобально НИГДЕ не был стилизован ----
   Стоковый Bootstrap :hover/:focus/.active красит строку синим ($primary=#007bff),
   а первый пункт списка ПОЛУЧАЕТ :focus автоматически при открытии дропдауна —
   поэтому синяя строка была видна в КАЖДОМ выпадающем меню сайта (главное меню
   «Всё о животных»/«Каталог»/«О сайте», личный кабинет «Мой профиль/Создать/Выйти»),
   не только там, где её заметили. Правим один раз — чинится всё сразу. */
.dropdown-item {
  padding: 10px 18px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--vs-text) !important;
  background: transparent !important;
  transition: var(--vs-transition) !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--vs-primary-light) !important;
  color: var(--vs-primary-dark) !important;
}
.dropdown-item.active,
.dropdown-item:active {
  background: var(--vs-primary) !important;
  color: #fff !important;
}
.dropdown-menu { padding: 6px !important; }
.dropdown-menu .nav-item + .nav-item { margin-top: 2px; }

/* ---- 20.2 Личный кабинет в шапке (bell/письма/аватар/ник) ----
   Стоковый .icms-user-menu{background:rgba(0,0,0,.05)} + .icms-user-menu__nickname.text-white
   были рассчитаны на ТЁМНУЮ шапку исходной темы. Шапка перекрашена в белую (секция 5)
   ещё раньше, а этот конкретный узел тогда не тронули — в итоге белый текст ника
   на почти-белой (5% чёрного) капсуле читался как невнятное светлое пятно. */
.icms-user-menu {
  background: var(--vs-bg) !important;
  border-radius: 50px !important;
  transition: var(--vs-transition) !important;
}
.icms-user-menu:hover { background: var(--vs-primary-light) !important; }
.icms-user-menu__summary { padding: 5px 14px 5px 5px !important; }
.icms-user-menu__nickname,
.icms-user-menu__nickname.text-white {
  color: var(--vs-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.icms-user-menu:hover .icms-user-menu__nickname { color: var(--vs-primary-dark) !important; }
.icms-user-menu .icms-profile-avatar__default {
  background: var(--vs-primary) !important;
  color: #fff !important;
}
/* ⚠️ Меню открывается по HOVER (стоковое правило theme.css:
   `.icms-user-menu:hover > .dropdown-menu{display:block; margin:0}` — margin:0
   НЕ случайно, это защита от разрыва hover-а). margin-top ЗДЕСЬ создаёт
   мёртвую зону между аватар-пилюлей и списком — курсор теряет :hover,
   пока едет вниз, и меню закрывается раньше, чем до него долетаешь
   (баг, пойманный юзером: работает только если открыть КЛИКОМ — тогда
   Bootstrap держит .show независимо от мыши). Отступ переносим ВНУТРЬ
   через padding-top — он остаётся частью hover-зоны самого меню. */
.icms-user-menu__items { margin-top: 0 !important; padding-top: 8px !important; }
/* Колокольчик/письма слева от аватара — иконки уже currentColor от .icms-header__middle a,
   добавляем только аккуратный hover-фон вместо бесцветного клика */
.menu-notices .nav-item > .nav-link {
  border-radius: 50% !important;
  width: 38px; height: 38px;
  display: inline-flex !important; align-items: center; justify-content: center;
  transition: var(--vs-transition) !important;
}
.menu-notices .nav-item > .nav-link:hover { background: var(--vs-bg) !important; color: var(--vs-primary) !important; }

/* ---- 20.3 Пустые списки (.alert-info.alert-list-empty) — были стоковым голубым ----
   Используется в default_list/tiles/table/featured, albums, groups, форуме. */
.alert-list-empty,
.alert-info {
  background: var(--vs-bg) !important;
  border: 1px dashed var(--vs-border) !important;
  color: var(--vs-text-muted) !important;
  padding: 16px 20px !important;
}

/* ==========================================================================
   21. Правки по видео-фидбеку клиента (2026-07-05)
   ========================================================================== */

/* ---- 21.1 Логотип + цитата в шапке ---- */
.vs-header-logo {
  width: 40px !important; height: 40px !important;
  border-radius: 50% !important; object-fit: cover !important;
  margin-right: 10px !important; flex-shrink: 0;
}
.vs-header-quote {
  font-style: italic !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  color: #8A8580 !important;
  border-left: 1px solid var(--vs-border) !important;
  padding-left: 14px !important;
  margin-left: 14px !important;
  max-width: 280px;
  line-height: 1.35 !important;
}

/* ---- 21.2 Фото пород в каталоге — без обрезки (только ctype "catalog") ----
   Базовое правило .vs-item__hero img (cover) остаётся дефолтом для
   vetclinics/shelters/petshops/zooavito/novosti/sovety — не трогаем. */
.catalog_item .vs-item__hero img {
  object-fit: contain !important;
  background: #f1ede8 !important;
}

/* ---- 21.3 Карточка «Мы ВКонтакте» в подвале ----
   Блок той же весовой категории, что соседняя «Подписка на рассылку».
   ВАЖНО про кнопку: селектор scoped через .icms-footer__bottom (спец. 0,2,0),
   чтобы перебить моё же правило .icms-footer__bottom a{color:muted !important}
   (спец. 0,1,1) — именно оно красило текст кнопки серым (белый не применялся
   из-за проигрыша по специфичности, а не из-за оттенка фона). */
.vs-vk-card { max-width: 420px; margin: 0 0 20px; }
.vs-vk-card__title {
  font-size: 15px; font-weight: 800;
  color: var(--vs-text) !important; margin: 0 0 4px;
}
.vs-vk-card__sub {
  font-size: 13px; color: var(--vs-text-muted) !important;
  margin: 0 0 12px; line-height: 1.4;
}
.icms-footer__bottom .vs-vk-card__btn {
  display: inline-flex !important; align-items: center; gap: 8px;
  height: 44px; padding: 0 22px;
  border-radius: 10px !important;
  background: #1E6FD1 !important; color: #fff !important;
  font-weight: 700 !important; font-size: 14px !important;
  text-decoration: none !important; white-space: nowrap;
  transition: background .2s, transform .2s, box-shadow .2s !important;
}
.icms-footer__bottom .vs-vk-card__btn:hover {
  background: #15559F !important; color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(30, 111, 209, 0.32) !important;
}
.vs-vk-card__btn svg { width: 18px; height: 18px; fill: currentColor !important; flex-shrink: 0; }

/* Футер: колонки по ВЕРХУ. Стоковый .row.align-items-center центрировал
   короткую правую колонку («Подписка») по вертикали относительно высокой
   левой (VK-карточка + галерея + копирайт) → «Подписка» болталась посередине,
   выглядело «поехавшим». flex-start выравнивает заголовки обеих колонок. */
.icms-footer__bottom .row { align-items: flex-start !important; }

/* ---- 21.4 Кликабельный заголовок сквозного виджета («Объявления Зооавито») ----
   title у некоторых bind содержит <a> (для перехода в полный раздел) —
   убираем стандартное подчёркивание, наследуем графитовый цвет заголовка,
   на hover — фирменный коралловый (как везде в проекте). */
.icms-widget.card > h3.card-header a,
.icms-widget.card > h2.card-header a {
  color: inherit !important;
  text-decoration: none !important;
}
.icms-widget.card > h3.card-header a:hover,
.icms-widget.card > h2.card-header a:hover {
  color: var(--vs-primary) !important;
}

/* ---- 21.5 Фотогалерея футера — теперь лайтбокс, не переход на /vetclinics ----
   Курсор явно показывает, что клик открывает просмотр, а не уводит со страницы. */
.vs-footer-gallery a { cursor: zoom-in; }

/* ---- 21.6 Рекламный баннер под шапкой — «Текстовый блок» (WYSIWYG) ----
   Раньше был ручной HTML (.vs-top-banner-area/.vs-banner-promo, правился только
   кодом) — заменён на редактируемый через обычный визуальный редактор виджет,
   чтобы клиент сам мог менять текст/картинку без знания HTML.
   ВАЖНО про DOM: у bind 92 tpl_wrap='' → рендерится голым `<div class="vs-banner-card">`
   БЕЗ обёрток `.icms-widget.card`/`.card-body` (в отличие от стандартных виджетов).
   Поэтому целимся прямо в `.vs-banner-card`, а не в `.icms-widget.card.vs-banner-card`.
   Все свойства ВНУТРИ .widget_text_block, чтобы держать вид под ЛЮБОЙ контент,
   что впишет клиент через редактор (заголовок/текст/картинка/кнопка). */
.vs-banner-card {
  max-width: 1200px !important;
  width: calc(100% - 30px) !important;
  margin: 18px auto 4px !important;
  padding: 20px 24px !important;
  background: var(--vs-white) !important;
  border: 1px solid var(--vs-border) !important;
  border-radius: var(--vs-radius-md) !important;
  box-shadow: var(--vs-shadow-xs) !important;
}
.vs-banner-card .widget_text_block { overflow: hidden; } /* clearfix для float-картинки */
.vs-banner-card .widget_text_block > *:last-child { margin-bottom: 0 !important; }
/* Картинка: обтекается текстом слева, жёстко ограничена по размеру (что бы клиент
   ни загрузил — вписывается в формат блока, не «великовата») */
.vs-banner-card .widget_text_block img {
  float: left;
  width: 280px !important; max-width: 42% !important; height: auto !important;
  margin: 4px 22px 8px 0 !important;
  border-radius: var(--vs-radius-sm) !important;
}
/* Картинка часто завёрнута редактором в <p> — у такого абзаца убираем нижний отступ */
.vs-banner-card .widget_text_block p:has(> img:only-child) { margin: 0 !important; }
.vs-banner-card .widget_text_block h1,
.vs-banner-card .widget_text_block h2,
.vs-banner-card .widget_text_block h3 {
  font-size: 20px !important; font-weight: 800 !important;
  color: var(--vs-text) !important; margin: 0 0 8px !important; line-height: 1.25 !important;
}
.vs-banner-card .widget_text_block p {
  font-size: 14px !important; color: var(--vs-text-muted) !important;
  margin: 0 0 12px !important; line-height: 1.5 !important;
}
/* Кнопка «Смотреть каталог»: и явный a.btn, и позиционный фолбэк (ссылка в
   последнем абзаце) — переживёт, если клиент случайно снесёт класс в редакторе */
.vs-banner-card .widget_text_block a.btn,
.vs-banner-card .widget_text_block p:last-child > a:only-child {
  display: inline-flex !important; align-items: center !important;
  background: var(--vs-primary) !important; color: #fff !important;
  font-weight: 700 !important; font-size: 14px !important; text-decoration: none !important;
  padding: 10px 24px !important; border-radius: var(--vs-radius-sm) !important;
  transition: var(--vs-transition) !important;
}
.vs-banner-card .widget_text_block a.btn:hover,
.vs-banner-card .widget_text_block p:last-child > a:only-child:hover {
  background: var(--vs-primary-dark) !important; color: #fff !important;
  transform: translateY(-1px);
}
/* Прочие инлайновые ссылки (если появятся) — просто коралловый текст */
.vs-banner-card .widget_text_block a:not(.btn) { color: var(--vs-primary) !important; }
@media (max-width: 640px) {
  .vs-banner-card .widget_text_block img {
    float: none !important; display: block !important;
    width: 100% !important; max-width: 100% !important; margin: 0 auto 14px !important;
  }
}

/* ==========================================================================
   22. Инструмент выбора координат в форме добавления/редактирования
   (.vs-geo-picker) — поиск адреса + клик по карте, поле #coordinates
   у ветклиник/приютов/зоомагазинов (item_form.tpl.php)
   ========================================================================== */
.vs-geo-picker { margin-top: 10px; position: relative; }
.vs-geo-picker__search {
  width: 100%; height: 44px; padding: 0 16px;
  border: 1.5px solid var(--vs-border); border-radius: var(--vs-radius-sm);
  font-size: 14px; color: var(--vs-text); margin-bottom: 8px;
  transition: var(--vs-transition);
}
.vs-geo-picker__search:focus {
  border-color: var(--vs-primary); outline: none;
  box-shadow: 0 0 0 3px var(--vs-primary-light);
}
.vs-geo-picker__suggest {
  display: none;
  position: absolute; left: 0; right: 0; top: 44px; z-index: 30;
  background: var(--vs-white); border: 1px solid var(--vs-border);
  border-radius: var(--vs-radius-sm); box-shadow: var(--vs-shadow-sm);
  overflow: hidden; margin-top: -4px;
}
.vs-geo-picker__suggest-item {
  padding: 10px 16px; font-size: 14px; color: var(--vs-text);
  cursor: pointer; border-bottom: 1px solid var(--vs-border);
}
.vs-geo-picker__suggest-item:last-child { border-bottom: none; }
.vs-geo-picker__suggest-item:hover { background: var(--vs-bg); color: var(--vs-primary); }
.vs-geo-picker__map {
  width: 100%; height: 320px;
  border-radius: var(--vs-radius-sm); border: 1px solid var(--vs-border);
  overflow: hidden;
}
.vs-geo-picker__hint {
  font-size: 12px; color: var(--vs-text-muted); margin: 8px 0 0; line-height: 1.4;
}