/**
 * Wallxer pricing: section wrapper and the plan cards (shared by the
 * Pricing Plans and Pricing Tabs widgets).
 */

.wlx-pricing {
	--wlx-pricing-pad-y: clamp(56px, 7vw, 100px);
	--wlx-plan-accent: var(--wlx-brand, #5b63d3);
	--wlx-plan-dark: var(--wlx-ink, #14141c);

	background-color: var(--wlx-tint, #fbfbfe);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
}

.wlx-pricing__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--wlx-pricing-pad-y) 20px;
}

.wlx-pricing .wlx-head {
	margin-bottom: clamp(32px, 4.5vw, 52px);
}

.wlx-pricing .wlx-head__eyebrow {
	background-color: #ffffff;
}

.wlx-pricing .wlx-head__text {
	max-width: 54ch;
}

.wlx-pricing .wlx-pricing__footnote {
	margin: 24px 0 0;
	font-size: 15px;
	line-height: 1.7;
	color: var(--wlx-meta, #6a6a7e);
	text-align: center;
	text-wrap: pretty;
}

.wlx-pricing .wlx-pricing__more {
	margin: 18px 0 0;
	font-size: 16.5px;
	font-weight: 600;
	text-align: center;
}

.wlx-pricing__more a {
	color: var(--wlx-brand-ink, #3f46a8);
	text-decoration: none;
}

.wlx-pricing__more a:hover,
.wlx-pricing__more a:focus-visible {
	color: var(--wlx-ink, #14141c);
}

/* Plan cards --------------------------------------------------------------- */

ul.wlx-plans {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
	gap: clamp(16px, 2vw, 24px);
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wlx-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(24px, 3vw, 34px);
	border: 1px solid var(--wlx-line, #e6e7f2);
	border-radius: 24px;
	background: #ffffff;
	box-shadow: var(--wlx-shadow-card, 0 6px 18px rgba(20, 20, 40, 0.04));
}

.wlx-plan__badge {
	position: absolute;
	top: 22px;
	right: 22px;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.5;
	color: #ffffff;
	white-space: nowrap;
	background: var(--wlx-plan-accent, #5b63d3);
}

.wlx-plan .wlx-plan__name {
	margin: 0 0 4px;
	font-family: var(--wlx-font-heading, "Anek Bangla", "Hind Siliguri", sans-serif);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0;
	color: var(--wlx-ink, #14141c);
}

.wlx-plan p {
	margin: 0;
}

.wlx-plan .wlx-plan__tagline {
	margin-bottom: 20px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--wlx-muted-2, #5a5a6e);
}

.wlx-plan--featured .wlx-plan__tagline {
	padding-right: 110px;
}

.wlx-plan .wlx-plan__compare {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-bottom: 4px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--wlx-muted-2, #5a5a6e);
}

.wlx-plan__saving {
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	color: var(--wlx-success, #1a7a4a);
	white-space: nowrap;
	background: var(--wlx-success-bg, #e7f6ee);
}

.wlx-plan .wlx-plan__price {
	margin-bottom: 4px;
	font-family: var(--wlx-font-accent, "Baloo Da 2", "Anek Bangla", sans-serif);
	font-size: clamp(36px, 4vw, 44px);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wlx-ink, #14141c);
}

.wlx-plan .wlx-plan__note {
	min-height: 1.6em;
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--wlx-line-soft, #ecedf5);
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--wlx-muted-2, #5a5a6e);
}

.wlx-plan ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wlx-plan .wlx-plan__features {
	display: grid;
	flex: 1;
	gap: 11px;
	align-content: start;
	margin-bottom: 24px;
}

.wlx-plan__feature {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 12px;
	align-items: start;
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--wlx-ink-2, #26263a);
}

.wlx-plan__mark {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	margin-top: 4px;
	border-radius: 50%;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	color: var(--wlx-plan-accent, #5b63d3);
	background: var(--wlx-chip, #eceef9);
}

.wlx-plan__feature--no {
	color: var(--wlx-muted-2, #5a5a6e);
}

.wlx-plan__feature--no .wlx-plan__mark {
	color: #9a9aac;
	background: #f3f3f7;
}

.wlx-plan__costs {
	margin-bottom: 22px;
	padding: 14px 16px;
	border: 1px solid var(--wlx-line, #e6e7f2);
	border-radius: 14px;
	background: #f6f7fd;
}

.wlx-plan .wlx-plan__costs-title {
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.06em;
	color: var(--wlx-plan-accent, #5b63d3);
}

.wlx-plan__costs ul {
	display: grid;
	gap: 6px;
}

.wlx-plan__costs li {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 12px;
	justify-content: space-between;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--wlx-muted-2, #5a5a6e);
}

.wlx-plan__cost-value {
	font-weight: 600;
	color: var(--wlx-ink-2, #26263a);
}

.wlx-plan__button {
	display: block;
	margin-top: auto;
	padding: 13px 20px;
	border: 1px solid var(--wlx-line-strong, #dcdef0);
	border-radius: 999px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--wlx-ink-2, #26263a);
	text-align: center;
	text-decoration: none;
	background: #ffffff;
	transition: border-color 0.2s, color 0.2s, background-color 0.2s, transform 0.2s;
}

.wlx-plan__button:hover,
.wlx-plan__button:focus-visible {
	border-color: var(--wlx-plan-accent, #5b63d3);
	color: var(--wlx-brand-ink, #3f46a8);
	transform: translateY(-2px);
}

/* Highlighted (dark) plan --------------------------------------------------- */

.wlx-plan--featured {
	border-color: var(--wlx-plan-dark, #14141c);
	background: var(--wlx-plan-dark, #14141c);
	box-shadow: 0 28px 60px rgba(20, 20, 40, 0.22);
}

.wlx-plan--featured .wlx-plan__name,
.wlx-plan--featured .wlx-plan__price {
	color: #ffffff;
}

.wlx-plan--featured .wlx-plan__tagline,
.wlx-plan--featured .wlx-plan__compare,
.wlx-plan--featured .wlx-plan__note,
.wlx-plan--featured .wlx-plan__costs li,
.wlx-plan--featured .wlx-plan__feature--no {
	color: #b9b9cc;
}

.wlx-plan--featured .wlx-plan__note {
	border-bottom-color: var(--wlx-dark-line, #2c2c3c);
}

.wlx-plan--featured .wlx-plan__feature {
	color: #e4e4ee;
}

.wlx-plan--featured .wlx-plan__feature--no {
	color: #b9b9cc;
}

.wlx-plan--featured .wlx-plan__mark {
	color: #ffffff;
	background: var(--wlx-plan-accent, #5b63d3);
}

.wlx-plan--featured .wlx-plan__feature--no .wlx-plan__mark {
	color: #8a8aa0;
	background: var(--wlx-dark-line, #2c2c3c);
}

.wlx-plan--featured .wlx-plan__saving {
	color: #ffffff;
	background: var(--wlx-plan-accent, #5b63d3);
}

.wlx-plan--featured .wlx-plan__costs {
	border-color: var(--wlx-dark-line, #2c2c3c);
	background: var(--wlx-dark-2, #20202c);
}

.wlx-plan--featured .wlx-plan__costs-title {
	color: var(--wlx-brand-soft, #9aa0f0);
}

.wlx-plan--featured .wlx-plan__cost-value {
	color: #e4e4ee;
}

.wlx-plan--featured .wlx-plan__button {
	border-color: var(--wlx-plan-accent, #5b63d3);
	color: #ffffff;
	background: var(--wlx-plan-accent, #5b63d3);
}

.wlx-plan--featured .wlx-plan__button:hover,
.wlx-plan--featured .wlx-plan__button:focus-visible {
	border-color: var(--wlx-brand-dark, #4a52c4);
	color: #ffffff;
	background: var(--wlx-brand-dark, #4a52c4);
}

.wlx-sr-only {
	position: absolute;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {

	.wlx-plan__button {
		transition: none !important;
	}

	.wlx-plan__button:hover,
	.wlx-plan__button:focus-visible {
		transform: none !important;
	}
}