@use "../utilities" as *;

/**----------------------------------------
START: FAQ CSS
----------------------------------------*/
.h7-faq {
	border-bottom: 1px dashed var(--tj-color-border-1);
	.sec-heading {
		&.style-7 {
			max-width: 340px;
			margin-inline-start: 0;
			margin-inline-end: 0;
			@media #{$md,$sm,$xs} {
				margin-bottom: 40px;
			}
			.number {
				color: var(--tj-color-heading-primary);
				font-size: 20px;
				font-weight: var(--tj-fw-sbold);
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				margin-top: 40px;
				line-height: 1;
				@media #{$md,$sm,$xs} {
					margin-top: 30px;
				}
				.call-icon {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					background-color: var(--tj-color-theme-primary);
					color: var(--tj-color-common-white);
					font-size: 20px;
					height: 52px;
					width: 52px;
					border-radius: 50%;
					margin-bottom: 9px;

					@media #{$xs} {
						font-size: 18px;
						height: 45px;
						width: 45px;
					}
				}
				span:not(.call-icon) {
					position: relative;
					&::after {
						content: "";
						position: absolute;
						bottom: -2px;
						inset-inline-end: 0;
						width: 100%;
						height: 1px;
						background-color: currentColor;
					}
				}
				&:hover {
					.call-icon {
						animation: bellshake 0.5s linear;
					}
					span {
						&::after {
							animation: linehover 0.8s linear;
						}
					}
				}
				@media #{$xs} {
					font-size: 18px;
				}
			}
		}
	}
	&-wrapper {
		background-color: var(--tj-color-common-white);
		border-radius: 8px;
		overflow: hidden;
		&.style-2 {
			padding-top: 0;
			.accordion-item {
				margin-bottom: 0;
				border-top: 1px dashed var(--tj-color-border-1);
				border-radius: 0;
				.accordion-body {
					margin-top: 0;
					padding-top: 15px;
					border-top: 1px dashed var(--tj-color-border-3);
				}
				&.active {
					border-radius: 12px;
					.faq-title {
						border: none;
						&::after {
							border-color: var(--tj-color-common-white);
							background-color: var(--tj-color-common-white);
							color: var(--tj-color-heading-primary);
						}
					}
				}
				&:not(.active) {
					.faq-title {
						padding-top: 32px;
						padding-bottom: 32px;
						@media #{$md, $sm, $xs} {
							padding-top: 20px;
							padding-bottom: 20px;
						}
					}
				}
				&:first-child,
				&.active,
				&.active + .accordion-item {
					border-top: 0;
				}
			}
		}
	}
}
/* !END: FAQ CSS */