/**
 * Pricing Page Styles — lmin theme
 *
 * Scoped under .lmin-pricing. Consumes design tokens from lmin-variables.css
 * (neobrutalism --nb-* family, fluid --space-*/--step-* scale, --lmin-* palette).
 * Dark mode via [data-theme="dark"] overrides.
 *
 * @package lmin_theme
 */

.lmin-pricing,
.lmin-pricing *,
.lmin-pricing *::before,
.lmin-pricing *::after {
 box-sizing: border-box;
}

.lmin-pricing {
	padding: var(--space-xl-2xl) 0;
}

.lmin-pricing-inner {
	max-width: var(--lmin-container-max);
	margin: 0 auto;
	padding: 0 var(--space-s);
}

/* ============================================
   HEADER
   ============================================ */
.lmin-pricing-header {
	text-align: center;
	margin-bottom: var(--space-xl-2xl);
}

.lmin-pricing-title {
	font-size: var(--step-4);
	margin: 0 0 var(--space-s);
}

.lmin-pricing-subtitle {
	font-size: var(--step-1);
	color: var(--lmin-slate-500);
	margin: 0;
}

/* ============================================
   TIER GRID — 5 cols desktop → 3 @1200 → 2 @900 → 1 mobile
   ============================================ */
.lmin-pricing-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: var(--space-s);
	align-items: stretch;
}

.lmin-price-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--space-m);
	background: var(--color-surface, #fff);
	border: var(--nb-border);
	border-radius: var(--nb-radius);
}

/* Featured (Starter) — accent border + larger shadow */
.lmin-price-card-featured {
	border: var(--nb-border-width) solid var(--nb-accent);
	box-shadow: var(--nb-shadow-lg);
}

.lmin-price-badge {
	position: absolute;
	top: calc(var(--nb-border-width) * -1);
	left: 50%;
	transform: translate(-50%, -50%);
	padding: var(--nb-btn-padding-y-sm) var(--space-xs);
	background: var(--nb-accent);
	color: var(--nb-accent-fg);
	border: var(--nb-border);
	border-radius: var(--nb-radius-sm);
	font-size: var(--step--2);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	white-space: nowrap;
}

.lmin-price-name {
	font-size: var(--step-1);
	margin: 0 0 var(--space-2xs);
}

.lmin-price-amount {
	font-size: var(--step-3);
	font-weight: 800;
	margin: 0 0 var(--space-2xs);
}

.lmin-price-period {
	font-size: var(--step-0);
	font-weight: 500;
	color: var(--lmin-slate-500);
}

.lmin-price-desc {
	color: var(--lmin-slate-500);
	margin: 0 0 var(--space-m);
}

.lmin-price-features {
	list-style: none;
	margin: 0 0 var(--space-m);
	padding: 0;
	font-size: var(--step--1);
}

.lmin-price-features li {
	padding: var(--space-3xs) 0;
	border-bottom: 1px solid var(--color-border, #E2E8F0);
}

.lmin-price-features li:last-child {
	border-bottom: none;
}

/* CTA pinned to card bottom */
.lmin-price-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: auto;
	padding: var(--nb-btn-padding-y) var(--nb-btn-padding-x);
	border: var(--nb-border);
	border-radius: var(--nb-radius-sm);
	box-shadow: var(--nb-shadow-sm);
	color: var(--lmin-blue-600);
	font-weight: 600;
	text-decoration: none;
	transition: var(--nb-transition);
}

.lmin-price-cta:hover {
	background: var(--nb-accent);
	color: var(--nb-accent-fg);
}

.lmin-price-cta:active {
	transform: translate(2px, 2px);
	box-shadow: var(--nb-shadow-press);
}

/* Primary CTA (featured card) — filled by default */
.lmin-price-cta-primary {
	background: var(--nb-accent);
	color: var(--nb-accent-fg);
}

.lmin-price-cta-primary:hover {
	background: var(--nb-accent-hover);
}

/* ============================================
   COMPARE TABLE
   ============================================ */
.lmin-pricing-compare {
	margin-top: var(--space-xl-2xl);
}

.lmin-pricing-compare-title {
	font-size: var(--step-2);
	text-align: center;
	margin: 0 0 var(--space-l);
}

.lmin-pricing-compare-tablewrap {
	overflow-x: auto; /* mobile: horizontal scroll, no page overflow */
}

.lmin-pricing-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--color-surface, #fff);
	border: var(--nb-border);
}

.lmin-pricing-table th,
.lmin-pricing-table td {
	padding: var(--space-xs) var(--space-s);
	border-bottom: 1px solid var(--color-border, #E2E8F0);
	text-align: center;
	font-size: var(--step--1);
}

.lmin-pricing-table th:first-child,
.lmin-pricing-table td:first-child {
	text-align: left;
	font-weight: 600;
}

.lmin-pricing-table thead th {
	background: var(--lmin-slate-100);
	font-weight: 700;
	border-bottom: var(--nb-border);
}

/* ============================================
   RESPONSIVE — 2 cols tablet, 1 col mobile
   ============================================ */
@media (max-width: 1200px) {
	.lmin-pricing-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 900px) {
	.lmin-pricing-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.lmin-pricing-grid {
		grid-template-columns: 1fr;
	}

	.lmin-price-card-featured {
		order: -1; /* featured card first on mobile */
	}

	.lmin-pricing-table th,
	.lmin-pricing-table td {
		padding: var(--space-2xs) var(--space-xs);
	}
}

/* ============================================
   DARK MODE — card surfaces #1E293B (homepage pattern)
   ============================================ */
[data-theme="dark"] .lmin-pricing-title,
[data-theme="dark"] .lmin-price-name,
[data-theme="dark"] .lmin-price-amount {
	color: #F1F5F9;
}

[data-theme="dark"] .lmin-pricing-subtitle,
[data-theme="dark"] .lmin-price-desc,
[data-theme="dark"] .lmin-price-period {
	color: var(--lmin-slate-400);
}

[data-theme="dark"] .lmin-price-card {
	background: #1E293B;
}

[data-theme="dark"] .lmin-price-features li {
	border-bottom-color: var(--lmin-slate-700);
}

[data-theme="dark"] .lmin-price-features {
	color: var(--lmin-slate-300);
}

[data-theme="dark"] .lmin-price-cta {
	color: var(--lmin-blue-400);
}

[data-theme="dark"] .lmin-price-cta:hover,
[data-theme="dark"] .lmin-price-cta-primary {
	color: var(--nb-accent-fg);
}

[data-theme="dark"] .lmin-pricing-table {
	background: #1E293B;
}

[data-theme="dark"] .lmin-pricing-table th,
[data-theme="dark"] .lmin-pricing-table td {
	border-bottom-color: var(--lmin-slate-700);
	color: var(--lmin-slate-300);
}

[data-theme="dark"] .lmin-pricing-table thead th {
	background: var(--lmin-slate-800);
	color: #F1F5F9;
}

/* ============================================
   FOCUS — keyboard navigation (aesthetic part of nb)
   ============================================ */
.lmin-price-cta:focus-visible {
	outline: var(--nb-focus-outline);
	outline-offset: var(--nb-focus-offset);
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
	.lmin-price-cta,
	.lmin-price-badge {
		transition: none;
	}

	.lmin-price-cta:active {
		transform: none;
	}
}