/**
 * Qattali Search
 *
 * Everything is scoped under .qs-* and built on logical properties
 * (inline-start/end) so the same stylesheet works in RTL and LTR without an
 * -rtl.css twin. Colours come from custom properties — override them on
 * .qs-search / .qs-results (or from the Elementor controls) to reskin.
 */

.qs-search,
.qs-results {
	--qs-fg: #16181d;
	--qs-muted: #6b7280;
	--qs-bg: #ffffff;
	--qs-surface: #f6f7f9;
	--qs-border: #e3e6ea;
	--qs-accent: #b8895a;
	--qs-accent-soft: rgba(184, 137, 90, 0.12);
	--qs-mark-bg: rgba(184, 137, 90, 0.22);
	--qs-radius: 14px;
	--qs-radius-sm: 10px;
	--qs-field-radius: 999px;
	--qs-shadow: 0 18px 44px -12px rgba(16, 24, 40, 0.22), 0 2px 6px rgba(16, 24, 40, 0.06);
	--qs-font: inherit;

	font-family: var(--qs-font);
	color: var(--qs-fg);
	box-sizing: border-box;
}

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

/**
 * Themes routinely underline every link in post content, at a specificity our
 * component classes cannot beat from a plugin stylesheet. Scoped !important is
 * the portable answer — it never leaks past .qs-search / .qs-results.
 */
.qs-search a,
.qs-search a:link,
.qs-search a:visited,
.qs-search a:hover,
.qs-search a:focus,
.qs-search a:active,
.qs-results a,
.qs-results a:link,
.qs-results a:visited,
.qs-results a:hover,
.qs-results a:focus,
.qs-results a:active {
	text-decoration: none !important;
}

.qs-icon {
	inline-size: 1em;
	block-size: 1em;
	flex: 0 0 auto;
}

.qs-mark {
	background: var(--qs-mark-bg);
	color: inherit;
	padding: 0 1px;
	border-radius: 3px;
}

/* Fallback for themes that do not ship the core class. */
.qs-search .screen-reader-text,
.qs-results .screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------------------------------------
 * The box
 * --------------------------------------------------------------- */

.qs-search {
	position: relative;
	inline-size: 100%;
}

.qs-form {
	position: relative;
	margin: 0;
}

/**
 * One container, one outline. The input itself is stripped bare so the theme's
 * global input styling cannot draw a second border inside ours.
 */
.qs-field {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--qs-surface);
	border: 1px solid transparent;
	border-radius: var(--qs-field-radius);
	padding-inline: 20px;
	padding-block: 0;
	transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

/* The submit button sits flush, so that side loses its padding. */
.qs-field--has-button { padding-inline-end: 5px; }

.qs-field:hover {
	background: var(--qs-bg);
	border-color: var(--qs-border);
}

.qs-search.is-open .qs-field,
.qs-field:focus-within {
	background: var(--qs-bg);
	border-color: var(--qs-accent);
	box-shadow: 0 0 0 4px var(--qs-accent-soft);
}

.qs-field__icon {
	display: flex;
	color: var(--qs-muted);
	font-size: 20px;
	transition: color 0.18s ease;
}

.qs-field:focus-within .qs-field__icon { color: var(--qs-accent); }

/**
 * Every property a theme is likely to set on `input[type=search]` gets forced
 * back, otherwise the box ends up with a border inside a border.
 */
.qs-search .qs-input,
.qs-search input.qs-input[type="search"] {
	flex: 1 1 auto;
	min-inline-size: 0;
	color: inherit;
	font: inherit;
	font-size: 15px;
	line-height: 1.5;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	outline: none !important;
	box-shadow: none !important;
	padding-block: 14px !important;
	padding-inline: 0 !important;
	margin: 0 !important;
	block-size: auto !important;
	min-block-size: 0 !important;
	max-inline-size: none !important;
}

.qs-search .qs-input::placeholder {
	color: var(--qs-muted);
	opacity: 1;
}

/* Chrome/Safari draw their own clear button on type=search. */
.qs-input::-webkit-search-decoration,
.qs-input::-webkit-search-cancel-button,
.qs-input::-webkit-search-results-button {
	-webkit-appearance: none;
	appearance: none;
}

.qs-search--sm .qs-field { padding-inline: 16px; }
.qs-search--sm .qs-field--has-button { padding-inline-end: 4px; }
.qs-search--sm .qs-input { font-size: 14px; padding-block: 10px !important; }
.qs-search--sm .qs-field__icon { font-size: 18px; }

.qs-search--lg .qs-field { padding-inline: 24px; }
.qs-search--lg .qs-field--has-button { padding-inline-end: 6px; }
.qs-search--lg .qs-input { font-size: 17px; padding-block: 18px !important; }
.qs-search--lg .qs-field__icon { font-size: 22px; }

.qs-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 0 0 auto;
	border: 0;
	border-radius: var(--qs-field-radius);
	background: var(--qs-accent);
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	padding-inline: 22px;
	padding-block: 12px;
	margin: 0;
	cursor: pointer;
	white-space: nowrap;
	transition: filter 0.15s ease;
}

.qs-submit:hover { filter: brightness(0.94); }
.qs-submit__icon { display: none; font-size: 18px; }

/* ------------------------------------------------------------------
 * Dropdown
 * --------------------------------------------------------------- */

.qs-panel {
	position: absolute;
	inset-inline: 0;
	inset-block-start: calc(100% + 8px);
	z-index: 9999;
	background: var(--qs-bg);
	border: 1px solid var(--qs-border);
	border-radius: var(--qs-radius);
	box-shadow: var(--qs-shadow);
	overflow: hidden;
}

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

.qs-panel__scroll {
	max-block-size: min(62vh, 460px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.qs-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-inline: 16px;
	padding-block: 11px;
	border-block-end: 1px solid var(--qs-border);
}

.qs-panel__head-title {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--qs-muted);
}

.qs-panel__head-action {
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-size: 12px;
	color: var(--qs-accent);
	cursor: pointer;
	text-decoration: underline;
}

/* Section header inside the dropdown */
.qs-sect + .qs-sect { border-block-start: 1px solid var(--qs-border); }

.qs-sect__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-inline: 16px;
	padding-block: 9px 5px;
	font-size: 12px;
	font-weight: 700;
	color: var(--qs-muted);
}

.qs-sect__icon { display: flex; font-size: 15px; color: var(--qs-accent); }

.qs-sect__count {
	margin-inline-start: auto;
	font-weight: 600;
	font-size: 11px;
	background: var(--qs-surface);
	border-radius: 999px;
	padding-inline: 8px;
	padding-block: 2px;
}

/* A single suggestion */
.qs-opt,
.qs-recent__item {
	display: flex;
	align-items: center;
	gap: 12px;
	inline-size: 100%;
	text-align: start;
	padding-inline: 16px;
	padding-block: 9px;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-decoration: none;
	cursor: pointer;
}

.qs-opt.is-active,
.qs-opt:hover,
.qs-recent__item.is-active,
.qs-recent__item:hover {
	background: var(--qs-accent-soft);
}

.qs-opt__media {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	inline-size: 44px;
	block-size: 44px;
	border-radius: var(--qs-radius-sm);
	overflow: hidden;
	background: var(--qs-surface);
	color: var(--qs-muted);
	font-size: 20px;
}

.qs-opt__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.qs-opt__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-inline-size: 0;
	flex: 1 1 auto;
}

.qs-opt__title {
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.45;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.qs-opt__subtitle {
	font-size: 12.5px;
	color: var(--qs-muted);
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.qs-opt__chevron {
	display: flex;
	font-size: 16px;
	color: var(--qs-muted);
	opacity: 0;
	transition: opacity 0.15s ease;
}

.qs-opt.is-active .qs-opt__chevron,
.qs-opt:hover .qs-opt__chevron { opacity: 1; }

/* Arrow icons point along the reading direction. */
[dir="rtl"] .qs-opt__chevron .qs-icon,
[dir="rtl"] .qs-panel__foot-icon .qs-icon,
[dir="rtl"] .qs-item__chevron .qs-icon {
	transform: scaleX(-1);
}

.qs-sect__more {
	display: block;
	padding-inline: 16px;
	padding-block: 7px 11px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--qs-accent);
	text-decoration: none;
}

.qs-sect__more.is-active,
.qs-sect__more:hover { background: var(--qs-accent-soft); }

.qs-panel__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-inline: 16px;
	padding-block: 12px;
	border-block-start: 1px solid var(--qs-border);
	background: var(--qs-surface);
	font-size: 13px;
	font-weight: 700;
	color: var(--qs-fg);
	text-decoration: none;
}

.qs-panel__foot.is-active,
.qs-panel__foot:hover { background: var(--qs-accent-soft); }
.qs-panel__foot-icon { display: flex; font-size: 17px; color: var(--qs-accent); }

/* Recent searches */
.qs-recent__item { padding-block: 8px; }
.qs-recent__icon { display: flex; font-size: 17px; color: var(--qs-muted); }
.qs-recent__label { font-size: 14px; }

/* Panel states */
.qs-panel__state {
	padding-inline: 16px;
	padding-block: 18px;
	font-size: 13.5px;
	color: var(--qs-muted);
}

.qs-panel__state--loading {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-block: 16px;
}

.qs-spinner {
	inline-size: 16px;
	block-size: 16px;
	border: 2px solid var(--qs-border);
	border-top-color: var(--qs-accent);
	border-radius: 50%;
	animation: qs-spin 0.7s linear infinite;
}

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

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

.qs-none__title {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
	color: var(--qs-fg);
}

.qs-none__text { margin: 0; line-height: 1.7; }

.qs-none__browse-label {
	margin: 14px 0 8px;
	font-size: 12px;
	font-weight: 700;
	color: var(--qs-fg);
}

.qs-none__browse { display: flex; flex-wrap: wrap; gap: 8px; }

.qs-none__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-inline: 12px;
	padding-block: 7px;
	border: 1px solid var(--qs-border);
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--qs-fg);
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.qs-none__link:hover {
	border-color: var(--qs-accent);
	background: var(--qs-accent-soft);
}

.qs-none__link .qs-icon { font-size: 15px; color: var(--qs-accent); }

/* ------------------------------------------------------------------
 * Results page
 * --------------------------------------------------------------- */

.qs-results { inline-size: 100%; }
.qs-results__search { margin-block-end: 24px; }

.qs-summary {
	margin: 0 0 16px;
	font-size: 15px;
	color: var(--qs-muted);
}

.qs-summary strong { color: var(--qs-fg); }

.qs-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-block-end: 28px;
	padding-block-end: 4px;
}

.qs-tab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding-inline: 14px;
	padding-block: 9px;
	border: 1px solid var(--qs-border);
	border-radius: 999px;
	background: var(--qs-bg);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--qs-fg);
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.qs-tab .qs-icon { font-size: 16px; color: var(--qs-accent); }
.qs-tab:hover { border-color: var(--qs-accent); }

.qs-tab.is-active {
	background: var(--qs-accent);
	border-color: var(--qs-accent);
	color: #fff;
}

.qs-tab.is-active .qs-icon { color: #fff; }

.qs-tab__count {
	font-size: 11.5px;
	font-weight: 700;
	background: var(--qs-surface);
	color: var(--qs-muted);
	border-radius: 999px;
	padding-inline: 7px;
	padding-block: 2px;
}

.qs-tab.is-active .qs-tab__count {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

.qs-group { margin-block-end: 36px; }

.qs-group__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-block-end: 14px;
	padding-block-end: 10px;
	border-block-end: 1px solid var(--qs-border);
}

.qs-group__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 17px;
	font-weight: 700;
}

.qs-group__title .qs-icon { font-size: 19px; color: var(--qs-accent); }

.qs-group__count {
	font-size: 12px;
	font-weight: 700;
	color: var(--qs-muted);
	background: var(--qs-surface);
	border-radius: 999px;
	padding-inline: 8px;
	padding-block: 2px;
}

.qs-group__more {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 600;
	color: var(--qs-accent);
	text-decoration: none;
}

.qs-group__more:hover { filter: brightness(0.85); }

.qs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 18px;
}

/* Result card */
.qs-item--card {
	display: flex;
	flex-direction: column;
	gap: 0;
	background: var(--qs-bg);
	border: 1px solid var(--qs-border);
	border-radius: var(--qs-radius);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.qs-item--card:hover {
	border-color: var(--qs-accent);
	transform: translateY(-2px);
	box-shadow: 0 12px 28px -14px rgba(16, 24, 40, 0.3);
}

@media (prefers-reduced-motion: reduce) {
	.qs-item--card:hover { transform: none; }
}

.qs-item--card .qs-item__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 10;
	background: var(--qs-surface);
	color: var(--qs-muted);
	font-size: 32px;
	overflow: hidden;
}

.qs-item--card .qs-item__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.qs-item--card .qs-item__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-inline: 14px;
	padding-block: 13px 15px;
}

.qs-item__title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.qs-item__subtitle {
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--qs-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.qs-item__badge {
	align-self: flex-start;
	margin-block-start: 2px;
	font-size: 11px;
	font-weight: 700;
	color: var(--qs-accent);
	background: var(--qs-accent-soft);
	border-radius: 999px;
	padding-inline: 9px;
	padding-block: 3px;
}

/* Result row (compact list variant) */
.qs-item--row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px;
	border-radius: var(--qs-radius-sm);
	text-decoration: none;
	color: inherit;
}

.qs-item--row:hover { background: var(--qs-surface); }

.qs-item--row .qs-item__media {
	flex: 0 0 auto;
	inline-size: 52px;
	block-size: 52px;
	border-radius: var(--qs-radius-sm);
	overflow: hidden;
	background: var(--qs-surface);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--qs-muted);
	font-size: 22px;
}

.qs-item--row .qs-item__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.qs-item--row .qs-item__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-inline-size: 0;
	flex: 1 1 auto;
}

.qs-item__chevron { color: var(--qs-muted); font-size: 17px; display: flex; }

/* Empty states on the results page */
.qs-empty {
	padding-block: 28px;
	text-align: center;
}

.qs-empty__title {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 700;
}

.qs-empty__text {
	margin: 0 0 20px;
	color: var(--qs-muted);
	line-height: 1.8;
}

.qs-browse {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.qs-browse__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-inline: 16px;
	padding-block: 10px;
	border: 1px solid var(--qs-border);
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--qs-fg);
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.qs-browse__link:hover {
	border-color: var(--qs-accent);
	background: var(--qs-accent-soft);
}

.qs-browse__link .qs-icon { font-size: 17px; color: var(--qs-accent); }

/* Pagination */
.qs-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-block-start: 32px;
}

.qs-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 38px;
	block-size: 38px;
	padding-inline: 12px;
	border: 1px solid var(--qs-border);
	border-radius: var(--qs-radius-sm);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--qs-fg);
	text-decoration: none;
}

.qs-pagination .page-numbers:hover { border-color: var(--qs-accent); }

.qs-pagination .page-numbers.current {
	background: var(--qs-accent);
	border-color: var(--qs-accent);
	color: #fff;
}

.qs-pagination .page-numbers.dots { border-color: transparent; }

/* ------------------------------------------------------------------
 * Small screens
 * --------------------------------------------------------------- */

@media (max-width: 600px) {
	.qs-submit__text { display: none; }
	.qs-submit__icon { display: flex; }
	.qs-submit { padding-inline: 12px; }
	.qs-panel__scroll { max-block-size: 60vh; }
	.qs-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
	.qs-item__title { font-size: 14px; }
	.qs-group__head { flex-wrap: wrap; gap: 6px; }
}

/* ------------------------------------------------------------------
 * Dark mode — only for themes that opt in with data-qs-scheme="dark"
 * or a prefers-color-scheme aware body class.
 * --------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	body.qs-auto-dark .qs-search,
	body.qs-auto-dark .qs-results {
		--qs-fg: #f2f4f7;
		--qs-muted: #9aa3b2;
		--qs-bg: #16181d;
		--qs-surface: #1f2229;
		--qs-border: #2c3038;
		--qs-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.6);
	}
}

[data-qs-scheme="dark"] .qs-search,
[data-qs-scheme="dark"] .qs-results,
.qs-search[data-qs-scheme="dark"],
.qs-results[data-qs-scheme="dark"] {
	--qs-fg: #f2f4f7;
	--qs-muted: #9aa3b2;
	--qs-bg: #16181d;
	--qs-surface: #1f2229;
	--qs-border: #2c3038;
	--qs-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.6);
}