/**
 * 1.0 FAQ — Consolidated Styles
 *
 * Merged from: pdp-faq.css, home-faq.css, faq-faq.css.
 * Applied globally to all [faqs] shortcode outputs.
 *
 * Selectors shared with .product_faqs accordion are scoped with
 * :has(.faq-tabs) so they only apply to our shortcode (which has
 * .faq-tabs) and not the accordion (which does not).
 *
 * 1.1 Common Base
 * 1.2 Homepage Only
 * 1.3 PDP Only
 * 1.4 FAQ Page Only
 */


/**
 * 1.1 Common Base
 *
 * Applies to all pages using the [faqs] shortcode.
 *
 * 1.1.1 Non-conflicting selectors (global).
 *       These classes only exist in our shortcode output.
 * 1.1.2 Conflicting selectors (scoped with :has(.faq-tabs)).
 *       These classes also exist in .product_faqs accordion on PDP.
 *       :has(.faq-tabs) ensures styles only apply when .faq-tabs
 *       is present — which is true for our shortcode, false for accordion.
 */


/**
 * 1.1.1 Non-conflicting selectors — global.
 */

.faq-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	width: 840px;
	gap: 16px;
	margin-bottom: 32px;
}

.faq-tab-label {
	display: block;
	padding: 8px 16px !important;
	border: 2px solid var(--nd-section-gray, #e0e0e0);
	border-radius: 100px;
	background: var(--nd-theme-white, #ffffff);
	color: var(--nd-theme-dark) !important;
	font-weight: 700 !important;
	font-size: 20px !important;
	cursor: pointer;
	text-wrap: nowrap !important;
	white-space: nowrap;
}

.faq-tab-label.is-active {
	background: var(--nd-theme-dark);
	color: var(--nd-theme-white) !important;
}

.faq-tab-content {
	display: none;
	width: 100%;
	text-align: left;
}

.faq-tab-content.is-active {
	display: flex;
	flex-direction: column;
}

.read-all-faq-btn-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
}

.read-all-faq-btn-wrapper .new__design-btn {
	padding: 10px 16px;
	text-transform: uppercase;
}


/**
 * 1.1.2 Conflicting selectors — scoped with :has(.faq-tabs).
 *
 * Only applies when .faq-tabs-container contains .faq-tabs
 * (our shortcode), not when it contains only details.faq-details
 * (the .product_faqs accordion).
 */

.faq-tabs-container:has(.faq-tabs) {
	margin: 0 auto 40px;
	padding: 0 20px;
	max-width: 960px;
	text-align: center;
}

.faq-tabs-container:has(.faq-tabs) h2 {
	margin-bottom: 32px;
}

.faq-tabs-container:has(.faq-tabs) .faq-tabs-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

.faq-tabs-container:has(.faq-tabs) input[type="radio"] {
	display: none;
}

.faq-tabs-container:has(.faq-tabs) .faq-details {
	display: block;
	margin-bottom: 24px;
	padding: 12px 16px;
	max-width: 840px;
	border: 1px solid var(--nd-section-gray);
	border-radius: 8px;
	background: var(--nd-theme-white);
}

.faq-tabs-container:has(.faq-tabs) .faq-details summary {
	position: relative;
	padding-right: 24px;
	font-weight: 500;
	font-size: clamp(16px, 2vw, 20px);
	list-style: none;
	cursor: pointer;
}

.faq-tabs-container:has(.faq-tabs) .faq-details summary::-webkit-details-marker {
	display: none;
}

.faq-tabs-container:has(.faq-tabs) .faq-details summary::before {
	position: absolute;
	top: 6px;
	right: 0;
	width: 16px;
	height: 16px;
	background-image: url("/wp-content/themes/hello-theme-child-master/img/homepage/new-design-right-chevron.svg");
	background-size: 16px;
	rotate: 90deg;
	content: "";
}

.faq-tabs-container:has(.faq-tabs) .faq-details[open] summary::before {
	background-image: url("/wp-content/themes/hello-theme-child-master/img/homepage/new-design-right-chevron.svg");
	rotate: -90deg;
}

.faq-tabs-container:has(.faq-tabs) .faq-answer {
	margin-top: 20px;
	color: var(--nd-theme-dark);
	font-size: 16px;
	font-weight: 500;
}

.faq-tabs-container:has(.faq-tabs) .faq-answer a {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	color: #345a99;
}

.faq-tabs-container:has(.faq-tabs) .faq-answer a::after {
	position: relative;
	top: -4px;
	min-width: 100%;
	border: 1px solid #345a99;
	content: "";
}


/**
 * 1.1.3 Common — Desktop
 *
 * Hides scroll buttons on desktop for all pages.
 * JS change 1.2 handles mobile visibility; CSS forces hide on desktop.
 */

@media only screen and (min-width: 860px) {

	.faq-scroll-btn {
		display: none;
	}
}


/**
 * 1.1.4 Common — Mobile
 *
 * Scroll button styles, tab overflow, gradients.
 */

@media only screen and (max-width: 860px) {

	.faq-tabs-container:has(.faq-tabs) {
		padding-right: 0;
		padding-left: 0;
	}

	.faq-tabs {
		display: flex;
		width: calc(100vw - 32px) !important;
		flex-wrap: nowrap !important;
		justify-content: center;
		overflow-x: scroll;
		text-wrap: nowrap;
	}

	.faq-tabs::-webkit-scrollbar {
		display: none;
	}

	.faq-scroll-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		min-width: 50px;
		padding: 12px;
		margin-top: 0;
		border: none !important;
		border-radius: 0 !important;
	}

	.faq-scroll-btn img {
		width: 20px;
		height: 20px;
	}

	.faq-scroll-btn.faq-prev {
		justify-content: start;
		left: 0;
		padding-left: 0;
		background: linear-gradient(to right, #f7f6f1 20%, transparent 80%);
	}

	.faq-scroll-btn.faq-next {
		justify-content: end;
		right: 0;
		padding-right: 0;
		background: linear-gradient(to left, #f7f6f1 20%, transparent 80%);
	}

	.faq-scroll-btn.faq-next:hover,
	.faq-scroll-btn.faq-next:active,
	.faq-scroll-btn.faq-next:focus,
	.faq-scroll-btn.faq-next:focus-within {
		background: linear-gradient(to left, #f7f6f1 20%, transparent 80%) !important;
	}

	.faq-scroll-btn.faq-prev:hover,
	.faq-scroll-btn.faq-prev:active,
	.faq-scroll-btn.faq-prev:focus,
	.faq-scroll-btn.faq-prev:focus-within {
		background: linear-gradient(to right, #f7f6f1 20%, transparent 80%) !important;
	}

	.rotate-180 {
		transform: rotate(-180deg);
	}
}


/**
 * 1.2 Homepage Only
 *
 * Scoped under body.home (WordPress standard class).
 */

body.home .new__design-btn {
	font-weight: 700;
}


/**
 * 1.3 PDP Only
 *
 * Scoped under body.single-product + .faq-main-wrapper to protect
 * from conflicting with the .product_faqs accordion on PDP pages.
 * .faq-main-wrapper only exists on the PDP template.
 */

body.single-product .faq-main-wrapper .faq-tab-label {
	display: block;
	padding: 8px 16px !important;
	border: 2px solid var(--nd-section-gray, #e0e0e0);
	border-radius: 100px;
	background: var(--nd-theme-white, #ffffff);
	color: var(--nd-theme-dark) !important;
	font-family: var(--nd-primary-font) !important;
	font-weight: 700 !important;
	font-size: 20px !important;
	cursor: pointer;
	text-wrap: nowrap !important;
	white-space: nowrap;
}

body.single-product .faq-main-wrapper label.about-this-product {
	order: -1 !important;
}

body.single-product .faq-main-wrapper .faq-tab-label.is-active {
	background: var(--nd-theme-dark);
	color: var(--nd-theme-white) !important;
}

body.single-product .faq-main-wrapper .faq-scroll-btn {
	position: absolute;
	padding: 10px;
	margin-top: 0;
	border: none !important;
}


/**
 * 1.3.1 PDP — Container padding at wider breakpoint.
 */

@media only screen and (max-width: 900px) {

	body.single-product .faq-main-wrapper .faq-tabs-container {
		padding-right: 0;
		padding-left: 0;
	}
}


/**
 * 1.4 FAQ Page Only
 *
 * Scoped under .ic-faq-page (added by ic_faq_body_class in faq-kernel.php).
 */

.ic-faq-page .faq-tabs-container h2 {
	margin-top: -10px;
}

.ic-faq-page .faq-tab-label a {
	font-weight: 600 !important;
}

.ic-faq-page .faq-btn {
	min-width: 220px;
}

.ic-faq-page .faq-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.ic-faq-page .faq-specific-text {
	max-width: 658px;
	margin-bottom: 20px;
	color: var(--nd-theme-dark);
	font-size: 16px;
	font-weight: 500 !important;
	line-height: 24px;
	text-align: center;
}

.ic-faq-page .faq-specific-text a {
	color: var(--nd-theme-dark);
	text-decoration-line: underline;
}


/**
 * 1.4.1 FAQ Page — Mobile
 */

@media only screen and (max-width: 860px) {

	.ic-faq-page .faq-btn {
		min-width: 100%;
	}
}