/* Страница заказа: только форма */

.order { padding-block: var(--space-6) var(--space-8); }

.order__wrap { max-width: 640px; }

.order__title {
 font-size: clamp(26px, 4vw, 36px);
 line-height: 1.15;
 letter-spacing: -.015em;
 font-weight: 700;
}

.order__sub {
 margin-top: var(--space-2);
 font-size: 15px;
 color: var(--fg-2);
 max-width: 60ch;
}

.lead {
 margin-top: var(--space-6);
 display: flex;
 flex-direction: column;
 gap: var(--space-4);
 padding: var(--space-5);
 border: 1px solid var(--line);
 border-radius: var(--radius-l);
 background: var(--surface);
}

.field { display: flex; flex-direction: column; gap: 6px; }

.field__label {
 font-size: 12.5px;
 font-weight: 600;
 color: var(--fg-2);
}

.field__input {
 width: 100%;
 min-height: 42px;
 padding: 10px 12px;
 border: 1px solid var(--line);
 border-radius: var(--radius-m);
 background: var(--bg);
 color: var(--fg);
 font-size: 15px;
 font-family: inherit;
 transition: border-color var(--dur-fast) var(--ease-out);
}

.field__input:hover { border-color: var(--line-strong); }
.field__input:focus { outline: none; border-color: var(--accent); }

.field__input--area {
 min-height: 96px;
 resize: vertical;
 line-height: 1.5;
}

.field__input--select {
 appearance: none;
 background-image: linear-gradient(45deg, transparent 50%, var(--fg-3) 50%),
 linear-gradient(135deg, var(--fg-3) 50%, transparent 50%);
 background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px;
 background-size: 5px 5px, 5px 5px;
 background-repeat: no-repeat;
 padding-right: 34px;
 cursor: pointer;
}

.field__input.is-invalid { border-color: var(--accent); }

.field__hint {
 font-size: 11.5px;
 color: var(--fg-3);
}

.field__error {
 font-size: 11.5px;
 color: var(--accent);
}

/* Чипы быстрого выбора под полем */

.sugg {
 display: flex;
 flex-wrap: wrap;
 gap: 5px;
 margin-top: 2px;
}

.sugg[hidden] { display: none; }

.sugg__btn {
 padding: 4px 9px;
 border: 1px dashed var(--line-strong);
 border-radius: 999px;
 background: transparent;
 color: var(--fg-3);
 font-family: inherit;
 font-size: 11.5px;
 line-height: 1.3;
 white-space: nowrap;
 cursor: pointer;
 transition: border-color var(--dur-fast) var(--ease-out),
 color var(--dur-fast) var(--ease-out),
 background var(--dur-fast) var(--ease-out);
}

.sugg__btn:hover { border-color: var(--accent); color: var(--fg); }
.sugg__btn:active { background: var(--accent-soft); }
.sugg__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sugg__btn.is-on { border-style: solid; border-color: var(--accent); background: var(--accent-soft); color: var(--fg); }

.lead__trap {
 position: absolute;
 left: -9999px;
 width: 1px;
 height: 1px;
 overflow: hidden;
}

.lead__foot {
 display: flex;
 flex-direction: column;
 gap: 6px;
 margin-top: var(--space-2);
}

.lead__submit { align-self: flex-start; }
.lead__submit[disabled] { opacity: .6; cursor: default; }

.lead__note {
 font-size: 12px;
 color: var(--fg-3);
}

.lead__demo {
 font-size: 11.5px;
 font-family: var(--font-mono);
 color: var(--warn);
}

.lead__status {
 min-height: 0;
 font-size: 12.5px;
 color: var(--fg-2);
}

.done {
 margin-top: var(--space-6);
 padding: var(--space-5);
 border: 1px solid var(--accent);
 border-radius: var(--radius-l);
 background: var(--accent-soft);
}

.done__title {
 font-size: 20px;
 font-weight: 600;
}

.done__text {
 margin-top: var(--space-2);
 font-size: 14px;
 color: var(--fg-2);
}

.done__actions {
 display: flex;
 flex-wrap: wrap;
 gap: var(--space-2);
 margin-top: var(--space-4);
}

.order__disclaimer {
 margin-top: var(--space-5);
 font-size: 12px;
 color: var(--fg-3);
 max-width: 60ch;
}

@media (max-width: 559px) {
 .lead { padding: var(--space-4); }
 .lead__submit { align-self: stretch; }
 .sugg__btn { font-size: 11px; padding: 3px 8px; }
}