/* ──────────────────────────────────────────────
   CAEPS Membership Toggle
   ────────────────────────────────────────────── */

:root {
	--caeps-primary: #1a3c6e;
	--caeps-primary-light: #e8edf4;
	--caeps-text: #1f2937;
	--caeps-text-light: #6b7280;
	--caeps-border: #d1d5db;
	--caeps-bg: #f9fafb;
	--caeps-white: #fff;
	--caeps-success: #15803d;
	--caeps-radius: 10px;
	--caeps-transition: 0.2s ease;
}

/* ── Toggle Wrapper ── */

.caeps-toggle-wrapper {
	margin-bottom: 1.25em;
}

/* ── Toggle Groups ── */

.caeps-toggle-group {
	margin-bottom: 1em;
}

.caeps-toggle-label {
	display: block;
	font-size: 0.85em;
	font-weight: 600;
	color: var(--caeps-text);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0.5em;
}

.caeps-toggle-buttons {
	display: flex;
	gap: 0;
	border: 2px solid var(--caeps-border);
	border-radius: var(--caeps-radius);
	overflow: hidden;
	background: var(--caeps-bg);
}

.caeps-toggle-btn {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15em;
	padding: 0.85em 1em;
	border: none;
	background: transparent;
	color: var(--caeps-text-light);
	cursor: pointer;
	transition: background var(--caeps-transition),
	            color var(--caeps-transition),
	            box-shadow var(--caeps-transition);
	position: relative;
	font-family: inherit;
	line-height: 1.3;
	text-decoration: none;
}

.caeps-toggle-btn:not(:last-child) {
	border-right: 2px solid var(--caeps-border);
}

.caeps-toggle-btn.active {
	background: var(--caeps-primary);
	color: var(--caeps-white);
	border-color: var(--caeps-primary);
	box-shadow: inset 0 0 0 1px var(--caeps-primary);
}

.caeps-toggle-btn:not(.active):hover {
	background: var(--caeps-primary-light);
	color: var(--caeps-text);
	text-decoration: none;
}

.caeps-toggle-btn:focus-visible {
	outline: 2px solid var(--caeps-primary);
	outline-offset: -2px;
	z-index: 1;
}

.caeps-toggle-text {
	font-size: 0.95em;
	font-weight: 600;
}

.caeps-toggle-desc {
	font-size: 0.75em;
	font-weight: 400;
}

.caeps-toggle-btn.active .caeps-toggle-desc {
	color: var(--caeps-white);
}

/* ── Auto-renew discount ── */

/*
 * "Save 5%" sits inline after the Subscribe label rather than replacing the
 * "Auto-renews annually" line under it — the auto-renew disclosure has to stay
 * legible, so the incentive can't be allowed to displace it.
 */
.caeps-toggle-badge {
	display: inline-block;
	margin-left: 0.4em;
	padding: 0.1em 0.45em;
	border-radius: 999px;
	background: var(--caeps-success);
	color: var(--caeps-white);
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.5;
	vertical-align: 0.08em;
	white-space: nowrap;
}

/* On the active (filled) button the green pill loses contrast against the
   primary fill, so it inverts to a light chip instead. */
.caeps-toggle-btn.active .caeps-toggle-badge {
	background: var(--caeps-white);
	color: var(--caeps-primary);
}

.caeps-billing-savings {
	margin: 0.6em 0 0;
	font-size: 0.8em;
	line-height: 1.5;
	color: var(--caeps-text);
	max-width: 520px;
}

/* ── Hide WC variation table & reset link ── */

.caeps-toggle-wrapper ~ table.variations,
.caeps-toggle-wrapper ~ .variations,
form.variations_form table.variations {
	display: none !important;
}

form.variations_form .reset_variations {
	display: none !important;
}

/* ── Team product form layout ── */

/*
 * Structure inside .woocommerce-variation-add-to-cart:
 *   .wc-memberships-for-teams-team-fields-wrapper
 *     .team-fields
 *       p.form-row (Team Name label + input)
 *       p.team-seat-count-label ("Number of Seats:")
 *   .quantity (input)
 *   button.single_add_to_cart_button
 *
/* Variation price spacing */
form.variations_form .woocommerce-variation-price {
	margin-top: 0.5em !important;
	margin-bottom: 1.5em !important;
	clear: both;
}

/*
 * We need: Team Name full-width on its own row,
 * then "Number of Seats:" label,
 * then quantity + button on the same row.
 */

/* Make the add-to-cart area a wrapping flex column */
form.variations_form .woocommerce-variation-add-to-cart {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0.5em !important;
}

/* Team fields wrapper takes full width */
form.variations_form .wc-memberships-for-teams-team-fields-wrapper {
	width: 100% !important;
	flex-basis: 100% !important;
	margin-bottom: 0.25em !important;
}

/* Team Name input full width */
form.variations_form .wc-memberships-for-teams-team-fields-wrapper input[type="text"] {
	width: 100% !important;
	box-sizing: border-box !important;
	color: #4B4C4D !important;
	background-color: #ffffff!important;
}
p#team_owner_takes_seat_field {
    display: none;
}
/* "Number of Seats:" label takes full width to force a new row */
p.team-seat-count-label {
	width: 100% !important;
	flex-basis: 100% !important;
	margin: 0.25em 0 0 !important;
	font-size: 0.95em;
}

/* Quantity + button stay on same row (after the full-width label) */
form.variations_form .woocommerce-variation-add-to-cart .quantity {
	width: 80px !important;
	margin: 0 !important;
}

form.variations_form .woocommerce-variation-add-to-cart .quantity input {
	width: 100% !important;
	color: var(--caeps-text) !important;
	background-color: var(--caeps-white) !important;
	/* No right padding, so the browser's up/down spinner sits flush against
	   the right edge of the box instead of crowding the seat count. */
	padding-right: 0;
}

/* ── Other Membership Tiers Grid ── */

/* Constrain the section so 4 columns stay compact — without a cap the
   grid spans the full page width and each card grows oversized. */
.caeps-other-tiers {
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
}

.caeps-other-tiers ul.products.columns-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2em 1.5em;
}

.caeps-other-tiers ul.products.columns-4 li.product {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* ── WooCommerce Notice Links (product page) ── */

.woocommerce-error a,
.woocommerce-message a,
.woocommerce-info a,
ul.woocommerce-error li a {
	color: #153F67 !important;
	font-weight: 700;
	text-decoration: underline;
}

.woocommerce-error a:hover,
.woocommerce-message a:hover,
.woocommerce-info a:hover,
ul.woocommerce-error li a:hover {
	color: #5881AB !important;
}

/* ── Replace Membership Modal ── */

.caeps-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
}

.caeps-modal {
	background: var(--caeps-white);
	border-radius: 12px;
	max-width: 420px;
	width: 90%;
	padding: 1.75em;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.caeps-modal-header {
	font-size: 1.2em;
	font-weight: 700;
	color: var(--caeps-text);
	margin-bottom: 0.75em;
}

.caeps-modal-body p {
	font-size: 0.95em;
	color: var(--caeps-text-light);
	margin: 0 0 0.5em;
	line-height: 1.5;
}

.caeps-modal-actions {
	display: flex;
	gap: 0.75em;
	justify-content: flex-end;
	margin-top: 1.25em;
}

.caeps-modal-btn {
	padding: 0.6em 1.25em;
	border-radius: 8px;
	font-size: 0.9em;
	font-weight: 600;
	cursor: pointer;
	border: none;
	transition: background var(--caeps-transition), color var(--caeps-transition);
}

.caeps-modal-cancel {
	background: var(--caeps-bg);
	color: var(--caeps-text);
	border: 1px solid var(--caeps-border);
}

.caeps-modal-cancel:hover {
	background: var(--caeps-primary-light);
}

.caeps-modal-confirm {
	background: var(--caeps-primary);
	color: var(--caeps-white);
}

.caeps-modal-confirm:hover {
	opacity: 0.9;
}

/* ── Responsive ── */

@media (max-width: 900px) {
	.caeps-other-tiers ul.products.columns-4 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 600px) {
	.caeps-other-tiers ul.products.columns-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.caeps-toggle-btn {
		padding: 0.7em 0.5em;
	}

	.caeps-toggle-text {
		font-size: 0.85em;
	}

	.caeps-toggle-desc {
		font-size: 0.7em;
	}
}

/* ── Tier already in the cart ──
   class-shortcode.php prints the note after the Add to cart button and
   toggle-ui.js (bindInCartLock) disables the button. Put the note on its
   own line under the button. */
form.variations_form .woocommerce-variation-add-to-cart .caeps-in-cart-note {
	flex-basis: 100%;
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 1.5;
}

.caeps-in-cart-note a {
	font-weight: 700;
	text-decoration: underline;
}

form.variations_form .single_add_to_cart_button.caeps-in-cart-locked {
	cursor: not-allowed;
}