/* ==========================================================================
   FOA Pricing Table
   Uses custom properties from memberpress-dark.css
   ========================================================================== */

/* Toggle bar */
.foa-pricing-toggle {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin: 2rem auto 1.5rem;
	max-width: 1440px;
	padding: 0 1rem;
}

.foa-pricing-toggle__btn {
	padding: 0.5rem 1.5rem;
	border-radius: 999px;
	border: 2px solid var(--foa-accent-1, #F78E1E);
	background-color: transparent;
	color: var(--foa-accent-1, #F78E1E);
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s, color 0.2s;
}

.foa-pricing-toggle__btn:hover {
	background-color: rgba(247, 142, 30, 0.15);
}

.foa-pricing-toggle__btn--active {
	background-color: var(--foa-accent-1, #F78E1E);
	color: var(--foa-base, #181818);
}

.foa-pricing-toggle__btn--active:hover {
	background-color: #e07d10;
}

/* Grid */
.foa-pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	max-width: 1440px;
	margin: 0 auto 2rem;
	padding: 0 1rem;
	align-items: start;
}

/* Shared block as a grid item: full width below the cards on narrow
   screens; the grid's gap handles spacing. */
.foa-pricing-grid .foa-pricing-shared {
	grid-column: 1 / -1;
	margin: 0;
	max-width: none;
}

/* Cards side by side once there is room, with the shared benefits block
   spanning their full width underneath.

   The billing toggle hides whole cards — quarterly has neither Unlimited nor
   the free owner registration — so the grid follows how many are still
   showing. Without that the remaining cards sat in the first columns while
   the shared block spanned all four, and the two no longer lined up
   (Nicole, 2026-09-04). The count comes from the toggle script. */
@media (min-width: 900px) {
	.foa-pricing-grid[data-visible-cards="2"] {
		grid-template-columns: repeat(2, 1fr);
		max-width: 560px;
	}

	.foa-pricing-grid[data-visible-cards="1"] {
		grid-template-columns: minmax(0, 280px);
		max-width: 280px;
	}
}

@media (min-width: 1150px) {
	.foa-pricing-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.foa-pricing-grid[data-visible-cards="3"] {
		grid-template-columns: repeat(3, 1fr);
		max-width: 850px;
	}
}

/* The free registration is not one of the paid plans, so the shared benefits
   block stops short of its column and sits directly under the paid cards
   (Nicole, 2026-09-04). The free card fills the last column downward beside
   it, so nothing is left hanging. */
@media (min-width: 900px) {
	.foa-pricing-grid[data-owner-visible="1"] .foa-pricing-card--owner {
		grid-column: -2 / -1;
		grid-row: 1 / span 2;
		align-self: stretch;
	}

	.foa-pricing-grid[data-owner-visible="1"] .foa-pricing-shared {
		grid-column: 1 / -2;
		grid-row: 2;
	}
}

/* Card */
.foa-pricing-card {
	background-color: var(--foa-accent-4, #111111);
	border: 1px solid var(--foa-border, #333333);
	border-radius: 12px;
	padding: 2rem 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	position: relative;
	transition: transform 0.2s ease;
}

/* Featured card */
.foa-pricing-card--featured {
	border-top: 3px solid var(--foa-accent-1, #F78E1E);
	border-color: var(--foa-accent-1, #F78E1E);
}

@media (min-width: 800px) {
	.foa-pricing-card--featured {
		transform: scale(1.03);
	}
}

@media (max-width: 599px) {
	.foa-pricing-card--featured {
		order: -1;
	}
}

/* Badge */
.foa-pricing-badge {
	display: inline-block;
	background-color: var(--foa-accent-1, #F78E1E);
	color: var(--foa-base, #181818);
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	margin-bottom: 0.75rem;
}

/* Title */
.foa-pricing-title {
	color: var(--foa-contrast, #FFFFFF);
	font-size: 1.35rem;
	font-weight: 700;
	margin: 0 0 0.25rem;
}

/* Tagline */
.foa-pricing-tagline {
	color: var(--foa-accent-3, #AAAAAA);
	font-size: 0.9rem;
	margin: 0 0 1rem;
}

/* Price */
.foa-pricing-price {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 1.25rem;
}

.foa-pricing-amount {
	color: var(--foa-accent-1, #F78E1E);
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1.1;
}

.foa-pricing-period {
	color: var(--foa-accent-3, #AAAAAA);
	font-size: 0.85rem;
	margin-top: 0.25rem;
}

/* CTA buttons */
.foa-pricing-cta {
	display: inline-block;
	width: 100%;
	padding: 0.75rem 1.5rem;
	border-radius: 6px;
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.2s, color 0.2s;
	margin-bottom: 1.5rem;
	box-sizing: border-box;
}

.foa-pricing-cta--primary {
	background-color: var(--foa-accent-1, #F78E1E);
	color: var(--foa-base, #181818);
	border: 2px solid var(--foa-accent-1, #F78E1E);
}

.foa-pricing-cta--primary:hover {
	background-color: #e07d10;
	border-color: #e07d10;
	color: var(--foa-base, #181818);
}

.foa-pricing-cta--outline {
	background-color: transparent;
	color: var(--foa-accent-1, #F78E1E);
	border: 2px solid var(--foa-accent-1, #F78E1E);
}

.foa-pricing-cta--outline:hover {
	background-color: var(--foa-accent-1, #F78E1E);
	color: var(--foa-base, #181818);
}

/* Feature list */
.foa-pricing-features {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	text-align: left;
	border-top: 1px solid var(--foa-border, #333333);
	padding-top: 1.25rem;
}

.foa-pricing-features li {
	color: var(--foa-contrast, #FFFFFF);
	font-size: 1.05rem;
	padding: 0.4rem 0;
	padding-left: 1.5rem;
	position: relative;
	line-height: 1.4;
}

.foa-pricing-features li::before {
	content: "\2713";
	color: var(--foa-accent-2, #1ED6F7);
	font-weight: 700;
	position: absolute;
	left: 0;
}

/* Tier-specific fine print on a card */
.foa-pricing-card__note {
	color: var(--foa-accent-3, #AAAAAA);
	font-size: 0.8rem;
	line-height: 1.5;
	text-align: left;
	width: 100%;
	margin: 0.75rem 0 0;
}

/* Shared "All memberships include" block */
.foa-pricing-shared {
	background-color: var(--foa-accent-4, #111111);
	border: 1px solid var(--foa-border, #333333);
	border-radius: 12px;
	max-width: 1440px;
	margin: 0 auto 2rem;
	padding: 1.75rem 1.5rem;
	box-sizing: border-box;
}

.foa-pricing-shared__title {
	color: var(--foa-contrast, #FFFFFF);
	font-size: 1.5rem;
	font-weight: 700;
	text-align: center;
	margin: 0 0 1.25rem;
}

.foa-pricing-shared__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.foa-pricing-shared__list li {
	color: var(--foa-contrast, #FFFFFF);
	font-size: 1.05rem;
	padding: 0.4rem 0 0.4rem 1.5rem;
	position: relative;
	line-height: 1.4;
	break-inside: avoid;
}

.foa-pricing-shared__list li::before {
	content: "\2713";
	color: var(--foa-accent-2, #1ED6F7);
	font-weight: 700;
	position: absolute;
	left: 0;
}

.foa-pricing-shared__note {
	color: var(--foa-accent-3, #AAAAAA);
	font-size: 0.85rem;
	line-height: 1.5;
	text-align: center;
	margin: 1.25rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--foa-border, #333333);
}

/* The shared list is long — split it into columns once there's room */
@media (min-width: 700px) {
	.foa-pricing-shared__list {
		column-count: 2;
		column-gap: 2.5rem;
	}
}

/* Responsive: force single column on small screens */
@media (max-width: 599px) {
	.foa-pricing-grid {
		grid-template-columns: 1fr;
	}
}

/* Two columns for medium screens */
@media (min-width: 600px) and (max-width: 899px) {
	.foa-pricing-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Registered Owner card: visually NOT one of the memberships */
.foa-pricing-card--owner {
	border-style: dashed;
}

.foa-pricing-card__note--owner {
	color: var(--foa-accent-1, #F78E1E);
	font-weight: 600;
	font-size: 0.85rem;
}

.foa-pricing-shared__eligibility {
	color: var(--foa-accent-1, #F78E1E);
	font-size: 0.9rem;
	font-weight: 600;
	text-align: center;
	margin: -0.75rem 0 1.25rem;
}