/* ═══════════════════════════════════════════════════════════
   FORMALAR UCHUN — FAQAT MAYDONLAR
   ───────────────────────────────────────────────────────────
   Bu fayl FAQAT input / select / textarea va ularning
   konteyneriga ta'sir qiladi.

   TEGILMAYDI:
     ✗ button / .btn / .auth-btn / a
     ✗ ikonkalar (i, svg)
     ✗ matn ranglari, shrift, sarlavhalar

   Maqsad: chiroyli fon, chuqur soya, silliq o'tish.
   ═══════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────
   1. KIRISH MAYDONLARI
   text · email · password · number · tel · search · url
   ─────────────────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
select,
textarea {
  /* ── Fon: yumshoq, chuqurroq (Apple uslubi) ── */
  background:
    linear-gradient(180deg, rgba(255,255,255,.92) 0%, rgba(252,252,253,.96) 100%) !important;
  background-color: #fbfbfd !important;

  /* ── Chegara: yumshoq, aniq ── */
  border: 1px solid rgba(0,0,0,.10) !important;

  /* ── Radius: yumshoq burchaklar ── */
  border-radius: 14px !important;

  /* ── Soya: ichida botiq + tashqarida yumshoq ── */
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.045),
    inset 0 -1px 0 rgba(255,255,255,.7),
    0 1px 2px rgba(0,0,0,.04),
    0 3px 10px rgba(0,0,0,.05) !important;

  /* ── Joylashuv ── */
  padding: 13px 16px !important;
  margin: 0 !important;

  /* ── Silliq o'tish ── */
  transition:
    box-shadow .26s cubic-bezier(.22,.61,.36,1),
    border-color .26s cubic-bezier(.22,.61,.36,1),
    background-color .26s cubic-bezier(.22,.61,.36,1),
    transform .26s cubic-bezier(.22,.61,.36,1) !important;

  /* iOS brauzerida avtomatik kattalashmasin */
  -webkit-appearance: none;
  appearance: none;
  font-size: 16px !important;
  line-height: 1.45;
  width: 100%;
  box-sizing: border-box;
}

/* ───────────────────────────────────────────────────────────
   2. FOKUS — yorqin halqa + ko'tarilish
   ─────────────────────────────────────────────────────────── */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
select:focus,
textarea:focus {
  outline: none !important;
  background-color: #fff !important;
  border-color: rgba(10,132,255,.55) !important;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.03),
    0 0 0 4px rgba(10,132,255,.14),
    0 6px 18px rgba(10,132,255,.16) !important;
  transform: translateY(-1px);
}

/* ───────────────────────────────────────────────────────────
   3. BOSILGAN HOLAT (active)
   ─────────────────────────────────────────────────────────── */
input:active,
select:active,
textarea:active {
  transform: translateY(0) scale(.997);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.07),
    0 1px 2px rgba(0,0,0,.05) !important;
  transition-duration: .08s;
}

/* ───────────────────────────────────────────────────────────
   4. TO'LDIRILGAN HOLAT (qiymat bor)
   ─────────────────────────────────────────────────────────── */
input:not(:placeholder-shown):not([type="checkbox"]),
textarea:not(:placeholder-shown) {
  background-color: #fff !important;
  border-color: rgba(0,0,0,.14) !important;
}
input:not(:placeholder-shown):focus,
textarea:not(:placeholder-shown):focus {
  border-color: rgba(10,132,255,.55) !important;
}

/* ───────────────────────────────────────────────────────────
   5. PLACEHOLDER — yumshoq (rang emas, faqat yoqimlilik)
   ─────────────────────────────────────────────────────────── */
input::placeholder,
textarea::placeholder {
  color: rgba(60,60,67,.42) !important;
  opacity: 1;
  transition: opacity .2s ease;
}
input:hover::placeholder,
textarea:hover::placeholder { opacity: .78; }
input:focus::placeholder,
textarea:focus::placeholder { opacity: .38; }

/* ───────────────────────────────────────────────────────────
   6. KENGROQ MAYDON (textarea)
   ─────────────────────────────────────────────────────────── */
textarea {
  min-height: 118px !important;
  resize: vertical;
  line-height: 1.62 !important;
  padding: 14px 16px !important;
}

/* ───────────────────────────────────────────────────────────
   7. SELECT — o'n strelcha
   ─────────────────────────────────────────────────────────── */
select {
  padding-right: 42px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(60,60,67,.62) 50%),
    linear-gradient(135deg, rgba(60,60,67,.62) 50%, transparent 50%) !important;
  background-position:
    calc(100% - 21px) calc(50% + 1px),
    calc(100% - 15px) calc(50% + 1px) !important;
  background-size: 6px 6px, 6px 6px !important;
  background-repeat: no-repeat !important;
  cursor: pointer;
}
select option {
  background: #fff;
  color: #1d1d1f;
}

/* ───────────────────────────────────────────────────────────
   8. KONTEYNER (input-wrapper / input-group)
   Fon va soya kuchaytiriladi, LEKIN ikon tegilmaydi.
   ─────────────────────────────────────────────────────────── */
.input-wrapper,
.input-group {
  position: relative;
  transition:
    filter .26s cubic-bezier(.22,.61,.36,1),
    transform .26s cubic-bezier(.22,.61,.36,1) !important;
}
.input-group:focus-within {
  transform: translateY(-1px);
}
.input-group label {
  transition: opacity .22s ease !important;
}

/* ───────────────────────────────────────────────────────────
   9. KIRISHDAN KEYIN XATO HOLATI
   ─────────────────────────────────────────────────────────── */
.input-group.error input,
input.error,
input[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: rgba(255,69,58,.55) !important;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.04),
    0 0 0 4px rgba(255,69,58,.12),
    0 4px 12px rgba(255,69,58,.12) !important;
}

/* ───────────────────────────────────────────────────────────
   10. O'CHIQ HOLAT
   ─────────────────────────────────────────────────────────── */
input:disabled,
select:disabled,
textarea:disabled {
  background: rgba(120,120,128,.07) !important;
  border-color: rgba(0,0,0,.06) !important;
  box-shadow: none !important;
  cursor: not-allowed;
  opacity: .62;
  transform: none !important;
}

/* ───────────────────────────────────────────────────────────
   11. CHECKBOX / RADIO — tegilmadi, faqat
       yumshoq holat (bular allaqachon chiroyli)
   ─────────────────────────────────────────────────────────── */
input[type="checkbox"],
input[type="radio"] {
  transition: transform .18s cubic-bezier(.22,.61,.36,1) !important;
}
input[type="checkbox"]:active,
input[type="radio"]:active { transform: scale(.92); }

/* ───────────────────────────────────────────────────────────
   12. KECH QORONGI REJIM
   ─────────────────────────────────────────────────────────── */
body.theme-dark input[type="text"],
body.theme-dark input[type="email"],
body.theme-dark input[type="password"],
body.theme-dark input[type="number"],
body.theme-dark input[type="tel"],
body.theme-dark input[type="search"],
body.theme-dark input[type="url"],
body.theme-dark select,
body.theme-dark textarea,
.theme-dark input[type="text"],
.theme-dark input[type="email"],
.theme-dark input[type="password"],
.theme-dark input[type="number"],
.theme-dark input[type="tel"],
.theme-dark input[type="search"],
.theme-dark input[type="url"],
.theme-dark select,
.theme-dark textarea {
  background-color: #1c1c1e !important;
  background-image: linear-gradient(180deg, #232326 0%, #1c1c1e 100%) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.4),
    0 1px 3px rgba(0,0,0,.3) !important;
  color: #f5f5f7 !important;
}
.theme-dark input:focus,
.theme-dark select:focus,
.theme-dark textarea:focus {
  background-color: #2c2c2e !important;
  background-image: none !important;
  border-color: rgba(10,132,255,.7) !important;
  box-shadow:
    0 0 0 4px rgba(10,132,255,.22),
    0 6px 20px rgba(0,0,0,.4) !important;
}
.theme-dark input::placeholder,
.theme-dark textarea::placeholder {
  color: rgba(235,235,245,.38) !important;
}
.theme-dark select option { background: #1c1c1e; color: #f5f5f7; }
.theme-dark select {
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(235,235,245,.6) 50%),
    linear-gradient(135deg, rgba(235,235,245,.6) 50%, transparent 50%) !important;
}

/* ───────────────────────────────────────────────────────────
   13. MOBIL
   ─────────────────────────────────────────────────────────── */
@media (max-width:768px){
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  select,
  textarea {
    padding: 13px 15px !important;
    border-radius: 13px !important;
    font-size: 16px !important;   /* iOS zoom bo\u0301lmasin */
  }
  /* Mobilda fokusda ko\u0301tarilmasin \u2014 barmoq bilan
     fokus kengayishi kerak, lekin sahifa siljinmasin */
  input:focus,
  select:focus,
  textarea:focus {
    transform: none;
  }
  textarea { min-height: 104px !important; }
}

/* ───────────────────────────────────────────────────────────
   14. HARAKATNI HURMAT QILISH
   ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  input, select, textarea, .input-group, .input-wrapper {
    transition-duration: .01ms !important;
  }
  input:focus, select:focus, textarea:focus,
  input:active, select:active, textarea:active {
    transform: none !important;
  }
}

/* ============================================================
   ISTISNOLAR — bu inputlar o‘z dizayniga ega
   ============================================================
   words sahifasi va boshqa "wrapper ichidagi" inputlar:
   ular allaqachon ramkali konteynerda, qo‘shimcha ramka
   ikki qatlamli qilib ko‘rsatadi.
   ============================================================ */
.search-input,
input.search-input,
.vocab-search-input,
#vocabSearchInput,
.chat-input,
#chatInput {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
}
.search-input:focus,
input.search-input:focus,
#vocabSearchInput:focus,
.chat-input:focus,
#chatInput:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}
.search-input::placeholder,
#vocabSearchInput::placeholder {
  color: var(--text-dim, rgba(60,60,67,.42)) !important;
}