/**
 * Pawsh × Schedopia bridge.
 *
 * Fonts, radius and button shape are set through Schedopia's own appearance
 * settings during setup. These rules cover what those settings can't:
 * widths, borders, a few typographic details, and colours that follow the
 * active style variation (Mint, Night) without re-running setup.
 *
 * `:is(#pawsh, .bk-embed)` matches by class but carries an ID's weight, so
 * it outranks Schedopia's per-instance `#schedopia-form-N` token rules.
 */

/* Colours from the theme palette, so every style variation matches. */
.schedopia-container :is(.schedopia-booking-form, .schedopia-service-list, .schedopia-staff-list):is(#pawsh, .bk-embed) {
	--accent: var(--wp--preset--color--accent);
	--accent-hover: var(--wp--preset--color--accent-3);
	--accent-press: var(--wp--preset--color--accent-3);
	--accent-soft: var(--wp--preset--color--accent-2);
	--accent-soft-2: color-mix(in srgb, var(--wp--preset--color--accent) 18%, var(--wp--preset--color--white));
	--accent-text: var(--wp--preset--color--accent-3);
	--ring: color-mix(in srgb, var(--wp--preset--color--accent) 28%, transparent);
	--text: var(--wp--preset--color--contrast);
	--text-2: var(--wp--preset--color--contrast-2);
	--text-3: color-mix(in srgb, var(--wp--preset--color--contrast-2) 80%, var(--wp--preset--color--white));
	--text-4: color-mix(in srgb, var(--wp--preset--color--contrast-2) 55%, var(--wp--preset--color--white));
	--surface: var(--wp--preset--color--white);
	/* Schedopia uses --white for card backgrounds and for text on the accent. */
	--white: var(--wp--preset--color--white);
	--surface-2: var(--wp--preset--color--base-2);
	--surface-hover: var(--wp--preset--color--base-2);
	--bg: var(--wp--preset--color--base-2);
	--page-bg: var(--wp--preset--color--base-2);
	--border: var(--wp--preset--color--line);
	--border-2: var(--wp--preset--color--line);
	--border-strong: color-mix(in srgb, var(--wp--preset--color--line) 70%, var(--wp--preset--color--contrast-2));
	--neutral-bg: var(--wp--preset--color--base-2);
	--disabled: color-mix(in srgb, var(--wp--preset--color--contrast-2) 40%, var(--wp--preset--color--white));
}

/* Text on the accent follows the variation (dark on Night's soft coral). */
.schedopia-container :is(.schedopia-booking-form, .schedopia-service-list, .schedopia-staff-list):is(#pawsh, .bk-embed) .btn-primary {
	color: var(--wp--preset--color--on-accent);
}

/* Use the full width the theme layout provides. */
.schedopia-container .schedopia-booking-form:is(#pawsh, .bk-embed) {
	--bk-card-max: 100%;
}

/* Cards: hairline borders, soft shadow, a gentle lift on hover. */
.schedopia-container :is(.schedopia-service-list, .schedopia-staff-list):is(#pawsh, .bk-embed) .svc-card {
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--soft);
	overflow: hidden;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

@media (prefers-reduced-motion: no-preference) {
	.schedopia-container :is(.schedopia-service-list, .schedopia-staff-list):is(#pawsh, .bk-embed) .svc-card:hover {
		transform: translateY(-2px);
		box-shadow: var(--wp--preset--shadow--lift);
	}
}

/* Card titles in the heading face. */
.schedopia-container :is(.schedopia-service-list, .schedopia-staff-list):is(#pawsh, .bk-embed) .svc-card h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.1875rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.25;
}

/* Category labels and eyebrows: Schedopia colours them per form from the
   saved accent, so pin them to the variation's accent text colour. */
.schedopia-container :is(.schedopia-booking-form, .schedopia-service-list, .schedopia-staff-list):is(#pawsh, .bk-embed) :is(.svc-cat, .bk-eyebrow) {
	color: var(--accent-text);
}

.schedopia-container .schedopia-booking-form:is(#pawsh, .bk-embed) .bk-eyebrow {
	border-color: var(--accent-soft-2);
	background: var(--accent-soft);
}

.schedopia-container :is(.schedopia-service-list, .schedopia-staff-list):is(#pawsh, .bk-embed) .svc-cat {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.schedopia-container .schedopia-service-list:is(#pawsh, .bk-embed) .svc-price b {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* Booking form: heading-face step titles to match the page. */
.schedopia-container .schedopia-booking-form:is(#pawsh, .bk-embed) :is(.bk-head h1, .bk-head h2, .bk-screen > h2) {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	letter-spacing: -0.02em;
}

.schedopia-container .schedopia-booking-form:is(#pawsh, .bk-embed) .bk-eyebrow {
	font-weight: 700;
	letter-spacing: 0.05em;
}

/* Price list: the service group is already the section heading, and the
   photos live on the Services and service pages, so the list stays text-only. */
.schedopia-container .schedopia-service-list[data-layout="list"]:is(#pawsh, .bk-embed) :is(.svc-cat, .svc-media) {
	display: none;
}