/*
 * List49 Commerce module — front-end styles.
 *
 * Two things live here:
 *   1. The "Highlight" add-on's card treatment (a static, subtle border +
 *      background tint — distinct on purpose from the animated "Promoted"
 *      ring in assets/css/mc-promo-trail.css).
 *   2. The public pricing page's hero + FAQ sections. The plan comparison
 *      cards themselves (.mc-plan-compare*) live in
 *      assets/css/my-listings-dashboard.css and are reused as-is here —
 *      that file is already enqueued site-wide (mappcanada-core.php),
 *      same as this one, so no extra enqueue was needed.
 */

.mc-highlight-card-wrap {
	display: block;
	width: 100%;
	border-radius: var(--mc-card-radius, 8px);
	background: linear-gradient(135deg, rgba(213, 43, 30, 0.08), rgba(213, 43, 30, 0.02));
	padding: 3px;
}

.mc-highlight-card-wrap > .mappcanada-card {
	border-radius: inherit;
	box-shadow: 0 0 0 1px rgba(213, 43, 30, 0.35);
}

/* ==========================================================================
   Public pricing page
   ========================================================================== */

.mc-pricing-page {
	max-width: 1100px;
	margin: 0 auto;
	padding: 2.5rem 1.25rem 4rem;
}

.mc-pricing-hero {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 2.5rem;
}

.mc-pricing-hero__title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 800;
	color: #1a1a1a;
	margin: 0 0 0.6rem;
}

.mc-pricing-hero__sub {
	font-size: 1.05rem;
	color: #666666;
	margin: 0;
}

.mc-pricing-plans .mc-plan-compare {
	max-width: 980px;
	margin: 0 auto;
}

.mc-pricing-faq {
	margin-top: 3.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid #e0e0e0;
}

.mc-pricing-faq__heading {
	text-align: center;
	font-size: 1.3rem;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 1.5rem;
}

.mc-pricing-faq__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
}

.mc-pricing-faq__item h3 {
	font-size: 1rem;
	font-weight: 700;
	color: #1a1a1a;
	margin: 0 0 0.4rem;
}

.mc-pricing-faq__item p {
	font-size: 0.9rem;
	color: #666666;
	line-height: 1.5;
	margin: 0;
}