/* TBFS insurance flow wizard. Uses theme palette variables with fallbacks
   so it degrades gracefully outside the tbfs-theme.

   SCOPING RULE (2026-08-21, staging move): every selector in this file is
   prefixed with :is(#tbfs-flow,.tbfs-flow-scope) so the wizard's styles
   outrank any host theme's global button/input rules (Astra + Elementor on
   the legacy site paint every <button> white-on-brand with their own
   padding, which left the state chips unreadable). The :is() carries id
   specificity. Elements the wizard appends to <body> (style dock, chart
   modal, consent dialog, sending overlay) get the tbfs-flow-scope class
   from flow.js. Keep new rules prefixed the same way; body-level rules
   (body.tbfs-flow-docked ...) and @keyframes stay unscoped.

   PARTNER COLOURS: neutral colours read --flow-surface (cards, inputs),
   --flow-border, --flow-on-color (text on coral buttons), --flow-on-accent
   (text on teal fills) and --flow-button-hover, each with today's value as
   its fallback. Nothing defines them on our own pages; a hosted partner
   page sets them on <body> (Partners::css). Use them for new neutral
   colours too. */

/* The theme and this sheet set explicit display values on cards, which
   would otherwise override the UA's [hidden] rule — the search filter
   relies on the hidden attribute actually hiding things. */
:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow [hidden] {
	display: none !important;
}

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow {
	--flow-teal: var(--wp--preset--color--teal, #84cfc9);
	--flow-teal-dark: var(--wp--preset--color--teal-dark, #2a7670);
	--flow-teal-light: var(--wp--preset--color--teal-light, #e9f7f6);
	--flow-coral: var(--wp--preset--color--coral, #f37868);
	--flow-muted: var(--wp--preset--color--muted, #6f7a80);
	box-sizing: border-box;
	max-width: 860px;
	margin: 0 auto;
	padding: 0 1rem;
	/* Paint above the scroll-reveal sections that follow, so the doctor
	   typeahead dropdown is never covered by later page content. Stays
	   below the theme header (z-index 50). */
	position: relative;
	z-index: 5;
}

/* Sticky wizard bar (progress + back/next). JS sets `top` to the sticky
   header's height so the bar docks right beneath it. */

/* Sandbox notice (Settings > Partner API > Sandbox banner): loud on
   purpose, sits above the sticky bar, never shown in production. */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-flow__sandbox {
	margin: 0 0 1rem;
	padding: 0.75rem 1rem;
	border: 2px solid #b45309;
	border-radius: 10px;
	background: #fffbeb;
	color: #78350f;
	font-size: 1rem;
	line-height: 1.5;
}
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-flow__sandbox strong {
	color: #92400e;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-flow__bar {
	position: sticky;
	top: 64px;
	z-index: 40;
	display: flex;
	align-items: center;
	gap: 0.9rem;
	background: var(--flow-surface, #fff);
	border: 1px solid var(--flow-border, #e6ecea);
	border-radius: 14px;
	box-shadow: 0 4px 14px rgba(35, 60, 57, 0.07);
	padding: 0.55rem 0.9rem;
	margin: 0 0 1.6rem;
}

/* Docked = stuck under the site header (JS toggles the class). A floating
   rounded card butting against the header reads broken, so the bar becomes
   a flat full-bleed strip: visually a second header row. The paddings keep
   the controls on the wizard's 828px rail. */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-flow__bar.is-docked {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-left: max(0.9rem, calc(50vw - 414px));
	padding-right: max(0.9rem, calc(50vw - 414px));
	border: 0;
	border-bottom: 1px solid var(--flow-border, #e6ecea);
	border-radius: 0;
	box-shadow: 0 10px 22px rgba(35, 60, 57, 0.05);
}

/* While the bar is docked, the header's scroll shadow would fall on it and
   draw a dark seam between the two white strips; the bar's own bottom
   shadow takes over as the chrome's edge. !important because load order
   between this sheet and the theme's isn't guaranteed. */
body.tbfs-flow-docked .tbfs-header {
	box-shadow: none !important;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-flow__bar-mid {
	flex: 1;
	min-width: 0;
	display: grid;
	gap: 0.3rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-flow__bar-label {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--flow-teal-dark);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-flow__bar-track {
	display: block;
	height: 6px;
	border-radius: 999px;
	background: var(--flow-border, #eef2f1);
	overflow: hidden;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-flow__bar-fill {
	display: block;
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--flow-teal), var(--flow-teal-dark));
	transition: width 0.3s ease;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-flow__bar-btn {
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	padding: 0.45rem 1rem;
	white-space: nowrap;
	flex: none;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-flow__bar-btn--back {
	background: transparent;
	color: var(--flow-muted);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-flow__bar-btn--back:hover {
	color: var(--flow-teal-dark);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-flow__bar-btn--next {
	background: var(--flow-coral);
	color: var(--flow-on-color, #fff);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-flow__bar-btn--next:hover {
	background: var(--flow-button-hover, #e0604f);
}

/* Panels */

/* Step transitions: the incoming panel slides in from the side you're
   heading toward (forward = from the right, back = from the left). */
@keyframes tbfs-slide-fwd {
	from { opacity: 0; transform: translateX(28px); }
	to { opacity: 1; transform: none; }
}

@keyframes tbfs-slide-back {
	from { opacity: 0; transform: translateX(-28px); }
	to { opacity: 1; transform: none; }
}

/* The panel is held at its outgoing height while the next step loads
   (see setProgress), then eases down to the new content's height. */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-flow__step {
	transition: min-height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-flow__step.is-slide-fwd {
	animation: tbfs-slide-fwd 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-flow__step.is-slide-back {
	animation: tbfs-slide-back 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-flow__step.is-slide-fwd, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-flow__step.is-slide-back {
		animation: none;
	}
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-flow__step h2 {
	text-align: center;
	margin-bottom: 0.4rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-flow__hint {
	text-align: center;
	color: var(--flow-muted);
	margin: 0 0 1.6rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-flow__loading {
	text-align: center;
	color: var(--flow-muted);
	padding: 2rem 0;
}

/* Choice grids (states, payers) */

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-choice-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 0.7rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-choice {
	display: block;
	width: 100%;
	padding: 0.9rem 1rem;
	border: 2px solid var(--flow-border, #e6ecea);
	border-radius: 12px;
	background: var(--flow-surface, #fff);
	font: inherit;
	font-weight: 600;
	color: inherit;
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-choice:hover, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-choice:focus-visible {
	border-color: var(--flow-teal);
	background: var(--flow-teal-light);
}

/* Pump cards */

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 1rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump {
	position: relative; /* anchor for the featured badge */
	border: 2px solid var(--flow-border, #e6ecea);
	border-radius: 16px;
	background: var(--flow-surface, #fff);
	padding: 1.3rem;
	text-align: center;
	cursor: pointer;
	font: inherit;
	color: inherit; /* iOS buttons default to blue text */
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

/* Featured merchandising badge: admin-set text, icon and color, on its own
   centered line above the type badge so the two never overlap. Outlined so it
   never reads as another solid type badge; JS sets text and border to the
   admin color, darkened as needed for contrast on white. */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump__badge {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	width: fit-content;
	max-width: 100%;
	white-space: nowrap;
	margin: 0 auto 0.45rem;
	border: 1.5px solid var(--flow-teal-dark);
	border-radius: 999px;
	background: var(--flow-surface, #fff);
	color: var(--flow-teal-dark);
	padding: 0.14rem 0.65rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump__badge-icon {
	font-size: 0.85em;
	line-height: 1;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump:hover, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump:focus-visible {
	border-color: var(--flow-teal);
	box-shadow: 0 6px 18px rgba(63, 158, 151, 0.15);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump__img {
	width: 100%;
	height: 150px;
	object-fit: contain;
	margin-bottom: 0.7rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump__name {
	font-weight: 700;
	font-size: 1.05rem;
	margin: 0 0 0.5rem;
}

/* Type badge: one hue per pump type, kept away from the teal/coral the
   price badges use so the two reads don't blur together. Text colors are
   picked for WCAG AA on their pastel backgrounds. */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump__type {
	display: inline-block;
	border-radius: 999px;
	padding: 0.18rem 0.7rem;
	margin-bottom: 0.6rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	background: #eef1f4;
	color: #4a5560; /* Standard */
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump__type[data-t="Portable"] {
	background: #fdf3e0;
	color: #7a5410;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump__type[data-t="Wearable"] {
	background: #e4f2fb;
	color: #1d5e8a;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump__price {
	display: inline-block;
	border-radius: 999px;
	padding: 0.25rem 0.9rem;
	font-size: 0.85rem;
	font-weight: 700;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump__price--covered {
	background: var(--flow-teal-light);
	color: var(--flow-teal-dark);
}

/* Neutral, not coral: an upgrade is a choice, not a warning. The word
   "upgrade" carries the meaning; the hairline keeps the pill visible on
   the white card. */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump__price--upgrade {
	background: var(--wp--preset--color--cream, #fdf8f4);
	color: var(--wp--preset--color--contrast, #3a3a3a);
	box-shadow: inset 0 0 0 1px #ddd3cc;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump-grid__note {
	text-align: center;
	color: var(--wp--preset--color--contrast, #3a3a3a);
	font-size: 0.92rem;
	margin: 0 0 1rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-bags__pump {
	text-align: center;
	color: var(--wp--preset--color--contrast, #3a3a3a);
	margin: 0.3rem 0 0.9rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-bags__cost {
	white-space: nowrap;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump__price--verify {
	background: #f3f0e9;
	color: #7a6f52;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump.is-selected, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-choice.is-selected {
	border-color: var(--flow-teal-dark);
	background: var(--flow-teal-light);
}

/* Unavailable pump: the plan cannot carry this pump's upgrade fee (API price
   -1, partner-api-only issue 07). Dimmed and inert, but the name and the
   note stay readable (AA on the muted background) so the shopper learns why
   rather than wondering whether the card is broken. */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump--unavailable,
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump--unavailable:hover {
	border-style: dashed;
	border-color: var(--flow-border, #dde3e1);
	background: #f7f9f8;
	box-shadow: none;
	cursor: not-allowed;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump--unavailable .tbfs-pump__img,
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump--unavailable .tbfs-pump__type,
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump--unavailable .tbfs-pump__badge {
	opacity: 0.45;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump--unavailable .tbfs-pump__name {
	color: #5f6b6a;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump__note {
	margin: 0;
	font-size: 0.85rem;
	line-height: 1.4;
	color: #5f6b6a;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump-cell {
	position: relative; /* anchor for the Details button */
	display: flex;
	flex-direction: column;
}

/* Room at the foot of the card for the Details button, which sits over it
   (beside it in the DOM, since the card is a button). */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump-cell > .tbfs-pump {
	flex: 1;
	padding-bottom: 3.4rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump__details {
	position: absolute;
	left: 50%;
	bottom: 0.45rem;
	transform: translateX(-50%);
	min-height: 44px;
	min-width: 44px;
	padding: 0 1rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--flow-teal-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	touch-action: manipulation;
	transition: background 0.12s ease;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump__details:hover {
	background: var(--flow-teal-light);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump__details:focus-visible {
	outline: 2px solid var(--flow-teal-dark);
	outline-offset: 2px;
}

/* Compression product cards */

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-comp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1rem;
	margin-bottom: 1.2rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-comp {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	border: 2px solid var(--flow-border, #e6ecea);
	border-radius: 16px;
	background: var(--flow-surface, #fff);
	padding: 1.2rem 1rem 1rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-comp__img {
	width: 100%;
	height: 130px;
	object-fit: contain;
	margin-bottom: 0.7rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-comp__name {
	font-weight: 700;
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--flow-border, #cfdedd);
	text-underline-offset: 3px;
	margin-bottom: 0.7rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-comp__name:hover {
	color: var(--flow-teal-dark);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-comp .tbfs-field {
	width: 100%;
	margin-bottom: 0.5rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-comp__chart {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--flow-teal-dark);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	font-family: inherit;
}

/* Size-chart popup (block lifted from the sizing page, so the table is
   styled here; the theme's sizing-page CSS isn't loaded on this page). */
:is(#tbfs-flow,.tbfs-flow-scope).tbfs-chart-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	background: rgba(35, 31, 29, 0.55);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-chart-modal__card {
	position: relative;
	background: var(--flow-surface, #fff);
	border-radius: 16px;
	max-width: 560px;
	width: 100%;
	max-height: 82vh;
	overflow-y: auto;
	padding: 1.4rem 1.4rem 1.2rem;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-chart-modal__close {
	position: absolute;
	top: 0.6rem;
	right: 0.7rem;
	border: 0;
	background: none;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--flow-muted);
	cursor: pointer;
	padding: 0.2rem 0.4rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-chart-modal__close:hover {
	color: inherit;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-chart-modal__body h3 {
	margin: 0 0 0.8rem;
	font-size: 1.15rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-chart-modal__body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-chart-modal__body th, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-chart-modal__body td {
	padding: 0.5rem 0.6rem;
	text-align: left;
	border-bottom: 1px solid var(--flow-border, #eee7e2);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-chart-modal__body thead th {
	color: var(--flow-teal-dark);
	background: var(--flow-teal-light);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-chart-modal__body tbody th {
	font-weight: 700;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-chart-modal__body figure {
	margin: 0;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-chart-modal__body figcaption {
	margin-top: 0.7rem;
	font-size: 0.82rem;
	color: var(--flow-muted);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-chart-modal__link {
	display: inline-block;
	margin-top: 0.9rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--flow-teal-dark);
}

/* "May also qualify" (letter-of-necessity) block: the note and the brace
   card read as one unit, set apart from the always-offered items. */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-comp-lomn {
	border-radius: 16px;
	background: var(--flow-coral-soft, #fdeae7);
	padding: 1rem;
	margin-bottom: 1.2rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-comp-lomn__note {
	margin: 0 0 0.8rem;
	font-size: 0.92rem;
	line-height: 1.5;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-comp-lomn .tbfs-comp {
	max-width: 340px;
	margin: 0 auto;
}

/* Required marks + inline validation */

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-req {
	color: var(--flow-coral-dark, #e0604f);
	font-weight: 700;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-intake__req-note {
	margin: 0 0 1rem;
	font-size: 0.82rem;
	color: var(--flow-muted);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-field.is-invalid input, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-field.is-invalid select {
	border-color: #d9534f;
	box-shadow: 0 0 0 3px rgba(217, 83, 79, 0.12);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-field__error {
	margin: 0.35rem 0 0;
	font-size: 0.84rem;
	font-weight: 600;
	color: #b3382f;
}

:is(#tbfs-flow,.tbfs-flow-scope) fieldset.tbfs-field.is-invalid legend {
	color: #b3382f;
}

/* Toggle switch (policy holder). The theme forces label { display: block }
   and stretches checkbox inputs, so every rule here carries the .tbfs-flow
   prefix and pins its own display/size. */

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow label.tbfs-switch {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.9rem;
	cursor: pointer;
	font-weight: 600;
	border: 2px solid var(--flow-border, #e6ecea);
	border-radius: 14px;
	background: var(--flow-surface, #fff);
	padding: 0.85rem 1.1rem;
	transition: border-color 0.12s ease, background 0.12s ease;
}

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow label.tbfs-switch:hover {
	border-color: var(--flow-teal);
}

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow label.tbfs-switch:has(.tbfs-switch__input:checked) {
	border-color: var(--flow-teal-dark);
	background: var(--flow-teal-light);
}

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow .tbfs-switch__input {
	position: absolute !important;
	opacity: 0;
	width: 1px !important;
	height: 1px !important;
	margin: 0;
	pointer-events: none;
}

/* Text sits left, pill sits right (DOM order is input, track, text). */
:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow .tbfs-switch > span:last-child {
	order: -1;
	flex: 1;
}

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow .tbfs-switch__track {
	display: inline-block;
	flex: 0 0 auto;
	width: 50px;
	height: 28px;
	border-radius: 999px;
	background: var(--flow-border, #d5dedd);
	position: relative;
	transition: background 0.18s ease;
}

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow .tbfs-switch__track::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--flow-surface, #fff);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1);
}

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow .tbfs-switch__input:checked ~ .tbfs-switch__track {
	background: var(--flow-teal-dark);
}

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow .tbfs-switch__input:checked ~ .tbfs-switch__track::after {
	transform: translateX(22px);
}

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow .tbfs-switch__input:focus-visible ~ .tbfs-switch__track {
	outline: 2px solid var(--flow-teal-dark);
	outline-offset: 2px;
}

/* Authorizations card: compact list, accepted one by one in the popup */

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-agree {
	border: 2px solid var(--flow-border, #e6ecea);
	border-radius: 16px;
	padding: 1.1rem 1.3rem 1.2rem;
	background: var(--flow-surface, #fff);
	margin: 1.6rem 0;
	transition: border-color 0.15s ease;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-agree.is-complete {
	border-color: var(--flow-teal-dark);
	background: #fbfffe;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-agree__real {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-agree__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.8rem;
	margin-bottom: 0.65rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-agree__head strong {
	font-size: 1.02rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-agree__status {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--flow-muted);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-agree.is-complete .tbfs-agree__status {
	color: var(--flow-teal-dark);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-agree__list {
	list-style: none;
	margin: 0 0 0.75rem;
	padding: 0;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-agree__list li {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.28rem 0;
	font-size: 0.92rem;
	color: var(--flow-muted);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-agree__list li.is-accepted {
	color: inherit;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-agree__mark {
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 2px solid var(--flow-border, #d5dedd);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--flow-on-accent, #fff);
	transition: background 0.15s ease, border-color 0.15s ease;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-agree__list li.is-accepted .tbfs-agree__mark {
	background: var(--flow-teal-dark);
	border-color: var(--flow-teal-dark);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-agree__btn {
	border: 2px solid var(--flow-coral);
	border-radius: 999px;
	background: var(--flow-coral);
	color: var(--flow-on-color, #fff);
	font: inherit;
	font-size: 0.92rem;
	font-weight: 600;
	padding: 0.5rem 1.3rem;
	cursor: pointer;
	transition: filter 0.12s ease, background 0.12s ease, color 0.12s ease;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-agree__btn:hover {
	filter: brightness(1.06);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-agree.is-complete .tbfs-agree__btn {
	background: var(--flow-surface, #fff);
	color: var(--flow-teal-dark);
	border-color: var(--flow-teal-dark);
}

/* Consent popup: one authorization at a time */

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-modal, :is(#tbfs-flow,.tbfs-flow-scope).tbfs-modal * {
	box-sizing: border-box;
}

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-modal {
	/* Lives on document.body, outside .tbfs-flow: re-declare the palette. */
	--flow-teal: var(--wp--preset--color--teal, #84cfc9);
	--flow-teal-dark: var(--wp--preset--color--teal-dark, #2a7670);
	--flow-teal-light: var(--wp--preset--color--teal-light, #e9f7f6);
	--flow-coral: var(--wp--preset--color--coral, #f37868);
	--flow-muted: var(--wp--preset--color--muted, #6f7a80);
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: 1rem;
	background: rgba(35, 60, 57, 0.45);
	animation: tbfs-modal-in 0.18s ease;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-modal__card {
	position: relative;
	/* Viewport-based cap so the card keeps a gutter on phones even if a
	   theme rule eats the overlay's padding. */
	width: min(560px, calc(100vw - 2.4rem));
	max-height: min(80vh, 640px);
	overflow-y: auto;
	background: var(--flow-surface, #fff);
	border-radius: 18px;
	padding: 1.6rem 1.7rem 1.5rem;
	box-shadow: 0 24px 60px rgba(35, 60, 57, 0.35);
	animation: tbfs-modal-card 0.22s cubic-bezier(0.34, 1.3, 0.64, 1);
}

@media (max-width: 600px) {
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-modal__card {
		padding: 1.4rem 1.2rem 1.3rem;
	}
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-modal__card:focus {
	outline: none;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-modal__close {
	position: absolute;
	top: 0.7rem;
	right: 0.9rem;
	border: 0;
	background: transparent;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--flow-muted);
	cursor: pointer;
	padding: 0.2rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-modal__eyebrow {
	display: block;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--flow-coral);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-modal__dots {
	display: flex;
	gap: 0.35rem;
	margin: 0.5rem 0 0.2rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-modal__dots i {
	width: 26px;
	height: 5px;
	border-radius: 999px;
	background: var(--flow-border, #e6ecea);
	transition: background 0.15s ease;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-modal__dots i.is-done {
	background: var(--flow-teal);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-modal__dots i.is-current {
	background: var(--flow-coral);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-modal__card h3 {
	margin: 0.5rem 0 0.5rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-modal__body {
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--flow-muted);
	margin: 0 0 1.2rem;
}

/* Consent card acknowledgement: the checkbox the visitor must tick before
   "I agree" enables (one_pump). */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-modal__ack {
	display: flex;
	gap: 0.7rem;
	align-items: flex-start;
	font-size: 0.92rem;
	line-height: 1.55;
	margin: 0 0 1.2rem;
	cursor: pointer;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-modal__ack input {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.15rem 0 0;
	accent-color: var(--flow-teal);
}

:is(#tbfs-flow,.tbfs-flow-scope) :is(.tbfs-radio-group__hint, .tbfs-field__hint) {
	margin: -0.2rem 0 0.5rem;
	font-size: 0.88rem;
	color: var(--flow-muted);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-modal__actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.8rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-modal__actions .tbfs-btn {
	margin-left: auto;
}

@keyframes tbfs-modal-in {
	from { opacity: 0; }
}

@keyframes tbfs-modal-card {
	from { opacity: 0; transform: translateY(16px) scale(0.97); }
}

@media (prefers-reduced-motion: reduce) {
	:is(#tbfs-flow,.tbfs-flow-scope).tbfs-modal, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-modal__card {
		animation: none;
	}
}

/* Pump details popup: a .tbfs-modal card with a fixed close button, a
   scrolling middle (pump header + the product page's Description) and the
   action row pinned at the foot. Full screen on phones. */

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details {
	display: flex;
	flex-direction: column;
	width: min(860px, calc(100vw - 2.4rem));
	max-height: min(88vh, 900px);
	overflow: hidden;
	padding: 0;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__close {
	z-index: 2; /* above the sticky tab row */
	top: 0.5rem;
	right: 0.5rem;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 999px;
	background: var(--flow-surface, #fff);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__close:hover {
	color: var(--wp--preset--color--contrast, #1f2a2a);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__close:focus-visible,
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__actions .tbfs-btn:focus-visible {
	outline: 2px solid var(--flow-teal-dark);
	outline-offset: 2px;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__scroll {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1.8rem 2rem 2rem;
	position: relative; /* offsetParent for the tab row's scroll reset */
}

/* A focused link or panel never hides under the row. (Not scroll-padding:
   that would also scroll the stuck tabs themselves back into the clear.) */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__scroll.has-tabs .tbfs-details__body :is(a[href], [tabindex]) {
	scroll-margin-top: 4.5rem;
}

/* Tab row (more than one tab): the product page's quiet underline nav,
   sticking to the top of the scrolling area so it stays in reach while a
   long tab scrolls. The bar runs edge to edge on white so text passes
   under it and keeps its right end clear of the close button; the tab
   list inside scrolls sideways when the tabs don't fit. */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__tabbar {
	position: sticky;
	top: -1.8rem; /* the scroll area's top padding: stick flush to its edge */
	z-index: 1;
	margin: 0 -2rem 1.6rem;
	padding: 0.4rem 3.6rem 0 2rem;
	background: var(--flow-surface, #fff);
	border-bottom: 1px solid var(--wp--custom--color--border-cool, #dfe7e6);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__tabs {
	position: relative; /* tabs' offsetLeft is within the list, for keeping the chosen one in view */
	display: flex;
	gap: 1.6rem;
	overflow-x: auto;
	scrollbar-width: none;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__tabs::-webkit-scrollbar {
	display: none;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__tabs [role="tab"] {
	flex: 0 0 auto;
	min-height: 44px;
	margin: 0;
	padding: 0.55rem 0.1rem 0.6rem;
	border: 0;
	border-bottom: 2.5px solid transparent;
	border-radius: 0;
	background: none;
	color: var(--flow-muted);
	font: inherit;
	font-size: 0.98rem;
	font-weight: 600;
	line-height: 1.35;
	white-space: nowrap;
	cursor: pointer;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__tabs [role="tab"]:hover {
	color: var(--wp--preset--color--contrast, #1f2a2a);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__tabs [role="tab"][aria-selected="true"] {
	color: var(--flow-teal-dark);
	border-bottom-color: var(--flow-teal-dark);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__tabs [role="tab"]:focus-visible,
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__body [role="tabpanel"]:focus-visible {
	outline: 2px solid var(--flow-teal-dark);
	outline-offset: -2px;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__head {
	display: flex;
	align-items: center;
	gap: 1.4rem;
	padding-right: 2.5rem; /* clear of the close button */
	margin-bottom: 1.8rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__img {
	flex: 0 0 auto;
	width: 150px;
	height: 150px;
	object-fit: contain;
	border-radius: 14px;
	background: #f7f9f8;
	padding: 0.6rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	min-width: 0;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__meta .tbfs-pump__type {
	margin: 0;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details .tbfs-details__meta h3 {
	margin: 0;
	font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
	line-height: 1.15;
	text-wrap: balance;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__meta .tbfs-pump__note {
	max-width: 40ch;
}

/* The theme's .tbfs-pdp wrappers bring the product page's description
   styles; drop their page-level spacing. */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__body.tbfs-pdp {
	padding: 0;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__body .tbfs-pdp-details {
	margin: 0;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__body .wc-tab {
	max-width: none;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__msg {
	margin: 0 0 0.6rem;
	color: var(--flow-muted);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__full {
	display: inline-block;
	margin-top: 1.6rem;
	font-weight: 600;
	color: var(--flow-teal-dark);
	text-underline-offset: 3px;
}

/* Loading: text lines in a tone step, pulsing gently. */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__skeleton {
	display: grid;
	gap: 0.8rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__skeleton span {
	display: block;
	height: 0.95rem;
	border-radius: 999px;
	background: var(--flow-border, #eef2f1);
	animation: tbfs-details-pulse 1.2s ease-in-out infinite alternate;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__skeleton span:first-child {
	width: 55%;
	height: 1.6rem;
	margin-bottom: 0.4rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__skeleton span:nth-child(3) { width: 92%; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__skeleton span:last-child { width: 70%; }

@keyframes tbfs-details-pulse {
	to { opacity: 0.45; }
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0.8rem;
	padding: 0.9rem 1.5rem;
	background: #f7f9f8;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__actions .tbfs-btn {
	min-height: 48px;
}

@media (max-width: 600px) {
	:is(#tbfs-flow,.tbfs-flow-scope).tbfs-details-modal {
		padding: 0;
	}
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details {
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		max-height: none;
		border-radius: 0;
		padding: 0;
	}
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__scroll {
		padding: 1.1rem 1rem 1.6rem;
	}
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__tabbar {
		top: -1.1rem;
		margin: 0 -1rem 1.3rem;
		padding: 0.2rem 3.4rem 0 1rem;
	}
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__tabs {
		gap: 1.3rem;
	}
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__head {
		gap: 0.9rem;
		margin-bottom: 1.4rem;
	}
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__img {
		width: 96px;
		height: 96px;
		padding: 0.4rem;
	}
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__actions {
		padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
	}
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__actions .tbfs-btn {
		flex: 1;
		padding-left: 0.8rem;
		padding-right: 0.8rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-details__skeleton span {
		animation: none;
	}
}

/* Sending overlay: warm interstitial while the order posts. Mirrors the
   success screen's design language (coral-soft badge, Fraunces headline,
   white card) so submit → done feels like one continuous moment. */

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-sending, :is(#tbfs-flow,.tbfs-flow-scope).tbfs-sending * {
	box-sizing: border-box;
}

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-sending {
	/* Lives on document.body, outside .tbfs-flow: re-declare the palette. */
	--flow-teal: var(--wp--preset--color--teal, #84cfc9);
	--flow-teal-dark: var(--wp--preset--color--teal-dark, #2a7670);
	--flow-teal-light: var(--wp--preset--color--teal-light, #e9f7f6);
	--flow-coral: var(--wp--preset--color--coral, #f37868);
	--flow-coral-soft: var(--wp--preset--color--coral-soft, #fdeae7);
	--flow-muted: var(--wp--preset--color--muted, #6f7a80);
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: 1.5rem;
	background: rgba(253, 248, 244, 0.82);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
	animation: tbfs-modal-in 0.22s ease;
	transition: opacity 0.3s ease;
}

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-sending.is-leaving {
	opacity: 0;
	pointer-events: none;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-sending__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: min(430px, calc(100vw - 2.4rem));
	background: var(--flow-surface, #fff);
	border-radius: 22px;
	padding: 2.6rem 2.2rem 2.4rem;
	box-shadow: 0 24px 60px rgba(35, 60, 57, 0.18);
	animation: tbfs-modal-card 0.26s cubic-bezier(0.34, 1.3, 0.64, 1);
}

/* Badge: coral-soft disc like the success screen's check badge, with a
   slim teal arc circling it while we work. */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-sending__icon {
	position: relative;
	width: 96px;
	height: 96px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--flow-coral-soft);
	color: var(--flow-coral);
	transition: opacity 0.22s ease, transform 0.22s ease, color 0.22s ease, background 0.22s ease;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-sending__icon::before {
	content: '';
	position: absolute;
	inset: -9px;
	border-radius: 50%;
	border: 3px solid var(--flow-coral-soft);
	border-top-color: var(--flow-teal-dark);
	animation: tbfs-sending-spin 1.1s linear infinite;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-sending__icon svg {
	width: 42px;
	height: 42px;
	display: block;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-sending__msg {
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 1.35rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast, #3a3a3a);
	margin: 1.5rem 0 0.45rem;
	min-height: 2.6em; /* two lines: rotation never shifts the layout */
	transition: opacity 0.22s ease, transform 0.22s ease;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-sending__sub {
	font-size: 0.92rem;
	color: var(--flow-muted);
	margin: 0 0 1.5rem;
}

/* Crossfade beat between messages */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-sending__card.is-swapping .tbfs-sending__msg, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-sending__card.is-swapping .tbfs-sending__icon {
	opacity: 0;
	transform: translateY(6px);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-sending__bar {
	width: min(230px, 100%);
	height: 5px;
	border-radius: 999px;
	background: var(--flow-teal-light);
	overflow: hidden;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-sending__bar i {
	display: block;
	width: 42%;
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--flow-teal), var(--flow-teal-dark));
	animation: tbfs-sending-sweep 1.5s ease-in-out infinite alternate;
}

/* Success beat: ring settles solid teal, the check pops, shimmer rests full */
:is(#tbfs-flow,.tbfs-flow-scope).tbfs-sending.is-done .tbfs-sending__icon {
	background: var(--flow-teal-light);
	color: var(--flow-teal-dark);
	animation: tbfs-sending-pop 0.45s cubic-bezier(0.34, 1.5, 0.64, 1);
}

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-sending.is-done .tbfs-sending__icon::before {
	animation: none;
	border-color: var(--flow-teal);
}

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-sending.is-done .tbfs-sending__bar i {
	animation: none;
	width: 100%;
}

@media (max-width: 600px) {
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-sending__card {
		padding: 2.1rem 1.4rem 2rem;
	}
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@keyframes tbfs-sending-spin {
	to { transform: rotate(360deg); }
}

@keyframes tbfs-sending-sweep {
	from { transform: translateX(-40%); }
	to { transform: translateX(220%); }
}

@keyframes tbfs-sending-pop {
	from { transform: scale(0.7); }
}

@media (prefers-reduced-motion: reduce) {
	:is(#tbfs-flow,.tbfs-flow-scope).tbfs-sending, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-sending__card, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-sending__icon, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-sending__icon::before, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-sending__bar i {
		animation: none;
	}
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-sending__icon, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-sending__msg {
		transition: opacity 0.22s ease;
	}
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-sending__card.is-swapping .tbfs-sending__msg, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-sending__card.is-swapping .tbfs-sending__icon {
		transform: none;
	}
}

/* Signature pad */

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-sign__pad {
	display: block;
	width: 100%;
	height: 160px;
	border: 2px dashed var(--flow-border, #cfdedd);
	border-radius: 12px;
	background: var(--flow-surface, #fff);
	touch-action: none;
	cursor: crosshair;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-sign__clear {
	margin-top: 0.4rem;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--flow-teal-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* Intake form */

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-intake {
	max-width: 560px;
	margin: 0 auto;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-intake__privacy {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	background: var(--flow-teal-light);
	border-radius: 12px;
	padding: 0.9rem 1rem;
	font-size: 0.88rem;
	color: var(--flow-teal-dark);
	margin-bottom: 1.4rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-intake label {
	display: block;
	font-weight: 600;
	font-size: 0.92rem;
	margin: 1rem 0 0.3rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-intake input, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-intake textarea, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-intake select {
	box-sizing: border-box;
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 2px solid var(--flow-border, #e6ecea);
	border-radius: 10px;
	font: inherit;
	background: var(--flow-surface, #fff);
}

/* Popup date picker (year → month → day) */

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-datepick {
	position: relative;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-datepick__pop {
	position: absolute;
	z-index: 40;
	top: 100%;
	left: 0;
	margin-top: 0.3rem;
	width: min(320px, 100%);
	background: var(--flow-surface, #fff);
	border: 2px solid var(--flow-border, #e6ecea);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(35, 60, 57, 0.16);
	padding: 0.8rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-datepick__head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 700;
	margin-bottom: 0.6rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-datepick__back {
	border: 0;
	background: var(--flow-teal-light);
	color: var(--flow-teal-dark);
	border-radius: 8px;
	width: 1.8rem;
	height: 1.8rem;
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-datepick__grid {
	display: grid;
	gap: 0.3rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-datepick__grid--years {
	grid-template-columns: repeat(4, 1fr);
	max-height: 220px;
	overflow-y: auto;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-datepick__grid--months {
	grid-template-columns: repeat(3, 1fr);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-datepick__grid--days {
	grid-template-columns: repeat(7, 1fr);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-datepick__grid button {
	border: 0;
	background: transparent;
	border-radius: 8px;
	padding: 0.45rem 0.2rem;
	font: inherit;
	font-size: 0.9rem;
	cursor: pointer;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-datepick__grid button:hover, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-datepick__grid button:focus-visible {
	background: var(--flow-teal-light);
	color: var(--flow-teal-dark);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-datepick__wd {
	text-align: center;
	font-size: 0.72rem;
	font-weight: 700;
	color: var(--flow-muted);
	padding-bottom: 0.2rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-intake input:focus, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-intake textarea:focus, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-intake select:focus {
	outline: none;
	border-color: var(--flow-teal);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-intake h3 {
	margin: 2rem 0 0.2rem;
	font-size: 1.15rem;
}

/* Live search filter (states, payers, pumps) */

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-search__input {
	display: block;
	width: 100%;
	max-width: 420px;
	margin: 0 auto 1.2rem;
	padding: 0.7rem 1.2rem;
	border: 2px solid var(--flow-border, #e6ecea);
	border-radius: 999px;
	font: inherit;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-search__input:focus {
	outline: none;
	border-color: var(--flow-teal);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-search__empty {
	text-align: center;
	color: var(--flow-muted);
	margin: 0 0 1rem;
}

/* Pump banner test, version B: above the search, tinted like the wizard's
   notes. Tapping it presses the Fully covered chip below. */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem 1rem;
	width: 100%;
	max-width: 620px;
	min-height: 48px;
	margin: 0 auto 1rem;
	border: 0;
	border-radius: 12px;
	background: var(--flow-teal-light);
	color: var(--flow-teal-dark);
	padding: 0.7rem 1.1rem;
	font: inherit;
	font-size: 0.95rem;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
	touch-action: manipulation;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump-banner:focus-visible {
	outline: 2px solid var(--flow-teal-dark);
	outline-offset: 2px;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump-banner__action {
	flex: none;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Chip filters under the pump search: style-guide pills (white, cool
   border, Fraunces 600, Teal Dark text; Teal Dark fill when pressed). Both
   groups sit on one centered row with a hairline between them and wrap to
   two rows on phones. */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem 0;
	margin: -0.5rem 0 1.4rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-filters__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	padding: 0 0.7rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-filters__row + .tbfs-filters__row {
	border-left: 1px solid var(--wp--custom--color--border-cool, #e4ebe9);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-chip {
	min-height: 36px;
	padding: 0.3rem 0.9rem;
	border: 1px solid var(--wp--custom--color--border-cool, #e4ebe9);
	border-radius: 999px;
	background: var(--flow-surface, #fff);
	color: var(--flow-teal-dark);
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-chip:hover {
	border-color: var(--flow-teal-dark);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-chip[aria-pressed="true"] {
	border-color: var(--flow-teal-dark);
	background: var(--flow-teal-dark);
	color: var(--flow-on-accent, #fff);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-choice-grid--payers {
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-choice--muted {
	color: var(--flow-muted);
	border-style: dashed;
}

/* Product checklist */

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-product-list {
	display: grid;
	gap: 0.8rem;
	max-width: 560px;
	margin: 0 auto;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-product {
	display: flex;
	gap: 0.8rem;
	align-items: flex-start;
	border: 2px solid var(--flow-border, #e6ecea);
	border-radius: 14px;
	padding: 1rem 1.1rem;
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-product:hover {
	border-color: var(--flow-teal);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-product:has(input:checked) {
	border-color: var(--flow-teal-dark);
	background: var(--flow-teal-light);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-product input {
	width: 1.2rem;
	height: 1.2rem;
	margin-top: 0.2rem;
	accent-color: var(--flow-teal-dark);
	flex: none;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-product strong {
	display: block;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-product small {
	color: var(--flow-muted);
}

/* Greyed-out product (its exclusive partner is checked). The "why" note
   only shows in this state. */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-product__why {
	display: none;
	margin-top: 0.3rem;
	font-weight: 600;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-product:has(input:disabled) {
	cursor: not-allowed;
	opacity: 0.55;
	background: #f6f8f8;
	border-color: var(--flow-border, #e6ecea);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-product:has(input:disabled) .tbfs-product__why {
	display: block;
}

/* Radio / checkbox groups */

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-radio-group, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-check-group {
	border: 0;
	padding: 0;
	margin: 1rem 0 0;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-radio-group legend, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-check-group legend {
	font-weight: 600;
	font-size: 0.92rem;
	margin-bottom: 0.3rem;
	padding: 0;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-radio {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	font-weight: 400;
	margin: 0.35rem 0;
	cursor: pointer;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-radio input {
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.15rem;
	accent-color: var(--flow-teal-dark);
	flex: none;
}

/* Doctor lookup (NPI registry typeahead) */

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-doc {
	position: relative;
}

/* Anchor the results to the search field itself, not the whole block,
   so the dropdown opens right under the input even when a selected
   doctor card or the manual fields sit below. */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-doc__search, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-suggest {
	position: relative;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-doc__results {
	position: absolute;
	z-index: 40;
	top: calc(100% + 0.35rem);
	left: 0;
	right: 0;
	background: var(--flow-surface, #fff);
	border: 2px solid var(--flow-border, #e6ecea);
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(35, 60, 57, 0.16);
	max-height: 300px;
	overflow-y: auto;
	padding: 0.4rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-doc__result {
	display: block;
	width: 100%;
	text-align: left;
	border: 0;
	background: transparent;
	border-radius: 10px;
	padding: 0.55rem 0.7rem;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-doc__result:hover, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-doc__result:focus-visible {
	background: var(--flow-teal-light);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-doc__result strong {
	display: block;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-doc__result small {
	color: var(--flow-muted);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-doc__none {
	margin: 0.4rem 0.7rem;
	color: var(--flow-muted);
	font-size: 0.9rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-doc__card {
	margin: 0.6rem 0 0;
	display: grid;
	gap: 0.15rem;
	font-size: 0.9rem;
	color: var(--flow-teal-dark);
	background: var(--flow-teal-light);
	border-radius: 12px;
	padding: 0.7rem 1rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-doc__card-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.6rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-doc__change {
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--flow-teal-dark);
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
}

/* A real secondary button, not fine print: moms who find the search
   confusing need to see the way out. */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-doc__manual {
	display: inline-block;
	border: 1.5px solid var(--flow-teal);
	border-radius: 999px;
	background: transparent;
	font: inherit;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--flow-teal-dark);
	cursor: pointer;
	padding: 0.65rem 1.4rem;
	margin-top: 0.6rem;
	transition: background 0.12s ease, color 0.12s ease;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-doc__manual:hover,
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-doc__manual:focus-visible {
	background: var(--flow-teal);
	color: var(--flow-on-accent, #fff);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-doc__fields {
	margin-top: 0.4rem;
}

/* Instruction note for email / fax / on-file methods */

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-rx-note {
	background: var(--flow-teal-light);
	color: var(--flow-teal-dark);
	border-radius: 12px;
	padding: 0.85rem 1.1rem;
	font-size: 0.92rem;
	margin: 0.4rem 0 1rem;
}

/* Step-level heads-up shown above the Continue button */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-rx-note--footer {
	margin: 1.4rem 0 0;
	font-size: 0.88rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-bags__unselect {
	max-width: 420px;
	margin: 0.6rem auto 0;
	text-align: center;
	color: var(--flow-muted);
	font-size: 0.88rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-bags__note {
	max-width: 420px;
	margin: 1rem auto 0;
	text-align: center;
}

/* Styled file picker (native input stays focusable for validation) */

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-file input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	opacity: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* Doubled class specificity so .tbfs-intake label rules don't win. */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-file label.tbfs-file__button {
	display: grid;
	gap: 0.25rem;
	justify-items: center;
	text-align: center;
	font-weight: 400;
	font-size: 1rem;
	margin: 0.6rem 0 0;
	border: 2px dashed var(--flow-teal);
	border-radius: 16px;
	background: #fbfffe;
	padding: 1.4rem 1rem;
	cursor: pointer;
	transition: background 0.12s ease, border-color 0.12s ease;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-file label.tbfs-file__button:hover, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-file input[type="file"]:focus-visible + .tbfs-file__button {
	background: var(--flow-teal-light);
	border-color: var(--flow-teal-dark);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-file label.tbfs-file__button.is-filled {
	border-style: solid;
	border-color: var(--flow-teal-dark);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-file__icon {
	font-size: 1.6rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-file__button small {
	color: var(--flow-muted);
	font-size: 0.85rem;
}

/* Prescription method cards + pills */

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-rx-primary {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.8rem;
	margin-bottom: 0.9rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-rx-primary--single {
	grid-template-columns: minmax(0, 420px);
	justify-content: center;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-rx-card {
	display: grid;
	gap: 0.25rem;
	justify-items: center;
	text-align: center;
	border: 2px solid var(--flow-border, #e6ecea);
	border-radius: 16px;
	background: var(--flow-surface, #fff);
	padding: 1.2rem 1rem;
	font: inherit;
	color: inherit;
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-rx-card:hover, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-rx-card:focus-visible {
	border-color: var(--flow-teal);
	box-shadow: 0 6px 18px rgba(63, 158, 151, 0.15);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-rx-card.is-selected {
	border-color: var(--flow-teal-dark);
	background: var(--flow-teal-light);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-rx-card__icon {
	font-size: 1.6rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-rx-card small {
	color: var(--flow-muted);
}

/* Prescription reassurance test, version B: the tag sits on the card's top
   edge, out of the flow, so the card keeps version A's layout. */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-rx-card--tagged {
	position: relative;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-rx-card__tag {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 999px;
	background: var(--flow-teal-dark);
	color: #fff;
	padding: 0.14rem 0.7rem;
	font-size: 0.78rem;
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

/* Toggle cards (milk storage bags) carry an explicit add/added pill so
   it reads as something you tap, not a static banner. */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-rx-card__cta {
	margin-top: 0.5rem;
	display: inline-block;
	border: 2px solid var(--flow-coral);
	border-radius: 999px;
	padding: 0.35rem 1rem;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--flow-coral);
	background: var(--flow-surface, #fff);
	transition: background 0.12s ease, color 0.12s ease;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-rx-card--toggle:hover .tbfs-rx-card__cta {
	background: var(--flow-coral);
	color: var(--flow-on-color, #fff);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-rx-card--toggle.is-selected .tbfs-rx-card__cta {
	border-color: var(--flow-teal-dark);
	background: var(--flow-teal-dark);
	color: var(--flow-on-accent, #fff);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-rx-secondary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.5rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-rx-secondary__label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--flow-muted);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-rx-pill {
	border: 1.5px solid var(--flow-border, #e6ecea);
	border-radius: 999px;
	background: var(--flow-surface, #fff);
	padding: 0.4rem 0.9rem;
	font: inherit;
	font-size: 0.85rem;
	color: inherit;
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-rx-pill:hover {
	border-color: var(--flow-teal);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-rx-pill.is-selected {
	border-color: var(--flow-teal-dark);
	background: var(--flow-teal-light);
	color: var(--flow-teal-dark);
	font-weight: 600;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-doc-block--hero {
	border: 2px solid var(--flow-teal);
	border-radius: 16px;
	padding: 1.1rem 1.2rem 1.4rem;
	margin-top: 1rem;
	background: #fbfffe;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-doc-block--hero h3 {
	margin-top: 0.2rem;
}

@media (max-width: 600px) {
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-rx-primary {
		grid-template-columns: 1fr;
	}
}

/* ---------- Success screen ----------
   .tbfs-done is the centered hero the payment-outcome screens use.
   .tbfs-done--card is the order-filed celebration (the /order-confirmed/
   page, and success() in flow.js as the in-place fallback): a cream panel
   with the badge, title and order-number ticket on the left and the
   "what happens next" tracker on the right, stacking below 880px (always, inside the wizard). */

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done {
	position: relative;
	text-align: center;
	padding-top: 3.5rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__badge {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: var(--wp--preset--color--coral-soft, #fdeae7);
	animation: tbfs-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__ring {
	stroke: var(--flow-coral);
	stroke-dasharray: 202;
	stroke-dashoffset: 202;
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
	animation: tbfs-draw 0.7s ease-out 0.25s forwards;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__check {
	stroke: var(--flow-teal-dark);
	stroke-dasharray: 60;
	stroke-dashoffset: 60;
	animation: tbfs-draw 0.45s ease-out 0.85s forwards;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__title {
	margin: 1.1rem 0 0.3rem;
	animation: tbfs-fade-up 0.6s ease 0.2s both;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__sub {
	color: var(--flow-muted);
	font-size: 1.05rem;
	margin: 0 0 0.8rem;
	animation: tbfs-fade-up 0.6s ease 0.35s both;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__order {
	color: var(--flow-muted);
	font-size: 0.98rem;
	margin: 0 0 0.8rem;
	animation: tbfs-fade-up 0.6s ease 0.45s both;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__order strong {
	color: inherit;
	letter-spacing: 0.03em;
}

/* Celebration card */

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done--card {
	container-type: inline-size;
	text-align: left;
	padding-top: 1.5rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	background: var(--wp--preset--color--cream, #fdf8f4);
	border-radius: 28px;
	padding: 2.4rem 1.25rem 1.5rem;
}

@container (min-width: 480px) {
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__track {
		padding-inline: 1.4rem;
	}
}

@container (min-width: 880px) {
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__hero {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		gap: 2.5rem;
		align-items: start;
		padding: 3.5rem 3rem;
	}
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__lead {
	display: grid;
	justify-items: start;
	min-width: 0;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done--card .tbfs-done__check {
	stroke: var(--wp--preset--color--coral-dark, #e0604f);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done--card .tbfs-done__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2.3rem, 7cqi, 3rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast, #3a3a3a);
	text-wrap: balance;
	margin: 1.3rem 0 0;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done--card .tbfs-done__sub {
	color: var(--wp--preset--color--contrast, #3a3a3a);
	font-size: 1.12rem;
	margin: 0.7rem 0 0;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done--card :is(.tbfs-done__hero, .tbfs-done__ticket, .tbfs-done__fee, .tbfs-done__track) {
	box-sizing: border-box;
}

/* Order number as a ticket stub: coral-soft card with two notches cut in
   the cream ground. */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__ticket {
	position: relative;
	display: grid;
	gap: 0.1rem;
	width: min(100%, 380px);
	margin-top: 1.5rem;
	padding: 1rem 1.4rem;
	border-radius: 18px;
	background: var(--wp--preset--color--coral-soft, #fdeae7);
	animation: tbfs-fade-up 0.6s ease 0.45s both;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__ticket::before,
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__ticket::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 18px;
	height: 18px;
	margin-top: -9px;
	border-radius: 50%;
	background: var(--wp--preset--color--cream, #fdf8f4);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__ticket::before { left: -9px; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__ticket::after { right: -9px; }

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__ticket-label,
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__ticket-note {
	font-size: 0.95rem;
	color: var(--wp--preset--color--muted, #73645f);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__ticket-ref {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.3rem, 7.5cqi, 1.7rem);
	line-height: 1.15;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--contrast, #3a3a3a);
	white-space: nowrap;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__fee {
	width: min(100%, 380px);
	margin: 0.75rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: 14px;
	background: var(--flow-surface, #fff);
	font-size: 0.98rem;
	animation: tbfs-fade-up 0.6s ease 0.55s both;
}

/* Tracker: four stops, the first already done; each fades in and the line
   to the next one fills behind it. */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__track {
	min-width: 0;
	background: var(--flow-surface, #fff);
	border-radius: 22px;
	padding: 1.5rem 1.1rem 0.4rem;
	animation: tbfs-fade-up 0.6s ease 0.6s both;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__track :is(h2,h3) {
	font-size: 1.35rem;
	margin: 0 0 1.1rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__track ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__stop {
	position: relative;
	display: flex;
	gap: 0.9rem;
	padding-bottom: 1.35rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__stop::before,
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__stop::after {
	content: "";
	position: absolute;
	left: 21px;
	top: 48px;
	bottom: 4px;
	width: 2px;
	border-radius: 2px;
	background: var(--flow-teal-light);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__stop::after {
	background: var(--flow-teal);
	transform: scaleY(0);
	transform-origin: top;
	animation: tbfs-grow 0.4s ease-out forwards;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__stop:last-child::before,
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__stop:last-child::after {
	display: none;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__stop > * {
	animation: tbfs-fade-up 0.5s ease both;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__stop:nth-child(1) > * { animation-delay: 1.2s; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__stop:nth-child(2) > * { animation-delay: 1.55s; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__stop:nth-child(3) > * { animation-delay: 1.9s; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__stop:nth-child(4) > * { animation-delay: 2.25s; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__stop:nth-child(1)::after { animation-delay: 1.45s; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__stop:nth-child(2)::after { animation-delay: 1.8s; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__stop:nth-child(3)::after { animation-delay: 2.15s; }

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__stop > div {
	min-width: 0;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__stop strong {
	display: block;
	padding-top: 0.15rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.08rem;
	font-weight: 600;
	line-height: 1.3;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__stop p {
	margin: 0.2rem 0 0;
	font-size: 0.98rem;
}

/* Icons are the theme's line icons (shield, clipboard check, truck), drawn
   through a mask so they take the stop's color. */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__stop-icon {
	flex: none;
	position: relative;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--flow-teal-light);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__stop-icon::before {
	content: "";
	position: absolute;
	inset: 11px;
	background: var(--flow-teal-dark);
	-webkit-mask: var(--tbfs-done-icon) center / contain no-repeat;
	mask: var(--tbfs-done-icon) center / contain no-repeat;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__stop-icon--check { --tbfs-done-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12.5 10 17 19 7'/></svg>"); }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__stop-icon--shield { --tbfs-done-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/></svg>"); }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__stop-icon--rx { --tbfs-done-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 11 12 14 22 4'/><path d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/></svg>"); }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__stop-icon--truck { --tbfs-done-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='1' y='3' width='15' height='13' rx='1'/><polygon points='16 8 20 8 23 11 23 16 16 16 16 8'/><circle cx='5.5' cy='18.5' r='2.5'/><circle cx='18.5' cy='18.5' r='2.5'/></svg>"); }

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__stop.is-done .tbfs-done__stop-icon { background: var(--flow-teal-dark); }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__stop.is-done .tbfs-done__stop-icon::before { background: #fff; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__stop.is-you .tbfs-done__stop-icon { background: var(--wp--preset--color--coral-soft, #fdeae7); }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__stop.is-you .tbfs-done__stop-icon::before { background: var(--wp--preset--color--coral-dark, #e0604f); }

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__yourturn {
	display: inline-block;
	margin-left: 0.35rem;
	padding: 0.1rem 0.6rem;
	border-radius: 999px;
	background: var(--flow-coral);
	color: var(--flow-on-color, #fff);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8rem;
	font-weight: 700;
	vertical-align: 0.12em;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__mail {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin-top: 0.6rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__mail[hidden] {
	display: none;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__mail a {
	padding: 0.4rem 0.75rem;
	border-radius: 10px;
	background: var(--wp--preset--color--coral-soft, #fdeae7);
	color: var(--wp--preset--color--contrast, #3a3a3a);
	font-weight: 700;
	font-size: 0.9rem;
	text-decoration: none;
	overflow-wrap: anywhere;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__mail a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__copy {
	min-height: 36px;
	padding: 0.3rem 0.9rem;
	border: 2px solid var(--flow-coral);
	border-radius: 999px;
	background: var(--flow-surface, #fff);
	color: var(--wp--preset--color--coral-dark, #e0604f);
	font: inherit;
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.12s ease;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__copy:hover { background: var(--wp--preset--color--coral-soft, #fdeae7); }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__copy:active { transform: scale(0.96); }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__copy:focus-visible { outline: 2px solid var(--flow-teal-dark); outline-offset: 2px; }

/* Sign-off: heart on its own line above a short centered line. */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__sign {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	max-width: 30ch;
	margin: 2.5rem auto 0.5rem;
	text-align: center;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.05rem, 2.6vw, 1.25rem);
	font-weight: 600;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast, #3a3a3a);
	animation: tbfs-fade-up 0.55s ease 2.4s both;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__heart {
	width: 22px;
	height: 20px;
	background: var(--flow-coral);
	-webkit-mask: var(--tbfs-done-heart) center / contain no-repeat;
	mask: var(--tbfs-done-heart) center / contain no-repeat;
}

/* Confetti: one burst out of the badge as the check lands, then gone.
   Direction and spin come inline (--x/--y/--r/--delay); shape and color
   from nth-child: milk drops, hearts, dots and ribbons. */
:is(#tbfs-flow,.tbfs-flow-scope) {
	--tbfs-done-drop: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'><path d='M6 0S0 7.5 0 10.5a6 5.5 0 0 0 12 0C12 7.5 6 0 6 0z'/></svg>");
	--tbfs-done-heart: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'><path d='M20.8 2.6a5.5 5.5 0 0 0-7.8 0L12 3.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8L12 19.2l8.8-8.8a5.5 5.5 0 0 0 0-7.8z'/></svg>");
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__burst {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0;
	height: 0;
	pointer-events: none;
	z-index: 2;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__burst i {
	position: absolute;
	left: -6px;
	top: -6px;
	width: 12px;
	height: 12px;
	opacity: 0;
	animation: tbfs-burst 1.6s cubic-bezier(0.15, 0.7, 0.3, 1) var(--delay, 0.9s) forwards;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__burst i:nth-child(4n + 1) { -webkit-mask: var(--tbfs-done-drop) center / contain no-repeat; mask: var(--tbfs-done-drop) center / contain no-repeat; width: 11px; height: 15px; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__burst i:nth-child(4n + 2) { -webkit-mask: var(--tbfs-done-heart) center / contain no-repeat; mask: var(--tbfs-done-heart) center / contain no-repeat; width: 15px; height: 14px; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__burst i:nth-child(4n + 3) { border-radius: 50%; width: 10px; height: 10px; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__burst i:nth-child(4n + 4) { border-radius: 3px; width: 7px; height: 13px; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__burst i:nth-child(5n + 1) { background: var(--flow-coral); }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__burst i:nth-child(5n + 2) { background: var(--flow-teal); }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__burst i:nth-child(5n + 3) { background: #f5c26b; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__burst i:nth-child(5n + 4) { background: #f9c3b9; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__burst i:nth-child(5n + 5) { background: var(--flow-teal-dark); }

@keyframes tbfs-pop {
	from { transform: scale(0.5); opacity: 0; }
	to   { transform: scale(1); opacity: 1; }
}

@keyframes tbfs-draw {
	to { stroke-dashoffset: 0; }
}

@keyframes tbfs-fade-up {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@keyframes tbfs-grow {
	to { transform: scaleY(1); }
}

@keyframes tbfs-burst {
	0%   { opacity: 0; transform: translate(0, 0) scale(0.4) rotate(0deg); }
	10%  { opacity: 1; }
	70%  { opacity: 1; transform: translate(var(--x), var(--y)) scale(1) rotate(var(--r)); }
	100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 60px)) scale(0.9) rotate(var(--r)); }
}

/* Order-confirmed page: the celebration card standing alone on its own
   page, with two journal posts to read while she waits. */
/* :is() carries the wizard's #tbfs-flow weight, so the 860px cap needs it too. */
:is(#tbfs-flow,.tbfs-flow-scope).tbfs-confirmed {
	max-width: 1120px;
	padding-bottom: 3rem;
}

/* On the page the cream band runs the full window width under the header,
   with the content still capped and centered. border-image paints the band
   past the box without widening the page (no sideways scroll). */
:is(#tbfs-flow,.tbfs-flow-scope).tbfs-confirmed .tbfs-done--card {
	padding-top: 0;
}

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-confirmed .tbfs-done__hero {
	border-radius: 0;
	background: none;
	border-image: conic-gradient(var(--wp--preset--color--cream, #fdf8f4) 0 0) fill 0 // 0 100vw;
	padding-inline: 0;
}

@container (min-width: 880px) {
	:is(#tbfs-flow,.tbfs-flow-scope).tbfs-confirmed .tbfs-done__hero {
		align-items: center;
		padding-block: 4.5rem;
	}
}

.tbfs-confirmed .tbfs-confirmed__reads {
	margin-top: 3rem;
	animation: tbfs-fade-up 0.55s ease 2.4s both;
}

.tbfs-confirmed .tbfs-confirmed__reads h2 {
	font-size: 1.45rem;
	margin: 0 0 1rem;
}

.tbfs-confirmed .tbfs-confirmed__reads ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

@media (min-width: 640px) {
	.tbfs-confirmed .tbfs-confirmed__reads ul { grid-template-columns: 1fr 1fr; }
}

.tbfs-confirmed .tbfs-confirmed__reads a {
	display: grid;
	grid-template-columns: 112px 1fr;
	gap: 1rem;
	align-items: center;
	min-height: 104px;
	border-radius: 18px;
	overflow: hidden;
	background: var(--wp--preset--color--cream, #fdf8f4);
	color: var(--wp--preset--color--contrast, #3a3a3a);
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tbfs-confirmed .tbfs-confirmed__reads a:hover {
	transform: translateY(-2px);
	box-shadow: var(--wp--custom--shadow--card-hover);
}

.tbfs-confirmed .tbfs-confirmed__reads a:focus-visible {
	outline: 2px solid var(--flow-teal-dark);
	outline-offset: 3px;
}

.tbfs-confirmed .tbfs-confirmed__reads img {
	display: block;
	width: 112px;
	height: 100%;
	object-fit: cover;
}

.tbfs-confirmed .tbfs-confirmed__reads strong {
	display: block;
	padding-right: 1rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
}

.tbfs-confirmed .tbfs-confirmed__reads a:hover strong {
	color: var(--flow-teal-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tbfs-confirmed .tbfs-confirmed__reads strong + span {
	display: block;
	padding: 0.2rem 1rem 0 0;
	font-size: 0.92rem;
	color: var(--wp--preset--color--muted, #73645f);
}

.tbfs-confirmed .tbfs-confirmed__help {
	text-align: center;
	color: var(--flow-muted);
	font-size: 0.92rem;
	margin: 0;
	animation: tbfs-fade-up 0.55s ease 2.5s both;
}

@media (prefers-reduced-motion: reduce) {
	:is(#tbfs-flow,.tbfs-flow-scope) :is(.tbfs-done__badge, .tbfs-done__ring, .tbfs-done__check, .tbfs-done__title, .tbfs-done__sub, .tbfs-done__order, .tbfs-done__ticket, .tbfs-done__fee, .tbfs-done__track, .tbfs-done__stop > *, .tbfs-done__sign),
	.tbfs-confirmed :is(.tbfs-confirmed__reads, .tbfs-confirmed__help) {
		animation: none;
		opacity: 1;
		stroke-dashoffset: 0;
	}
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__stop::after {
		animation: none;
		transform: none;
	}
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__burst {
		display: none;
	}
	.tbfs-confirmed .tbfs-confirmed__reads a,
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__copy {
		transition: none;
	}
}

/* Review summary */

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-summary {
	max-width: 560px;
	margin: 0 auto 1.5rem;
	border: 2px solid var(--flow-border, #e6ecea);
	border-radius: 14px;
	padding: 0.4rem 1.1rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-summary > div {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 0.8rem;
	padding: 0.55rem 0;
	border-bottom: 1px solid var(--flow-border, #eef2f1);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-summary > div:last-child {
	border-bottom: 0;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-summary dt {
	font-weight: 700;
	font-size: 0.88rem;
	color: var(--flow-muted);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-summary dd {
	margin: 0;
	font-size: 0.95rem;
}

/* Misc */

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-flow__hint--left {
	text-align: left;
	margin: 0.2rem 0 0.6rem;
	font-size: 0.88rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-flow__filenote {
	font-size: 0.85rem;
	color: var(--flow-teal-dark);
	margin: 0.4rem 0 0;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	opacity: 0;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-flow__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1rem;
}

/* Buttons */

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-flow__actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 1.8rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-btn {
	border: 0;
	border-radius: 999px;
	padding: 0.8rem 1.9rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	background: var(--flow-coral);
	color: var(--flow-on-color, #fff);
	transition: background 0.12s ease;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-btn:hover {
	background: var(--flow-button-hover, #e0604f);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-btn--ghost {
	background: transparent;
	color: var(--flow-muted);
	text-decoration: underline;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-btn--ghost:hover {
	background: transparent;
	color: var(--flow-teal-dark);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-btn[disabled] {
	opacity: 0.55;
	cursor: default;
}

/* Payment step: the Stripe Payment Element mounts into __element; the button
   row reuses .tbfs-flow__actions. Amount echoes the review summary weight. */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pay__amount {
	font-size: 1.9rem;
	font-weight: 600;
	color: #2b2b2b;
	margin: 0.2rem 0 1rem;
}

/* Klarna "as low as" line: tucked under the price as one group, with the
   wider gap below so the payment buttons start a new section. */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pay__bnpl {
	margin: -1.1rem 0 1.5rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pay__repeat {
	background: #fff4e5;
	color: #7a4300;
	border-radius: 12px;
	padding: 0.9rem 1.1rem;
	margin: 0 0 1rem;
	font-size: 0.95rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pay__repeat p {
	margin: 0 0 0.75rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pay__repeat .tbfs-flow__actions {
	margin-top: 0;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pay__repeat a.tbfs-btn {
	text-decoration: none;
}

/* Payment outcome screens (paid / processing / checking / failed). */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pay__outcome-actions {
	justify-content: center;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pay__call {
	max-width: 560px;
	margin: 1rem auto 0;
	text-align: center;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pay__call a {
	color: inherit;
	font-weight: 600;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pay__element {
	margin: 0 0 1rem;
	min-height: 42px;
}

/* Express wallet buttons (Apple Pay / Google Pay / Link) pinned above the card
   form, with a labelled divider separating them. Hidden until a wallet exists. */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pay__express {
	margin: 0 0 1rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pay__divider {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--flow-muted);
	font-size: 0.8rem;
	margin: 1rem 0 0.2rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pay__divider::before, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pay__divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: #e3e6e6;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-flow__error {
	background: #fdeae7;
	color: #b0432f;
	border-radius: 10px;
	padding: 0.8rem 1rem;
	margin-top: 1rem;
	font-size: 0.9rem;
}

@media (max-width: 600px) {
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-flow__bar {
		gap: 0.6rem;
		padding: 0.5rem 0.6rem;
	}
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-flow__bar-btn {
		font-size: 0.8rem;
		padding: 0.4rem 0.7rem;
	}
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.7rem;
	}
	/* Groups stack; the divider becomes a hairline between the rows. */
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-filters__row {
		flex-basis: 100%;
		padding: 0;
	}
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-filters__row + .tbfs-filters__row {
		border-left: 0;
	}
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-chip {
		min-height: 40px;
	}
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump {
		padding: 0.9rem 0.7rem;
	}
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump__img {
		height: 110px;
	}
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump__name {
		font-size: 0.92rem;
	}
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-flow__row {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------ */
/* Choice-screen style variants (states + insurance payers)            */
/* Scoped by [data-flow-style] on the root; "classic" is the base      */
/* look above and needs no rules here. Preview with ?styles=1 — see    */
/* the Style preview block in flow.js.                                 */
/* ------------------------------------------------------------------ */

/* --- Soft pills: compact rounded chips, centered flow --- */

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow[data-flow-style="pills"] .tbfs-choice-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.55rem;
}

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow[data-flow-style="pills"] .tbfs-choice {
	display: inline-block;
	width: auto;
	padding: 0.55rem 1.15rem;
	border: 1.5px solid var(--flow-border, #dfe9e7);
	border-radius: 999px;
	font-size: 0.95rem;
}

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow[data-flow-style="pills"] .tbfs-choice:hover, :is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow[data-flow-style="pills"] .tbfs-choice:focus-visible {
	border-color: var(--flow-teal);
	background: var(--flow-teal-light);
}

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow[data-flow-style="pills"] .tbfs-choice.is-selected {
	border-color: var(--flow-teal-dark);
	background: var(--flow-teal-dark);
	color: var(--flow-on-accent, #fff);
}

/* --- Simple list: one calm column of rows inside a card --- */

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow[data-flow-style="list"] .tbfs-choice-grid {
	display: block;
	max-width: 560px;
	margin: 0 auto;
	background: var(--flow-surface, #fff);
	border: 1px solid var(--flow-border, #e6ecea);
	border-radius: 16px;
	box-shadow: 0 4px 14px rgba(35, 60, 57, 0.06);
	padding: 0.35rem 0.5rem;
}

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow[data-flow-style="list"] .tbfs-choice {
	position: relative;
	text-align: left;
	border: 0;
	border-radius: 10px;
	background: transparent;
	padding: 0.85rem 2.2rem 0.85rem 0.9rem;
}

/* Hairline between rows, drawn on the row itself so hiding rows
   (search filter) can't strand a divider. */
:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow[data-flow-style="list"] .tbfs-choice + .tbfs-choice:not(.is-selected)::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0.9rem;
	right: 0.9rem;
	border-top: 1px solid var(--flow-border, #eef2f1);
}

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow[data-flow-style="list"] .tbfs-choice::after {
	content: '›';
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.25rem;
	line-height: 1;
	color: var(--flow-coral);
	opacity: 0.55;
	transition: transform 0.12s ease, opacity 0.12s ease;
}

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow[data-flow-style="list"] .tbfs-choice:hover, :is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow[data-flow-style="list"] .tbfs-choice:focus-visible {
	border-color: transparent;
	background: var(--flow-teal-light);
}

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow[data-flow-style="list"] .tbfs-choice:hover::after, :is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow[data-flow-style="list"] .tbfs-choice:focus-visible::after {
	transform: translateY(-50%) translateX(3px);
	opacity: 1;
}

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow[data-flow-style="list"] .tbfs-choice.is-selected {
	background: var(--flow-teal-light);
	border-color: transparent;
	box-shadow: inset 0 0 0 2px var(--flow-teal-dark);
}

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow[data-flow-style="list"] .tbfs-choice--muted {
	border: 0;
	border-radius: 10px;
}

/* --- Warm tiles: soft teal fills, borderless, gentle lift --- */

/* Every row matches the tallest one, so long names ("Armed Forces
   Europe (AE)") don't leave the grid ragged. */
:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow[data-flow-style="tiles"] .tbfs-choice-grid {
	grid-auto-rows: 1fr;
}

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow[data-flow-style="tiles"] .tbfs-choice {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1.25;
	text-wrap: balance;
	border: 0;
	background: var(--flow-teal-light);
	border-radius: 14px;
	padding: 1.05rem 1rem;
	font-weight: 700;
	color: var(--flow-tile-text, #20514d);
	box-shadow: inset 0 0 0 1px rgba(63, 158, 151, 0.12);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow[data-flow-style="tiles"] .tbfs-choice:hover, :is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow[data-flow-style="tiles"] .tbfs-choice:focus-visible {
	background: var(--flow-surface, #fff);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(35, 60, 57, 0.12), inset 0 0 0 2px var(--flow-teal);
}

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow[data-flow-style="tiles"] .tbfs-choice.is-selected {
	background: var(--flow-surface, #fff);
	box-shadow: inset 0 0 0 2px var(--flow-teal-dark);
}

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow[data-flow-style="tiles"] .tbfs-choice--muted {
	background: #f4f6f5;
	color: var(--flow-muted);
	box-shadow: inset 0 0 0 1px #e0e6e4;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow[data-flow-style="tiles"] .tbfs-choice:hover, :is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow[data-flow-style="tiles"] .tbfs-choice:focus-visible {
		transform: none;
	}
}

/* --- Floating switcher shown only with ?styles=1 --- */

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-stylebar {
	position: fixed;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 60;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35rem;
	background: var(--flow-surface, #fff);
	border: 1px solid var(--flow-border, #e6ecea);
	border-radius: 999px;
	box-shadow: 0 8px 26px rgba(35, 60, 57, 0.18);
	padding: 0.4rem 0.6rem;
	max-width: calc(100vw - 1.5rem);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-stylebar__label {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--flow-muted, #6f7a80);
	padding: 0 0.35rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-stylebar__btn {
	border: 1.5px solid var(--flow-border, #dfe9e7);
	border-radius: 999px;
	background: var(--flow-surface, #fff);
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	color: inherit;
	cursor: pointer;
	padding: 0.35rem 0.85rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-stylebar__btn:hover {
	border-color: var(--flow-teal, #84cfc9);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-stylebar__btn[aria-pressed="true"] {
	background: var(--flow-teal-dark, #2a7670);
	border-color: var(--flow-teal-dark, #2a7670);
	color: var(--flow-on-accent, #fff);
}

@media (max-width: 560px) {
	/* left:50% halves the space the flex container can size against, which
	   stacks the buttons one per row; pin to the edges instead. */
	:is(#tbfs-flow,.tbfs-flow-scope).tbfs-stylebar {
		left: 0.75rem;
		right: 0.75rem;
		transform: none;
		border-radius: 16px;
	}
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-stylebar__label {
		width: 100%;
		text-align: center;
	}
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-stylebar__btn {
		font-size: 0.78rem;
		padding: 0.3rem 0.7rem;
	}
}

/* Rx upload progress + error (uploaded on pick, 0.9.27) */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-file__progress {
	margin: 0.6rem 0 0;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-file__progress progress {
	width: 100%;
	height: 8px;
	accent-color: var(--flow-teal-dark);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-file__error {
	margin-top: 0.5rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-file__alt {
	margin-top: 0.5rem;
}