/* =============================================================
   .form — stacked, font-size 16px (no iOS zoom)
   ============================================================= */
.form { display: flex; flex-direction: column; gap: var(--space-md); }

.form__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .form__row--2col { grid-template-columns: 1fr 1fr; }
}

.form__field { display: flex; flex-direction: column; gap: var(--space-xs); }

.form__label { font-size: var(--font-size-sm); font-weight: 600; }

.form__input,
.form__textarea,
.form__select {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  /* --color-surface, не --color-bg: форма часто лежить на --color-bg-muted секції
     (напр. .home-cta), де --color-bg темніший за контейнер у dark-темі — поле
     виглядало як "чорна дірка" замість картки. surface завжди трохи світліший
     за bg/bg-muted в обох темах. */
  background: var(--color-surface);
  font-family: inherit;
}

.form__textarea { min-height: 7rem; resize: vertical; }

/* select успадковує appearance:none з base.css (input,select,textarea) — без явного
   фону/стрілки нативний рендер (color-scheme: light dark) малює його суцільним
   темним блоком. Замінюємо на кастому стрілку, щоб лишався видимим і в світлій, і в темній темі. */
.form__select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: calc(var(--space-md) * 2 + 12px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  background-size: 12px 12px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .form__select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f7f6f3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] .form__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f7f6f3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
}

/* Customizable Select API (Chrome/Chromium) — стилізує сам спливаючий список,
   не лише закритий select. Браузери без підтримки просто ігнорують блок:
   лишається fallback вище (кастомна стрілка, нативний OS-попап). */
@supports selector(::picker(select)) {
  .form__select {
    appearance: base-select;
    /* стрілку тепер малює ::picker-icon — фонова картинка більше не потрібна */
    background-image: none;
    padding-right: var(--space-md);
  }

  .form__select::picker(select) {
    appearance: base-select;
    margin-top: var(--space-xs);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    padding: var(--space-xs);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  }

  .form__select::picker-icon {
    color: var(--color-text-muted);
    transition: rotate var(--duration-fast) var(--ease-out);
  }

  .form__select:open::picker-icon {
    rotate: 180deg;
  }

  .form__select option {
    /* Explicit color: base-select не успадковує колір сторінки для <option> —
       без цього браузер бере власний системний колір (може збігатися з фоном). */
    color: var(--color-text);
    background: var(--color-surface);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    cursor: pointer;
  }

  .form__select option:hover {
    background: var(--color-bg-muted);
  }

  .form__select option:checked {
    background: var(--color-accent);
    color: var(--color-text-inverse);
  }
}

.form__input:focus,
.form__textarea:focus,
.form__select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

.form__input--error { border-color: var(--color-danger); }

.form__error {
  font-size: var(--font-size-xs);
  color: var(--color-danger);
}

.form__radio-group { display: flex; gap: var(--space-md); }
.form__radio {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: var(--touch-min);
  font-size: var(--font-size-sm);
}

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

.form__privacy {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.form__success {
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--color-bg-muted);
  color: var(--color-success);
  font-weight: 600;
}

/* Number input — прибрати spinner */
.form__input[type="number"]::-webkit-outer-spin-button,
.form__input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.form__input[type="number"] { -moz-appearance: textfield; }