.faq-accordion-preload {
	padding: 20px;
	border: 1px solid #F0F0F0;
	box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.15);
	text-align: center;
	font-size: 16px;
	color: #555;
}

.faq-accordion {
	display: flex;
	flex-direction: column;
	gap: var(--faq--gap, 5px);
	padding: 10px 0;

	--faq--item--font-family: var(--the7-base-font-family);
	--faq--item--padding: 15px;
	--faq--item--border-radius: 8px;
	--faq--item--border-color: #d5d8dc;
	--faq--item--active--box-shadow: 0 2px 10px rgb(0 0 0 / 5%),  0 1px 4px rgb(0 0 0 / 5%);
	
	--faq--icon--size: 14px;
	--faq--item--content--padding: calc( var(--faq--item--padding) * 1.5) var(--faq--item--padding);

	@media screen and (min-width: 768px) {
		--faq--item--padding: 15px;
		--faq--item--content--padding: calc( var(--faq--item--padding) * 2);
	}

	.faq-accordion-item	{
		background: white;
		border: 1px solid var(--faq--item--border-color);
		border-radius: var(--faq--item--border-radius);
		margin: var(--faq--item--margin, 0px);
		transition: margin 250ms cubic-bezier(.17,.67,.21,.98), box-shadow 250ms cubic-bezier(.17,.67,.21,.98);
		box-shadow: var(--faq--item--box-shadow, none);

		&:has(button[aria-expanded="true"]) {
			--faq--item--background: white;
			--faq--item--border-color: #0078FF;
			--faq--item--box-shadow: var(--faq--item--active--box-shadow);
			--faq--item--margin: 15px 0;

			--faq--icon--rotation: 180deg;
			--faq--icon--opened: 1;
			--faq--icon--closed: 0;
			--faq--icon--color: #0078FF;

			--faq--title--border-radius: var(--faq--item--border-radius) var(--faq--item--border-radius) 0 0;
		}

		&:has(button:not([aria-expanded="true"])):hover {
			--faq--item--box-shadow: var(--faq--item--active--box-shadow);
			--faq--title--color: #0078FF;
		}

		h3 {
			margin: 0;
			padding: 0;

			button.accordion-trigger {
				background: var(--faq--title--background, white);
				border: none;
				border-radius: var(--faq--title--border-radius, var(--faq--item--border-radius));
				padding: var(--faq--item--padding);
				width: 100%;
				display: flex;
				flex-direction: row-reverse;
				justify-content: space-between;
				align-items: center;
				color: var(--faq--title--color, var(--e-global-color-text));
				cursor: pointer;
				text-align: left;
				gap: 10px;
				font-weight: 500;

				a {
					color: var(--faq--title--color, var(--e-global-color-text));
				}

				/* &:hover {} */

			}

			.faq-accordion-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 16px;
				font-weight: 500;
				color: var(--faq--title--color);
				text-decoration: none;
				order: 2;
				line-height: 1.3;
				font-family: var(--faq--item--font-family);

			}

			.faq-accordion-icon {
				width: var(--faq--icon--size);
				height: var(--faq--icon--size);
				border-radius: 50%;
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				order: 1;
				flex-shrink: 0;
				color: #0d0530;

				.faq-accordion-icon__closed {
					opacity: var(--faq--icon--closed, 1);
				}

				.faq-accordion-icon__opened {
					opacity: var(--faq--icon--opened, 0);
				}

				svg {
					position: absolute;
					top: 0;
					left: 0;
					width: var(--faq--icon--size);
					height: var(--faq--icon--size);
					object-fit: contain;
					transition: transform 0.3s ease;
					transform: rotate(var(--faq--icon--rotation, 90deg));
				}

			}

		}

		.faq-accordion-content {
			border-top: 1px solid #d5d8dc;
			padding: var(--faq--item--content--padding);
			font-size: 16px;
			color: var(--faq--content-color, #555);
			background-image: linear-gradient(to bottom, rgb(0 0 0 / 5%), rgb(0 0 0 / 0%) 20px);
			
			&:is([hidden]) {
				display: none;
			}

			.faq-accordion-content-inner {

				> * {
					margin-bottom: 15px;
				}
			
				> :first-child {
					padding-top: 0;
					margin-top: 0;
				}
				> :last-child {
					padding-bottom: 0;
					margin-bottom: 0;
				}

			}

		}
	}

}