/**
 * Advanced search form.
 *
 * Written to sit inside somebody else's theme: it inherits the font rather than
 * imposing one, takes its accent from a custom property the theme or an
 * Elementor control can override, and styles only its own BEM-prefixed classes
 * so nothing leaks into the surrounding page.
 */

.na-search {
	--na-search-accent: #ee4d2d;
	--na-search-border: #e4e7ec;
	--na-search-radius: 8px;
	--na-search-bg: #ffffff;
	--na-search-text: inherit;
	--na-search-muted: #667085;
	--na-search-gap: 12px;

	/* Typography: separate from search-results.css's --na-sp-* set on
	   purpose — the form and the results list are two different embeds
	   (the toggle placement, the shortcode, Gutenberg) and each needs to be
	   retunable without the other moving. */
	--na-search-label-size: 13px;
	--na-search-input-size: 14px;
	--na-search-hint-size: 12px;

	/* Per-part tokens. Each falls back to the shared token above, so a site
	   (or an older saved Elementor widget) that only ever set the shared ones
	   looks exactly as before; the Elementor widgets set these to style one
	   part without moving the others. */
	--na-search-form-padding: 16px;
	--na-search-border-width: 1px;
	--na-search-form-shadow: none;
	--na-search-label-color: inherit;
	--na-search-label-weight: 600;
	--na-search-input-bg: var(--na-search-bg);
	--na-search-input-text: inherit;
	--na-search-input-border: var(--na-search-border);
	--na-search-input-radius: var(--na-search-radius);
	--na-search-input-padding: 9px 12px;
	--na-search-focus: var(--na-search-accent);
	--na-search-hint-color: var(--na-search-muted);
	--na-search-toggle-color: var(--na-search-accent);
	--na-search-btn-bg: var(--na-search-accent);
	--na-search-btn-text: #ffffff;
	--na-search-btn-border: var(--na-search-btn-bg);
	--na-search-btn-text-hover: var(--na-search-btn-text);
	--na-search-btn-radius: var(--na-search-radius);
	--na-search-btn-padding: 10px 24px;
	--na-search-btn-weight: 600;
	--na-search-actions-justify: flex-end;
	--na-search-suggest-bg: var(--na-search-bg);

	/* The hover shade is derived from the accent, so a site that changes the
	   accent gets a matching hover. Browsers without color-mix() keep the flat
	   accent. */
	--na-search-btn-bg-hover: var(--na-search-accent-dark, var(--na-search-btn-bg));
}

/* Colour and family on the root at zero specificity: an Elementor v4
   Style-tab class (typography colour/family) must be able to set them on
   this same element; at class specificity these rules could win instead,
   depending on print order. */
:where(.na-search) {
	font-family: inherit;
	color: var(--na-search-text);
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.na-search {
		--na-search-btn-bg-hover: var(--na-search-accent-dark, color-mix(in srgb, var(--na-search-btn-bg) 82%, #000));
	}
}

/* A theme with no global box-sizing reset (some minimal/starter themes
   genuinely have none) would otherwise compute this form's padding+border
   combinations on top of its content width instead of inside it, throwing
   off every flex-basis calculation below — the same local reset
   search-results.css's .na-search-page already carries. */
.na-search *,
.na-search *::before,
.na-search *::after {
	box-sizing: border-box;
}

.na-search__form {
	display: flex;
	flex-direction: column;
	gap: var(--na-search-gap);
	background: var(--na-search-bg);
	border: var(--na-search-border-width) solid var(--na-search-border);
	border-radius: var(--na-search-radius);
	padding: var(--na-search-form-padding);
	box-shadow: var(--na-search-form-shadow);
}

.na-search__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--na-search-gap);
	align-items: flex-end;
}

.na-search__row--actions {
	justify-content: var(--na-search-actions-justify);
}

/* The button's share of its row: the Elementor "alignment" control sets
   --na-search-btn-flex to 1 1 100% for "full width", per breakpoint. */
.na-search__submit {
	flex: var(--na-search-btn-flex, 0 1 auto);
}

.na-search__advanced {
	display: flex;
	flex-wrap: wrap;
	gap: var(--na-search-gap);
	align-items: flex-end;
}

.na-search__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 180px;
	min-width: 0;
	position: relative;
}

.na-search__field--keyword {
	flex: 3 1 260px;
}

.na-search__label {
	font-size: var(--na-search-label-size);
	font-weight: var(--na-search-label-weight);
	line-height: 1.6;
	color: var(--na-search-label-color);
}

/* Visually hidden, still read out: the "hide labels" option must not
   leave a field without an accessible name. */
.na-search--no-labels .na-search__label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.na-search__input {
	width: 100%;
	box-sizing: border-box;
	padding: var(--na-search-input-padding);
	font: inherit;
	font-size: var(--na-search-input-size);
	line-height: 1.6;
	color: var(--na-search-input-text) !important;
	background: var(--na-search-input-bg) !important;
	border: var(--na-search-border-width) solid var(--na-search-input-border) !important;
	border-radius: var(--na-search-input-radius) !important;
	box-shadow: none !important;
}

.na-search__input:focus {
	outline: 2px solid var(--na-search-focus);
	outline-offset: 1px;
	border-color: var(--na-search-focus) !important;
}

.na-search__hint {
	font-size: var(--na-search-hint-size);
	line-height: 1.7;
	color: var(--na-search-hint-color);
}

.na-search--no-hints .na-search__hint {
	display: none;
}

.na-search__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	padding: 0;
	font: inherit;
	font-size: var(--na-search-label-size);
	font-weight: 600;
	color: var(--na-search-toggle-color);
	background: none;
	border: 0;
	cursor: pointer;
}

.na-search__toggle-icon {
	width: 0;
	height: 0;
	border-inline-start: 4px solid transparent;
	border-inline-end: 4px solid transparent;
	border-top: 5px solid currentColor;
	transition: transform .15s ease;
}

.na-search__toggle[aria-expanded="true"] .na-search__toggle-icon {
	transform: rotate(180deg);
}

.na-search__submit {
	padding: var(--na-search-btn-padding);
	font: inherit;
	font-size: var(--na-search-input-size);
	font-weight: var(--na-search-btn-weight);
	color: var(--na-search-btn-text) !important;
	background: var(--na-search-btn-bg) !important;
	border: 0 !important;
	border-radius: var(--na-search-btn-radius) !important;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.na-search__submit:hover,
.na-search__submit:focus {
	filter: brightness(.94);
}

/* Suggestions ------------------------------------------------------------- */

.na-search__suggestions {
	position: absolute;
	z-index: 20;
	inset-inline-start: 0;
	inset-inline-end: 0;
	top: 100%;
	margin: 4px 0 0;
	padding: 4px;
	max-height: 240px;
	overflow-y: auto;
	list-style: none;
	background: var(--na-search-suggest-bg);
	border: 1px solid var(--na-search-border);
	border-radius: var(--na-search-radius);
	box-shadow: 0 6px 18px rgba(16, 24, 40, .1);
}

.na-search__suggestion {
	padding: 7px 10px;
	font-size: var(--na-search-input-size);
	border-radius: calc(var(--na-search-radius) - 2px);
	cursor: pointer;
}

.na-search__suggestion.is-active,
.na-search__suggestion:hover {
	background: var(--na-search-suggest-hover-bg, color-mix(in srgb, var(--na-search-accent) 10%, transparent));
	color: var(--na-search-suggest-hover-text, var(--na-search-accent));
}

.na-search__suggestion--empty {
	color: var(--na-search-muted);
	cursor: default;
}

.na-search__suggestion--empty:hover {
	background: none;
	color: var(--na-search-muted);
}

/* On a phone the fields stack, and a row of half-width controls just makes
   each one too narrow to read its own label. */
@media (max-width: 600px) {
	.na-search__field {
		flex-basis: 100%;
	}

	.na-search__submit {
		width: 100%;
	}
}

/* Tablet/phone overrides of the button alignment still apply below 600px
   only when a site asked for something other than the default. */

/* ------------------------------------------------------- inherited type
   Every control states its family explicitly. Inheriting was not enough: a
   theme that styles bare `label` or `button` elements beats inheritance on
   specificity, and the labels ended up in neither the theme's font nor the
   plugin's — they fell back to the browser default. */

.na-search__label,
.na-search__hint,
.na-search__input,
.na-search__submit,
.na-search__toggle,
.na-search__toggle-label,
.na-search__suggestion {
	font-family: inherit;
}

/* One step stronger for the fields: themes commonly set a family on
   `input[type="text"]` (0,1,1), which beats the single class above — so the
   tag field and the Jalali date fields (type="text") showed their text and
   placeholder in the theme's input face, or the browser default, while the
   keyword field (type="search") looked right. Elementor's own typography
   controls ({{WRAPPER}} …, 0,4,0) still win. */
.na-search .na-search__input,
.na-search .na-search__input::placeholder {
	font-family: inherit;
}

/* The Jalali picker is attached to <body>, outside the form, so it cannot
   inherit the form's font; a theme that sets its face on elements rather than
   on body left it in the browser default. search.js copies the date field's
   font into --na-jdp-font whenever the picker opens. */
najdp-container {
	font-family: var(--na-jdp-font, inherit);
}

/* --------------------------------------------------------- button states
   Stated in full — background, border, shadow and colour — because a theme or
   page builder that styles every button on hover otherwise takes the toggle
   over and it changes shape under the cursor. */

.na-search__toggle,
.na-search__toggle:hover,
.na-search__toggle:focus,
.na-search__toggle:focus-visible,
.na-search__toggle:active {
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	text-decoration: none;
	outline-offset: 3px;
}

.na-search__toggle:hover .na-search__toggle-label { text-decoration: underline; }

.na-search__toggle:focus-visible { outline: 2px solid var(--na-search-focus); }

.na-search__submit,
.na-search__submit:active {
	color: var(--na-search-btn-text) !important;
	border: 1px solid var(--na-search-btn-border) !important;
	box-shadow: none !important;
	text-decoration: none;
}

.na-search__submit:hover,
.na-search__submit:focus {
	color: var(--na-search-btn-text-hover) !important;
	background: var(--na-search-btn-bg-hover) !important;
	border: 1px solid var(--na-search-btn-border-hover, var(--na-search-btn-bg-hover)) !important;
	box-shadow: none !important;
	text-decoration: none;
	filter: none;
}

.na-search__submit:focus-visible { outline: 2px solid var(--na-search-focus); outline-offset: 2px; }

/* ------------------------------------------------ Elementor v4 (atomic) mode
   The v4 Style tab styles an element through classes on its root, and this
   root is the widget's root. So in v4 the root *is* the form's card and the
   inner <form> steps back: background, border, radius, padding, shadow and
   typography set in the Style tab land on the visible form, not on an
   invisible wrapper behind it. The defaults are :where() (zero specificity)
   so any Style-tab class wins over them. */

/* Take the full width of the column the widget sits in. Elementor sizes
   neither the atomic root nor a classic widget's wrapper, so inside a flex
   container (a v4 Flexbox, a v3 row container) both shrank to their content:
   the closed form came out narrow, and opening "advanced search" made it jump
   wider. The editor also wraps an atomic widget in an editing div of its
   own (there is none on the live page), which needs the same rule. Zero
   specificity, so Elementor's own width settings still win. */
:where(.na-search--atomic),
:where(.elementor-widget-news-ads-search-atomic),
:where(.elementor-widget-news-ads-search),
:where(.elementor-widget-news-ads-search) :where(.na-search) {
	width: 100%;
	box-sizing: border-box;
}

:where(.na-search--atomic) {
	display: block;
	background: var(--na-search-bg);
	border: var(--na-search-border-width) solid var(--na-search-border);
	border-radius: var(--na-search-radius);
	padding: var(--na-search-form-padding);
}

.na-search--atomic .na-search__form {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}