/**
 * Hosting plans grid.
 *
 * Structural layout only — no font styling.
 * Typography (color, size, weight, line-height, transforms) is handled
 * entirely by the theme. This file only controls spacing, borders,
 * grid layout, and interactive states.
 *
 * Colour tokens (--color-border, --color-ink, --color-bg) are defined
 * by the theme; sensible defaults are provided as fallbacks.
 */

/* ---- Grid container ---- */

.fr-hosting-plans {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	border: 1px solid var( --color-border, #000 );
}

/* ---- Plan card ---- */

.fr-plan {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;

	/* Interior borders — right divider between columns, bottom divider between rows */
	border-right:  1px solid var( --color-border, #000 );
	border-bottom: 1px solid var( --color-border, #000 );
}

/* Right column cards: no right border (outer container provides it) */
.fr-plan:nth-child( even ) {
	border-right: none;
}

/* Last row, left card: no bottom border */
.fr-plan:nth-last-child( 2 ):nth-child( odd ) {
	border-bottom: none;
}

/* Last row, right card (or only card in last row): no bottom border */
.fr-plan:last-child {
	border-bottom: none;
}

/* ---- Header ---- */

.fr-plan__header {
	margin-bottom: 1rem;
}

.fr-plan__name {
	margin: 0;
}

/* ---- Description ---- */

.fr-plan__description {
	flex: 1; /* Push footer to bottom regardless of description length */
	margin-bottom: 1.5rem;
}

.fr-plan__description p:first-child {
	margin-top: 0;
}

.fr-plan__description p:last-child {
	margin-bottom: 0;
}

/* ---- Footer: price + button ---- */

.fr-plan__footer {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
}

.fr-plan__price {
	display: flex;
	align-items: baseline;
	gap: 0.375rem;
}

/* ---- Setup fee ---- */

.fr-plan__setup {
	margin-top: 0.5rem; /* Space above the setup-fee line (sits below the price/button) */
}

/* On the catalogue cards the setup line sits ABOVE the Add-to-cart button, so it
   drops the top margin (keeps the buttons aligned across cards) and takes a small
   gap below instead. */
.fr-plan__setup--above {
	margin-top: 0;
	margin-bottom: 0.375rem;
}

/* ---- Add to cart / view service button ---- */

/* Both <a> and <button> elements use this class — selectors are kept
   specific enough to override WordPress generated button styles from theme.json */
a.fr-plan__btn,
button.fr-plan__btn {
	display: block;
	width: 100%;
	padding: 0.625rem 1rem;
	background-color: var( --wp--preset--color--foreground, #000 );
	color: var( --wp--preset--color--background, #fff );
	border: 1px solid var( --wp--preset--color--foreground, #000 );
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
	text-align: center;
	text-decoration: none;
}

a.fr-plan__btn:hover,
button.fr-plan__btn:hover {
	background-color: var( --wp--preset--color--background, #fff );
	color: var( --wp--preset--color--foreground, #000 );
}

a.fr-plan__btn:focus-visible,
button.fr-plan__btn:focus-visible {
	outline: 2px solid var( --wp--preset--color--foreground, #000 );
	outline-offset: 2px;
}

/* Compact variant for inline rows (e.g. /services/ order page) —
   matches the domain search result button dimensions */
a.fr-plan__btn--compact,
button.fr-plan__btn--compact {
	display: inline-block;
	width: auto;
	padding: 0.4375rem 0.875rem;
}

/* Price-swap variant: shows the price, swaps to the label on hover/focus.
   Both spans share one grid cell so the button keeps the width of the
   widest text — no layout jump on hover. */
a.fr-plan__btn--swap,
button.fr-plan__btn--swap {
	display: inline-grid;
	justify-items: center;
}

.fr-plan__btn--swap .fr-plan__btn-price,
.fr-plan__btn--swap .fr-plan__btn-label {
	grid-area: 1 / 1;
	white-space: nowrap;
}

.fr-plan__btn--swap .fr-plan__btn-label {
	visibility: hidden;
}

.fr-plan__btn--swap:hover .fr-plan__btn-price,
.fr-plan__btn--swap:focus-visible .fr-plan__btn-price {
	visibility: hidden;
}

.fr-plan__btn--swap:hover .fr-plan__btn-label,
.fr-plan__btn--swap:focus-visible .fr-plan__btn-label {
	visibility: visible;
}

/* Added state — item is in the cart: inverted, inert, label reads "Added".
   Rules are written with higher specificity than the --swap hover rules
   (and placed after them) so the hover swap cannot resurface the label. */

.fr-plan__btn--swap .fr-plan__btn-added {
	grid-area: 1 / 1;
	white-space: nowrap;
	visibility: hidden;
}

button.fr-plan__btn--added,
button.fr-plan__btn--added:hover {
	background-color: var( --wp--preset--color--white, #fff );
	color: var( --wp--preset--color--foreground, #000 );
	cursor: default;
}

.fr-plan__btn--swap.fr-plan__btn--added .fr-plan__btn-price,
.fr-plan__btn--swap.fr-plan__btn--added:hover .fr-plan__btn-price,
.fr-plan__btn--swap.fr-plan__btn--added .fr-plan__btn-label,
.fr-plan__btn--swap.fr-plan__btn--added:hover .fr-plan__btn-label,
.fr-plan__btn--swap.fr-plan__btn--added:focus-visible .fr-plan__btn-label {
	visibility: hidden;
}

.fr-plan__btn--swap.fr-plan__btn--added .fr-plan__btn-added {
	visibility: visible;
}

/* Catalogue (/services/{category}/) variant: unlike the inert order-page
   Added state, the in-cart button stays a live link to the cart (/order/),
   so restore the pointer affordance. Structural only. */

button.fr-plan__btn--cart-link.fr-plan__btn--added,
button.fr-plan__btn--cart-link.fr-plan__btn--added:hover {
	cursor: pointer;
}

/* ---- Responsive: stack to single column on small screens ---- */

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

	/* In single-column mode: restore bottom border on all, remove from last */
	.fr-plan {
		border-right: none;
		border-bottom: 1px solid var( --color-border, #000 );
	}

	.fr-plan:nth-last-child( 2 ):nth-child( odd ) {
		border-bottom: 1px solid var( --color-border, #000 );
	}

	.fr-plan:last-child {
		border-bottom: none;
	}
}

/* ---- Mobile ( < sm / 640px ): tighter card padding, matching the other boxes
   (16px horizontal / 12px vertical). ---- */
@media ( max-width: 639.98px ) {
	.fr-plan {
		padding: 0.75rem 1rem;
	}
}