/**
 * Fluxio — Pricing table (Elementor widget).
 */

.pricing-section {
	padding-top: var(--_common-spacing---top-padding, 120px);
}

.pricing-wrapper {
	flex-flow: column;
	display: flex;
}

.pricing-top-content {
	margin-bottom: var(--_common-spacing---padding--margin--spacing-6xl, 3rem);
	grid-column-gap: var(--_common-spacing---flex-grid-gap--gap-sm);
	grid-row-gap: var(--_common-spacing---flex-grid-gap--gap-sm);
	flex-flow: column;
	display: flex;
}

.pricing-intro {
	max-width: 42rem;
	margin-top: var(--_common-spacing---padding--margin--spacing-xl, 1.5rem);
	color: var(--_color---accent-color--low-white);
}

.pricing-grid {
	display: grid;
	gap: var(--_common-spacing---padding--margin--spacing-little, 1rem);
	align-items: stretch;
}

.pricing-grid--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pricing-grid--cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pricing-grid--cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pricing-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: var(--_common-spacing---padding--margin--spacing-extra-xl) var(--_common-spacing---padding--margin--spacing-xl);
	border: 1px solid var(--_color---accent-color--border);
	border-radius: var(--_base---bordar-radius--radius-sm);
	background-color: var(--_color---accent-color--dark-shade, #080808);
	transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}

.pricing-plan:hover {
	border-color: var(--_color---accent-color--low-dark);
}

.pricing-plan.is-featured {
	border-color: var(--_color---accent-color--orange);
	box-shadow: 0 20px 60px rgba(237, 70, 9, 0.12);
}

.pricing-plan-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	flex: 1;
	grid-row-gap: var(--_common-spacing---flex-grid-gap--gap-md);
}

.pricing-plan-badge {
	position: absolute;
	top: var(--_common-spacing---padding--margin--spacing-md);
	right: var(--_common-spacing---padding--margin--spacing-md);
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--_color---accent-color--orange);
	border-radius: var(--_base---bordar-radius--radius-4xl, 999px);
	background-color: var(--_color---accent-color--orange);
	color: var(--_color---normal-color--white);
	font-family: var(--tag--font-family);
	font-size: var(--tag--font-size);
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.pricing-plan-tag {
	color: var(--_color---accent-color--low-dark);
}

.pricing-plan-name {
	margin: 0;
	font-family: var(--h4--font-family);
	color: var(--_color---text-color--heading-color);
	font-size: var(--h4--font-size);
	line-height: var(--h4--line-height);
	font-weight: var(--h4--font-weight);
}

.pricing-plan-tagline {
	margin: 0;
	color: var(--_color---accent-color--low-white);
}

.pricing-plan-price-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.5rem;
	margin-top: var(--_common-spacing---padding--margin--spacing-ssm, 0.5rem);
}

.pricing-plan-price {
	font-family: var(--h2--font-family);
	color: var(--_color---text-color--heading-color);
	font-size: clamp(2rem, 4vw, var(--h2--font-size));
	line-height: 1.05;
	font-weight: var(--h2--font-weight);
}

.pricing-plan.is-featured .pricing-plan-price {
	color: var(--_color---accent-color--orange);
}

.pricing-plan-period {
	color: var(--_color---accent-color--low-white);
}

.pricing-plan-desc {
	margin: 0;
	color: var(--_color---accent-color--low-white);
	line-height: var(--body-regular--line-height);
}

.pricing-plan-features {
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 1;
	display: flex;
	flex-direction: column;
	grid-row-gap: var(--_common-spacing---flex-grid-gap--gap-sm);
}

.pricing-plan-feature {
	display: flex;
	align-items: flex-start;
	gap: var(--_common-spacing---flex-grid-gap--gap-sm);
	color: var(--_color---text-color--paragraph-color);
	font-family: var(--body-regular--font-family);
	font-size: var(--body-regular--font-size);
	line-height: var(--body-regular--line-height);
}

.pricing-plan-feature-mark {
	flex: none;
	width: 6px;
	height: 6px;
	margin-top: 0.55em;
	border-radius: 50%;
	background-color: var(--_color---accent-color--orange);
}

.pricing-plan.is-featured .pricing-plan-feature-mark {
	box-shadow: 0 0 0 3px rgba(237, 70, 9, 0.2);
}

.pricing-plan-feature-text {
	flex: 1;
	min-width: 0;
}

.pricing-plan-cta {
	margin-top: auto;
	padding-top: var(--_common-spacing---padding--margin--spacing-xl, 1.5rem);
}

.pricing-plan-cta .primary-button,
.pricing-plan-cta .secondary-button-box {
	width: 100%;
	justify-content: center;
}

.pricing-plan-cta .primary-button-block,
.pricing-plan-cta .secondary-button-text-block {
	justify-content: center;
}

@media (max-width: 991px) {
	.pricing-grid--cols-3,
	.pricing-grid--cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.pricing-grid--cols-2,
	.pricing-grid--cols-3,
	.pricing-grid--cols-4 {
		grid-template-columns: 1fr;
	}

	.pricing-plan.is-featured {
		transform: none;
	}
}