/**
 * Frontend Styles for Shop FAQ Manager
 * Maximum specificity to prevent ANY theme overrides
 */

/* Global overrides */
.shop-faq-section,
.shop-faq-section.shop-faq-section,
div.shop-faq-section {
	margin: 60px 0 !important;
	padding: 50px 0 !important;
	background: #ffffff !important;
	background-color: #ffffff !important;
	clear: both !important;
	border: none !important;
	box-shadow: none !important;
}

.shop-faq-section *,
.shop-faq-section *:before,
.shop-faq-section *:after,
.shop-faq-section *:hover,
.shop-faq-section *:focus,
.shop-faq-section *:active {
	transition: none !important;
	animation: none !important;
	transform: none !important;
	box-shadow: none !important;
	-webkit-transition: none !important;
	-moz-transition: none !important;
	-o-transition: none !important;
}

.shop-faq-section .shop-faq-question.active .shop-faq-icon {
	transform: rotate(45deg) !important;
	-webkit-transform: rotate(45deg) !important;
}

.shop-faq-container,
.shop-faq-section .shop-faq-container,
div.shop-faq-container {
	max-width: 900px !important;
	margin: 0 auto !important;
	padding: 0 30px !important;
	background: transparent !important;
	border: none !important;
}

.shop-faq-title,
.shop-faq-section .shop-faq-title,
h2.shop-faq-title {
	text-align: left !important;
	margin: 0 0 30px 0 !important;
	padding: 0 !important;
	font-size: 32px !important;
	color: #1f2937 !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.shop-faq-accordion,
.shop-faq-section .shop-faq-accordion,
div.shop-faq-accordion {
	width: 100% !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
}

.shop-faq-item,
.shop-faq-section .shop-faq-item,
div.shop-faq-item {
	margin: 0 !important;
	border: none !important;
	border-top: 1px solid #e5e7eb !important;
	border-radius: 0 !important;
	overflow: visible !important;
	background: #ffffff !important;
	background-color: #ffffff !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.shop-faq-item:last-child,
.shop-faq-section .shop-faq-item:last-child {
	border-bottom: 1px solid #e5e7eb !important;
}

.shop-faq-question,
.shop-faq-section .shop-faq-question,
button.shop-faq-question,
.shop-faq-item .shop-faq-question {
	width: 100% !important;
	padding: 20px 0 !important;
	text-align: left !important;
	background: #ffffff !important;
	background-color: #ffffff !important;
	border: none !important;
	border-radius: 0 !important;
	cursor: pointer !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	color: #1f2937 !important;
	margin: 0 !important;
	box-shadow: none !important;
	outline: none !important;
}

.shop-faq-question:hover,
.shop-faq-question:focus,
.shop-faq-question:active,
button.shop-faq-question:hover,
button.shop-faq-question:focus,
button.shop-faq-question:active {
	background: #ffffff !important;
	background-color: #ffffff !important;
	color: #1f2937 !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
}

.shop-faq-question.active,
button.shop-faq-question.active,
.shop-faq-question.active:hover,
.shop-faq-question.active:focus,
.shop-faq-question.active:active {
	background: #ffffff !important;
	background-color: #ffffff !important;
	color: #1f2937 !important;
	border: none !important;
	box-shadow: none !important;
}

.shop-faq-question-text,
.shop-faq-question .shop-faq-question-text,
span.shop-faq-question-text {
	flex: 1 !important;
	padding-right: 20px !important;
	line-height: 1.5 !important;
	color: #1f2937 !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	margin: 0 !important;
	box-shadow: none !important;
}

.shop-faq-icon,
.shop-faq-question .shop-faq-icon,
span.shop-faq-icon {
	font-size: 20px !important;
	line-height: 1 !important;
	flex-shrink: 0 !important;
	width: 20px !important;
	height: 20px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: #1f2937 !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
}

.shop-faq-answer,
.shop-faq-section .shop-faq-answer,
div.shop-faq-answer {
	background: #ffffff !important;
	background-color: #ffffff !important;
	padding: 0 !important;
	max-height: 0 !important;
	overflow: hidden !important;
	border: none !important;
	margin: 0 !important;
	box-shadow: none !important;
}

.shop-faq-answer.active,
div.shop-faq-answer.active {
	max-height: 2000px !important;
	background: #ffffff !important;
	background-color: #ffffff !important;
}

.shop-faq-answer-content,
.shop-faq-answer .shop-faq-answer-content,
div.shop-faq-answer-content {
	padding: 0 0 20px 0 !important;
	color: #4b5563 !important;
	line-height: 1.7 !important;
	font-size: 15px !important;
	background: #ffffff !important;
	background-color: #ffffff !important;
	border: none !important;
	margin: 0 !important;
	box-shadow: none !important;
}

.shop-faq-answer-content p,
.shop-faq-answer-content > p {
	margin: 0 0 14px 0 !important;
	padding: 0 !important;
	color: #4b5563 !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	line-height: 1.7 !important;
	box-shadow: none !important;
}

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

.shop-faq-answer-content ul,
.shop-faq-answer-content ol {
	margin: 14px 0 !important;
	padding-left: 24px !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.shop-faq-answer-content li {
	margin-bottom: 8px !important;
	padding: 0 !important;
	color: #4b5563 !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	line-height: 1.7 !important;
	box-shadow: none !important;
}

.shop-faq-answer-content a {
	color: #3b82f6 !important;
	text-decoration: underline !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

.shop-faq-answer-content strong {
	color: #1f2937 !important;
	font-weight: 600 !important;
	background: transparent !important;
	background-color: transparent !important;
}

/* Responsive Design */
@media (max-width: 768px) {
	.shop-faq-section {
		margin: 50px 0 !important;
		padding: 40px 0 !important;
	}

	.shop-faq-container {
		padding: 0 20px !important;
	}

	.shop-faq-title {
		font-size: 28px !important;
		margin-bottom: 25px !important;
	}

	.shop-faq-question {
		padding: 18px 0 !important;
		font-size: 15px !important;
	}

	.shop-faq-answer-content {
		padding: 0 0 18px 0 !important;
		font-size: 14px !important;
	}
}

@media (max-width: 480px) {
	.shop-faq-section {
		margin: 40px 0 !important;
		padding: 30px 0 !important;
	}

	.shop-faq-container {
		padding: 0 15px !important;
	}

	.shop-faq-title {
		font-size: 24px !important;
		margin-bottom: 20px !important;
	}

	.shop-faq-question {
		padding: 16px 0 !important;
		font-size: 14px !important;
	}

	.shop-faq-answer-content {
		padding: 0 0 16px 0 !important;
		font-size: 14px !important;
	}
}