/*
 * Kalinga Care Journey UI
 * Scoped, standalone styles. High specificity and selective !important rules
 * intentionally override WooCommerce/theme defaults on journey screens.
 */
:root {
	--kcj-primary: var(--e-global-color-primary, var(--wp--preset--color--primary, #153f32));
	--kcj-primary-dark: #0d3026;
	--kcj-accent: #b38b56;
	--kcj-text: #1c2924;
	--kcj-muted: #68746f;
	--kcj-surface: #ffffff;
	--kcj-surface-soft: #f5f7f4;
	--kcj-surface-warm: #faf9f6;
	--kcj-ring: rgba(21, 63, 50, .18);
	--kcj-shadow: 0 18px 55px rgba(20, 48, 39, .09);
	--kcj-shadow-soft: 0 10px 34px rgba(20, 48, 39, .07);
	--kcj-radius-lg: 22px;
	--kcj-radius-md: 14px;
}

/* Tailwind-independent visibility helpers used by the plugin JS. */
#kcj-onboarding-app .hidden { display: none !important; }
#kcj-onboarding-app .invisible { visibility: hidden !important; }

/* ---------- Onboarding ---------- */
#kcj-onboarding-app {
	min-height: 100vh !important;
	background: transparent !important;
	color: var(--kcj-text) !important;
	font-family: inherit !important;
}
#kcj-onboarding-app > header {
	position: sticky !important;
	top: 0 !important;
	z-index: 50 !important;
	min-height: 68px !important;
	background: rgba(255,255,255,.88) !important;
	backdrop-filter: blur(15px) !important;
	box-shadow: 0 1px 0 rgba(21,63,50,.06) !important;
}
#kcj-onboarding-app > header > div {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	width: min(1180px, calc(100% - 40px)) !important;
	min-height: 68px !important;
	margin: 0 auto !important;
}
#kcj-onboarding-app > header a {
	color: var(--kcj-primary) !important;
	font-weight: 800 !important;
	text-decoration: none !important;
}
#kcj-onboarding-app [data-kcj-save-exit] {
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	padding: 9px 13px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--kcj-surface-soft) !important;
	color: var(--kcj-muted) !important;
	box-shadow: none !important;
}
#kcj-onboarding-app > main {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	overflow: hidden !important;
	padding: 54px 20px 72px !important;
}
#kcj-onboarding-app > main > div:first-of-type,
#kcj-onboarding-app > main > div:nth-of-type(2) { pointer-events: none !important; }
#kcj-onboarding-app > main > div:nth-of-type(3),
#kcj-onboarding-form {
	width: min(100%, 680px) !important;
}
#kcj-onboarding-app [data-kcj-current-step] { font-weight: 800 !important; }
#kcj-onboarding-app [data-kcj-progress] {
	display: block !important;
	height: 7px !important;
	border-radius: 999px !important;
	background: linear-gradient(90deg, var(--kcj-primary), #5f8c78) !important;
	box-shadow: 0 4px 14px var(--kcj-ring) !important;
}
#kcj-onboarding-app [data-kcj-progress]::before { content: none !important; }
#kcj-onboarding-form > section {
	background: rgba(255,255,255,.94) !important;
	padding: clamp(24px, 5vw, 44px) !important;
	border: 0 !important;
	border-radius: var(--kcj-radius-lg) !important;
	box-shadow: var(--kcj-shadow) !important;
}
#kcj-onboarding-form h1 {
	margin: 0 0 12px !important;
	color: var(--kcj-primary) !important;
	font-family: inherit !important;
	font-size: clamp(28px, 5vw, 44px) !important;
	line-height: 1.12 !important;
	letter-spacing: -.025em !important;
}
#kcj-onboarding-form h3 { color: var(--kcj-text) !important; }
#kcj-onboarding-form p { color: var(--kcj-muted) !important; }
#kcj-onboarding-form label > span:first-child {
	display: block !important;
	margin: 0 0 8px !important;
	color: var(--kcj-text) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
}
#kcj-onboarding-form input:not([type="checkbox"]):not([type="radio"]),
#kcj-onboarding-form select,
#kcj-onboarding-form textarea {
	width: 100% !important;
	min-height: 52px !important;
	margin: 0 !important;
	padding: 13px 15px !important;
	border: 0 !important;
	border-radius: var(--kcj-radius-md) !important;
	background: var(--kcj-surface-soft) !important;
	color: var(--kcj-text) !important;
	font: inherit !important;
	outline: 0 !important;
	box-shadow: inset 0 0 0 1px rgba(21,63,50,.08) !important;
	transition: box-shadow .2s ease, background .2s ease !important;
}
#kcj-onboarding-form textarea { min-height: 132px !important; resize: vertical !important; }
#kcj-onboarding-form input:focus,
#kcj-onboarding-form select:focus,
#kcj-onboarding-form textarea:focus {
	background: #fff !important;
	box-shadow: inset 0 0 0 2px var(--kcj-primary), 0 0 0 4px var(--kcj-ring) !important;
}
#kcj-onboarding-form .grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 18px !important;
}
#kcj-onboarding-form .grid-cols-1 { grid-template-columns: 1fr !important; }
#kcj-onboarding-form .md\:col-span-2 { grid-column: span 2 !important; }
#kcj-onboarding-form .space-y-4 > * + * { margin-top: 16px !important; }
#kcj-onboarding-form .space-y-5 > * + * { margin-top: 20px !important; }
#kcj-onboarding-form .space-y-6 > * + * { margin-top: 24px !important; }
#kcj-onboarding-form .kcj-option-card {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
	padding: 20px !important;
	border: 0 !important;
	border-radius: 17px !important;
	background: var(--kcj-surface-soft) !important;
	box-shadow: inset 0 0 0 1px rgba(21,63,50,.06) !important;
	cursor: pointer !important;
	transition: transform .22s ease, box-shadow .22s ease, background .22s ease !important;
}
#kcj-onboarding-form .kcj-option-card:hover {
	transform: translateY(-2px) !important;
	background: #fff !important;
	box-shadow: var(--kcj-shadow-soft) !important;
}
#kcj-onboarding-form .kcj-option-card.is-selected {
	background: rgba(21,63,50,.07) !important;
	box-shadow: inset 0 0 0 2px var(--kcj-primary), 0 10px 30px rgba(21,63,50,.08) !important;
}
#kcj-onboarding-form .kcj-control {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 25px !important;
	width: 25px !important;
	height: 25px !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: #fff !important;
	box-shadow: inset 0 0 0 2px rgba(21,63,50,.2) !important;
}
#kcj-onboarding-form .kcj-option-card.is-selected .kcj-control {
	background: var(--kcj-primary) !important;
	box-shadow: none !important;
}
#kcj-onboarding-form .kcj-control .material-symbols-outlined {
	opacity: 0 !important;
	transform: scale(.65) !important;
	color: #fff !important;
	font-size: 16px !important;
	transition: opacity .2s ease, transform .2s ease !important;
}
#kcj-onboarding-form .kcj-option-card.is-selected .kcj-control .material-symbols-outlined {
	opacity: 1 !important;
	transform: scale(1) !important;
}
#kcj-onboarding-form [data-kcj-review] > div {
	display: flex !important;
	justify-content: space-between !important;
	gap: 20px !important;
	padding: 11px 0 !important;
	border: 0 !important;
	box-shadow: inset 0 -1px rgba(21,63,50,.08) !important;
}
#kcj-onboarding-app [data-kcj-next] {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: min(100%, 300px) !important;
	min-height: 56px !important;
	padding: 13px 24px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--kcj-primary) !important;
	color: #fff !important;
	font: inherit !important;
	font-weight: 800 !important;
	box-shadow: 0 14px 30px rgba(21,63,50,.18) !important;
}
#kcj-onboarding-app [data-kcj-back] {
	border: 0 !important;
	background: transparent !important;
	color: var(--kcj-muted) !important;
	box-shadow: none !important;
}
#kcj-onboarding-form + div { color: var(--kcj-muted) !important; }
.kcj-ambient-glow {
	background: radial-gradient(circle, rgba(95,140,120,.12), rgba(255,255,255,0) 70%) !important;
}

/* ---------- Plans ---------- */
.kcj-plan-selection {
	width: min(1180px, calc(100% - 40px)) !important;
	margin: 0 auto !important;
	padding: clamp(54px, 8vw, 92px) 0 !important;
	font-family: inherit !important;
}
.kcj-plan-selection__header {
	max-width: 760px !important;
	margin: 0 auto 44px !important;
	text-align: center !important;
}
.kcj-plan-selection__header > p:first-child {
	color: var(--kcj-accent) !important;
	font-size: 12px !important;
	font-weight: 800 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
}
.kcj-plan-selection__header h1 {
	margin: 8px 0 12px !important;
	color: var(--kcj-primary) !important;
	font-size: clamp(32px, 5vw, 52px) !important;
	line-height: 1.1 !important;
	letter-spacing: -.03em !important;
}
.kcj-plan-selection__header > p:last-child { color: var(--kcj-muted) !important; }
.kcj-plan-grid {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 24px !important;
}
.kcj-plan-card,
.kcj-plan-empty {
	border: 0 !important;
	border-radius: var(--kcj-radius-lg) !important;
	background: #fff !important;
	box-shadow: var(--kcj-shadow) !important;
}
.kcj-plan-card {
	display: flex !important;
	flex-direction: column !important;
	padding: 22px !important;
	transition: transform .24s ease, box-shadow .24s ease !important;
}
.kcj-plan-card:hover {
	transform: translateY(-5px) !important;
	box-shadow: 0 24px 65px rgba(20,48,39,.13) !important;
}
.kcj-plan-card__image {
	aspect-ratio: 4/3 !important;
	overflow: hidden !important;
	margin-bottom: 20px !important;
	border-radius: 16px !important;
	background: var(--kcj-surface-soft) !important;
}
.kcj-plan-card__image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}
.kcj-plan-card__title {
	margin: 0 !important;
	color: var(--kcj-primary) !important;
	font-size: 22px !important;
	line-height: 1.25 !important;
}
.kcj-plan-card__description {
	flex: 1 1 auto !important;
	margin-top: 10px !important;
	color: var(--kcj-muted) !important;
	font-size: 14px !important;
}
.kcj-plan-card__price {
	margin-top: 22px !important;
	color: var(--kcj-primary) !important;
	font-size: 28px !important;
	font-weight: 800 !important;
}
.kcj-plan-card__form { margin-top: 22px !important; }
.kcj-plan-button {
	width: 100% !important;
	min-height: 52px !important;
	padding: 13px 20px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--kcj-primary) !important;
	color: #fff !important;
	font: inherit !important;
	font-weight: 800 !important;
	box-shadow: 0 12px 26px rgba(21,63,50,.17) !important;
	transition: transform .2s ease, background .2s ease !important;
}
.kcj-plan-button:hover { background: var(--kcj-primary-dark) !important; transform: translateY(-1px) !important; }
.kcj-plan-empty { padding: 38px !important; text-align: center !important; }

/* ---------- Shared journey progress ---------- */
.kalinga-journey-steps {
	width: min(100%, 820px) !important;
	margin: 0 auto 38px !important;
	font-family: inherit !important;
}
.kalinga-journey-steps__list {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 12px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.kalinga-journey-steps__link {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	min-height: 62px !important;
	padding: 11px 15px !important;
	border: 0 !important;
	border-radius: 16px !important;
	background: var(--kcj-surface-soft) !important;
	color: var(--kcj-muted) !important;
	text-decoration: none !important;
	box-shadow: none !important;
}
.kalinga-journey-steps__number {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 34px !important;
	width: 34px !important;
	height: 34px !important;
	border-radius: 999px !important;
	background: #fff !important;
	color: var(--kcj-muted) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	box-shadow: 0 4px 14px rgba(20,48,39,.06) !important;
}
.kalinga-journey-steps__label { font-size: 13px !important; font-weight: 700 !important; line-height: 1.25 !important; }
.kalinga-journey-steps__item.is-active .kalinga-journey-steps__link {
	background: var(--kcj-primary) !important;
	color: #fff !important;
	box-shadow: 0 13px 30px rgba(21,63,50,.16) !important;
}
.kalinga-journey-steps__item.is-active .kalinga-journey-steps__number,
.kalinga-journey-steps__item.is-complete .kalinga-journey-steps__number {
	background: #fff !important;
	color: var(--kcj-primary) !important;
}
.kalinga-journey-steps__item.is-complete .kalinga-journey-steps__link { color: var(--kcj-primary) !important; }

/* ---------- WooCommerce checkout ---------- */
body.woocommerce-checkout .woocommerce,
body.woocommerce-checkout .woocommerce-checkout {
	font-family: inherit !important;
	color: var(--kcj-text) !important;
}
body.woocommerce-checkout .woocommerce form .form-row { margin: 0 0 17px !important; }
body.woocommerce-checkout .woocommerce form .form-row label {
	margin: 0 0 7px !important;
	color: var(--kcj-text) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
}
body.woocommerce-checkout .woocommerce form .input-text,
body.woocommerce-checkout .woocommerce form select,
body.woocommerce-checkout .woocommerce form textarea,
body.woocommerce-checkout .select2-container--default .select2-selection--single {
	width: 100% !important;
	min-height: 52px !important;
	padding: 13px 15px !important;
	border: 0 !important;
	border-radius: var(--kcj-radius-md) !important;
	background: var(--kcj-surface-soft) !important;
	color: var(--kcj-text) !important;
	font: inherit !important;
	outline: 0 !important;
	box-shadow: inset 0 0 0 1px rgba(21,63,50,.08) !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single { display: flex !important; align-items: center !important; }
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 !important;
	color: var(--kcj-text) !important;
	line-height: 1.4 !important;
}
body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50% !important;
	right: 13px !important;
	transform: translateY(-50%) !important;
}
body.woocommerce-checkout .woocommerce form .input-text:focus,
body.woocommerce-checkout .woocommerce form select:focus,
body.woocommerce-checkout .woocommerce form textarea:focus,
body.woocommerce-checkout .select2-container--open .select2-selection--single {
	background: #fff !important;
	box-shadow: inset 0 0 0 2px var(--kcj-primary), 0 0 0 4px var(--kcj-ring) !important;
}
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-additional-fields,
body.woocommerce-checkout #order_review,
body.woocommerce-checkout .woocommerce-checkout-review-order,
body.woocommerce-checkout #payment,
body.woocommerce-checkout .woocommerce-checkout-payment {
	border: 0 !important;
	border-radius: var(--kcj-radius-lg) !important;
	background: #fff !important;
	box-shadow: var(--kcj-shadow-soft) !important;
}
body.woocommerce-checkout .woocommerce-billing-fields,
body.woocommerce-checkout .woocommerce-shipping-fields,
body.woocommerce-checkout .woocommerce-additional-fields { padding: clamp(22px, 4vw, 34px) !important; }
body.woocommerce-checkout #order_review,
body.woocommerce-checkout .woocommerce-checkout-review-order { padding: clamp(20px, 4vw, 30px) !important; }
body.woocommerce-checkout #payment,
body.woocommerce-checkout .woocommerce-checkout-payment { padding: 18px !important; }
body.woocommerce-checkout #payment ul.payment_methods,
body.woocommerce-checkout .woocommerce-checkout-payment ul.payment_methods {
	padding: 0 !important;
	border: 0 !important;
}
body.woocommerce-checkout #payment div.payment_box {
	border: 0 !important;
	border-radius: 13px !important;
	background: var(--kcj-surface-soft) !important;
	color: var(--kcj-muted) !important;
}
body.woocommerce-checkout #payment div.payment_box::before { display: none !important; }
body.woocommerce-checkout table.shop_table,
body.woocommerce-checkout table.shop_table th,
body.woocommerce-checkout table.shop_table td {
	border: 0 !important;
	background: transparent !important;
}
body.woocommerce-checkout table.shop_table tr { box-shadow: inset 0 -1px rgba(21,63,50,.08) !important; }
body.woocommerce-checkout table.shop_table th,
body.woocommerce-checkout table.shop_table td { padding: 15px 8px !important; }
body.woocommerce-checkout h3,
body.woocommerce-checkout #order_review_heading {
	color: var(--kcj-primary) !important;
	font-family: inherit !important;
	font-weight: 800 !important;
	letter-spacing: -.015em !important;
}
body.woocommerce-checkout #place_order,
body.woocommerce-checkout .button,
body.woocommerce-checkout button.button,
body.woocommerce-checkout input.button {
	min-height: 52px !important;
	padding: 13px 24px !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--kcj-primary) !important;
	color: #fff !important;
	font: inherit !important;
	font-weight: 800 !important;
	box-shadow: 0 12px 28px rgba(21,63,50,.17) !important;
}
body.woocommerce-checkout #place_order:hover,
body.woocommerce-checkout .button:hover { background: var(--kcj-primary-dark) !important; }
body.woocommerce-checkout .woocommerce-error,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-message {
	border: 0 !important;
	border-radius: 14px !important;
	background: var(--kcj-surface-soft) !important;
	color: var(--kcj-text) !important;
	box-shadow: var(--kcj-shadow-soft) !important;
}
body.woocommerce-checkout .woocommerce-error::before,
body.woocommerce-checkout .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-message::before { color: var(--kcj-primary) !important; }

@media (max-width: 860px) {
	.kcj-plan-grid { grid-template-columns: 1fr !important; }
	.kcj-plan-card { max-width: 620px !important; width: 100% !important; margin: 0 auto !important; }
}
@media (max-width: 640px) {
	#kcj-onboarding-app > main { padding: 34px 14px 52px !important; }
	#kcj-onboarding-app > header > div { width: calc(100% - 28px) !important; }
	#kcj-onboarding-form > section { padding: 23px 18px !important; border-radius: 18px !important; }
	#kcj-onboarding-form .grid { grid-template-columns: 1fr !important; }
	#kcj-onboarding-form .md\:col-span-2 { grid-column: auto !important; }
	.kcj-plan-selection { width: calc(100% - 28px) !important; padding: 46px 0 !important; }
	.kalinga-journey-steps__list { gap: 7px !important; }
	.kalinga-journey-steps__link {
		flex-direction: column !important;
		justify-content: center !important;
		gap: 6px !important;
		min-height: 78px !important;
		padding: 8px 5px !important;
		text-align: center !important;
	}
	.kalinga-journey-steps__label { font-size: 10px !important; }
}

/* Layout helpers that were previously supplied only by Tailwind. */
#kcj-onboarding-app > main > div:nth-of-type(3) { margin-bottom: 42px !important; }
#kcj-onboarding-app > main > div:nth-of-type(3) > div:first-child {
	display: flex !important;
	align-items: flex-end !important;
	justify-content: space-between !important;
	gap: 18px !important;
	margin-bottom: 12px !important;
}
#kcj-onboarding-app > main > div:nth-of-type(3) > div:last-child {
	height: 7px !important;
	overflow: hidden !important;
	border-radius: 999px !important;
	background: rgba(21,63,50,.09) !important;
}
#kcj-onboarding-form > div:last-child {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 18px !important;
	padding-top: 38px !important;
}
#kcj-onboarding-form [data-kcj-error] {
	margin: 0 !important;
	color: #a63d3d !important;
	font-size: 13px !important;
	font-weight: 700 !important;
}
@media (min-width: 768px) {
	#kcj-onboarding-form .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	#kcj-onboarding-app .hidden.md\:inline { display: inline !important; }
}


/* Consultation page: hide only the site's global header, not the journey's Save & Exit bar. */

body.kcj-consultation-page #page,
body.kcj-consultation-page #content,
body.kcj-consultation-page .site-content {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Inline validation and accessible invalid states. */
#kcj-onboarding-form .kcj-field-help {
	display: block !important;
	margin-top: 7px !important;
	color: var(--kcj-muted) !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
}
#kcj-onboarding-form input.kcj-is-invalid,
#kcj-onboarding-form select.kcj-is-invalid,
#kcj-onboarding-form textarea.kcj-is-invalid {
	background: #fffafa !important;
	box-shadow: inset 0 0 0 2px #c53d3d, 0 0 0 4px rgba(197,61,61,.10) !important;
}
#kcj-onboarding-form .kcj-option-card.kcj-is-invalid {
	background: #fffafa !important;
	box-shadow: inset 0 0 0 2px #c53d3d, 0 8px 24px rgba(197,61,61,.08) !important;
}
#kcj-onboarding-form .kcj-field-error {
	display: block !important;
	width: 100% !important;
	margin-top: 7px !important;
	color: #a92727 !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	line-height: 1.45 !important;
}
#kcj-onboarding-form .kcj-option-card + .kcj-field-error {
	margin-top: -7px !important;
	margin-bottom: 7px !important;
}
