/**
 * PCL Storefront — pricing cards + themed checkout.
 * Dark/purple theme by default. Recolor via the CSS variables on .pcl-pricing
 * / .pcl-checkout (override in your theme or Customizer Additional CSS).
 */

.pcl-pricing,
.pcl-checkout {
	--pcl-bg: #0e0b1f;
	--pcl-card-bg: #141033;
	--pcl-card-bg-feat: linear-gradient(180deg, #1b1442 0%, #120e2e 100%);
	--pcl-border: rgba(255, 255, 255, 0.08);
	--pcl-border-feat: #7c5cff;
	--pcl-accent: #7c5cff;
	--pcl-accent-2: #a78bff;
	--pcl-text: #f4f3ff;
	--pcl-muted: #a9a6c7;
	--pcl-check: #8b7bff;
	--pcl-radius: 18px;
	--pcl-shadow: 0 24px 60px rgba(12, 8, 40, 0.55);

	color: var(--pcl-text);
	box-sizing: border-box;
}

.pcl-pricing *,
.pcl-checkout * {
	box-sizing: border-box;
}

/* -------------------------------------------------------------- Grid */

.pcl-pricing__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	align-items: stretch;
	max-width: 1100px;
	margin: 0 auto;
}

@media (max-width: 900px) {
	.pcl-pricing__grid {
		grid-template-columns: 1fr;
		max-width: 460px;
	}
}

/* -------------------------------------------------------------- Card */

.pcl-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--pcl-card-bg);
	border: 1px solid var(--pcl-border);
	border-radius: var(--pcl-radius);
	padding: 32px 28px;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pcl-card:hover {
	transform: translateY(-4px);
	border-color: rgba(124, 92, 255, 0.4);
}

.pcl-card--featured {
	background: var(--pcl-card-bg-feat);
	border-color: var(--pcl-border-feat);
	box-shadow: var(--pcl-shadow);
}

@media (min-width: 901px) {
	.pcl-card--featured {
		transform: scale(1.04);
	}
	.pcl-card--featured:hover {
		transform: scale(1.04) translateY(-4px);
	}
}

.pcl-card__badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(90deg, var(--pcl-accent), var(--pcl-accent-2));
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 999px;
	white-space: nowrap;
}

.pcl-card__title {
	margin: 0 0 8px;
	font-size: 24px;
	font-weight: 700;
	color: var(--pcl-text);
}

.pcl-card__tagline {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--pcl-muted);
	min-height: 44px;
}

/* -------------------------------------------------------------- Price */

.pcl-card__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--pcl-border);
}

.pcl-price__amount {
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
	color: var(--pcl-text);
}

.pcl-price__amount .woocommerce-Price-amount,
.pcl-price__was .woocommerce-Price-amount {
	color: inherit;
}

.pcl-price__was {
	font-size: 20px;
	font-weight: 600;
	color: var(--pcl-muted);
	text-decoration: line-through;
	opacity: 0.7;
}

.pcl-price__suffix {
	font-size: 14px;
	font-weight: 500;
	color: var(--pcl-muted);
}

/* -------------------------------------------------------------- Features */

.pcl-card__features {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	flex: 1 1 auto;
}

.pcl-card__features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--pcl-text);
	padding: 7px 0;
}

.pcl-card__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 50%;
	background: rgba(124, 92, 255, 0.16);
	color: var(--pcl-check);
	font-size: 12px;
	font-weight: 700;
}

/* -------------------------------------------------------------- CTA */

.pcl-card__cta {
	display: inline-block;
	width: 100%;
	text-align: center;
	padding: 14px 20px;
	border-radius: 12px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid var(--pcl-accent);
	background: transparent;
	color: var(--pcl-text);
	transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.pcl-card__cta:hover {
	background: rgba(124, 92, 255, 0.14);
	color: var(--pcl-text);
}

.pcl-card__cta--primary {
	background: linear-gradient(90deg, var(--pcl-accent), var(--pcl-accent-2));
	border-color: transparent;
	color: #fff;
}

.pcl-card__cta--primary:hover {
	opacity: 0.92;
	color: #fff;
}

.pcl-card__cta--disabled {
	opacity: 0.5;
	pointer-events: none;
	border-color: var(--pcl-border);
}

.pcl-pricing-empty {
	max-width: 1100px;
	margin: 0 auto;
	padding: 16px;
	border: 1px dashed rgba(124, 92, 255, 0.5);
	border-radius: 12px;
	color: var(--pcl-muted);
}

/* -------------------------------------------------------------- Checkout */

.pcl-checkout {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
}

.pcl-checkout__empty {
	text-align: center;
	padding: 48px 24px;
}

.pcl-checkout__empty .pcl-card__cta {
	width: auto;
	display: inline-block;
	margin-top: 16px;
}

/* Two-column checkout on desktop: billing left, order summary + payment right.
   Express-pay buttons + coupon render outside <form.checkout>, so they stay
   full-width on top. Floats (not grid) keep unknown gateway/plugin form children
   unaffected. Scoped to BOTH .pcl-checkout and the WooCommerce checkout <body>
   class, with !important + flow-root, so it wins over theme width overrides
   whether you use [pcl_checkout] or the plain [woocommerce_checkout]. */
@media (min-width: 769px) {
	.pcl-checkout form.checkout.woocommerce-checkout,
	body.woocommerce-checkout form.checkout.woocommerce-checkout {
		display: flow-root !important; /* block formatting context so floats contain + apply */
	}
	.pcl-checkout form.checkout.woocommerce-checkout #customer_details,
	body.woocommerce-checkout form.checkout.woocommerce-checkout #customer_details {
		float: left !important;
		width: 56% !important;
		clear: none !important;
		margin: 0 !important;
	}
	.pcl-checkout form.checkout.woocommerce-checkout #order_review_heading,
	.pcl-checkout form.checkout.woocommerce-checkout #order_review,
	body.woocommerce-checkout form.checkout.woocommerce-checkout #order_review_heading,
	body.woocommerce-checkout form.checkout.woocommerce-checkout #order_review {
		float: right !important;
		width: 40% !important;
		clear: right !important;
	}
	.pcl-checkout form.checkout.woocommerce-checkout #order_review_heading,
	body.woocommerce-checkout form.checkout.woocommerce-checkout #order_review_heading {
		margin-top: 0 !important;
	}
	/* Billing + additional-info stack within the left column. */
	.pcl-checkout #customer_details .col-1,
	.pcl-checkout #customer_details .col-2,
	body.woocommerce-checkout #customer_details .col-1,
	body.woocommerce-checkout #customer_details .col-2 {
		float: none !important;
		width: 100% !important;
	}
}

/* Light theme override: add class pcl-theme-light alongside the wrapper, or set
   --pcl-* vars in your own CSS. The defaults above assume a dark section. */
.pcl-pricing.pcl-theme-light,
.pcl-checkout.pcl-theme-light {
	--pcl-card-bg: #ffffff;
	--pcl-card-bg-feat: linear-gradient(180deg, #f6f3ff 0%, #ffffff 100%);
	--pcl-border: rgba(20, 16, 51, 0.1);
	--pcl-text: #1a1530;
	--pcl-muted: #6b6889;
}