/**
 * Benefit Bridge Pricing Tables — front end.
 *
 * Mirrors the table in the employer dashboard: a white card with a hairline
 * border, a flat navy header band (never a gradient — a 44px band that repeats
 * down the page reads as a smudge with one), 14px rows separated by a single
 * rule, and figures on tabular numerals so decimal points line up.
 *
 * The palette arrives as custom properties on .bbpt-wrap, set from the plugin
 * settings. The type face is deliberately inherited from the theme.
 */

.bbpt-wrap {
	--bbpt-border: #e5e7eb;
	--bbpt-text: #1a1c1e;
	--bbpt-text-2: #6c7278;
	--bbpt-text-3: #81878d;
	--bbpt-surface: #fff;
	--bbpt-radius: 12px;

	box-sizing: border-box;
	/* The width is DEFINITE (the configured px), not a percentage, and that is
	   load-bearing. A page builder may put the table in a column-flex container
	   with `align-items: center` — Elementor does this by default — where every
	   child shrinks to its own content width. A percentage then resolves against
	   that shrunken box, so the table rendered at its natural ~546px inside a
	   1220px section. A definite length instead feeds the ancestor's
	   shrink-to-fit calculation, so the container sizes to the table.

	   With no width configured the fallback is 100vw rather than 100%: in the
	   same shrink-wrapping container a percentage resolves against the shrunken
	   box and collapses again, while a viewport length is definite, so the
	   container takes all the room it has and `max-width: 100%` clamps us to it.
	   `max-width: 100%` is what keeps both cases inside narrow columns and
	   phones, and is why 100vw can never cause a horizontal scrollbar. */
	width: var( --bbpt-width, 100vw );
	max-width: 100%;
	margin-inline: auto;
	color: var( --bbpt-text );
	font-family: inherit;
	line-height: 1.45;
	text-align: start;
}

.bbpt-wrap *,
.bbpt-wrap *::before,
.bbpt-wrap *::after {
	box-sizing: inherit;
}

/* ---- heading ---- */

.bbpt-head {
	margin-bottom: 16px;
}

.bbpt-eyebrow {
	margin: 0;
	font-size: var( --bbpt-eyebrow-size, 11px );
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --bbpt-text-3 );
}

.bbpt-title {
	margin: 4px 0 0;
	/* Two explicit sizes rather than a fluid clamp, so both ends are settings.
	   The defaults are the clamp's old endpoints, so nothing moved by default. */
	font-size: var( --bbpt-title-size, 26px );
	font-weight: 700;
	line-height: 1.25;
	color: var( --bbpt-text );
}

.bbpt-subtitle {
	margin: 6px 0 0;
	font-size: var( --bbpt-subtitle-size, 15px );
	color: var( --bbpt-text-2 );
}

/* ---- table ---- */

.bbpt-frame {
	border: 1px solid var( --bbpt-border );
	border-radius: var( --bbpt-radius );
	background: var( --bbpt-surface );
	overflow: hidden; /* clips the navy band into the rounded corners */
}

.bbpt-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.bbpt-table {
	width: 100%;
	margin: 0;
	border: 0;
	/* `separate` rather than `collapse`, because a collapsed table ignores
	   border-radius on its cells and the highlighted row is a rounded band.
	   Spacing is zero and only `border-top` is ever set, so no doubled rules. */
	border-collapse: separate;
	border-spacing: 0;
	font-size: 14px;
	background: transparent;
}

/* Equal or custom widths. Automatic layout measures content and would override
   anything we ask for, so the widths only mean something once it is fixed. */
.bbpt-table--fixed {
	table-layout: fixed;
}

/* A fixed column cannot grow to fit, so a heading that must not wrap would
   simply spill out of it — at ~700px the SEPA heading overlapped the one beside
   it. Wrapping is the only sane behaviour here.

   Both classes are on the same element on purpose: `.bbpt-table th` below sets
   `nowrap` at equal specificity and comes later, so a single class would lose on
   source order alone. This wins wherever either rule is moved to. */
.bbpt-table.bbpt-table--fixed th {
	white-space: normal;
}

/* Lets the heading shrink to its wrapped width inside the inline-flex pair —
   a flex item will not go below its min-content width without this — and stops
   a single long word spilling past the column edge. */
.bbpt-table--fixed .bbpt-th-label {
	min-width: 0;
	/* Hyphenate first — a Greek heading broken at a syllable reads far better
	   than one guillotined mid-word. `break-word` stays as the fallback for
	   browsers with no dictionary for the page language. */
	-webkit-hyphens: auto;
	hyphens: auto;
	overflow-wrap: break-word;
}

.bbpt-table thead {
	background: var( --bbpt-head-bg, #001538 );
}

.bbpt-table th {
	padding: 17px 18px;
	border: 0;
	/* Each layout keeps its own default inside the fallback, so one setting can
	   serve both without a heading strip suddenly rendering at table size. */
	font-size: var( --bbpt-head-size, 15px );
	font-weight: 600;
	color: var( --bbpt-head-fg, #f3f6f9 );
	white-space: nowrap;
	background: transparent;
}

/* Icon + heading. inline-flex so the pair centres as one unit under whatever
   alignment the column is set to, rather than the icon hanging off the edge. */
.bbpt-th {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	vertical-align: middle;
	/* An inline-flex box sizes to max-content and will happily grow past its
	   cell, which is what let a long heading overlap the column beside it even
	   after the text was allowed to wrap. This is what actually constrains it. */
	max-width: 100%;
}

.bbpt-th-icon {
	width: var( --bbpt-icon, 20px );
	height: var( --bbpt-icon, 20px );
	/* An SVG from the media library arrives with no intrinsic size in some
	   themes; pinning both axes keeps the header band from jumping as it loads. */
	flex: 0 0 auto;
	object-fit: contain;
	display: block;
}

/* Takes the header's text colour, so an icon drawn for a light background is
   still visible on the dark band. Shape only — no multi-colour artwork. */
.bbpt-th-icon--tint {
	background-color: var( --bbpt-icon-color, currentColor );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.bbpt-table td {
	padding: 14px 18px;
	border: 0;
	border-top: 1px solid var( --bbpt-border );
	font-size: var( --bbpt-value-size, 14px );
	color: var( --bbpt-text-2 );
	font-variant-numeric: tabular-nums;
	vertical-align: middle;
	background: transparent;
}

/* The header band already separates the first row. */
.bbpt-table tbody tr:first-child td {
	border-top: 0;
}

.bbpt-table tbody tr:hover {
	background: rgba( 0, 0, 0, 0.015 );
}

.bbpt-table .bbpt-cell-first {
	color: var( --bbpt-text );
}

/* Body cells only. Scoped to `td` on purpose: the same class landing on a `th`
   would paint dark text onto the navy band and make the header unreadable. */
.bbpt-table td.bbpt-strong {
	font-weight: 600;
	color: var( --bbpt-text );
}

.bbpt-note {
	display: block;
	margin-top: 3px;
	font-size: var( --bbpt-small-size, 12px );
	font-weight: 400;
	color: var( --bbpt-text-3 );
}

/* A highlighted row reads as a rounded band laid across the table — the
   "recommended plan" treatment — rather than a full-bleed stripe.

   Painted on the cells, not the row: a `tr` cannot carry a border-radius that
   any engine honours. The first and last cell round their outer corners and the
   ring is drawn with inset shadows, each cell contributing only the edges it
   actually owns, so no seams appear between them. */
.bbpt-row-highlight td {
	background: var( --bbpt-highlight, transparent );
	box-shadow:
		inset 0 1px 0 0 var( --bbpt-highlight-ring, transparent ),
		inset 0 -1px 0 0 var( --bbpt-highlight-ring, transparent );
}

.bbpt-row-highlight td:first-child {
	border-start-start-radius: var( --bbpt-radius );
	border-end-start-radius: var( --bbpt-radius );
	box-shadow:
		inset 0 1px 0 0 var( --bbpt-highlight-ring, transparent ),
		inset 0 -1px 0 0 var( --bbpt-highlight-ring, transparent ),
		inset 1px 0 0 0 var( --bbpt-highlight-ring, transparent );
}

.bbpt-row-highlight td:last-child {
	border-start-end-radius: var( --bbpt-radius );
	border-end-end-radius: var( --bbpt-radius );
	box-shadow:
		inset 0 1px 0 0 var( --bbpt-highlight-ring, transparent ),
		inset 0 -1px 0 0 var( --bbpt-highlight-ring, transparent ),
		inset -1px 0 0 0 var( --bbpt-highlight-ring, transparent );
}

/* The row separators would otherwise cut straight through the band's rounded
   ends. The second rule kills the line belonging to the row underneath. */
.bbpt-row-highlight td,
.bbpt-row-highlight + tr td {
	border-top-color: transparent;
}

.bbpt-row-highlight:hover td {
	background: var( --bbpt-highlight, transparent );
}

.bbpt-al-left {
	text-align: left;
}

.bbpt-al-center {
	text-align: center;
}

.bbpt-al-right {
	text-align: right;
}

/* ---- footnotes ---- */

.bbpt-footnotes {
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.bbpt-footnotes li {
	position: relative;
	margin: 0 0 6px;
	padding-left: 18px;
	font-size: var( --bbpt-small-size, 12.5px );
	line-height: 1.5;
	color: var( --bbpt-text-2 );
}

.bbpt-footnotes li::before {
	content: "";
	position: absolute;
	top: 0.5em;
	left: 2px;
	width: 6px;
	height: 6px;
	transform: rotate( 45deg );
	background: var( --bbpt-accent, #0030a6 );
	border-radius: 1px;
}

.bbpt-wrap a {
	color: var( --bbpt-accent, #0030a6 );
}

/* ---- narrow screens ----
   Below 600px a four-column price table cannot be read sideways, so each row
   becomes its own little card and every value is labelled by its column. */

@media ( max-width: 600px ) {

	.bbpt-eyebrow {
		font-size: var( --bbpt-eyebrow-size-m, 11px );
	}

	.bbpt-title {
		font-size: var( --bbpt-title-size-m, 20px );
	}

	.bbpt-subtitle {
		font-size: var( --bbpt-subtitle-size-m, 14px );
	}

	.bbpt-table td {
		font-size: var( --bbpt-value-size-m, var( --bbpt-value-size, 14px ) );
	}

	.bbpt-note,
	.bbpt-sub,
	.bbpt-footnotes li {
		font-size: var( --bbpt-small-size-m, var( --bbpt-small-size, 12px ) );
	}

	.bbpt-frame {
		border: 0;
		border-radius: 0;
		background: transparent;
		overflow: visible;
	}

	/* The stacked layout turns the table into blocks, where a column group has
	   nothing to size; hiding it avoids an empty box in some engines. */
	.bbpt-table colgroup {
		display: none;
	}

	/* Stacked, each cell is its own line, so the per-cell ring that keeps the
	   desktop band seamless turns into hairlines through the middle of the
	   card. Here the row IS a block, so it can carry one ring around the whole
	   thing — which is what "highlighted" should mean on a phone. */
	.bbpt-row-highlight td,
	.bbpt-row-highlight td:first-child,
	.bbpt-row-highlight td:last-child {
		box-shadow: none;
		border-radius: 0;
	}

	.bbpt-row-highlight {
		box-shadow: 0 0 0 2px var( --bbpt-highlight-ring, transparent );
	}

	.bbpt-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect( 1px, 1px, 1px, 1px );
		clip-path: inset( 50% );
		white-space: nowrap;
	}

	.bbpt-table,
	.bbpt-table tbody,
	.bbpt-table tr,
	.bbpt-table td {
		display: block;
		width: auto;
	}

	.bbpt-table tr {
		margin-bottom: 10px;
		border: 1px solid var( --bbpt-border );
		border-radius: var( --bbpt-radius );
		background: var( --bbpt-surface );
		overflow: hidden;
	}

	.bbpt-table td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 16px;
		padding: 10px 16px;
		border-top: 1px solid var( --bbpt-border );
		text-align: right;
	}

	.bbpt-table td::before {
		content: attr( data-label );
		flex: 0 1 auto;
		font-size: 12px;
		font-weight: 500;
		color: var( --bbpt-text-3 );
		text-align: left;
	}

	/* The first cell is the row's name: it becomes the card header. */
	.bbpt-table td.bbpt-cell-first {
		display: block;
		padding: 12px 16px;
		border-top: 0;
		text-align: left;
		background: var( --bbpt-head-bg, #001538 );
		color: var( --bbpt-head-fg, #f3f6f9 );
		font-weight: 600;
	}

	.bbpt-table td.bbpt-cell-first::before {
		display: none;
	}

	.bbpt-table td.bbpt-cell-first .bbpt-note {
		color: inherit;
		opacity: 0.75;
	}
}


/* ==========================================================================
   Cards layout — one rounded card per row, a heading strip above them.

   One grid template is written inline on the strip and on every card, so the
   columns line up without either knowing about the other. Everything else here
   is presentation.
   ========================================================================== */

.bbpt-wrap--cards {
	--bbpt-card-rail: 56px;
	--bbpt-card-radius: 14px;
}

/* Visually hidden, still read aloud. The plugin defines this itself rather than
   borrowing the theme's `.screen-reader-text` — a theme that does not ship one
   printed the plan name inside the arrow button. */
.bbpt-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

.bbpt-cards {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bbpt-cards-head,
.bbpt-card {
	display: grid;
	align-items: center;
	column-gap: 16px;
}

.bbpt-cards-head {
	padding: 0 20px 2px;
	font-size: var( --bbpt-head-size, 11px );
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --bbpt-text-3 );
}

.bbpt-ch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 0;
}

.bbpt-ch.bbpt-al-left {
	justify-content: flex-start;
}

.bbpt-ch.bbpt-al-right {
	justify-content: flex-end;
}

.bbpt-info {
	display: inline-flex;
	width: 14px;
	height: 14px;
	color: var( --bbpt-text-3 );
	cursor: help;
}

.bbpt-info svg {
	width: 100%;
	height: 100%;
}

.bbpt-card {
	padding: 16px 20px;
	background: var( --bbpt-surface );
	border: 1px solid transparent;
	border-radius: var( --bbpt-card-radius );
	box-shadow: 0 1px 2px rgba( 16, 24, 40, 0.04 ), 0 8px 20px rgba( 16, 24, 40, 0.05 );
}

.bbpt-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var( --bbpt-highlight-solid, var( --bbpt-accent ) );
}

.bbpt-card-icon .bbpt-th-icon {
	width: 28px;
	height: 28px;
}

.bbpt-card-name {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.bbpt-card-title {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.bbpt-name {
	font-size: var( --bbpt-name-size, 17px );
	font-weight: 700;
	color: var( --bbpt-text );
}

.bbpt-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	background: var( --bbpt-highlight-solid, var( --bbpt-accent ) );
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.bbpt-card-val {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
	/* The hairline between value groups. A pseudo-element rather than a border
	   so it can stop short of the card's padding, as the design has it. */
	position: relative;
}

.bbpt-card-val::before {
	content: "";
	position: absolute;
	inset-inline-start: -8px;
	top: 50%;
	transform: translateY( -50% );
	width: 1px;
	height: 34px;
	background: var( --bbpt-border );
}

.bbpt-card-val .bbpt-cell {
	font-size: var( --bbpt-value-size, 19px );
	font-weight: 700;
	color: var( --bbpt-text );
	font-variant-numeric: tabular-nums;
}

.bbpt-sub {
	font-size: var( --bbpt-small-size, 12px );
	color: var( --bbpt-text-3 );
}

.bbpt-card-val.bbpt-al-center {
	text-align: center;
	align-items: center;
}

.bbpt-card-val.bbpt-al-right {
	text-align: right;
	align-items: flex-end;
}

.bbpt-card-val.bbpt-al-left {
	text-align: left;
	align-items: flex-start;
}

.bbpt-card-go {
	display: flex;
	justify-content: flex-end;
}

.bbpt-go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 999px;
	background: var( --bbpt-surface-muted, #f2f4f7 );
	color: var( --bbpt-text );
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.bbpt-go svg {
	width: 18px;
	height: 18px;
}

.bbpt-go:hover,
.bbpt-go:focus-visible {
	background: var( --bbpt-highlight-solid, var( --bbpt-accent ) );
	color: #fff;
	transform: translateX( 2px );
}

/* The recommended row. */
.bbpt-card--highlight {
	background: var( --bbpt-highlight );
	border-color: var( --bbpt-highlight-ring );
}

.bbpt-card--highlight .bbpt-go {
	background: var( --bbpt-highlight-solid, var( --bbpt-accent ) );
	color: #fff;
}

.bbpt-card--highlight .bbpt-card-val::before {
	background: var( --bbpt-highlight-ring );
	opacity: 0.5;
}

@media ( max-width: 760px ) {

	/* Inline styles carry the grid template, so overriding it needs
	   `!important` — the one place in this file that does. */
	.bbpt-cards-head {
		display: none;
	}

	.bbpt-card {
		grid-template-columns: var( --bbpt-card-rail ) 1fr !important;
		row-gap: 10px;
		padding: 16px;
	}

	.bbpt-card-name {
		grid-column: 2;
	}

	.bbpt-card-icon {
		grid-row: 1;
	}

	/* Each value becomes a labelled line across the whole card. */
	.bbpt-card-val {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: baseline;
		justify-content: space-between;
		gap: 12px;
		text-align: right;
	}

	.bbpt-card-val::before {
		content: none;
	}

	.bbpt-card-val::after {
		content: attr( data-label );
		order: -1;
		/* Pushes the value and its sub-label together against the right edge,
		   instead of spreading all three evenly and leaving the figure adrift
		   in the middle of the row. */
		margin-inline-end: auto;
		font-size: 12px;
		font-weight: 500;
		color: var( --bbpt-text-3 );
		text-align: left;
	}

	.bbpt-card-val .bbpt-cell {
		/* Falls back through the desktop setting before the built-in 16px, so a
		   size somebody typed is not quietly discarded on a narrow screen. */
		font-size: var( --bbpt-value-size-m, var( --bbpt-value-size, 16px ) );
		order: 1;
	}

	.bbpt-name {
		font-size: var( --bbpt-name-size-m, var( --bbpt-name-size, 17px ) );
	}

	.bbpt-card-val::after {
		font-size: var( --bbpt-small-size-m, var( --bbpt-small-size, 12px ) );
	}

	.bbpt-sub {
		order: 2;
	}

	.bbpt-card-go {
		grid-column: 1 / -1;
		justify-content: stretch;
	}

	.bbpt-go {
		width: 100%;
		border-radius: 10px;
	}
}