/*
 * bizbank/faq. Values follow the production FAQ sections: section.faq_section
 * on the card pages (/cards/kartka-universalna/, /kurs-valyut/) for "card",
 * section.faq_section.bg_body on /zvernennya-ta-bezpeka/poshyreni-pytannya/
 * for "body", and the folded list of /cards/nova-kredytna-kartka-biseshka/.
 *
 * Production spaces the questions with collapsing margins around answers
 * that jQuery slides open. Here the answer panels animate through
 * bb-collapse grid rows, whose margins do not collapse, so the gaps are
 * split into a fixed item margin and the answer's own padding: the closed
 * and the opened states land on the same pixels as production.
 *
 * "plus" is not a production section: it follows the Factoring page mockup
 * (white cards on the page background, a bold question, a plus that turns
 * into a minus, subheadings and bulleted lists in the answers). Its rules
 * are written on .bb.bb-faq.bb-faq--plus or .bb-faq--plus, so they win over
 * the 991px rules of the other looks, and it switches to the phone layout
 * at 650px as the mockup does.
 */

.bb-faq {
	margin: 0;
	padding: 20px 0 30px;
	background: var(--bb-white);
}

.bb-faq.bb-faq--body {
	padding: 15px 0 20px;
	background: transparent;
}

.bb-faq .bb-faq__title {
	margin: 0;
	padding: 16px 20px;
	border: 0;
	font-family: var(--bb-font);
	font-size: 40px;
	font-weight: 800;
	line-height: 1.2;
	color: var(--bb-black);
}

.bb-faq .bb-faq__title-toggle {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.bb-faq .bb-faq__title--toggle .bb-faq__title-text {
	position: relative;
	display: inline-block;
	padding-right: 101px;
	cursor: pointer;
}

.bb-faq .bb-faq__title--toggle .bb-faq__title-text::after {
	content: "";
	position: absolute;
	top: 7px;
	right: 0;
	display: block;
	width: 32px;
	height: 32px;
	background: url(../assets/img/faq-arrow.svg) center center no-repeat;
	transition: transform 0.3s ease;
}

.bb-faq .bb-faq__title-toggle[aria-expanded="true"] .bb-faq__title-text::after {
	transform: rotate(-180deg);
}

.bb-faq .bb-faq__list {
	margin: 0;
	padding: 14px 0 0;
}

.bb-faq .bb-faq__item {
	margin: 0 0 20px;
	padding: 0;
}

.bb-faq--body .bb-faq__item {
	margin: 0 0 14px;
	padding: 0 0 10px;
	border-radius: 20px;
	background: var(--bb-white);
}

.bb-faq .bb-faq__question {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 37px 60px 39px 20px;
	border: 0;
	border-radius: 20px;
	background-color: var(--bb-body);
	font-family: var(--bb-font);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--bb-black);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s;
	appearance: none;
}

.bb-faq--body .bb-faq__question {
	padding-bottom: 29px;
	background-color: transparent;
}

.bb-faq .bb-faq__question::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 20px;
	display: block;
	width: 32px;
	height: 32px;
	margin-top: -16px;
	background: url(../assets/img/faq-arrow.svg) center center no-repeat;
}

.bb-faq .bb-faq__question-text {
	display: inline;
	font: inherit;
	color: inherit;
}

.bb-faq :is(.bb-faq__question, .bb-faq__title-toggle):focus-visible {
	outline: 2px solid var(--bb-blue);
	outline-offset: 2px;
}

.bb-faq .bb-faq__answer {
	margin: 0;
	padding: 34px 20px 8px;
	font-family: var(--bb-font);
	font-size: 18px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--bb-black);
}

.bb-faq--body .bb-faq__answer {
	padding: 4px 20px 16px;
	font-size: 24px;
	font-weight: 400;
}

.bb-faq .bb-faq__answer a {
	display: inline-block;
}

.bb-faq--body .bb-faq__answer a {
	color: var(--bb-black);
	text-decoration: underline;
}

.bb-faq--body .bb-faq__answer a:hover {
	text-decoration: none;
}

.bb-faq--body .bb-faq__answer :is(ul, ol) {
	list-style: none;
}

.bb-faq--body .bb-faq__answer :is(p, li) {
	padding: 0;
}

.bb-faq .bb-faq__footer {
	margin: 0;
	padding: 10px 0 0;
	text-align: center;
}

@media screen and (max-width: 991px) {

	.bb-faq.bb-faq--card {
		padding-bottom: 32px;
	}

	.bb-faq .bb-faq__title {
		padding: 16px 0 23px;
		font-size: 28px;
	}

	.bb-faq .bb-faq__title--toggle .bb-faq__title-text {
		display: block;
		padding-right: 40px;
	}

	.bb-faq .bb-faq__title--toggle .bb-faq__title-text::after {
		width: 21px;
		height: 21px;
		background-size: contain;
	}

	.bb-faq .bb-faq__list {
		padding-top: 2px;
	}

	.bb-faq .bb-faq__item {
		margin-bottom: 24px;
	}

	.bb-faq--body .bb-faq__item {
		margin-bottom: 14px;
	}

	.bb-faq .bb-faq__question {
		padding: 24px 45px 24px 16px;
		font-size: 20px;
	}

	.bb-faq--body .bb-faq__question {
		padding-bottom: 12px;
	}

	.bb-faq .bb-faq__question::after {
		top: 25px;
		right: 12px;
		margin-top: 0;
		background-size: auto 11px;
	}

	.bb-faq .bb-faq__answer {
		padding: 37px 16px 2px;
		font-size: 20px;
		font-weight: 300;
	}

	.bb-faq--body .bb-faq__answer {
		padding: 13px 16px 12px;
		font-size: 20px;
		font-weight: 300;
	}

	.bb-faq .bb-faq__btn {
		display: block;
		width: 100%;
		padding: 11px 30px 10px;
		font-size: 16px;
		line-height: 1.1;
	}
}

.bb.bb-faq.bb-faq--plus {
	margin: 0 0 64px;
	padding: 0;
	background: transparent;
}

.bb-faq.bb-faq--plus .bb-faq__title {
	margin: 0 0 24px;
	padding: 0;
	font-size: 34px;
	line-height: 1.25;
	letter-spacing: normal;
}

.bb-faq.bb-faq--plus .bb-faq__title--toggle .bb-faq__title-text::after {
	top: 5px;
}

.bb-faq.bb-faq--plus .bb-faq__list {
	padding: 0;
}

.bb-faq.bb-faq--plus .bb-faq__item {
	margin: 0 0 12px;
	padding: 0;
	border-radius: 18px;
	background: var(--bb-white);
}

.bb-faq.bb-faq--plus .bb-faq__item:last-child {
	margin-bottom: 0;
}

.bb-faq.bb-faq--plus .bb-faq__question {
	padding: 23px 59px 23px 26px;
	border-radius: 18px;
	background-color: transparent;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
}

/*
 * The sign is text, 15px wide, pinned to the top right corner. The empty
 * alternative text keeps screen readers from reading it: the state comes
 * from aria-expanded.
 */
.bb-faq.bb-faq--plus .bb-faq__question::after {
	content: "+";
	content: "+" / "";
	top: 23px;
	right: 26px;
	width: auto;
	height: auto;
	margin: 0;
	background: none;
	font-size: 25px;
	font-weight: 700;
	line-height: 1;
}

.bb-faq.bb-faq--plus .bb-faq__question[aria-expanded="true"]::after {
	content: "\2212";
	content: "\2212" / "";
}

.bb-faq.bb-faq--plus .bb-faq__answer {
	padding: 0 26px 24px;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5;
}

.bb-faq--plus .bb-faq__answer p {
	margin: 0;
	padding: 0;
}

.bb-faq--plus .bb-faq__answer :is(h2, h3, h4) {
	margin: 0 0 12px;
	padding: 0;
	font-family: var(--bb-font);
	font-size: 23px;
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: normal;
	color: var(--bb-black);
}

.bb-faq--plus .bb-faq__answer :is(ul, ol) {
	margin: 1em 0;
	padding: 0 0 0 40px;
	list-style: disc;
}

.bb-faq--plus .bb-faq__answer ol {
	list-style: decimal;
}

.bb-faq--plus .bb-faq__answer li {
	margin: 0 0 14px;
	padding: 0;
}

/*
 * A closed answer is taken out of the tab order and away from screen
 * readers once its closing animation (0.3s, css/blocks.css) is over;
 * opening shows it at once. Without js/accordion.js (no bb-js class) every
 * answer stays open.
 */
.bb-js .bb-faq--plus .bb-collapse:not(.is-open) > .bb-collapse__inner {
	visibility: hidden;
	transition: visibility 0s linear 0.3s;
}

@media screen and (max-width: 650px) {

	.bb.bb-faq.bb-faq--plus {
		margin-bottom: 48px;
	}

	.bb-faq.bb-faq--plus .bb-faq__title {
		font-size: 27px;
	}

	.bb-faq.bb-faq--plus .bb-faq__title--toggle .bb-faq__title-text::after {
		top: 6px;
	}

	.bb-faq.bb-faq--plus .bb-faq__question {
		min-height: 65px;
		padding: 20px 53px 20px 20px;
		font-size: 16px;
	}

	.bb-faq.bb-faq--plus .bb-faq__question::after {
		top: 20px;
		right: 20px;
	}

	.bb-faq.bb-faq--plus .bb-faq__answer {
		padding: 0 20px 20px;
		font-size: 16px;
	}

	.bb-faq--plus .bb-faq__answer :is(h2, h3, h4) {
		font-size: 22px;
	}
}

/*
 * Editor canvas: the question bar and the folded title are divs with
 * editable text, and the child block wrappers get the item spacing that
 * the classic editor styles would otherwise replace.
 */
.editor-styles-wrapper .bb-faq :is(.bb-faq__question, .bb-faq__title-toggle, .bb-faq__title-text) {
	cursor: text;
}

.editor-styles-wrapper .bb-faq .bb-faq__item.wp-block {
	max-width: none;
}

.editor-styles-wrapper .bb-faq .bb-faq__answer-body > .wp-block {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

.editor-styles-wrapper .bb-faq--plus .bb-faq__question::after {
	content: "\2212";
}