/* mobile-form — telefonda tək sütunlu forma: mətn, seçim, rəqəm, uzun mətn.
 *
 * Web formundan (form-layout) fərqi FİZİKİdir:
 *  - hər zaman TƏK sütun - iki sütunlu grid telefonda sahələri sıxışdırır;
 *  - toxunma hədəfləri >= 2.75rem (44px) - kursor dəqiqliyi yoxdur;
 *  - inputların `font-size` >= 1rem olmalıdır, yoxsa iOS Safari sahəyə
 *    fokuslananda səhifəni avtomatik yaxınlaşdırır (zoom) və layout sınır -
 *    bu, `--size-sm` (14px) ilə YAZILA BİLMƏZ, ona görə burada sabit 1rem verilib.
 */

.mobile-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  font-family: var(--font-body);
}

.mobile-form__title {
  margin: 0;
  font-size: var(--size-lg);
  font-weight: var(--weight-semibold);
  color: var(--text);
}

.mobile-form__field { display: grid; gap: var(--space-2); min-width: 0; }

.mobile-form__label {
  font-size: var(--size-sm);
  font-weight: var(--weight-medium);
  color: var(--text);
}

.mobile-form__required { color: var(--danger); }

.mobile-form__input,
.mobile-form__select,
.mobile-form__textarea {
  font: inherit;
  /* iOS zoom tələsi: 1rem-dən kiçik font-size sahəyə fokuslananda
     Safari-ni səhifəni yaxınlaşdırmağa vadar edir. */
  font-size: 1rem;
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  transition: border-color var(--duration-fast) var(--ease-out-quart);
}

.mobile-form__input::placeholder,
.mobile-form__textarea::placeholder { color: var(--text-muted); }

.mobile-form__input:hover,
.mobile-form__select:hover,
.mobile-form__textarea:hover { border-color: var(--primary-border); }

.mobile-form__input:focus-visible,
.mobile-form__select:focus-visible,
.mobile-form__textarea:focus-visible,
.mobile-form__submit:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

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

/* --- Seçim sahəsi: platformanın öz açılan oxu gizlədilir, kitabxananın
   ikonu qoyulur ki, hər iki skin-də eyni görünsün. */
.mobile-form__select-wrap { position: relative; }

.mobile-form__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
}

.mobile-form__select-icon {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  transform: translateY(-50%);
  width: 1.125rem;
  height: 1.125rem;
  color: var(--text-muted);
  pointer-events: none;
}

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

.mobile-form__field--invalid .mobile-form__input { border-color: var(--danger); }

/* --- Aşağıdakı əsas düymə: tam enli, barmaqla asan basılır. */
.mobile-form__actions { margin-top: var(--space-2); }

.mobile-form__submit {
  font: inherit;
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-radius: var(--radius-md);
  background: var(--primary);
  color: var(--on-primary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out-quart);
}

.mobile-form__submit:hover { background: var(--primary-hover); }

/* Planşet və yuxarı: form telefon üçün qurulub, geniş ekranda
   oxunaqlı enlə mərkəzləşir. */
@media (min-width: 40rem) {
  .mobile-form {
    max-width: 32rem;
    margin-inline: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-form__input,
  .mobile-form__select,
  .mobile-form__textarea,
  .mobile-form__submit { transition: none; }
}