/* ═══════════════════════════════════════════════════════════════
   Techreme CleanPro — Booking Form
   Design: Card-based, clean, trust-inspiring
   Typeface: system-ui with refined sizing
   ═══════════════════════════════════════════════════════════════ */

:root {
	--tcp-accent:        #1d4ed8;
	--tcp-accent-dark:   #1e40af;
	--tcp-accent-light:  #eff6ff;
	--tcp-accent-ring:   rgba(29,78,216,.18);
	--tcp-success:       #059669;
	--tcp-success-bg:    #ecfdf5;
	--tcp-error:         #dc2626;
	--tcp-error-bg:      #fef2f2;
	--tcp-warn-bg:       #fffbeb;
	--tcp-text:          #0f172a;
	--tcp-text-muted:    #64748b;
	--tcp-text-light:    #94a3b8;
	--tcp-border:        #e2e8f0;
	--tcp-border-focus:  var(--tcp-accent);
	--tcp-bg:            #f8fafc;
	--tcp-card-bg:       #ffffff;
	--tcp-shadow-sm:     0 1px 2px rgba(0,0,0,.06);
	--tcp-shadow:        0 4px 6px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08);
	--tcp-shadow-lg:     0 10px 24px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
	--tcp-radius:        10px;
	--tcp-radius-sm:     6px;
	--tcp-radius-lg:     14px;
}

/* ── Outer centering shell ────────────────────────────────────── */
.tcp-booking-outer {
	width: 100%;
	box-sizing: border-box;
	padding: 0 1%;
}

/* Pull the theme's own page-to-footer spacing tighter on booking-form pages only */
body:has(.tcp-booking-outer) footer {
	margin-top: 0 !important;
}
body:has(.tcp-booking-outer) main.wp-block-group,
body:has(.tcp-booking-outer) main .wp-block-group:last-child {
	padding-bottom: 0 !important;
}

/* ── Wrapper ──────────────────────────────────────────────────── */
.tcp-booking-form {
	width: 100% !important;
	max-width: 1440px !important;
	margin: 0 auto !important;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	color: var(--tcp-text);
	background: var(--tcp-bg);
	border-radius: var(--tcp-radius-lg);
	padding: 0;
}

/* ── Step image banner ───────────────────────────────────────── */
.tcp-step-banner {
	width: 100%;
	height: 180px;
	object-fit: cover;
	border-radius: var(--tcp-radius-lg) var(--tcp-radius-lg) 0 0;
	display: block;
}

/* ── Progress ─────────────────────────────────────────────────── */
.tcp-progress-wrap {
	background: var(--tcp-card-bg);
	border-radius: var(--tcp-radius-lg) var(--tcp-radius-lg) 0 0;
	padding: 20px 24px 0;
}

/* Bar style */
.tcp-progress--bar {
	display: flex;
	gap: 4px;
	margin-bottom: 20px;
}
.tcp-progress--bar .tcp-prog-step {
	flex: 1;
	height: 5px;
	background: var(--tcp-border);
	border-radius: 3px;
	transition: background .3s, box-shadow .3s;
}
.tcp-booking-form .tcp-progress--bar .tcp-prog-step--done { background: var(--tcp-accent) !important; opacity: .6; }
.tcp-booking-form .tcp-progress--bar .tcp-prog-step--active {
	background: var(--tcp-accent) !important;
	box-shadow: 0 0 8px rgba(29,78,216,.45) !important;
}

/* Steps style */
.tcp-progress--steps {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	overflow-x: auto;
	gap: 0;
}
.tcp-progress--steps .tcp-prog-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
	position: relative;
}
.tcp-progress--steps .tcp-prog-step::before {
	content: '';
	position: absolute;
	top: 16px;
	left: -50%;
	width: 100%;
	height: 2px;
	background: var(--tcp-border);
	z-index: 0;
}
.tcp-progress--steps .tcp-prog-step:first-child::before { display: none; }
.tcp-progress--steps .tcp-prog-step--done::before,
.tcp-progress--steps .tcp-prog-step--active::before { background: var(--tcp-accent); }
.tcp-prog-step__num {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--tcp-border);
	color: var(--tcp-text-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	position: relative;
	z-index: 1;
	transition: background .2s, color .2s;
}
.tcp-prog-step--active .tcp-prog-step__num { background: var(--tcp-accent); color: #fff; }
.tcp-prog-step--done   .tcp-prog-step__num { background: var(--tcp-accent); color: #fff; }
.tcp-prog-step__icon   { font-size: 16px; margin-bottom: 2px; }
.tcp-prog-step__label  { font-size: 9px; color: var(--tcp-text-muted); margin-top: 4px; white-space: nowrap; }

/* Dots style */
.tcp-progress--dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 20px;
}
.tcp-progress--dots .tcp-prog-step {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--tcp-border);
	transition: background .2s, transform .2s;
}
.tcp-progress--dots .tcp-prog-step--active {
	background: var(--tcp-accent);
	transform: scale(1.3);
}
.tcp-progress--dots .tcp-prog-step--done { background: var(--tcp-accent); opacity: .5; }

/* ── Step card ────────────────────────────────────────────────── */
.tcp-step { display: none; }
.tcp-step--active { display: block; }

.tcp-step-card {
	background: var(--tcp-card-bg);
	border-radius: var(--tcp-radius-lg);
	box-shadow: var(--tcp-shadow);
	overflow: hidden;
	margin-bottom: 16px;
}

.tcp-booking-form .tcp-step-header {
	padding: 28px 28px 20px;
	background: linear-gradient(135deg, #f0f7ff 0%, #ffffff 60%) !important;
	border-bottom: 1px solid var(--tcp-border);
}
.tcp-step-icon {
	font-size: var(--tcp-fs-3xl);
	line-height: 1;
	margin-bottom: 10px;
}
.tcp-step__title {
	font-size: var(--tcp-fs-xl);
	font-weight: 800;
	color: var(--tcp-text);
	margin: 0 0 6px;
	line-height: 1.2;
}
.tcp-step__subtitle {
	font-size: var(--tcp-fs-base);
	color: var(--tcp-text-muted);
	margin: 0;
}
.tcp-step-body {
	padding: 24px 28px 28px;
}

/* ── Buttons ──────────────────────────────────────────────────── */
.tcp-step__nav {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 28px;
	border-top: 1px solid var(--tcp-border);
	background: var(--tcp-bg);
}
/* Push primary to right edge */
.tcp-step__nav .tcp-btn--primary,
.tcp-step__nav .tcp-btn--confirm { margin-left: auto; }
/* First step has no back button — primary fills right naturally */
.tcp-step__nav .tcp-btn--primary:first-child { margin-left: auto; }

.tcp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 26px;
	border-radius: var(--tcp-radius);
	font-size: var(--tcp-fs-base);
	font-weight: 600;
	cursor: pointer;
	border: 2px solid transparent;
	transition: all .15s;
	text-decoration: none;
	white-space: nowrap;
	min-height: 46px;
}
.tcp-btn--primary {
	background: var(--tcp-accent);
	color: #fff;
	border-color: var(--tcp-accent);
	box-shadow: 0 2px 8px var(--tcp-accent-ring);
}
.tcp-btn--primary:hover { background: var(--tcp-accent-dark); border-color: var(--tcp-accent-dark); transform: translateY(-1px); box-shadow: 0 4px 14px var(--tcp-accent-ring); }
/* Back button: ghost style — less prominent */
.tcp-booking-form .tcp-btn--secondary {
	background: transparent !important;
	color: var(--tcp-text-muted) !important;
	border-color: transparent !important;
	padding-left: 4px;
	padding-right: 4px;
	box-shadow: none !important;
}
.tcp-booking-form .tcp-btn--secondary:hover {
	color: var(--tcp-text) !important;
	background: var(--tcp-bg) !important;
	border-color: var(--tcp-border) !important;
}
.tcp-btn--confirm {
	background: var(--tcp-success);
	color: #fff;
	border-color: var(--tcp-success);
	box-shadow: 0 2px 8px rgba(5,150,105,.2);
	font-size: var(--tcp-fs-md);
	padding: 14px 32px;
}
.tcp-btn--confirm:hover { background: #047857; transform: translateY(-1px); }
.tcp-btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

/* ── Service cards ────────────────────────────────────────────── */
.tcp-service-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
	margin-bottom: var(--tcp-space-section);
}
.tcp-service-card {
	display: flex;
	flex-direction: column;
	padding: 18px;
	border: 2px solid var(--tcp-border);
	border-radius: var(--tcp-radius);
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s, background .15s;
	position: relative;
	background: var(--tcp-card-bg);
	min-height: 100px;
}
.tcp-service-card input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	top: 0;
	left: 0;
	margin: 0;
}
.tcp-service-card:hover {
	border-color: var(--tcp-accent);
	box-shadow: 0 4px 12px rgba(29,78,216,.10);
	transform: translateY(-1px);
}
.tcp-service-card--selected,
.tcp-service-card:has(input:checked) {
	border: 2px solid var(--tcp-accent) !important;
	background: var(--tcp-accent-light) !important;
	box-shadow: 0 0 0 3px var(--tcp-accent-ring) !important;
}
.tcp-service-card__check {
	display: none;
	width: 22px;
	height: 22px;
	background: var(--tcp-accent);
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	position: absolute;
	top: 12px;
	right: 12px;
	box-shadow: 0 2px 6px rgba(29,78,216,.3);
}
.tcp-service-card:has(input:checked) .tcp-service-card__check { display: flex; }
.tcp-service-card__name { font-weight: 700; font-size: var(--tcp-fs-md); margin-bottom: 6px; color: var(--tcp-text); }
.tcp-service-card__desc { font-size: var(--tcp-fs-sm); color: var(--tcp-text-muted); flex: 1; line-height: 1.5; }
.tcp-service-card__price { font-size: var(--tcp-fs-sm); font-weight: 700; color: var(--tcp-accent); margin-top: 12px; }

/* ── Subtype cards (Step 2) ───────────────────────────────────── */
.tcp-subtype-mode { display: none; }
.tcp-subtype-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 200px));
	gap: 12px;
	margin-bottom: var(--tcp-space-section);
}
.tcp-subtype-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 18px 12px;
	border: 2px solid var(--tcp-border);
	border-radius: var(--tcp-radius);
	background: var(--tcp-card-bg);
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s, background .15s, transform .15s;
	text-align: center;
	position: relative;
	min-height: 90px;
	font-family: inherit;
}
.tcp-subtype-card:hover {
	border-color: var(--tcp-accent);
	background: var(--tcp-accent-light);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(29,78,216,.10);
}
.tcp-subtype-card--selected {
	border: 2px solid var(--tcp-accent);
	background: var(--tcp-accent-light);
	box-shadow: 0 0 0 3px var(--tcp-accent-ring);
}
.tcp-subtype-card--hidden { display: none !important; }
.tcp-subtype-card__icon {
	font-size: var(--tcp-fs-2xl);
	line-height: 1;
}
.tcp-subtype-card__name {
	font-size: var(--tcp-fs-sm);
	font-weight: 700;
	color: var(--tcp-text);
	line-height: 1.3;
}
.tcp-subtype-card--selected .tcp-subtype-card__name { color: var(--tcp-accent); }
/* Tick badge — top-right */
.tcp-subtype-card__tick {
	display: none;
	position: absolute;
	top: 7px;
	right: 7px;
	width: 20px;
	height: 20px;
	background: var(--tcp-accent);
	border-radius: 50%;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 4px rgba(29,78,216,.25);
}
.tcp-subtype-card--selected .tcp-subtype-card__tick { display: flex; }

/* Subtype card — full image (covers top of card) */
.tcp-subtype-card--has-image { padding: 0; overflow: hidden; align-items: stretch; justify-content: flex-start; }
.tcp-subtype-card__img { width: 100%; height: 110px; max-height: 110px; object-fit: cover; display: block; flex-shrink: 0; border-radius: 10px 10px 0 0; }
.tcp-subtype-card--has-image .tcp-subtype-card__name { padding: 8px 10px; text-align: center; flex: 1; }
/* Subtype card — small media-library icon above name */
.tcp-subtype-card__icon-img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; margin-bottom: 4px; }

/* ── Icon dropdown (Subtype step, "Dropdown" display mode) ──────── */
.tcp-icon-dropdown { position: relative; }
.tcp-icon-dropdown__trigger {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--tcp-border);
	border-radius: var(--tcp-radius);
	background: var(--tcp-card-bg);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--tcp-fs-base);
	text-align: left;
}
.tcp-icon-dropdown__trigger:hover,
.tcp-icon-dropdown__trigger[aria-expanded="true"] {
	border-color: var(--tcp-accent);
}
.tcp-icon-dropdown__trigger-media {
	flex: 0 0 28px;
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tcp-icon-dropdown__trigger-media img { width: 28px; height: 28px; object-fit: cover; border-radius: 6px; }
/* No option selected yet (placeholder state) - this span is rendered empty
   (see class-field-renderer.php / techreme-cleanpro-booking.js's reset
   path) and JS only ever fills it via .html(), never leaves stray
   whitespace, so :empty reliably means "nothing selected". Hidden here so
   the placeholder text doesn't reserve icon space it isn't using; the
   trade-off (developer-confirmed acceptable 2026-07-28) is that the text
   shifts right once a real option with an icon is picked. */
.tcp-icon-dropdown__trigger-media:empty { display: none; }
.tcp-icon-dropdown__trigger-text { flex: 1; color: var(--tcp-text); font-weight: 600; }
.tcp-icon-dropdown__caret { color: var(--tcp-text-muted); font-size: var(--tcp-fs-xs); flex-shrink: 0; }
.tcp-icon-dropdown__panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 20;
	background: var(--tcp-card-bg);
	border: 1.5px solid var(--tcp-border);
	border-radius: var(--tcp-radius);
	box-shadow: var(--tcp-shadow-lg);
	max-height: 320px;
	overflow-y: auto;
}
.tcp-icon-dropdown__option {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	cursor: pointer;
	border-bottom: 1px solid var(--tcp-border);
}
.tcp-icon-dropdown__option:last-child { border-bottom: none; }
.tcp-icon-dropdown__option:hover,
.tcp-icon-dropdown__option[aria-selected="true"] {
	background: var(--tcp-accent-light);
}
.tcp-icon-dropdown__option-media {
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tcp-icon-dropdown__option-media img { width: 32px; height: 32px; object-fit: cover; border-radius: 6px; }
.tcp-icon-dropdown__option-photo { border-radius: 50% !important; }
.tcp-icon-dropdown__emoji { font-size: var(--tcp-fs-xl); line-height: 1; }
.tcp-icon-dropdown__option-text { display: flex; flex-direction: column; gap: 2px; }
.tcp-icon-dropdown__option-name { font-weight: 700; font-size: var(--tcp-fs-sm); color: var(--tcp-text); }
.tcp-icon-dropdown__option-desc { font-size: var(--tcp-fs-xs); color: var(--tcp-text-muted); }

/* ── Service card icon style ──────────────────────────────────── */
.tcp-service-card--icon { align-items: center; text-align: center; }
.tcp-service-card--icon .tcp-service-card__icon { font-size: var(--tcp-fs-3xl); margin-bottom: 8px; line-height: 1; }
.tcp-service-card--icon .tcp-service-card__name  { text-align: center; }
.tcp-service-card--icon .tcp-service-card__desc  { text-align: center; }

/* ── Service card image style ─────────────────────────────────── */
.tcp-service-card--image { padding: 0; overflow: hidden; }
.tcp-service-card--image .tcp-service-card__img  { width: 100%; height: 150px; object-fit: cover; display: block; }
.tcp-service-card--image .tcp-service-card__name { padding: 14px 14px 4px; text-align: center; }
.tcp-service-card--image .tcp-service-card__price{ padding: 0 14px 14px; text-align: center; }

/* Recurring type selector — no margin-bottom here: this row is always the
   last element inside the Service Selector's .tcp-booking-widget, and the
   outer wrapper's own .tcp-fields-grid > .tcp-booking-widget rule already
   accounts for the full --tcp-space-section gap (minus the grid's row-gap).
   Adding a second margin here double-counted the section gap (measured
   64px instead of the intended 32px). */
.tcp-service-type { margin-bottom: 0; }
.tcp-radio-group { display: flex; gap: 10px; flex-wrap: wrap; }
.tcp-radio-pill {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 2px solid var(--tcp-border);
	border-radius: 999px;
	cursor: pointer;
	font-size: var(--tcp-fs-base);
	font-weight: 600;
	transition: all .15s;
}
.tcp-radio-pill input { display: none; }
.tcp-radio-pill:has(input:checked) { border-color: var(--tcp-accent); background: var(--tcp-accent-light); color: var(--tcp-accent); }

/* ── Counters ─────────────────────────────────────────────────── */
.tcp-room-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 14px;
	margin-bottom: var(--tcp-space-section);
}
.tcp-counter { text-align: center; width: 100%; }
.tcp-counter-label { font-size: var(--tcp-fs-xs); font-weight: 600; color: var(--tcp-text-muted); margin-bottom: 8px; display: block; }
.tcp-counter__controls {
	display: flex;
	align-items: center;
	width: 100%;
	border: 2px solid var(--tcp-border);
	border-radius: var(--tcp-radius);
	overflow: hidden;
	background: #fff;
}
.tcp-counter__btn {
	width: 32px;
	height: 34px;
	/* Matches the form's own admin-configurable button color (--tcp-btn-bg, set per-form in
	   Form Builder → Settings) so the counter buttons stay visually consistent with the theme's
	   "Next" button; falls back to the base accent color on themes that don't define it. */
	background: var(--tcp-btn-bg, var(--tcp-accent));
	border: 0;
	font-size: var(--tcp-fs-md);
	cursor: pointer;
	color: var(--tcp-btn-text, #fff);
	transition: background .1s, color .1s, opacity .1s;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tcp-counter__btn:hover { opacity: .85; }
.tcp-counter__btn:focus {
	outline: none;
	opacity: .85;
	box-shadow: inset 0 0 0 2px rgba(0,0,0,.15);
	/* No clip-path here — .tcp-counter__controls already has overflow:hidden + its own
	   border-radius, which correctly clips this ring to the pill's rounded silhouette.
	   Applying clip-path directly to the button forced a rounded corner onto a square-edged
	   segment of the pill (the middle/inner edges), showing as a floating rounded patch. */
}
.tcp-counter__input:focus {
	outline: none;
	background: var(--tcp-accent-light);
}
.tcp-counter__input {
	flex: 1;
	min-width: 0;
	text-align: center;
	border: 0;
	border-left: 2px solid var(--tcp-border);
	border-right: 2px solid var(--tcp-border);
	height: 34px;
	font-size: var(--tcp-fs-base);
	font-weight: 700;
	color: var(--tcp-text);
	background: #fff;
}
/* Card-mode counters share the plugin's normal 6-column span system (same pattern as
   .tcp-fields-grid > .tcp-field-group.tcp-field--half/third) so each card's admin-configured
   Width renders at its exact fraction of the row — kept as its own grid (not merged into
   .tcp-fields-grid itself) so a tall image card never strands short stepper rows in leftover
   whitespace beside it.
   History: this used to be `grid-template-columns: repeat(auto-fill, minmax(150px, 200px))`,
   which packed as many ~150-200px cards as fit per row regardless of each card's configured
   Width — Full/Half/Third all rendered identically. A first fix (2026-07-28) special-cased
   only Full via its own solo auto-fit group, but Half/Third still didn't render at their
   actual 50%/33% — confirmed by the developer directly: "now set to 33% but why its not
   33%". Switched to this exact 6-column span model instead, which is correct for all three
   widths at once and needs no special-casing in JS beyond carrying the field's own
   widthClass onto its cell (see techreme-cleanpro-booking.js). */
.tcp-counter-card-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
	margin-bottom: var(--tcp-space-section);
}
.tcp-counter-card-grid > .tcp-counter-card-cell.tcp-field--full  { grid-column: span 6; }
.tcp-counter-card-grid > .tcp-counter-card-cell.tcp-field--half  { grid-column: span 3; }
.tcp-counter-card-grid > .tcp-counter-card-cell.tcp-field--third { grid-column: span 2; }
.tcp-counter-card-cell { display: flex; min-width: 0; }
.tcp-counter-card-cell .tcp-counter--card { width: 100%; }

/* Counter — "Card" display mode mirrors the Subtype card pattern exactly:
   full-bleed image/icon fills the top, name banner below, stepper where the tick would sit. */
.tcp-counter--card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 18px 14px;
	border: 2px solid var(--tcp-border);
	border-radius: var(--tcp-radius);
	background: var(--tcp-card-bg);
	box-shadow: var(--tcp-shadow-sm);
	transition: border-color .15s, box-shadow .15s;
	height: 100%;
	box-sizing: border-box;
	text-align: center;
}
/* Subtle signal only — a non-zero value tints the border slightly, no glow ring, and clicking
   inside the card (buttons/input) no longer changes the card's own border at all. */
.tcp-counter--card:has(.tcp-counter__input[value]:not([value="0"])) {
	border-color: var(--tcp-accent-ring);
}
.tcp-counter--card .tcp-counter-label { font-size: var(--tcp-fs-base); margin: 0 0 14px; order: 2; }
.tcp-counter--card .tcp-counter__controls { max-width: 200px; order: 3; }
/* Has-image variant: full-bleed photo flush to the card edges, exactly like .tcp-subtype-card--has-image */
.tcp-counter--card-has-image {
	padding: 0 0 16px;
	overflow: hidden;
}
.tcp-counter--card-has-image .tcp-counter-card__img {
	width: 100%;
	height: 110px;
	max-height: 110px;
	object-fit: cover;
	display: block;
	flex-shrink: 0;
	border-radius: 10px 10px 0 0;
	order: 1;
	margin-bottom: 12px;
}
.tcp-counter--card-has-image .tcp-counter-label { padding: 0 10px; }
.tcp-counter--card-has-image .tcp-counter__controls {
	width: calc(100% - 28px);
	max-width: none;
	align-self: center;
}

/* Icon Tile card style — a completely separate style from Photo Banner (do not merge/reuse
   its classes). When a photo/icon IS set, it renders identically flush/full-bleed at the top
   (no padding, no rounded well, no background tint) — the only real difference from Photo
   Banner is the fallback: when NO photo/icon is set, it shows a small generic placeholder
   glyph instead of nothing. */
.tcp-counter--card-tile.tcp-counter--card-tile-has-image {
	padding: 0 0 16px;
	overflow: hidden;
}
.tcp-counter-card__tile-img {
	width: 100%;
	height: 110px;
	max-height: 110px;
	object-fit: cover;
	display: block;
	flex-shrink: 0;
	border-radius: 10px 10px 0 0;
	order: 1;
	margin-bottom: 12px;
}
/* Order below the photo is stepper first, then the field name label underneath (opposite of
   Photo Banner's label-then-stepper order) — matches the Icon Tile reference exactly. */
.tcp-counter--card-tile .tcp-counter__controls { order: 2; }
.tcp-counter--card-tile .tcp-counter-label { order: 3; margin: 10px 0 0; }
.tcp-counter--card-tile-has-image .tcp-counter-label { padding: 0 10px; }
.tcp-counter--card-tile-has-image .tcp-counter__controls {
	width: calc(100% - 28px);
	max-width: none;
	align-self: center;
}
/* No photo/icon set: plain white card, small generic placeholder glyph centered where the
   photo would be — never a colored background tint. */
.tcp-counter-card__tile-placeholder {
	width: 96px;
	height: 96px;
	margin-bottom: 14px;
	position: relative;
	border: 1.5px solid var(--tcp-border);
	border-radius: 12px;
}
.tcp-counter-card__tile-placeholder::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 55%;
	width: 32px;
	height: 24px;
	transform: translate(-50%, -50%);
	background:
		linear-gradient(135deg, transparent 45%, var(--tcp-text-light) 46%, var(--tcp-text-light) 54%, transparent 55%) bottom left / 60% 60% no-repeat,
		linear-gradient(45deg, transparent 45%, var(--tcp-text-light) 46%, var(--tcp-text-light) 54%, transparent 55%) bottom right / 60% 60% no-repeat;
}
.tcp-counter-card__tile-placeholder::after {
	content: "";
	position: absolute;
	left: 30%;
	top: 28%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--tcp-text-light);
}

/* Icon Row card style: compact — icon + label on their own line at the top, full-width
   stepper below (same proportions as the other card styles, just without a large image/well). */
.tcp-counter--card-row {
	align-items: stretch;
	padding: 14px 16px;
}
.tcp-counter--card-row .tcp-counter-label {
	order: 1;
	margin: 0 0 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: var(--tcp-fs-base);
	text-align: center;
	width: 100%;
	min-width: 0;
}
.tcp-counter--card-row .tcp-counter-label > span:last-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.tcp-counter--card-row .tcp-counter__controls { order: 2; width: 100%; max-width: none; }
.tcp-counter-card__row-icon {
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.tcp-counter-card__row-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }

.tcp-checkbox-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: var(--tcp-space-section); width: 100%; }
.tcp-checkbox-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--tcp-fs-base);
	font-weight: 500;
	cursor: pointer;
	padding: 8px 14px;
	border: 2px solid var(--tcp-border);
	border-radius: var(--tcp-radius-sm);
	transition: all .15s;
	flex: 1;
}
.tcp-checkbox-label:has(input:checked) { border-color: var(--tcp-accent); background: var(--tcp-accent-light); color: var(--tcp-accent); }

/* ── Extras ───────────────────────────────────────────────────── */
.tcp-extras-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 16px;
	margin-bottom: var(--tcp-space-section);
}
/* Per-extra Width (Full/Half/Third), set on the Extra add/edit admin form —
   same scale as Service Configuration's field-width grid (span out of 6). */
.tcp-extra-card { grid-column: span 6; }
.tcp-extra-card--width-half  { grid-column: span 3; }
.tcp-extra-card--width-third { grid-column: span 2; }
@media (max-width: 640px) {
	.tcp-extra-card--width-half,
	.tcp-extra-card--width-third { grid-column: span 6; }
}
.tcp-extra-card {
	display: flex;
	flex-direction: column;
	border: 2px solid var(--tcp-border);
	border-radius: var(--tcp-radius);
	overflow: hidden;
	transition: border-color .15s, box-shadow .15s, transform .15s;
	background: var(--tcp-card-bg);
	box-shadow: var(--tcp-shadow-sm);
	position: relative;
	min-height: 140px;
}
.tcp-extra-card:hover {
	border-color: var(--tcp-accent-ring, var(--tcp-accent));
	transform: translateY(-1px);
}
.tcp-extra-card--selected {
	border-color: var(--tcp-accent);
	box-shadow: 0 0 0 3px var(--tcp-accent-light);
}
/* Selected tick badge — top-right corner */
.tcp-extra-card__tick-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--tcp-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 2;
	box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.tcp-extra-card--selected .tcp-extra-card__tick-badge { display: flex; }
/* Image card */
.tcp-extra-card__img {
	width: 100%;
	height: 120px;
	object-fit: cover;
	display: block;
}
/* Icon card */
.tcp-extra-card__icon {
	font-size: var(--tcp-fs-2xl);
	text-align: center;
	padding: 16px 0 4px;
	line-height: 1;
}
/* Body */
.tcp-extra-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 12px 14px 8px;
	flex: 1;
}
.tcp-extra-card__name  { font-size: var(--tcp-fs-base); font-weight: 700; color: var(--tcp-text); }
.tcp-extra-card__desc  { font-size: var(--tcp-fs-xs); color: #6b7280; line-height: 1.4; }
.tcp-extra-card__price { font-size: var(--tcp-fs-sm); font-weight: 700; color: var(--tcp-accent); margin-top: 4px; }
/* Footer */
.tcp-extra-card__footer {
	padding: 10px 14px 12px;
	border-top: 1px solid var(--tcp-border);
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Checkbox extras — pill toggle switch (same visual language as the
   config-field toggle used elsewhere, e.g. "Any Additional Room"). */
.tcp-extra-toggle-switch {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	user-select: none;
}
.tcp-extra-toggle__label {
	font-size: var(--tcp-fs-sm);
	font-weight: 600;
	color: var(--tcp-text-muted, #6b7280);
	transition: color .15s;
}
.tcp-extra-toggle-switch .tcp-toggle-input:checked ~ .tcp-extra-toggle__label {
	color: var(--tcp-accent);
}
/* Quantity stepper */
.tcp-extra-qty {
	display: flex;
	align-items: center;
	gap: 6px;
}
.tcp-extra-qty__btn {
	width: 36px;
	height: 36px;
	border: 2px solid var(--tcp-border);
	border-radius: 8px;
	background: #fff;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: border-color .15s, background .15s;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	touch-action: manipulation;
}
.tcp-extra-qty__btn:hover { border-color: var(--tcp-accent); background: var(--tcp-accent-light); }
.tcp-extra-qty__input {
	width: 46px;
	text-align: center;
	border: 2px solid var(--tcp-border);
	border-radius: 6px;
	padding: 6px 0;
	font-size: var(--tcp-fs-base);
	font-weight: 700;
	color: #374151;
	transition: border-color .15s, color .15s;
}
.tcp-extra-card--selected .tcp-extra-qty__input {
	border-color: var(--tcp-accent);
	color: var(--tcp-accent);
}

/* ── Form inputs ──────────────────────────────────────────────── */
.tcp-field-group { margin-bottom: var(--tcp-space-section); }
.tcp-field-row { display: grid; gap: 16px; margin-bottom: var(--tcp-space-section); }
.tcp-field-row--2 { grid-template-columns: 1fr 1fr; }
.tcp-field-row--3 { grid-template-columns: 2fr 1fr 1fr; }
.tcp-label {
	display: block;
	font-size: var(--tcp-fs-sm);
	font-weight: 700;
	color: var(--tcp-text-muted);
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: var(--tcp-space-label);
}
.tcp-required { color: var(--tcp-error); margin-left: 2px; }
.tcp-input, .tcp-select, .tcp-textarea {
	display: block;
	width: 100%;
	padding: 11px 14px;
	border: 2px solid var(--tcp-border);
	border-radius: var(--tcp-radius-sm);
	font-size: var(--tcp-fs-base);
	/* Explicit, host-independent line-height — same class of bug as the rem font-size
	   fix earlier this session (see tcp-design-tokens.css): this rule never set its own
	   line-height, so it silently inherited the host theme's value (confirmed live
	   2026-07-28: the host theme sets line-height:40px, making every .tcp-select here —
	   e.g. the datepicker's month/year dropdowns — render at ~64px tall instead of a
	   normal ~42px, despite 14px text and 22px of padding). A different host theme could
	   set a completely different value with the same effect, so this must not depend on
	   the host at all. */
	line-height: 1.4;
	background: var(--tcp-card-bg);
	color: var(--tcp-text);
	transition: border-color .15s, box-shadow .15s;
	box-sizing: border-box;
	appearance: auto;
}
.tcp-input:focus, .tcp-select:focus, .tcp-textarea:focus {
	outline: none;
	border-color: var(--tcp-accent);
	box-shadow: 0 0 0 4px var(--tcp-accent-ring);
}
.tcp-input::placeholder { color: var(--tcp-text-light); }
.tcp-input--date { max-width: 240px; }
.tcp-field-note { font-size: var(--tcp-fs-xs); color: var(--tcp-text-light); margin: 5px 0 0; }
.tcp-input-icon { position: relative; }
.tcp-input-icon .tcp-input { padding-left: 40px; }
.tcp-input-icon__sym {
	position: absolute;
	left: 13px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--tcp-text-light);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.tcp-input-icon__sym svg { display: block; }

/* ── Address message ──────────────────────────────────────────── */
#tcp-area-message { margin-top: 10px; }

/* ── Custom date picker (always-open inline calendar) ──────────────
   Modern elevation-based treatment: no boxy borders between elements —
   depth comes from soft shadows, one unified accent (matches whatever
   button/brand accent the active theme sets), generous whitespace. */
.tcp-datepicker {
	--tcp-dp-accent: var(--tcp-btn-bg, var(--tcp-accent));
	--tcp-dp-accent-text: var(--tcp-btn-text, #fff);
	margin-bottom: var(--tcp-space-section);
}
.tcp-datepicker__native-fallback {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}
.tcp-datepicker__panel {
	background: var(--tcp-card-bg);
	border: none;
	border-radius: 20px;
	box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
	padding: 24px 22px;
}
.tcp-datepicker__nav {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 22px;
}
.tcp-datepicker__select {
	flex: 1 1 auto;
	min-width: 0;
	padding: 9px 12px;
	border: none;
	border-radius: 10px;
	background: var(--tcp-bg, #f5f6f8);
	font-size: var(--tcp-fs-sm);
	/* Host-independent line-height — this rule never set its own, so it silently
	   inherited the host theme's value (confirmed live 2026-07-28: 40px), making the
	   month/year dropdowns render at 64px tall next to the 34px-tall prev/next nav
	   buttons right beside them. Same class of bug as the earlier .tcp-input/.tcp-select
	   fix on this same page — a different host theme could set a completely different
	   value with the same effect. */
	line-height: 1.4;
	font-weight: 600;
	font-family: inherit;
	color: var(--tcp-text);
	cursor: pointer;
	transition: background .15s;
}
/* Month name needs more room than the 4-digit year. */
#tcp-datepicker-month-select { flex-grow: 1.6; }
#tcp-datepicker-year-select { flex-grow: 1; }
.tcp-datepicker__select:hover { background: var(--tcp-border); }
.tcp-datepicker__nav-btn {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border: none;
	border-radius: 10px;
	background: var(--tcp-bg, #f5f6f8);
	font-size: var(--tcp-fs-md);
	line-height: 1;
	color: var(--tcp-text);
	cursor: pointer;
	transition: background .15s, color .15s;
	/* Without this the ‹/› glyph sits flush against the button's left edge (confirmed
	   live 2026-07-28 via text-range measurement: 0px gap on the left, 24px on the
	   right) since a <button> has no default text-align/alignment behavior for a lone
	   character — display:flex centers it on both axes properly. */
	display: flex;
	align-items: center;
	justify-content: center;
}
.tcp-datepicker__nav-btn:hover:not(:disabled) { background: var(--tcp-dp-accent); color: var(--tcp-dp-accent-text); }
.tcp-datepicker__nav-btn:disabled { opacity: .3; cursor: not-allowed; }
.tcp-datepicker__weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	margin-bottom: 10px;
}
.tcp-datepicker__weekdays span {
	text-align: center;
	font-size: var(--tcp-fs-xs);
	font-weight: 600;
	color: var(--tcp-text-light);
	padding: 4px 0;
}
.tcp-datepicker__days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}
.tcp-datepicker__day {
	position: relative;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 10px;
	background: transparent;
	font-size: var(--tcp-fs-sm);
	font-weight: 600;
	color: var(--tcp-text);
	cursor: pointer;
	transition: background .15s, color .15s, box-shadow .15s;
}
.tcp-datepicker__day:hover:not(:disabled) { background: var(--tcp-bg, #f5f6f8); box-shadow: inset 0 0 0 1.5px var(--tcp-dp-accent); color: var(--tcp-dp-accent); }
.tcp-datepicker__day--selected { background: var(--tcp-dp-accent); color: var(--tcp-dp-accent-text); box-shadow: 0 4px 10px -2px rgba(0,0,0,.18); }
.tcp-datepicker__day--selected:hover { background: var(--tcp-dp-accent); color: var(--tcp-dp-accent-text); box-shadow: 0 4px 10px -2px rgba(0,0,0,.18); }
.tcp-datepicker__day--blank { background: transparent; pointer-events: none; }
/* Unavailable days (weekend/past/blocked/fully-booked) — soft flat tint, no border,
   sits quietly in the grid instead of competing with bookable days. */
.tcp-datepicker__day:disabled {
	background: var(--tcp-bg, #f5f6f8);
	color: var(--tcp-text-light);
	opacity: .7;
	cursor: not-allowed;
}
.tcp-datepicker__day--today::after {
	content: "";
	position: absolute;
	bottom: 6px;
	left: 50%;
	transform: translateX(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	opacity: .6;
}

/* ── Slots ────────────────────────────────────────────────────── */
.tcp-slots-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: var(--tcp-space-section);
}
.tcp-slot {
	--tcp-slot-accent: var(--tcp-btn-bg, var(--tcp-accent));
	--tcp-slot-accent-text: var(--tcp-btn-text, #fff);
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 11px 18px;
	border: none;
	border-radius: 12px;
	font-size: var(--tcp-fs-sm);
	font-weight: 600;
	cursor: pointer;
	transition: box-shadow .15s, background .15s, color .15s, transform .1s;
	background: var(--tcp-card-bg);
	color: var(--tcp-text);
	box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 3px 8px rgba(15,23,42,.05);
}
.tcp-slot::before {
	content: "";
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	background-color: var(--tcp-text-light);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15.5 14'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15.5 14'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: background-color .15s;
}
.tcp-slot:hover:not(.tcp-slot--unavailable):not(.tcp-slot--selected) { box-shadow: inset 0 0 0 1.5px var(--tcp-slot-accent), 0 1px 2px rgba(15,23,42,.04); color: var(--tcp-slot-accent); transform: translateY(-1px); }
.tcp-slot:hover:not(.tcp-slot--unavailable):not(.tcp-slot--selected)::before { background-color: var(--tcp-slot-accent); }
.tcp-slot--selected { background: var(--tcp-slot-accent); color: var(--tcp-slot-accent-text); box-shadow: 0 4px 10px -2px rgba(0,0,0,.18); transform: none; }
.tcp-slot--selected::before { background-color: var(--tcp-slot-accent-text); }
.tcp-slot--selected:hover { color: var(--tcp-slot-accent-text); transform: none; }
.tcp-slot--unavailable { opacity: .4; cursor: not-allowed; text-decoration: line-through; box-shadow: none; }

/* ── Messages ─────────────────────────────────────────────────── */
.tcp-message {
	padding: 14px 16px;
	border-radius: var(--tcp-radius-sm);
	font-size: var(--tcp-fs-base);
	margin-bottom: 14px;
	border: 1.5px solid transparent;
}
.tcp-message--error   { background: var(--tcp-error-bg);   color: #991b1b; border-color: #fca5a5; }
.tcp-message--success { background: var(--tcp-success-bg); color: #065f46; border-color: #6ee7b7; }
.tcp-message--info    { background: var(--tcp-accent-light); color: #1e40af; border-color: #bfdbfe; }
.tcp-message--warn    { background: var(--tcp-warn-bg);    color: #92400e; border-color: #fcd34d; }

/* ── Review card ──────────────────────────────────────────────── */
.tcp-review-card {
	background: var(--tcp-bg);
	border: 2px solid var(--tcp-border);
	border-radius: var(--tcp-radius);
	overflow: hidden;
	margin-bottom: var(--tcp-space-section);
}
.tcp-review-card table { width: 100%; border-collapse: collapse; }
.tcp-review-card tr { border-bottom: 1px solid var(--tcp-border); }
.tcp-review-card tr:last-child { border-bottom: 0; }
.tcp-review-card td {
	padding: 11px 16px;
	font-size: var(--tcp-fs-base);
	vertical-align: top;
}
.tcp-review-card td:first-child {
	font-weight: 700;
	color: var(--tcp-text-muted);
	font-size: var(--tcp-fs-xs);
	text-transform: uppercase;
	letter-spacing: .05em;
	width: 36%;
	background: var(--tcp-card-bg);
}

/* ── Estimate bar ─────────────────────────────────────────────── */
.tcp-estimate-bar {
	background: var(--tcp-accent-light);
	border: 2px solid #bfdbfe;
	border-radius: var(--tcp-radius-sm);
	padding: 14px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--tcp-space-section);
}
.tcp-estimate-bar__label { font-size: var(--tcp-fs-sm); font-weight: 600; color: var(--tcp-text-muted); }
.tcp-estimate-bar__value { font-size: var(--tcp-fs-xl); font-weight: 800; color: var(--tcp-accent); }

/* ── Loading ──────────────────────────────────────────────────── */
.tcp-loading {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--tcp-text-muted);
	font-size: var(--tcp-fs-base);
	padding: 12px 0;
}
.tcp-spinner {
	width: 18px;
	height: 18px;
	border: 2px solid var(--tcp-border);
	border-top-color: var(--tcp-accent);
	border-radius: 50%;
	animation: tcp-spin .7s linear infinite;
}
@keyframes tcp-spin { to { transform: rotate(360deg); } }

/* ── Utilities ────────────────────────────────────────────────── */
.tcp-hidden { display: none !important; }
.tcp-divider { border: 0; border-top: 1px solid var(--tcp-border); margin: 20px 0; }

/* ── Responsive ───────────────────────────────────────────────── */
/* Tablet tier for card-mode counters only: a Third-width card (33%) is too cramped below
   the desktop layout — bump it to the same 50% as Half so tablet shows a comfortable
   2-per-row. Kept as a plugin-side fixed responsive rule rather than an admin-configurable
   per-breakpoint width (discussed with the developer 2026-07-28): the Form Builder's Width
   setting is a desktop-only hint, and every other responsive treatment in this file already
   works this way (service/subtype/extras cards all get hardcoded mobile behavior regardless
   of any admin setting) — three-tier per-field responsive control would be page-builder-level
   complexity for a lightweight booking-form field. Half is already 50% so it's unaffected;
   Full is already 100% so it's unaffected.
   Breakpoint is 860px, not 768px: a full sweep of all 15 of the developer's named device
   widths (2026-07-28) found 853px and 820px both fell ABOVE a 768px cutoff and were worse
   off than 768px itself (144-155px cards vs 197px at 768px) — a non-monotonic dip as the
   viewport shrinks. 860px safely covers both named devices while staying below the 1024px
   tier above it. */
@media (max-width: 860px) {
	.tcp-counter-card-grid > .tcp-counter-card-cell.tcp-field--third { grid-column: span 3; }
}
@media (max-width: 640px) {
	.tcp-step-header  { padding: 20px 18px 16px; }
	.tcp-step-body    { padding: 20px 18px 24px; }
	.tcp-step__nav    { padding: 14px 18px; gap: 8px; }
	/* On mobile: primary button full width, back stays as ghost text */
	.tcp-step__nav .tcp-btn--primary,
	.tcp-step__nav .tcp-btn--confirm { flex: 1; margin-left: 0; }
	.tcp-field-row--2,
	.tcp-field-row--3 { grid-template-columns: 1fr; }
	/* auto-fit collapses empty tracks so a lone card stretches full width */
	.tcp-service-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
	.tcp-service-card { min-height: 80px; padding: 14px 12px; }
	.tcp-service-card__name { font-size: var(--tcp-fs-sm); }
	/* Subtype cards: 3-col on mobile (they're smaller) */
	.tcp-subtype-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.tcp-subtype-card { min-height: 76px; padding: 14px 8px; }
	.tcp-subtype-card__icon { font-size: var(--tcp-fs-xl); }
	.tcp-subtype-card__name { font-size: var(--tcp-fs-xs); }
	.tcp-room-grid    { grid-template-columns: repeat(2, 1fr); }
	.tcp-counter-card-grid { gap: 10px; }
	/* Half/Third-width counter cards stay at 2-per-row (50%) all the way down to the
	   smallest phone tier instead of collapsing to full-width — previously this
	   breakpoint forced them to span 6 (100%), but that was inconsistent with
	   .tcp-choice-card (Additional Rooms-style checkbox cards), which already comfortably
	   shows 2-per-row at these widths with no floor, and a live check at 360px (2026-07-28)
	   confirmed a 50% counter card (~159px, photo + name + stepper) still reads fine and
	   keeps the +/- buttons comfortably tappable — developer confirmed this is preferred
	   over 1-per-row. Full-width cards are unaffected (still span 6, unchanged). */
	.tcp-counter-card-grid > .tcp-counter-card-cell.tcp-field--half,
	.tcp-counter-card-grid > .tcp-counter-card-cell.tcp-field--third { grid-column: span 3; }
	.tcp-extras-grid  { grid-template-columns: repeat(2, 1fr); }
	.tcp-step__title  { font-size: var(--tcp-fs-lg); }
	.tcp-progress-wrap{ padding: 14px 18px 0; }
	.tcp-step-banner  { height: 130px; }
	/* Calendar: tighter panel padding + smaller nav buttons so the month/year
	   selects have room to show their full text without clipping. */
	.tcp-datepicker__panel  { padding: 18px 14px; }
	.tcp-datepicker__nav-btn { width: 30px; height: 30px; font-size: var(--tcp-fs-md); }
	.tcp-datepicker__select  { padding: 9px 8px; font-size: var(--tcp-fs-sm); }
	/* Slots: force a 2-up grid (instead of flex-wrap, which drops to 1-per-row
	   once range labels like "8:00 AM - 9:00 AM" get too wide) and shrink to fit. */
	.tcp-slots-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}
	.tcp-slot {
		padding: 10px 8px;
		gap: 5px;
		font-size: var(--tcp-fs-xs);
		justify-content: center;
	}
	.tcp-slot::before { width: 12px; height: 12px; }
}
@media (max-width: 400px) {
	.tcp-service-grid { grid-template-columns: 1fr; }
	.tcp-subtype-grid { grid-template-columns: repeat(2, 1fr); }
	.tcp-step-header  { padding: 16px 14px 14px; }
	.tcp-step-body    { padding: 16px 14px 20px; }
	.tcp-step__nav    { padding: 12px 14px; }
}
/* ── Dynamic field grid (step 2) ──────────────────────────────── */
.tcp-fields-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	align-items: start;
	align-content: start;
	gap: 12px;
	margin-top: 4px;
}
.tcp-field--full  { grid-column: span 6; }
.tcp-field--half  { grid-column: span 3; }
.tcp-field--third { grid-column: span 2; }

/* Field groups and rows inside the grid always span full width, unless a
   half/third width class is explicitly applied (e.g. Name/Email/Phone). */
.tcp-fields-grid > .tcp-field-group,
.tcp-fields-grid > .tcp-field-row { grid-column: span 6; }
.tcp-fields-grid > .tcp-field-group.tcp-field--half  { grid-column: span 3; }
.tcp-fields-grid > .tcp-field-group.tcp-field--third { grid-column: span 2; }

/* Per-step validation error box (techreme-cleanpro-booking.js's
   showStepError()) is appended directly into .tcp-step-body.tcp-fields-grid
   with no width class of its own — found 2026-07-28 rendering at ~94px (1 of
   6 implicit grid columns), wrapping one word per line, since an unstyled
   grid item defaults to span 1. Give it the same full-width treatment as
   every other direct-child message/field box. */
.tcp-fields-grid > .tcp-step-inline-error { grid-column: span 6; }

/* Booking widgets (Service Selector, Address, Extras, etc.) each render their
   whole output — label, help text and all — inside one outer `.tcp-booking-
   widget` wrapper carrying the field's own Width class, so a Half/Third
   setting in the Form Builder actually takes effect instead of every booking
   widget silently always spanning the full row regardless (found 2026-07-28 —
   see CLAUDE.md STANDING RULES). Defaults to full width; the same tcp-field--
   half/third override already used by .tcp-field-group above narrows it. */
.tcp-fields-grid > .tcp-booking-widget { grid-column: span 6; }
.tcp-fields-grid > .tcp-booking-widget.tcp-field--half  { grid-column: span 3; }
.tcp-fields-grid > .tcp-booking-widget.tcp-field--third { grid-column: span 2; }

.tcp-fields-grid > .tcp-schema-custom-fields {
	grid-column: span 6;
}

/* Elements that render as a DIRECT child of a .tcp-fields-grid (the outer
   per-step grid, or the inner grid nested inside .tcp-widget-subtype for
   subtype-level Service Configuration fields — both use the same 12px gap)
   already receive +12px of spacing from that grid's own `gap`. Their
   margin-bottom must be reduced by that amount so the total visual gap to
   the next section still lands on --tcp-space-section (32px), matching
   elements nested one level deeper that use the un-reduced token directly.
   Added 2026-07-28: several of these classes (.tcp-field-group,
   .tcp-field-row) render as a direct grid child in some contexts (address,
   access instructions) and nested one level deeper in others (schema-driven
   custom fields, the datepicker/recurring-panel wrapper) — a flat class
   rule can't tell those apart, but the child combinator naturally does,
   since it only matches the true direct-child case. This also covers
   .tcp-field--full/half/third, the wrapper div JS gives every non-card
   Service Configuration field, so any current or future field type an
   admin adds through the Form Builder is covered automatically without a
   bespoke rule. Verified live via getBoundingClientRect() gap measurements
   before wiring this up — don't guess, re-measure if this ever regresses. */
.tcp-fields-grid > .tcp-field-group,
.tcp-fields-grid > .tcp-field-row,
.tcp-fields-grid > .tcp-field--full,
.tcp-fields-grid > .tcp-field--half,
.tcp-fields-grid > .tcp-field--third,
.tcp-fields-grid > .tcp-booking-widget {
	margin-bottom: calc(var(--tcp-space-section) - 12px);
}

/* Every non-card Service Configuration field type (toggle, radio, dropdown,
   checkbox, color, number, text) renders its own top-level element with the
   base .tcp-field-group margin-bottom (32px) NESTED one level inside the
   .tcp-field--full/half/third wrapper above — and that margin does NOT
   collapse through the wrapper in this box context (confirmed live
   2026-07-28: getBoundingClientRect showed the wrapper's own height grew by
   the full 32px instead of it collapsing out). Since the WRAPPER already
   carries the correct calc()'d margin for this exact gap, the nested
   child's own margin is pure double-counting — 32px (child) + 20px
   (wrapper) + 12px (grid gap) = 64px instead of the intended 32px. Found on
   a toggle field ("Any Additional Toilets") the developer flagged as
   having unexplained empty space beneath it. Zeroed out here rather than
   removing the base .tcp-field-group rule entirely, since that same rule
   is still needed as-is for contexts where .tcp-field-group IS the direct
   grid child (address, access instructions — see the child-combinator
   block above). .tcp-checkbox-row doesn't carry .tcp-field-group at all
   (see techreme-cleanpro-booking.js's non-card checkbox branch) so it
   needs its own entry here.
   :not(.tcp-booking-widget) added 2026-07-28: address/access_instructions
   now wrap their internal .tcp-field-group rows in an outer
   .tcp-booking-widget (so the Form Builder's Width setting applies to the
   whole widget — see the .tcp-booking-widget rules above) which ALSO
   carries this same .tcp-field--full/half/third class for its own grid
   span, so this zero-rule was accidentally zeroing their internal spacing
   too (confirmed live: Street Address → Suburb/State/Postcode gap
   collapsed to 0px). This rule's actual target is the unrelated JS
   dynamic-field wrapper, never a booking widget, so excluding
   .tcp-booking-widget restores their base 32px .tcp-field-group margin
   with no other change needed. */
.tcp-field--full:not(.tcp-booking-widget) > .tcp-field-group,
.tcp-field--half:not(.tcp-booking-widget) > .tcp-field-group,
.tcp-field--third:not(.tcp-booking-widget) > .tcp-field-group,
.tcp-field--full > .tcp-checkbox-row,
.tcp-field--half > .tcp-checkbox-row,
.tcp-field--third > .tcp-checkbox-row {
	margin-bottom: 0;
}

/* Section heading inside field grid */
.tcp-field-heading {
	font-weight: 700;
	font-size: var(--tcp-fs-base);
	color: #374151;
	margin: 4px 0 0;
	border-bottom: 1px solid #e5e7eb;
	padding-bottom: 5px;
}

/* Field icon beside label */
.tcp-field-icon { width: 24px; height: 24px; object-fit: cover; border-radius: 4px; vertical-align: middle; margin-right: 4px; }

/* Toggle switch */
/* Capped at max-width so the label and switch stay close together even when this field's
   column spans a wide, mostly-empty row (e.g. a full-width toggle below a short card row) —
   otherwise space-between stretches the gap to the full column width. */
.tcp-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 420px; }
.tcp-toggle-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.tcp-toggle-input { position: absolute; opacity: 0; width: 0; height: 0; }
.tcp-toggle-track {
  position: relative; display: inline-block;
  width: 44px; height: 24px; border-radius: 12px;
  background: #d1d5db; transition: background .2s;
}
.tcp-toggle-input:checked ~ .tcp-toggle-track { background: var(--tcp-accent, #2563eb); }
.tcp-toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2);
  transition: transform .2s;
}
.tcp-toggle-input:checked ~ .tcp-toggle-track .tcp-toggle-thumb { transform: translateX(20px); }
.tcp-toggle-state-label { font-size: var(--tcp-fs-sm); color: #6b7280; min-width: 26px; }
.tcp-toggle-state-label--on { color: var(--tcp-accent, #2563eb); font-weight: 600; }

/* Mobile: all fields full width */
@media (max-width: 520px) {
	.tcp-field--half,
	.tcp-field--third { grid-column: span 6; }
}

/* ── Field description help text ────────────────────────────── */
.tcp-field-desc {
	font-size: var(--tcp-fs-xs);
	color: var(--tcp-text-muted);
	margin: 2px 0 8px;
	line-height: 1.5;
}

/* ── Radio inline ────────────────────────────────────────────── */
.tcp-radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 6px;
}
.tcp-radio-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--tcp-fs-base);
	cursor: pointer;
}

/* ── Choice cards (radio + checkbox in cards mode) ───────────── */
.tcp-choice-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px;
}
.tcp-choice-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px 18px;
	border: 2px solid var(--tcp-border);
	border-radius: var(--tcp-radius);
	cursor: pointer;
	font-size: var(--tcp-fs-base);
	font-weight: 500;
	color: var(--tcp-text);
	background: #fff;
	transition: border-color .15s, background .15s, box-shadow .15s;
	min-width: 80px;
	text-align: center;
	flex: 1;
}
.tcp-choice-card:hover {
	border-color: var(--tcp-accent);
	background: var(--tcp-accent-light);
}
.tcp-choice-card--selected,
.tcp-choice-card:has(.tcp-choice-card__input:checked) {
	border-color: var(--tcp-accent);
	background: var(--tcp-accent-light);
	color: var(--tcp-accent);
	box-shadow: 0 0 0 3px var(--tcp-accent-ring);
}
.tcp-choice-card__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	width: 0;
	height: 0;
}
.tcp-choice-card__icon {
	font-size: var(--tcp-fs-2xl);
	line-height: 1;
}
.tcp-choice-card__label {
	font-size: var(--tcp-fs-sm);
	font-weight: 600;
}

/* ── Choice card — image + description enhancements ─────────────── */
.tcp-choice-card--has-image {
	flex-direction: column;
	align-items: stretch;
	padding: 0;
	overflow: hidden;
	min-width: 120px;
}
.tcp-choice-card__img {
	width: 100%;
	height: 100px;
	object-fit: cover;
	display: block;
	border-radius: 0;
}
.tcp-choice-card--has-image .tcp-choice-card__label {
	padding: 8px 12px 4px;
}
.tcp-choice-card__desc {
	display: block;
	font-size: var(--tcp-fs-xs);
	color: #6b7280;
	padding: 0 12px 10px;
	line-height: 1.35;
}

/* ── Recurring booking panel ─────────────────────────────────────
   Soft elevated surface (shadow, no heavy border) using the same unified
   accent variable as the calendar/slots so nothing clashes with a second
   hardcoded blue. */
.tcp-recurring-panel {
	--tcp-rec-accent: var(--tcp-btn-bg, var(--tcp-accent));
	--tcp-rec-accent-text: var(--tcp-btn-text, #fff);
	margin-top: var(--tcp-space-section);
	margin-bottom: var(--tcp-space-section);
	padding: 20px;
	background: var(--tcp-card-bg);
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
}
.tcp-recurring-panel__title {
	font-weight: 700;
	margin: 0 0 16px;
	color: var(--tcp-text);
}

/* ── Recurring date preview ───────────────────────────────────── */
.tcp-recurring-preview {
	margin-top: 14px;
	padding: 14px 16px;
	background: var(--tcp-bg, #f5f6f8);
	border: none;
	border-radius: 12px;
}
.tcp-recurring-preview__label {
	font-size: var(--tcp-fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--tcp-rec-accent, var(--tcp-accent));
	margin: 0 0 10px;
}
.tcp-recurring-preview__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.tcp-recurring-preview__item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: var(--tcp-fs-base);
	color: var(--tcp-text);
}
.tcp-recurring-preview__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	font-size: var(--tcp-fs-2xs);
	font-weight: 700;
	text-transform: uppercase;
	background: var(--tcp-card-bg);
	color: var(--tcp-rec-accent, var(--tcp-accent));
	border-radius: 6px;
	padding: 2px 0;
	flex-shrink: 0;
}
.tcp-recurring-preview__item--first .tcp-recurring-preview__badge {
	background: var(--tcp-rec-accent, var(--tcp-accent));
	color: var(--tcp-rec-accent-text, #fff);
}
.tcp-recurring-preview__item--more {
	font-size: var(--tcp-fs-sm);
	color: var(--tcp-text-muted);
	font-style: italic;
	padding-left: 4px;
}

/* ── Extras list style ────────────────────────────────────────── */
.tcp-extras-list {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 10px;
	margin-bottom: var(--tcp-space-section);
}
/* Per-extra Width (Full/Half/Third), same scale as the Cards style. */
.tcp-extra-row { grid-column: span 6; }
.tcp-extra-row--width-half  { grid-column: span 3; }
.tcp-extra-row--width-third { grid-column: span 2; }
@media (max-width: 640px) {
	.tcp-extra-row--width-half,
	.tcp-extra-row--width-third { grid-column: span 6; }
}
.tcp-extra-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 18px;
	border: 1.5px solid var(--tcp-border);
	border-radius: var(--tcp-radius);
	background: var(--tcp-card-bg);
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
}
.tcp-extra-row:hover { border-color: var(--tcp-accent-ring, var(--tcp-accent)); }
.tcp-extra-row--selected {
	border-color: var(--tcp-accent);
	box-shadow: 0 0 0 3px var(--tcp-accent-light);
	background: var(--tcp-accent-light);
}
.tcp-extra-row.tcp-extra-row--qty { cursor: default; }
.tcp-extra-row__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}
.tcp-extra-row__name {
	font-size: var(--tcp-fs-base);
	font-weight: 700;
	color: var(--tcp-text);
}
.tcp-extra-row__price-pill {
	flex-shrink: 0;
	font-size: var(--tcp-fs-xs);
	font-weight: 600;
	color: var(--tcp-text-muted);
	background: var(--tcp-bg, #f1f5f9);
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
}
.tcp-extra-row--selected .tcp-extra-row__price-pill {
	color: var(--tcp-accent);
	background: var(--tcp-card-bg);
}
.tcp-extra-row__desc {
	font-size: var(--tcp-fs-sm);
	color: var(--tcp-accent, #2563eb);
	opacity: .85;
	margin: 0;
}
.tcp-extra-row__bottom { display: flex; align-items: center; }
.tcp-extra-row__tap {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}
.tcp-extra-row__tap-input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.tcp-extra-row__tap-label {
	font-size: var(--tcp-fs-sm);
	font-weight: 600;
	color: var(--tcp-text-muted);
}
.tcp-extra-row--selected .tcp-extra-row__tap-label {
	color: var(--tcp-accent);
}

/* ── Price Bar ─────────────────────────────────────────────────── */
.tcp-price-bar {
	background: #0f172a;
	color: #f8fafc;
	padding: 14px 28px;
	display: flex;
	align-items: center;
	margin-top: 12px;
	border-radius: var(--tcp-radius-lg);
}
.tcp-price-bar--hidden {
	display: none;
}
.tcp-price-bar__inner {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 0;
}
.tcp-price-bar__service {
	flex: 1 1 0;
}
.tcp-price-bar__service-name {
	display: block;
	font-size: var(--tcp-fs-2xs);
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #64748b;
	margin-bottom: 2px;
}
.tcp-price-bar__service-sub {
	display: block;
	font-size: var(--tcp-fs-base);
	color: #cbd5e1;
}
.tcp-price-bar__lines {
	flex: 1 1 0;
	text-align: center;
}
.tcp-price-bar__line {
	display: block;
	font-size: var(--tcp-fs-2xs);
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #64748b;
	margin-bottom: 2px;
}
.tcp-price-bar__line--extras {
	font-size: var(--tcp-fs-sm);
	color: #93c5fd;
	text-transform: none;
	letter-spacing: 0;
	margin-bottom: 0;
}
.tcp-price-bar__sep { display: none; }
.tcp-price-bar__total {
	flex: 1 1 0;
	text-align: right;
}
.tcp-price-bar__total-label {
	display: block;
	font-size: var(--tcp-fs-2xs);
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #64748b;
	margin-bottom: 2px;
}
.tcp-price-bar__total-value {
	display: block;
	font-size: var(--tcp-fs-lg);
	font-weight: 800;
	color: #ffffff;
}


@media (max-width: 600px) {
	.tcp-price-bar { padding: 10px 16px; }
	.tcp-price-bar__total-value { font-size: var(--tcp-fs-md); }
}

/* ── Payment summary (Step 8) ─────────────────────────────────── */
.tcp-payment-summary {
	background: #f0fdf4;
	border: 1px solid #86efac;
	border-radius: var(--tcp-radius);
	padding: 14px 18px;
	margin: 16px 0;
}
.tcp-payment-summary__inner {
	display: flex;
	align-items: center;
	gap: 14px;
}
.tcp-payment-summary__icon { font-size: var(--tcp-fs-xl); flex-shrink: 0; }
.tcp-payment-summary__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; }
.tcp-payment-summary__label { font-weight: 700; font-size: var(--tcp-fs-base); color: #15803d; }
.tcp-payment-summary__note { font-size: var(--tcp-fs-xs); color: #4b5563; }
.tcp-payment-summary__amount { font-size: var(--tcp-fs-lg); font-weight: 800; color: #15803d; flex-shrink: 0; }

/* ── Step 9 — Payment gateway ─────────────────────────────────── */
.tcp-payment-amount-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--tcp-card-bg);
	border: 1px solid var(--tcp-border);
	border-radius: var(--tcp-radius);
	padding: 12px 18px;
	margin-bottom: var(--tcp-space-section);
}
.tcp-payment-amount-bar__label { font-size: var(--tcp-fs-sm); color: var(--tcp-text-muted); }
.tcp-payment-amount-bar__value { font-size: var(--tcp-fs-lg); font-weight: 800; color: var(--tcp-accent); }

.tcp-gateway-wrap {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.tcp-gateway-btn {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	border-radius: var(--tcp-radius);
	border: 2px solid var(--tcp-border);
	background: #fff;
	cursor: pointer;
	text-align: left;
	width: 100%;
	transition: border-color .15s, box-shadow .15s;
}
.tcp-gateway-btn:hover { border-color: var(--tcp-accent); box-shadow: 0 0 0 3px var(--tcp-accent-light); }
.tcp-gateway-btn:disabled { opacity: .55; cursor: not-allowed; }
.tcp-gateway-btn--stripe { border-color: #6772e5; }
.tcp-gateway-btn--stripe:hover { border-color: #6772e5; box-shadow: 0 0 0 3px rgba(103,114,229,.15); }
.tcp-gateway-btn--paypal { border-color: #003087; }
.tcp-gateway-btn--paypal:hover { border-color: #003087; box-shadow: 0 0 0 3px rgba(0,48,135,.12); }
.tcp-gateway-btn__icon { font-size: var(--tcp-fs-xl); flex-shrink: 0; }
.tcp-gateway-btn__label { font-weight: 700; font-size: var(--tcp-fs-base); display: block; }
.tcp-gateway-btn__sub { font-size: var(--tcp-fs-xs); color: var(--tcp-text-muted); display: block; }

.tcp-pay-processing {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	text-align: center;
	color: var(--tcp-text-muted);
	justify-content: center;
}
.tcp-spinner {
	width: 24px;
	height: 24px;
	border: 3px solid var(--tcp-border);
	border-top-color: var(--tcp-accent);
	border-radius: 50%;
	animation: tcp-spin .7s linear infinite;
	flex-shrink: 0;
}
@keyframes tcp-spin { to { transform: rotate(360deg); } }

.tcp-pay-secure-note {
	margin-top: 18px;
	font-size: var(--tcp-fs-xs);
	color: var(--tcp-text-muted);
	text-align: center;
}

@media (max-width: 600px) {
	.tcp-gateway-btn { padding: 14px 14px; }
	.tcp-payment-summary__inner { flex-wrap: wrap; }
}

/* ── Promo code row ──────────────────────────────────────── */
.tcp-policy-row {
	margin: 16px 0 4px;
	padding: 14px 16px;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 8px;
}
.tcp-policy-label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	cursor: pointer;
	font-size: var(--tcp-fs-sm);
	color: #374151;
	line-height: 1.5;
}
.tcp-policy-label input[type="checkbox"] {
	margin-top: 2px;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	accent-color: var(--tcp-accent);
}

.tcp-promo-row {
	margin: 18px 0 4px;
}
.tcp-promo-input-wrap {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}
.tcp-promo-input {
	flex: 1 1 180px;
	padding: 9px 12px;
	border: 1.5px solid var(--tcp-border);
	border-radius: 8px;
	font-size: var(--tcp-fs-base);
	text-transform: uppercase;
	letter-spacing: .04em;
	outline: none;
	transition: border-color .15s;
}
.tcp-promo-input:focus { border-color: var(--tcp-accent); }
.tcp-promo-apply { flex-shrink: 0; }
.tcp-promo-remove {
	flex-shrink: 0;
	color: #b32d2e;
	border-color: #b32d2e;
	font-size: var(--tcp-fs-sm);
	padding: 8px 12px;
}
.tcp-promo-remove:hover { background: #fef2f2; }

.tcp-promo-feedback {
	font-size: var(--tcp-fs-sm);
	margin-top: 6px;
	padding: 4px 0;
}
.tcp-promo-feedback--ok { color: #18a058; }
.tcp-promo-feedback--err { color: #b32d2e; }

.tcp-promo-discount-line {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 12px;
	margin-top: 10px;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 8px;
	font-size: var(--tcp-fs-base);
}
.tcp-promo-discount-line__label { color: #166534; font-weight: 600; }
.tcp-promo-discount-line__value { color: #166534; font-weight: 700; }

@media (max-width: 480px) {
	.tcp-promo-input-wrap { gap: 6px; }
	.tcp-promo-input { font-size: var(--tcp-fs-sm); }
}

/* ── Provider cards ──────────────────────────────────────── */
.tcp-provider-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 12px;
	margin: 12px 0;
}
.tcp-provider-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 14px 10px;
	border: 2px solid var(--tcp-border);
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s, transform .1s;
	text-align: center;
}
.tcp-provider-card:hover {
	border-color: var(--tcp-accent);
	box-shadow: 0 4px 12px rgba(29,78,216,.10);
	transform: translateY(-1px);
}
.tcp-provider-card--selected {
	border: 2px solid var(--tcp-accent) !important;
	background: var(--tcp-accent-light) !important;
	box-shadow: 0 0 0 3px var(--tcp-accent-ring) !important;
}
.tcp-provider-card__photo {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--tcp-border);
}
.tcp-provider-card__avatar {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--tcp-accent-light);
	border: 2px solid var(--tcp-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--tcp-fs-xl);
	color: var(--tcp-accent);
}
.tcp-provider-card__name {
	font-size: var(--tcp-fs-sm);
	font-weight: 600;
	color: var(--tcp-text);
	line-height: 1.2;
}
.tcp-provider-card__bio {
	font-size: var(--tcp-fs-xs);
	color: var(--tcp-text-muted);
	line-height: 1.3;
}
@media (max-width: 480px) {
	.tcp-provider-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ── Result pages (confirmation / unsuccessful) ─────────────────────────── */
/* max-width/margin use !important — block themes emit an inline
   `.is-layout-constrained > :where(...)` rule with equal specificity that
   otherwise wins on source order and stretches this card full-bleed. */
.tcp-result-page {
	max-width: 620px !important;
	width: auto !important;
	margin: 48px auto !important;
	border-radius: 16px;
	overflow: hidden;
	text-align: center;
	font-family: system-ui, -apple-system, sans-serif;
	background: #fff;
	box-shadow: 0 4px 24px rgba(0,0,0,.08);
	/* Self-contained CSS vars so this renders correctly outside .tcp-booking-form.
	   --tcp-result-accent can be overridden per-page via an inline <style> block
	   from the Result Pages settings screen. */
	--tcp-result-accent: #12B892;
	--tcp-result-accent-dark: #0f766e;
	--tcp-text: #1e293b;
	--tcp-text-muted: #64748b;
	--tcp-border: #e2e8f0;
	--tcp-success-bg: #ecfdf5;
	--tcp-error-bg: #fef2f2;
}
.tcp-result-page--error { --tcp-result-accent: #dc2626; --tcp-result-accent-dark: #991b1b; }

.tcp-result-hero {
	padding: 40px 32px 32px;
	background: linear-gradient(135deg, var(--tcp-result-accent), var(--tcp-result-accent-dark));
	color: #fff;
}
.tcp-result-hero__check,
.tcp-result-page__icon {
	width: 64px; height: 64px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-size: var(--tcp-fs-2xl);
	margin: 0 auto 20px;
	background: rgba(255,255,255,.2);
	color: #fff;
	animation: tcp-result-pop .4s ease-out;
}
@keyframes tcp-result-pop {
	0%   { transform: scale(.6); opacity: 0; }
	70%  { transform: scale(1.08); opacity: 1; }
	100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
	.tcp-result-hero__check, .tcp-result-page__icon { animation: none; }
}
.tcp-result-hero__heading,
.tcp-result-page__heading {
	font-size: var(--tcp-fs-xl); font-weight: 700; margin: 0 0 12px; color: #fff;
}
.tcp-result-ref-badge,
.tcp-result-page__ref {
	display: inline-block;
	font-size: var(--tcp-fs-base); margin: 0; color: #fff !important;
	background: rgba(255,255,255,.18);
	border-radius: 999px; padding: 6px 18px;
}
.tcp-result-body { padding: 28px 32px 8px; text-align: left; }
.tcp-result-section {
	background: #f8fafc;
	border-radius: 10px;
	padding: 16px 20px;
	margin: 0 0 16px;
}
.tcp-result-section__title {
	font-size: var(--tcp-fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	color: var(--tcp-text-muted); margin: 0 0 10px;
}
.tcp-result-page__summary { background: #f8fafc; border-radius: 10px; padding: 16px 20px; margin: 0 0 16px; text-align: left; }
.tcp-result-page__summary-row,
.tcp-result-section-row {
	display: flex; justify-content: space-between; gap: 12px;
	padding: 6px 0;
	border-bottom: 1px solid var(--tcp-border);
	font-size: var(--tcp-fs-base); color: var(--tcp-text);
}
.tcp-result-page__summary-row:last-child,
.tcp-result-section-row:last-child { border-bottom: none; }
.tcp-result-page__summary-row span:first-child,
.tcp-result-section-row span:first-child { color: var(--tcp-text-muted) !important; }
.tcp-result-page__summary-row span:last-child,
.tcp-result-section-row span:last-child { color: var(--tcp-text) !important; text-align: right; }

.tcp-result-extras-table { width: 100%; border-collapse: collapse; font-size: var(--tcp-fs-base); }
.tcp-result-extras-table th { text-align: left; color: var(--tcp-text-muted); font-weight: 600; font-size: var(--tcp-fs-xs); text-transform: uppercase; padding-bottom: 6px; }
.tcp-result-extras-table td { padding: 5px 0; border-top: 1px solid var(--tcp-border); color: var(--tcp-text); }

.tcp-result-cal-strip {
	display: flex; gap: 10px; flex-wrap: wrap;
	padding: 14px 0 4px;
}
.tcp-result-cal-strip a {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: var(--tcp-fs-sm); font-weight: 600; text-decoration: none;
	color: var(--tcp-result-accent-dark);
	background: #fff; border: 1px solid var(--tcp-border); border-radius: 8px;
	padding: 8px 14px;
}
.tcp-result-cal-strip a:hover { background: #f8fafc; }

.tcp-result-page__msg {
	font-size: var(--tcp-fs-base); color: var(--tcp-text-muted) !important; margin: 0 0 24px; text-align: center; padding: 0 32px;
}
.tcp-result-footer { padding: 8px 32px 32px; text-align: center; }
.tcp-result-page__actions,
.tcp-result-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; padding: 8px 32px 32px; }
.tcp-result-page__btn,
.tcp-result-btn {
	display: inline-block;
	padding: 12px 28px;
	border-radius: 8px;
	font-size: var(--tcp-fs-base); font-weight: 600;
	text-decoration: none;
	background: var(--tcp-result-accent); color: #fff;
	transition: background .15s;
	border: none; cursor: pointer;
}
.tcp-result-page__btn:hover,
.tcp-result-btn:hover { background: var(--tcp-result-accent-dark); color: #fff; }
.tcp-result-page__btn--secondary,
.tcp-result-btn--secondary {
	background: #fff; color: var(--tcp-text);
	border: 1px solid var(--tcp-border);
}
.tcp-result-page__btn--secondary:hover,
.tcp-result-btn--secondary:hover { background: #f8fafc; }
@media (max-width: 640px) {
	.tcp-result-page { margin: 24px 12px !important; width: auto !important; }
	.tcp-result-hero { padding: 28px 20px 24px; }
	.tcp-result-body { padding: 20px 20px 8px; }
	.tcp-result-hero__heading, .tcp-result-page__heading { font-size: var(--tcp-fs-lg); }
	.tcp-result-page__summary-row,
	.tcp-result-section-row {
		flex-direction: column;
		gap: 2px;
		padding: 8px 0;
	}
	.tcp-result-page__summary-row span:last-child,
	.tcp-result-section-row span:last-child { text-align: left; }
	.tcp-result-cal-strip, .tcp-result-page__actions, .tcp-result-actions { flex-direction: column; }
	.tcp-result-page__btn, .tcp-result-btn, .tcp-result-cal-strip a { width: 100%; text-align: center; box-sizing: border-box; }
	.tcp-result-extras-table { font-size: var(--tcp-fs-sm); }
}

/* ══════════════════════════════════════════════════════════════════
   § SCHEMA RUNTIME — custom field types injected by builder
   ══════════════════════════════════════════════════════════════════ */

/* Grid container for custom fields */
.tcp-schema-custom-fields .tcp-fields-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 14px;
	margin-top: var(--tcp-space-section);
}
.tcp-schema-field.tcp-field--full  { grid-column: span 6; }
.tcp-schema-field.tcp-field--half  { grid-column: span 3; }
.tcp-schema-field.tcp-field--third { grid-column: span 2; }

@media (max-width: 640px) {
	.tcp-schema-field.tcp-field--half,
	.tcp-schema-field.tcp-field--third { grid-column: span 6; }
}

/* Inputs */
.tcp-schema-field .tcp-input,
.tcp-schema-field .tcp-select {
	width: 100%;
	padding: 10px 13px;
	border: 1.5px solid var(--tcp-border);
	border-radius: var(--tcp-radius-sm);
	font-size: var(--tcp-fs-base);
	color: var(--tcp-text);
	background: #fff;
	box-sizing: border-box;
	transition: border-color .15s, box-shadow .15s;
}
.tcp-schema-field .tcp-input:focus,
.tcp-schema-field .tcp-select:focus {
	outline: none;
	border-color: var(--tcp-accent);
	box-shadow: 0 0 0 3px var(--tcp-accent-ring);
}

/* Radio cards */
.tcp-radio-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.tcp-radio-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	border: 1.5px solid var(--tcp-border);
	border-radius: var(--tcp-radius-sm);
	cursor: pointer;
	min-width: 80px;
	text-align: center;
	transition: border-color .15s, background .15s;
	font-size: var(--tcp-fs-sm);
}
.tcp-radio-card input[type="radio"] { display: none; }
.tcp-radio-card:hover { border-color: var(--tcp-accent); background: var(--tcp-accent-light); }
.tcp-radio-card--selected { border-color: var(--tcp-accent) !important; background: var(--tcp-accent-light) !important; }
.tcp-radio-card__img { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; }
.tcp-radio-card__icon { font-size: var(--tcp-fs-xl); }
.tcp-radio-card__label { font-weight: 600; color: var(--tcp-text); }

/* Checkbox cards */
.tcp-checkbox-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.tcp-checkbox-card {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	border: 1.5px solid var(--tcp-border);
	border-radius: var(--tcp-radius-sm);
	cursor: pointer;
	font-size: var(--tcp-fs-sm);
	transition: border-color .15s, background .15s;
}
.tcp-checkbox-card input[type="checkbox"] { display: none; }
.tcp-checkbox-card:hover { border-color: var(--tcp-accent); background: var(--tcp-accent-light); }
.tcp-checkbox-card--selected { border-color: var(--tcp-accent) !important; background: var(--tcp-accent-light) !important; }
.tcp-checkbox-card__icon { font-size: var(--tcp-fs-md); }
.tcp-checkbox-card__label { font-weight: 600; color: var(--tcp-text); }

/* Single checkbox + consent */
.tcp-single-checkbox,
.tcp-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var(--tcp-fs-sm);
	color: var(--tcp-text);
	cursor: pointer;
	line-height: 1.5;
}
.tcp-single-checkbox input,
.tcp-consent input {
	flex-shrink: 0;
	margin-top: 2px;
	width: 16px;
	height: 16px;
	accent-color: var(--tcp-accent);
}

/* Star rating */
.tcp-star-rating {
	display: flex;
	flex-direction: row-reverse;
	gap: 4px;
	font-size: var(--tcp-fs-2xl);
	width: fit-content;
}
.tcp-star-rating input[type="radio"] { display: none; }
.tcp-star-rating label {
	color: #d1d5db;
	cursor: pointer;
	transition: color .1s;
}
.tcp-star-rating input:checked ~ label,
.tcp-star-rating label:hover,
.tcp-star-rating label:hover ~ label { color: #f59e0b; }

/* Field description */
.tcp-field-desc { font-size: var(--tcp-fs-xs); color: var(--tcp-text-muted); margin: 2px 0 6px; }

/* Single-step mode */
.tcp-booking-form.tcp-mode-single .tcp-step { display: block !important; }
.tcp-booking-form.tcp-mode-single .tcp-step-card { margin-bottom: 16px; }
.tcp-booking-form.tcp-mode-single .tcp-progress-wrap { display: none; }
.tcp-single-step-submit { padding: 20px 28px; }
.tcp-single-step-submit .tcp-btn { min-width: 200px; font-size: var(--tcp-fs-md); }

/* Color swatch picker */
.tcp-color-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.tcp-color-swatch-label { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; }
.tcp-color-swatch-label input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.tcp-color-swatch {
  display: block; width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid transparent; outline: 2px solid rgba(0,0,0,.12);
  transition: outline-color .15s, transform .15s;
}
.tcp-color-swatch-label input[type="radio"]:checked + .tcp-color-swatch {
  outline-color: var(--tcp-accent, #2563eb); border-color: #fff; transform: scale(1.15);
}
.tcp-color-swatch-name { font-size: var(--tcp-fs-2xs); color: var(--tcp-text-muted, #6b7280); text-align: center; max-width: 60px; }

/* Service Configuration choice-card polish: per-option widths, readable type, section grouping. */
.tcp-field-group--choice-cards {
	padding: 16px;
	border: 1.5px dashed var(--tcp-accent-ring, var(--tcp-border));
	border-radius: 12px;
	background: color-mix(in srgb, var(--tcp-accent-light, #eef7ff) 42%, #fff 58%);
}
.tcp-field-group--choice-cards > .tcp-label {
	font-size: var(--tcp-fs-md);
	line-height: 1.35;
	margin-bottom: 12px;
}
.tcp-field-group--choice-cards .tcp-field-desc {
	font-size: var(--tcp-fs-sm);
	line-height: 1.45;
	margin: -6px 0 12px;
}
.tcp-choice-cards {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 14px;
	width: 100%;
}
.tcp-choice-card {
	grid-column: span 2;
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	border-radius: 10px;
}
.tcp-choice-card--width-auto,
.tcp-choice-card--width-third { grid-column: span 2; }
.tcp-choice-card--width-half { grid-column: span 3; }
.tcp-choice-card--width-full { grid-column: 1 / -1; }
.tcp-choice-card__label {
	font-size: var(--tcp-fs-base);
	line-height: 1.35;
	font-weight: 800;
}
.tcp-choice-card__desc {
	font-size: var(--tcp-fs-sm);
	line-height: 1.45;
	color: var(--tcp-text-muted);
}
.tcp-choice-card__img {
	width: 100%;
	height: 142px;
	object-fit: cover;
	display: block;
}
.tcp-choice-card--has-image {
	padding: 0;
	overflow: hidden;
}
.tcp-choice-card--has-image .tcp-choice-card__label {
	padding: 14px 14px 4px;
	text-align: center;
}
.tcp-choice-card--has-image .tcp-choice-card__desc {
	padding: 0 14px 14px;
	text-align: center;
}

/* Toggle fields should read as their own horizontal section, not as a tiny stranded row. */
.tcp-toggle-group {
	padding: 16px 0;
	border-top: 1px solid var(--tcp-border);
	border-bottom: 1px solid var(--tcp-border);
	background: transparent;
}
.tcp-toggle-row {
	width: 100%;
	max-width: none !important;
	gap: 18px;
}
.tcp-toggle-row .tcp-label {
	font-size: var(--tcp-fs-md);
	line-height: 1.35;
}
.tcp-toggle-state-label {
	font-size: var(--tcp-fs-base);
}

/* Subtype dropdown: image/icon left, label and description right. */
.tcp-icon-dropdown__trigger {
	min-height: 64px;
	gap: 14px;
	padding: 14px 16px;
	font-size: var(--tcp-fs-base);
}
.tcp-icon-dropdown__trigger-media,
.tcp-icon-dropdown__trigger-media img {
	width: 42px;
	height: 42px;
	flex-basis: 42px;
}
.tcp-icon-dropdown__trigger-text { line-height: 1.35; }
.tcp-icon-dropdown__panel {
	border-color: var(--tcp-accent-ring, var(--tcp-border));
	overflow: hidden auto;
}
.tcp-icon-dropdown__option {
	min-height: 66px;
	gap: 14px;
	padding: 14px 16px;
}
.tcp-icon-dropdown__option-media,
.tcp-icon-dropdown__option-media img {
	width: 44px;
	height: 44px;
	flex-basis: 44px;
}
.tcp-icon-dropdown__option-name { font-size: var(--tcp-fs-base); line-height: 1.25; }
.tcp-icon-dropdown__option-desc { font-size: var(--tcp-fs-sm); line-height: 1.35; }

@media (max-width: 760px) {
	.tcp-field-group--choice-cards { padding: 14px; }
	.tcp-choice-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.tcp-choice-card,
	.tcp-choice-card--width-auto,
	.tcp-choice-card--width-third,
	.tcp-choice-card--width-half { grid-column: span 1; }
	.tcp-choice-card--width-full { grid-column: 1 / -1; }
	.tcp-choice-card__img { height: 120px; }
}
@media (max-width: 520px) {
	/* Non-full choice cards (Additional Rooms-style checkbox cards) stay at the 2-per-row
	   layout set by the 760px tier above all the way down to the smallest phone width,
	   instead of collapsing to 1-per-row here — matches the same 2026-07-28 decision
	   applied to .tcp-counter-card-grid (see its mobile-tier comment above) for
	   consistency between the two card types at every width. .tcp-choice-card--width-full
	   still spans the full row, unchanged. */
	.tcp-choice-card--width-full { grid-column: 1 / -1; }
	.tcp-icon-dropdown__trigger,
	.tcp-icon-dropdown__option { padding: 12px; }
}

/* Explicit pixel sizing for generated service fields so theme root sizing cannot shrink controls. */
.tcp-field-group--choice-cards > .tcp-label,
.tcp-toggle-row .tcp-label { font-size: 16px; }
.tcp-field-group--choice-cards .tcp-field-desc,
.tcp-choice-card__desc,
.tcp-icon-dropdown__option-desc { font-size: 14px; }
/* .tcp-choice-card__label matches .tcp-subtype-card__name's font-size (var(--tcp-fs-sm))
   per the developer's explicit request 2026-07-28 — this rule previously won the cascade
   with a hardcoded 16px (this file has two other, lower-priority .tcp-choice-card__label
   rules earlier that already used tokens: line ~1485 var(--tcp-fs-sm), line ~2329
   var(--tcp-fs-base) — both were dead code, silently overridden by this one being last in
   source order at equal specificity). */
.tcp-choice-card__label { font-size: var(--tcp-fs-sm); }
.tcp-icon-dropdown__option-name,
.tcp-icon-dropdown__trigger-text { font-size: 16px; }
.tcp-toggle-state-label { font-size: 14px; }