/**
 * Shared Vincent42 frontend shell styles.
 *
 * Depends on theme handles (`vincent42-components` / `vincent42-global`). Colors use
 * `var(--wp--preset--color--*)` (M3 roles: primary, secondary, on-*, surface-*, outline, error, …)
 * so Customizer + theme.json stay authoritative. Spacing/radius/font may use `--v42-*` aliases
 * from the theme (same underlying `theme.json` / `--wp--custom--*` presets) — no hex fallbacks on those vars.
 */

.vincent42-dashboard-shell,
.vincent42-manage-shell,
.vincent42-credit-checkout-wrap,
.vincent42-subscription-checkout-wrap {
	color: var(--wp--preset--color--on-background);
}

.vincent42-dashboard-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--v42-space-md) var(--v42-space-md);
	padding: var(--v42-space-md) var(--v42-space-md);
	margin: 0 0 var(--v42-space-md);
	border-radius: var(--v42-radius-lg);
	background: var(--wp--preset--color--surface-container);
	border: 1px solid var(--wp--preset--color--outline);
}

/* Left: business / location stacked */
.vincent42-header-context-stack {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--v42-space-xs);
	min-width: 0;
	max-width: min(100%, 18rem);
}

.vincent42-dashboard-header-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--v42-space-sm) var(--v42-space-md);
	min-width: 0;
}

.vincent42-header-business-static,
.vincent42-header-location-static {
	color: var(--wp--preset--color--on-surface);
	font-size: 0.8125rem;
	line-height: 1.25;
	margin: 0;
}

.vincent42-header-context-form select {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Credits: same glass recipe as theme `.v42-card`, with masthead-tight padding instead of `--v42-space-lg`. */
.vincent42-header-credits {
	position: relative;
	flex: 0 1 auto;
	min-width: 0;
	max-width: 14rem;
	padding-block: 0.3rem;
	padding-inline: var(--v42-space-sm);
	border-radius: var(--v42-radius-lg);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--on-surface) 8%, transparent);
	background: color-mix(in srgb, var(--wp--preset--color--surface-container) 88%, transparent);
	backdrop-filter: blur(10px);
	box-shadow: inset 0 1px 0 color-mix(in srgb, var(--wp--preset--color--on-surface) 6%, transparent);
	box-sizing: border-box;
}

.vincent42-header-credits__heading {
	font-family: var(--v42-font-heading);
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--on-surface-variant);
	margin: 0 0 0.125rem;
}

.vincent42-header-credits__rows {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.vincent42-header-credit-row {
	margin: 0;
	padding: 0.2rem 0;
	border-bottom: 1px solid var(--wp--preset--color--outline);
}

.vincent42-header-credit-row:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.vincent42-header-credit-line {
	display: flex;
	flex-direction: row;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--v42-space-sm);
	width: 100%;
	font-size: 0.8125rem;
	line-height: 1.2;
	color: var(--wp--preset--color--on-surface);
}

.vincent42-header-credit-line__num {
	font-family: var(--v42-font-mono);
	font-size: 0.875rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}

/* Notifications sit after credits; keep compact */
.vincent42-header-notifications {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

/* Primary nav: logout POST (prefs live as a normal menu link) */
.vincent42-nav-logout-form {
	margin: 0;
}

.vincent42-nav-logout-button {
	width: 100%;
	margin-top: 0.25rem;
}

.vincent42-header-login {
	white-space: nowrap;
	text-decoration: none;
}

/* Dashboard shell: invite / auth notices (WP core notice classes on dark UI) */
.vincent42-dashboard-shell .vincent42-invite-notice.notice-error {
	padding: var(--v42-space-md) var(--v42-space-md);
	margin: 0 0 var(--v42-space-md);
	border-radius: var(--v42-radius-lg);
	border: 1px solid rgba(255, 180, 171, 0.45);
	border-left-width: 1px;
	background: rgba(180, 40, 50, 0.18);
	box-shadow: none;
	color: var(--wp--preset--color--error);
}

.vincent42-dashboard-shell .vincent42-invite-notice.notice-error p {
	margin: 0;
	color: inherit;
}

/* Frontend login / sign-up (?v42_auth / invite acceptance) */
.vincent42-dashboard-auth {
	max-width: 28rem;
	padding: var(--v42-space-lg) var(--v42-space-lg) var(--v42-space-margin);
	margin: 0 0 var(--v42-space-margin);
	border-radius: var(--v42-radius-xl);
	background: var(--wp--preset--color--surface-container);
	border: 1px solid var(--wp--preset--color--outline);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
	box-sizing: border-box;
}

.vincent42-dashboard-auth h2 {
	font-family: var(--v42-font-heading);
	font-size: 1.35rem;
	font-weight: 600;
	margin: 0 0 var(--v42-space-md);
	color: var(--wp--preset--color--on-surface);
	letter-spacing: 0.02em;
}

.vincent42-dashboard-auth .vincent42-invite-login-intro,
.vincent42-dashboard-auth .description {
	font-size: var(--v42-text-body-md-size);
	line-height: 1.55;
	color: var(--wp--preset--color--on-surface-variant);
	margin: 0 0 var(--v42-space-md);
}

.vincent42-dashboard-auth label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--on-surface-variant);
}

.vincent42-dashboard-auth label:has(input[type='checkbox']) {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 500;
	cursor: pointer;
	color: var(--wp--preset--color--on-surface);
}

/* Let theme :where() input baselines apply; only constrain width. WebKit autofill otherwise paints a light fill. */
.vincent42-dashboard-auth input[type='text'],
.vincent42-dashboard-auth input[type='email'],
.vincent42-dashboard-auth input[type='password'],
.vincent42-dashboard-auth textarea,
.vincent42-dashboard-auth select {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin-top: 0.25rem;
}

.vincent42-dashboard-auth input:-webkit-autofill,
.vincent42-dashboard-auth input:-webkit-autofill:hover,
.vincent42-dashboard-auth input:-webkit-autofill:focus,
.vincent42-dashboard-auth textarea:-webkit-autofill,
.vincent42-dashboard-auth textarea:-webkit-autofill:hover,
.vincent42-dashboard-auth textarea:-webkit-autofill:focus,
.vincent42-dashboard-auth select:-webkit-autofill,
.vincent42-dashboard-auth select:-webkit-autofill:hover,
.vincent42-dashboard-auth select:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--wp--preset--color--on-surface);
	caret-color: var(--wp--preset--color--on-surface);
	box-shadow: 0 0 0 1000px var(--wp--preset--color--surface-container-lowest) inset;
	transition: background-color 999999s ease-out;
}

.vincent42-dashboard-auth input[type='checkbox'] {
	accent-color: var(--wp--preset--color--primary);
}

.vincent42-dashboard-auth .login-submit {
	margin-top: var(--v42-space-md);
	margin-bottom: 0;
}

/* Primary submit uses theme global `.button-primary` (Customizer accents). */

.vincent42-dashboard-auth > p:last-child {
	margin-bottom: 0;
}

.vincent42-dashboard-auth a {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	text-decoration: none;
	transition: color 0.15s ease;
}

.vincent42-dashboard-auth a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

/* --- Service catalog shell (Phase 4; implementation plan layout) --- */
.vincent42-service-catalog {
	/*
	 * Unitless px (read by vincent42-service-catalog.js): horizontal pointer travel
	 * before the row treats the gesture as drag-scroll vs passing a tap through to a card link.
	 */
	--v42-service-catalog-drag-commit-px: 14;

	margin-top: var(--v42-space-md);
}

.vincent42-service-catalog__intro {
	font-size: var(--v42-text-body-md-size);
	line-height: 1.55;
	color: var(--wp--preset--color--on-surface-variant);
	max-width: 42rem;
	margin: 0 0 var(--v42-space-lg);
}

.vincent42-service-catalog__band {
	margin: 0 0 var(--v42-space-margin);
}

.vincent42-service-catalog__band-title {
	font-family: var(--v42-font-heading);
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 var(--v42-space-md);
	color: var(--wp--preset--color--on-surface);
	letter-spacing: 0.02em;
}

.vincent42-service-catalog__carousel {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: var(--v42-space-sm);
}

.vincent42-service-catalog__nav {
	flex: 0 0 auto;
	align-self: center;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0;
	padding: 0;
	border-radius: var(--v42-radius-lg);
	border: 1px solid var(--wp--preset--color--outline);
	background: var(--wp--preset--color--surface-container-high);
	color: var(--wp--preset--color--primary);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		box-shadow 0.15s ease;
}

.vincent42-service-catalog__nav span {
	display: block;
	margin-top: -0.1em;
}

.vincent42-service-catalog__nav:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 12px color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent);
}

.vincent42-service-catalog__nav:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.vincent42-service-catalog__nav--inactive,
.vincent42-service-catalog__nav:disabled {
	display: none;
}

.vincent42-service-catalog__row-wrap {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0.25rem 0 0.5rem;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent) transparent;
	cursor: grab;
	touch-action: pan-x pinch-zoom;
}

.vincent42-service-catalog__row-wrap.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
	-webkit-user-select: none;
}

.vincent42-service-catalog__row-wrap.is-dragging * {
	user-select: none;
	-webkit-user-select: none;
}

.vincent42-service-catalog__row-wrap::-webkit-scrollbar {
	height: 5px;
}

.vincent42-service-catalog__row-wrap::-webkit-scrollbar-track {
	background: transparent;
}

.vincent42-service-catalog__row-wrap::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent);
	border-radius: 9999px;
}

.vincent42-service-catalog__row {
	list-style: none;
	margin: 0;
	padding: 0 0 var(--v42-space-sm);
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: var(--v42-space-md);
	width: max-content;
	min-height: 1px;
}

.vincent42-service-catalog__cell {
	margin: 0;
	flex: 0 0 auto;
	width: min(17.5rem, 82vw);
	scroll-snap-align: start;
}

.vincent42-service-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 12rem;
	padding: var(--v42-space-md);
	border-radius: var(--v42-radius-xl);
	background: var(--wp--preset--color--surface-container);
	border: 1px solid var(--wp--preset--color--outline);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent);
	transition:
		border-color 0.2s ease,
		box-shadow 0.22s ease,
		transform 0.2s ease,
		background-color 0.2s ease;
}

.vincent42-service-catalog a.vincent42-service-card--link {
	text-decoration: none;
	text-decoration-color: transparent;
	color: inherit;
	box-sizing: border-box;
	-webkit-user-drag: none;
}

.vincent42-service-catalog a.vincent42-service-card--link:hover {
	text-decoration: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--wp--preset--color--primary) 14%, transparent),
		0 12px 32px rgba(0, 0, 0, 0.28);
	transform: translateY(-2px);
}

.vincent42-service-catalog a.vincent42-service-card--link:focus-visible {
	text-decoration: none;
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

.vincent42-service-card--soon {
	opacity: 0.92;
}

.vincent42-service-catalog a.vincent42-service-card--link.vincent42-service-card--soon:hover {
	transform: translateY(-1px);
}

.vincent42-service-card__top {
	flex: 1 1 auto;
}

.vincent42-service-card__badge {
	display: inline-block;
	font-family: var(--v42-font-mono);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.2rem 0.5rem;
	margin-bottom: var(--v42-space-sm);
	border-radius: var(--v42-radius-sm);
	/* Derived secondary family (see theme :root + integration doc) — stronger than accent@alpha on glass. */
	color: var(--wp--preset--color--on-secondary);
	background: color-mix(in srgb, var(--wp--preset--color--secondary) 72%, var(--wp--preset--color--surface-container-high));
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--secondary) 58%, var(--wp--preset--color--outline));
}

.vincent42-service-card__title {
	font-family: var(--v42-font-heading);
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 var(--v42-space-sm);
	color: var(--wp--preset--color--on-surface);
}

.vincent42-service-card__description {
	font-size: 0.875rem;
	line-height: 1.5;
	margin: 0;
	color: var(--wp--preset--color--on-surface-variant);
}

.vincent42-service-card__tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: var(--v42-space-md) 0 0;
	padding: 0;
}

.vincent42-service-card__tag {
	font-family: var(--v42-font-mono);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	padding: 0.15rem 0.45rem;
	border-radius: var(--v42-radius-full);
	/* Derived primary family — chips track Customizer via primary/primary-container, not raw accent@alpha. */
	color: var(--wp--preset--color--on-primary-container);
	background: color-mix(in srgb, var(--wp--preset--color--primary-container) 52%, var(--wp--preset--color--surface-container-high));
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 48%, var(--wp--preset--color--outline));
}

.vincent42-service-card__highlights {
	margin: var(--v42-space-md) 0 0;
	padding: 0 0 0 1.1rem;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--wp--preset--color--on-surface-variant);
}

.vincent42-service-card__highlights li {
	margin: 0.2rem 0;
}

.vincent42-service-card__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--v42-space-sm);
	margin-top: var(--v42-space-md);
	padding-top: var(--v42-space-md);
	border-top: 1px solid var(--wp--preset--color--outline);
}

.vincent42-service-card__credits {
	font-family: var(--v42-font-mono);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

.vincent42-service-card__action {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	transition: color 0.15s ease, opacity 0.15s ease;
}

.vincent42-service-card__action--disabled {
	cursor: not-allowed;
	opacity: 0.65;
}

.vincent42-service-card__action--muted {
	color: var(--wp--preset--color--on-surface-variant);
	opacity: 0.85;
}

/* Service detail */
.vincent42-service-detail {
	margin-top: var(--v42-space-md);
	max-width: 40rem;
}

.vincent42-service-detail__back {
	margin: 0 0 var(--v42-space-md);
}

.vincent42-service-detail__back a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	font-weight: 600;
}

.vincent42-service-detail__back a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.vincent42-service-detail__badge-wrap {
	margin: 0 0 var(--v42-space-md);
}

.vincent42-service-detail__lede {
	font-size: 1rem;
	line-height: 1.55;
	color: var(--wp--preset--color--on-surface-variant);
	margin: 0 0 var(--v42-space-md);
}

.vincent42-service-detail__pricing {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--v42-space-sm);
	margin: 0 0 var(--v42-space-md);
}

.vincent42-service-detail__pricing-label {
	font-family: var(--v42-font-mono);
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--on-surface-variant);
}

.vincent42-service-detail__tags {
	margin-bottom: var(--v42-space-md);
}

.vincent42-service-detail__subhead {
	font-family: var(--v42-font-heading);
	font-size: 1rem;
	font-weight: 600;
	margin: var(--v42-space-md) 0 var(--v42-space-sm);
	color: var(--wp--preset--color--on-surface);
}

.vincent42-service-detail__highlights {
	margin: 0;
	padding: 0 0 0 1.2rem;
	color: var(--wp--preset--color--on-surface-variant);
	line-height: 1.5;
	font-size: 0.9375rem;
}

.vincent42-service-detail__highlights li {
	margin: 0.25rem 0;
}

.vincent42-service-detail__funnel {
	margin-top: var(--v42-space-lg);
	padding: var(--v42-space-md);
	border-radius: var(--v42-radius-xl);
	border: 1px solid var(--wp--preset--color--outline);
	background: var(--wp--preset--color--surface-container-low);
}

.vincent42-service-detail__funnel-text {
	margin: 0 0 var(--v42-space-md);
	color: var(--wp--preset--color--on-surface);
	line-height: 1.5;
}

.vincent42-service-detail__funnel-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--v42-space-md);
	margin: 0;
}

.vincent42-service-detail__funnel-link {
	display: inline-block;
	padding: 0.5rem 1rem;
	border-radius: var(--v42-radius-lg);
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--on-primary);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 55%, var(--wp--preset--color--secondary));
	background: linear-gradient(
		135deg,
		var(--wp--preset--color--secondary) 0%,
		var(--wp--preset--color--primary) 100%
	);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--wp--preset--color--on-primary) 12%, transparent),
		0 0 18px color-mix(in srgb, var(--wp--preset--color--primary) 28%, transparent);
	transition: filter 0.15s ease, box-shadow 0.15s ease;
}

.vincent42-service-detail__funnel-link:hover {
	filter: brightness(1.06);
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--wp--preset--color--on-primary) 18%, transparent),
		0 0 26px color-mix(in srgb, var(--wp--preset--color--primary) 42%, transparent);
}

.vincent42-service-detail__funnel-link--secondary {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent);
}

.vincent42-service-detail__funnel-link--secondary:hover {
	box-shadow: 0 0 12px color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent);
}

.vincent42-service-detail__runner {
	margin-top: var(--v42-space-lg);
	padding-top: var(--v42-space-md);
	border-top: 1px solid var(--wp--preset--color--outline);
}

.vincent42-service-detail__runner-note {
	color: var(--wp--preset--color--on-surface-variant);
	font-size: 0.875rem;
	line-height: 1.5;
	margin: 0 0 var(--v42-space-md);
}

.vincent42-service-card__icon,
.vincent42-service-detail__icon {
	display: block;
	object-fit: cover;
	border-radius: var(--v42-radius-md);
	border: 1px solid var(--wp--preset--color--outline);
	background: var(--wp--preset--color--surface-container-high);
}

.vincent42-service-card__icon {
	margin-bottom: var(--v42-space-sm);
}

.vincent42-service-detail__icon-wrap {
	margin: 0 0 var(--v42-space-md);
}

.vincent42-service-card--locked {
	opacity: 0.88;
}

.vincent42-service-catalog a.vincent42-service-card--link.vincent42-service-card--locked:hover {
	transform: none;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--wp--preset--color--primary) 8%, transparent);
}

.vincent42-service-card__badge--locked {
	color: var(--wp--preset--color--on-surface-variant);
	background: color-mix(in srgb, var(--wp--preset--color--on-surface-variant) 12%, var(--wp--preset--color--surface-container-high));
	border-color: var(--wp--preset--color--outline);
}

.vincent42-service-card__badge--warn {
	color: var(--wp--preset--color--on-error-container, var(--wp--preset--color--on-surface));
	background: color-mix(in srgb, var(--wp--preset--color--error, #b3261e) 18%, var(--wp--preset--color--surface-container-high));
	border-color: color-mix(in srgb, var(--wp--preset--color--error, #b3261e) 35%, var(--wp--preset--color--outline));
}

.vincent42-service-detail__access-note {
	font-size: 0.875rem;
	line-height: 1.5;
	margin: 0 0 var(--v42-space-md);
	color: var(--wp--preset--color--on-surface-variant);
}

.vincent42-service-detail__access-note--warn {
	color: var(--wp--preset--color--on-surface);
}

.vincent42-service-detail__access-note--denied {
	color: var(--wp--preset--color--error, #f2b8b5);
}

.vincent42-service-detail__summary {
	margin-bottom: var(--v42-space-md);
	padding: var(--v42-space-md);
	border-radius: var(--v42-radius-lg);
	background: var(--wp--preset--color--surface-container-high);
	border: 1px solid var(--wp--preset--color--outline);
}

.vincent42-service-detail__summary-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--v42-space-sm);
}

.vincent42-service-detail__summary-label {
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--on-surface-variant);
}

.vincent42-service-detail__summary-value {
	display: block;
	font-weight: 600;
	color: var(--wp--preset--color--on-surface);
}

.vincent42-service-detail__rate-hint {
	margin: var(--v42-space-sm) 0 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--on-surface-variant);
}

.vincent42-service-job-form__field {
	margin: 0 0 var(--v42-space-md);
}

.vincent42-service-job-form__label {
	display: block;
	margin-bottom: 0.35rem;
	font-weight: 600;
	font-size: 0.875rem;
}

.vincent42-service-job-form__required {
	color: var(--wp--preset--color--error, #f2b8b5);
}

.vincent42-service-job-form__control {
	width: 100%;
	max-width: 32rem;
	padding: 0.5rem 0.65rem;
	border-radius: var(--v42-radius-md);
	border: 1px solid var(--wp--preset--color--outline);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--on-surface);
}

.vincent42-service-job-form__actions {
	margin-top: var(--v42-space-md);
}

.vincent42-service-detail__job-error {
	margin: 0 0 var(--v42-space-md);
	padding: var(--v42-space-sm) var(--v42-space-md);
	border-radius: var(--v42-radius-md);
	background: color-mix(in srgb, var(--wp--preset--color--error, #b3261e) 14%, var(--wp--preset--color--surface-container-high));
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--error, #b3261e) 35%, var(--wp--preset--color--outline));
	color: var(--wp--preset--color--on-surface);
}

.vincent42-service-detail__job-success,
.vincent42-service-detail__success {
	margin: 0 0 var(--v42-space-md);
	padding: var(--v42-space-md);
	border-radius: var(--v42-radius-lg);
	background: color-mix(in srgb, var(--wp--preset--color--primary, #1b6b3a) 10%, var(--wp--preset--color--surface-container-high));
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary, #1b6b3a) 35%, var(--wp--preset--color--outline));
	color: var(--wp--preset--color--on-surface);
}

.vincent42-service-detail__success-title {
	margin: 0 0 var(--v42-space-sm);
	font-weight: 600;
}

.vincent42-service-detail__success-text {
	margin: 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--on-surface-variant);
}

.vincent42-service-detail__pending {
	padding: var(--v42-space-md);
	border-radius: var(--v42-radius-lg);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 35%, var(--wp--preset--color--outline));
	background: color-mix(in srgb, var(--wp--preset--color--primary) 8%, var(--wp--preset--color--surface-container-high));
}

.vincent42-service-detail__pending-title {
	margin: 0 0 var(--v42-space-sm);
	font-weight: 600;
}

.vincent42-service-detail__pending-text {
	margin: 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--on-surface-variant);
}

.vincent42-service-detail__run-again {
	margin: var(--v42-space-md) 0 0;
	font-size: 0.875rem;
	color: var(--wp--preset--color--on-surface-variant);
}

.vincent42-service-detail__run-again-link {
	display: inline-block;
	margin-top: var(--v42-space-sm);
	font-weight: 600;
	color: var(--wp--preset--color--primary, #1b6b3a);
	text-decoration: none;
}

.vincent42-service-detail__run-again-link:hover,
.vincent42-service-detail__run-again-link:focus-visible {
	text-decoration: underline;
}

.vincent42-service-detail__runner-form--after-success {
	margin-top: var(--v42-space-lg);
	padding-top: var(--v42-space-lg);
	border-top: 1px solid var(--wp--preset--color--outline-variant, #c4c7c5);
}

.vincent42-service-job-status {
	margin: 0 0 var(--v42-space-md);
	padding: var(--v42-space-md);
	border-radius: var(--v42-radius-lg);
	border: 1px solid var(--wp--preset--color--outline);
	background: var(--wp--preset--color--surface-container-high);
}

.vincent42-service-job-status--pending {
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) 35%, var(--wp--preset--color--outline));
	background: color-mix(in srgb, var(--wp--preset--color--primary) 8%, var(--wp--preset--color--surface-container-high));
}

.vincent42-service-job-status--completed {
	border-color: color-mix(in srgb, var(--wp--preset--color--primary, #1b6b3a) 35%, var(--wp--preset--color--outline));
	background: color-mix(in srgb, var(--wp--preset--color--primary, #1b6b3a) 10%, var(--wp--preset--color--surface-container-high));
}

.vincent42-service-job-status--failed-callback {
	border-color: color-mix(in srgb, var(--wp--preset--color--error, #b3261e) 40%, var(--wp--preset--color--outline));
	background: color-mix(in srgb, var(--wp--preset--color--error, #b3261e) 8%, var(--wp--preset--color--surface-container-high));
}

.vincent42-service-job-status__title {
	margin: 0 0 var(--v42-space-sm);
	font-weight: 600;
}

.vincent42-service-job-status__job-id {
	font-weight: 400;
	font-size: 0.875rem;
	color: var(--wp--preset--color--on-surface-variant);
}

.vincent42-service-job-status__meta {
	display: grid;
	gap: var(--v42-space-xs);
	margin: 0 0 var(--v42-space-md);
	font-size: 0.875rem;
}

.vincent42-service-job-status__meta-row {
	display: grid;
	grid-template-columns: minmax(6rem, auto) 1fr;
	gap: var(--v42-space-sm);
}

.vincent42-service-job-status__meta dt {
	margin: 0;
	color: var(--wp--preset--color--on-surface-variant);
}

.vincent42-service-job-status__meta dd {
	margin: 0;
}

.vincent42-service-job-status__lead {
	margin: 0 0 var(--v42-space-sm);
	font-size: 0.875rem;
	color: var(--wp--preset--color--on-surface-variant);
}

.vincent42-service-job-status__error {
	margin: 0 0 var(--v42-space-sm);
	padding: var(--v42-space-sm) var(--v42-space-md);
	border-radius: var(--v42-radius-md);
	background: color-mix(in srgb, var(--wp--preset--color--error, #b3261e) 12%, transparent);
	color: var(--wp--preset--color--on-surface);
	font-size: 0.875rem;
}

.vincent42-service-job-results {
	display: grid;
	gap: var(--v42-space-md);
	margin: var(--v42-space-md) 0 0;
}

.vincent42-service-job-results__row {
	display: grid;
	gap: var(--v42-space-xs);
}

.vincent42-service-job-results__row dt {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--on-surface-variant);
}

.vincent42-service-job-results__row dd {
	margin: 0;
}

.vincent42-service-job-results__file-image {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: var(--v42-radius-md);
	border: 1px solid var(--wp--preset--color--outline-variant, #c4c7c5);
}

.vincent42-service-job-results__file-download {
	display: inline-block;
	font-weight: 600;
	color: var(--wp--preset--color--primary, #1b6b3a);
	text-decoration: none;
}

.vincent42-service-job-results__file-download:hover,
.vincent42-service-job-results__file-download:focus-visible {
	text-decoration: underline;
}

.vincent42-service-paywall {
	margin: 0 0 var(--v42-space-md);
	padding: var(--v42-space-md);
	border-radius: var(--v42-radius-lg);
	border: 1px solid var(--wp--preset--color--outline);
	background: var(--wp--preset--color--surface-container-high);
}

.vincent42-service-paywall--past-due {
	border-color: color-mix(in srgb, var(--wp--preset--color--error, #b3261e) 40%, var(--wp--preset--color--outline));
	background: color-mix(in srgb, var(--wp--preset--color--error, #b3261e) 8%, var(--wp--preset--color--surface-container-high));
}

.vincent42-service-paywall__lead {
	margin: 0 0 var(--v42-space-sm);
	font-size: 0.875rem;
	color: var(--wp--preset--color--on-surface-variant);
}

.vincent42-service-paywall__subhead {
	margin: 0 0 var(--v42-space-sm);
	font-size: 1rem;
}

.vincent42-service-paywall__note,
.vincent42-service-paywall__hint {
	margin: var(--v42-space-sm) 0 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--on-surface-variant);
}

.vincent42-service-paywall__label {
	margin: var(--v42-space-md) 0 var(--v42-space-xs);
	font-weight: 600;
	font-size: 0.875rem;
}

.vincent42-service-subscription__pricing {
	display: flex;
	gap: var(--v42-space-sm);
	align-items: baseline;
	margin: 0 0 var(--v42-space-md);
}

.vincent42-service-subscription__pricing-label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--on-surface-variant);
}

.vincent42-service-subscription__pricing-value {
	font-weight: 600;
}

.vincent42-service-subscription__location-fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.vincent42-service-subscription__location-fieldset legend {
	margin: 0 0 var(--v42-space-xs);
	padding: 0;
	font-weight: 600;
	font-size: 0.875rem;
}

.vincent42-service-subscription__location-list,
.vincent42-service-subscription__included-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.vincent42-service-subscription__location-list li,
.vincent42-service-subscription__included-list li {
	margin: 0 0 var(--v42-space-xs);
}

.vincent42-service-subscription__manage-meta {
	margin: 0 0 var(--v42-space-sm);
	font-size: 0.875rem;
	color: var(--wp--preset--color--on-surface-variant);
}

.vincent42-service-subscription__remove-form {
	display: inline;
	margin-left: var(--v42-space-sm);
}

.vincent42-service-subscription-status {
	margin-top: 0;
	margin-bottom: var(--v42-space-md);
	padding: var(--v42-space-md);
	border: 1px solid var(--wp--preset--color--outline-variant, rgba(0, 0, 0, 0.08));
	border-radius: var(--v42-radius-sm, 4px);
	background: var(--wp--preset--color--surface-container-low, rgba(0, 0, 0, 0.02));
}

.vincent42-service-detail__subscription-status-heading {
	margin: 0 0 var(--v42-space-sm);
	font-size: 1.125rem;
}

.vincent42-service-detail__subscription-latest-heading {
	margin: var(--v42-space-md) 0 var(--v42-space-xs);
	font-size: 1rem;
}

.vincent42-service-detail__subscription-results-link {
	margin: var(--v42-space-sm) 0 0;
}

.vincent42-service-subscription-manage-wrap {
	margin-top: var(--v42-space-md);
}

.vincent42-service-subscription-manage-wrap__summary {
	cursor: pointer;
	font-weight: 600;
}

.vincent42-service-subscription-manage-wrap--cancelled,
.vincent42-service-detail__subscription-status-note--cancelled,
.vincent42-service-paywall__note--cancelled {
	border-left: 3px solid var(--wp--preset--color--outline);
	padding-left: var(--v42-space-sm);
}

.vincent42-service-paywall--manage-cancelled .vincent42-service-paywall__subhead {
	color: var(--wp--preset--color--on-surface-variant);
}

.vincent42-service-subscription-status__lead {
	margin: 0 0 var(--v42-space-sm);
}

.vincent42-service-subscription-status__pending,
.vincent42-service-subscription-status__history-note {
	margin: var(--v42-space-xs) 0 0;
	color: var(--wp--preset--color--on-surface-variant);
	font-size: 0.875rem;
}

.vincent42-service-credit-paywall__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--v42-space-sm);
	margin-top: var(--v42-space-md);
}