/* =====================================================================
   4 Paw Friend Booking — front-end wizard styles
   All colours, fonts and surfaces are CSS custom properties. The defaults
   live here on :root; the plugin injects an inline :root block AFTER this
   file, so anything changed in Settings → Appearance overrides these.
   ===================================================================== */

:root {
	/* Brand */
	--fpb-navy: #16216b;
	--fpb-blue: #1e40c4;
	--fpb-yellow: #ffd200;
	--fpb-text: #1f2433;
	--fpb-success: #1f9d55;
	/* Surfaces & text */
	--fpb-card: #ffffff;
	--fpb-line: #e3e8f2;
	--fpb-heading: #16216b;
	--fpb-body: #1f2433;
	--fpb-muted: #6b7385;
	--fpb-soft: #eef2fb;
	--fpb-bg: #f4f6fb;
	/* Service boxes */
	--fpb-box-hover: #1e40c4;
	--fpb-box-active-bg: #1e40c4;
	--fpb-box-active-text: #ffffff;
	/* Buttons */
	--fpb-btn-bg: #1e40c4;
	--fpb-btn-text: #ffffff;
	--fpb-btn-hover: #1834a6;
	--fpb-cta-bg: #ffd200;
	--fpb-cta-text: #16216b;
	--fpb-cta-hover: #f0c800;
	--fpb-sec-bg: #eef2fb;
	--fpb-sec-text: #16216b;
	/* Steps */
	--fpb-step-active: #1e40c4;
	--fpb-step-done: #1f9d55;
	/* Calendar */
	--fpb-date-text: #1f2433;
	--fpb-select: #1e40c4;
	--fpb-added: #1f9d55;
	/* Shape & type */
	--fpb-radius: 16px;
	--fpb-radius-sm: 10px;
	--fpb-shadow: 0 1px 2px rgba(22, 33, 107, .04), 0 12px 32px -12px rgba(22, 33, 107, .18);
	--fpb-shadow-sm: 0 1px 3px rgba(22, 33, 107, .08);
	--fpb-font: 16px;
	--fpb-font-h: 22px;
}

#fpb-app,
#fpb-app *,
#fpb-app *::before,
#fpb-app *::after { box-sizing: border-box; }

/* Defend against the active theme styling its own button/anchor states and
   bleeding into the widget (e.g. a theme turning every button blue on hover).
   :where() keeps this at zero specificity so the components below always win. */
:where(#fpb-app) button {
	font: inherit;
	color: inherit;
	background: transparent;
	border: none;
	box-shadow: none;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	margin: 0;
}
:where(#fpb-app) button:hover,
:where(#fpb-app) button:focus,
:where(#fpb-app) button:active {
	background: transparent;
	color: inherit;
	box-shadow: none;
}
#fpb-app button:focus { outline: none; }

#fpb-app {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--fpb-body);
	font-size: var(--fpb-font);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	width: 100%;
	max-width: 100%;
	margin: 0;
	/* Respond to the widget's own width, not the viewport, so it never
	   overlaps when embedded in a narrow theme container. */
	container-type: inline-size;
	container-name: fpb;
}

/* ---------------------------------------------------------------- loading */
.fpb-loading {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: center;
	padding: 60px 20px;
	color: var(--fpb-muted);
	font-size: 0.94em;
}
.fpb-spinner {
	width: 22px; height: 22px;
	border: 3px solid var(--fpb-line);
	border-top-color: var(--fpb-blue);
	border-radius: 50%;
	animation: fpb-spin .8s linear infinite;
	display: inline-block;
}
@keyframes fpb-spin { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------- layout */
/* Mobile-first: single column. Columns are allowed to shrink (min-width:0 /
   minmax(0,1fr)) so content can never push past its track and overlap. */
.fpb-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	align-items: start;
}
.fpb-main {
	min-width: 0;
	/* Inner container context so the calendar/step bar respond to the main
	   column's real width, not the whole widget's. */
	container-type: inline-size;
	container-name: fpbmain;
}
.fpb-side {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

@container fpb (min-width: 880px) {
	.fpb-layout { grid-template-columns: minmax(0, 1fr) 330px; }
	.fpb-side { position: sticky; top: 24px; }
}

.fpb-card {
	background: var(--fpb-card);
	border: 1px solid var(--fpb-line);
	border-radius: var(--fpb-radius);
	box-shadow: var(--fpb-shadow);
	padding: 28px;
}

/* ------------------------------------------------------------- typography */
.fpb-h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--fpb-font-h);
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--fpb-heading);
	margin: 0 0 20px;
}
.fpb-h3 {
	font-size: calc(var(--fpb-font-h) * 0.68);
	font-weight: 700;
	color: var(--fpb-heading);
	margin: 22px 0 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.fpb-tagline { color: var(--fpb-muted); margin: -12px 0 4px; font-size: 0.9em; }
.fpb-pi { width: 1.5em; height: 1.5em; color: var(--fpb-blue); flex: none; }
.fpb-h2 .fpb-pi { width: 1.65em; height: 1.65em; }

/* ------------------------------------------------------------ step bar */
.fpb-steps {
	display: flex;
	align-items: center;
	margin-bottom: 22px;
	padding: 4px;
	min-width: 0;
}
.fpb-step {
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 0 1 auto;
	min-width: 0;
}
.fpb-step-dot {
	width: 30px; height: 30px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: var(--fpb-card);
	border: 2px solid var(--fpb-line);
	color: var(--fpb-muted);
	font-weight: 700;
	font-size: 0.82em;
	flex: none;
	transition: .2s;
}
.fpb-step-label {
	font-size: 0.82em;
	font-weight: 600;
	color: var(--fpb-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}
.fpb-step.active .fpb-step-dot {
	background: var(--fpb-step-active, var(--fpb-blue));
	border-color: var(--fpb-step-active, var(--fpb-blue));
	color: #fff;
	box-shadow: 0 0 0 4px rgba(30, 64, 196, .14);
}
.fpb-step.active .fpb-step-label { color: var(--fpb-heading, var(--fpb-navy)); }
.fpb-step.done .fpb-step-dot {
	background: var(--fpb-step-done, var(--fpb-success));
	border-color: var(--fpb-step-done, var(--fpb-success));
	color: #fff;
}
.fpb-step.done .fpb-step-label { color: var(--fpb-text); }
.fpb-step-line {
	flex: 1 1 auto;
	height: 2px;
	background: var(--fpb-line);
	margin: 0 10px;
	min-width: 16px;
	border-radius: 2px;
}

/* ---------------------------------------------------- step 1: services */
.fpb-service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 14px;
}
.fpb-service-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	text-align: left;
	background: var(--fpb-card);
	border: 1.5px solid var(--fpb-line);
	border-radius: var(--fpb-radius-sm);
	padding: 18px 16px 16px;
	cursor: pointer;
	transition: .18s;
	font: inherit;
	color: inherit;
	position: relative;
	overflow: hidden;
}
.fpb-service-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg, var(--fpb-cta-bg), var(--fpb-box-active-text));
	opacity: 0;
	transition: .18s;
}
.fpb-service-card:hover,
.fpb-service-card:focus-visible {
	background: var(--fpb-box-active-bg);
	border-color: var(--fpb-box-active-bg);
	transform: translateY(-2px);
	box-shadow: var(--fpb-shadow);
}
.fpb-service-card:hover::before,
.fpb-service-card:focus-visible::before { opacity: .9; }
/* Keep text readable when the box fills with its active colour. */
.fpb-service-card:hover .fpb-service-name,
.fpb-service-card:hover .fpb-service-from,
.fpb-service-card:focus-visible .fpb-service-name,
.fpb-service-card:focus-visible .fpb-service-from { color: var(--fpb-box-active-text); }
.fpb-service-card:hover .fpb-service-ic,
.fpb-service-card:focus-visible .fpb-service-ic {
	background: rgba(255, 255, 255, .18);
	color: var(--fpb-box-active-text);
}
.fpb-service-ic {
	width: 2.75em; height: 2.75em;
	border-radius: 12px;
	background: var(--fpb-soft);
	color: var(--fpb-btn-bg);
	display: grid;
	place-items: center;
	margin-bottom: 4px;
	transition: .18s;
}
.fpb-service-ic .fpb-pi { width: 1.6em; height: 1.6em; }
.fpb-service-name { font-weight: 700; font-size: 0.94em; color: var(--fpb-heading); }
.fpb-service-from { font-size: 0.82em; color: var(--fpb-muted); font-weight: 600; }

/* ---------------------------------------------------- step 2: options */
.fpb-dt-head { margin-bottom: 8px; }
.fpb-options { display: flex; flex-direction: column; gap: 10px; }
.fpb-opt {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	text-align: left;
	background: var(--fpb-card);
	border: 1.5px solid var(--fpb-line);
	border-radius: var(--fpb-radius-sm);
	padding: 14px 16px;
	cursor: pointer;
	transition: .15s;
	font: inherit;
	color: inherit;
}
.fpb-opt:hover,
.fpb-opt:focus-visible { border-color: var(--fpb-box-hover); background: var(--fpb-soft); }
.fpb-opt.selected {
	border-color: var(--fpb-box-hover);
	background: var(--fpb-soft);
	box-shadow: inset 0 0 0 1px var(--fpb-box-hover);
}
.fpb-opt-radio {
	width: 20px; height: 20px;
	border-radius: 50%;
	border: 2px solid var(--fpb-line);
	flex: none;
	position: relative;
	transition: .15s;
}
.fpb-opt.selected .fpb-opt-radio {
	border-color: var(--fpb-box-hover);
}
.fpb-opt.selected .fpb-opt-radio::after {
	content: "";
	position: absolute;
	inset: 3px;
	border-radius: 50%;
	background: var(--fpb-box-hover);
}
.fpb-opt-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.fpb-opt-label { font-weight: 700; color: var(--fpb-heading, var(--fpb-navy)); font-size: 0.94em; }
.fpb-opt-sub { font-size: 0.82em; color: var(--fpb-muted); }
.fpb-opt-price {
	font-weight: 800;
	color: var(--fpb-heading, var(--fpb-navy));
	font-size: 1em;
	flex: none;
}

.fpb-info {
	background: var(--fpb-soft);
	border-radius: var(--fpb-radius-sm);
	padding: 10px 14px;
	font-size: 0.82em;
	color: var(--fpb-heading, var(--fpb-navy));
	margin-bottom: 14px;
}

/* ---------------------------------------------------- calendar + times */
/* Stacked by default; side-by-side only when the main column is wide
   enough to hold both without crushing the time picker. */
.fpb-dt-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	align-items: start;
}
.fpb-cal, .fpb-pending { min-width: 0; }
@container fpbmain (min-width: 600px) {
	.fpb-dt-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.fpb-cal {
	border: 1px solid var(--fpb-line);
	border-radius: var(--fpb-radius-sm);
	padding: 14px;
	background: var(--fpb-card);
}
.fpb-cal-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}
.fpb-cal-title { font-weight: 700; color: var(--fpb-heading, var(--fpb-navy)); font-size: 0.95em; }
.fpb-cal-arrow {
	width: 2em; height: 2em;
	min-width: 28px; min-height: 28px;
	border-radius: 8px;
	border: 1px solid var(--fpb-line);
	background: var(--fpb-card);
	cursor: pointer;
	font-size: 1.1em;
	line-height: 1;
	color: var(--fpb-heading, var(--fpb-navy));
	transition: .15s;
	flex: none;
}
.fpb-cal-arrow:hover { background: var(--fpb-soft); border-color: var(--fpb-box-hover); }
.fpb-cal-grid {
	display: grid;
	/* minmax(0,1fr) lets every cell shrink so all 7 columns always fit the
	   calendar's width — no day is ever clipped or pushed behind another box. */
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
}
.fpb-cal-dow {
	text-align: center;
	font-size: 0.7em;
	font-weight: 700;
	color: var(--fpb-muted);
	padding: 4px 0;
	text-transform: uppercase;
	overflow: hidden;
}
.fpb-cal-cell {
	aspect-ratio: 1;
	border: none;
	background: var(--fpb-card);
	border-radius: 8px;
	cursor: pointer;
	font: inherit;
	font-size: 0.9em;
	font-weight: 600;
	color: var(--fpb-date-text);
	transition: .12s;
	display: grid;
	place-items: center;
	min-width: 0;
	padding: 0;
}
.fpb-cal-cell:not(.disabled):not(.empty):hover {
	background: var(--fpb-soft);
	box-shadow: inset 0 0 0 1.5px var(--fpb-box-hover);
}
.fpb-cal-cell.empty { background: transparent; cursor: default; }
.fpb-cal-cell.disabled {
	color: #c3c9d6;
	color: color-mix(in srgb, var(--fpb-date-text) 32%, transparent);
	cursor: not-allowed;
	text-decoration: line-through;
}
.fpb-cal-cell.pending {
	background: var(--fpb-select);
	color: #fff;
	box-shadow: 0 2px 8px -2px rgba(30, 64, 196, .5);
}
.fpb-cal-cell.booked {
	background: var(--fpb-added);
	color: #fff;
	position: relative;
}
.fpb-cal-cell.booked::after {
	content: "✓";
	position: absolute;
	top: 3px; right: 4px;
	font-size: 9px;
}
.fpb-cal-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-top: 12px;
	font-size: 0.75em;
	color: var(--fpb-muted);
}
.fpb-cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fpb-cal-legend .dot {
	width: 12px; height: 12px;
	border-radius: 4px;
	display: inline-block;
}
.fpb-cal-legend .dot.pending { background: var(--fpb-select); }
.fpb-cal-legend .dot.booked { background: var(--fpb-added); }

.fpb-pending {
	border: 1px dashed var(--fpb-line);
	border-radius: var(--fpb-radius-sm);
	padding: 14px;
	background: var(--fpb-card);
	min-height: 100%;
}
.fpb-pending-empty {
	color: var(--fpb-muted);
	font-size: 0.82em;
	text-align: center;
	padding: 24px 8px;
}
.fpb-pending-title {
	font-size: 0.85em;
	font-weight: 700;
	color: var(--fpb-heading, var(--fpb-navy));
	margin: 0 0 12px;
}
.fpb-pending-row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--fpb-line);
}
.fpb-pending-row:last-of-type { border-bottom: none; padding-bottom: 0; }
.fpb-pending-date {
	font-size: 0.9em;
	font-weight: 700;
	color: var(--fpb-heading, var(--fpb-navy));
	white-space: nowrap;
}
.fpb-pending-pick {
	display: flex;
	align-items: center;
	gap: 8px;
}
.fpb-time-select {
	flex: 1;
	min-width: 0;
	border: 1px solid var(--fpb-line);
	border-radius: 8px;
	padding: 9px 10px;
	font: inherit;
	font-size: 0.9em;
	background: var(--fpb-card);
	color: var(--fpb-body, var(--fpb-text));
	cursor: pointer;
}
.fpb-pending-rm {
	width: 2.2em; height: 2.2em;
	min-width: 30px; min-height: 30px;
	border: none;
	background: #fff0f0;
	color: #d92d20;
	border-radius: 8px;
	cursor: pointer;
	font-size: 0.8em;
	flex: none;
	transition: .15s;
}
.fpb-pending-rm:hover { background: #ffe0e0; }

/* --------------------------------------------------------------- buttons */
.fpb-btn {
	font: inherit;
	font-weight: 700;
	border: none;
	border-radius: var(--fpb-radius-sm);
	padding: 12px 20px;
	cursor: pointer;
	transition: .15s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	line-height: 1.2;
}
.fpb-btn:disabled { opacity: .55; cursor: not-allowed; }
.fpb-btn-primary {
	background: var(--fpb-btn-bg);
	color: var(--fpb-btn-text);
	box-shadow: 0 4px 14px -4px rgba(30, 64, 196, .5);
}
.fpb-btn-primary:not(:disabled):hover,
.fpb-btn-primary:not(:disabled):focus-visible {
	background: var(--fpb-btn-hover);
	color: var(--fpb-btn-text);
	transform: translateY(-1px);
}
.fpb-btn-secondary {
	background: var(--fpb-sec-bg);
	color: var(--fpb-sec-text);
}
.fpb-btn-secondary:hover,
.fpb-btn-secondary:focus-visible { background: var(--fpb-sec-bg); filter: brightness(.95); color: var(--fpb-sec-text); }
.fpb-btn-ghost {
	background: transparent;
	color: var(--fpb-muted);
	padding-left: 6px; padding-right: 6px;
}
.fpb-btn-ghost:hover,
.fpb-btn-ghost:focus-visible { background: transparent; color: var(--fpb-heading); }
.fpb-btn-add {
	width: 100%;
	margin-top: 10px;
	background: var(--fpb-cta-bg);
	color: var(--fpb-cta-text);
	box-shadow: 0 4px 14px -4px rgba(255, 210, 0, .7);
}
.fpb-btn-add:hover,
.fpb-btn-add:focus-visible { background: var(--fpb-cta-hover); color: var(--fpb-cta-text); transform: translateY(-1px); }
.fpb-btn-pay {
	width: 100%;
	background: var(--fpb-cta-bg);
	color: var(--fpb-cta-text);
	font-size: 1.05em;
	padding: 16px 20px;
	box-shadow: 0 6px 20px -6px rgba(255, 210, 0, .8);
}
.fpb-btn-pay:not(:disabled):hover,
.fpb-btn-pay:not(:disabled):focus-visible { background: var(--fpb-cta-hover); color: var(--fpb-cta-text); transform: translateY(-1px); }
.fpb-lock { width: 1em; height: 1em; }

.fpb-actions { margin-top: 24px; display: flex; }
.fpb-actions-split { justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.fpb-actions-right { display: flex; gap: 10px; flex-wrap: wrap; }

/* ----------------------------------------------------- step 3: details */
.fpb-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.fpb-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 0.85em;
	font-weight: 600;
	color: var(--fpb-heading, var(--fpb-navy));
}
.fpb-field-full { grid-column: 1 / -1; }
.fpb-field input,
.fpb-field textarea {
	font: inherit;
	font-size: 1.05em;
	font-weight: 500;
	padding: 11px 13px;
	border: 1.5px solid var(--fpb-line);
	border-radius: var(--fpb-radius-sm);
	color: var(--fpb-body, var(--fpb-text));
	background: var(--fpb-card);
	transition: .15s;
	width: 100%;
}
.fpb-field input:focus,
.fpb-field textarea:focus {
	outline: none;
	border-color: var(--fpb-box-hover);
	box-shadow: 0 0 0 3px rgba(30, 64, 196, .12);
}
.fpb-field textarea { resize: vertical; }
.fpb-req { color: #d92d20; }

.fpb-area-msg {
	margin-top: 18px;
	border-radius: var(--fpb-radius-sm);
	padding: 16px;
	font-size: 0.88em;
}
.fpb-area-msg.error {
	background: #fff4f4;
	border: 1px solid #f5c2c0;
	color: #b42318;
}
.fpb-area-msg.notice {
	background: #fffbeb;
	border: 1px solid #f5e08c;
	color: #8a6d00;
}
.fpb-area-msg p { margin: 0 0 12px; }
.fpb-enquiry { display: flex; flex-direction: column; gap: 10px; }
.fpb-enquiry .fpb-field { color: var(--fpb-heading, var(--fpb-navy)); }
.fpb-enquiry-result { font-size: 0.82em; color: #b42318; }
.fpb-enquiry-ok {
	color: var(--fpb-success);
	font-weight: 700;
	padding: 8px 0;
}

/* ------------------------------------------------------ step 4: review */
.fpb-review-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }
.fpb-review-row {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1px solid var(--fpb-line);
	border-radius: var(--fpb-radius-sm);
	padding: 14px 16px;
	background: var(--fpb-card);
}
.fpb-review-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.fpb-review-name { font-weight: 700; color: var(--fpb-heading, var(--fpb-navy)); }
.fpb-review-opt { font-size: 0.82em; color: var(--fpb-text); }
.fpb-review-when { font-size: 0.75em; color: var(--fpb-muted); }
.fpb-review-price { font-weight: 800; color: var(--fpb-heading, var(--fpb-navy)); }
.fpb-review-rm {
	width: 28px; height: 28px;
	border: none;
	background: #fff0f0;
	color: #d92d20;
	border-radius: 8px;
	cursor: pointer;
	flex: none;
	transition: .15s;
}
.fpb-review-rm:hover { background: #ffe0e0; }

.fpb-cust {
	background: var(--fpb-soft);
	border-radius: var(--fpb-radius-sm);
	padding: 16px 18px;
	margin-top: 8px;
}
.fpb-cust .fpb-h3 { margin-top: 0; justify-content: space-between; }
.fpb-edit {
	background: none;
	border: none;
	color: var(--fpb-btn-bg);
	font: inherit;
	font-size: 0.82em;
	font-weight: 700;
	cursor: pointer;
	text-decoration: underline;
}
.fpb-cust-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 18px;
}
.fpb-cust-grid span { display: flex; flex-direction: column; font-size: 0.88em; }
.fpb-cust-grid b { font-size: 0.7em; text-transform: uppercase; letter-spacing: .04em; color: var(--fpb-muted); font-weight: 700; }

.fpb-terms {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 20px 0;
	font-size: 0.82em;
	color: var(--fpb-text);
	cursor: pointer;
}
.fpb-terms input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--fpb-btn-bg); flex: none; }

.fpb-pay { margin-top: 8px; }
.fpb-pay-note {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.82em;
	color: var(--fpb-muted);
	margin-bottom: 12px;
	justify-content: center;
}
.fpb-pay-note .fpb-lock { color: var(--fpb-success); }

/* ------------------------------------------------- confirmation screen */
.fpb-confirm { text-align: center; max-width: 620px; margin: 0 auto; }
.fpb-conf-tick {
	width: 72px; height: 72px;
	border-radius: 50%;
	background: var(--fpb-success);
	color: #fff;
	font-size: 2.4em;
	display: grid;
	place-items: center;
	margin: 0 auto 18px;
	box-shadow: 0 8px 24px -6px rgba(31, 157, 85, .55);
	animation: fpb-pop .4s ease;
}
@keyframes fpb-pop { 0% { transform: scale(.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.fpb-conf-h { font-size: calc(var(--fpb-font-h) * 1.15); font-weight: 800; color: var(--fpb-heading); margin: 0 0 6px; }
.fpb-conf-sub { color: var(--fpb-muted); margin: 0 0 22px; }
.fpb-conf-ref {
	background: var(--fpb-soft);
	border-radius: var(--fpb-radius-sm);
	padding: 18px;
	margin-bottom: 20px;
}
.fpb-conf-ref span { font-size: 0.75em; text-transform: uppercase; letter-spacing: .05em; color: var(--fpb-muted); font-weight: 700; }
.fpb-conf-ref strong { display: block; font-size: 1.5em; color: var(--fpb-heading, var(--fpb-navy)); letter-spacing: .02em; margin-top: 2px; }
.fpb-conf-ref p { margin: 8px 0 0; font-size: 0.82em; color: var(--fpb-muted); }
.fpb-conf-details, .fpb-conf-next {
	text-align: left;
	border: 1px solid var(--fpb-line);
	border-radius: var(--fpb-radius-sm);
	padding: 18px;
	margin-bottom: 16px;
}
.fpb-conf-details .fpb-h3, .fpb-conf-next .fpb-h3 { margin-top: 0; }
.fpb-conf-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid var(--fpb-line);
	font-size: 0.88em;
}
.fpb-conf-row:last-of-type { border-bottom: none; }
.fpb-conf-row small { color: var(--fpb-muted); }
.fpb-conf-total {
	display: flex;
	justify-content: space-between;
	padding-top: 14px;
	margin-top: 4px;
	border-top: 2px solid var(--fpb-line);
	font-size: 1.05em;
	color: var(--fpb-heading, var(--fpb-navy));
}
.fpb-conf-total b { font-weight: 800; }
.fpb-conf-next ul { margin: 0; padding-left: 20px; color: var(--fpb-text); font-size: 0.88em; }
.fpb-conf-next li { margin-bottom: 6px; }
.fpb-conf-help {
	font-size: 0.82em;
	color: var(--fpb-muted);
	padding-top: 8px;
}

/* --------------------------------------------------------- sidebar cards */
.fpb-summary, .fpb-why {
	background: var(--fpb-card);
	border: 1px solid var(--fpb-line);
	border-radius: var(--fpb-radius);
	box-shadow: var(--fpb-shadow-sm);
	padding: 20px;
}
.fpb-summary-h, .fpb-why-h {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: calc(var(--fpb-font-h) * 0.68);
	font-weight: 800;
	color: var(--fpb-heading);
	margin: 0 0 14px;
}
.fpb-summary-empty { color: var(--fpb-muted); font-size: 0.82em; }
.fpb-summary-body { display: flex; flex-direction: column; gap: 10px; }
.fpb-summary-line {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	font-size: 0.88em;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--fpb-line);
}
.fpb-summary-line:last-child { border-bottom: none; padding-bottom: 0; }
.fpb-summary-line small { color: var(--fpb-muted); }
.fpb-summary-line b { color: var(--fpb-heading, var(--fpb-navy)); white-space: nowrap; }
.fpb-summary-total {
	display: flex;
	justify-content: space-between;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 2px solid var(--fpb-line);
	font-size: 1.05em;
	font-weight: 800;
	color: var(--fpb-heading, var(--fpb-navy));
}

.fpb-why { background: var(--fpb-navy); border-color: var(--fpb-navy); }
.fpb-why-h { color: #fff; }
.fpb-why-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fpb-why-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.88em;
	color: rgba(255, 255, 255, .9);
}
.fpb-check {
	width: 20px; height: 20px;
	border-radius: 50%;
	background: var(--fpb-yellow);
	color: var(--fpb-heading, var(--fpb-navy));
	font-size: 0.75em;
	font-weight: 800;
	display: grid;
	place-items: center;
	flex: none;
}

/* --------------------------------------------------------- responsive */
/* Breakpoints react to the widget's own width (container queries), so the
   layout stays correct whether it's full-width or inside a narrow themed
   column — the case the screenshots showed. */

/* Narrow widget overall */
@container fpb (max-width: 600px) {
	.fpb-card { padding: 20px 16px; }
}

/* Main column getting tight: drop the step text labels to clean numbered
   dots so nothing can run under the sidebar. */
@container fpbmain (max-width: 760px) {
	.fpb-step-label { display: none; }
	.fpb-step-line { margin: 0 6px; }
}

/* Main column narrow: stack paired fields and stack action buttons. */
@container fpbmain (max-width: 540px) {
	.fpb-fields { grid-template-columns: 1fr; }
	.fpb-cust-grid { grid-template-columns: 1fr; }
	.fpb-h2 { font-size: calc(var(--fpb-font-h) * 0.85); }
	.fpb-actions-split { flex-direction: column-reverse; align-items: stretch; }
	.fpb-actions-right { flex-direction: column; }
	.fpb-actions-right .fpb-btn { width: 100%; }
}

/* Fallback for browsers without container-query support: collapse to a
   single column on small screens so it degrades gracefully. */
@supports not (container-type: inline-size) {
	@media (max-width: 900px) {
		.fpb-layout { grid-template-columns: 1fr; }
		.fpb-dt-grid { grid-template-columns: 1fr; }
		.fpb-step-label { display: none; }
	}
}