/**
 * Inspa skin for BookingPress (front booking wizard)
 *
 * BookingPress sets bright greens on :root in bookingpress_front.css, which
 * can load after theme CSS. This file is enqueued *after* bookingpress_front
 * (see inc/inspa-bookingpress.php) and redefines --bpa-* for the booking
 * section so the sage palette always wins.
 */

/* ——— Token bridge: every node under the WordPress booking layout ——— */
#dcf-root .inspa-wp-booking,
#dcf-root .inspa-wp-booking * {
	--inspa-bp-primary: var(--inspa-accent);
	--inspa-bp-primary-hover: #36483f;
	--inspa-bp-on-primary: #fafaf8;

	--bpa-pt-main-green: var(--inspa-accent) !important;
	--bpa-pt-main-green-darker: var(--inspa-bp-primary-hover) !important;
	--bpa-sc-success: var(--inspa-accent) !important;
	--bpa-sc-success-darker: var(--inspa-bp-primary-hover) !important;
	--bpa-pt-main-green-alpha-12: rgba(63, 82, 73, 0.12) !important;
	--bpa-pt-main-green-alpha-08: rgba(63, 82, 73, 0.08) !important;

	--bpa-dt-black-400: var(--inspa-ink) !important;
	--bpa-dt-black-300: var(--inspa-ink-soft) !important;
	--bpa-dt-black-200: var(--inspa-muted) !important;
	--bpa-gt-gray-200: rgba(28, 27, 25, 0.06) !important;
	--bpa-gt-gray-100: rgba(247, 245, 241, 0.95) !important;

	--bpa-primary-font: var(--inspa-font-body) !important;
	--bpa-secondary-font: var(--inspa-font-body) !important;
}

/* Redundant but explicit: wrapper the shortcode used to set vars before late BP load */
body.dcf-app .inspa-booking__plugin-wrap {
	--bpa-pt-main-green: var(--inspa-accent);
	--bpa-pt-main-green-darker: #36483f;
	--bpa-sc-success: var(--inspa-accent);
	--bpa-sc-success-darker: #36483f;
	--bpa-pt-main-green-alpha-12: rgba(63, 82, 73, 0.12);
	--bpa-pt-main-green-alpha-08: rgba(63, 82, 73, 0.08);
	--bpa-dt-black-400: var(--inspa-ink);
	--bpa-dt-black-300: var(--inspa-ink-soft);
	--bpa-dt-black-200: var(--inspa-muted);
	--bpa-gt-gray-200: rgba(28, 27, 25, 0.06);
	--bpa-gt-gray-100: rgba(247, 245, 241, 0.9);
	--bpa-primary-font: var(--inspa-font-body);
	--bpa-secondary-font: var(--inspa-font-body);
}

body.dcf-app .inspa-booking__plugin-wrap .bpa-frontend-main-container,
body.dcf-app .inspa-wp-booking .bpa-frontend-main-container {
	font-family: var(--inspa-font-body);
	color: var(--inspa-ink-soft);
	-webkit-font-smoothing: antialiased;
}

/* Step titles */
body.dcf-app .inspa-wp-booking .bpa-front-module-heading,
body.dcf-app .inspa-booking__plugin-wrap .bpa-front-module-heading {
	font-family: var(--inspa-font-display);
	font-weight: 500;
	font-size: clamp(1.2rem, 2vw, 1.45rem);
	letter-spacing: -0.02em;
	color: var(--inspa-ink);
	margin-bottom: 0.75rem;
}

/* Cards, pills, service tiles */
body.dcf-app .inspa-wp-booking .bpa-front-ci-pill,
body.dcf-app .inspa-wp-booking .bpa-front-si-card,
body.dcf-app .inspa-booking__plugin-wrap .bpa-front-ci-pill,
body.dcf-app .inspa-booking__plugin-wrap .bpa-front-si-card {
	border-radius: var(--inspa-radius-md) !important;
}

body.dcf-app .inspa-wp-booking .bpa-front-default-card,
body.dcf-app .inspa-booking__plugin-wrap .bpa-front-default-card {
	border-radius: var(--inspa-radius-lg);
	border: 1px solid var(--inspa-border);
	background: var(--inspa-surface);
	box-shadow: var(--inspa-shadow-soft);
}

/* Price on service row + *active* category filter only */
body.dcf-app .inspa-wp-booking [class*="bpa-front-si--price"],
body.dcf-app .inspa-wp-booking .bpa-front-ci-pill.--bpa-is-active,
body.dcf-app .inspa-wp-booking .bpa-front-ci-pill.__bpa-is-active {
	background-color: var(--inspa-accent) !important;
	color: #fafaf8 !important;
	border-color: var(--inspa-accent) !important;
}

/* Inactive category chips: border + text in theme ink (not default BP navy) */
body.dcf-app .inspa-wp-booking .bpa-front-ci-pill:not(.--bpa-is-active):not(.__bpa-is-active) {
	background: transparent !important;
	color: var(--inspa-ink-soft) !important;
	border-color: var(--inspa-border-strong) !important;
}

/* Vertical step nav */
body.dcf-app .inspa-wp-booking .bpa-front-tab-menu--item.__bpa-is-active .bpa-front-tm--item-label,
body.dcf-app .inspa-wp-booking .bpa-front-tab-menu--item.__bpa-is-active .bpa-front-tm--item-icon,
body.dcf-app .inspa-booking__plugin-wrap .bpa-front-tab-menu--item.__bpa-is-active .bpa-front-tm--item-label,
body.dcf-app .inspa-booking__plugin-wrap .bpa-front-tab-menu--item.__bpa-is-active .bpa-front-tm--item-icon {
	color: var(--inspa-accent) !important;
}

body.dcf-app .inspa-wp-booking .bpa-front-tab-menu--item.__bpa-is-active::before,
body.dcf-app .inspa-booking__plugin-wrap .bpa-front-tab-menu--item.__bpa-is-active::before {
	background: var(--inspa-accent) !important;
}

/* Inactive step labels: align with Inspa muted text */
body.dcf-app .inspa-wp-booking .bpa-front-tab-menu--item:not(.__bpa-is-active) .bpa-front-tm--item-label,
body.dcf-app .inspa-wp-booking .bpa-front-tab-menu--item:not(.__bpa-is-active) .bpa-front-tm--item-icon {
	color: var(--inspa-muted) !important;
}

body.dcf-app .inspa-wp-booking .bpa-front-toast-notification.--bpa-error {
	border-radius: var(--inspa-radius-sm);
}

/* Element UI primary (Next, Continue, etc.) */
body.dcf-app .inspa-wp-booking .el-button--primary,
body.dcf-app .inspa-wp-booking button.el-button--primary,
body.dcf-app .inspa-booking__plugin-wrap .el-button--primary,
body.dcf-app .inspa-booking__plugin-wrap button.el-button--primary {
	background-color: var(--inspa-accent) !important;
	border-color: var(--inspa-accent) !important;
	color: #fafaf8 !important;
	border-radius: 999px !important;
	font-weight: var(--inspa-fw-medium) !important;
	padding-left: 1.35rem !important;
	padding-right: 1.35rem !important;
}

body.dcf-app .inspa-wp-booking .el-button--primary:hover,
body.dcf-app .inspa-wp-booking .el-button--primary:focus,
body.dcf-app .inspa-wp-booking button.el-button--primary:hover,
body.dcf-app .inspa-booking__plugin-wrap .el-button--primary:hover,
body.dcf-app .inspa-booking__plugin-wrap button.el-button--primary:hover {
	background-color: #36483f !important;
	border-color: #36483f !important;
}

body.dcf-app .inspa-wp-booking .el-button--default,
body.dcf-app .inspa-wp-booking .el-button:not(.el-button--primary) {
	border-radius: 999px !important;
	border-color: var(--inspa-border-strong) !important;
	color: var(--inspa-ink-soft) !important;
}

/* Inputs */
body.dcf-app .inspa-wp-booking .el-input__inner,
body.dcf-app .inspa-wp-booking .el-textarea__inner {
	border-radius: var(--inspa-radius-sm) !important;
	border-color: var(--inspa-border-strong) !important;
	font-family: var(--inspa-font-body) !important;
}

body.dcf-app .inspa-wp-booking .el-input__inner:focus,
body.dcf-app .inspa-wp-booking .el-textarea__inner:focus {
	border-color: var(--inspa-accent) !important;
}

/* Calendar selection */
body.dcf-app .inspa-wp-booking .el-calendar-table td.is-selected .el-calendar-day,
body.dcf-app .inspa-wp-booking .el-calendar-table .el-calendar-day:focus {
	border-radius: var(--inspa-radius-sm);
}

body.dcf-app .inspa-wp-booking .bpa-front-loader-cl-primary,
body.dcf-app .inspa-booking__plugin-wrap .bpa-front-loader-cl-primary {
	fill: var(--inspa-accent) !important;
}

/* Selected service card */
body.dcf-app .inspa-wp-booking .bpa-front-module--service-item.__bpa-is-selected .bpa-front-si-card,
body.dcf-app .inspa-booking__plugin-wrap .bpa-front-module--service-item.__bpa-is-selected .bpa-front-si-card {
	box-shadow: 0 0 0 2px rgba(63, 82, 73, 0.28) !important;
}

/* Checkmarks / small icons in category row */
body.dcf-app .inspa-wp-booking .bpa-front-ci-pill [class*="icon"],
body.dcf-app .inspa-wp-booking .bpa-front-ci-pill svg {
	color: inherit !important;
	fill: currentColor !important;
}