/*
 * Формы. Поле: .op-field > label.op-label + .op-input + .op-field__hint / .op-field__error.
 * Выбор: label.op-choice > input[type=checkbox|radio] + span. Группа: fieldset.op-fieldset.
 * Ошибка — текст с иконкой + aria-invalid; не только цвет.
 */

.op-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.op-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.op-label,
.op-legend {
  padding: 0;
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
}

.op-label__optional {
  color: var(--color-text-muted);
  font-weight: var(--font-weight-regular);
}

.op-field__hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-caption);
  line-height: var(--leading-snug);
}

.op-field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-error);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-snug);
}

.op-field__error[hidden] {
  display: none;
}

.op-field__error .op-icon {
  margin-top: var(--space-1);
}

.op-input {
  display: block;
  width: 100%;
  min-height: var(--hit-min);
  padding: var(--space-2) var(--space-4);
  border: var(--border-width) solid var(--color-field-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  line-height: var(--leading-snug);
  transition: border-color var(--transition-ui), box-shadow var(--transition-ui);
}

.op-input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

textarea.op-input {
  min-height: var(--space-24);
  resize: vertical;
}

.op-input:is(:hover, .is-hover) {
  border-color: var(--color-text);
}

.op-input:is(:focus, .is-focus) {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 var(--border-width) var(--color-primary);
}

/* Показ фокуса на демо-странице */
.op-input.is-focus {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.op-input[aria-invalid="true"] {
  border-color: var(--color-error);
  box-shadow: 0 0 0 var(--border-width) var(--color-error);
}

.op-input:disabled {
  border-color: var(--color-disabled-bg);
  background: var(--color-disabled-bg);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* Группа переключателей */
.op-fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.op-fieldset > .op-legend {
  margin-bottom: var(--space-1);
}

/* Плашка выбора: один общий вид для чекбокса и радио */
.op-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: var(--hit-min);
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-field-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  line-height: var(--leading-snug);
  cursor: pointer;
  transition: border-color var(--transition-ui), background-color var(--transition-ui);
}

.op-choice:hover {
  border-color: var(--color-text);
}

.op-choice > input {
  flex: none;
  width: var(--control-size);
  height: var(--control-size);
  margin: calc((1lh - var(--control-size)) / 2) 0 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.op-choice > span {
  min-width: 0;
}

.op-choice:has(input:checked) {
  border-color: var(--color-primary);
  background: var(--color-blue-soft);
}

.op-choice:has(input:focus-visible) {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.op-choice > input:focus-visible {
  outline: none;
}

@supports not selector(:has(*)) {
  .op-choice > input:focus-visible {
    outline: var(--focus-width) solid var(--color-focus);
    outline-offset: var(--focus-offset);
  }
}

.op-choice:has(input:disabled) {
  border-color: var(--color-disabled-bg);
  background: var(--color-disabled-bg);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.op-choice > input:disabled {
  cursor: not-allowed;
}

/* Форма «Написать в храм» (docs/56): сообщение об успехе/ошибке над формой, отступ от текста блока */
.op-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.op-contact__intro {
  margin-bottom: var(--space-6);
}

.op-contact__form textarea.op-input {
  min-height: 10rem;
  resize: vertical;
}