/**
 * Surgimedex FAQ Widget — standalone stylesheet.
 *
 * Used by the [surgimedex_faq] shortcode and the "Surgimedex FAQ" Gutenberg
 * block. Class prefix sf-faq- so it cannot collide with the tracking page's
 * own FAQ styles (which use st-faq-).
 *
 * Brand-aligned defaults; values are tuned to look good both on the white
 * cards of the tracking page and on a plain WordPress page background.
 */

.sf-faq-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	padding: 28px;
	margin: 24px 0;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: #1a2332;
	box-sizing: border-box;
}
.sf-faq-card *, .sf-faq-card *::before, .sf-faq-card *::after { box-sizing: border-box; }

.sf-faq-heading {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 16px;
	color: #1a2332;
	line-height: 1.3;
}

/* ── Search ───────────────────────────────────────────────────────────── */
.sf-faq-search-wrap { position: relative; margin: 4px 0 16px; }
.sf-faq-search-wrap .sf-faq-search-icon {
	position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
	color: #64748b; opacity: 0.75; pointer-events: none; z-index: 2;
}
input.sf-faq-search,
.sf-faq-search-wrap .sf-faq-search {
	width: 100% !important;
	box-sizing: border-box !important;
	padding: 12px 14px 12px 44px !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 10px !important;
	font-size: 14px !important;
	font-family: inherit !important;
	color: #1a2332 !important;
	background: #f8fafc !important;
	text-indent: 0 !important;
	transition: border-color .15s, background .15s;
}
input.sf-faq-search:focus,
.sf-faq-search-wrap .sf-faq-search:focus {
	outline: none !important;
	border-color: #0b5fa5 !important;
	background: #ffffff !important;
}
.sf-faq-search:focus ~ .sf-faq-search-icon { color: #0b5fa5; opacity: 1; }

/* ── Accordion list ──────────────────────────────────────────────────── */
.sf-faq-list { display: flex; flex-direction: column; gap: 8px; }
.sf-faq-item {
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	overflow: hidden;
	background: #ffffff;
}
.sf-faq-q {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	padding: 15px 16px;
	background: transparent;
	border: none;
	font: inherit;
	text-align: left;
	color: #1a2332;
	transition: background .15s;
}
.sf-faq-q:hover { background: #f8fafc; }
.sf-faq-q-text { flex: 1; font-weight: 600; font-size: 14px; line-height: 1.4; }
.sf-faq-q-chevron {
	font-size: 12px;
	color: #64748b;
	transition: transform .2s;
	flex-shrink: 0;
}
.sf-faq-item.is-open .sf-faq-q-chevron { transform: rotate(180deg); }
.sf-faq-item.is-open .sf-faq-q { color: #0b5fa5; }

/* Answer panel: collapsed by default, smooth reveal. */
.sf-faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.sf-faq-item.is-open .sf-faq-a { max-height: 1200px; }
.sf-faq-a-inner {
	padding: 0 16px 16px;
	font-size: 14px;
	line-height: 1.6;
	color: #475569;
}
.sf-faq-a-inner a { color: #0b5fa5; font-weight: 600; }
.sf-faq-a-inner p { margin: 0 0 8px; }
.sf-faq-a-inner p:last-child { margin-bottom: 0; }
.sf-faq-a-inner ul, .sf-faq-a-inner ol { margin: 6px 0; padding-left: 20px; }
.sf-faq-a-inner .st-faq-line { line-height: 1.7; }
.sf-faq-a-inner .st-faq-line + .st-faq-line { margin-top: 1px; }

.sf-faq-noresults {
	text-align: center;
	color: #64748b;
	font-size: 14px;
	padding: 16px;
}

@media (max-width: 600px) {
	.sf-faq-card { padding: 20px 16px; border-radius: 12px; }
	.sf-faq-heading { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
	.sf-faq-a, .sf-faq-q-chevron, .sf-faq-q, .sf-faq-search { transition: none !important; }
}