/**
 * Terminwahl (Produktseite) und Terminanzeige (Danke-Seite, Anamnesebogen).
 * Farben als Variablen, damit das Theme sie überschreiben kann.
 */
.cps-ha-picker,
.cps-ha-box {
	--cps-ha-accent: #c49944;
	--cps-ha-dark: #1a1a1a;
	--cps-ha-muted: #7f7c79;
	--cps-ha-line: #e5e5e5;
	--cps-ha-soft: #f7f7f7;
}

/* --- Terminwahl ---------------------------------------------------------- */

.cps-ha-picker {
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
	margin: 0 0 2rem;
	padding: 1.5rem;
	border: 1px solid var(--cps-ha-line);
	border-radius: 6px;
	background: #fff;
}

.cps-ha-picker *,
.cps-ha-picker *::before,
.cps-ha-picker *::after {
	box-sizing: border-box;
}

/*
 * Das Theme stylt jeden Button im Produktbereich als dunklen Shop-Button
 * (`.woocommerce div.main-wrapper .product-view div.single-product-info
 * form.cart button` – Spezifität 0,5,4). Die Terminwahl braucht helle Flächen
 * mit goldener Auswahl. Statt diese Kette nachzubauen und damit an die
 * Theme-Struktur zu koppeln, werden die wenigen sichtbaren Eigenschaften der
 * eigenen Buttons erzwungen – nur auf diese, sonst wird nichts im Shop berührt.
 */
.cps-ha-picker button.cps-ha-date,
.cps-ha-picker button.cps-ha-time {
	appearance: none;
	-webkit-appearance: none;
	margin: 0 !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	white-space: normal !important;
	background-image: none !important;
	background-color: #fff !important;
	color: var(--cps-ha-dark) !important;
	border: 1px solid var(--cps-ha-line) !important;
	border-radius: 4px !important;
}

.cps-ha-picker button.cps-ha-date {
	display: flex !important;
	flex-direction: column !important;
	padding: 0.6rem 0.5rem !important;
	font-size: 0.8rem !important;
	font-weight: 400 !important;
}

.cps-ha-picker button.cps-ha-time {
	display: inline-block !important;
	padding: 0.55rem 1.1rem !important;
	font-size: 0.9rem !important;
	font-weight: 400 !important;
}

.cps-ha-picker button.cps-ha-date:hover,
.cps-ha-picker button.cps-ha-time:hover {
	background-color: #fff !important;
	color: var(--cps-ha-dark) !important;
	border-color: var(--cps-ha-accent) !important;
}

.cps-ha-picker button.cps-ha-date.is-active,
.cps-ha-picker button.cps-ha-time.is-selected,
.cps-ha-picker button.cps-ha-date.is-active:hover,
.cps-ha-picker button.cps-ha-time.is-selected:hover {
	background-color: var(--cps-ha-accent) !important;
	color: #fff !important;
	border-color: var(--cps-ha-accent) !important;
	font-weight: 600 !important;
}

/* Hinweis, wenn ohne Termin gekauft werden soll */
.cps-ha-picker--missing {
	border-color: var(--cps-ha-accent);
}

.cps-ha-picker--missing .cps-ha-picker__hint {
	color: #b32d2e;
	font-weight: 600;
}

.cps-ha-picker__heading {
	margin: 0 0 0.5rem;
	font-size: 1.15rem;
	color: var(--cps-ha-dark);
}

.cps-ha-picker__note {
	margin: 0 0 1.25rem;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--cps-ha-muted);
}

.cps-ha-picker__empty {
	margin: 0;
	padding: 1rem;
	border-radius: 4px;
	background: var(--cps-ha-soft);
	color: var(--cps-ha-dark);
}

/* Datumsleiste */
.cps-ha-picker__dates {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	padding-bottom: 0.75rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--cps-ha-line);
	scrollbar-width: thin;
}

.cps-ha-date {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.1rem;
	min-width: 4.5rem;
	padding: 0.6rem 0.5rem;
	border: 1px solid var(--cps-ha-line);
	border-radius: 4px;
	background: #fff;
	color: var(--cps-ha-dark);
	font-size: 0.8rem;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cps-ha-date:hover {
	border-color: var(--cps-ha-accent);
}

.cps-ha-date.is-active {
	border-color: var(--cps-ha-accent);
	background: var(--cps-ha-accent);
	color: #fff;
}

.cps-ha-date__weekday {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.7rem;
}

.cps-ha-date__day {
	font-size: 1.25rem;
	font-weight: 700;
}

.cps-ha-date__month {
	font-size: 0.7rem;
	text-transform: uppercase;
}

.cps-ha-date__count {
	margin-top: 0.15rem;
	font-size: 0.65rem;
	opacity: 0.75;
}

/* Uhrzeiten */
.cps-ha-times {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.cps-ha-time {
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--cps-ha-line);
	border-radius: 4px;
	background: #fff;
	color: var(--cps-ha-dark);
	font-size: 0.9rem;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.cps-ha-time:hover {
	border-color: var(--cps-ha-accent);
}

.cps-ha-time.is-selected {
	border-color: var(--cps-ha-accent);
	background: var(--cps-ha-accent);
	color: #fff;
	font-weight: 600;
}

.cps-ha-picker__chosen {
	margin: 1.25rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: 4px;
	background: var(--cps-ha-soft);
	font-size: 0.95rem;
	color: var(--cps-ha-dark);
}

.cps-ha-picker__hint {
	margin: 1.25rem 0 0;
	font-size: 0.85rem;
	color: var(--cps-ha-muted);
}

/* Kaufen-Button, solange kein Termin gewählt ist */
.cps-ha-locked {
	opacity: 0.5;
	cursor: not-allowed;
}

/* --- Terminbox (Danke-Seite, Konto, Anamnesebogen) ----------------------- */

.cps-ha-box {
	margin: 0 0 2rem;
	padding: 1.5rem;
	border: 1px solid var(--cps-ha-line);
	border-left: 4px solid var(--cps-ha-accent);
	border-radius: 4px;
	background: #fff;
}

.cps-ha-box__heading {
	margin: 0 0 0.75rem;
	font-size: 1.15rem;
	color: var(--cps-ha-dark);
}

.cps-ha-box__date {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--cps-ha-dark);
}

.cps-ha-box__list {
	margin: 0 0 1rem;
	padding: 0 0 0 1.1rem;
	font-size: 0.95rem;
	line-height: 1.6;
}

.cps-ha-box__list li {
	margin-bottom: 0.4rem;
}

.cps-ha-button {
	display: inline-block;
	padding: 0.7rem 1.4rem;
	border-radius: 4px;
	background: var(--cps-ha-accent);
	color: #fff !important;
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none !important;
}

.cps-ha-button:hover {
	filter: brightness(0.94);
	color: #fff !important;
}

.cps-ha-notice {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border-radius: 4px;
	background: var(--cps-ha-soft);
	font-size: 0.95rem;
	line-height: 1.55;
}