/* ==========================================================================
   Раздел «Поддержка» (/support/) — SSR.
   Блоки: быстрые действия (чат-бот + звонок роботу), FAQ-аккордеон,
   форма обратной связи. Использует MD3-токены из tokens.css.
   Правки — здесь (не в app.css, он генерится build_css.sh).
   ========================================================================== */

.support {
  max-width: var(--content-max-width, 960px);
  margin: 0 auto;
  padding-bottom: 48px;
}

.support__header {
  margin: 8px 0 20px;
}

.support__lead {
  color: var(--md-sys-color-on-surface-variant);
  font-size: 15px;
  line-height: 1.5;
  margin: 6px 0 0;
  max-width: 640px;
}

/* --- 4 варианта помощи: карточки (паритет с mobile support_screen.dart) ---
   Вертикальный список: цветная иконка-плашка слева + заголовок + подзаголовок
   + шеврон, вся карточка кликабельна. Accent через локальную переменную
   `--accent` (per-card) — тон-плашка = 14% accent (как `withValues(alpha:.14)`
   во Flutter). Цвета вертикалей взяты из Flutter AppColors (нет в tokens.css,
   как и post-sheet__icon--* в components.css). */
.support-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}

.support-option {
  --accent: var(--md-sys-color-primary);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: 20px;
  background: var(--md-sys-color-surface-container-lowest, #fff);
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  width: 100%;
  font: inherit;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.support-option:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
  transform: translateY(-1px);
  border-color: var(--accent);
}
.support-option[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* Accent-цвета вариантов — 1:1 с mobile_app AppColors. */
.support-option--bot      { --accent: var(--md-sys-color-primary); } /* primary green #1B743E */
.support-option--call     { --accent: #3A6EA5; }  /* AppColors.verticalMilk — молочно-синий */
.support-option--faq      { --accent: #7A5EA8; }  /* AppColors.verticalServices — ветеринарный фиолет */
.support-option--feedback { --accent: #E29B00; }  /* AppColors.warning — янтарный */

.support-option__icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}
.support-option__icon svg { width: 26px; height: 26px; display: block; }

.support-option__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.support-option__title { font-weight: 700; font-size: 16px; }
.support-option__desc {
  font-size: 13px;
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.35;
}

.support-option__chevron {
  flex: 0 0 auto;
  color: var(--md-sys-color-on-surface-variant);
  opacity: .7;
}
.support-option__chevron svg { width: 22px; height: 22px; display: block; }

/* --- Блок 3: FAQ-аккордеон ---------------------------------------------- */
.support-faq { margin-bottom: 36px; scroll-margin-top: 80px; }
.support-faq__heading,
.support-feedback__heading {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 16px;
}

.support-faq__group { margin-bottom: 20px; }
.support-faq__group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--md-sys-color-primary);
  margin: 0 0 8px;
}
.support-faq__group-icon svg { width: 20px; height: 20px; }

.support-faq__item {
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium, 12px);
  margin-bottom: 8px;
  background: var(--md-sys-color-surface-container-lowest, #fff);
  overflow: hidden;
}
.support-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  font-weight: 500;
  list-style: none;
  user-select: none;
}
.support-faq__q::-webkit-details-marker { display: none; }
.support-faq__q-text { flex: 1 1 auto; }
.support-faq__chevron {
  flex: 0 0 auto;
  color: var(--md-sys-color-on-surface-variant);
  transition: transform .2s ease;
}
.support-faq__chevron svg { width: 22px; height: 22px; display: block; }
.support-faq__item[open] .support-faq__chevron { transform: rotate(180deg); }

.support-faq__a {
  padding: 0 16px 16px;
  color: var(--md-sys-color-on-surface-variant);
  line-height: 1.6;
  font-size: 14px;
}
.support-faq__a p:first-child { margin-top: 0; }
.support-faq__a a { color: var(--md-sys-color-primary); }
.support-faq__empty { color: var(--md-sys-color-on-surface-variant); }

/* --- Блок 4: форма обратной связи --------------------------------------- */
.support-feedback {
  border-top: 1px solid var(--md-sys-color-outline-variant);
  padding-top: 28px;
  scroll-margin-top: 80px;
}
.support-form { display: flex; flex-direction: column; gap: 18px; max-width: 620px; }
.support-form__field { display: flex; flex-direction: column; gap: 6px; }
.support-form__label { font-size: 14px; font-weight: 600; }
.support-form__optional { font-weight: 400; color: var(--md-sys-color-on-surface-variant); }
.support-form__req { color: var(--md-sys-color-error, #b3261e); }

.support-form__control {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--md-sys-color-outline, #79747e);
  border-radius: var(--md-sys-shape-corner-small, 8px);
  background: var(--md-sys-color-surface, #fff);
  color: var(--md-sys-color-on-surface);
  font: inherit;
  box-sizing: border-box;
}
.support-form__control:focus {
  outline: none;
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 0 0 2px var(--md-sys-color-primary-container, #cdeccd);
}
.support-form__textarea { resize: vertical; min-height: 120px; }

.support-form__charcount {
  align-self: flex-end;
  font-size: 12px;
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 4px;
}
.support-form__charcount--limit { color: var(--md-sys-color-error, #b3261e); font-weight: 600; }

.support-form__error {
  font-size: 13px;
  color: var(--md-sys-color-error, #b3261e);
}
.support-form__submit { align-self: flex-start; }
.support-form__submit svg { width: 20px; height: 20px; }

.support-feedback__gate {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--md-sys-color-on-surface-variant);
}

/* --- Адаптив ------------------------------------------------------------ */
/* Карточки уже одноколоночный вертикальный список — как на mobile.
   На узких экранах чуть ужимаем внутренние отступы. */
@media (max-width: 480px) {
  .support-option { padding: 14px; gap: 12px; }
  .support-option__icon { width: 44px; height: 44px; }
}