/* ============================================================
   BWL — Membership tabs
   Centred 40/900 title + age-group tabs above a light-blue
   (#D4F3FD) panel: the ACTIVE tab shares the panel fill and
   merges into it; inactive tabs are white with a cyan outline.
   Inside: white cyan-bordered tier cards — cyan highlight-bar
   name, price, pill badge, tagline, divider, navy-tick list
   with optional "i" tooltips, bold add-ons list, Join (fill) +
   Renew (outline) buttons and a terms link. 12/12 column.
   ============================================================ */

.bwl-mtabs {
	--bwl-navy: #00085e;
	--bwl-cyan: #00ccff;
	--bwl-blue: #d4f3fd;
	--bwl-content: 1600px;
	--bwl-gutter: 24px;

	padding: 60px 0;
	font-family: var(--bwl-font, Arial, Helvetica, sans-serif);
	color: var(--bwl-navy);
}

.bwl-mtabs__inner {
	max-width: var(--bwl-content);   /* 12/12 column */
	margin-inline: auto;
	padding-inline: var(--bwl-gutter);
}

.bwl-mtabs__title {
	margin: 0 0 60px;             /* TWEAK title → tabs gap */
	text-align: center;
	color: var(--bwl-navy);
	font-size: 40px;
	font-weight: 900;
	line-height: 40px;
	text-transform: uppercase;
}

/* --- Tabs: active merges into the panel below --- */
.bwl-mtabs__tabs {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 20px;                    /* TWEAK gap between tabs */
}
.bwl-mtabs__tab {
	min-width: 306px;             /* TWEAK tab width */
	padding: 30px 24px;
	border: 1px solid var(--bwl-cyan);
	border-bottom: 0;
	border-radius: 20px 20px 0 0;
	background: #ffffff;
	color: var(--bwl-navy);
	font-family: inherit;
	font-size: 20px;
	font-weight: 900;
	line-height: 26px;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.bwl-mtabs__tab[aria-selected="true"] {
	background: var(--bwl-blue);
	border-color: var(--bwl-blue);
	cursor: default;
}
.bwl-mtabs__tab:hover:not([aria-selected="true"]) { background: var(--bwl-blue); }

/* --- Panel --- */
.bwl-mtabs__panel {
	background: var(--bwl-blue);
	border-radius: 20px;
	padding: 56px 24px 50px;      /* TWEAK panel padding */
}
.bwl-mtabs__panel[hidden] { display: none; }

/* mobile-only accordion controls (age-group header + tier +/- circles) */
.bwl-mtabs__mtab { display: none; }
.bwl-mtabs__tieracc { display: none; }
.bwl-mtabs__pm-v { transition: opacity 0.15s ease; }
[aria-expanded="true"] > .bwl-mtabs__pm .bwl-mtabs__pm-v { opacity: 0; }   /* plus → minus */

.bwl-mtabs__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 26px;                    /* TWEAK gap between cards */
	align-items: stretch;
	max-width: 1250px;            /* two 612px cards, centred in the panel */
	margin-inline: auto;
}
.bwl-mtabs__grid--n1 { grid-template-columns: minmax(0, 1fr); max-width: 612px; }
.bwl-mtabs__grid--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* --- The card --- */
.bwl-mtabs__card {
	display: flex;
	flex-direction: column;
	padding: 41px 28px 20px;      /* TWEAK card padding */
	background: #ffffff;
	border: 1px solid var(--bwl-cyan);
	border-radius: 20px;
}

/* name on the cyan highlight bar */
.bwl-mtabs__name {
	margin: 0 0 20px;
	text-align: center;
}
.bwl-mtabs__hl {
	display: inline;
	padding: 2px 12px;
	background: var(--bwl-cyan);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	color: var(--bwl-navy);
	font-size: 40px;
	font-weight: 900;
	line-height: 45px;
	text-transform: uppercase;
}

.bwl-mtabs__price {
	margin: 0 0 20px;
	text-align: center;
	color: var(--bwl-navy);
	font-size: 40px;
	font-weight: 400;
	line-height: 36px;
}

/* "12 months" pill */
.bwl-mtabs__badge-row {
	margin: 0 0 20px;
	text-align: center;
}
.bwl-mtabs__badge {
	display: inline-block;
	padding: 3px 18px 2px;
	background: var(--bwl-cyan);
	border-radius: 50px;
	color: var(--bwl-navy);
	font-size: 12px;
	font-weight: 700;
	line-height: 26px;
	text-transform: uppercase;
}
/* badge-less card in a row where a sibling has one: reserve the space */
.bwl-mtabs__badge-row--ghost { visibility: hidden; }

.bwl-mtabs__tagline {
	margin: 0;
	text-align: center;
	color: var(--bwl-navy);
	font-size: 20px;
	font-weight: 400;
	line-height: 26px;
}

.bwl-mtabs__rule {
	width: 100%;
	height: 2px;
	margin: 30px 0 28px;          /* TWEAK divider gaps */
	border: 0;
	background: var(--bwl-cyan);
	border-radius: 1px;
}

/* --- Ticked benefit list --- */
.bwl-mtabs__items {
	list-style: none;
	margin: 0;
	padding: 0 0 0 3px;
	display: flex;
	flex-direction: column;
	gap: 17px;                    /* TWEAK gap between benefits */
}
.bwl-mtabs__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	color: var(--bwl-navy);
	font-size: 20px;
	font-weight: 400;
	line-height: 26px;
}
.bwl-mtabs__tick { flex: 0 0 auto; margin-top: 1px; }

/* optional "i" circle, pushed to the row's right edge — opens the popup */
.bwl-mtabs__info {
	flex: 0 0 auto;
	margin-left: auto;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: 1px solid var(--bwl-navy);
	border-radius: 50%;
	color: var(--bwl-navy);
	font-family: inherit;
	font-size: 20px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: opacity 0.15s ease;
}
.bwl-mtabs__info:hover { opacity: 0.7; }

/* --- Info popup: navy overlay + white dialog --- */
.bwl-mtabs__modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.bwl-mtabs__modal[hidden] { display: none; }
.bwl-mtabs__modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 8, 94, 0.65);
	cursor: pointer;
}
/* Desktop dialog: peach panel with the 12px orange offset shadow */
.bwl-mtabs__modal-box {
	position: relative;
	width: min(953px, 100%);
	max-height: min(680px, 90vh);
	overflow: auto;
	background: #fbede6;
	box-shadow: 12px 12px 0 #ff4a00;
	border-radius: 20px;
	padding: 34px 41px 38px;      /* TWEAK popup padding */
}
.bwl-mtabs__modal-close {
	position: absolute;
	top: 21px;
	right: 27px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	line-height: 0;
	transition: opacity 0.15s ease;
}
.bwl-mtabs__modal-close:hover { opacity: 0.7; }
.bwl-mtabs__x-m { display: none; }   /* bare X is mobile-only */
.bwl-mtabs__modal-title {
	margin: 0 60px 17px 0;
	color: var(--bwl-navy);
	font-size: 26px;
	font-weight: 700;
	line-height: 30px;
}
.bwl-mtabs__modal-body {
	color: var(--bwl-navy);
	font-size: 20px;
	font-weight: 400;
	line-height: 26px;
}
.bwl-mtabs__modal-body p { margin: 0 0 1em; color: var(--bwl-navy); }
.bwl-mtabs__modal-body p:last-child { margin-bottom: 0; }
.bwl-mtabs__modal-body a { color: var(--bwl-navy); text-decoration: underline; }
.bwl-mtabs__modal-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 30px;             /* TWEAK text → popup button gap */
	padding: 8px 20px;
	border-radius: 20px;
	background: var(--bwl-navy);
	color: #ffffff;
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	text-decoration: none;
	transition: opacity 0.15s ease;
}
.bwl-mtabs__modal-btn:hover { color: #ffffff; opacity: 0.9; }

/* --- Add ons --- */
.bwl-mtabs__addons-title {
	margin: 30px 0 8px;           /* TWEAK benefits → add-ons gap */
	color: var(--bwl-navy);
	font-size: 20px;
	font-weight: 700;
	line-height: 26px;
}
.bwl-mtabs__addons {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.bwl-mtabs__addon {
	color: var(--bwl-navy);
	font-size: 20px;
	font-weight: 400;
	line-height: 26px;
}

/* --- Footer: buttons + terms, pinned to the card bottom --- */
.bwl-mtabs__foot {
	margin-top: auto;             /* equal-height cards: footer row aligns */
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
.bwl-mtabs__btns {
	display: flex;
	gap: 19px;                    /* TWEAK gap between buttons */
	padding-top: 30px;            /* TWEAK add-ons → buttons gap */
}
.bwl-mtabs__btn {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 20px;
	border-radius: 20px;
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	text-decoration: none;
	transition: opacity 0.15s ease;
}
.bwl-mtabs__btn--fill {
	background: var(--bwl-navy);
	color: #ffffff;
}
.bwl-mtabs__btn--fill:hover { color: #ffffff; opacity: 0.9; }
.bwl-mtabs__btn--outline {
	color: var(--bwl-navy);
	box-shadow: inset 0 0 0 1px var(--bwl-navy);
}
.bwl-mtabs__btn--outline:hover { color: var(--bwl-navy); opacity: 0.7; }

.bwl-mtabs__terms {
	display: inline-block;
	align-self: flex-start;
	margin-top: 12px;             /* TWEAK buttons → terms gap */
	color: var(--bwl-navy);
	font-size: 14px;
	font-weight: 400;
	line-height: 26px;
	text-decoration: underline;
}
.bwl-mtabs__terms:hover { color: var(--bwl-navy); opacity: 0.7; }

.bwl-mtabs__placeholder { color: #6b7280; }

/* --- Row alignment (desktop): the cards share row tracks, so the divider,
   the benefit list and the buttons start at the SAME height in every card
   of the row, whatever the content lengths. Old browsers fall back to the
   flex layout above (bottom-pinned footer, unaligned divider). --- */
@media (min-width: 901px) {
	@supports (grid-template-rows: subgrid) {
		.bwl-mtabs__grid { row-gap: 0; }
		.bwl-mtabs__card {
			display: grid;
			grid-template-rows: subgrid;   /* [head][rule][body][foot] */
			grid-row: span 4;
			align-content: start;
		}
		.bwl-mtabs__foot { margin-top: 0; }
	}
}

/* --- Responsive --- */
@media (max-width: 1100px) {
	.bwl-mtabs__grid,
	.bwl-mtabs__grid--n3 { grid-template-columns: minmax(0, 1fr); max-width: 612px; }
}
/* --- Mobile (from the 363 Figma): full-bleed light-blue panel with the
   title inside; the desktop tab row becomes a stacked ACCORDION — each
   age group is a white card (collapsed = label + circle), holding its
   tiers in the mobile style: plain names, price + pill row, stacked
   Join/Renew, cyan dividers between tiers, and a per-tier +/- circle
   that collapses the benefits + add-ons. --- */
@media (max-width: 900px) {
	.bwl-mtabs {
		margin: 24px 0;              /* TWEAK gap around the tinted panel */
		padding: 37px 11px 35px;
		background: var(--bwl-blue);
		border-radius: 16px;
	}
	.bwl-mtabs__inner { max-width: none; padding-inline: 0; }
	.bwl-mtabs__title { font-size: 34px; line-height: 34px; margin-bottom: 35px; }

	/* desktop tab row off — each panel carries its own accordion header */
	.bwl-mtabs__tabs { display: none; }
	.bwl-mtabs__panel,
	.bwl-mtabs__panel[hidden] {
		display: block;
		background: #ffffff;
		border-radius: 16px;
		padding: 0;
	}
	.bwl-mtabs__panel + .bwl-mtabs__panel { margin-top: 20px; }

	.bwl-mtabs__mtab {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		width: 100%;
		padding: 20px 12px 20px 10px;
		border: 0;
		background: none;
		cursor: pointer;
		text-align: left;
		color: var(--bwl-navy);
		font-family: inherit;
		font-size: 20px;
		font-weight: 900;
		line-height: 22px;
		text-transform: uppercase;
	}
	.bwl-mtabs__grid,
	.bwl-mtabs__grid--n3 { display: none; max-width: none; padding-bottom: 8px; }
	.bwl-mtabs__panel.is-open .bwl-mtabs__grid { display: block; }

	/* tiers inside the white card, cyan lines between them */
	.bwl-mtabs__card {
		position: relative;
		display: block;
		background: none;
		border: 0;
		border-radius: 0;
		padding: 16px 10px 22px;     /* TWEAK tier padding */
	}
	.bwl-mtabs__card + .bwl-mtabs__card { border-top: 1px solid var(--bwl-cyan); padding-top: 26px; }

	.bwl-mtabs__tieracc {
		display: inline-flex;
		position: absolute;
		top: 12px;
		right: 12px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
		line-height: 0;
	}
	.bwl-mtabs__card + .bwl-mtabs__card .bwl-mtabs__tieracc { top: 22px; }
	.bwl-mtabs__body { display: none; padding-top: 20px; }
	.bwl-mtabs__card.is-open .bwl-mtabs__body { display: block; }

	/* plain left-aligned name (no highlight bar) */
	.bwl-mtabs__name { text-align: left; margin: 0 52px 28px 0; }
	.bwl-mtabs__hl {
		background: none;
		padding: 0;
		color: var(--bwl-navy);
		font-size: 26px;
		line-height: 30px;
	}

	/* price + pill on one row */
	.bwl-mtabs__price {
		display: inline-block;
		margin: 0;
		text-align: left;
		font-size: 26px;
		line-height: 31px;
	}
	.bwl-mtabs__badge-row {
		display: inline-block;
		margin: 0 0 0 15px;
		vertical-align: middle;
		text-align: left;
	}
	.bwl-mtabs__badge-row--ghost { display: none; }

	.bwl-mtabs__tagline { text-align: left; font-size: 16px; line-height: 20px; margin-top: 20px; }
	.bwl-mtabs__rule { display: none; }   /* tier separation = the cyan borders */

	.bwl-mtabs__items { gap: 9px; }
	.bwl-mtabs__item { font-size: 16px; line-height: 26px; gap: 16px; }

	.bwl-mtabs__addons-title { margin: 20px 0 0; font-size: 16px; line-height: 26px; }
	.bwl-mtabs__addon { font-size: 16px; line-height: 26px; }

	.bwl-mtabs__foot { margin-top: 0; padding-top: 30px; }
	.bwl-mtabs__btns { flex-direction: column; gap: 20px; padding-top: 0; }
	.bwl-mtabs__terms { font-size: 12px; margin-top: 10px; }

	/* mobile dialog: compact white panel, bare X */
	.bwl-mtabs__modal { padding: 12px; }
	.bwl-mtabs__modal-box {
		background: #ffffff;
		box-shadow: none;
		border-radius: 16px;
		padding: 20px 22px 24px;
	}
	.bwl-mtabs__modal-close { top: 16px; right: 16px; padding: 6px; }
	.bwl-mtabs__x-d { display: none; }
	.bwl-mtabs__x-m { display: block; }
	.bwl-mtabs__modal-title { margin: 0 30px 20px 0; }
	.bwl-mtabs__modal-body { font-size: 16px; line-height: 20px; }
	.bwl-mtabs__modal-btn { margin-top: 24px; }
}