/* ============================================================================
 * BanglaIT Design — ফর্ম-কন্ট্রোল থিম v1 (সেট-১২)
 *
 * সাইটের সব ফরম ইনপুট (.input, select, textarea, checkbox, radio, file)
 * একই পরিচ্ছন্ন ভাষায় সাজায় — স্টোরফ্রন্ট, অ্যাকাউন্ট, লগইন ও অ্যাডমিন সব
 * লেআউটেই <link> এর মাধ্যমে যুক্ত (Vite বিল্ড-স্টেপ ছাড়াই, কেশ-বাস্টসহ)।
 * অ্যাডমিনের গ্লাস-থিম (public/css/admin-theme.css) এর সাথে সামঞ্জস্যপূর্ণ;
 * brand রঙ আগে অ্যাডমিন-রানটাইম অ্যাকসেন্ট (--adm-brand), না থাকলে সাইট
 * থোকেন (--color-brand-600) অনুসরণ করে।
 * ==========================================================================*/
:root {
  --frm-brand: var(--adm-brand, var(--color-brand-600, #059669));
  --frm-brand-strong: var(--adm-brand-strong, var(--color-brand-700, #047857));
  --frm-brand-soft: var(--adm-brand-soft, var(--color-brand-500, #10b981));
  --frm-ink: #334155;
  --frm-line: #e2e8f0;
  --frm-line-strong: #cbd5e1;
}

/* ── টেক্সট ইনপুট / টেক্সটএরিয়া ────────────────────────────────────────── */
.input {
  border: 1px solid var(--frm-line);
  background: #fff;
  box-shadow: 0 1px 2px rgb(15 23 42 / .04);
  transition: border-color .16s ease, box-shadow .18s ease, background-color .16s ease;
}
.input::placeholder { color: #94a3b8; opacity: 1; }
.input:hover { border-color: var(--frm-line-strong); }
.input:focus,
.input:focus-visible {
  outline: none;
  border-color: var(--frm-brand-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--frm-brand) 16%, transparent), 0 10px 24px -18px color-mix(in srgb, var(--frm-brand) 55%, transparent);
}
.input:disabled,
.input[readonly] {
  background: #f1f5f9;
  color: #64748b;
  cursor: not-allowed;
  box-shadow: none;
  border-style: dashed;
}

/* validation — ফিল্ড এরর দেখালে ইনপুটও লাল ছোঁয়া পাবে (CSS-only হিন্ট) */
.input:user-invalid { border-color: #fda4af; }
.input:user-invalid:focus { box-shadow: 0 0 0 3px rgb(244 63 94 / .14); }

/* ── ডার্ক মোড ─────────────────────────────────────────────────────────── */
.dark .input {
  background: #0f172a;
  border-color: #1e293b;
  color: #e2e8f0;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .03);
}
.dark .input::placeholder { color: #475569; }
.dark .input:hover { border-color: #334155; }
.dark .input:focus { border-color: var(--frm-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--frm-brand) 26%, transparent); }
.dark .input:disabled,
.dark .input[readonly] { background: #0b1220; color: #64748b; }

/* ক্রোমের অটোফিল সাদা ব্লক ডার্ক মোডে ভেতর থেকে ঠিক করা */
.dark .input:-webkit-autofill,
.dark .input:-webkit-autofill:hover,
.dark .input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px #0f172a inset, 0 0 0 3px color-mix(in srgb, var(--frm-brand) 16%, transparent);
  -webkit-text-fill-color: #e2e8f0;
  caret-color: #e2e8f0;
  transition: background-color 9999s ease-out;
}

/* ── লেবেল ও এরর-মেসেজ ────────────────────────────────────────────────── */
.label { font-weight: 600; color: var(--frm-ink); letter-spacing: .005em; }
.dark .label { color: #94a3b8; }
.field-error {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .4rem;
  padding: .22rem .6rem .24rem;
  border-radius: .55rem;
  background: rgb(244 63 94 / .07);
  border: 1px solid rgb(244 63 94 / .18);
  color: #e11d48;
  font-size: .8rem;
  line-height: 1.45;
}
.field-error::before { content: "!"; font-weight: 800; opacity: .75; }
.dark .field-error { color: #fb7185; background: rgb(244 63 94 / .1); border-color: rgb(244 63 94 / .22); }

/* ── সিলেক্ট: কাস্টম শেভ্রন (ডেটা-URI, কোনো এক্সটার্নাল অ্যাসেট নয়) ───── */
select.input {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding-right: 2.35rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: 15px 15px;
}
.dark select.input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}
select.input option { background: #fff; color: #0f172a; }
.dark select.input option { background: #0f172a; color: #e2e8f0; }

/* Product filters: suppress the native indicator and show exactly one branded
   SVG chevron. Keep the explicit rule scoped here for consistent browser output. */
select.input.product-filter-select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding-right: 2.35rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  background-size: 15px 15px;
}
.dark select.input.product-filter-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}

/* ── টেক্সটএরিয়া ──────────────────────────────────────────────────────── */
textarea.input { min-height: 6.5rem; resize: vertical; line-height: 1.55; }

/* ── ফাইল পিকার: ড্রপজোনের মতো ফील ───────────────────────────────────── */
.input[type="file"] {
  padding: .55rem .75rem;
  border-style: dashed;
  background: #f8fafc;
  cursor: pointer;
  font-size: .85rem;
}
.input[type="file"]:hover { border-color: var(--frm-brand-soft); background: #fff; }
.input[type="file"]::file-selector-button {
  margin-inline-end: .8rem;
  padding: .34rem .85rem;
  border: 0;
  border-radius: .65rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--frm-brand) 92%, white), var(--frm-brand));
  color: #fff;
  font-weight: 600;
  font-size: .8rem;
  cursor: pointer;
  transition: filter .15s ease;
}
.input[type="file"]::file-selector-button:hover { filter: brightness(1.06); }
.dark .input[type="file"] { background: #0b1220; color: #e2e8f0; }
.dark .input[type="file"]:hover { background: #0f172a; }

/* ── চেকবক্স / রেডিও ──────────────────────────────────────────────────── */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--frm-brand);
  width: 1.05rem;
  height: 1.05rem;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease;
}
input[type="checkbox"] { border-radius: .3rem; }
input[type="checkbox"]:active,
input[type="radio"]:active { transform: scale(.92); }
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--frm-brand) 30%, transparent);
}
input[type="checkbox"]:checked,
input[type="radio"]:checked { transform: scale(1.04); }
input[type="checkbox"]:disabled,
input[type="radio"]:disabled { opacity: .45; cursor: not-allowed; }

/* ── নাম্বার: স্পিনার নরম ─────────────────────────────────────────────── */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { opacity: .35; }
input[type="number"]:hover::-webkit-inner-spin-button,
input[type="number"]:hover::-webkit-outer-spin-button { opacity: .8; }

/* ── search ইনপুটের ডিফল্ট ক্লিয়ার-X স্টাইল একরকম ───────────────────────── */
input[type="search"]::-webkit-search-cancel-button { opacity: .55; }

/* মোবাইলে ফর্ম-জুম এড়াতে ইনপুট ফন্ট ≥16px হলে ব্রাউজার জুম করে না;
   .input ইতিমধ্যেই text-sm (14px) — বড় স্ক্রিনে ঠিক, ছোটে সামান্য বাড়ানো */
@media (max-width: 640px) {
  .input { font-size: 15.5px; }
  textarea.input { min-height: 7.5rem; }
}

/* মোশন-সংবেদনশীল ব্যবহারকারী: ট্রানজিশন বন্ধ */
@media (prefers-reduced-motion: reduce) {
  .input, .input:hover, .input:focus,
  input[type="checkbox"], input[type="radio"] { transition-duration: .01ms !important; }
}