/**
 * Trained FAQ Builder - Frontend Styles
 * All selectors scoped under .efp-faq-wrapper for specificity
 * Critical properties use !important to prevent theme overrides
 */

/* Container styles apply only to shortcodes, not Gutenberg/Elementor widgets */
.efp-faq-wrapper.efp-faq-shortcode {
	max-width: var(--efp-container-max-width, 800px) !important;
	margin: 0 auto !important;
	padding: var(--efp-container-padding, 0) !important;
}

/* Widgets (Gutenberg, Elementor) always have 100% width and no padding */
.efp-faq-wrapper {
	width: 100% !important;
	box-sizing: border-box !important;
}

.efp-faq-wrapper * {
	box-sizing: border-box !important;
}

/* Button reset - neutralize all inherited button styling */
.efp-faq-wrapper button.efp-faq-question {
	appearance: none !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	margin: 0 !important;
	outline: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

.efp-faq-wrapper .efp-faq-container {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--efp-gap, 12px) !important;
}

.efp-faq-wrapper .efp-faq-item {
	border-radius: var(--efp-q-border-radius, 8px) !important;
	overflow: hidden;
	/* Note: overflow is hidden for border-radius but without !important */
}

.efp-faq-wrapper .efp-faq-question {
	width: 100% !important;
	display: flex !important;
	align-items: center !important;
	gap: var(--efp-icon-gap, 12px) !important;
	padding: var(--efp-q-padding, 16px 20px) !important;
	background: var(--efp-q-bg, #f5f5f5) !important;
	color: var(--efp-q-color, #333333) !important;
	font-family: var(--efp-q-font-family, inherit) !important;
	font-size: var(--efp-q-font-size, 18px) !important;
	font-weight: var(--efp-q-font-weight, 600) !important;
	line-height: var(--efp-q-line-height, 1.2) !important;
	border-top: var(--efp-q-border-top, 0px none #dddddd) !important;
	border-right: var(--efp-q-border-right, 0px none #dddddd) !important;
	border-bottom: var(--efp-q-border-bottom, 0px none #dddddd) !important;
	border-left: var(--efp-q-border-left, 0px none #dddddd) !important;
	border-radius: var(--efp-q-border-radius, 8px) !important;
	cursor: pointer !important;
	text-align: left !important;
	transition: all var(--efp-animation-duration, 300ms) var(--efp-animation-easing, ease),
	            border-bottom-left-radius var(--efp-animation-duration, 300ms) var(--efp-animation-easing, ease),
	            border-bottom-right-radius var(--efp-animation-duration, 300ms) var(--efp-animation-easing, ease);
	/* Word breaking for long text */
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	word-break: break-word !important;
	hyphens: auto !important;
}

.efp-faq-wrapper .efp-faq-question:hover {
	opacity: var(--efp-q-hover-opacity, 0.9) !important;
}

/* Remove theme-based focus/active styles */
.efp-faq-wrapper .efp-faq-question:focus {
	outline: var(--efp-q-focus-width, 2px) solid var(--efp-q-focus-color, #2271b1) !important;
	outline-offset: 2px !important;
	box-shadow: none !important;
	border-color: inherit !important;
	background: var(--efp-q-bg, #f5f5f5) !important;
	color: var(--efp-q-color, #333333) !important;
	text-decoration: none !important;
}

.efp-faq-wrapper .efp-faq-question:focus-visible {
	outline: var(--efp-q-focus-width, 2px) solid var(--efp-q-focus-color, #2271b1) !important;
	outline-offset: 2px !important;
	box-shadow: none !important;
	border-color: inherit !important;
	background: var(--efp-q-bg, #f5f5f5) !important;
	color: var(--efp-q-color, #333333) !important;
	text-decoration: none !important;
}

.efp-faq-wrapper .efp-faq-question:active {
	transform: none !important;
	box-shadow: none !important;
	border-color: inherit !important;
	background: var(--efp-q-bg, #f5f5f5) !important;
	color: var(--efp-q-color, #333333) !important;
	text-decoration: none !important;
}

/* Icon Position: Left (icon before text via order) */
.efp-faq-wrapper[data-icon-position="left"] .efp-faq-icon {
	order: -1 !important;
}

/* Icon Position: Right (natural order: text then icon, no special rules needed) */
/* The HTML order is text then icon, so right position works naturally */

/* Icon Position: Justified (text stretches, icon pushed to far right) */
.efp-faq-wrapper[data-icon-position="justified"] .efp-faq-question {
	justify-content: space-between !important;
}

.efp-faq-wrapper[data-icon-position="justified"] .efp-faq-question-text {
	flex: 1 !important;
}

.efp-faq-wrapper .efp-faq-question-text {
	min-width: 0 !important;
	/* Word breaking for long text */
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	word-break: break-word !important;
	hyphens: auto !important;
}

.efp-faq-wrapper .efp-faq-icon {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: var(--efp-q-icon-color, #666666) !important;
	transition: transform var(--efp-animation-duration, 300ms) var(--efp-animation-easing, ease) !important;
	flex-shrink: 0 !important;
	width: var(--efp-icon-size, 20px) !important;
	height: var(--efp-icon-size, 20px) !important;
}

.efp-faq-wrapper .efp-faq-icon svg {
	width: 100% !important;
	height: 100% !important;
	fill: currentColor !important;
}

/* Custom Icon Image Support */
.efp-faq-wrapper .efp-custom-icon-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
}

/* Dual Custom Icon States */
.efp-faq-wrapper .efp-faq-icon.efp-icon-custom {
	position: relative !important;
}

/* Fade Animation (Default/Free) */
.efp-faq-wrapper .efp-faq-icon.efp-icon-custom[data-animation="fade"] .efp-custom-icon-img {
	transition: opacity var(--efp-animation-duration, 300ms) var(--efp-animation-easing, ease) !important;
}

.efp-faq-wrapper .efp-faq-icon.efp-icon-custom[data-animation="fade"] .efp-custom-icon-img.efp-icon-closed {
	opacity: 1 !important;
}

.efp-faq-wrapper .efp-faq-icon.efp-icon-custom[data-animation="fade"] .efp-custom-icon-img.efp-icon-open {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	opacity: 0 !important;
}

.efp-faq-wrapper .efp-faq-item.efp-active .efp-faq-icon.efp-icon-custom[data-animation="fade"] .efp-custom-icon-img.efp-icon-closed {
	opacity: 0 !important;
}

.efp-faq-wrapper .efp-faq-item.efp-active .efp-faq-icon.efp-icon-custom[data-animation="fade"] .efp-custom-icon-img.efp-icon-open {
	opacity: 1 !important;
}

/* Rotate Animation (PRO) */
.efp-faq-wrapper .efp-faq-icon.efp-icon-custom[data-animation="rotate"] .efp-custom-icon-img {
	transition: opacity var(--efp-animation-duration, 300ms) var(--efp-animation-easing, ease) !important;
}

.efp-faq-wrapper .efp-faq-icon.efp-icon-custom[data-animation="rotate"] .efp-custom-icon-img.efp-icon-closed {
	opacity: 1 !important;
}

.efp-faq-wrapper .efp-faq-icon.efp-icon-custom[data-animation="rotate"] .efp-custom-icon-img.efp-icon-open {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	opacity: 0 !important;
}

.efp-faq-wrapper .efp-faq-item.efp-active .efp-faq-icon.efp-icon-custom[data-animation="rotate"] .efp-custom-icon-img.efp-icon-closed {
	opacity: 0 !important;
}

.efp-faq-wrapper .efp-faq-item.efp-active .efp-faq-icon.efp-icon-custom[data-animation="rotate"] .efp-custom-icon-img.efp-icon-open {
	opacity: 1 !important;
}

.efp-faq-wrapper .efp-faq-item.efp-active .efp-faq-icon.efp-icon-custom[data-animation="rotate"] {
	transform: rotate(180deg) !important;
}

.efp-faq-wrapper .efp-faq-item.efp-active .efp-faq-icon {
	transform: rotate(180deg) !important;
}

/* Don't rotate custom icons with fade animation */
.efp-faq-wrapper .efp-faq-item.efp-active .efp-faq-icon.efp-icon-custom[data-animation="fade"] {
	transform: none !important;
}

.efp-faq-wrapper .efp-faq-icon.efp-icon-plus-minus svg .efp-plus-vertical {
	transform-origin: center !important;
	transition: transform var(--efp-animation-duration, 300ms) var(--efp-animation-easing, ease) !important;
}

.efp-faq-wrapper .efp-faq-item.efp-active .efp-faq-icon.efp-icon-plus-minus svg .efp-plus-vertical {
	transform: rotate(90deg) !important;
}

/* Answer Container - Smooth scrollHeight-based animations */
.efp-faq-wrapper .efp-faq-answer {
	height: 0;
	overflow: hidden;
	/* Transitions are applied dynamically via JS for precise scrollHeight control */
	/* Note: height and overflow must NOT have !important so JS can override them */
}

.efp-faq-wrapper .efp-faq-item.efp-active .efp-faq-answer {
	overflow: visible;
}

/* Animation-specific initial states (JS handles transitions) */
.efp-faq-wrapper[data-animation-type="fade"] .efp-faq-answer {
	opacity: 0;
}

.efp-faq-wrapper[data-animation-type="fade"] .efp-faq-item.efp-active .efp-faq-answer {
	opacity: 1;
}

.efp-faq-wrapper[data-animation-type="slide-fade"] .efp-faq-answer {
	opacity: 0;
}

.efp-faq-wrapper[data-animation-type="slide-fade"] .efp-faq-item.efp-active .efp-faq-answer {
	opacity: 1;
}

.efp-faq-wrapper[data-animation-type="scale"] .efp-faq-answer {
	transform: scaleY(var(--efp-scale-start, 0.95));
	transform-origin: top !important;
}

.efp-faq-wrapper[data-animation-type="scale"] .efp-faq-item.efp-active .efp-faq-answer {
	transform: scaleY(1);
}

/* Icon Animations - Smooth rotation with staggered timing */
.efp-faq-wrapper .efp-faq-icon {
	transition: transform var(--efp-animation-duration, 300ms) var(--efp-animation-easing, ease) !important;
}

/* Plus-minus icon keeps container steady; only vertical bar rotates */
.efp-faq-wrapper .efp-faq-item.efp-active .efp-faq-icon.efp-icon-plus-minus {
	transform: none !important;
}

/* Reduced Motion Support - Respect user preferences */
@media (prefers-reduced-motion: reduce) {
	.efp-faq-wrapper .efp-faq-answer,
	.efp-faq-wrapper .efp-faq-icon,
	.efp-faq-wrapper .efp-faq-question {
		transition: none !important;
		animation: none !important;
	}
	
	.efp-faq-wrapper .efp-faq-item.efp-active .efp-faq-answer {
		height: auto;
	}
}

.efp-faq-wrapper .efp-faq-answer-content {
	margin-top: var(--efp-qa-gap, 0px) !important;
	padding: var(--efp-a-padding, 16px 20px) !important;
	background: var(--efp-a-bg, #ffffff) !important;
	color: var(--efp-a-color, #555555) !important;
	font-family: var(--efp-a-font-family, inherit) !important;
	font-size: var(--efp-a-font-size, 16px) !important;
	font-weight: var(--efp-a-font-weight, 400) !important;
	line-height: var(--efp-a-line-height, 1.2) !important;
	border-top: var(--efp-a-border-top, 0px none #dddddd) !important;
	border-right: var(--efp-a-border-right, 0px none #dddddd) !important;
	border-bottom: var(--efp-a-border-bottom, 0px none #dddddd) !important;
	border-left: var(--efp-a-border-left, 0px none #dddddd) !important;
	border-radius: var(--efp-a-border-radius, 0) !important;
	transition: border-top-left-radius var(--efp-animation-duration, 300ms) var(--efp-animation-easing, ease),
	            border-top-right-radius var(--efp-animation-duration, 300ms) var(--efp-animation-easing, ease);
	/* Word breaking for long text */
	word-wrap: break-word !important;
	overflow-wrap: break-word !important;
	word-break: break-word !important;
	hyphens: auto !important;
}

/* Force all child elements to inherit answer styles */
.efp-faq-wrapper .efp-faq-answer-content * {
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
}

.efp-faq-wrapper .efp-faq-answer-content p {
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
}

.efp-faq-wrapper .efp-faq-answer-content p:first-child {
	margin-top: 0 !important;
}

.efp-faq-wrapper .efp-faq-answer-content p:last-child {
	margin-bottom: 0 !important;
}

/* Responsive */
/* Smart Border Merging when item is active */
.efp-faq-wrapper[data-qa-gap="0"] .efp-faq-item.efp-active .efp-faq-question {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.efp-faq-wrapper[data-qa-gap="0"] .efp-faq-item.efp-active .efp-faq-answer-content {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
	/* Don't force border-top to none - let user's border setting apply */
}

/* =====================
   Mobile Responsive Styles
   ===================== */

@media (max-width: 768px) {
	/* Ensure full width on mobile */
	.efp-faq-wrapper {
		width: 100% !important;
		max-width: 100% !important;
	}
	
	.efp-faq-wrapper.efp-faq-shortcode {
		max-width: 100% !important;
	}
	
	/* Reduce gaps on mobile */
	.efp-faq-wrapper .efp-faq-container {
		gap: calc(var(--efp-gap, 12px) * 0.8) !important;
	}
	
	/* Reduce icon gap on mobile */
	.efp-faq-wrapper .efp-faq-question {
		gap: calc(var(--efp-icon-gap, 12px) * 0.8) !important;
	}
	
	/* Optimize icon size on mobile */
	.efp-faq-wrapper .efp-faq-icon svg,
	.efp-faq-wrapper .efp-faq-icon img {
		width: calc(var(--efp-icon-size, 20px) * 0.9) !important;
		height: calc(var(--efp-icon-size, 20px) * 0.9) !important;
	}
	
	/* Ensure text wrapping on mobile */
	.efp-faq-wrapper .efp-faq-question-text,
	.efp-faq-wrapper .efp-faq-answer-content,
	.efp-faq-wrapper .efp-faq-answer-content * {
		max-width: 100% !important;
		overflow-wrap: break-word !important;
		word-break: break-word !important;
	}
}

@media (max-width: 480px) {
	/* Extra small devices - further reduce gaps and icons */
	.efp-faq-wrapper .efp-faq-question {
		gap: 8px !important;
	}
	
	/* Further reduce icon size on very small screens */
	.efp-faq-wrapper .efp-faq-icon svg,
	.efp-faq-wrapper .efp-faq-icon img {
		width: calc(var(--efp-icon-size, 20px) * 0.8) !important;
		height: calc(var(--efp-icon-size, 20px) * 0.8) !important;
	}
}