/**
 * Pricing - BR (Brazilian) version
 * Tabs "Standard version / Brazilian version" + three payment options
 */

/* ==========================================================================
   version tabs
   ========================================================================== */
.pricing-versions__tabs {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-pack: center;
	justify-content: center;
	margin-bottom: 30px;
}

.pricing-versions__tab {
	position: relative;
	display: inline-block;
	margin: 0 4px;
	padding: 14px 30px;
	border: none;
	border-radius: 8px 8px 0 0;
	background: rgba(255, 255, 255, 0.08);
	color: #ffffff;
	font-family: inherit;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.375;
	text-align: center;
	cursor: pointer;
	transition: background-color 150ms, color 150ms;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.pricing-versions__tab:hover {
	background: rgba(255, 255, 255, 0.16);
}

.pricing-versions__tab:focus {
	outline: none;
}

.pricing-versions__tab:focus-visible {
	outline: 2px solid #fe8f3a;
	outline-offset: 2px;
}

.pricing-versions__tab.is-active {
	background: #ffffff;
	color: #404048;
	cursor: default;
}

.pricing-versions__panel {
	display: none;
}

.pricing-versions__panel.is-active {
	display: block;
}

/* ==========================================================================
   note - what is special in the BR version
   ========================================================================== */
.pricing-br__note {
	max-width: 750px;
	margin: 0 auto 35px;
	color: #ffffff;
	text-align: center;
}

.pricing-br__note ul {
	display: inline-block;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.pricing-br__note li {
	position: relative;
	padding-left: 18px;
}

.pricing-br__note li::before {
	content: '';
	position: absolute;
	top: 0.6em;
	left: 0;
	width: 8px;
	height: 2px;
	background: #fe8f3a;
}

.pricing-br__note p:last-child,
.pricing-br__note li:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   payment options - one-time / 12 months / 24 months
   The item rules are scoped to .pricing-payment on purpose: the theme resets
   the top margin of every :first-child, which would push the first option up.
   ========================================================================== */
.pricing-payment {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
	/* Keeps the same rhythm as the switch in the standard version */
	margin-bottom: 70px;
}

.pricing-payment .pricing-payment__item {
	display: -ms-inline-flexbox;
	display: inline-flex;
	-ms-flex-align: center;
	align-items: center;
	margin: 5px 15px;
	color: #ffffff;
	font-size: 16px;
	line-height: 22px;
	cursor: pointer;
}

.pricing-payment .pricing-payment__input {
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0 10px 0 0;
	accent-color: #fe8f3a;
	cursor: pointer;
}

.pricing-payment .pricing-payment__label {
	display: block;
}

/* Reserve the width of the bold variant so the row does not jump when switching */
.pricing-payment .pricing-payment__label::after {
	content: attr(data-label);
	display: block;
	height: 0;
	overflow: hidden;
	font-weight: bold;
	visibility: hidden;
}

.pricing-payment .pricing-payment__item.is-active .pricing-payment__label {
	font-weight: bold;
}

/* ==========================================================================
   price blocks in the BR table
   data-payment="onetime|m12|m24"; blocks without the attribute keep the
   original meaning (__yearly = one-time, __monthly = 12 months)
   ========================================================================== */
.pricing-br .comparison-table-v2__payment {
	display: none;
	text-align: center;
}

.pricing-br .comparison-table-v2__yearly,
.pricing-br .comparison-table-v2__monthly {
	display: none;
}

.pricing-br.is-payment-onetime .comparison-table-v2__payment[data-payment='onetime'],
.pricing-br.is-payment-m12 .comparison-table-v2__payment[data-payment='m12'],
.pricing-br.is-payment-m24 .comparison-table-v2__payment[data-payment='m24'] {
	display: block;
}

.pricing-br.is-payment-onetime .comparison-table-v2__yearly,
.pricing-br.is-payment-m12 .comparison-table-v2__monthly {
	display: block;
}