/**
 * CCAPP Conferences — registration pricing table.
 *
 * Deliberately small. Cards, buttons and badges already exist in
 * ccapp-theme.css and are reused as-is; only the grid and the tier-specific
 * bits are defined here. Everything reads the existing design tokens, so a
 * per-conference accent recolours this automatically through --conf-accent
 * and no value is duplicated out of the main stylesheet.
 */

.ccapp-pricing-table {
	margin: var(--ccapp-space-section, 4rem) 0;
}

.ccapp-pricing-table__title {
	font-family: var(--ccapp-font-display, serif);
	font-size: var(--ccapp-fs-h2, 2rem);
	margin: 0 0 var(--ccapp-space-md, 1.5rem);
}

/* auto-fit rather than fixed columns: two tiers shouldn't stretch across
   the page and five shouldn't overflow it. */
.ccapp-pricing-table__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--ccapp-space-md, 1.5rem);
	align-items: start;
}

.ccapp-pricing-tier {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: var(--ccapp-space-md, 1.5rem);
}

.ccapp-pricing-tier__label {
	font-family: var(--ccapp-font-display, serif);
	font-size: var(--ccapp-fs-h3, 1.4rem);
	margin: 0;
}

.ccapp-pricing-tier__price {
	font-size: var(--ccapp-fs-h3, 1.4rem);
	margin: 0;
	color: var(--ccapp-charcoal, #2D2926);
}

.ccapp-pricing-tier__price strong {
	color: var(--conf-accent, var(--ccapp-membership, #008C95));
}

/* The struck-through original needs to read as context, not as the price. */
.ccapp-pricing-tier__price del {
	color: var(--ccapp-ink-soft, #6b6862);
	font-size: var(--ccapp-fs-small, 0.85rem);
	margin-right: 0.4rem;
	text-decoration-thickness: 1px;
}

.ccapp-pricing-tier__desc {
	color: var(--ccapp-ink-soft, #6b6862);
	font-size: var(--ccapp-fs-body, 1rem);
	margin: 0;
}

.ccapp-pricing-tier__stock {
	color: var(--ccapp-coral, #D85A30);
	font-size: var(--ccapp-fs-label, 0.8rem);
	font-weight: 600;
	letter-spacing: 0.02em;
	margin: 0;
	text-transform: uppercase;
}

/* Quantity sits beside the button because it is part of the same decision:
   which tier, and how many seats. */
.ccapp-pricing-tier__form {
	align-items: flex-end;
	display: flex;
	gap: 0.6rem;
	margin-top: auto;
	padding-top: var(--ccapp-space-sm, 0.75rem);
}

.ccapp-pricing-tier__qty {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	flex: 0 0 5.5rem;
}

.ccapp-pricing-tier__qty span {
	font-size: var(--ccapp-fs-label, 0.8rem);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ccapp-ink-soft, #6b6862);
}

.ccapp-pricing-tier__qty input {
	border: 1.5px solid #E5E2D9;
	border-radius: var(--ccapp-radius, 12px);
	padding: 0.55rem 0.6rem;
	width: 100%;
	font: inherit;
}

.ccapp-pricing-tier__qty input:focus-visible {
	border-color: var(--conf-accent, var(--ccapp-membership, #008C95));
	outline: 2px solid var(--conf-accent, var(--ccapp-membership, #008C95));
	outline-offset: 1px;
}

.ccapp-pricing-tier__form .ccapp-btn {
	flex: 1 1 auto;
}

.ccapp-pricing-tier__note {
	color: var(--ccapp-ink-soft, #6b6862);
	font-size: var(--ccapp-fs-small, 0.85rem);
	margin: 0;
}

@media (max-width: 480px) {
	/* Stacking keeps the button full-width and thumb-friendly rather than
	   squeezed next to a number input. */
	.ccapp-pricing-tier__form {
		flex-direction: column;
		align-items: stretch;
	}

	.ccapp-pricing-tier__qty {
		flex: 1 1 auto;
	}
}