/**
 * ─────────────────────────────────────────────
 *  СТИЛИ ПЛАГИНА SEO AI for WooCommerce
 * ─────────────────────────────────────────────
 *
 *  Базовые стили — нейтральные, без конкретных
 *  цветов и размеров. Все кастомные значения
 *  задаются динамически через WordPress inline style API
 *  из настроек плагина.
 *
 *  Анимация: через max-height transition (JS).
 *  line-clamp — CSS-fallback для no-JS.
 * ─────────────────────────────────────────────
 */

/* ─── Обёртка ──────────────────────────────── */
.scatseo-wrapper {
  position: relative;
  margin-bottom: 20px;
  /* Убирает микро-сдвиг страницы (~5–10px) в Chrome при смене высоты блока после раскрытия */
  overflow-anchor: none;
}

/* После initToggle (.scatseo-js): flex + gap вместо margin у кнопки — иначе схлопывание margin
   с последним блоком в описании даёт «подпрыгивание» кнопки на 5–10px при смене overflow/max-height */
.scatseo-wrapper.scatseo-js {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.scatseo-wrapper.scatseo-js .scatseo-btn-wrap {
  margin-top: 0 !important;
}

/* ─── Контент описания ─────────────────────── */
.scatseo-content {
  position: relative;
  overflow: hidden;
}

/* ─── CSS-fallback (до загрузки JS) ────────── */
.scatseo-content.scatseo-collapsed {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  isolation: isolate;
  /* -webkit-line-clamp задаётся из PHP */
}

/* ─── Когда JS взял управление ─────────────── */
/* JS добавляет .scatseo-js на wrapper — это отключает  
   line-clamp и переключает контроль на max-height */
.scatseo-wrapper.scatseo-js .scatseo-content {
  display: block !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}

/* ─── Градиент — скрыт в развёрнутом виде ─── */
.scatseo-content.scatseo-expanded::after {
  display: none !important;
}

/* ─── Обёртка кнопки (для выравнивания) ────── */
.scatseo-btn-wrap {
  margin-top: 8px;
  /* text-align задаётся inline из PHP */
  /* изоляция от схлопывания с нижним отступом контента */
  display: flow-root;
}

/* ─── Кнопка ──────────────────────────────── */
.scatseo-toggle {
  display: inline-block;
  cursor: pointer;
  line-height: 1.4;
  text-decoration: none;
  /* color, background, border, padding, font —
       всё задаётся динамически из настроек */
}

.scatseo-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.scatseo-toggle:focus:not(:focus-visible) {
  outline: none;
}

/* Кнопка скрыта (текст короткий) */
.scatseo-toggle.scatseo-hidden {
  display: none !important;
}

/* ─── Мобильная адаптация ──────────────────── */
@media (max-width: 768px) {
  .scatseo-wrapper {
    margin-bottom: 15px;
  }
}