/* Быстрая заявка в первом экране: имя + телефон, без прокрутки на 15 экранов.
   Карточка белая — читается и на тёмном hero2 главной, и на светлом page-hero услуг. */

.quickform { margin: 22px 0 8px; max-width: 620px }

.quickform-card {
  background: #fff;
  border: 1px solid var(--line, #E7E9EC);
  border-radius: var(--r, 18px);
  padding: 14px;
  box-shadow: 0 12px 34px rgba(21, 25, 31, .12);
}

.quickform-t {
  margin: 2px 4px 10px;
  font: 700 14px/1.35 Manrope, system-ui, sans-serif;
  color: var(--ink, #15191F);
}

/* Колонка первого экрана узкая — поля в ряд, кнопка отдельной строкой во всю ширину. */
.quickform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }

.quickform .quickform-go { grid-column: 1 / -1; width: 100%; justify-content: center }

/* Плавающая панель квиза и WhatsApp живёт в правом нижнем углу и на телефоне
   накрывает кнопку отправки. Пока форма на экране — панель уступает ей место. */
.qrail { transition: opacity .18s, transform .18s }
.qrail.quickform-yield { opacity: 0; transform: translateY(10px); pointer-events: none }

.quickform input[type="text"],
.quickform input[type="tel"] {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line, #E7E9EC);
  border-radius: 12px;
  background: var(--soft, #F7F8FA);
  font: 500 15px/1.2 Manrope, system-ui, sans-serif;
  color: var(--ink, #15191F);
  transition: border-color .15s, background .15s;
}

.quickform input::placeholder { color: var(--muted, #6A7079) }

.quickform input:focus {
  outline: none;
  background: #fff;
  border-color: var(--brand, #DC1420);
}

.quickform input.is-bad { border-color: var(--brand, #DC1420); background: var(--tint, #FEF1F2) }

.quickform .quickform-go { white-space: nowrap }

.quickform-note {
  margin: 9px 4px 0;
  font: 500 12.5px/1.45 Manrope, system-ui, sans-serif;
  color: var(--muted, #6A7079);
}

/* honeypot: человек его не видит и не заполняет */
.quickform-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0 }

.quickform-done { padding: 6px 4px }

.quickform-done b {
  display: block;
  font: 700 16px/1.3 Manrope, system-ui, sans-serif;
  color: var(--ink, #15191F);
  margin-bottom: 6px;
}

.quickform-done span {
  display: block;
  font: 500 13.5px/1.5 Manrope, system-ui, sans-serif;
  color: var(--text, #454A52);
}

.quickform-done a { color: var(--brand-text, #C20E1A); font-weight: 700 }

.quickform-err {
  margin: 9px 4px 0;
  font: 600 12.5px/1.45 Manrope, system-ui, sans-serif;
  color: var(--brand-text, #C20E1A);
}

@media (max-width: 720px) {
  .quickform { margin: 18px 0 6px; max-width: none }
  .quickform-row { grid-template-columns: 1fr; gap: 9px }
}