/* Segush Ajax Search – frontend styles */

.sas-search {
	--sas-radius: 10px;
	--sas-border: #dfe3e8;
	--sas-muted: #6b7280;
	--sas-accent: #2563eb;
	--sas-surface: #fff;

	position: relative;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	text-align: start;
}

.sas-search *,
.sas-search *::before,
.sas-search *::after {
	box-sizing: border-box;
}

/* ---------- فرم ---------- */
.sas-form {
	--sas-height: 52px;

	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
	width: 100%;
	background: transparent;
	border: 0;
	padding: 0;
}

/* کادر متن: مرز و پس‌زمینه فقط روی این بخش است */
.sas-field {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px;
	flex: 1 1 auto;
	min-width: 0;
	min-height: var(--sas-height);
	padding: 0 16px;
	background: var(--sas-surface);
	border: 1px solid var(--sas-border);
	border-radius: var(--sas-radius);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.sas-field:focus-within {
	border-color: var(--sas-accent);
}

/* گوشه‌های چسبیده کادر و دکمه (اولویت بالاتر از استایل المنتور) */
.sas-search .sas-form--has-button:not(.sas-form--inside) .sas-field {
	border-start-end-radius: 0;
	border-end-end-radius: 0;
}

.sas-search .sas-form--has-button:not(.sas-form--inside) .sas-submit {
	border-start-start-radius: 0;
	border-end-start-radius: 0;
}

.sas-icon {
	display: inline-flex;
	align-items: center;
	color: var(--sas-muted);
	flex: 0 0 auto;
}

@media (max-width: 782px) {
	/* iOS برای فونت کوچک‌تر از ۱۶px هنگام فوکوس صفحه را زوم می‌کند */
	.sas-search .sas-form .sas-input {
		font-size: 16px;
	}
}

.sas-form .sas-input {
	flex: 1 1 0%;
	width: auto;
	min-width: 0;
	max-width: none;
	float: none;
	display: block;
	height: calc(var(--sas-height) - 2px);
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	outline: none;
	font: inherit;
	color: inherit;
	line-height: 1.6;
	border-radius: 0;
}

.sas-input::-webkit-search-cancel-button,
.sas-input::-webkit-search-decoration {
	-webkit-appearance: none;
	appearance: none;
}

.sas-clear[hidden] {
	display: none;
}

.sas-clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--sas-muted);
	cursor: pointer;
	flex: 0 0 auto;
	align-self: center;
	line-height: 1;
}

.sas-clear:hover {
	background: rgba(0, 0, 0, .06);
}

.sas-spinner {
	display: none;
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	border: 2px solid var(--sas-border);
	border-top-color: var(--sas-accent);
	border-radius: 50%;
	animation: sas-spin .7s linear infinite;
}

.sas-is-loading .sas-spinner {
	display: block;
}

@keyframes sas-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sas-spinner {
		animation-duration: 2s;
	}
}

.sas-submit {
	flex: 0 0 auto;
	align-self: stretch;
	min-height: var(--sas-height);
	padding: 0 26px;
	border: 0;
	border-radius: var(--sas-radius);
	white-space: nowrap;
	background: var(--sas-accent);
	color: #fff;
	font: inherit;
	line-height: 1;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}

.sas-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.sas-submit:hover {
	filter: brightness(.94);
}

.sas-submit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.sas-submit-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.sas-submit--icon-only {
	padding: 0;
	width: var(--sas-height);
	aspect-ratio: 1 / 1;
}

/* ---------- حالت «دکمه داخل کادر» ---------- */
.sas-form--inside {
	--sas-pad: 5px;

	align-items: stretch;
	min-height: var(--sas-height);
	padding: var(--sas-pad);
	background: var(--sas-surface);
	border: 1px solid var(--sas-border);
	border-radius: 999px;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.sas-search .sas-form--inside .sas-field {
	background: transparent;
	border: 0;
	box-shadow: none;
	border-radius: 0;
}

.sas-form--inside .sas-field {
	min-height: 0;
	padding-inline: 18px 6px;
}

.sas-form--inside:focus-within {
	border-color: var(--sas-accent);
}

.sas-form--inside .sas-submit {
	min-height: 0;
	height: auto;
	align-self: stretch;
	background: #cfe8f7;
	color: #2b8bc9;
	border-radius: 999px;
}

.sas-form--inside .sas-submit--icon-only {
	width: auto;
	padding: 0;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
}

/* ---------- پنل نتایج ---------- */
.sas-panel-close {
	position: absolute;
	top: 10px;
	inset-inline-end: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #e11d48;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.sas-panel-close:hover {
	background: rgba(225, 29, 72, .1);
}

.sas-panel--dropdown .sas-panel-close {
	display: none;
}

.sas-panel-body {
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

/* حالت پاپ‌آپ: کارت مستقل روی صفحه */
.sas-panel--popup {
	position: fixed;
	top: 50%;
	left: 50%;
	right: auto;
	transform: translate(-50%, -50%);
	width: 600px;
	max-width: calc(100vw - 24px);
	max-height: 82vh;
	max-height: 82dvh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	z-index: 100000;
	margin: 0;
}

.sas-panel--popup .sas-panel-body {
	padding-top: 44px;
	max-height: none;
	flex: 1 1 auto;
}

.sas-panel--dropdown {
	position: absolute;
	inset-inline-start: 0;
	inset-inline-end: auto;
	top: 100%;
	width: 500px;
	max-width: calc(100vw - 24px);
	z-index: 9999;
	margin-top: 8px;
	max-height: 60vh;
	max-height: 60dvh;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--sas-surface);
	border: 1px solid var(--sas-border);
	border-radius: var(--sas-radius);
	box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
	-webkit-overflow-scrolling: touch;
}

.sas-panel[hidden] {
	display: none;
}

/* استایل مشترک هر دو حالت */
.sas-panel {
	background: var(--sas-surface);
	border: 1px solid var(--sas-border);
	border-radius: var(--sas-radius);
	box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
}

.sas-panel--popup {
	box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}

/* ---------- تب‌های نتایج (کنار هم) ---------- */
.sas-restabs {
	display: flex;
	align-items: stretch;
	gap: 4px;
	padding: 6px 8px 0;
	border-bottom: 1px solid var(--sas-border);
	background: rgba(0, 0, 0, .02);
	overflow-x: auto;
	scrollbar-width: none;
}

.sas-restabs::-webkit-scrollbar {
	display: none;
}

.sas-restab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	margin: 0;
	padding: 8px 14px;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: transparent;
	font: inherit;
	font-size: .88em;
	font-weight: 400;
	line-height: 1.7;
	color: var(--sas-muted);
	cursor: pointer;
	white-space: nowrap;
	transition: color .15s ease, border-color .15s ease;
}

.sas-restab:hover {
	color: var(--sas-accent);
}

.sas-restab.is-current {
	color: var(--sas-accent);
	border-bottom-color: var(--sas-accent);
}

.sas-restab-count {
	padding: 0 7px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .06);
	font-size: .82em;
	font-weight: 400;
	line-height: 1.9;
	color: var(--sas-muted);
}

.sas-group[hidden] {
	display: none;
}

/* هیچ متن بولد یا تیتری داخل پنل نمایش داده نشود */
.sas-panel-body h1,
.sas-panel-body h2,
.sas-panel-body h3,
.sas-panel-body h4,
.sas-panel-body h5,
.sas-panel-body h6,
.sas-panel-body strong,
.sas-panel-body b,
.sas-panel-body .sas-mark {
	margin: 0;
	font-size: inherit;
	font-weight: 400;
}

.sas-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sas-item {
	list-style: none;
	margin: 0;
}

.sas-item + .sas-item {
	border-top: 1px solid rgba(0, 0, 0, .05);
}

.sas-item-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	color: inherit;
	text-decoration: none;
	transition: background-color .15s ease;
}

.sas-item-link:hover,
.sas-item-link.is-active,
.sas-item-link:focus-visible {
	background: rgba(37, 99, 235, .06);
	outline: none;
}

.sas-thumb {
	flex: 0 0 auto;
	display: block;
	width: 52px;
	height: 52px;
	overflow: hidden;
	border-radius: 8px;
	background: rgba(0, 0, 0, .04);
}

.sas-thumb img {
	display: block;
	width: 52px;
	height: 52px;
	object-fit: cover;
	border-radius: 8px;
}

.sas-item-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1 1 auto;
}

.sas-item-title {
	display: block;
	font-size: .95em;
	font-weight: 400;
	line-height: 1.6;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sas-item-excerpt {
	font-size: .82em;
	color: var(--sas-muted);
	line-height: 1.7;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sas-item-price,
.sas-item-meta {
	font-size: .85em;
	color: var(--sas-accent);
	line-height: 1.6;
}

.sas-item-meta {
	color: var(--sas-muted);
}

.sas-item-price del {
	opacity: .55;
	margin-inline-end: 6px;
}

.sas-item-badge {
	flex: 0 0 auto;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .06);
	font-size: .72em;
	color: var(--sas-muted);
}

.sas-mark {
	background: rgba(250, 204, 21, .35);
	color: inherit;
	padding: 0 1px;
	border-radius: 2px;
}

.sas-group-more {
	display: block;
	padding: 8px 14px 12px;
	font-size: .84em;
	color: var(--sas-accent);
	text-decoration: none;
}

.sas-group-more:hover {
	text-decoration: underline;
}

.sas-all {
	display: block;
	padding: 12px 14px;
	border-top: 1px solid var(--sas-border);
	background: rgba(0, 0, 0, .02);
	color: var(--sas-accent);
	font-size: .88em;
	text-align: center;
	text-decoration: none;
}

.sas-all:hover {
	background: rgba(37, 99, 235, .08);
}

.sas-empty {
	padding: 18px 14px;
	text-align: center;
	font-size: .88em;
	color: var(--sas-muted);
}

/* ---------- موبایل ---------- */
@media (max-width: 767px) {
	.sas-form {
		--sas-height: 48px;
	}

	.sas-field {
		padding: 0 12px;
		gap: 8px;
	}

	.sas-item-link {
		padding: 9px 12px;
	}

	.sas-thumb,
	.sas-thumb img {
		width: 44px;
		height: 44px;
	}

	.sas-card-thumb img {
		height: 140px;
	}

	.sas-cards {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: 12px;
	}
}

@media (max-width: 480px) {
	.sas-submit {
		padding: 0 12px;
	}

	.sas-panel--dropdown {
		width: 100%;
		max-height: 70vh;
		max-height: 65dvh;
	}

	.sas-panel--popup {
		width: calc(100vw - 20px);
		max-height: 88dvh;
	}

	.sas-submit {
		padding: 0 14px;
		font-size: .9em;
	}

	.sas-tab {
		padding: 6px 12px;
		font-size: .85em;
	}
}

/* ---------- صفحه نتایج ---------- */
.sas-results {
	width: 100%;
}

.sas-results-header {
	margin-bottom: 24px;
}

.sas-results-title {
	margin: 0 0 6px;
}

.sas-results-count {
	color: var(--sas-muted, #6b7280);
	font-size: .92em;
}

.sas-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 20px 0 28px;
	padding: 0;
	list-style: none;
}

.sas-tab {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid #dfe3e8;
	border-radius: 999px;
	color: inherit;
	font-size: .9em;
	text-decoration: none;
}

.sas-tab.is-current {
	background: #2563eb;
	border-color: #2563eb;
	color: #fff;
}

.sas-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 18px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.sas-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #eceff3;
	border-radius: 12px;
	background: #fff;
}

.sas-card-thumb img {
	display: block;
	width: 100%;
	height: 170px;
	object-fit: cover;
}

.sas-card-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px;
}

.sas-card-title {
	margin: 0;
	font-size: 1em;
	line-height: 1.7;
}

.sas-card-title a {
	color: inherit;
	text-decoration: none;
}

.sas-card-excerpt {
	margin: 0;
	font-size: .85em;
	line-height: 1.9;
	color: #6b7280;
}

.sas-card-price {
	font-size: .9em;
	color: #2563eb;
}

.sas-section-title {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 16px;
}

.sas-section-more {
	font-size: .82em;
	color: #2563eb;
	text-decoration: none;
}

.sas-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 24px 0;
}

.sas-pagination .page-numbers {
	padding: 6px 12px;
	border: 1px solid #dfe3e8;
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
}

.sas-pagination .page-numbers.current {
	background: #2563eb;
	border-color: #2563eb;
	color: #fff;
}