/* cr26-form · cr26-lead — формы заявок и окно заявки.
   Раскладка формы зависит от ширины её контейнера (container queries), а не экрана:
   одна и та же форма живёт в окне, колонке подвала, первом экране и на всю ширину страницы. */

/* ── cr26-form ───────────────────────────────────────────── */
.cr26-form {
  container-type: inline-size;
  box-sizing: border-box;
  width: 100%;
  padding: 0;
  background: var(--cr26-color-ground);
  color: var(--cr26-color-ink);
  font: 500 16px/1.45 var(--cr26-font);
  text-align: left;
}
.cr26-form *, .cr26-form *::before, .cr26-form *::after { box-sizing: border-box; }
/* Старые стили (style.css, fresh-styles.css) задают span/label/p свой шрифт, цвет и overflow — внутри формы наследуем от блока */
.cr26-form span { color: inherit; font: inherit; letter-spacing: inherit; text-transform: none; }
.cr26-form label, .cr26-form p { overflow: visible; }
.cr26-form--bare { background: none; }
.cr26-form--surface { background: var(--cr26-color-surface); }

.cr26-form__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "title" "text" "fields" "consent" "submit" "note" "status";
  gap: 16px;
  margin: 0;
  padding: 24px;
}
.cr26-form__body[hidden], .cr26-form__done[hidden] { display: none; }

.cr26-form__title {
  grid-area: title;
  margin: 0;
  padding: 0;
  color: var(--cr26-color-ink);
  font: 800 24px/1.15 var(--cr26-font);
  letter-spacing: -.02em;
  text-align: left;
  text-transform: none;
}
.cr26-form__text { grid-area: text; margin: -4px 0 0; padding: 0; color: var(--cr26-color-ink); font: 500 16px/1.45 var(--cr26-font); text-align: left; }

.cr26-form__fields { grid-area: fields; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

/* Поле с плавающей подписью */
.cr26-form__field { position: relative; margin: 0; padding: 0; }
.cr26-form .cr26-form__input {
  display: block;
  width: 100%;
  height: 60px;
  margin: 0;
  padding: 24px 48px 8px 16px;
  border: 2px solid #cfcfca;
  border-radius: var(--cr26-radius-sm);
  background: var(--cr26-color-ground);
  color: var(--cr26-color-ink);
  font: 600 18px/1.4 var(--cr26-font);
  letter-spacing: 0;
  box-shadow: none; /* taste-skill-ignore: сброс тени старого style.css */
  outline: 0;
  resize: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--cr26-dur) var(--cr26-ease), background-color var(--cr26-dur) var(--cr26-ease);
}
.cr26-form .cr26-form__input--area { height: auto; min-height: 96px; padding-top: 28px; line-height: 1.45; }
.cr26-form .cr26-form__input:hover { border-color: #a9a9a3; }
.cr26-form .cr26-form__input:focus { border-color: var(--cr26-color-ink); outline: 3px solid rgba(251, 175, 0, .55); outline-offset: 0; }
.cr26-form__input:focus-visible { outline-offset: 0; }

.cr26-form .cr26-form__label {
  position: absolute;
  top: 19px;
  left: 18px;
  right: 48px;
  display: block;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--cr26-color-muted);
  font: 500 16px/1.3 var(--cr26-font);
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  transform-origin: 0 0;
  transition: transform var(--cr26-dur) var(--cr26-ease), color var(--cr26-dur) var(--cr26-ease);
}
.cr26-form__input:focus + .cr26-form__label,
.cr26-form__input:not(:placeholder-shown) + .cr26-form__label { transform: translateY(-11px) scale(.76); }
.cr26-form__input:focus + .cr26-form__label { color: var(--cr26-color-ink); }

/* Отметка правильного ввода */
.cr26-form__ok {
  position: absolute;
  top: 18px;
  right: 16px;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #1f8a3a;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  opacity: 0;
  pointer-events: none;
  transition: stroke-dashoffset 260ms var(--cr26-ease), opacity 120ms var(--cr26-ease);
}
.cr26-form__field--valid .cr26-form__ok { stroke-dashoffset: 0; opacity: 1; }
.cr26-form__field--valid .cr26-form__input { border-color: #1f8a3a; }

/* Ошибка */
.cr26-form__error { margin: 0; padding: 0; color: #b42318; font: 500 15px/1.35 var(--cr26-font); text-align: left; }
.cr26-form__error:empty { display: none; }
.cr26-form__field .cr26-form__error { margin-top: 6px; }
.cr26-form__field--error .cr26-form__input { border-color: #b42318; background: #fff8f7; }
.cr26-form__field--error .cr26-form__label { color: #b42318; }
.cr26-form__field--error { animation: cr26-form-shake 280ms var(--cr26-ease); }
@keyframes cr26-form-shake {
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Куда прислать ответ: Telegram / MAX / звонок */
.cr26-form .cr26-form__channels { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.cr26-form .cr26-form__legend { width: 100%; margin: 0 0 4px; padding: 0; color: var(--cr26-color-muted); font: 500 14px/1.3 var(--cr26-font); }
.cr26-form .cr26-form__chip { position: relative; display: block; margin: 0; cursor: pointer; }
.cr26-form .cr26-form__chip-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cr26-form__chip-text { display: inline-flex; align-items: center; height: 44px; padding: 0 16px; border: 2px solid #cfcfca; border-radius: var(--cr26-radius-sm); background: var(--cr26-color-ground); font-weight: 600; transition: border-color var(--cr26-dur) var(--cr26-ease), background-color var(--cr26-dur) var(--cr26-ease), color var(--cr26-dur) var(--cr26-ease); }
.cr26-form__chip-input:hover + .cr26-form__chip-text { border-color: var(--cr26-color-ink); }
.cr26-form__chip-input:checked + .cr26-form__chip-text { border-color: var(--cr26-color-ink); background: var(--cr26-color-ink); color: #fff; }
.cr26-form__chip-input:focus-visible + .cr26-form__chip-text { outline: 3px solid var(--cr26-color-accent); outline-offset: 2px; }

/* Согласие (152-ФЗ): отметка обязательна, по умолчанию снята */
.cr26-form__consent-wrap { grid-area: consent; }
.cr26-form .cr26-form__consent {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  padding: 0;
  color: var(--cr26-color-muted);
  font: 500 14px/1.45 var(--cr26-font);
  cursor: pointer;
}
.cr26-form .cr26-form__check {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.cr26-form__box {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 2px solid #a9a9a3;
  border-radius: 6px;
  background: var(--cr26-color-ground);
  transition: background-color var(--cr26-dur) var(--cr26-ease), border-color var(--cr26-dur) var(--cr26-ease);
}
.cr26-form__box svg { width: 18px; height: 18px; fill: none; stroke: var(--cr26-color-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset 200ms var(--cr26-ease); }
.cr26-form__check:checked + .cr26-form__box { border-color: var(--cr26-color-accent); background: var(--cr26-color-accent); }
.cr26-form__check:checked + .cr26-form__box svg { stroke-dashoffset: 0; }
.cr26-form__check:hover + .cr26-form__box { border-color: var(--cr26-color-ink); }
.cr26-form__check:focus-visible + .cr26-form__box { outline: 3px solid var(--cr26-color-accent); outline-offset: 2px; }
.cr26-form__field--error .cr26-form__box { border-color: #b42318; }
.cr26-form__consent-wrap .cr26-form__error { margin: 6px 0 0 36px; }
.cr26-form__link { color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cr26-form__link:hover { color: var(--cr26-color-ink); }

/* Кнопка */
.cr26-form .cr26-form__submit { grid-area: submit; position: relative; width: 100%; height: 60px; border-radius: var(--cr26-radius-sm); }
.cr26-form__spinner {
  display: none;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(20, 20, 20, .25);
  border-top-color: var(--cr26-color-ink);
  border-radius: 50%;
  animation: cr26-form-spin 700ms linear infinite;
}
.cr26-form__body--sending .cr26-form__spinner { display: block; }
.cr26-form__body--sending .cr26-form__submit { cursor: progress; }
.cr26-form__submit:disabled { opacity: 1; }
@keyframes cr26-form-spin { to { transform: rotate(360deg); } }

.cr26-form__note { grid-area: note; margin: -4px 0 0; padding: 0; color: var(--cr26-color-muted); font: 500 14px/1.45 var(--cr26-font); text-align: left; }
.cr26-form__status { grid-area: status; margin: 0; padding: 0; color: #b42318; font: 600 16px/1.4 var(--cr26-font); text-align: left; }
.cr26-form__status:empty { display: none; }
.cr26-form__status a { color: inherit; }

/* Ловушка для ботов: вне экрана, не для людей и скринридеров */
.cr26-form__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* taste-skill-ignore: скрытая ловушка, не линия */

/* Заявка отправлена */
.cr26-form__done { display: grid; justify-items: start; gap: 12px; padding: 24px; outline: 0; }
.cr26-form__done > * { grid-area: auto; }
.cr26-form__done-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--cr26-color-accent);
  animation: cr26-form-pop 360ms var(--cr26-ease);
}
.cr26-form__done-icon svg { width: 34px; height: 34px; fill: none; stroke: var(--cr26-color-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@keyframes cr26-form-pop { from { transform: scale(.6); opacity: 0; } }

/* Узкая колонка (первый экран старых страниц на 960–1199): плотнее */
@container (max-width: 300px) {
  .cr26-form__body, .cr26-form__done { padding: 20px 16px; }
  .cr26-form__title { font-size: 22px; }
}
/* Ширина контейнера ≥ 480: крупнее заголовок, телефон и имя в строку */
@container (min-width: 480px) {
  .cr26-form__title { font-size: 32px; }
  .cr26-form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr26-form__field--comment { grid-column: 1 / -1; }
}
/* ≥ 820: поля и кнопка в одну строку */
@container (min-width: 820px) {
  .cr26-form__body {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "title title" "text text" "fields submit" "consent consent" "note note" "status status";
    column-gap: 12px;
  }
  .cr26-form .cr26-form__submit { align-self: start; width: auto; padding: 0 32px; }
}

@container (min-width: 560px) {
  .cr26-form__body, .cr26-form__done { padding: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .cr26-form__field--error, .cr26-form__done-icon { animation: none; }
}

/* ── cr26-lead (окно заявки) ─────────────────────────────── */
/* До 640 — выезжает снизу на всю ширину, с 640 — по центру */
.cr26-lead {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  max-height: calc(100dvh - 24px);
  margin: auto 0 0;
  padding: 0;
  border: 0;
  background: var(--cr26-color-ground);
  color: var(--cr26-color-ink);
  font-family: var(--cr26-font);
  box-shadow: 0 32px 80px rgba(20, 20, 20, .3); /* taste-skill-ignore: диалоговое окно */
}
.cr26-lead::backdrop { background: rgba(20, 20, 20, .6); }
.cr26-lead[open] { animation: cr26-lead-up 240ms var(--cr26-ease); }
@keyframes cr26-lead-up { from { transform: translateY(24px); opacity: 0; } }
.cr26-lead__in { position: relative; padding: 24px var(--cr26-gutter) 28px; }
.cr26-lead__close { position: absolute; top: 12px; right: 12px; z-index: 1; }
.cr26-lead .cr26-form__title { padding-right: 56px; }
.cr26-lead .cr26-form__done { padding-right: 56px; }

@media (min-width: 640px) {
  .cr26-lead { width: calc(100% - 2 * var(--cr26-gutter)); max-width: 560px; max-height: calc(100% - 48px); margin: auto; }
  .cr26-lead__in { padding: 40px; }
  .cr26-lead__close { top: 16px; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .cr26-lead[open] { animation: none; }
}

/* Без карточки (окно заявки, «Написать нам»): отступы задаёт обёртка */
.cr26-form--bare .cr26-form__body, .cr26-form--bare .cr26-form__done { padding: 0; }