/* ==========================================================================
   ОАО «Универмаг «Центральный» — форма отдела кадров
   Файл: templates/section/css/hr-form.css
   Файл самодостаточный: свои переменные, зависимости от contacts.css нет.
   ========================================================================== */

.tsm-form {
  --tsm-brand: #57071a;
  --tsm-accent: #b94a24;
  --tsm-accent-deep: #96381a;
  --tsm-accent-wash: rgba(185, 74, 36, .09);
  --tsm-ink: #201a1c;
  --tsm-muted: #6f6469;
  --tsm-line: #e0dadb;
  --tsm-paper: #f6f4f5;
  --tsm-white: #fff;
  --tsm-ok: #1f7a4d;
  --tsm-err: #b3261e;

  --tsm-radius: 16px;
  --tsm-radius-sm: 10px;

  padding: clamp(20px, 4vw, 32px);
  border: 1px solid var(--tsm-line);
  border-top: 3px solid var(--tsm-accent);
  border-radius: var(--tsm-radius);
  background: var(--tsm-white);
  color: var(--tsm-ink);
  font-size: clamp(15px, .9rem + .15vw, 16px);
  line-height: 1.55;
}

.tsm-form *,
.tsm-form *::before,
.tsm-form *::after { box-sizing: border-box; }

/* --- шапка ------------------------------------------------------------------- */

.tsm-form__eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tsm-accent);
}

.tsm-form__title {
  margin: 0 0 6px;
  font-family: inherit;
  font-size: clamp(20px, 1.15rem + .8vw, 26px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--tsm-ink);
}

.tsm-form__lead {
  max-width: 56ch;
  margin: 0 0 clamp(18px, 3vw, 26px);
  color: var(--tsm-muted);
}

/* --- сетка полей -------------------------------------------------------------- */

.tsm-form__body {
  display: grid;
  gap: 18px;
  margin: 0;
}

.tsm-form__row { display: grid; gap: 18px; }

@media (min-width: 640px) {
  .tsm-form__row { grid-template-columns: 1fr 1fr; }
}

/* принудительно одна колонка — для узкой боковой позиции */
.tsm-form--narrow .tsm-form__row { grid-template-columns: 1fr; }

.tsm-field { display: grid; gap: 7px; }

.tsm-field__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tsm-muted);
}

.tsm-field__req { color: var(--tsm-accent); }

.tsm-field__input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--tsm-line);
  border-radius: var(--tsm-radius-sm);
  background: var(--tsm-paper);
  color: var(--tsm-ink);
  font-family: inherit;
  font-size: 16px; /* 16px — иначе Safari на iOS зумит страницу при фокусе */
  line-height: 1.4;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.tsm-field__input::placeholder { color: #a49a9e; }

.tsm-field__input:hover { border-color: #cfc7c9; }

.tsm-field__input:focus {
  outline: none;
  border-color: var(--tsm-accent);
  background: var(--tsm-white);
  box-shadow: 0 0 0 3px var(--tsm-accent-wash);
}

.tsm-field__input--area { min-height: 130px; resize: vertical; }

.tsm-field__hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--tsm-muted);
}

.tsm-field--invalid .tsm-field__input {
  border-color: var(--tsm-err);
  background: rgba(179, 38, 30, .04);
}

.tsm-field__error {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--tsm-err);
}

/* --- файл --------------------------------------------------------------------- */

.tsm-file { display: block; cursor: pointer; }

.tsm-file__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

.tsm-file__box {
  display: block;
  padding: 18px 20px;
  border: 1px dashed #c9bfc2;
  border-radius: var(--tsm-radius-sm);
  background: var(--tsm-paper);
  text-align: center;
  transition: border-color .18s ease, background-color .18s ease;
}

.tsm-file:hover .tsm-file__box,
.tsm-file__input:focus-visible + .tsm-file__box,
.tsm-file--drag .tsm-file__box {
  border-color: var(--tsm-accent);
  background: var(--tsm-accent-wash);
}

.tsm-file__title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--tsm-accent-deep);
}

.tsm-file__hint {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--tsm-muted);
}

.tsm-file__chosen {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 11px 14px;
  border: 1px solid var(--tsm-line);
  border-left: 3px solid var(--tsm-accent);
  border-radius: 4px 10px 10px 4px;
  background: var(--tsm-white);
}

.tsm-file__name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tsm-file__remove {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tsm-muted);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.tsm-file__remove:hover { color: var(--tsm-err); }

/* --- согласие ------------------------------------------------------------------ */

.tsm-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.45;
  color: var(--tsm-muted);
}

.tsm-consent input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.tsm-consent__box {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1px solid #c9bfc2;
  border-radius: 6px;
  background: var(--tsm-white);
  transition: border-color .18s ease, background-color .18s ease;
}

.tsm-consent input:checked + .tsm-consent__box {
  border-color: var(--tsm-accent);
  background: var(--tsm-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 4.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.tsm-consent input:focus-visible + .tsm-consent__box {
  outline: 2px solid var(--tsm-accent);
  outline-offset: 2px;
}

.tsm-consent--invalid .tsm-consent__box { border-color: var(--tsm-err); }

/* --- кнопка и статус ------------------------------------------------------------ */

.tsm-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  padding-top: 4px;
}

.tsm-form .tsm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border: 1px solid var(--tsm-accent);
  border-radius: var(--tsm-radius-sm);
  background: var(--tsm-accent);
  color: var(--tsm-white);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, opacity .2s ease;
}

.tsm-form .tsm-btn:hover,
.tsm-form .tsm-btn:focus-visible {
  background: var(--tsm-accent-deep);
  border-color: var(--tsm-accent-deep);
  color: var(--tsm-white);
}

.tsm-form .tsm-btn[disabled] { opacity: .6; cursor: progress; }

.tsm-form__legal {
  flex: 1 1 220px;
  margin: 0;
  font-size: 12.5px;
  color: var(--tsm-muted);
}

.tsm-form__status {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--tsm-radius-sm);
  font-size: 14.5px;
  font-weight: 600;
}

.tsm-form__status--ok { background: rgba(31, 122, 77, .08); color: var(--tsm-ok); }
.tsm-form__status--err { background: rgba(179, 38, 30, .07); color: var(--tsm-err); }

/* экран после успешной отправки */
.tsm-form__done {
  padding: clamp(24px, 5vw, 40px) 20px;
  border: 1px dashed rgba(31, 122, 77, .35);
  border-radius: var(--tsm-radius);
  background: rgba(31, 122, 77, .05);
  text-align: center;
}

.tsm-form__done-title {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  color: var(--tsm-ok);
}

.tsm-form__done-text { margin: 0; color: var(--tsm-muted); }

/* --- ловушка для ботов ----------------------------------------------------------- */

.tsm-trap {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

@media (max-width: 480px) {
  .tsm-form .tsm-btn { width: 100%; }
  .tsm-form__legal { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .tsm-form .tsm-btn,
  .tsm-field__input,
  .tsm-file__box,
  .tsm-consent__box { transition: none; }
}

/* ==========================================================================
   ЗАЩИТА ОТ СТИЛЕЙ ШАБЛОНА
   style.css и os_pages.css задают правила через #contentBox и .custom,
   специфичность у них выше — блок должен оставаться последним в файле.
   ========================================================================== */

.tsm-form .tsm-field__label,
.tsm-form .tsm-field__hint,
.tsm-form .tsm-field__error,
.tsm-form .tsm-file__title,
.tsm-form .tsm-file__hint,
.tsm-form .tsm-form__lead,
.tsm-form .tsm-form__legal {
  display: block !important;
  float: none !important;
  text-align: left !important;
  text-indent: 0 !important;
}

.tsm-form .tsm-field__input {
  display: block !important;
  float: none !important;
  height: auto !important;
  min-height: 0;
  max-width: none !important;
  box-shadow: none;
}

.tsm-form .tsm-field__input--area { min-height: 130px !important; }

.tsm-form .tsm-field__input:focus {
  box-shadow: 0 0 0 3px var(--tsm-accent-wash) !important;
}

.tsm-form .tsm-btn { text-transform: none !important; text-shadow: none !important; }