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

/* Toggle bar */
.foa-pricing-toggle {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
	/* Room below for the "Most popular" badge that sits on the card edge,
	   and room above so the switch is not glued to the intro text. */
	margin: 2.75rem auto 3.25rem;
	max-width: 1440px;
	padding: 0 1rem;
}

.foa-pricing-toggle__btn {
	/* Big enough to read as the first choice on the page - reviewers missed
	   the quarterly option at the old 0.95rem (Miles, 2026-09-08). */
	padding: 0.8rem 2.4rem;
	border-radius: 999px;
	border: 2px solid var(--foa-accent-1, #F78E1E);
	background-color: transparent;
	color: var(--foa-accent-1, #F78E1E);
	font-size: 1.2rem;
	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;
}

/* The site reads at 880px, which is right for prose but leaves the four
   cards narrow and wraps the Unlimited SIM line four times. Pages that carry
   the pricing table get the wide measure, like the account page does
   (Gitte, 2026-09-08). The class comes from the theme's body_class filter. */
body.foa-page-pricing .foa-main {
	--wp--style--global--content-size: var(--wp--style--global--wide-size);
}

/* 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: 2.5rem 1.5rem 2rem;
	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 {
	/* Sits on the card's top edge instead of in the flow, so the featured
	   card's title, price and button line up with the other cards
	   (Gitte, 2026-09-08: the buttons were at three different heights). */
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
	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: 0;
}

/* Title */
.foa-pricing-title {
	color: var(--foa-contrast, #FFFFFF);
	font-size: 1.35rem;
	font-weight: 700;
	margin: 0 0 0.25rem;
	/* One line on every card ("Registered Owner" used to wrap), so the
	   price and button rows share the same baseline across the grid. */
	white-space: nowrap;
}

/* 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;
	/* Room for two lines on every card: the owner card's "owner registration
	   - not a membership" wraps, and without this its button sat lower. */
	min-height: 2.6em;
}

/* 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;
}