/* Страница отслеживания заказа. Опирается на общий дизайн-код сайта
   (redesign.css + editorial.css + legal.css): шапка, подвал и колонка для
   чтения оттуда, здесь только форма и лента этапов. */
.tr { max-width: 720px; }
.tr-title { font: 400 clamp(44px, 6.4vw, 72px)/1.03 LumaJost, Arial, sans-serif; letter-spacing: -.045em; color: #bd2856; margin: 0 0 18px; }
.tr-title em { font-family: Georgia, serif; font-style: italic; }
.tr-lead { font: 400 17px/1.7 Arial, sans-serif; color: #30252a; margin: 0 0 32px; max-width: 560px; }
.tr-lead b { font-weight: 400; letter-spacing: .05em; }

.tr-form { border-top: 1px solid #dfbbc3; padding-top: 26px; }
.tr-label { display: block; font-size: 13px; color: #78636a; margin-bottom: 8px; }
.tr-row { display: flex; gap: 10px; flex-wrap: wrap; }
.tr-input {
  flex: 1 1 240px; min-width: 0; border: 1px solid #dfbbc3; border-radius: 3px;
  background: #fffaf9; color: #30252a; padding: 14px 16px;
  font: 400 20px/1.2 LumaJost, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase;
}
.tr-input::placeholder { color: #c9a9b2; letter-spacing: .08em; }
.tr-input:focus { outline: 2px solid rgba(189, 40, 86, .25); border-color: #bd2856; }
.tr-btn {
  flex: 0 0 auto; border: 1px solid #30252a; border-radius: 40px; background: #30252a; color: #fff1ef;
  padding: 0 26px; min-height: 52px; font: 400 15px Arial, sans-serif; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.tr-btn:hover { background: #bd2856; border-color: #bd2856; }
.tr-btn[disabled] { opacity: .6; cursor: default; }
.tr-hint { font-size: 13px; color: #78636a; margin: 10px 0 0; }

.tr-result { margin-top: 32px; }
.tr-msg { padding: 16px 18px; border-radius: 3px; background: #f9dce3; font-size: 16px; line-height: 1.6; color: #30252a; }
.tr-msg--warn { background: #fcebb0; color: #4b3a31; }

.tr-head { border-top: 1px solid #dfbbc3; padding-top: 22px; margin-bottom: 26px; }
.tr-code { font: 400 30px/1.2 LumaJost, Arial, sans-serif; letter-spacing: .06em; color: #30252a; }
.tr-sub { font-size: 14px; color: #78636a; margin-top: 6px; }

/* Лента этапов: пройденные — розовые точки, текущий — крупная точка с
   пояснением, будущие — бледные. */
.tr-steps { list-style: none; margin: 0; padding: 0; }
.tr-step { position: relative; display: flex; gap: 16px; padding: 0 0 26px; }
.tr-step:last-child { padding-bottom: 0; }
.tr-step::before { content: ''; position: absolute; left: 7px; top: 18px; bottom: -4px; width: 1px; background: #e7cfd6; }
.tr-step:last-child::before { display: none; }
.tr-dot { position: relative; z-index: 1; flex: none; width: 15px; height: 15px; border-radius: 50%; border: 1px solid #dfbbc3; background: #fff1ef; margin-top: 3px; }
.tr-step--done .tr-dot { background: #fe517f; border-color: #fe517f; }
.tr-step--now .tr-dot { background: #bd2856; border-color: #bd2856; box-shadow: 0 0 0 5px rgba(189, 40, 86, .15); }
.tr-step__name { font: 400 19px/1.3 LumaJost, Arial, sans-serif; color: #30252a; }
.tr-step--next .tr-step__name { color: #a2909a; }
.tr-step--now .tr-step__name { color: #bd2856; }
.tr-step__note { font-size: 15px; line-height: 1.6; color: #6b5b62; margin-top: 6px; max-width: 460px; }

.tr-note { margin-top: 22px; padding-top: 18px; border-top: 1px solid #dfbbc3; font-size: 15px; color: #30252a; }
.tr-upd { font-size: 13px; color: #a2909a; margin-top: 8px; }
.tr-help { margin: 40px 0 0; font-size: 15px; color: #78636a; }
.tr-help a { color: #bd2856; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 650px) {
  .tr-title { font-size: 42px; }
  .tr-lead { font-size: 16px; margin-bottom: 26px; }
  .tr-input { font-size: 18px; padding: 13px 14px; }
  .tr-btn { width: 100%; }
  .tr-code { font-size: 26px; }
  .tr-step__name { font-size: 17px; }
}