/* ============================================
   Forms and Inputs
   Переиспользуемые стили для форм обратной связи
   ============================================ */

/* ============================================
   1. Form Group (контейнер для поля)
   ============================================ */

.form-group {
  margin-bottom: var(--space-6); /* 24px */
}

.form-group:last-child {
  margin-bottom: 0;
}

/* ============================================
   2. Label
   ============================================ */

.form-label {
  display: block;
  margin-bottom: var(--space-2); /* 8px */
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-medium); /* 500 */
  line-height: var(--line-height-normal); /* 1.5 */
  color: var(--color-neutral-800);
}

/* Required indicator */
.form-label--required::after {
  content: " *";
  color: var(--color-error);
}

/* Optional indicator */
.form-label--optional::after {
  content: " (необязательно)";
  font-weight: var(--font-weight-normal);
  color: var(--color-neutral-600);
  font-size: var(--font-size-sm); /* 14px */
}

/* ============================================
   3. Input and Textarea (базовые стили)
   ============================================ */

.form-input,
.form-textarea,
.form-select {
  /* Sizing */
  width: 100%;
  min-height: 44px; /* Touch target WCAG */
  padding: var(--space-3) var(--space-4); /* 12px 16px */
  
  /* Typography */
  font-family: var(--font-family-base);
  font-size: var(--font-size-base); /* 16px */
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-neutral-900);
  
  /* Appearance */
  background-color: white;
  border: var(--border-width-medium) solid var(--color-neutral-300); /* 2px */
  border-radius: var(--border-radius-md); /* 8px */
  
  /* Transitions */
  transition: border-color var(--transition-base) var(--ease-in-out),
              box-shadow var(--transition-base) var(--ease-in-out),
              background-color var(--transition-base) var(--ease-in-out);
  
  /* Remove default appearance */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Placeholder */
.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--color-neutral-500);
  opacity: 1; /* Firefox fix */
}

/* ============================================
   4. Focus State
   ============================================ */

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px var(--color-primary-100);
}

/* Focus-visible для keyboard navigation */
.form-input:focus-visible,
.form-textarea:focus-visible,
.form-select:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
}

/* ============================================
   5. Hover State
   ============================================ */

.form-input:hover:not(:disabled):not(:focus),
.form-textarea:hover:not(:disabled):not(:focus),
.form-select:hover:not(:disabled):not(:focus) {
  border-color: var(--color-neutral-400);
}

/* ============================================
   6. Error State
   ============================================ */

.form-input--error,
.form-textarea--error {
  border-color: var(--color-error);
  background-color: rgba(239, 68, 68, 0.05); /* Очень светлый красный фон */
}

.form-input--error:focus,
.form-textarea--error:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* Error message */
.form-error {
  display: block;
  margin-top: var(--space-2); /* 8px */
  font-size: var(--font-size-sm); /* 14px */
  line-height: var(--line-height-tight); /* 1.25 */
  color: var(--color-error);
  min-height: 1.75em; /* Резервируем место для сообщения */
}

.form-error:empty {
  display: none;
}

/* ARIA support */
.form-input[aria-invalid="true"],
.form-textarea[aria-invalid="true"] {
  border-color: var(--color-error);
}

/* ============================================
   7. Success State
   ============================================ */

.form-input--success,
.form-textarea--success {
  border-color: var(--color-success);
  background-color: rgba(16, 185, 129, 0.05); /* Очень светлый зеленый фон */
}

.form-input--success:focus,
.form-textarea--success:focus {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

/* Success indicator (checkmark icon or text) */
.form-success {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-tight);
  color: #065f46; /* Темно-зеленый для лучшей контрастности (matching success message text) */
}

/* ============================================
   8. Disabled State
   ============================================ */

.form-input:disabled,
.form-textarea:disabled,
.form-select:disabled {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-500);
  border-color: var(--color-neutral-200);
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}

.form-label--disabled {
  color: var(--color-neutral-500);
  opacity: 0.6;
}

/* ============================================
   9. Textarea Specific
   ============================================ */

.form-textarea {
  min-height: 120px; /* Минимум 4-5 строк */
  max-height: 300px; /* Максимальная высота для комфорта */
  resize: vertical; /* Только вертикальное изменение размера */
  line-height: var(--line-height-relaxed); /* 1.75 для удобочитаемости */
}

/* ============================================
   10. Select Specific
   ============================================ */

.form-select {
  padding-right: var(--space-10); /* Место для стрелки */
  background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none"%3e%3cpath d="M7 7l3 3 3-3" stroke="%236b7280" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/%3e%3c/svg%3e');
  background-position: right var(--space-3) center;
  background-repeat: no-repeat;
  background-size: 20px;
  cursor: pointer;
}

.form-select:disabled {
  cursor: not-allowed;
}

/* ============================================
   11. Form Messages (Success/Error/Info)
   ============================================ */

.form-message {
  padding: var(--space-4); /* 16px */
  margin-top: var(--space-4);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  border: var(--border-width-medium) solid transparent;
}

.form-message--success {
  background-color: #d1fae5; /* Светло-зеленый */
  border-color: var(--color-success);
  color: #065f46; /* Темно-зеленый текст */
}

.form-message--error {
  background-color: #fee2e2; /* Светло-красный */
  border-color: var(--color-error);
  color: #991b1b; /* Темно-красный текст */
}

.form-message--info {
  background-color: #dbeafe; /* Светло-синий */
  border-color: var(--color-info);
  color: #1e3a8a; /* Темно-синий текст */
}

.form-message--warning {
  background-color: #fef3c7; /* Светло-желтый */
  border-color: var(--color-warning);
  color: #92400e; /* Темно-коричневый текст */
}

/* Скрытие сообщений */
.form-message[hidden] {
  display: none;
}

/* ============================================
   12. Loading State
   ============================================ */

.contact-form[data-loading="true"] {
  position: relative;
  pointer-events: none;
}

.contact-form[data-loading="true"] .form-input,
.contact-form[data-loading="true"] .form-textarea,
.contact-form[data-loading="true"] .form-select {
  opacity: 0.6;
}

.contact-form[data-loading="true"] button[type="submit"] {
  opacity: 0.6;
  cursor: wait;
}

/* Loading indicator на кнопке */
.contact-form[data-loading="true"] button[type="submit"]::after {
  content: "...";
  animation: form-loading 1.5s infinite;
}

@keyframes form-loading {
  0%, 20% {
    content: ".";
  }
  40% {
    content: "..";
  }
  60%, 100% {
    content: "...";
  }
}

/* ============================================
   13. Autofill Styles (браузерное автозаполнение)
   ============================================ */

/* Chrome, Safari, Edge */
.form-input:-webkit-autofill,
.form-textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px white inset;
  -webkit-text-fill-color: var(--color-neutral-900);
  transition: background-color 5000s ease-in-out 0s;
}

.form-input:-webkit-autofill:focus,
.form-textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 30px white inset, 0 0 0 3px var(--color-primary-100);
}

/* Firefox */
.form-input:-moz-autofill,
.form-textarea:-moz-autofill {
  background-color: white !important;
  color: var(--color-neutral-900) !important;
}

/* ============================================
   14. Inline Forms (горизонтальное расположение)
   ============================================ */

.form--inline {
  display: flex;
  gap: var(--space-4);
  align-items: flex-end;
}

.form--inline .form-group {
  flex: 1;
  margin-bottom: 0;
}

.form--inline button[type="submit"] {
  flex-shrink: 0;
}

/* Mobile: stack vertically */
@media (max-width: 640px) {
  .form--inline {
    flex-direction: column;
    align-items: stretch;
  }
  
  .form--inline .form-group {
    width: 100%;
  }
}

/* ============================================
   15. Compact Form (уменьшенные отступы)
   ============================================ */

.form--compact .form-group {
  margin-bottom: var(--space-4); /* 16px вместо 24px */
}

.form--compact .form-input,
.form--compact .form-textarea {
  padding: var(--space-2) var(--space-3); /* 8px 12px */
  min-height: 40px;
}

.form--compact .form-label {
  margin-bottom: var(--space-1); /* 4px */
  font-size: var(--font-size-sm); /* 14px */
}

/* ============================================
   16. Input Groups (с иконками или кнопками)
   ============================================ */

.input-group {
  display: flex;
  align-items: stretch;
}

.input-group .form-input {
  flex: 1;
  border-radius: 0;
}

.input-group .form-input:first-child {
  border-top-left-radius: var(--border-radius-md);
  border-bottom-left-radius: var(--border-radius-md);
}

.input-group .form-input:last-child {
  border-top-right-radius: var(--border-radius-md);
  border-bottom-right-radius: var(--border-radius-md);
}

.input-group-addon {
  display: flex;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-neutral-100);
  border: var(--border-width-medium) solid var(--color-neutral-300);
  color: var(--color-neutral-700);
  font-size: var(--font-size-base);
  white-space: nowrap;
}

.input-group-addon:first-child {
  border-right: none;
  border-top-left-radius: var(--border-radius-md);
  border-bottom-left-radius: var(--border-radius-md);
}

.input-group-addon:last-child {
  border-left: none;
  border-top-right-radius: var(--border-radius-md);
  border-bottom-right-radius: var(--border-radius-md);
}

/* ============================================
   17. Адаптивность (Mobile)
   ============================================ */

@media (max-width: 640px) {
  .form-input,
  .form-textarea,
  .form-select {
    font-size: 16px; /* Предотвращает zoom на iOS */
    padding: var(--space-2) var(--space-3); /* 8px 12px */
  }
  
  .form-label {
    font-size: var(--font-size-sm); /* 14px */
  }
  
  .form-group {
    margin-bottom: var(--space-5); /* 20px вместо 24px */
  }
  
  .form-message {
    padding: var(--space-3); /* 12px вместо 16px */
    font-size: var(--font-size-sm); /* 14px */
  }
}

/* ============================================
   18. Accessibility
   ============================================ */

/* Prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .form-input,
  .form-textarea,
  .form-select {
    transition: none;
  }
  
  @keyframes form-loading {
    0%, 100% {
      content: "...";
    }
  }
}

/* ARIA live regions для screen readers */
.form-error[role="alert"],
.form-message[role="alert"] {
  /* Будет автоматически озвучено screen reader'ом */
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .form-input,
  .form-textarea,
  .form-select {
    border-width: 3px;
  }
  
  .form-input:focus,
  .form-textarea:focus,
  .form-select:focus {
    outline-width: 3px;
  }
}

/* ============================================
   19. Print Styles
   ============================================ */

@media print {
  .form-input,
  .form-textarea,
  .form-select {
    border: 1px solid #000;
    background: white;
    color: #000;
  }
  
  .form-message--success,
  .form-message--error {
    border: 2px solid #000;
    background: white;
    color: #000;
  }
  
  button[type="submit"] {
    display: none; /* Скрываем кнопки при печати */
  }
}