/* SEO Prime Chat: button mode additions. Loaded after chat.css and reuses its variables. */
.spc-root .spc-opts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-self: stretch;
}
.spc-root button.spc-opt,
.spc-root a.spc-opt {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	margin: 0;
	padding: 8px 14px;
	border: 1px solid var(--spc-accent);
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: var(--spc-accent);
	font: 600 14px/1.2 "Inter", Arial, sans-serif;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.spc-root button.spc-opt:hover,
.spc-root a.spc-opt:hover,
.spc-root button.spc-opt:focus-visible,
.spc-root a.spc-opt:focus-visible {
	background: var(--spc-accent);
	color: #071009;
	outline: none;
}
.spc-root a.spc-opt.spc-opt-wa,
.spc-root a.spc-opt.spc-opt-wa:hover {
	border-color: #25d366;
	background: #25d366;
	color: #071009;
}

.spc-root form.spc-lead {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-self: stretch;
	margin: 0;
	padding: 12px;
	border: 1px solid var(--spc-line);
	border-radius: 14px;
	background: var(--spc-bg2);
}
.spc-root input.spc-field {
	width: 100%;
	height: 42px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--spc-line);
	border-radius: 10px;
	background: var(--spc-bg);
	box-shadow: none;
	color: var(--spc-text);
	font: 400 15px/1.4 "Inter", Arial, sans-serif;
}
/* 16px stops iPhones zooming the page when a field is tapped; the theme's input size would otherwise win. */
.spc-root form.spc-lead input.spc-field { font-size: 16px; }
.spc-root input.spc-field::placeholder { color: var(--spc-muted); opacity: 1; }
.spc-root input.spc-field:focus { outline: none; border-color: var(--spc-accent); }
.spc-root input.spc-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}
.spc-root .spc-err { color: #ff9a9a; font-size: 13px; line-height: 1.4; }
.spc-root .spc-err:empty { display: none; }
.spc-root .spc-lead-actions { display: flex; align-items: center; gap: 10px; }
.spc-root button.spc-opt.spc-submit { background: var(--spc-accent); color: #071009; }
.spc-root button.spc-opt.spc-submit:disabled { opacity: .6; cursor: default; }
.spc-root button.spc-back {
	margin: 0;
	padding: 6px;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--spc-muted);
	font: 400 13px/1.2 "Inter", Arial, sans-serif;
	text-decoration: underline;
	text-transform: none;
	cursor: pointer;
}
.spc-root button.spc-back:hover { background: transparent; color: var(--spc-text); }

/* Booking form: day and time side by side, stacking when there is no room. */
.spc-root .spc-label { color: var(--spc-muted); font-size: 13px; line-height: 1.3; }
.spc-root .spc-row { display: flex; flex-wrap: wrap; gap: 8px; }
.spc-root .spc-row > * { flex: 1 1 140px; min-width: 0; }
.spc-root form.spc-lead select.spc-field {
	width: 100%;
	height: 42px;
	margin: 0;
	padding: 0 10px;
	border: 1px solid var(--spc-line);
	border-radius: 10px;
	background: var(--spc-bg);
	box-shadow: none;
	color: var(--spc-text);
	color-scheme: dark;
	font: 400 16px/1.4 "Inter", Arial, sans-serif;
}
.spc-root form.spc-lead select.spc-field:focus { outline: none; border-color: var(--spc-accent); }
.spc-root form.spc-lead input.spc-field[type="date"] { color-scheme: dark; }

/* Phones: size the open panel from the screen (vw), not from the page. Some pages are a few pixels
   wider than the screen, and a fixed panel at width:100% follows the page and gets cut off on the right. */
@media (max-width: 480px) {
	.spc-root.spc-open .spc-panel {
		width: 100vw;
		max-width: 100vw;
		right: auto;
	}
}