.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, 0px);
	padding: 10px 0;

	--faq--item--padding: 15px;
	--faq--icon--size: 15px;
	--faq--item--content--padding: var(--faq--item--padding) var(--faq--item--padding) var(--faq--item--padding) calc(var(--faq--item--padding) * 3);

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

	.faq-accordion-item {
		background: white;
		border: 2px solid #f5f5f5;

		&:not(:first-child) {
			border-top-color: #3cb3fc;
		}

		&:has(button[aria-expanded="true"]) {
			--faq--icon--rotation: 180deg;
			--faq--icon--opened: 1;
			--faq--icon--closed: 0;
			--faq--item--background: white;
			--faq--icon--color: #3cb3fc;
		}

		h3 {
			margin: 0;
			padding: 0;

			button.accordion-trigger {
				background: #172543;
				border: none;
				padding: var(--faq--item--padding);
				width: 100%;
				display: flex;
				align-items: center;
				cursor: pointer;
				text-align: left;
				gap: 10px;

				&:hover {
					--faq--title--color: #1bbbcd;
				}
			}

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

			.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: white;

				.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;
					fill: currentColor;
					transition: transform 0.3s ease;
					transform: rotate(var(--faq--icon--rotation, 90deg));
				}
			}
		}

		.faq-accordion-content {
			border-top: 1px solid #F0F0F0;
			padding: var(--faq--item--content--padding);
			font-size: 16px;
			color: var(--faq--content-color, #555);

			&: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;
				}
			}
		}
	}
}