/* =================================================================
   SANUSq — FAQ Page Layout
   Style: Modern Wellness / Premium / Clean
   Colors: Cream (#F8F6F2), Dark Brown (#4A3328), Blue Accent (#1F4F99)
   ================================================================= */

:root {
	--faq-cream: #F8F6F2;
	--faq-brown: #4A3328;
	--faq-blue: #1F4F99;
	--faq-white: #FFFFFF;
	--faq-text: #2B2118;
	--faq-text-light: #6C5B4E;
	--faq-border: #EAE1D2;
}

/* ================================================================
   SECTION 1: HERO
   ================================================================ */
.faq-hero-section {
	background: var(--faq-cream) !important;
	padding: 64px max(32px, calc((100% - 1100px) / 2)) 32px !important;
	text-align: center;
}

.faq-hero-section .elementor-heading-title {
	font-size: 2.5rem !important;
	font-weight: 700 !important;
	color: var(--faq-brown) !important;
	margin-bottom: 16px !important;
	line-height: 1.2 !important;
}

.faq-hero-subtitle {
	font-size: 1.125rem !important;
	color: var(--faq-text-light) !important;
	max-width: 600px;
	margin: 0 auto 40px !important;
	line-height: 1.6 !important;
}

/* Hero Search Box */
.faq-search-widget {
	max-width: 480px;
	margin: 0 auto;
}

.faq-search-widget input[type="search"],
.faq-search-widget input[type="text"],
.faq-search-widget .search-field {
	padding: 14px 24px 14px 48px !important;
	border-radius: 50px !important;
	border: 1px solid var(--faq-border) !important;
	background-color: var(--faq-white) !important;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%234A3328' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: 18px center !important;
	background-size: 18px 18px !important;
	font-family: inherit !important;
	font-size: 1rem !important;
	color: var(--faq-text) !important;
	width: 100% !important;
	box-shadow: 0 4px 12px rgba(74, 51, 40, 0.05) !important;
	transition: all 0.3s ease !important;
	box-sizing: border-box !important;
}

.faq-search-widget input[type="search"]:focus {
	border-color: var(--faq-brown) !important;
	box-shadow: 0 8px 24px rgba(74, 51, 40, 0.08) !important;
	outline: none !important;
}

.faq-search-widget button,
.faq-search-widget input[type="submit"],
.faq-search-widget .search-submit {
	display: none !important; /* Hide submit button */
}


/* ================================================================
   SECTION 2: CATEGORY BUTTONS
   ================================================================ */
.sanusq-faq-categories {
	display: flex !important;
	flex-flow: row wrap !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 16px !important;
	margin-bottom: 48px !important;
	padding: 0 !important;
	background: transparent !important;
	width: 100% !important;
}

.sanusq-faq-categories .faq-cat-filter {
	flex: 0 1 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: auto !important;
	margin: 0 !important;
	border-radius: 999px !important;
	padding: 14px 32px !important;
	font-size: 1rem !important;
	font-weight: 600 !important;
	transition: all 0.2s ease !important;
	border: 1.5px solid var(--faq-border) !important;
	text-decoration: none !important;
	white-space: nowrap !important;
}

/* Category Sorting */
.sanusq-faq-categories .faq-cat-filter[data-filter="all"]      { order: 1 !important; }
.sanusq-faq-categories .faq-cat-filter[data-filter="products"] { order: 2 !important; }
.sanusq-faq-categories .faq-cat-filter[data-filter="orders"]   { order: 3 !important; }
.sanusq-faq-categories .faq-cat-filter[data-filter="shipping"] { order: 4 !important; }
.sanusq-faq-categories .faq-cat-filter[data-filter="usage"]    { order: 5 !important; }

/* Inactive State */
.sanusq-faq-categories .faq-cat-filter {
	background-color: var(--faq-white) !important;
	color: var(--faq-brown) !important;
}

/* Active State */
.sanusq-faq-categories .faq-cat-filter.faq-cat-active,
.sanusq-faq-categories .faq-cat-filter:hover {
	background-color: var(--faq-blue) !important;
	color: var(--faq-white) !important;
	border-color: var(--faq-blue) !important;
}

/* Filter Animation */
.faq-item-filterable {
	animation: faqFadeIn 0.4s ease-in-out;
}
@keyframes faqFadeIn {
	from { opacity: 0; transform: translateY(5px); }
	to { opacity: 1; transform: translateY(0); }
}


/* ================================================================
   SECTION 3: ACCORDION
   ================================================================ */
.faq-accordion-section {
	background: var(--faq-cream) !important;
	padding: 0 max(32px, calc((100% - 840px) / 2)) 80px !important;
}

.faq-accordion-section > .e-con-inner {
	width: 100% !important;
}

/* Style the Elementor Accordion to look like premium cards */
.faq-accordion-widget .elementor-accordion {
	display: flex !important;
	flex-direction: column !important;
	gap: 16px !important;
}

.sanusq-faq-accordion .elementor-accordion-item {
	background-color: var(--faq-white) !important;
	border: 1px solid var(--faq-border) !important;
	border-radius: 12px !important;
	margin-bottom: 16px !important;
	overflow: hidden;
	transition: all 0.3s ease !important;
	box-shadow: 0 4px 12px rgba(0,0,0,0.02) !important;
}

/* Hover effect on accordion item */
.sanusq-faq-accordion .elementor-accordion-item:hover {
	box-shadow: 0 8px 24px rgba(0,0,0,0.06) !important;
	border-color: #d4cfc5 !important;
}

/* Title bar */
.sanusq-faq-accordion .elementor-tab-title {
	padding: 24px !important;
	background-color: transparent !important;
	border: none !important;
	color: var(--faq-text-heading) !important;
	font-weight: 600 !important;
	font-size: 1.05rem !important;
	display: flex !important;
	justify-content: flex-start !important;
	align-items: center !important;
	gap: 16px !important;
}

.faq-accordion-widget .elementor-tab-title,
.faq-accordion-widget .elementor-tab-title a,
.faq-accordion-widget .elementor-accordion-title {
	color: var(--faq-brown) !important;
	text-align: left !important;
}

/* Inject Custom Plus/Minus SVG Icons */
.faq-accordion-widget .elementor-accordion-icon {
	display: none !important; /* Hide Elementor default icon */
}

.faq-accordion-widget .elementor-tab-title::before {
	content: '';
	display: block;
	width: 24px;
	height: 24px;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%231F4F99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='12' y1='5' x2='12' y2='19'/%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.faq-accordion-widget .elementor-tab-title.elementor-active::before {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%231F4F99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3C/svg%3E");
}

.faq-accordion-widget .elementor-tab-content {
	padding: 0 24px 24px !important;
	border: none !important;
	color: var(--faq-text-body) !important;
	font-size: 0.95rem !important;
	line-height: 1.6 !important;
}


/* ================================================================
   SECTION 4: TRUST
   ================================================================ */
.elementor-189 > .e-con:nth-child(4),
.elementor-189 > .elementor-section-wrap > .elementor-section:nth-child(4),
.faq-trust-section {
	background: var(--faq-white) !important;
	padding: 64px max(32px, calc((100% - 1100px) / 2)) !important;
	border-top: 1px solid var(--faq-border);
}

.elementor-189 > .e-con:nth-child(4) > .e-con-inner,
.elementor-189 > .elementor-section-wrap > .elementor-section:nth-child(4) > .elementor-container,
.faq-trust-section > .e-con-inner {
	width: 100% !important;
	display: flex !important;
	flex-direction: row !important;
	justify-content: space-between !important;
	gap: 32px !important;
}

/* Fallback if Elementor uses direct Flex on container without e-con-inner */
.elementor-189 > .e-con:nth-child(4) {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	gap: 32px !important;
}

.faq-trust-item {
	text-align: center !important;
	flex: 1 !important;
	position: relative;
	padding-top: 72px !important; /* Make room for absolute SVG icons */
}

/* Hide default Elementor icon box if any */
.faq-trust-icon,
.faq-trust-item .elementor-icon-box-icon {
	display: none !important;
}

/* 1. Research-backed formula */
.faq-trust-item:nth-child(1)::before {
	content: '';
	position: absolute;
	top: 0; left: 50%;
	transform: translateX(-50%);
	width: 56px; height: 56px;
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%231F4F99' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 3h6v11l5 8H4l5-8V3z'/%3E%3Cpath d='M9 13h6'/%3E%3C/svg%3E") no-repeat center;
	background-size: contain;
}

/* 2. Natural ingredients */
.faq-trust-item:nth-child(2)::before {
	content: '';
	position: absolute;
	top: 0; left: 50%;
	transform: translateX(-50%);
	width: 56px; height: 56px;
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%231F4F99' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 22l8-8'/%3E%3C/svg%3E") no-repeat center;
	background-size: contain;
}

/* 3. Fast shipping */
.faq-trust-item:nth-child(3)::before {
	content: '';
	position: absolute;
	top: 0; left: 50%;
	transform: translateX(-50%);
	width: 56px; height: 56px;
	background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%231F4F99' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E") no-repeat center;
	background-size: contain;
}

.faq-trust-item h4 {
	font-size: 1.125rem !important;
	font-weight: 700 !important;
	color: var(--faq-brown) !important;
	margin-bottom: 8px !important;
}

.faq-trust-item p {
	font-size: 0.9rem !important;
	color: var(--faq-text-light) !important;
	line-height: 1.5 !important;
}

@media (max-width: 767px) {
	.faq-trust-section > .e-con-inner,
	.elementor-189 > .e-con:nth-child(4) {
		flex-direction: column !important;
		align-items: center !important;
	}
}


/* ================================================================
   SECTION 5: CTA (MATCHING BLOG)
   ================================================================ */
.elementor-189 > .e-con:nth-child(5),
.elementor-189 > .elementor-section-wrap > .elementor-section:nth-child(5),
.faq-cta-section {
	background: transparent !important;
	padding: 80px max(32px, calc((100% - 1100px) / 2)) !important;
	position: relative !important;
	z-index: 1;
	overflow: hidden;
}

.elementor-189 > .e-con:nth-child(5)::before,
.elementor-189 > .elementor-section-wrap > .elementor-section:nth-child(5)::before,
.faq-cta-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--faq-brown) !important;
	z-index: -2;
	pointer-events: none;
}

.elementor-189 > .e-con:nth-child(5)::after,
.elementor-189 > .elementor-section-wrap > .elementor-section:nth-child(5)::after,
.faq-cta-section::after {
	content: '';
	position: absolute;
	top: 16px;
	bottom: 16px;
	left: max(16px, calc((100% - 1140px) / 2));
	right: max(16px, calc((100% - 1140px) / 2));
	background-color: #553B2F; /* Slightly lighter brown */
	background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='40' cy='40' r='30'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-repeat: repeat;
	border-radius: 20px;
	z-index: -1;
	pointer-events: none;
}

.elementor-189 > .e-con:nth-child(5) > *,
.elementor-189 > .elementor-section-wrap > .elementor-section:nth-child(5) > *,
.faq-cta-section > * {
	position: relative;
	z-index: 1 !important;
}

.elementor-189 > .e-con:nth-child(5) .elementor-heading-title,
.elementor-189 > .elementor-section-wrap > .elementor-section:nth-child(5) .elementor-heading-title,
.faq-cta-section .elementor-heading-title {
	color: var(--faq-white) !important;
	font-size: 2.2rem !important;
	font-weight: 700 !important;
	margin-bottom: 24px !important;
	text-align: center !important;
}

.faq-cat-pill {
	width: auto !important;
}

.faq-cat-pill a.elementor-button,
.faq-cat-pill .elementor-button {
	border-radius: 999px !important;
	padding: 14px 32px !important;
	border: 1px solid var(--faq-border) !important;
	font-weight: 600 !important;
	font-size: 1rem !important;
	color: var(--faq-brown) !important;
	background-color: var(--faq-white) !important;
	transition: all 0.3s ease !important;
	display: inline-block !important;
}

.faq-cta-btn a.elementor-button,
.faq-cta-btn .elementor-button {
	border-radius: 999px !important;
	padding: 16px 48px !important;
	background-color: var(--faq-white) !important;
	color: var(--faq-brown) !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 12px !important;
	box-shadow: 0 8px 24px rgba(0,0,0,0.1) !important;
}

.faq-cta-btn a.elementor-button::after,
.faq-cta-btn .elementor-button::after {
	content: '';
	display: inline-block;
	width: 20px;
	height: 20px;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%234A3328' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	transition: transform 0.3s ease !important;
}

.faq-cta-btn a.elementor-button:hover,
.faq-cta-btn .elementor-button:hover {
	transform: translateY(-4px) !important;
	box-shadow: 0 12px 32px rgba(0,0,0,0.15) !important;
}

.faq-cta-btn a.elementor-button:hover::after,
.faq-cta-btn .elementor-button:hover::after {
	transform: translateX(6px) !important;
}