:root {
	--gap-custom: 1rem;
	--gap50: calc(var(--gap-custom) / 2);
	--gap25: calc(var(--gap-custom) / 4);

	--transition-duration: 350ms;
	--transition-duration-long: 750ms;
	--transition-function: ease-in-out;
	--transition: var(--transition-duration) var(--transition-function);
	--transition-long: var(--transition-duration-long) var(--transition-function);

	/* BORDERS */
	--radius50: calc(var(--radius100) / 2);
	--radius25: calc(var(--radius100) / 4);
	--radius75: .625rem;
	--radius100: 1rem;
	--radius125: 1.25rem;
	--color-border: #E7E9ED;

	/* BOX SHADOW */
	--box-shadow: 0 0 2rem 0 rgba(64, 128, 248, 20%);

	/* COLORS */
	--color-primary: var(--e-global-color-accent, #FC9E04);
	--color-secondary: #021440;
	--color-tertiary: #4080f8;
	--color-quaternary: #043a8e;
	--color-gray100: #f8f8f8;
	--color-gray85: #dddddd;
	--color-gray75: #a1a1a1;
	--color-supplement-01: #f2faff;
	--white: #fff;
	--black: #111;
}

/* FAQ Accordion */
.accordion {
	/**/
}

.accordion__item {
	background-color: var(--white);
	display: flex;
	flex-direction: column;
	gap: var(--gap-custom);
	padding: calc(var(--gap-custom) * 1.5) calc(var(--gap-custom) * 4) calc(var(--gap-custom) * 1.5) calc(var(--gap-custom) * 2.75);
	transition: background-color var(--transition);
	border-radius: var(--radius125);

	&:has(:checked) {
		/**/
	}

	&:first-child {
		/**/
		/**/
	}

	&:last-child {
		/**/
	}

	& + & {
		margin-top: var(--gap50);
	}
}

.accordion__title {
	position: relative;
	cursor: pointer;
	transition: color var(--transition);

	&:hover {
		color: var(--color-quaternary);
	}

	h4 {
		margin: 0;
		font-size: 1.25rem;
		font-weight: 700;
		letter-spacing: -0.5px;
		color: var(--black);
		font-family: var(--e-global-typography-f021989-font-family), Sans-serif;
	}
}

.accordion__icon {
	position: absolute;
	right: calc(var(--gap-custom) * -1.5);
	top: 0;
	color: var(--color-primary);
	rotate: 0deg;
	transition: rotate var(--transition);
}

.accordion__radio {
	display: none;
	position: absolute;

	&:checked {
		& ~ .accordion__content {
			display: block;
		}

		& ~ .accordion__title {
			color: var(--color-quaternary);

			.accordion__icon {
				color: var(--black);
				rotate: 90deg;
			}
		}
	}
}

.accordion__content {
	display: none;
}

.accordion__text {
	font-weight: 400;
	color: var(--e-global-color-08ed8cb, #70747E);
	font-size: 1.25rem;
	font-family: var(--e-global-typography-f021989-font-family), Sans-serif;
}

.accordion__buttons {
	display: flex;
	gap: var(--gap-custom);
	margin-top: var(--gap-custom);
}
