/*--------------------------------------------------------------
# Pricing grid that is mobile responsive based on card_grid
--------------------------------------------------------------*/

/* Section container */
.pricing-1 {
	padding: 4rem 1rem;
	background: linear-gradient(180deg, var(--brand-secondary-light) 0%, var(--brand-primary-light) 100%);
}

.pricing-1-header .lead {
	color: var(--muted);
	margin-bottom: 1.25rem;
}

/* Cards */
.pricing-card {
	border: 1px solid #e9ecef;
	border-radius: 12px;
	background: var(--brand-primary-light);
	box-shadow: 0 6px 18px rgba(17, 24, 39, 0.03);
	display: flex;
	flex-direction: column;
	height: 100%;
}

.pricing-card .card-body {
	padding: 1.5rem;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.price {
	font-size: 1.75rem;
	font-weight: 700;
	margin-bottom: .25rem;
}

.plan-title {
	font-size: 1.125rem;
	font-weight: 600;
	margin-bottom: .5rem;
}

.feature-list {
	margin-top: 1rem;
	margin-bottom: 1.25rem;
	list-style: none;
	padding: 0;
	flex: 1 1 auto;
}

.feature-list li {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	padding: .35rem 0;
	color: #343a40;
}

.feature-icon {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #f1f5f9;
	border-radius: 8px;
	color: #0f172a;
	flex-shrink: 0;
	font-size: 1.05rem;
}

/* CTAs */
.btn-yellow {
	background: var(--brand-primary-accent);
	border-color: rgba(0,0,0,0.06);
	color: var(--brand-primary-dark);
	font-weight: 600;
}
.btn-yellow:hover, .btn-yellow:focus {
	background: #f7b500;
	color: #0f172a;
}

.btn-teal {
	background: var(--brand-secondary-accent);
	border-color: rgba(0,0,0,0.06);
	color: var(--brand-primary-light);
	font-weight: 600;
}
.btn-teal:hover, .btn-teal:focus {
	background: #0b8c88;
	color: #fff;
}

/* Premium highlight */
.premium-card {
	border: 1px solid rgba(14,165,164,0.14);
	box-shadow: 0 10px 30px rgba(14,165,164,0.06);
	transform: translateY(-6px);
}
.badge-popular {
	background: linear-gradient(90deg, rgba(14,165,164,0.15), rgba(32,201,151,0.12));
	color: var(--brand-teal);
	font-weight: 700;
	border-radius: 999px;
	padding: .35rem .6rem;
	font-size: .75rem;
}

/* Small screens spacing */
@media (max-width: 767.98px) {
	.pricing-section {
		padding: 2.5rem 1rem;
	}
	.premium-card {
		transform: none;
		margin-top: .5rem;
	}
}