/* Модуль form (tshop_3) — общие стили вариантов default, columns3 и виджета.
 * Ручки дизайнера стилей на корне блока (.idblock-N):
 *   --form-card-bg / --form-card-pad / --form-card-radius — карточка формы
 *   --field-h, --field-radius, --field-bg, --field-border, --field-text — поля ввода
 *   --form-gap — расстояние между полями;  --title-size, --title-color — заголовок
 */
@layer modules {
  .t3-formblock, .t3-formwidget {
    --form-card-bg: var(--surface);
    --form-card-pad: clamp(20px, 3vw, 40px);
    --form-card-radius: var(--radius-l);
    --field-h: 52px;
    --field-radius: min(var(--radius-m), 14px);
    --field-bg: var(--surface);
    --field-border: var(--line-strong);
    --field-text: var(--text);
    --form-gap: 16px;
    --title-size: var(--fs-2xl);
    --title-color: inherit;
  }

  /* ── раскладка блока ── */
  .t3-formblock__wrap { container-type: inline-size; }
  .t3-formblock__layout { display: grid; gap: var(--s-6) var(--s-8); align-items: start; }
  .t3-formblock__intro { display: grid; gap: var(--s-4); align-content: start; }
  .t3-formblock__title { font-size: var(--title-size); color: var(--title-color); max-width: 20ch; }
  .t3-formblock__text { color: var(--text-2); font-size: var(--fs-l); }
  .t3-formblock__card {
    background: var(--form-card-bg); padding: var(--form-card-pad);
    border-radius: var(--form-card-radius); box-shadow: var(--shadow-1);
  }
  [data-style="quiet"] .t3-formblock__card { border: 1px solid var(--line); }
  [data-style="editorial"] .t3-formblock__card { border: var(--line-w) solid var(--line); }
  .t3-formblock__empty { color: var(--text-2); }

  @container (min-width: 880px) {
    .t3-formblock__layout:not(.t3-formblock__layout--solo) { grid-template-columns: minmax(0, 1fr) minmax(360px, 540px); }
    .t3-formblock__layout:not(.t3-formblock__layout--solo) .t3-formblock__intro { position: sticky; top: calc(var(--header-h) + 24px); }
    .t3-formblock__layout--solo { max-width: 640px; }
  }

  /* в модальном окне карточкой служит само окно (определяем по месту в DOM, а не на сервере —
     так работает и при открытой панели конструктора) */
  :is(.t3-modal, .t3-formblock--modal) .t3-formblock__layout { grid-template-columns: 1fr !important; gap: var(--s-5); }
  :is(.t3-modal, .t3-formblock--modal) .t3-formblock__intro { position: static !important; gap: var(--s-2); padding-right: var(--s-7); }
  :is(.t3-modal, .t3-formblock--modal) .t3-formblock__title { font-size: var(--fs-xl); max-width: none; }
  :is(.t3-modal, .t3-formblock--modal) .t3-formblock__text { font-size: var(--fs-s); }
  :is(.t3-modal, .t3-formblock--modal) .t3-formblock__card { padding: 0; background: none; box-shadow: none; border: 0; border-radius: 0; }

  /* columns3: полоса — вступление и форма в строку */
  .t3-formblock__band { display: grid; gap: var(--s-5); padding: var(--form-card-pad); border-radius: var(--form-card-radius); background: var(--form-card-bg); box-shadow: var(--shadow-1); }
  [data-style="editorial"] .t3-formblock__band { border: var(--line-w) solid var(--line); }

  /* ── форма ── */
  .t3-form { display: grid; gap: var(--s-5); }
  .t3-form__fields { display: grid; gap: var(--form-gap, 16px); }
  .t3-form--row { grid-template-columns: minmax(0, 1fr); }
  .t3-form--row .t3-form__fields { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
  @container (min-width: 760px) {
    .t3-form--row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--form-gap, 16px); }
    .t3-form--row .t3-form__agree { grid-column: 1 / -1; grid-row: 2; }
    .t3-form--row .t3-form__actions { grid-column: 2; grid-row: 1; }
  }
  .t3-field--wide { grid-column: 1 / -1; }

  .t3-field { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
  .t3-field__label { font-size: var(--fs-s); font-weight: 600; color: var(--text); padding: 0; }
  .t3-field__req { color: var(--danger); margin-left: 2px; }

  .t3-field__control {
    width: 100%; min-height: var(--field-h, 52px); padding: 0 14px;
    font-size: 16px; /* не даёт iOS масштабировать страницу при фокусе */
    color: var(--field-text, var(--text)); background: var(--field-bg, var(--surface));
    border: 1.5px solid var(--field-border, var(--line-strong)); border-radius: var(--field-radius, min(var(--radius-m), 14px));
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
    -webkit-appearance: none; appearance: none;
  }
  .t3-field__control::placeholder { color: var(--text-3); }
  .t3-field__control:hover { border-color: var(--text-3); }
  .t3-field__control:focus-visible, .t3-field__control:focus {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent);
  }
  .t3-field__control--area { min-height: 128px; padding-block: 12px; resize: vertical; line-height: 1.5; }
  .t3-field__control--select {
    padding-right: 42px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238c95a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
  }
  .t3-field__control--select[multiple] { padding: 8px; background-image: none; min-height: 120px; }

  /* ошибки */
  .t3-field__control[aria-invalid="true"] { border-color: var(--danger); }
  .t3-field__control[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 18%, transparent); }
  .t3-field__error { display: flex; gap: 6px; align-items: flex-start; font-size: var(--fs-xs); color: var(--danger); line-height: 1.4; }
  .t3-field__error::before { content: "!"; flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--danger); color: #fff; font-weight: 700; font-size: 11px; }

  /* выбор из вариантов: флажки / радио — нативные, в цвете бренда */
  .t3-choice__list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .t3-choice__item {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 var(--s-4);
    border: 1.5px solid var(--field-border, var(--line-strong)); border-radius: var(--radius-pill); background: var(--field-bg, var(--surface));
    cursor: pointer; font-size: var(--fs-s); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  }
  .t3-choice__item:hover { border-color: var(--text-3); }
  .t3-choice__item:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
  .t3-choice__item input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); flex: none; }

  /* переключатели (list_type 1) */
  .t3-choice--switch .t3-choice__item { border-radius: var(--field-radius, min(var(--radius-m), 14px)); }
  .t3-choice--switch input[role="switch"] {
    -webkit-appearance: none; appearance: none; position: relative;
    width: 36px; height: 20px; border-radius: 999px; background: var(--line-strong); cursor: pointer;
    transition: background-color var(--dur) var(--ease);
  }
  .t3-choice--switch input[role="switch"]::after {
    content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform var(--dur) var(--ease-out);
  }
  .t3-choice--switch input[role="switch"]:checked { background: var(--brand); }
  .t3-choice--switch input[role="switch"]:checked::after { transform: translateX(16px); }
  .t3-choice[aria-invalid="true"] .t3-choice__item { border-color: var(--danger); }

  /* согласие */
  .t3-check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; cursor: pointer; font-size: var(--fs-xs); color: var(--text-2); line-height: 1.45; }
  .t3-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--brand); }
  .t3-check a { color: var(--brand-text); text-decoration: underline; text-underline-offset: .2em; }
  .t3-form__agree[aria-invalid="true"] .t3-check__text { color: var(--danger); }

  /* кнопка и загрузка */
  .t3-form__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
  .t3-form--stack .t3-form__submit { width: 100%; }
  .t3-form__submit { position: relative; }
  .t3-form__spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
  .t3-form.is-sending .t3-form__submit { pointer-events: none; opacity: .85; }
  .t3-form.is-sending .t3-form__spinner { display: inline-block; }

  /* успешная отправка — по центру карточки / окна */
  .t3-form-done { display: grid; justify-items: center; text-align: center; gap: var(--s-3); padding-block: var(--s-5); animation: dlg-in .4s var(--ease-out); }
  .t3-form-done__close { margin-top: var(--s-3); }
  .t3-form-done__icon { width: 64px; height: 64px; margin-bottom: var(--s-2); border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--success) 14%, var(--surface)); color: var(--success); }
  .t3-form-done__icon svg { width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .t3-form-done__title { font-size: var(--fs-xl); }
  .t3-form-done__title:focus { outline: none; } /* фокус ставится программно — для дикторов, рамка не нужна */
  .t3-form-done__text { color: var(--text-2); white-space: pre-line; max-width: 40ch; }
  .t3-form-done--error .t3-form-done__icon { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); color: var(--danger); }

  /* виджет (внутри другого блока, например слайдера) */
  .t3-formwidget { display: grid; gap: var(--s-4); padding: var(--form-card-pad); background: var(--form-card-bg); color: var(--text); border-radius: var(--form-card-radius); box-shadow: var(--shadow-pop); }
  .t3-formwidget__title { font-size: var(--fs-xl); }
  .t3-formwidget--compact { --form-card-pad: 20px; --field-h: 46px; --form-gap: 12px; }
}