/* ==========================================================================
   ОАО «Универмаг «Центральный» — обращение к руководству
   Файл: templates/section/css/feedback.css
   Имена классов не пересекаются с формой отдела кадров: файлы могут
   работать на одной странице.
   ========================================================================== */

.tsm-fb {
  --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: 14px;

  color: var(--tsm-ink);
  font-size: 15px;
  line-height: 1.55;
}

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

.tsm-fb p { margin: 0; }

/* --- вступление ------------------------------------------------------------------ */

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

.tsm-fb__title {
  margin: 0 0 10px;
  font-family: inherit;
  font-size: clamp(22px, 1.25rem + 1vw, 30px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--tsm-ink);
}

.tsm-fb__lead {
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.5;
  color: var(--tsm-muted);
}

/* --- три повода написать ----------------------------------------------------------- */

.tsm-fb__points {
  display: grid;
  gap: 1px;
  margin-top: clamp(18px, 3vw, 24px);
  border: 1px solid var(--tsm-line);
  border-radius: var(--tsm-radius);
  overflow: hidden;
  background: var(--tsm-line);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.tsm-fb__point {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 3px 12px;
  padding: 15px 16px;
  background: var(--tsm-white);
}

.tsm-fb__point::before {
  content: "";
  grid-row: span 2;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background-color: var(--tsm-accent-wash);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 19px 19px;
}

.tsm-fb__point-title {
  align-self: center;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--tsm-ink);
}

.tsm-fb__point-text {
  grid-column: 2;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--tsm-muted);
}

/* --- форма --------------------------------------------------------------------------- */

.tsm-fb__form {
  display: grid;
  gap: 18px;
  margin: clamp(20px, 3vw, 28px) 0 0;
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid var(--tsm-line);
  border-top: 3px solid var(--tsm-accent);
  border-radius: var(--tsm-radius);
  background: var(--tsm-white);
}

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

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

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

.tsm-fb__input {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--tsm-line);
  border-radius: 10px;
  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-fb__input::placeholder { color: #a49a9e; }
.tsm-fb__input:hover { border-color: #cfc7c9; }

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

.tsm-fb__input--area { min-height: 150px; resize: vertical; }

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

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

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

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

.tsm-fb__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-fb__consent input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.tsm-fb__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-fb__consent input:checked + .tsm-fb__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-fb__consent input:focus-visible + .tsm-fb__box {
  outline: 2px solid var(--tsm-accent);
  outline-offset: 2px;
}

.tsm-fb__consent--invalid .tsm-fb__box { border-color: var(--tsm-err); }

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

.tsm-fb__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
}

.tsm-fb__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border: 1px solid var(--tsm-accent);
  border-radius: 10px;
  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-fb__btn:hover,
.tsm-fb__btn:focus-visible {
  background: var(--tsm-accent-deep);
  border-color: var(--tsm-accent-deep);
  color: var(--tsm-white);
}

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

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

.tsm-fb__status {
  margin: 0;
  padding: 14px 16px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
}

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

.tsm-fb__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-fb__done-title {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  color: var(--tsm-ok);
}

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

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

@media (max-width: 480px) {
  .tsm-fb__btn { width: 100%; }
  .tsm-fb__legal { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .tsm-fb__btn,
  .tsm-fb__input,
  .tsm-fb__box { transition: none; }
}

/* --- иконки ------------------------------------------------------------------------------- */

.tsm-fb__point--idea::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b94a24' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.2 17.5h5.6M10 20.6h4'/%3E%3Cpath d='M12 3.2a6 6 0 0 0-3.6 10.8c.5.4.8 1 .8 1.6h5.6c0-.6.3-1.2.8-1.6A6 6 0 0 0 12 3.2z'/%3E%3C/svg%3E"); }
.tsm-fb__point--alert::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b94a24' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6 21 19.4H3z'/%3E%3Cpath d='M12 9.6v4.2M12 16.8h.01'/%3E%3C/svg%3E"); }
.tsm-fb__point--thanks::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b94a24' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.4 4.8 13.2a4.4 4.4 0 0 1 6.2-6.2l1 1 1-1a4.4 4.4 0 0 1 6.2 6.2z'/%3E%3C/svg%3E"); }

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

.tsm-fb h2 {
  display: block !important;
  float: none !important;
  padding-left: 0 !important;
  background: none !important;
  text-align: left !important;
  text-transform: none !important;
}

.tsm-fb__eyebrow,
.tsm-fb__lead,
.tsm-fb__label,
.tsm-fb__hint,
.tsm-fb__error,
.tsm-fb__legal {
  display: block !important;
  float: none !important;
  text-align: left !important;
  text-indent: 0 !important;
}

.tsm-fb .tsm-fb__points,
.tsm-fb .tsm-fb__point,
.tsm-fb .tsm-fb__form,
.tsm-fb .tsm-fb__field { display: grid !important; float: none !important; }

.tsm-fb .tsm-fb__point-title,
.tsm-fb .tsm-fb__point-text { display: block !important; }

.tsm-fb .tsm-fb__input {
  display: block !important;
  float: none !important;
  height: auto !important;
  max-width: none !important;
}

.tsm-fb .tsm-fb__input--area { min-height: 150px !important; }

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

.tsm-fb .tsm-fb__btn { 
	text-transform: none !important; text-shadow: none !important; 
	display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border: 1px solid var(--tsm-accent);
    border-radius: 10px;
    background: #b94a24;
    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;
}