/* =============================================
   Search & Filter Custom Style v3
   هوية موقع عواد - #ffd114
   ============================================= */

:root {
	--sfcs-primary:       #ffd114;
	--sfcs-primary-hover: #ffdc57;
	--sfcs-dark:          #403230;
	--sfcs-dark2:         #574a48;
	--sfcs-muted:         #9b938d;
	--sfcs-light:         #ebe8e8;
	--sfcs-lighter:       #f6f5f5;
	--sfcs-white:         #ffffff;
	--sfcs-radius:        50px;
	--sfcs-radius-md:     16px;
	--sfcs-border:        1.5px solid #e0e0e0;
}

/* --- الفورم الأساسي --- */
.searchandfilter > div > ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 12px !important;
}

.searchandfilter > div > ul > li {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* إخفاء العناصر الأصلية */
.searchandfilter select#ofarea,
.searchandfilter select#ofpurpose,
.searchandfilter input[type="hidden"] {
	display: none !important;
}

/* =============================================
   صندوق المنطقة مع التاغ
   ============================================= */
.sfcs-tags-box {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	border: var(--sfcs-border);
	border-radius: var(--sfcs-radius);
	padding: 8px 16px;
	min-height: 48px;
	background: var(--sfcs-white);
	cursor: text;
	transition: border-color 0.2s;
	position: relative;
}

.sfcs-tags-box:focus-within {
	border-color: var(--sfcs-primary);
	box-shadow: 0 0 0 3px rgba(255,209,20,0.15);
}

.sfcs-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--sfcs-primary);
	border-radius: var(--sfcs-radius);
	padding: 4px 12px;
	font-size: 13px;
	color: var(--sfcs-dark);
	font-weight: 600;
}

.sfcs-tag .sfcs-remove {
	cursor: pointer;
	color: var(--sfcs-dark);
	font-size: 15px;
	line-height: 1;
	font-weight: 700;
	opacity: 0.6;
	transition: opacity 0.15s;
}

.sfcs-tag .sfcs-remove:hover {
	opacity: 1;
}

.sfcs-text-input {
	border: none !important;
	outline: none !important;
	font-size: 14px;
	color: var(--sfcs-muted);
	flex: 1;
	min-width: 80px;
	font-family: inherit;
	background: transparent;
	text-align: right;
	direction: rtl;
}

/* قائمة الاقتراحات */
.sfcs-dropdown-list {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	left: 0;
	background: var(--sfcs-white);
	border: var(--sfcs-border);
	border-radius: var(--sfcs-radius-md);
	max-height: 220px;
	overflow-y: auto;
	z-index: 9999;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	display: none;
}

.sfcs-dropdown-list.open {
	display: block;
}

.sfcs-dropdown-list .sfcs-group-label {
	padding: 8px 16px 4px;
	font-size: 11px;
	font-weight: 700;
	color: var(--sfcs-muted);
	letter-spacing: 0.05em;
	border-top: 1px solid var(--sfcs-light);
}

.sfcs-dropdown-list .sfcs-group-label:first-child {
	border-top: none;
}

.sfcs-dropdown-list .sfcs-option {
	padding: 9px 20px;
	font-size: 14px;
	color: var(--sfcs-dark);
	cursor: pointer;
	transition: background 0.1s;
	text-align: right;
	direction: rtl;
}

.sfcs-dropdown-list .sfcs-option:hover {
	background: var(--sfcs-primary);
	color: var(--sfcs-dark);
}

.sfcs-dropdown-list .sfcs-option.sfcs-child {
	padding-right: 32px;
	font-size: 13px;
	color: var(--sfcs-dark2);
}

/* =============================================
   نوع العقار - سيليكت
   ============================================= */
.searchandfilter select#ofestate-type {
	width: 100% !important;
	padding: 12px 16px !important;
	border: var(--sfcs-border) !important;
	border-radius: var(--sfcs-radius) !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 12'%3E%3Cpath fill='%239b938d' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: left 16px center !important;
	background-color: var(--sfcs-white) !important;
	font-size: 14px !important;
	font-family: inherit !important;
	cursor: pointer !important;
	color: var(--sfcs-dark) !important;
	outline: none !important;
	transition: border-color 0.2s !important;
	box-sizing: border-box !important;
}

.searchandfilter select#ofestate-type:focus {
	border-color: var(--sfcs-primary) !important;
	box-shadow: 0 0 0 3px rgba(255,209,20,0.15) !important;
}

/* =============================================
   أزرار الغاية Toggle
   ============================================= */
.sfcs-toggle-group {
	display: flex;
	gap: 8px;
	direction: rtl;
}

.sfcs-toggle-btn {
	flex: 1;
	padding: 11px 8px;
	border-radius: var(--sfcs-radius);
	border: var(--sfcs-border);
	background: var(--sfcs-white);
	color: var(--sfcs-dark);
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
	text-align: center;
	transition: all 0.15s;
	white-space: nowrap;
}

.sfcs-toggle-btn:hover {
	border-color: var(--sfcs-primary);
	background: var(--sfcs-primary-hover);
}

.sfcs-toggle-btn.active {
	background: var(--sfcs-primary);
	color: var(--sfcs-dark);
	border-color: var(--sfcs-primary);
	font-weight: 700;
}

/* =============================================
   زر البحث
   ============================================= */
.searchandfilter input[type="submit"] {
	width: 100% !important;
	padding: 14px !important;
	border-radius: var(--sfcs-radius) !important;
	background: var(--sfcs-primary) !important;
	color: var(--sfcs-dark) !important;
	border: none !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	font-family: inherit !important;
	cursor: pointer !important;
	transition: background 0.2s !important;
}

.searchandfilter input[type="submit"]:hover {
	background: var(--sfcs-primary-hover) !important;
}

/* =============================================
   Scrollbar
   ============================================= */
.sfcs-dropdown-list::-webkit-scrollbar { width: 4px; }
.sfcs-dropdown-list::-webkit-scrollbar-track { background: var(--sfcs-lighter); border-radius: 4px; }
.sfcs-dropdown-list::-webkit-scrollbar-thumb { background: var(--sfcs-light); border-radius: 4px; }

/* =============================================
   المنطقة الأم - عنوان فقط غير قابل للاختيار
   ============================================= */
.sfcs-dropdown-list .sfcs-group-label {
	cursor: default !important;
	user-select: none;
	background: var(--sfcs-lighter);
	color: var(--sfcs-dark2);
	font-weight: 700;
	font-size: 12px;
	padding: 8px 16px 6px;
}

.sfcs-dropdown-list .sfcs-group-label:hover {
	background: var(--sfcs-lighter) !important;
	color: var(--sfcs-dark2) !important;
}

.sfcs-dropdown-list .sfcs-option.sfcs-child {
	padding-right: 28px;
	font-size: 14px;
	color: var(--sfcs-dark);
	border-right: 3px solid var(--sfcs-light);
}

.sfcs-dropdown-list .sfcs-option.sfcs-child:hover {
	background: var(--sfcs-primary);
	border-right-color: var(--sfcs-primary);
	color: var(--sfcs-dark);
}