/**
 * CC Pathlab booking form — step wizard.
 * One card, one step visible at a time; fits the viewport on desktop and stacks on mobile.
 * Reads the theme's --cc-* custom properties, with hard fallbacks.
 */

.ccpl-book,
.ccpl-success {
	--ccpl-ink: var( --cc-ink, #10263d );
	--ccpl-muted: var( --cc-muted, #566b80 );
	--ccpl-line: var( --cc-line, #e1e9f2 );
	--ccpl-brand: var( --cc-brand, #0b4f8a );
	--ccpl-accent: var( --cc-accent, #14b8a6 );
	--ccpl-cta: var( --cc-teal, #0c8f86 );
	--ccpl-cta-dark: var( --cc-teal-dark, #0a746d );
	--ccpl-bg: var( --cc-card, #ffffff );
	--ccpl-soft: var( --cc-soft, #f2f7fc );
	--ccpl-mint: var( --cc-mint, #e4f6f3 );
	--ccpl-radius: var( --cc-radius, 16px );
	color: var( --ccpl-ink );
	font-size: 16px;
	line-height: 1.55;
}

.ccpl-book { max-width: 900px; margin: 0 auto; position: relative; }

/* ---------- Submit loader — ECG heartbeat ---------- */

.ccpl-loader {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 255, 255, 255, 0.86 );
	backdrop-filter: blur( 3px );
	border-radius: var( --ccpl-radius );
	animation: ccpl-loader-in 0.2s ease;
}
.ccpl-loader[hidden] { display: none; }
@keyframes ccpl-loader-in { from { opacity: 0; } to { opacity: 1; } }

.ccpl-loader__inner { text-align: center; padding: 24px; max-width: 260px; }
.ccpl-loader__ecg { width: 200px; height: 66px; overflow: visible; }

.ccpl-ecg-track {
	fill: none;
	stroke: var( --ccpl-line );
	stroke-width: 3;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.ccpl-ecg-pulse {
	fill: none;
	stroke: var( --ccpl-cta );
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 20 100;
	filter: drop-shadow( 0 0 6px rgba( 12, 143, 134, 0.55 ) );
	animation: ccpl-ecg 1.4s linear infinite;
}
@keyframes ccpl-ecg {
	from { stroke-dashoffset: 100; }
	to { stroke-dashoffset: -20; }
}

.ccpl-loader__text {
	margin: 12px 0 0;
	font-weight: 700;
	font-size: 0.96rem;
	color: var( --ccpl-ink );
	letter-spacing: 0.01em;
}

@media ( prefers-reduced-motion: reduce ) {
	.ccpl-ecg-pulse { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
	.ccpl-loader { animation: none; }
}

.ccpl-wiz {
	background: var( --ccpl-bg );
	border: 1px solid var( --ccpl-line );
	border-radius: var( --ccpl-radius );
	box-shadow: 0 20px 46px rgba( 10, 44, 73, 0.10 );
	padding: 26px 28px 22px;
}

/* ---------- Header / stepper ---------- */

.ccpl-wiz__steps {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: flex;
}
.ccpl-wiz__steps li {
	flex: 1;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font-size: 0.8rem;
	color: var( --ccpl-muted );
	cursor: default;
	text-align: center;
}
.ccpl-wiz__steps li.is-done { cursor: pointer; }
.ccpl-wiz__num {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 2px solid var( --ccpl-line );
	font-weight: 700;
	font-size: 0.85rem;
	color: var( --ccpl-muted );
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ccpl-wiz__steps li::before {
	content: "";
	position: absolute;
	top: 15px;
	right: 50%;
	width: 100%;
	height: 2px;
	background: var( --ccpl-line );
	z-index: 0;
}
.ccpl-wiz__steps li:first-child::before { display: none; }
.ccpl-wiz__num,
.ccpl-wiz__label { position: relative; z-index: 1; }
.ccpl-wiz__steps li.is-active .ccpl-wiz__num { border-color: var( --ccpl-brand ); color: var( --ccpl-brand ); }
.ccpl-wiz__steps li.is-active .ccpl-wiz__label { color: var( --ccpl-ink ); font-weight: 700; }
.ccpl-wiz__steps li.is-done .ccpl-wiz__num { background: var( --ccpl-cta ); border-color: var( --ccpl-cta ); color: #fff; }
.ccpl-wiz__steps li.is-done::before { background: var( --ccpl-cta ); }

.ccpl-wiz__bar {
	height: 6px;
	background: var( --ccpl-line );
	border-radius: 999px;
	overflow: hidden;
}
.ccpl-wiz__bar span {
	display: block;
	height: 100%;
	background: var( --ccpl-cta );
	transition: width 0.25s ease;
}
.ccpl-wiz__count { margin: 8px 0 0; font-size: 0.82rem; color: var( --ccpl-muted ); }
.ccpl-wiz__count b { color: var( --ccpl-ink ); }

/* ---------- Status ---------- */

.ccpl-wiz__status {
	border-radius: 10px;
	padding: 11px 14px;
	margin: 14px 0 0;
	font-weight: 600;
	font-size: 0.92rem;
}
.ccpl-wiz__status--error { background: #fdecea; border: 1px solid #f3b7b1; color: #8a1c13; }
.ccpl-wiz__status--success { background: #e7f6ec; border: 1px solid #a6d9b8; color: #12633a; }

.ccpl-wiz__from[hidden] { display: none; }
.ccpl-wiz__from {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 14px 0 0;
	padding: 11px 14px;
	background: var( --ccpl-mint );
	border: 1px solid var( --cc-line, #e1e9f2 );
	border-left: 3px solid var( --ccpl-cta );
	border-radius: 10px;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var( --ccpl-ink );
}
.ccpl-wiz__from-ic {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border-radius: 50%;
	background: var( --ccpl-cta );
	color: #fff;
	font-size: 0.7rem;
	line-height: 18px;
	text-align: center;
	font-weight: 700;
}

/* ---------- Panels ---------- */

.ccpl-wiz__body {
	position: relative;
	min-height: 300px;
	padding: 20px 0 6px;
}
.ccpl-panel { display: none; }
.ccpl-panel.is-active { display: block; animation: ccpl-fade 0.2s ease; }
@keyframes ccpl-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ccpl-panel__title { font-size: 1.15rem; margin: 0 0 4px; }
.ccpl-panel__hint { margin: 0 0 16px; color: var( --ccpl-muted ); font-size: 0.9rem; }
.ccpl-req { color: var( --ccpl-cta ); }

.ccpl-row { margin: 0 0 14px; }
.ccpl-row label,
.ccpl-opt strong { display: block; font-weight: 600; margin-bottom: 5px; }
.ccpl-row--split { display: flex; gap: 14px; }
.ccpl-row--split > span { flex: 1; }

.ccpl-wiz input[type="text"],
.ccpl-wiz input[type="tel"],
.ccpl-wiz input[type="email"],
.ccpl-wiz input[type="search"],
.ccpl-wiz textarea {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var( --ccpl-line );
	border-radius: 10px;
	font: inherit;
	color: inherit;
	background: #fff;
	box-sizing: border-box;
}
.ccpl-wiz input:focus,
.ccpl-wiz textarea:focus {
	outline: 2px solid var( --ccpl-brand );
	outline-offset: 1px;
	border-color: var( --ccpl-brand );
}

/* ---------- Step 3 — two columns ---------- */

.ccpl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.ccpl-col__title { font-size: 0.95rem; margin: 0 0 10px; }

/* ---------- Test picker ---------- */

.ccpl-testsearch { margin-bottom: 10px; }
.ccpl-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ccpl-chips.has-items { margin-bottom: 14px; }
.ccpl-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var( --ccpl-mint );
	border: 1px solid transparent;
	color: var( --ccpl-cta-dark );
	border-radius: 999px;
	padding: 5px 10px;
	font: inherit;
	font-size: 0.88rem;
	font-weight: 600;
	cursor: pointer;
}
.ccpl-chip em { font-style: normal; font-size: 1.1rem; line-height: 1; }
.ccpl-chip:hover { border-color: var( --ccpl-cta ); }

.ccpl-testlist {
	max-height: min( 46vh, 360px );
	overflow-y: auto;
	border: 1px solid var( --ccpl-line );
	border-radius: 10px;
	padding: 6px 12px;
	background: #fff;
}
.ccpl-group__title {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --ccpl-muted );
	margin: 12px 0 4px;
}
.ccpl-test {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 4px;
	border-bottom: 1px solid var( --ccpl-soft );
	font-weight: 400;
	margin: 0;
	cursor: pointer;
}
.ccpl-test:last-child { border-bottom: 0; }
.ccpl-test input { width: 18px; height: 18px; flex: none; }
.ccpl-test__name { flex: 1; }
.ccpl-test__price { color: var( --ccpl-muted ); font-variant-numeric: tabular-nums; }
.ccpl-test__price s { opacity: 0.7; margin-right: 3px; }
.ccpl-summary__save dd { color: var( --ccpl-cta-dark, #0a746d ); font-weight: 700; }

/* ---------- Choice cards ---------- */

.ccpl-choice { display: grid; gap: 10px; margin-bottom: 6px; }
.ccpl-choice--row { grid-template-columns: 1fr 1fr; }
.ccpl-opt {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	border: 1px solid var( --ccpl-line );
	border-radius: 12px;
	padding: 12px 14px;
	cursor: pointer;
}
.ccpl-opt:hover { border-color: var( --ccpl-brand ); }
.ccpl-opt input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.ccpl-opt small { color: var( --ccpl-muted ); font-weight: 400; display: block; }
.ccpl-opt--sm { padding: 10px 14px; }
.ccpl-opt--sm strong { margin-bottom: 0; }
.ccpl-choice:has( input:checked ) .ccpl-opt:has( input:checked ) {
	border-color: var( --ccpl-brand );
	box-shadow: inset 0 0 0 1px var( --ccpl-brand );
	background: var( --ccpl-soft );
}

.ccpl-mode { margin-bottom: 16px; }
.ccpl-mode.ccpl-choice { grid-template-columns: 1fr 1fr; }

/* ---------- Prescription upload ---------- */

.ccpl-upload { margin-bottom: 12px; }
.ccpl-upload input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}
.ccpl-upload__drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
	border: 2px dashed var( --ccpl-line );
	border-radius: 12px;
	padding: 26px 18px;
	cursor: pointer;
	background: var( --ccpl-soft );
	transition: border-color 0.15s, background 0.15s;
}
.ccpl-upload__drop:hover { border-color: var( --ccpl-cta ); background: #fff; }
.ccpl-upload input[type="file"]:focus + .ccpl-upload__drop { outline: 2px solid var( --ccpl-brand ); outline-offset: 2px; }
.ccpl-upload__icon { font-size: 1.7rem; line-height: 1; }
.ccpl-upload__cta { font-weight: 700; }
.ccpl-upload__note { font-size: 0.8rem; color: var( --ccpl-muted ); }

.ccpl-upload__status {
	margin-top: 10px;
	font-size: 0.88rem;
	font-weight: 600;
}
.ccpl-upload__status--error { color: #b32d2e; }
.ccpl-upload__status--ok { color: var( --ccpl-cta-dark ); }

.ccpl-upload__preview {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 10px;
	padding: 10px;
	border: 1px solid var( --ccpl-line );
	border-radius: 10px;
	background: #fff;
}
.ccpl-upload__preview img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 8px;
	flex: none;
}
.ccpl-upload__doc { font-size: 2rem; line-height: 1; flex: none; }
.ccpl-upload__file { flex: 1; font-size: 0.9rem; word-break: break-all; }
.ccpl-upload__remove {
	flex: none;
	border: 1px solid var( --ccpl-line );
	background: #fff;
	border-radius: 999px;
	padding: 6px 14px;
	font: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
	color: var( --ccpl-ink );
}
.ccpl-upload__remove:hover { border-color: #d63638; color: #b32d2e; }

.ccpl-conditional {
	margin-top: 12px;
	padding-top: 14px;
	border-top: 1px dashed var( --ccpl-line );
}
.ccpl-notice {
	background: var( --ccpl-mint );
	border-left: 3px solid var( --ccpl-accent );
	border-radius: 8px;
	padding: 10px 12px;
	margin: 10px 0 0;
	font-size: 0.9rem;
}
.ccpl-notice--area {
	background: #fff8e8;
	border-left-color: #d99a2b;
	color: #6b5514;
	font-size: 0.84rem;
}

/* ---------- Step 4 — review ---------- */

.ccpl-summary__card {
	background: var( --ccpl-soft );
	border: 1px solid var( --ccpl-line );
	border-radius: var( --ccpl-radius );
	padding: 18px 20px;
	margin-bottom: 16px;
}
.ccpl-summary__list { margin: 0; display: grid; gap: 10px; }
.ccpl-summary__list > div {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 10px;
	font-size: 0.92rem;
	padding-bottom: 10px;
	border-bottom: 1px solid var( --ccpl-line );
}
.ccpl-summary__list > div[hidden] { display: none; }
.ccpl-summary__list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.ccpl-summary__list dt { color: var( --ccpl-muted ); margin: 0; }
.ccpl-summary__list dd { margin: 0; font-weight: 600; word-break: break-word; }
.ccpl-summary__muted { color: var( --ccpl-muted ); font-weight: 400; }
.ccpl-summary__tests ul { margin: 0; padding-left: 18px; font-weight: 600; }
.ccpl-summary__tests li { margin-bottom: 2px; }
.ccpl-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 12px;
	font-size: 0.98rem;
}
.ccpl-summary__total strong { font-size: 1.35rem; }
.ccpl-summary__hint { margin: 4px 0 0; font-size: 0.78rem; color: var( --ccpl-muted ); }
.ccpl-consent { color: var( --ccpl-muted ); font-size: 0.82rem; margin: 12px 0 0; }
.ccpl-consent--wa { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.ccpl-consent--wa input[type="checkbox"] { margin-top: 3px; flex: 0 0 auto; }

/* ---------- Nav buttons ---------- */

.ccpl-wiz__nav {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var( --ccpl-line );
}
.ccpl-wiz__spacer { flex: 1; }
.ccpl-btn {
	appearance: none;
	border: 1.5px solid transparent;
	font: inherit;
	font-weight: 700;
	font-size: 0.98rem;
	padding: 12px 26px;
	border-radius: 999px;
	cursor: pointer;
	line-height: 1;
}
.ccpl-btn--cta { background: var( --ccpl-cta ); color: #fff; }
.ccpl-btn--cta:hover { background: var( --ccpl-cta-dark ); }
.ccpl-btn--cta:disabled { opacity: 0.6; cursor: default; }
.ccpl-btn--ghost { background: #fff; border-color: var( --ccpl-line ); color: var( --ccpl-ink ); }
.ccpl-btn--ghost:hover { border-color: var( --ccpl-brand ); color: var( --ccpl-brand ); }

/* ---------- Errors ---------- */

.ccpl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.has-error input,
.has-error textarea { border-color: #d63638 !important; }
.ccpl-field-error { color: #b32d2e; font-size: 0.85rem; margin: 5px 0 0; }
.ccpl-empty { color: var( --ccpl-muted ); }

/* ---------- Success ---------- */

.ccpl-success-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba( 16, 38, 61, 0.6 );
	overflow-y: auto;
}
.ccpl-success-overlay[hidden] { display: none; }
body.ccpl-success-open { overflow: hidden; }

.ccpl-success {
	position: relative;
	border: 1px solid var( --ccpl-line );
	border-radius: var( --ccpl-radius );
	padding: 36px 28px 30px;
	text-align: center;
	background: var( --ccpl-bg );
	max-width: 420px;
	width: 100%;
	margin: 0 auto;
	box-shadow: 0 24px 70px rgba( 16, 38, 61, 0.35 );
	animation: ccpl-success-pop 0.2s ease;
}
@keyframes ccpl-success-pop {
	from { transform: scale( 0.95 ); opacity: 0; }
	to { transform: scale( 1 ); opacity: 1; }
}
@media ( prefers-reduced-motion: reduce ) {
	.ccpl-success { animation: none; }
}
.ccpl-success-close {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 34px;
	height: 34px;
	border: 0;
	background: transparent;
	border-radius: 50%;
	font-size: 24px;
	line-height: 1;
	color: var( --ccpl-muted );
	cursor: pointer;
}
.ccpl-success-close:hover,
.ccpl-success-close:focus { background: var( --ccpl-mint ); color: var( --ccpl-ink ); }
.ccpl-success-home { display: inline-block; margin-top: 16px; }
.ccpl-success-feedback {
	display: block;
	margin-top: 12px;
	font-size: 0.88rem;
	font-weight: 600;
	color: var( --ccpl-cta );
	text-decoration: none;
}
.ccpl-success-feedback:hover { text-decoration: underline; }
.ccpl-success__icon {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: var( --ccpl-accent );
	color: #fff;
	font-size: 1.8rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 12px;
}
.ccpl-success__ref { font-size: 1.05rem; }

/* ---------- Responsive ---------- */

@media ( max-width: 760px ) {
	.ccpl-wiz { padding: 20px 16px 18px; border-radius: 14px; }
	.ccpl-cols { grid-template-columns: 1fr; gap: 20px; }
	.ccpl-wiz__body { min-height: 0; }
	.ccpl-wiz__steps li .ccpl-wiz__label { display: none; }
	.ccpl-wiz__steps li::before { top: 15px; }
	.ccpl-testlist { max-height: 52vh; }
	.ccpl-summary__list > div { grid-template-columns: 92px 1fr; }
}

@media ( max-width: 560px ) {
	.ccpl-mode.ccpl-choice { grid-template-columns: 1fr; }
}

@media ( max-width: 480px ) {
	.ccpl-row--split { flex-direction: column; gap: 0; }
	.ccpl-choice--row { grid-template-columns: 1fr; }
	.ccpl-wiz__nav { flex-wrap: wrap; }
	.ccpl-wiz__nav .ccpl-btn { flex: 1; padding: 13px 18px; text-align: center; }
	.ccpl-wiz__spacer { display: none; }
	.ccpl-btn[data-prev] { order: 2; }
	.ccpl-btn[data-next],
	.ccpl-submit { order: 1; }
}

/* Home visit charge */
.ccpl-opt__fee { display: block; margin-top: 4px; color: var( --ccpl-cta-dark, #0a746d ); font-weight: 600; }
.ccpl-summary__nudge { color: var( --ccpl-cta-dark, #0a746d ); font-weight: 600; }

/* Live home-visit hint while picking tests */
.ccpl-visit-tip { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; font-size: 0.9rem; line-height: 1.45; background: #f2f7fc; border: 1px solid #e1e9f2; color: #10263d; }
.ccpl-visit-tip--warn { background: #fff7e6; border-color: #f0d9a5; }
.ccpl-visit-tip--ok { background: #e4f6f3; border-color: #a9e0d9; color: #0a746d; font-weight: 600; }

/* Package booked by name alone */
.ccpl-pkg { background: var( --ccpl-soft, #f2f7fb ); border: 1px solid var( --ccpl-line, #dce5ee ); border-radius: 14px; padding: 18px 20px; }
.ccpl-pkg__name { font-size: 1.25rem; font-weight: 700; margin: 0 0 6px; }
.ccpl-pkg__price { margin: 0 0 10px; font-size: 1.1rem; }
.ccpl-pkg__price s { color: var( --ccpl-muted ); margin-right: 6px; }
.ccpl-pkg__price strong { font-size: 1.4rem; }
.ccpl-pkg__change { font-size: 0.9rem; }
.ccpl-chips[hidden] { display: none; }
.ccpl-testcount { margin: 6px 0; color: var( --ccpl-muted ); font-size: 0.85rem; }