/* 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. */

/* 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, #3f9e97);
	--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: #fff;
	border: 1px solid #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 #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: #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: #fff;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-flow__bar-btn--next:hover {
	background: #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 #e6ecea;
	border-radius: 12px;
	background: #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 #e6ecea;
	border-radius: 16px;
	background: #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 + color, pinned to the card
   corner. Text color is picked in JS for contrast on the chosen background. */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump__badge {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 1;
	border-radius: 999px;
	padding: 0.2rem 0.65rem;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}

: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="Hospital grade"] {
	background: #ece9f7;
	color: #4c3d8f;
}

: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);
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-pump__price--upgrade {
	background: #fdeae7;
	color: #c4523f;
}

: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: #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;
}

/* 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 #e6ecea;
	border-radius: 16px;
	background: #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: #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: #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 #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 #e6ecea;
	border-radius: 14px;
	background: #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: #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: #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 #e6ecea;
	border-radius: 16px;
	padding: 1.1rem 1.3rem 1.2rem;
	background: #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 #d5dedd;
	font-size: 0.75rem;
	font-weight: 700;
	color: #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: #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: #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, #3f9e97);
	--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: #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: #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;
}

: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;
	}
}

/* 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, #3f9e97);
	--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: #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 #cfdedd;
	border-radius: 12px;
	background: #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 #e6ecea;
	border-radius: 10px;
	font: inherit;
	background: #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: #fff;
	border: 2px solid #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 #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;
}

: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 #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);
}

/* 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: #fff;
	border: 2px solid #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;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-doc__manual {
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 0.85rem;
	color: var(--flow-muted);
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
	margin-top: 0.4rem;
}

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

: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;
}

/* 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 #e6ecea;
	border-radius: 16px;
	background: #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);
}

/* 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: #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: #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: #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 #e6ecea;
	border-radius: 999px;
	background: #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 ---------- */

: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 {
	display: inline-grid;
	place-items: center;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: #fdeeea;
	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;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__steps {
	max-width: 560px;
	margin: 1.2rem auto 0;
	border: 2px solid #e6ecea;
	border-radius: 16px;
	padding: 1.1rem 1.3rem 0.6rem;
	text-align: left;
	animation: tbfs-fade-up 0.6s ease 0.45s both;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__steps h3 {
	margin: 0 0 0.6rem;
	font-size: 1.05rem;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__step {
	display: flex;
	gap: 0.85rem;
	align-items: flex-start;
	padding: 0.65rem 0;
	animation: tbfs-fade-up 0.55s ease both;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__step + .tbfs-done__step {
	border-top: 1px solid #eef3f2;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__step-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--flow-teal-light);
	font-size: 1.15rem;
}

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

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

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__note {
	max-width: 560px;
	margin: 1rem auto 0;
	animation: tbfs-fade-up 0.55s ease 1.6s both;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__sign {
	text-align: center;
	color: var(--flow-muted);
	margin: 1.6rem 0 0.4rem;
	animation: tbfs-fade-up 0.55s ease 1.85s both;
}

/* Confetti: one gentle burst, then gone. */
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__confetti {
	position: absolute;
	inset: 0 0 auto;
	height: 0;
	pointer-events: none;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__confetti i {
	position: absolute;
	top: -12px;
	width: 9px;
	height: 13px;
	border-radius: 3px;
	opacity: 0;
	animation: tbfs-confetti 2.6s ease-in forwards;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__confetti i:nth-child(4n + 1) { background: var(--flow-coral); }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__confetti i:nth-child(4n + 2) { background: var(--flow-teal); }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__confetti i:nth-child(4n + 3) { background: #f5c26b; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__confetti i:nth-child(4n + 4) { background: #f9d5cc; width: 7px; height: 10px; }

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__confetti i:nth-child(1) { left: 4%;  animation-delay: 0.30s; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__confetti i:nth-child(2) { left: 10%; animation-delay: 0.55s; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__confetti i:nth-child(3) { left: 16%; animation-delay: 0.40s; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__confetti i:nth-child(4) { left: 22%; animation-delay: 0.70s; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__confetti i:nth-child(5) { left: 28%; animation-delay: 0.35s; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__confetti i:nth-child(6) { left: 34%; animation-delay: 0.60s; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__confetti i:nth-child(7) { left: 40%; animation-delay: 0.45s; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__confetti i:nth-child(8) { left: 46%; animation-delay: 0.75s; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__confetti i:nth-child(9) { left: 52%; animation-delay: 0.32s; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__confetti i:nth-child(10) { left: 58%; animation-delay: 0.65s; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__confetti i:nth-child(11) { left: 64%; animation-delay: 0.42s; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__confetti i:nth-child(12) { left: 70%; animation-delay: 0.58s; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__confetti i:nth-child(13) { left: 76%; animation-delay: 0.38s; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__confetti i:nth-child(14) { left: 82%; animation-delay: 0.68s; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__confetti i:nth-child(15) { left: 88%; animation-delay: 0.48s; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__confetti i:nth-child(16) { left: 94%; animation-delay: 0.72s; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__confetti i:nth-child(17) { left: 25%; animation-delay: 0.85s; }
:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__confetti i:nth-child(18) { left: 65%; animation-delay: 0.90s; }

@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-confetti {
	0%   { opacity: 0; transform: translateY(-16px) rotate(0deg); }
	12%  { opacity: 1; }
	100% { opacity: 0; transform: translateY(330px) rotate(520deg); }
}

@media (prefers-reduced-motion: reduce) {
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__badge, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__ring, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__check, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__title, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__sub, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__steps, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__step, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__note, :is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__sign {
		animation: none;
		opacity: 1;
		stroke-dashoffset: 0;
	}
	:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-done__confetti {
		display: none;
	}
}

/* Review summary */

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-summary {
	max-width: 560px;
	margin: 0 auto 1.5rem;
	border: 2px solid #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 #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: #fff;
	transition: background 0.12s ease;
}

:is(#tbfs-flow,.tbfs-flow-scope) .tbfs-btn:hover {
	background: #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;
}

: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;
	}
	: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 #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: #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: #fff;
	border: 1px solid #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 #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 --- */

:is(#tbfs-flow,.tbfs-flow-scope).tbfs-flow[data-flow-style="tiles"] .tbfs-choice {
	border: 0;
	background: var(--flow-teal-light);
	border-radius: 14px;
	padding: 1.05rem 1rem;
	font-weight: 700;
	color: #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: #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: #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: #fff;
	border: 1px solid #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 #dfe9e7;
	border-radius: 999px;
	background: #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, #3f9e97);
	border-color: var(--flow-teal-dark, #3f9e97);
	color: #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;
	}
}
