/**
 * Universal FAQ Template – CSS custom-property driven.
 * All visual values are set as inline CSS variables on the .ufaqsw-faq container.
 * Layout variants are selected via the data-layout attribute.
 */

/* ─── Default variable values ─────────────────────── */
.ufaqsw-faq {
	--ufaqsw-q-color: #1a1a1a;
	--ufaqsw-q-bg: #f8f9fa;
	--ufaqsw-q-font-size: 15px;
	--ufaqsw-q-font-weight: 500;
	--ufaqsw-q-letter-spacing: normal;
	--ufaqsw-q-text-transform: none;
	--ufaqsw-a-color: #444444;
	--ufaqsw-a-bg: #ffffff;
	--ufaqsw-a-font-size: 14px;
	--ufaqsw-a-line-height: 1.6;
	--ufaqsw-border-color: #e2e8f0;
	--ufaqsw-border-width: 1px;
	--ufaqsw-border-style: solid;
	--ufaqsw-title-color: #111827;
	--ufaqsw-title-font-size: 22px;
	--ufaqsw-title-font-weight: 700;
	--ufaqsw-title-bg: transparent;
	--ufaqsw-border-radius: 4px;
	--ufaqsw-item-padding: 16px;
	--ufaqsw-item-gap: 8px;
	--ufaqsw-icon-size: 13px;
	--ufaqsw-icon-color: currentColor;
	--ufaqsw-icon-active-color: currentColor;
	--ufaqsw-shadow: none;
	/* Active-state vars default to the normal question values */
	--ufaqsw-q-active-color: var(--ufaqsw-q-color);
	--ufaqsw-q-active-bg: var(--ufaqsw-q-bg);
	--ufaqsw-active-border-color: var(--ufaqsw-border-color);
	border: none;
}

/* ─── Group title ─────────────────────────────────── */
.ufaqsw-faq .ufaqsw-faq__title {
	color: var(--ufaqsw-title-color);
	font-size: var(--ufaqsw-title-font-size);
	font-weight: var(--ufaqsw-title-font-weight);
	background: var(--ufaqsw-title-bg);
	margin: 0 0 16px;
	line-height: 1.3;
}

/* ─── FAQ item wrapper ────────────────────────────── */
.ufaqsw-faq .ufaqsw-faq__item {
	margin-bottom: var(--ufaqsw-item-gap);
	border-radius: var(--ufaqsw-border-radius);
	overflow: hidden;
	box-shadow: var(--ufaqsw-shadow);
}

/* ─── Question row ────────────────────────────────── */
.ufaqsw-faq .ufaqsw-faq__question {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	gap: 12px;
	padding: var(--ufaqsw-item-padding);
	background: var(--ufaqsw-q-bg);
	color: var(--ufaqsw-q-color);
	font-size: var(--ufaqsw-q-font-size);
	font-weight: var(--ufaqsw-q-font-weight);
	letter-spacing: var(--ufaqsw-q-letter-spacing);
	text-transform: var(--ufaqsw-q-text-transform);
	border: var(--ufaqsw-border-width) var(--ufaqsw-border-style) var(--ufaqsw-border-color);
	border-radius: var(--ufaqsw-border-radius);
	cursor: pointer;
	-webkit-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	-webkit-transition: background 0.15s ease, color 0.15s ease;
	        transition: background 0.15s ease, color 0.15s ease;
}

.ufaqsw-faq .ufaqsw-faq__question:hover {
	-webkit-filter: brightness(0.97);
	        filter: brightness(0.97);
}

.ufaqsw-faq .ufaqsw-faq__question[aria-expanded="true"] {
	color: var(--ufaqsw-q-active-color);
	background: var(--ufaqsw-q-active-bg);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-color: transparent;
}

.ufaqsw-faq .ufaqsw-faq__question-text {
	-webkit-box-flex: 1;
	    -ms-flex: 1;
	        flex: 1;
}

/* ─── Toggle icons ────────────────────────────────── */
.ufaqsw-faq .ufaqsw-faq__icon {
	-ms-flex-negative: 0;
	    flex-shrink: 0;
	font-size: var(--ufaqsw-icon-size);
	line-height: 1;
	color: var(--ufaqsw-icon-color);
}

.ufaqsw-faq .ufaqsw-faq__question[aria-expanded="true"] .ufaqsw-faq__icon {
	color: var(--ufaqsw-icon-active-color);
}

.ufaqsw-faq .ufaqsw-faq__question .ufaqsw-icon-active {
	display: none;
}

.ufaqsw-faq .ufaqsw-faq__question[aria-expanded="true"] .ufaqsw-icon-normal {
	display: none;
}

.ufaqsw-faq .ufaqsw-faq__question[aria-expanded="true"] .ufaqsw-icon-active {
	display: inline;
}

/* ─── Answer panel ────────────────────────────────── */
.ufaqsw-faq .ufaqsw-faq__answer {
	background: var(--ufaqsw-a-bg);
	color: var(--ufaqsw-a-color);
	font-size: var(--ufaqsw-a-font-size);
	line-height: var(--ufaqsw-a-line-height);
	border: var(--ufaqsw-border-width) var(--ufaqsw-border-style) var(--ufaqsw-border-color);
	border-top: none;
	border-bottom-left-radius: var(--ufaqsw-border-radius);
	border-bottom-right-radius: var(--ufaqsw-border-radius);
}

.ufaqsw-faq .ufaqsw-faq__answer-inner {
	padding: var(--ufaqsw-item-padding);
}

/* Slide animation */
.ufaqsw-faq[data-animation="slide"] .ufaqsw-faq__answer {
	overflow: hidden;
	max-height: 0;
	display: block !important;
	border-top: none;
	border-left-color: transparent;
	border-right-color: transparent;
	border-bottom-color: transparent;
	/* Clip bg to content-box: at max-height:0 the content area is 0px tall so nothing
	   paints — no bleed through the 1px transparent border-box. Background stays at
	   var(--ufaqsw-a-bg) the entire animation so no white flash when opening/closing. */
	background-clip: content-box;
	-webkit-transition: max-height 0.3s ease;
	        transition: max-height 0.3s ease;
}

.ufaqsw-faq[data-animation="slide"] .ufaqsw-faq__answer.ufaqsw-open {
	max-height: 2000px;
	border-left-color: var(--ufaqsw-border-color);
	border-right-color: var(--ufaqsw-border-color);
	border-bottom-color: var(--ufaqsw-border-color);
}

/* Fade animation — outer handles height only; inner handles opacity.
   This keeps the background-color opaque during close so the page white
   never shows through the fading element. */
.ufaqsw-faq[data-animation="fade"] .ufaqsw-faq__answer {
	overflow: hidden;
	max-height: 0;
	display: block !important;
	border-top: none;
	border-left-color: transparent;
	border-right-color: transparent;
	border-bottom-color: transparent;
	background-clip: content-box;
	-webkit-transition: max-height 0.01s 0.25s linear;
	        transition: max-height 0.01s 0.25s linear;
}

.ufaqsw-faq[data-animation="fade"] .ufaqsw-faq__answer.ufaqsw-open {
	max-height: 2000px;
	-webkit-transition: max-height 0.01s linear;
	        transition: max-height 0.01s linear;
	border-left-color: var(--ufaqsw-border-color);
	border-right-color: var(--ufaqsw-border-color);
	border-bottom-color: var(--ufaqsw-border-color);
}

/* Inner wrapper fades; outer stays opaque so no white bleeds through */
.ufaqsw-faq[data-animation="fade"] .ufaqsw-faq__answer .ufaqsw-faq__answer-inner {
	opacity: 0;
	-webkit-transition: opacity 0.25s ease;
	        transition: opacity 0.25s ease;
}

.ufaqsw-faq[data-animation="fade"] .ufaqsw-faq__answer.ufaqsw-open .ufaqsw-faq__answer-inner {
	opacity: 1;
	-webkit-transition: opacity 0.25s ease 0.01s;
	        transition: opacity 0.25s ease 0.01s;
}

/* ─── Layout: classic (default) ───────────────────── */
/* no overrides needed; base styles are the classic layout */

/* ─── Layout: card ────────────────────────────────── */
.ufaqsw-faq[data-layout="card"] .ufaqsw-faq__item {
	border: var(--ufaqsw-border-width) var(--ufaqsw-border-style) var(--ufaqsw-border-color);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

.ufaqsw-faq[data-layout="card"] .ufaqsw-faq__question {
	border: none;
	border-radius: 0;
}

.ufaqsw-faq[data-layout="card"] .ufaqsw-faq__question[aria-expanded="true"] {
	border-radius: 0;
}

.ufaqsw-faq[data-layout="card"] .ufaqsw-faq__answer {
	border: none;
	border-top: var(--ufaqsw-border-width) var(--ufaqsw-border-style) var(--ufaqsw-border-color);
	border-radius: 0;
}

.ufaqsw-faq[data-layout="card"][data-animation="slide"] .ufaqsw-faq__answer:not(.ufaqsw-open),
.ufaqsw-faq[data-layout="card"][data-animation="fade"] .ufaqsw-faq__answer:not(.ufaqsw-open) {
	border-top: none;
}

/* ─── Layout: minimal ─────────────────────────────── */
.ufaqsw-faq[data-layout="minimal"] .ufaqsw-faq__item {
	border-bottom: var(--ufaqsw-border-width) var(--ufaqsw-border-style) var(--ufaqsw-border-color);
	margin-bottom: var(--ufaqsw-item-gap);
	border-radius: 0;
}

.ufaqsw-faq[data-layout="minimal"] .ufaqsw-faq__question {
	background: var(--ufaqsw-q-bg);
	border: none;
	border-radius: 0;
}

.ufaqsw-faq[data-layout="minimal"] .ufaqsw-faq__question[aria-expanded="true"] {
	color: var(--ufaqsw-q-active-color);
	background: var(--ufaqsw-q-active-bg);
	border-radius: 0;
	border-bottom-color: transparent;
}

.ufaqsw-faq[data-layout="minimal"] .ufaqsw-faq__answer {
	border: none;
	background: var(--ufaqsw-a-bg);
	border-radius: 0;
}

/* ─── Layout: boxed ───────────────────────────────── */
.ufaqsw-faq[data-layout="boxed"] {
	border: var(--ufaqsw-border-width) var(--ufaqsw-border-style) var(--ufaqsw-border-color);
	border-radius: var(--ufaqsw-border-radius);
	overflow: hidden;
}

.ufaqsw-faq[data-layout="boxed"] .ufaqsw-faq__title {
	padding: var(--ufaqsw-item-padding);
	border-bottom: var(--ufaqsw-border-width) var(--ufaqsw-border-style) var(--ufaqsw-border-color);
	margin-bottom: 0;
}

.ufaqsw-faq[data-layout="boxed"] .ufaqsw-faq__item {
	border-radius: 0;
	margin-bottom: var(--ufaqsw-item-gap);
	border-bottom: var(--ufaqsw-border-width) var(--ufaqsw-border-style) var(--ufaqsw-border-color);
	box-shadow: none;
}

.ufaqsw-faq[data-layout="boxed"] .ufaqsw-faq__item:last-child {
	border-bottom: none;
	margin-bottom: 0;
}

.ufaqsw-faq[data-layout="boxed"] .ufaqsw-faq__question {
	border: none;
	border-radius: 0;
}

.ufaqsw-faq[data-layout="boxed"] .ufaqsw-faq__question[aria-expanded="true"] {
	border-radius: 0;
	border-bottom-color: transparent;
}

.ufaqsw-faq[data-layout="boxed"] .ufaqsw-faq__answer {
	border: none;
	border-top: var(--ufaqsw-border-width) var(--ufaqsw-border-style) var(--ufaqsw-border-color);
	border-radius: 0;
}

.ufaqsw-faq[data-layout="boxed"][data-animation="slide"] .ufaqsw-faq__answer:not(.ufaqsw-open),
.ufaqsw-faq[data-layout="boxed"][data-animation="fade"] .ufaqsw-faq__answer:not(.ufaqsw-open) {
	border-top: none;
}

/* ─── Border position: bottom-only ───────────────── */
.ufaqsw-faq[data-border="bottom-only"] .ufaqsw-faq__item {
	border-radius: 0;
}

.ufaqsw-faq[data-border="bottom-only"] .ufaqsw-faq__question {
	border-top: none;
	border-left: none;
	border-right: none;
	border-radius: 0;
}

.ufaqsw-faq[data-border="bottom-only"] .ufaqsw-faq__question[aria-expanded="true"] {
	border-bottom-color: transparent;
}

.ufaqsw-faq[data-border="bottom-only"] .ufaqsw-faq__answer {
	border-left: none;
	border-right: none;
	border-radius: 0;
}

/* ─── Border position: left-accent ───────────────── */
.ufaqsw-faq[data-border="left-accent"] .ufaqsw-faq__item {
	border-radius: 0;
}

.ufaqsw-faq[data-border="left-accent"] .ufaqsw-faq__question {
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left-width: -webkit-calc(var(--ufaqsw-border-width) * 3);
	border-left-width: calc(var(--ufaqsw-border-width) * 3);
	border-radius: 0;
}

.ufaqsw-faq[data-border="left-accent"] .ufaqsw-faq__question[aria-expanded="true"] {
	border-left-color: var(--ufaqsw-active-border-color);
	border-bottom-color: transparent;
}

.ufaqsw-faq[data-border="left-accent"] .ufaqsw-faq__answer {
	border-top: none;
	border-right: none;
	border-bottom: none;
	border-left: -webkit-calc(var(--ufaqsw-border-width) * 3) var(--ufaqsw-border-style) transparent;
	border-left: calc(var(--ufaqsw-border-width) * 3) var(--ufaqsw-border-style) transparent;
	border-radius: 0;
}

.ufaqsw-faq[data-border="left-accent"] .ufaqsw-faq__answer.ufaqsw-open,
.ufaqsw-faq[data-border="left-accent"] .ufaqsw-faq__answer[aria-hidden="false"] {
	border-left-color: var(--ufaqsw-active-border-color);
}

/* ─── Icon position: left ─────────────────────────── */
.ufaqsw-faq[data-icon-position="left"] .ufaqsw-faq__icon {
	-webkit-box-ordinal-group: 0;
	    -ms-flex-order: -1;
	        order: -1;
}