/*
 * کارت‌های پلن: برگه‌ی قیمت‌ها ([baayar_pricing]) و ابزارک «پلن‌ها و قیمت‌ها» در صفحه‌ی اصلی.
 *
 * جدا از shop.css تا صفحه‌ی اصلی فقط همین را بار کند؛ shop.css به این وابسته است.
 */

.bya-plans {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1rem, 0.8rem + 1vw, 1.5rem);
	align-items: stretch;
}

.bya-plan {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	border: 1px solid var(--bya-border);
	border-radius: var(--bya-radius-l);
	background-color: var(--bya-surface);
	box-shadow: var(--bya-shadow-s);
}

.bya-plan--featured {
	border-color: var(--bya-pine);
	box-shadow: 0 0 0 1px var(--bya-pine), var(--bya-shadow-m);
}

.bya-plan__ribbon {
	position: absolute;
	inset-block-start: -13px;
	inset-inline-start: 24px;
	padding: 3px 14px;
	border-radius: var(--bya-radius-pill);
	background-color: var(--bya-pine);
	color: #fff;
	font-size: var(--bya-text-micro);
	font-weight: 600;
}

.bya-plan__name {
	margin: 0;
	color: var(--bya-ink);
	font-size: 1.25rem;
	font-weight: 700;
}

.bya-plan__tagline {
	min-block-size: 3.6em;
	margin: -6px 0 0;
	color: var(--bya-ink-3);
	font-size: var(--bya-text-small);
	line-height: 1.8;
}

.bya-plan__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 10px;
}

.bya-plan__amount {
	color: var(--bya-ink);
	font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
	font-weight: 700;
	line-height: 1.3;
}

.bya-plan__unit {
	color: var(--bya-ink-3);
	font-size: var(--bya-text-micro);
}



/* پشتیبانی در کارت: نشان «سال اول رایگان»، دکمه‌ی جزئیات (به بخش پشتیبانی)، بهای سال دوم */
.bya-plan__support {
	display: grid;
	gap: 6px;
	padding: 12px 14px;
	border-radius: var(--bya-radius-s);
	background-color: var(--bya-surface-muted);
}

.bya-plan__support-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.bya-plan__free {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--bya-pine-deep);
	font-size: var(--bya-text-small);
	font-weight: 700;
}

.bya-plan__free::before {
	content: "";
	inline-size: 8px;
	block-size: 8px;
	border-radius: 50%;
	background-color: var(--bya-pine-bright);
	box-shadow: 0 0 0 3px var(--bya-pine-wash);
}

body a.bya-plan__details {
	display: inline-flex;
	align-items: center;
	min-block-size: 32px;
	padding: 2px 12px;
	border: 1px solid var(--bya-border-strong);
	border-radius: var(--bya-radius-pill);
	background-color: var(--bya-surface);
	color: var(--bya-ink-2);
	font-size: var(--bya-text-micro);
	font-weight: 600;
	text-decoration: none;
	transition:
		border-color var(--bya-duration-fast) linear,
		color var(--bya-duration-fast) linear;
}

body a.bya-plan__details:hover,
body a.bya-plan__details:focus-visible {
	border-color: var(--bya-pine);
	color: var(--bya-pine-deep);
	outline: none;
}

.bya-plan__later {
	margin: 0;
	color: var(--bya-ink-3);
	font-size: var(--bya-text-micro);
	line-height: 1.8;
}

.bya-plan__cta {
	display: grid;
}

.bya-plan__points {
	display: grid;
	gap: 10px;
	margin: 4px 0 0;
	padding: 16px 0 0;
	border-block-start: 1px solid var(--bya-border);
	list-style: none;
}

.bya-plan__points li {
	position: relative;
	padding-inline-start: 32px;
	color: var(--bya-ink-2);
	font-size: var(--bya-text-small);
	line-height: 1.8;
}

.bya-plan__points li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0.15em;
	inline-size: 22px;
	block-size: 22px;
	border-radius: 50%;
	background-color: var(--bya-pine-wash);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e6e58' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 12px;
}

/* ---------------------------------------------------------------- پهنای کم */

@media (max-width: 1024px) {
	.bya-plans {
		grid-template-columns: minmax(0, 1fr);
		max-inline-size: 34rem;
		margin-inline: auto;
	}

	.bya-plan--featured {
		order: -1;
	}
}

@media (max-width: 767px) {
	.bya-plan__tagline {
		min-block-size: 0;
	}
}

/* صفحه‌ی اصلی: دکمه‌ی برگه‌ی قیمت‌ها زیر کارت‌ها، وسط و نزدیک‌تر به آن‌ها از فاصله‌ی معمول بخش */
.elementor .elementor-widget.bya-plans-more {
	align-self: center;
	margin-block-start: -16px;
}