/* =========================================================
   ИПКСЗ — единый стиль публичных форм (обратная связь, заявления и др.)
   =========================================================
   Подключается в публичном layout после site.css и ui.css (ui.css — общие примитивы:
   колонка, алерты, ряд действий). Здесь — ТОЛЬКО стили форм:
   страница /forms/<slug>, встроенная форма и модальное окно. Классы общие —
   любая новая форма (созданная в админке) получает этот вид автоматически.
   Токены (цвета/радиусы/тени) берутся из site.css: :root.
   ========================================================= */

/* Триггер формы (кнопка [form slug="…"] на страницах CMS) */
.form-trigger { display: inline-flex; align-items: center; gap: 8px; }

/* Страница формы: колонку центрирует .site-col (ui.css). Здесь — только отступы. */
.form-page__intro { margin-bottom: 22px; }

.form-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 30px 32px 26px;
  box-shadow: var(--shadow);
}
.form-card--success { border-color: #7fbf9c; box-shadow: none; }
.form-card__actions { margin: 18px 0 0; }

/* Сетка полей: на широком экране два столбца, на узком — один */
.site-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.site-field--full { grid-column: 1 / -1; }
.site-field__label { display: block; font-weight: 600; margin-bottom: 7px; color: var(--c-dark); font-size: .9375rem; }

/* Единый вид полей задаёт базовый слой (site-controls.css); здесь — только специфика формы. */
.site-field :where(input, select, textarea) { width: 100%; }
.site-field textarea { min-height: 150px; resize: vertical; }
.site-field input[type=file] { padding: 10px 12px; }
/* Кнопка «Выберите файл» внутри поля — в стиле кнопок сайта (иначе браузер рисует свою) */
.site-field input[type=file]::file-selector-button,
.site-field input[type=file]::-webkit-file-upload-button {
  margin-right: 12px;
  padding: 9px 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-blue-50);
  color: var(--c-link);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease;
}
.site-field input[type=file]::file-selector-button:hover,
.site-field input[type=file]::-webkit-file-upload-button:hover { background: var(--c-blue-100); }
.site-field__hint { margin: 7px 0 0; font-size: .85rem; color: var(--c-muted); }
.site-field__error { margin: 7px 0 0; font-size: .85rem; color: var(--c-red); font-weight: 600; }

.req { color: var(--c-red); }

/* Флажок согласия и блок согласия (отделён и опущен перед кнопкой) */
.site-check { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; }
.site-check input[type=checkbox] { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--c-blue); }
.site-form__consent { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--c-border); }

.site-form__actions { margin-top: 22px; } /* раскладку ряда даёт .actions (ui.css) */
.site-form__note { font-size: .85rem; color: var(--c-muted); }
.site-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 640px) {
  .site-form__grid { grid-template-columns: 1fr; }
  .form-card { padding: 22px 18px 20px; }
}

/* Форма, вставленная в страницу целиком ([form slug="…" inline]):
   ширина 2/3 доступной ширины контента и по центру — для ЛЮБОЙ формы. */
.site-form-host { width: 66.6667%; margin-left: auto; margin-right: auto; }
@media (max-width: 720px) { .site-form-host { width: 100%; } }

/* =========================================================
   Модальное окно формы
   ========================================================= */
html.form-modal-open { overflow: hidden; }
.form-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 5vh 16px; overflow: auto;
}
.form-modal[hidden] { display: none; }
.form-modal__backdrop { position: fixed; inset: 0; background: rgba(9, 32, 54, .55); }
.form-modal__box {
  position: relative; width: 100%; max-width: 760px; background: var(--c-surface);
  border-radius: 16px; box-shadow: 0 20px 60px rgba(6, 30, 55, .35);
  max-height: 90vh; display: flex; flex-direction: column;
}
.form-modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-bottom: 1px solid var(--c-border);
}
.form-modal__title { font-weight: 700; color: var(--c-link); font-size: 1.05rem; }
.form-modal__x { border: none; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--c-muted); }
.form-modal__x:hover { color: var(--c-text); }
.form-modal__body { padding: 22px; overflow: auto; }
.form-modal__loading { color: var(--c-muted); }
.form-modal .form-card { border: none; box-shadow: none; padding: 0; }
.form-modal .form-card--success { padding: 6px 0; }
@media (max-width: 640px) {
  .form-modal { padding: 0; }
  .form-modal__box { max-height: 100vh; height: 100%; border-radius: 0; max-width: none; }
}

/* ------------------------------------------------------------------
   Заявление на обучение (форма модуля «Программы ДПО»).
   Разделы/бейдж/маски — из прежней страницы /programmy-obucheniya/zayavka.php,
   поля и карточка — общие классы форм CMS (.site-field, .site-form__grid, .form-card).
------------------------------------------------------------------ */
.zayavka__section {
  margin: 24px 0 12px; font-size: .8125rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: #125a8c; border-bottom: 2px solid #125a8c; padding-bottom: 6px;
}
.zayavka__section:first-child { margin-top: 0; }
.zayavka__banner {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin-bottom: 14px;
}
.zayavka__badge {
  grid-column: 2; justify-self: center; display: inline-block; background: #eef5fb; color: #125a8c;
  font-size: .75rem; font-weight: 700; border-radius: 20px; padding: 4px 12px;
}
.zayavka__badge-clear {
  grid-column: 3; justify-self: end; color: #fff; background: #c0392b; border-radius: 20px;
  padding: 4px 12px; font-size: .75rem; font-weight: 700; text-decoration: none;
}
.zayavka__badge-clear:hover { background: #a1301f; color: #fff; }
.zayavka__ro { background: #f4f7fa; }
.zayavka__mask { position: relative; }
.zayavka__mask input { color: transparent; -webkit-text-fill-color: transparent; caret-color: #111; background: transparent; position: relative; z-index: 2; }
.zayavka__mask input:focus { color: transparent; -webkit-text-fill-color: transparent; background: transparent; }
.zayavka__mask-hint {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #aeb9c4; font-size: .875rem;
  line-height: 1.2; pointer-events: none; white-space: nowrap; font-family: inherit;
  user-select: none; -webkit-user-select: none; z-index: 1;
}
.zayavka__mask-hint b { color: #111; font-weight: 400; }
.zayavka__mask-hint--dates { z-index: 3; display: none; }
.zayavka__consent { margin-top: 10px; padding: 10px 14px; background: #f6fafd; border: 1px solid #dce7f1; border-radius: 8px; }
.zayavka__hint { font-size: .8125rem; color: var(--c-muted); }