/* MOOV FAQ — dark accordion */

.moov-faq{
	--moov-card-top:#141c2e;
	--moov-card-bottom:#0c1220;
	--moov-line:rgba(255,255,255,.07);
	--moov-edge:rgba(255,255,255,.10);
	--moov-title:#e9eef7;
	--moov-body:#8e9bb0;
	--moov-icon:#aab6c8;
	--moov-focus:#4f7fff;

	width:100%;
	max-width:1000px;
	margin:0 auto;
	padding:6px clamp(16px,3.2vw,34px);
	direction:ltr;
	background:linear-gradient(180deg,var(--moov-card-top),var(--moov-card-bottom));
	border:1px solid var(--moov-edge);
	border-radius:18px;
	box-shadow:0 30px 80px rgba(0,0,0,.45);
	font-family:"Inter","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
	box-sizing:border-box;
	text-align:left;
	overflow:hidden;
}
.moov-faq,
.moov-faq__item,
.moov-faq__panel{max-width:100%}
.moov-faq *,
.moov-faq *::before,
.moov-faq *::after{box-sizing:border-box}

.moov-faq__item{border-bottom:1px solid var(--moov-line)}
.moov-faq__item:last-child{border-bottom:0}

.moov-faq .moov-faq__q{
	display:flex;
	align-items:center;
	gap:clamp(12px,1.6vw,18px);
	width:100%;
	max-width:100%;
	margin:0;
	padding:clamp(16px,2vw,22px) 0;
	background:none;
	border:0;
	border-radius:0;
	box-shadow:none;
	cursor:pointer;
	text-align:left;
	text-transform:none;
	color:var(--moov-title);
	font-family:inherit;
	font-size:clamp(13.5px,1.05vw + 9.5px,15.5px);
	font-weight:500;
	line-height:1.45;
	letter-spacing:.1px;
	white-space:normal;
	text-decoration:none;
}
.moov-faq .moov-faq__q:hover{background:none;color:#fff}
.moov-faq .moov-faq__q:hover .moov-faq__dot{border-color:rgba(255,255,255,.45)}
.moov-faq .moov-faq__q:hover .moov-faq__sign{opacity:1}
.moov-faq__dot,
.moov-faq__sign{transition:border-color .25s ease,opacity .25s ease}
.moov-faq .moov-faq__q:focus{outline:none}
.moov-faq .moov-faq__q:focus-visible{outline:2px solid var(--moov-focus);outline-offset:4px;border-radius:8px}

.moov-faq__dot{
	flex:none;
	display:grid;
	place-items:center;
	width:19px;
	height:19px;
	border:1px solid rgba(255,255,255,.28);
	border-radius:50%;
	color:var(--moov-icon);
}
.moov-faq .moov-faq__label{
	flex:1 1 auto;
	min-width:0;
	text-align:left;
	font-weight:inherit;
	font-size:inherit;
	overflow-wrap:break-word;
	word-wrap:break-word;
}
.moov-faq__sign{
	flex:none;
	display:grid;
	place-items:center;
	width:16px;
	height:16px;
	color:var(--moov-icon);
	opacity:.85;
}

/* plus that morphs into a minus */
.moov-faq__glyph{
	position:relative;
	display:block;
	width:9px;
	height:9px;
	transition:transform .42s cubic-bezier(.22,.61,.36,1);
}
.moov-faq__sign .moov-faq__glyph{width:11px;height:11px}
.moov-faq__glyph::before,
.moov-faq__glyph::after{
	content:"";
	position:absolute;
	left:0;right:0;top:50%;
	height:1.3px;
	background:currentColor;
	border-radius:2px;
	transform:translateY(-50%);
	transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s;
}
.moov-faq__glyph::after{transform:translateY(-50%) rotate(90deg)}
.moov-faq__item.is-open .moov-faq__glyph{transform:rotate(90deg)}
.moov-faq__item.is-open .moov-faq__glyph::after{opacity:0}

.moov-faq__panel{
	height:0;
	overflow:hidden;
	will-change:height;
	transition:height .42s cubic-bezier(.22,.61,.36,1);
}
.moov-faq__item.is-open .moov-faq__panel{height:auto}

.moov-faq .moov-faq__a{
	margin:0;
	padding:0 clamp(0px,2.6vw,40px) clamp(18px,2.2vw,24px) clamp(28px,3.4vw,37px);
	max-width:78ch;
	color:var(--moov-body);
	font-family:inherit;
	font-size:clamp(12.5px,.6vw + 11px,13.5px);
	overflow-wrap:break-word;
	text-align:left;
	line-height:1.75;
	opacity:0;
	transform:translateY(-6px);
	transition:opacity .3s ease,transform .38s cubic-bezier(.22,.61,.36,1);
}
.moov-faq__item.is-open .moov-faq__a{
	opacity:1;
	transform:none;
	transition-delay:.1s;
}

@media (max-width:768px){
	.moov-faq{border-radius:14px}
	.moov-faq__dot{width:18px;height:18px}
}

@media (max-width:420px){
	.moov-faq{padding:2px 14px}
	.moov-faq .moov-faq__q{gap:11px;padding:15px 0}
	.moov-faq .moov-faq__a{padding:0 0 16px 29px}
	.moov-faq__sign{width:14px;height:14px}
}

@media (prefers-reduced-motion:reduce){
	.moov-faq *{transition:none !important}
}

/* Keep the component's own layout even inside a right-to-left theme.
   Each string still follows its own language via dir="auto" in the markup. */
.rtl .moov-faq{direction:ltr;text-align:left}
.moov-faq[dir="rtl"]{direction:rtl;text-align:right}
.moov-faq[dir="rtl"] .moov-faq__label{text-align:right}
.moov-faq[dir="rtl"] .moov-faq__a{
	text-align:right;
	padding:0 clamp(28px,3.4vw,37px) clamp(18px,2.2vw,24px) clamp(0px,2.6vw,40px);
}