.clinic-suite-guided {
	--clinic-card-bg: #fff;
	--clinic-soft: #eff8f5;
	--clinic-soft: color-mix(in srgb, var(--clinic-accent) 8%, #fff);
	--clinic-strong: #123b32;
	--clinic-strong: color-mix(in srgb, var(--clinic-accent) 88%, #10231f);
	margin-inline: auto;
	max-inline-size: 58rem;
	min-inline-size: 0;
}

.clinic-suite-booking--guided {
	display: grid;
	gap: 1rem;
	max-inline-size: 100%;
	min-inline-size: 0;
	text-align: start;
}

.clinic-suite-booking-step {
	background: var(--clinic-card-bg);
	border: 1px solid var(--clinic-border);
	border-radius: 1.25rem;
	box-shadow: 0 .5rem 1.6rem rgba(19, 53, 45, .06);
	max-inline-size: 100%;
	min-inline-size: 0;
	padding: 1rem;
}

.clinic-suite-booking--guided > *,
.clinic-suite-booking-step > *,
.clinic-suite-choice-grid > *,
.clinic-suite-time-grid > *,
.clinic-suite-network-fields > * {
	max-inline-size: 100%;
	min-inline-size: 0;
}

.clinic-suite-booking-step > h2 {
	align-items: center;
	display: flex;
	font-size: clamp(1.05rem, 4vw, 1.35rem);
	gap: .65rem;
	margin: 0 0 1rem;
	text-align: start;
}

.clinic-suite-booking-step > h2 > span {
	align-items: center;
	background: var(--clinic-accent);
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	font-size: .85rem;
	font-weight: 800;
	block-size: 1.9rem;
	inline-size: 1.9rem;
	justify-content: center;
}

.clinic-suite-choice-grid,
.clinic-suite-time-grid {
	display: grid;
	gap: .75rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-inline-size: 100%;
	min-inline-size: 0;
}

.clinic-suite-choice-card,
.clinic-suite-time-card,
.clinic-suite-date-card {
	-webkit-tap-highlight-color: transparent;
	background: #fff;
	border: 1px solid var(--clinic-border);
	border-radius: 1rem;
	color: inherit;
	cursor: pointer;
	font: inherit;
	inline-size: 100%;
	max-inline-size: 100%;
	min-block-size: 4.5rem;
	min-inline-size: 0;
	overflow-wrap: anywhere;
	padding: .8rem;
	text-align: start;
	touch-action: manipulation;
}

.clinic-suite-choice-card {
	align-items: center;
	display: flex;
	gap: .7rem;
}

.clinic-suite-guided:dir(rtl),
.clinic-suite-guided:dir(rtl) .clinic-suite-booking-step,
.clinic-suite-guided:dir(rtl) .clinic-suite-booking-step > h2,
.clinic-suite-guided:dir(rtl) label,
.clinic-suite-guided:dir(rtl) .clinic-suite-step-hint,
.clinic-suite-guided:dir(rtl) .clinic-suite-booking-summary,
.clinic-suite-guided:dir(rtl) select,
.clinic-suite-guided:dir(rtl) input,
.clinic-suite-guided:dir(rtl) textarea {
	direction: rtl;
	text-align: right;
}

.clinic-suite-choice-card strong {
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

.clinic-suite-choice-mark {
	border: 2px solid var(--clinic-border);
	border-radius: 999px;
	display: block;
	flex: 0 0 auto;
	block-size: 1.15rem;
	inline-size: 1.15rem;
}

.clinic-suite-choice-card[aria-pressed="true"],
.clinic-suite-time-card[aria-pressed="true"],
.clinic-suite-date-card[aria-pressed="true"] {
	background: var(--clinic-soft);
	border-color: var(--clinic-accent);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--clinic-accent) 15%, transparent);
	color: var(--clinic-strong);
}

.clinic-suite-choice-card[aria-pressed="true"] .clinic-suite-choice-mark {
	background: var(--clinic-accent);
	border-color: #fff;
	box-shadow: 0 0 0 2px var(--clinic-accent);
}

.clinic-suite-choice-card:focus-visible,
.clinic-suite-time-card:focus-visible,
.clinic-suite-date-card:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--clinic-accent) 28%, transparent);
	outline-offset: 2px;
}

.clinic-suite-date-strip {
	display: flex;
	gap: .65rem;
	max-inline-size: 100%;
	min-inline-size: 0;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	padding: .15rem .1rem .65rem;
	scroll-snap-type: inline proximity;
}

.clinic-suite-date-card {
	align-items: center;
	display: grid;
	flex: 0 0 5.25rem;
	justify-items: center;
	min-block-size: 6.2rem;
	scroll-snap-align: start;
	text-align: center;
}

.clinic-suite-date-card strong {
	font-size: 1.45rem;
}

.clinic-suite-date-card small,
.clinic-suite-time-card small,
.clinic-suite-step-hint {
	color: var(--clinic-muted);
}

.clinic-suite-date-card--custom {
	flex-basis: 7.5rem;
	font-size: .82rem;
	font-weight: 700;
}

.clinic-suite-date-card--custom input {
	border: 0;
	font-size: .75rem;
	min-block-size: 2rem;
	padding: .1rem;
}

.clinic-suite-time-card {
	display: grid;
	gap: .2rem;
	justify-items: center;
	min-block-size: 4.25rem;
	text-align: center;
}

.clinic-suite-time-card strong {
	font-size: 1.05rem;
}

.clinic-suite-canonical-fields,
.clinic-suite-booking--guided > select[data-clinic-slots],
.clinic-suite-booking--guided select[data-clinic-slots] {
	display: none !important;
}

.clinic-suite-network-fields:empty,
.clinic-suite-reason-field[hidden],
.clinic-suite-booking-summary[hidden] {
	display: none;
}

.clinic-suite-network-fields {
	display: grid;
	gap: .75rem;
	margin-block-start: .8rem;
	max-inline-size: 100%;
	min-inline-size: 0;
}

.clinic-suite-booking-step--network .clinic-suite-network-fields {
	margin-block-start: 0;
}

.clinic-suite-reason-field {
	margin-block-end: 1rem;
}

.clinic-suite-booking-summary {
	background: var(--clinic-soft);
	border-radius: .8rem;
	font-weight: 700;
	margin-block: 1rem;
	padding: .8rem 1rem;
}

.clinic-suite-booking-submit,
.clinic-suite-whatsapp-handoff {
	inline-size: 100%;
	text-align: center;
}

.clinic-suite-whatsapp-handoff {
	background: #128c56;
	display: block;
	margin-block-start: .65rem;
	text-decoration: none;
}

.clinic-suite-whatsapp-handoff[hidden] {
	display: none;
}

.clinic-suite-empty {
	background: #fff6e6;
	border-radius: .8rem;
	padding: .8rem;
}

@media (min-width: 40rem) {
	.clinic-suite-booking-step {
		padding: 1.35rem;
	}

	.clinic-suite-choice-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.clinic-suite-time-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.clinic-suite-network-fields {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}