:root {
 --tm-width: 500px; /* ширина модалки на десктопе */
 --tm-radius: 22px; /* скругление */
 --tm-shadow: 0 18px 60px rgba(0, 0, 0, 0.25);
 --tm-red: #c50000; /* фирменная красная (кнопки) */
 --tm-green: #18a957; /* галочка успеха */
 --tm-text: #000000;
 --tm-muted: #707070;
 --tm-overlay: rgba(5, 10, 20, 0.58);
 --tm-field: #f1f3f5;
 --tm-field-bd: #d9d9df;
 /* --tm-bg-url: url("../index/form-back.png"); */
 --tm-bg-opacity: 0.06; /* 0.04–0.12 — «еле видно» */
 --tm-bg-size: 248%;
}
body.tm-no-scroll {
 overflow: hidden;
}

/* Оверлей */
.tm-overlay {
 position: fixed;
 inset: 0;
 z-index: 99999;
 display: none;
 align-items: center;
 justify-content: center;
 background: #002672cc;
 overflow-y: auto;
}
.tm-overlay.is-open {
 display: flex;
 animation: tmFade 0.18s ease-out;
}
@keyframes tmFade {
 from {
  opacity: 0;
 }
 to {
  opacity: 1;
 }
}

/* Модалка */
.tm-modal {
 width: min(92vw, var(--tm-width));
 background: #fff;
 color: var(--tm-text);
 border-radius: var(--tm-radius);
 box-shadow: var(--tm-shadow);
 position: relative;
 overflow: hidden;
}
.tm-inner {
 padding: 22px 22px 24px;
}
.tm-header {
 display: flex;
 align-items: center;
 gap: 12px;
 margin-bottom: 14px;
 justify-content: space-between;
}
.tm-progress {
 font-weight: 600;
 color: #6a6a6a;
}
.tm-logo {
 width: 100px;
}
.tm-close {
 border: 0;
 background: transparent;
 cursor: pointer;
 width: 32px;
 height: 32px;
 border-radius: 10px;
 display: grid;
 place-items: center;
 color: #b30000;
}
.tm-close svg {
 width: 30px;
 height: 30px;
}

/* Контент шага */
.tm-step {
 display: none;
 opacity: 0;
 transform: translateY(6px);
 transition: 0.18s ease;
}
.tm-step.is-active {
 display: block;
 opacity: 1;
 transform: none;
}
.tm-title {
 font-size: 22px;
 font-weight: 800;
 margin: 8px 0 10px;
}
.tm-text {
 font-size: 15px;
 line-height: 1.45;
 color: var(--tm-text);
}
.tm-muted {
 color: var(--tm-muted);
 font-size: 12px;
}
.tm-flag {
 position: absolute;
 inset: 0;
 height: 100%;
 pointer-events: none;
 /* background-image: var(--tm-bg-url); */
 background-repeat: no-repeat;
 background-position: left;
 background-size: var(--tm-bg-size);
 opacity: var(--tm-bg-opacity);
 mix-blend-mode: multiply; /* мягкое смешивание с фоном */
 filter: contrast(105%) saturate(105%); /* легкая коррекция, можно убрать */
}

/* Иллюстрация */
.tm-hero {
 width: 100%;
 height: 160px;
 object-fit: cover;
 border-radius: 16px;
 margin-bottom: 14px;
 background: #0b2e57;
 display: grid;
 place-items: center;
 color: #fff;
 font-weight: 700;
}

/* Поля и чекбоксы */
.tm-field {
 margin-top: 10px;
 background: var(--tm-field);
 border: 1px solid var(--tm-field-bd);
 border-radius: 14px;
 height: 44px;
 display: flex;
 align-items: center;
 padding: 0 14px;
 font-size: 14px;
 width: 100%;
}
.tm-field input {
 border: 0;
 outline: 0;
 background: transparent;
 width: 100%;
}
.tm-check {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 margin-top: 14px;
 user-select: none;
}
.tm-check input {
 width: 18px;
 height: 18px;
 margin-top: 2px;
}

/* Кнопки */
.tm-actions {
 margin-top: 18px;
}
.tm-btn {
 display: block;
 width: 100%;
 height: 54px;
 border-radius: 28px;
 border: 0;
 cursor: pointer;
 font-weight: 800;
 font-size: 18px;
 background: var(--tm-red);
 color: #fff;
 transition: transform 0.06s ease;
}
.tm-btn[disabled] {
 opacity: 0.5;
 cursor: not-allowed;
}
.tm-btn:active {
 transform: translateY(1px);
}

/* Экран «Готово» */
.tm-done {
 display: grid;
 place-items: center;
 text-align: center;
 gap: 8px;
 padding: 22px 16px 26px;
}
.tm-tick {
 width: 100px;
 height: 100px;
 border-radius: 999px;
 display: grid;
 place-items: center;
 background: rgba(24, 169, 87, 0.12);
}
.tm-tick svg {
 width: 54px;
 height: 54px;
 color: var(--tm-green);
}
.tm-done h3 {
 margin: 8px 0 2px;
 color: #0a8a42;
}

@media (min-width: 420px) {
 .tm-inner {
  padding: 24px;
 }
 .tm-hero {
  height: 176px;
 }
}

.tm-text b,
.tm-muted b,
.tm-formtext b {
 color: var(--tm-red);
}
.tm-img {
 max-width: 100%;
 border-radius: 16px;
}
.tm-title {
 color: var(--tm-red);
 font-weight: 600;
 font-size: 18px;
}
.tm-formtext {
 font-size: 16px;
 text-align: center;
 margin: 8px 0;
}
form input {
 border: #002672 1px solid;
 padding: 12px 16px;
 width: 100%;
 border-radius: 20px;
 font-size: 14px;
 margin: 5px 0;
 background-color: rgb(0 38 114 / 10%);
}
#send_order_button {
 display: block;
 width: 100%;
 height: 54px;
 border-radius: 28px;
 border: 0;
 cursor: pointer;
 font-weight: 800;
 font-size: 18px;
 background: var(--tm-red);
 color: #fff;
 transition: transform 0.06s ease;
}