/**
 * Design System v2 — Search fields with icon (نسخه 1.3.1)
 *
 * آیکن ذره‌بینِ درون‌خط (data-URI، بدون منبع بیرونی) روی فیلدهای جستجو. RTL: آیکن
 * سمت راست و فاصله‌ی متن از راست. فقط کلاس‌محور و داخل کانتینر پلاگین.
 *
 * @package Clinic_Manager
 */

.clinic-wrap input[type="search"].clinic-input,
.clinic-wrap .clinic-search-main,
.clinic-wrap .clinic-search-input,
.clinic-wrap .clinic-search-form .clinic-input {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: var( --clinic-space-20 );
    border-radius: 10px;
	min-width: 90% !important;
}

/* در حالت LTR آیکن به چپ منتقل می‌شود. */
body.clinic-ltr .clinic-wrap input[type="search"].clinic-input,
body.clinic-ltr .clinic-wrap .clinic-search-main,
body.clinic-ltr .clinic-wrap .clinic-search-input {
	background-position: left 12px center;
	padding-right: var( --clinic-space-7 );
	padding-left: var( --clinic-space-20 );
}

/* فرم جستجوی عمومی با آیکنِ معنایی قابل‌تنظیم از طریق متغیر. */
.clinic-wrap .clinic-search-form {
	position: relative;
	display: flex;
	gap: var(--spacing-2, 8px);
	align-items: center;
}

/* حالت بارگذاری (اسپینر کوچک کنار فیلد) */
.clinic-wrap .clinic-search-form.is-loading::after {
	content: '';
	position: absolute;
	left: var( --clinic-space-7 );
	top: 50%;
	width: 14px;
	height: 14px;
	margin-top: -7px;
	border: 2px solid var(--clinic-gray-300);
	border-top-color: var(--clinic-primary);
	border-radius: 50%;
	animation: clinicSpin 0.6s linear infinite;
}

/* ════════════════════════════════════════════════════════════════════════════
 * STEP 223-B — عمقِ بُعدیِ فیلدهای جستجو (STEP 155) حذف شد.
 *
 * این قاعده تخصصِ ۰،۲،۰ داشت و بر قاعده‌ی پایه‌ی فیلد غلبه می‌کرد، پس تا وقتی
 * حذف نمی‌شد، حذفِ سایه در forms-v2.css روی فیلدهای جستجو **اثری نداشت**.
 * حالتِ focus از همان قاعده‌ی outlineِ مشترک می‌آید (فیلدهای جستجو کلاسِ
 * `.clinic-input` را هم دارند)، پس نشانه‌ی فوکوس از دست نمی‌رود.
 * ──────────────────────────────────────────────────────────────────────────── */
.clinic-wrap .clinic-search-main,
.clinic-wrap .clinic-search-input {
	box-shadow: none;
}
.clinic-wrap .clinic-search-main:focus,
.clinic-wrap .clinic-search-input:focus {
	outline: var(--clinic-field-focus-w, 2px) solid var(--clinic-field-focus, var(--clinic-primary, #4B2E83));
	outline-offset: var(--clinic-field-focus-offset, 1px);
	box-shadow: none;
}