/* =====================================================================
   forms.css — формы: окно «Join the Movement» (Consumers / Businesses) и подписка в подвале.
   Отправка и капча Cloudflare Turnstile — js/main.js (п. 7), обработчик — functions/api/form.js.
   ===================================================================== */

/* поля ввода — общий вид для всех форм */
.form :is(input, textarea), .subscribe input {
  width: 100%; min-width: 0; height: 42px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, .85);
  font: 400 15px var(--text); color: #000;
  transition: border-color .2s, box-shadow .2s;
}
.subscribe input { height: 38px; border-radius: 5px; }
.form textarea { height: 96px; padding: 11px 14px; line-height: 1.35; resize: vertical; }
:is(.form, .subscribe) :is(input, textarea)::placeholder { color: #7d97ac; }
:is(.form, .subscribe) :is(input, textarea):focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(50, 206, 216, .25); }
:is(.form, .subscribe) .is-invalid { border-color: #d64545; }

.form { display: flex; flex-direction: column; gap: 12px; }
.form__row  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form__foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 4px; }
.form .btn  { width: auto; min-width: 179px; gap: 16px; }
.form button[disabled], .subscribe button[disabled] { opacity: .6; cursor: progress; }

/* сообщение под формой */
[data-msg] { font-size: 13px; line-height: 1.3; }
.is-error [data-msg] { color: #d64545; }
.is-done  [data-msg] { color: #1d7f86; }

/* капча показывается, только если Cloudflare попросит подтвердить, что вы человек */
[data-captcha]:empty { display: none; }
.subscribe [data-captcha] { flex-basis: 100%; }

@media (max-width: 739px) {
  .form { gap: 8px; }
  .form__row { grid-template-columns: 1fr; gap: 8px; }
  .form :is(input, textarea), .subscribe input { height: 36px; font-size: 14px; }
  .subscribe input { height: 31px; }
  .form textarea { height: 72px; }
  .form .btn { min-width: 144px; }
}