/* Pricing table — /list-your-venue/ (three-tier annual model, Sept 2026).
   Structure and numbers come from inc/pricing-table.php (single edit point).
   Visual direction per client pricing-table image (Sept 8 attachments). */

.pricing-table {
	max-width: 1120px;
	margin: 0 auto 64px;
}

.pricing-table__header {
	text-align: center;
	margin-bottom: 40px;
}

.pricing-table__eyebrow {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-text-secondary);
	margin: 0 0 4px;
}

.pricing-table__title {
	margin: 0 0 12px;
	font-size: clamp(30px, 4vw, 44px);
	font-weight: 500;
}

.pricing-table__script {
	font-family: var(--font-script);
	font-weight: 400;
	color: var(--color-primary-dark);
}

.pricing-table__sub {
	color: var(--color-text-secondary);
	margin: 0;
}

/* --- Tier cards --- */

.pricing-table__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch;
	margin-bottom: 56px;
}

.pricing-card {
	position: relative;
	display: flex;
	flex-direction: column;
	text-align: center;
	background: var(--color-surface);
	border: 1px solid #ECECEC;
	border-radius: 16px;
	padding: 36px 28px 28px;
}

.pricing-card--popular {
	background: var(--color-primary-light);
	border: 2px solid var(--color-primary);
}

.pricing-card__badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--color-primary);
	color: var(--color-text-inverse);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 6px 18px;
	border-radius: 999px;
	margin: 0;
	white-space: nowrap;
}

.pricing-card__name {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-heading);
	margin: 0 0 8px;
}

.pricing-card--popular .pricing-card__name {
	color: var(--color-primary-dark);
}

.pricing-card__price {
	margin: 0 0 6px;
}

.pricing-card__amount {
	display: block;
	font-size: clamp(36px, 3.4vw, 48px);
	font-weight: 700;
	line-height: 1.05;
	color: var(--color-heading);
}

.pricing-card--popular .pricing-card__amount {
	color: var(--color-primary-dark);
}

.pricing-card__per {
	display: block;
	font-size: 14px;
	color: var(--color-text-secondary);
	margin-top: 2px;
}

.pricing-card__rates {
	font-size: 13px;
	color: var(--color-text-secondary);
	margin: 0 0 14px;
}

.pricing-card--popular .pricing-card__rates {
	color: var(--color-primary-dark);
	font-weight: 600;
}

.pricing-card__tagline {
	font-size: 14px;
	color: var(--color-text-secondary);
	margin: 0 0 20px;
}

.pricing-card__cta {
	display: inline-block;
	margin-top: auto;
	padding: 12px 24px;
	border: 2px solid var(--color-primary-dark);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--color-primary-dark);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pricing-card__cta:hover,
.pricing-card__cta:focus-visible {
	background: var(--color-primary-dark);
	color: var(--color-text-inverse);
}

/* --- Feature matrix --- */

.pricing-matrix__title {
	text-align: center;
	font-size: clamp(26px, 3vw, 36px);
	font-weight: 500;
	margin: 0 0 28px;
}

.pricing-matrix__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.pricing-matrix {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
	font-size: 14px;
}

.pricing-matrix thead th {
	background: var(--color-heading);
	color: var(--color-text-inverse);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 14px 16px;
	text-align: center;
}

.pricing-matrix thead th:first-child {
	text-align: left;
}

.pricing-matrix thead th.pricing-matrix__col--popular {
	background: var(--color-primary);
}

.pricing-matrix tbody th {
	text-align: left;
	font-weight: 600;
	color: var(--color-heading);
	padding: 12px 16px;
}

.pricing-matrix tbody td {
	text-align: center;
	padding: 12px 16px;
	color: var(--color-text);
}

.pricing-matrix tbody tr:nth-child(odd) {
	background: var(--color-bg-alt);
}

.pricing-matrix tbody td.pricing-matrix__col--popular {
	background: var(--color-primary-light);
}

.pricing-matrix__check {
	color: var(--color-primary-dark);
	font-weight: 700;
}

.pricing-matrix__dash {
	color: var(--color-text-muted);
}

/* --- Footer note --- */

.pricing-table__note {
	margin: 24px 0 0;
	font-size: 13px;
	color: var(--color-text-secondary);
	text-align: center;
}

/* --- Signup anchor offset (fixed header) --- */

.operator-signup-anchor {
	scroll-margin-top: 110px;
}

/* Keep the comparison beside the narrower registration form on desktop.
   Both grid children must be allowed to shrink so the matrix scrolls inside
   its own wrapper on smaller screens, rather than widening the page. */
.operator-signup-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
	padding-block: 40px 64px;
}

.operator-signup-layout > * {
	min-width: 0;
}

.operator-signup-layout .pricing-table {
	width: 100%;
	margin-bottom: 0;
}

.operator-signup-layout .operator-signup {
	margin-block: 0;
}

@media (min-width: 1100px) {
	.operator-signup-layout {
		max-width: 1440px;
		grid-template-columns: minmax(0, 2.1fr) minmax(340px, 1fr);
		gap: 32px;
		align-items: start;
	}

	.operator-signup-layout .pricing-table__cards {
		gap: 12px;
	}

	.operator-signup-layout .pricing-card {
		padding: 32px 14px 20px;
	}

	.operator-signup-layout .pricing-card__cta {
		padding-inline: 12px;
	}

	.operator-signup-layout .operator-signup__header {
		text-align: left;
		margin-bottom: 24px;
	}

	.operator-signup-layout .operator-signup__title {
		font-size: 28px;
	}

	.operator-signup-layout .operator-signup__subtitle {
		font-size: 15px;
	}

	.operator-signup-layout .operator-signup__form {
		padding: 24px;
	}

	.operator-signup-layout .operator-signup__tier-grid,
	.operator-signup-layout .operator-signup__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.operator-signup-layout .operator-signup__tier-card {
		padding: 12px 16px;
	}

	.operator-signup-layout .operator-signup__tier-name {
		font-size: 18px;
	}

	.operator-signup-layout .operator-signup__tier-price {
		font-size: 16px;
	}
}

/* --- Responsive --- */

@media (max-width: 900px) {
	.pricing-table__cards {
		grid-template-columns: 1fr;
		max-width: 440px;
		margin-left: auto;
		margin-right: auto;
	}

	.pricing-card--popular {
		order: -1;
	}
}