/* ==========================================================================
   Form primitives
   Consumed by: T8 (popup callback form), T9 (styleguide demo), future pages.
   All values via var(--*) tokens — no hardcoded hex literals.
   Focus ring mirrors reference design (.quiz-form input:focus):
     border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
   ========================================================================== */

/* ---- Field wrapper ---- */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ---- Label ---- */
.form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}

/* Required star — rendered via a <span class="form-label__required"> inside the label */
.form-label__required {
  color: var(--danger);
  margin-left: 2px;
  font-weight: 600;
  /* kept as inline, no extra spacing needed */
}

/* ---- Text inputs, select, textarea — shared base ---- */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  height: 44px;              /* touch-comfortable per ТЗ §9.5 */
  padding: 0 14px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 15px;
  color: var(--ink);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 200ms, box-shadow 200ms;
  box-sizing: border-box;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--muted);
}

/* Focus state — mirrors reference .quiz-form input:focus */
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* focus-visible (keyboard) — ensure visible outline for a11y */
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ---- Textarea ---- */
.form-textarea {
  height: auto;
  min-height: 100px;
  padding: 12px 14px;
  resize: vertical;
  line-height: 1.5;
}

/* ---- Select — custom chevron ---- */
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6B85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  padding-right: 36px;
  cursor: pointer;
}

/* ---- Invalid state — parent .form-field has .is-invalid ---- */
.form-field.is-invalid .form-input,
.form-field.is-invalid .form-select,
.form-field.is-invalid .form-textarea {
  border-color: var(--danger);
  box-shadow: none;
}

.form-field.is-invalid .form-input:focus,
.form-field.is-invalid .form-select:focus,
.form-field.is-invalid .form-textarea:focus {
  /* No extra box-shadow on invalid+focus — border-color: var(--danger) is sufficient.
     CSS custom properties cannot be used inside rgba() for an --danger-soft equivalent
     without color-mix() (not yet universal). Keep it simple per F1 scope. */
  box-shadow: none;
}

/* ---- Error message slot ---- */
.form-error {
  display: none;
  font-size: 12px;
  line-height: 1.4;
  color: var(--danger);
  min-height: 0;
}

/* Shown by JS adding .is-invalid to the parent .form-field */
.form-field.is-invalid .form-error {
  display: block;
}

/* ---- Success confirmation (replaces <form> on submit) ---- */
.form-success {
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  text-align: center;
}

/* ---- Checkbox — accessible custom composition ---- */
/*
  DOM contract:
  <div class="form-field">
    <label class="form-checkbox">
      <input class="form-checkbox__input" type="checkbox" required>
      <span class="form-checkbox__box" aria-hidden="true"></span>
      <span class="form-checkbox__label">
        Согласен с <a href="/privacy/">Политикой конфиденциальности</a>
      </span>
    </label>
    <span class="form-error" id="..." aria-live="polite"></span>
  </div>
*/

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  line-height: 1.5;
}

/* Real checkbox — visually hidden but keyboard-focusable and screen-reader accessible */
.form-checkbox__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  /* Do NOT use display:none or visibility:hidden — would break keyboard access */
}

/* Custom visual box */
.form-checkbox__box {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;          /* align with first text line */
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 200ms, background 200ms, box-shadow 200ms;
  pointer-events: none;     /* clicks go to the parent label, not the box */
}

/* Checked state */
.form-checkbox__input:checked + .form-checkbox__box {
  background: var(--accent);
  border-color: var(--accent);
}

/* Checkmark SVG rendered via ::after */
.form-checkbox__input:checked + .form-checkbox__box::after {
  content: '';
  display: block;
  width: 11px;
  height: 7px;
  border: 2px solid var(--bg-card);
  border-top: none;
  border-right: none;
  transform: rotate(-45deg) translateY(-1px);
}

/* Focus-visible ring on the custom box */
.form-checkbox__input:focus-visible + .form-checkbox__box {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Invalid checkbox */
.form-field.is-invalid .form-checkbox__box {
  border-color: var(--danger);
}

/* Checkbox label text — wraps correctly (multi-line for PD consent) */
.form-checkbox__label {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}

.form-checkbox__label a {
  color: var(--accent);
  text-decoration: underline;
}

.form-checkbox__label a:hover {
  color: var(--accent-hover);
}

/* Note: .form-field.is-invalid .form-error { display: block } is declared above
   and covers checkbox error slots too — no duplicate rule needed here. */