/* Компоненты. Кнопка — строго по systems/cosmetics-b2b/components/button.md, цвета и размеры — из токенов --button-*. */

/* ---------- Button ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  height: var(--button-size-md-height);
  padding-inline: var(--button-size-md-padding-x);
  border: var(--button-border-width) solid transparent;
  border-radius: var(--button-radius);
  font-family: var(--font-family-body);
  font-weight: var(--font-weight-body-strong); /* подпись md, lg, xl — Body/Strong, жирная 16 (button.md) */
  font-size: var(--font-size-body-md);
  line-height: var(--font-line-height-body);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duration-base) var(--easing-standard), color var(--duration-base) var(--easing-standard);
}

.btn--sm { height: var(--button-size-sm-height); padding-inline: var(--button-size-sm-padding-x); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-body); }
.btn--md { height: var(--button-size-md-height); padding-inline: var(--button-size-md-padding-x); }
.btn--lg { height: var(--button-size-lg-height); padding-inline: var(--button-size-lg-padding-x); }
.btn--xl { height: var(--button-size-xl-height); padding-inline: var(--button-size-xl-padding-x); }
.btn--block { width: 100%; }

/* Значок в кнопке: размер по размеру кнопки (button.md) */
.btn .icon { width: var(--button-size-md-icon); height: var(--button-size-md-icon); }
.btn--sm .icon { width: var(--button-size-sm-icon); height: var(--button-size-sm-icon); }
.btn--lg .icon { width: var(--button-size-lg-icon); height: var(--button-size-lg-icon); }
.btn--xl .icon { width: var(--button-size-xl-icon); height: var(--button-size-xl-icon); }

/* Кнопка только со значком (меню): квадрат высотой с кнопку xl. Подпись — в aria-label */
.btn.btn--icon { width: var(--button-size-xl-height); height: var(--button-size-xl-height); padding-inline: 0; }
.btn.btn--icon .icon { width: var(--button-size-xl-icon); height: var(--button-size-xl-icon); }

.btn--primary { background: var(--button-primary-bg-default); color: var(--button-primary-text-default); }
.btn--primary:hover { background: var(--button-primary-bg-hover); color: var(--button-primary-text-hover); }
.btn--primary:active { background: var(--button-primary-bg-pressed); color: var(--button-primary-text-pressed); }

.btn--secondary { background: var(--button-secondary-bg-default); color: var(--button-secondary-text-default); border-color: var(--button-secondary-border-default); }
.btn--secondary:hover { background: var(--button-secondary-bg-hover); color: var(--button-secondary-text-hover); }
.btn--secondary:active { background: var(--button-secondary-bg-pressed); color: var(--button-secondary-text-pressed); }

.btn--soft { background: var(--button-soft-bg-default); color: var(--button-soft-text-default); border-color: var(--button-soft-border-default); }
.btn--soft:hover { background: var(--button-soft-bg-hover); color: var(--button-soft-text-hover); }
.btn--soft:active { background: var(--button-soft-bg-pressed); color: var(--button-soft-text-pressed); }

.btn--ghost { background: transparent; color: var(--button-ghost-text-default); }
.btn--ghost:hover { background: var(--button-ghost-bg-hover); }
.btn--ghost:active { background: var(--button-ghost-bg-pressed); color: var(--button-ghost-text-pressed); }

.btn--danger { background: var(--button-danger-bg-default); color: var(--button-danger-text-default); }
.btn--danger:hover { background: var(--button-danger-bg-hover); color: var(--button-danger-text-hover); }
.btn--danger:active { background: var(--button-danger-bg-pressed); color: var(--button-danger-text-pressed); }

.btn:focus-visible {
  outline: var(--button-focus-width) solid var(--button-focus-ring);
  outline-offset: var(--button-focus-width);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  background: var(--color-bg-muted);
  color: var(--color-text-disabled);
  border-color: transparent;
  cursor: default;
}

/* ---------- Иконка-маска: форма из файла, цвет — из currentColor ---------- */
.icon {
  display: inline-block;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

/* ---------- Точка-индикатор: круг, цвет из currentColor ---------- */
.dot {
  display: inline-block;
  flex-shrink: 0;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: 50%;
  background: currentColor;
}

/* Инверсия: тёмный фон и светлый текст на светлой теме, наоборот на тёмной */
.inverse {
  background: var(--color-bg-inverse);
  color: var(--color-text-on-inverse);
}

/* ---------- Плашка-фильтр каталога ---------- */
.filter {
  padding: var(--space-8) var(--space-24);
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--radius-button);
  background: var(--color-bg-default);
  color: var(--color-text-default);
  transition: background var(--duration-base) var(--easing-standard), color var(--duration-base) var(--easing-standard);
}

.filter:hover {
  background: var(--color-bg-brand);
}

.filter[aria-pressed="true"] {
  background: var(--color-bg-primary);
  border-color: var(--color-bg-primary);
  color: var(--color-text-on-primary);
}

.filter:focus-visible {
  outline: var(--border-width-focus) solid var(--color-focus-ring);
  outline-offset: var(--border-width-focus);
}

/* ---------- Блок с реакцией на наведение: тень shadow.lg ---------- */
.hover-card {
  transition: box-shadow var(--duration-base) var(--easing-standard);
}

.hover-card:hover {
  box-shadow: var(--shadow-lg);
}

/* ---------- Поле ввода (по полю в подвале Figma, 24162:969): высота как у кнопки md ---------- */
.field {
  height: var(--size-control-md);
  padding-block: 0;
  padding-inline: var(--space-16);
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--radius-button);
  background: var(--color-bg-muted);
  color: var(--color-text-default);
  font-family: var(--font-family-body);
}

.field::placeholder {
  color: var(--color-text-secondary);
}

.field:focus-visible {
  outline: var(--border-width-focus) solid var(--color-focus-ring);
  outline-offset: var(--border-width-focus);
}

/* Поле формы-заявки (Figma 24109:712): выше подвального, отступы 16 и 24 */
.field--form {
  height: auto;
  padding: var(--space-16) var(--space-24);
  background: var(--color-bg-default);
}

/* ---------- Плашка выбора (радио-кнопка в виде плашки): Figma 24109:712 ---------- */
.choices { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-8); }
.choices--wide { gap: var(--space-16); }

.choice { position: relative; display: block; cursor: pointer; }

.choice input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  color: var(--color-text-default);
  cursor: pointer;
}

.choice span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) 0;
  border: var(--border-width-default) solid var(--color-border-default);
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--color-text-default);
  transition: background var(--duration-base) var(--easing-standard), color var(--duration-base) var(--easing-standard);
}

.choice:hover input:not(:checked) + span { background: var(--color-bg-brand); }

.choice input:checked + span { background: var(--color-bg-primary); color: var(--color-text-on-primary); }
.choices--inverse .choice input:checked + span { background: var(--color-bg-inverse); color: var(--color-text-on-inverse); }

.choice input:focus-visible + span {
  outline: var(--border-width-focus) solid var(--color-focus-ring);
  outline-offset: var(--border-width-focus);
}

/* ---------- Раскрывающиеся вопросы (accordion): открыт один, js/main.js ----------
   Раскрытие: высота через grid-template-rows 0fr → 1fr, плавно; кривая и время — по скиллу Ковальски (эффект «войти на экран»: ease-out, до 300 мс),
   время берём токеном duration.base (200 мс). Скрытый ответ не читается программами чтения (visibility). */
.accordion { display: flex; flex-direction: column; }

.accordion__item { padding-bottom: var(--space-24); border-bottom: var(--border-width-default) solid var(--color-border-default); }

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-40);
  padding: var(--space-24) var(--space-16) 0;
  text-align: left;
}

.accordion__trigger:focus-visible {
  outline: var(--border-width-focus) solid var(--color-focus-ring);
  outline-offset: calc(var(--border-width-focus) * -1);
}

.accordion__trigger .icon { width: var(--size-icon-lg); height: var(--size-icon-lg); }
.accordion__trigger[aria-expanded="true"] .icon--plus { --icon: url("../assets/icon-minus.svg"); }

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition: grid-template-rows var(--duration-base) cubic-bezier(0.23, 1, 0.32, 1), visibility 0s linear var(--duration-base); /* ds-allow: кривая ease-out из скилла emil-design-eng */
}

.accordion__item:has(.accordion__trigger[aria-expanded="true"]) .accordion__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition: grid-template-rows var(--duration-base) cubic-bezier(0.23, 1, 0.32, 1), visibility 0s; /* ds-allow: кривая ease-out из скилла emil-design-eng */
}

.accordion__inner { min-height: 0; overflow: hidden; }

.accordion__slot {
  margin: var(--space-16) var(--space-16) 0;
  padding: var(--space-16) var(--space-24);
  opacity: 0;
  transition: opacity var(--duration-base) var(--easing-standard);
}

.accordion__item:has(.accordion__trigger[aria-expanded="true"]) .accordion__slot { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .accordion__panel { transition: none; }
}