/*
 * چشمِ نمایش رمز عبور — فقط ظاهر و سطحِ کلیک؛ رفتارش در password-toggle.js است.
 *
 * چرا لازم شد: آیکن ۱۵ پیکسل است ولی افزونه ۳۸ پیکسل ارتفاع دارد. تا وقتی خودِ
 * آیکن هم هدفِ کلیک باشد، سطح کلیک از چند عنصر تشکیل شده و هر رفتار متفاوتی روی
 * آیکن (کشیدن، انتخاب متن، جابه‌جایی در حالت active) می‌تواند کلیک را ببلعد و
 * کاربر حس کند «وسطش نمی‌خورد ولی بالا و پایینش می‌خورد».
 *
 * راه‌حل: آیکن نسبت به اشاره‌گر شفاف می‌شود و کل افزونه یک هدفِ یکپارچه.
 *
 * انتخابگر به data-password-toggle بسته است — همان نشانی که اسکریپت روی افزونه‌های
 * واقعیِ رمز می‌گذارد. یعنی اگر اسکریپت بالا نیاید، این ظاهرِ کلیک‌پذیر هم ظاهر
 * نمی‌شود و به کاربر وعده‌ی دکمه‌ای داده نمی‌شود که کار نمی‌کند.
 */
.input-group-merge .input-group-text[data-password-toggle] {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* کلیک روی آیکن باید به افزونه برسد، نه این‌که خودش هدف باشد. */
.input-group-merge .input-group-text[data-password-toggle] > i {
  pointer-events: none;
}

.input-group-merge .input-group-text[data-password-toggle]:focus-visible {
  outline: 2px solid var(--bs-primary, #696cff);
  outline-offset: -2px;
}