/**
 * FAQ
 *
 * @package    faq
 * @subpackage modules/page/css
 * @since      1.0.0
 * @version    1.0.0
 * @author     Ehsan Zare <darksider.legend@gmail.com>
 * @link       https://code-path.com
 * @copyright  (c) 2024 Code-path web developing team
 */

/*-------------------------------------------------------------------------*/
/* FAQ
/*-------------------------------------------------------------------------*/
.faq[faq] {
	--gap: 2rem;
	--padding: 2rem;

	--filter-title-color: #caebf6;
	--filter-search-input-width: 100%;
	--filter-search-input-background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg fill="%239cbdd3" viewBox="0 0 21.5 21.5" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill-rule:evenodd}</style></defs><path class="cls-1" d="M7.75 1.5C4.3 1.5 1.5 4.3 1.5 7.75S4.3 14 7.75 14 14 11.2 14 7.75 11.2 1.5 7.75 1.5ZM0 7.75a7.75 7.75 0 1 1 15.5 0 7.75 7.75 0 0 1-15.5 0ZM17.28 14.22a.754.754 0 0 0-1.06 0l-2 2c-.29.29-.29.77 0 1.06l4 4c.29.29.77.29 1.06 0l2-2c.29-.29.29-.77 0-1.06l-4-4Z"/><path class="cls-1" d="M12.22 12.22c.29-.29.77-.29 1.06 0l3 3c.29.29.29.77 0 1.06s-.77.29-1.06 0l-3-3a.754.754 0 0 1 0-1.06Z"/></svg>');

	--help-text-size: 1.5rem;
	--help-subtext-size: 1rem;

	--help-text-color: #baddf4;
	--help-subtext-color: #536072;

	width: 100%;
	height: auto;

	padding: var(--padding);
}

/* FAQ: Responsive
/*---------------------------------------------------------------*/
@media screen and (min-width: 992px) { /* LG */
	.faq[faq] {
		--padding: 0;

		--filter-search-input-width: 300px;

		--help-text-size: 2rem;
		--help-subtext-size: 1.1rem;
	}
}

/*-------------------------------------------------------------------------*/
/* FAQ: Filter
/*-------------------------------------------------------------------------*/
.faq[faq] .faq__filter {
	width: 100%;
	height: auto;

	gap: -webkit-calc(var(--gap) / 2);
	gap: -moz-calc(var(--gap) / 2);
	gap: calc(var(--gap) / 2);

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;

	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;

	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

/* FAQ: Filter: Block (global)
/*---------------------------------------------------------------*/
.faq[faq] .faq__filter .filter__block {
	width: 100%;
	height: auto;

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;

	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
}

/* FAQ: Filter: Block (title)
/*---------------------------------------------------------------*/
.faq[faq] .faq__filter .filter__block.filter__block--title {
	color: var(--filter-title-color);

	font-size: 2rem;
	font-family: var(--font-family-secondary);
}

/* FAQ: Filter: Block (search)
/*---------------------------------------------------------------*/
.faq[faq] .faq__filter .filter__block.filter__block--search {}

.faq[faq] .faq__filter .filter__block.filter__block--search input {
	width: var(--filter-search-input-width);

	margin: 0 0 0 auto;

	background-size: auto 70%;
	background-image: var(--filter-search-input-background-image);
	background-repeat: no-repeat;
	background-position: -webkit-calc(100% - 0.688rem) 50%;
	background-position: -moz-calc(100% - 0.688rem) 50%;
	background-position: calc(100% - 0.688rem) 50%;
}

/* FAQ: Filter Responsive
/*---------------------------------------------------------------*/
@media screen and (min-width: 992px) { /* LG */
	.faq[faq] .faq__filter {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
	}
}

/*-------------------------------------------------------------------------*/
/* FAQ: Items
/*-------------------------------------------------------------------------*/
.faq[faq] .faq__items {
	width: 100%;
	height: auto;

	margin: var(--gap) 0 0 0;
}

/* FAQ: Items: Accordion
/*---------------------------------------------------------------*/
.faq[faq] .faq__items .accordion {
	gap: -webkit-calc(var(--gap) / 2);
	gap: -moz-calc(var(--gap) / 2);
	gap: calc(var(--gap) / 2);

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;

	-webkit-box-pack: stretch;
	-ms-flex-pack: stretch;
	justify-content: stretch;

	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
}

/* FAQ: Items: Accordion: Item
/*-----------------------------------------------------*/
.faq[faq] .faq__items .accordion .accordion-item {}

/* Item (header) */
.faq[faq] .faq__items .accordion .accordion-item .accordion-header {}

/* Item (body) */
.faq[faq] .faq__items .accordion .accordion-item .accordion-body {
	padding: -webkit-calc(var(--gap) / 2) 0 0 0 !important;
	padding: -moz-calc(var(--gap) / 2) 0 0 0 !important;
	padding: calc(var(--gap) / 2) 0 0 0 !important;
}

/* Item (no results) */
.faq[faq] .faq__items .accordion [no-results] {
	width: 100%;
	height: auto;
	padding: 1rem;
	display: none;
	font-style: italic;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.25);
} .faq[faq] .faq__items .accordion.no-results [no-results] {display: block;}

/*-------------------------------------------------------------------------*/
/* FAQ: Help
/*-------------------------------------------------------------------------*/
.faq[faq] .faq__help {
	width: 100%;
	height: auto;

	gap: -webkit-calc(var(--gap) / 2);
	gap: -moz-calc(var(--gap) / 2);
	gap: calc(var(--gap) / 2);

	margin: var(--gap) 0 0 0;

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;

	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;

	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
}

/* FAQ: Help: Block (global)
/*---------------------------------------------------------------*/
.faq[faq] .faq__help .help__block {
	width: auto;
	height: auto;
}

/* FAQ: Help: Block (text)
/*---------------------------------------------------------------*/
.faq[faq] .faq__help .help__block.help__block--text {}

.faq[faq] .faq__help .help__block.help__block--text i {
	color: var(--help-subtext-color);
	display: block;
	font-size: var(--help-subtext-size);
}

.faq[faq] .faq__help .help__block.help__block--text span {
	color: var(--help-text-color);
	display: block;
	font-size: var(--help-text-size);
	line-height: 100%;
}

/* FAQ: Help: Block (button)
/*---------------------------------------------------------------*/
.faq[faq] .faq__help .help__block.help__block--button {}

.faq[faq] .faq__help .help__block.help__block--button .nice_button {
	-webkit-transition: all 100ms ease-in-out;
	-o-transition: all 100ms ease-in-out;
	transition: all 100ms ease-in-out;
}

.faq[faq] .faq__help .help__block.help__block--button .nice_button:hover,
.faq[faq] .faq__help .help__block.help__block--button .nice_button:active {
	-webkit-transform: scale(1.1);
	-ms-transform: scale(1.1);
	transform: scale(1.1);
}