:root {
	--faq-accent: #4f46e5;
	--faq-accent-hover: #4338ca;
	--faq-accent-light: #eef2ff;
	--faq-text-muted: #64748b;
	--faq-border: #f1f5f9;
	--faq-card-bg: #ffffff;
}

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	background-color: #f8fafc;
	color: #0f172a;
	-webkit-font-smoothing: antialiased;
}

.faq-wrapper {
	margin: 0;
}

/* Search input styling */
.faq-search-box {
	border-radius: 9999px;
	padding: 0.85rem 1.4rem 0.85rem 3.1rem;
	border: 1px solid #e2e8f0;
	background-color: #ffffff;
	box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
	transition: all 0.25s ease;
	font-size: 0.975rem;
}

.faq-search-box:focus {
	border-color: var(--faq-accent);
	box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12), 0 4px 16px rgba(15, 23, 42, 0.04);
	outline: none;
}

.search-icon-wrapper {
	position: absolute;
	left: 1.15rem;
	top: 50%;
	transform: translateY(-50%);
	color: #94a3b8;
	pointer-events: none;
	font-size: 1.15rem;
}

/* Filter pills */
.filter-pill {
	border: 1px solid #e2e8f0;
	background: #ffffff;
	color: #475569;
	font-weight: 500;
	font-size: 0.875rem;
	padding: 0.45rem 1.1rem;
	border-radius: 9999px;
	transition: all 0.2s ease;
}

.filter-pill:hover {
	background-color: #f1f5f9;
	color: #0f172a;
}

.filter-pill.active {
	background-color: var(--faq-accent);
	color: #ffffff;
	border-color: var(--faq-accent);
	box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}

/* Accordion items */
.custom-faq-item {
	background: var(--faq-card-bg);
	border: 1px solid #e2e8f0;
	border-radius: 1rem !important;
	margin-bottom: 1rem;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.custom-faq-item:hover {
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
	border-color: #cbd5e1;
}

.custom-faq-item.active-item {
	border-color: #c7d2fe;
	box-shadow: 0 10px 25px rgba(79, 70, 229, 0.07);
}

/* Accordion Button overrides */

/* --- BEFORE: Lead icon (e.g., Question Circle) --- */
.accordion-button::before {
  content: "\f059"; /* fa-circle-question */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-right: 0.75rem;
  font-size: 1.1rem;
  color: #0d6efd; /* Your theme color */
}

/* --- AFTER: Custom Toggle Icon (e.g., Chevron Down) --- */
.accordion-button::after {
	background-image: none !important;
    content: "\f078"; /* fa-chevron-down */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.9rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background-color: #f8fafc;
	color: #64748b;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s, color 0.2s;
}

.accordion-button:not(.collapsed) {
	color: var(--faq-accent);
}
.accordion-button:not(.collapsed)::after {
	transform: rotate(180deg);
	background-color: var(--faq-accent-light);
	color: var(--faq-accent);
}

/* Body text */
.accordion-body {
	padding: 0.25rem 1.5rem 1.5rem 1.5rem;
	color: #475569;
	line-height: 1.7;
	font-size: 0.95rem;
}

/* Feedback buttons */
.feedback-btn {
	font-size: 0.825rem;
	padding: 0.3rem 0.75rem;
	border-radius: 9999px;
	border: 1px solid #e2e8f0;
	background-color: #f8fafc;
	color: #475569;
	transition: all 0.2s ease;
}

.feedback-btn:hover {
	background-color: #e2e8f0;
	color: #0f172a;
}

.feedback-btn.rated {
	background-color: var(--faq-accent-light);
	color: var(--faq-accent);
	border-color: #c7d2fe;
	pointer-events: none;
}

/* Category Tag Badges */
.badge-soft-indigo {
	background-color: #e0e7ff;
	color: #3730a3;
	font-weight: 500;
	font-size: 0.75rem;
	padding: 0.35rem 0.65rem;
	border-radius: 0.5rem;
}