/* ============================================================
   КОМПОНЕНТЫ: кнопки, карточки, чипы, табы, слайдер, формы
   Глубина — поверхностью и границей, теней нет (§6.3)
   ============================================================ */

/* ------------------------------------------------------------
   КНОПКИ. Тач-цель ≥44px, текст на красном — белый (§6.1)
   ------------------------------------------------------------ */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--f-head);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--d-base) var(--e-out),
    border-color var(--d-base) var(--e-out),
    color var(--d-base) var(--e-out);
}
.btn svg { width: 19px; height: 19px; flex-shrink: 0; }

.btn--primary { background: var(--c-accent); color: #fff; }
.btn--primary:hover { background: var(--c-accent-hi); }

.btn--ghost {
  border-color: var(--c-line-strong);
  color: var(--c-text);
  background: transparent;
}
.btn--ghost:hover { border-color: var(--c-text-dim); background: var(--c-surface); }

.btn--light { background: var(--c-text); color: #14171B; }
.btn--light:hover { background: #fff; }

.btn--tg { background: #229ED9; color: #fff; }
.btn--tg:hover { background: #2AAEE9; }

.btn--wide { width: 100%; }
.btn--sm { min-height: 38px; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-xs); }
.btn--lg { min-height: 54px; padding: var(--sp-4) var(--sp-7); font-size: 1.0625rem; }

/* Компактная кнопка Telegram в шапке (§8.1, точка 1) */
.btn-tg-head {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  color: var(--c-text-dim);
  transition: border-color var(--d-base) var(--e-out), color var(--d-base) var(--e-out);
}
.btn-tg-head svg { width: 17px; height: 17px; color: #229ED9; }
.btn-tg-head:hover { border-color: #229ED9; color: var(--c-text); }
@media (min-width: 1024px) { .btn-tg-head { display: inline-flex; } }

/* Текстовая ссылка со стрелкой */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--c-text);
}
.link-arrow svg {
  width: 18px; height: 18px;
  color: var(--c-accent);
  transition: transform var(--d-base) var(--e-out);
}
.link-arrow:hover svg { transform: translateX(4px); }

/* ------------------------------------------------------------
   ЧИПЫ / ФИЛЬТРЫ
   ------------------------------------------------------------ */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 38px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-text-dim);
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color var(--d-base) var(--e-out),
    color var(--d-base) var(--e-out),
    background-color var(--d-base) var(--e-out);
}
.chip:hover { border-color: var(--c-line-strong); color: var(--c-text); }
.chip[aria-pressed='true'],
.chip.is-active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}

/* ------------------------------------------------------------
   БЕЙДЖ-МЕТКА (заглушки контента, статусы)
   ------------------------------------------------------------ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 3px var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--c-accent-soft);
  border: 1px solid var(--c-accent-line);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-accent-hi);
}
.badge--neutral {
  background: transparent;
  border-color: var(--c-line);
  color: var(--c-text-mute);
}

/* ------------------------------------------------------------
   КАРТОЧКА-ПОВЕРХНОСТЬ
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   МЕДИА-ЗАГЛУШКА
   Фото объектов ещё нет (§9, п.4). Вместо пустоты — техническая
   штриховка: выглядит намеренно, сразу заменяется на <img>.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   ГОРИЗОНТАЛЬНАЯ ЛЕНТА (отзывы, новости на узких экранах)
   ------------------------------------------------------------ */

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(268px, 82vw);
  gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  padding-bottom: var(--sp-4);
  scrollbar-width: thin;
  scrollbar-color: var(--c-line-strong) transparent;
}
.rail > * { scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 4px; }
.rail::-webkit-scrollbar-track { background: var(--c-line); border-radius: 2px; }
.rail::-webkit-scrollbar-thumb { background: var(--c-line-strong); border-radius: 2px; }

@media (min-width: 720px) {
  .rail { grid-auto-columns: minmax(340px, 46%); }
}
@media (min-width: 1100px) {
  .rail { grid-auto-columns: minmax(380px, 33%); }
}

.rail-nav { display: flex; gap: var(--sp-2); }
.rail-btn {
  display: grid;
  place-items: center;
  width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  color: var(--c-text-dim);
  transition: border-color var(--d-base) var(--e-out), color var(--d-base) var(--e-out);
}
.rail-btn svg { width: 20px; height: 20px; }
.rail-btn:hover:not(:disabled) { border-color: var(--c-line-strong); color: var(--c-text); }
.rail-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ------------------------------------------------------------
   ФОРМА
   ------------------------------------------------------------ */

.field { display: grid; gap: var(--sp-2); }
.field__label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--c-text-dim);
}
.field__label .req { color: var(--c-accent); }

.input, .textarea, .select {
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  color: var(--c-text);
  font-size: 1rem;                    /* 16px: iOS не зумит поле */
  transition: border-color var(--d-base) var(--e-out);
}
.input::placeholder, .textarea::placeholder { color: var(--c-text-mute); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--c-line-strong); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  border-color: var(--c-accent);
  outline-offset: 1px;
}
.textarea { min-height: 108px; resize: vertical; }

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--c-text-dim);
  cursor: pointer;
}
.check input {
  appearance: none;
  width: 20px; height: 20px;
  margin-top: 1px;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--r-sm);
  background: var(--c-bg);
  cursor: pointer;
  transition: background-color var(--d-fast) var(--e-out), border-color var(--d-fast) var(--e-out);
}
.check input:checked {
  background: var(--c-accent);
  border-color: var(--c-accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12.5 9.5 17.5 19.5 6.5'/%3E%3C/svg%3E");
  background-size: 15px;
  background-position: center;
  background-repeat: no-repeat;
}
.check a { text-decoration: underline; text-underline-offset: 2px; color: var(--c-text); }

/* Ловушка для ботов (§7): скрыта и от глаз, и от скринридеров */
.hp {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------------------------------------
   ТАБЛИЦА ХАРАКТЕРИСТИК — со внутренним скроллом на мобильном (§7)
   ------------------------------------------------------------ */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  -webkit-overflow-scrolling: touch;
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}
.table th, .table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--c-line);
}
.table tr:last-child th, .table tr:last-child td { border-bottom: 0; }
.table th { color: var(--c-text-dim); font-weight: 500; }
.table td { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ⚠️ У .chip не был задан шрифт, а это <button> — браузер подставлял свой
   системный. Рядом у .catbar__reset стоит font: inherit, поэтому «Сбросить»
   шла шрифтом сайта, а кнопки признаков — нет. Отсюда разнобой, который
   заметил заказчик 02.09.2026. */
.chip {
  font-family: inherit;
  font-size: var(--fs-xs);
  line-height: 1.2;
}