/**
 * Instant results panel.
 *
 * Colours come from custom properties so the palette can be adjusted without touching this file.
 */
/* Shared palette. Kept apart from any layout so both places can take the colours without the panel's
   positioning coming with them. */
.zhs-panel,
.zhs-page-empty {
	--zhs-ink: #1f0a32;
	--zhs-muted: #6b5b7b;
	--zhs-accent: #7c4dff;
	--zhs-surface: #ffffff;
	--zhs-line: #ece7f2;
	--zhs-hover: #f6f2ff;
}

.zhs-panel {
	/* Positioned in page coordinates rather than screen coordinates, so it travels with the field
	   while scrolling instead of being dragged back into place a frame later. */
	position: absolute;
	z-index: 99999;
	max-height: 62vh;
	overflow-y: auto;
	direction: rtl;
	text-align: right;
	background: var(--zhs-surface);
	/* Joined to the search field: no top edge, and only the bottom corners are rounded. */
	border: 1px solid var(--zhs-line);
	border-top: 0;
	border-radius: 0 0 12px 12px;
	box-shadow: 0 16px 40px rgba(31, 10, 50, 0.16);
	font-family: inherit;
	-webkit-overflow-scrolling: touch;
}

.zhs-list {
	list-style: none;
	margin: 0;
	padding: 6px;
}

.zhs-item {
	margin: 0;
	padding: 0;
	border-radius: 10px;
}

.zhs-item + .zhs-item {
	border-top: 1px solid var(--zhs-line);
}

.zhs-item.is-active,
.zhs-item:hover {
	background: var(--zhs-hover);
	border-top-color: transparent;
}

.zhs-link {
	display: block;
	padding: 12px 14px;
	color: var(--zhs-ink);
	text-decoration: none;
}

.zhs-link:hover,
.zhs-link:focus {
	text-decoration: none;
	color: var(--zhs-ink);
}

.zhs-title {
	display: block;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.5;
}

.zhs-preview {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--zhs-muted);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.zhs-meta {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-top: 7px;
	font-size: 11px;
	color: var(--zhs-muted);
}

.zhs-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--zhs-hover);
	color: var(--zhs-accent);
	font-weight: 700;
}

/* A question and an article answer differently, so they should not look the same in a list. */
.zhs-badge[data-type="faqs"],
.zhs-badge[data-type="zid-faqs"] {
	background: #ffd8c9;
	color: #723f1a;
}

.zhs-panel mark {
	background: rgba(124, 77, 255, 0.16);
	color: inherit;
	padding: 0 1px;
	border-radius: 3px;
}

.zhs-empty {
	padding: 30px 24px 34px;
	text-align: center;
}

/* The same illustration the dashboard shows when a list comes back empty. */
.zhs-empty::before {
	content: "";
	display: block;
	width: 96px;
	height: 96px;
	margin: 0 auto 16px;
	background: url("empty-state.png") center / contain no-repeat;
}

.zhs-empty__title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--zhs-ink);
}

.zhs-empty__hint {
	margin: 8px auto 0;
	max-width: 340px;
	font-size: 13px;
	line-height: 1.7;
	color: var(--zhs-muted);
}

.zhs-footer {
	display: block;
	padding: 12px 16px;
	border-top: 1px solid var(--zhs-line);
	color: var(--zhs-accent);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

.zhs-footer:hover {
	background: var(--zhs-hover);
	text-decoration: none;
}

@media (max-width: 640px) {
	.zhs-preview {
		-webkit-line-clamp: 1;
	}
}

/* ---------------------------------------------------------------------------
 * The previous instant search
 *
 * Its markup is printed by PHP and was toggled by a script we no longer load, so every part of it is
 * pinned here to the state it should rest in: the search field visible, everything it used to open
 * closed. Without this the old panel, its empty state and its loading spinner all show at once.
 * ------------------------------------------------------------------------ */

.fast-fuzzy-search__panel,
.fast-fuzzy-search__clear,
.fast-fuzzy-search__keyboard-shortcuts {
	display: none !important;
}

/* The clear button comes back, but only while there is something to clear. */
.fast-fuzzy-search__field.zhs-has-text .fast-fuzzy-search__clear,
.zhs-has-text .fast-fuzzy-search__clear {
	display: inline-flex !important;
	align-items: center;
}

/* No grey disc behind it: an icon on its own is how the rest of Zid draws this. */
.fast-fuzzy-search__clear button {
	border: 0;
	background: none !important;
	padding: 0;
	color: #8b7a99;
	display: inline-flex;
	align-items: center;
	transition: color 0.12s ease;
}

.fast-fuzzy-search__clear button:hover {
	color: #1f0a32;
}

/* The field is printed with its open state baked in, which leaves its bottom corners cut even when
   nothing is showing. Give them back, and take them away only while our list is open. */
.fast-fuzzy-search__field {
	border-bottom-left-radius: 10px !important;
	border-bottom-right-radius: 10px !important;
}

.fast-fuzzy-search__field.zhs-open,
.zhs-open .fast-fuzzy-search__field {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

/* First frame is the magnifier, second is the spinner that never stops without its script. */
.fast-fuzzy-search__icon > .fast-fuzzy-search__icon-frame:first-child {
	display: inline-flex !important;
}

.fast-fuzzy-search__icon > .fast-fuzzy-search__icon-frame + .fast-fuzzy-search__icon-frame {
	display: none !important;
}

/* ---------------------------------------------------------------------------
 * Before anything is typed
 * ------------------------------------------------------------------------ */

.zhs-heading {
	margin: 0;
	padding: 12px 14px 2px;
	font-size: 12px;
	font-weight: 700;
	color: var(--zhs-muted);
}

/* One line per article: title on the right, its type on the left. */
.zhs-latest .zhs-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.zhs-latest .zhs-meta {
	margin-top: 0;
	flex-shrink: 0;
}

.zhs-latest .zhs-category {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Sections
 *
 * Built from the results in view, so every chip leads somewhere.
 * ------------------------------------------------------------------------ */

.zhs-facets {
	display: flex;
	gap: 6px;
	padding: 10px 12px;
	overflow-x: auto;
	scrollbar-width: none;
	border-bottom: 1px solid var(--zhs-line);
}

.zhs-facets::-webkit-scrollbar {
	display: none;
}

.zhs-chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	border: 1px solid var(--zhs-line);
	background: #fff;
	color: var(--zhs-ink);
	border-radius: 999px;
	padding: 5px 12px;
	font: inherit;
	font-size: 12px;
	line-height: 1.6;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.12s ease, border-color 0.12s ease;
}

.zhs-chip:hover {
	background: var(--zhs-hover);
	border-color: #d8cbf5;
}

.zhs-chip.is-active {
	background: var(--zhs-ink);
	border-color: var(--zhs-ink);
	color: #fff;
}

.zhs-count {
	opacity: 0.6;
	font-size: 11px;
}

/* The same picture the section carries on the home page cards. */
.zhs-chip__icon {
	width: 15px;
	height: 15px;
	object-fit: contain;
	flex-shrink: 0;
}

.zhs-chip.is-active .zhs-chip__icon {
	filter: brightness(0) invert(1);
}

/* ---------------------------------------------------------------------------
 * The field on the page instead of in a dialog
 * ------------------------------------------------------------------------ */

.zhs-inline {
	max-width: 720px;
	margin: 0 auto;
}

/* The heading was right aligned inside a narrow column, which read as centred. Now that the column is
   the full width, centre it for real. */
.zhs-inline-mode .bg-home h1 {
	text-align: center;
}

/* The header column is a third of the page with an offset pushing it across. Give the field the whole
   width instead, and clear the offset on both sides so nothing hangs off the edge. */
.zhs-inline-mode .bg-home .col-md-offset-4 {
	width: 100%;
	margin: 0 auto !important;
	float: none;
}

/* The widget carries a fixed width meant for a dialog. On the page it takes the space it is given. */
.zhs-inline .fast-fuzzy-search {
	width: 100%;
	max-width: 100%;
}

/* The input carries `font: inherit !important` in a style attribute, which no stylesheet can beat, so
   its size is set on the box around it and inherited down. */
.zhs-inline .fast-fuzzy-search__field {
	height: 58px;
	font-size: 15px;
	border-radius: 12px !important;
	box-shadow: 0 12px 34px rgba(15, 4, 26, 0.28);
}

.zhs-inline .fast-fuzzy-search__field.zhs-open {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

@media (max-width: 767px) {
	.zhs-inline {
		max-width: none;
		padding: 0 6px;
	}

	/* Anything under 16px makes iOS zoom the page the moment the field is tapped, and it never zooms
	   back. This is the one place the size is not a matter of taste. */
	.zhs-inline .fast-fuzzy-search__field {
		height: 54px;
		font-size: 16px;
	}

	/* Comfortable to tap, and the row fades on the side it scrolls towards so it reads as a row that
	   carries on rather than one that is cut off. */
	.zhs-chip {
		padding: 8px 13px;
		font-size: 13px;
	}

	.zhs-facets {
		padding: 10px 14px;
		-webkit-mask-image: linear-gradient(to left, #000 88%, transparent);
		mask-image: linear-gradient(to left, #000 88%, transparent);
	}

	.zhs-title {
		font-size: 15px;
	}
}

/* ---------------------------------------------------------------------------
 * The results page when nothing matched
 *
 * The theme leaves an empty panel there. This fills it with the same empty state the dropdown shows,
 * and with somewhere to go next.
 * ------------------------------------------------------------------------ */

/* The theme leaves floated columns open around here, so the wrapper steps clear of them. */
.zhs-page-empty-wrap {
	clear: both;
	float: none;
	position: relative;
	z-index: 1;
	padding: 40px 0 50px;
}

/* The card is sized to its content and lines up with the search field above it, rather than being a
   page wide sheet with a narrow column of text floating in the middle of it. */
.zhs-page-empty {
	direction: rtl;
	text-align: right;
	/* 720 to match the search field above it exactly, edge to edge. */
	max-width: 720px;
	margin: 0 auto;
	padding: 8px 14px 16px !important;
}

.zhs-page-empty .zhs-empty {
	padding: 40px 20px 26px;
}

.zhs-page-empty .zhs-empty::before {
	width: 120px;
	height: 120px;
}

.zhs-page-empty .zhs-empty__title {
	font-size: 20px;
}

.zhs-page-empty .zhs-empty__hint {
	font-size: 14px;
}

.zhs-page-suggestions {
	border-top: 1px solid var(--zhs-line);
	padding-top: 8px;
}

.zhs-page-suggestions .zhs-heading {
	padding: 14px 14px 4px;
	font-size: 13px;
}

.zhs-page-suggestions .zhs-item + .zhs-item {
	border-top: 1px solid var(--zhs-line);
}

/* ---------------------------------------------------------------------------
 * The field on the results page
 *
 * A different box from the one on the home page: this one is the theme's own form, not the widget. It
 * is matched to the home page here so the search box does not change shape between the two.
 * ------------------------------------------------------------------------ */

/* Its column is half the page, which would make the field narrower here than on the home page. */
.bg-home .col-md-6.col-md-offset-3 {
	width: 100%;
	margin: 0 auto !important;
	float: none;
}

.search-container.search-home {
	max-width: 720px;
	margin: 0 auto;
}

.search-container.search-home .search-box {
	width: 100%;
	height: 58px;
	font-size: 15px;
	border: 0;
	border-radius: 12px;
	box-shadow: 0 12px 34px rgba(15, 4, 26, 0.28);
}

.search-container.search-home.zhs-open .search-box {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

@media (max-width: 767px) {
	.search-container.search-home .search-box {
		height: 54px;
		/* 16px, or iOS zooms the page as soon as the field is tapped. */
		font-size: 16px;
	}
}

/* The clear button built for a field that has none of its own. */
.search-container.search-home {
	position: relative;
}

.zhs-clear {
	display: none;
	position: absolute;
	/* The theme's input sits at z-index 999, so the button has to clear it. */
	z-index: 1000;
	/* The end of the line, which is the left in Arabic, matching the field on the home page. */
	inset-inline-end: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: #8b7a99;
	cursor: pointer;
	line-height: 0;
	transition: color 0.12s ease;
}

.zhs-clear:hover {
	color: #1f0a32;
}

.zhs-has-text .zhs-clear {
	display: inline-flex;
}

/* ---------------------------------------------------------------------------
 * Type and icon
 *
 * The old widget ships its own font stack and its own magnifier, so the field on the home page looked
 * like it came from somewhere else. Both hand over to the site's.
 * ------------------------------------------------------------------------ */

.fast-fuzzy-search,
.fast-fuzzy-search__field,
.fast-fuzzy-search__input {
	font-family: inherit !important;
}

.zhs-swap-icon .fast-fuzzy-search__icon-frame svg {
	display: none;
}

.zhs-swap-icon .fast-fuzzy-search__icon > .fast-fuzzy-search__icon-frame:first-child {
	background: var(--zhs-search-icon) center / 20px 20px no-repeat;
}