/* Smart Search FAQ — frontend widget.
   Every rule is scoped under .ssf-faq; nothing here touches a global selector,
   so the widget is safe to drop inside a theme, Elementor, or a GreenShift
   Shortcode/HTML block without fighting existing site styles. Override the
   look from the outside via the CSS custom properties below, e.g.:
   .my-page .ssf-faq { --ssf-primary: #123456; }
   By default the widget fills its container's full width — set --ssf-max-width
   if you want it capped instead, e.g. .my-page .ssf-faq { --ssf-max-width: 620px; }

   Every descendant rule below is written as ".ssf-faq .ssf-whatever" rather
   than bare ".ssf-whatever" — a single class has low specificity, and plenty
   of themes ship their own "input[type=text]" / ".entry-content input" style
   rules that would otherwise win and silently break layout (e.g. the search
   input losing its left padding and the icon overlapping the placeholder
   text). The two properties that actually caused that once already
   (.ssf-search__input's padding/box-sizing) also carry !important — a
   deliberate, narrow exception, not a habit. */

.ssf-faq {
	--ssf-primary: #001f70;
	--ssf-accent: #e15304;
	--ssf-border: #6dcff6;
	--ssf-bg: #ffffff;
	--ssf-text: #222222;
	--ssf-muted: #6b7280;
	--ssf-radius: 14px;
	--ssf-max-width: none;

	width: 100%;
	max-width: var(--ssf-max-width);
	height: 100%;
	background: var(--ssf-bg);
	color: var(--ssf-text);
	border: 1px solid #e3e9f4;
	border-radius: var(--ssf-radius);
	padding: 34px 30px 30px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	box-shadow: 0 1px 2px rgba(18, 24, 43, 0.04), 0 20px 40px -24px rgba(0, 31, 112, 0.25);
	box-sizing: border-box;
}
.ssf-faq *,
.ssf-faq *::before,
.ssf-faq *::after {
	box-sizing: inherit;
}

.ssf-faq .ssf-faq__header {
	text-align: center;
	margin-bottom: 20px;
}
.ssf-faq .ssf-faq__header h3 {
	margin: 0;
	font-size: 1.5rem;
	color: var(--ssf-primary);
}
.ssf-faq .ssf-faq__header p {
	margin: 6px 0 0;
	color: var(--ssf-muted);
	font-size: 14.5px;
}

.ssf-faq .ssf-search {
	position: relative;
	margin-bottom: 20px;
}
.ssf-faq .ssf-search__icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ssf-muted);
	pointer-events: none !important;
	z-index: 1;
}
.ssf-faq .ssf-search__input {
	display: block;
	width: 100%;
	font-size: 15px;
	line-height: 1.4;
	padding: 13px 44px !important;
	border-radius: 99px;
	border: 1.5px solid var(--ssf-border);
	background: #fff;
	color: var(--ssf-text);
	min-height: 46px;
	outline-offset: 2px;
	box-shadow: none;
	box-sizing: border-box !important;
	appearance: none;
	-webkit-appearance: none;
}
.ssf-faq .ssf-search__input::placeholder {
	color: #97a1b3;
	opacity: 1;
}
.ssf-faq .ssf-search__input:focus-visible {
	outline: 2px solid var(--ssf-accent);
}
.ssf-faq .ssf-search__clear {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 0;
	background: transparent;
	color: var(--ssf-muted);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: none;
}
.ssf-faq .ssf-search__clear.is-visible {
	display: block;
}
.ssf-faq .ssf-search__clear:hover {
	background: #f1f4fa;
}

.ssf-faq .ssf-category-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 9px;
}
.ssf-faq .ssf-category {
	border: 1px solid #e3e9f4;
	background: #fafbfe;
	border-radius: 99px;
	padding: 11px 18px;
	display: flex;
	flex-direction: row;
	align-items: baseline;
	gap: 7px;
	cursor: pointer;
	text-align: center;
	color: var(--ssf-primary);
	transition: border-color 0.15s, background 0.15s;
	white-space: nowrap;
}
.ssf-faq .ssf-category:hover {
	border-color: var(--ssf-border);
	background: #fff;
}
.ssf-faq .ssf-category__name {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}
.ssf-faq .ssf-category__count {
	font-size: 11px;
	color: var(--ssf-muted);
}

.ssf-faq .ssf-popular {
	margin-top: 20px;
	text-align: center;
}
.ssf-faq .ssf-popular__label {
	display: block;
	font-size: 12px;
	color: var(--ssf-muted);
	margin-bottom: 8px;
}
.ssf-faq .ssf-popular__chip {
	display: inline-flex;
	margin: 3px;
	border: 1px solid var(--ssf-border);
	background: #fff;
	color: var(--ssf-primary);
	border-radius: 99px;
	padding: 6px 14px;
	font-size: 12.5px;
	cursor: pointer;
}
.ssf-faq .ssf-popular__chip:hover {
	background: var(--ssf-border);
	color: #fff;
}

.ssf-faq .ssf-results__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	min-height: 20px;
}
.ssf-faq .ssf-results__back {
	border: 0;
	background: transparent;
	color: var(--ssf-primary);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	padding: 4px 0;
	display: none;
}
.ssf-faq .ssf-results__back.is-visible {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.ssf-faq .ssf-results__count {
	font-size: 13px;
	color: var(--ssf-muted);
	margin: 0;
}
.ssf-faq .ssf-results__catname {
	font-size: 1.2rem;
	color: var(--ssf-primary);
	margin: 0 0 4px;
}

.ssf-faq .ssf-accordion__item {
	border-bottom: 1px solid #eaeef6;
}
.ssf-faq .ssf-accordion__item:first-child {
	border-top: 1px solid #eaeef6;
}
.ssf-faq .ssf-accordion__item h4 {
	margin: 0;
}
.ssf-faq .ssf-accordion__button {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 14px;
	background: transparent;
	border: 0;
	padding: 15px 2px;
	text-align: left;
	cursor: pointer;
	color: var(--ssf-text);
	font-size: 14.5px;
	font-weight: 600;
}
.ssf-faq .ssf-accordion__button:hover {
	color: var(--ssf-primary);
}
.ssf-faq .ssf-accordion__button:focus-visible {
	outline: 2px solid var(--ssf-accent);
	outline-offset: 3px;
}
.ssf-faq .ssf-accordion__icon {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1.5px solid var(--ssf-border);
	color: var(--ssf-primary);
	font-size: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s, background 0.2s, color 0.2s;
}
.ssf-faq .ssf-accordion__button[aria-expanded="true"] .ssf-accordion__icon {
	background: var(--ssf-accent);
	border-color: var(--ssf-accent);
	color: #fff;
	transform: rotate(45deg);
}
.ssf-faq .ssf-accordion__content {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.22s ease;
}
.ssf-faq .ssf-accordion__content.is-open {
	grid-template-rows: 1fr;
}
.ssf-faq .ssf-accordion__content-inner {
	overflow: hidden;
	min-height: 0;
}
.ssf-faq .ssf-accordion__content p {
	padding: 0 2px 16px;
	margin: 0 0 0.8em;
	font-size: 14px;
	color: #4b5568;
	line-height: 1.6;
}
.ssf-faq .ssf-accordion__content p:last-child {
	margin-bottom: 0;
}

.ssf-faq .ssf-empty {
	text-align: center;
	padding: 20px 10px 4px;
}
.ssf-faq .ssf-empty p {
	color: var(--ssf-muted);
	font-size: 14px;
	margin: 0;
}
.ssf-faq .ssf-empty__cta {
	display: inline-block;
	margin-top: 14px;
	background: var(--ssf-accent);
	color: #fff;
	border-radius: 99px;
	padding: 10px 20px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	.ssf-faq .ssf-accordion__content,
	.ssf-faq .ssf-accordion__icon,
	.ssf-faq .ssf-category {
		transition: none;
	}
}

/* mobile: category buttons switch from a wrapping row to a fixed 2-column grid */
@media (max-width: 480px) {
	.ssf-faq .ssf-category-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}
	.ssf-faq .ssf-category {
		border-radius: 12px;
		padding: 13px 10px;
		white-space: normal;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 4px;
	}
}