/**
 * EasySite Appointments — frontend
 */

:root {
	--esapp-accent: #2563eb;
	--esapp-text: #1e293b;
	--esapp-muted: #64748b;
	--esapp-border: rgba(148, 163, 184, 0.35);
	--esapp-bg: rgba(255, 255, 255, 0.72);
	--esapp-radius: 16px;
	--esapp-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
	--esapp-font: "Segoe UI", system-ui, -apple-system, sans-serif;
	--esapp-section-max: var(--fw3-max, 1180px);
	--esapp-section-pad: var(--fw3-pad, clamp(1.15rem, 3.5vw, 2rem));
}

.esapp-grid,
.esapp-detail,
.esapp-booking,
.esapp-card,
.esapp-public-page {
	font-family: var(--esapp-font);
	color: var(--esapp-text);
	box-sizing: border-box;
}

.esapp-grid *,
.esapp-detail *,
.esapp-booking * {
	box-sizing: border-box;
}

.esapp-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.esapp-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.esapp-grid--cols-1 { grid-template-columns: 1fr; }
	.esapp-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
	.esapp-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
	.esapp-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
}

.esapp-card {
	display: flex;
	flex-direction: column;
	background: var(--esapp-bg);
	backdrop-filter: blur(12px);
	border: 1px solid var(--esapp-border);
	border-radius: var(--esapp-radius);
	box-shadow: var(--esapp-shadow);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.esapp-card:hover,
.esapp-card:focus-within {
	transform: translateY(-2px);
	box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
}

.esapp-card__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #e2e8f0;
}

.esapp-card--no-media .esapp-card__body {
	padding-top: 1.35rem;
}

.esapp-card__image,
.esapp-detail__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.esapp-card__body {
	padding: 1.25rem 1.35rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	flex: 1;
}

.esapp-card__title,
.esapp-detail__title {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.3;
}

.esapp-card__subtitle,
.esapp-detail__subtitle {
	margin: 0;
	color: var(--esapp-muted);
	font-size: 0.95rem;
}

.esapp-card__excerpt {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
	flex: 1;
}

.esapp-card__meta,
.esapp-detail__meta {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.35rem;
	font-size: 0.9rem;
}

.esapp-meta-label {
	color: var(--esapp-muted);
	margin-right: 0.35rem;
}

.esapp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	border-radius: 999px;
	padding: 0.7rem 1.2rem;
	border: 1px solid transparent;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, outline-offset 0.15s ease;
}

.esapp-btn:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--esapp-accent) 45%, white);
	outline-offset: 2px;
}

.esapp-btn--primary {
	background: var(--esapp-booking-button-bg, var(--esapp-accent));
	color: var(--esapp-booking-button-text, #fff);
}

.esapp-btn--primary:hover {
	filter: brightness(1.05);
	color: var(--esapp-booking-button-text, #fff);
}

.esapp-btn--ghost {
	background: transparent;
	border-color: var(--esapp-border);
	color: var(--esapp-text);
}

.esapp-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.esapp-detail {
	display: grid;
	gap: 1.75rem;
	max-width: 1280px;
	margin: 0 auto;
	padding: 1.25rem 1.25rem 2.75rem;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.esapp-detail {
		gap: 1.75rem 2rem;
		padding: 1.5rem 1.5rem 3.25rem;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		grid-template-areas:
			"media body"
			"booking booking";
		align-items: start;
	}

	.esapp-detail--no-media {
		grid-template-columns: 1fr;
		grid-template-areas:
			"body"
			"booking";
	}

	.esapp-detail__media {
		grid-area: media;
	}

	.esapp-detail__body {
		grid-area: body;
	}

	.esapp-detail__booking {
		grid-area: booking;
	}
}

.esapp-detail__media {
	border-radius: calc(var(--esapp-radius) + 2px);
	overflow: hidden;
	box-shadow: var(--esapp-shadow);
	background: #e2e8f0;
	aspect-ratio: 4 / 3;
	min-height: 220px;
	width: 100%;
}

@media (max-width: 640px) {
	.esapp-detail__media {
		aspect-ratio: 16 / 10;
		min-height: 180px;
		border-radius: var(--esapp-radius);
	}
}

.esapp-detail__body {
	display: grid;
	gap: 1rem;
	max-width: none;
}

.esapp-detail__header {
	display: grid;
	gap: 0.35rem;
}

.esapp-detail__title {
	font-size: clamp(1.45rem, 2.2vw, 1.85rem);
}

.esapp-detail__description {
	line-height: 1.65;
	color: color-mix(in srgb, var(--esapp-text) 92%, var(--esapp-muted));
}

.esapp-detail__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem 1.15rem;
}

.esapp-detail__booking {
	width: 100%;
	min-width: 0;
}

.esapp-booking {
	width: 100%;
	max-width: 560px;
	margin: 1.25rem auto 0;
	padding: 1.75rem 1.5rem 1.85rem;
	border-radius: 18px;
	border: 1px solid var(--esapp-border);
	background: var(--esapp-booking-surface, #fff);
	box-shadow: var(--esapp-booking-shadow, var(--esapp-shadow));
	box-sizing: border-box;
	container-type: inline-size;
	container-name: esapp-booking;
}

.esapp-booking-wrap {
	width: min(100%, var(--esapp-section-max));
	margin-inline: auto;
	padding-inline: var(--esapp-section-pad);
	box-sizing: border-box;
}

.esapp-booking-wrap > .esapp-booking {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

.esapp-booking--split {
	max-width: none;
	margin: 0;
	padding: 1.5rem 1.25rem 1.65rem;
}

.esapp-booking-wrap > .esapp-booking--split {
	max-width: none;
	margin: 0;
}

.esapp-booking--full-width.esapp-booking--split {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

@media (min-width: 720px) {
	.esapp-booking {
		padding: 2rem 1.85rem 2.1rem;
	}

	.esapp-booking--split {
		padding: 1.75rem 1.75rem 1.9rem;
	}
}

.esapp-booking__workspace {
	display: grid;
	gap: 1.5rem;
	align-items: start;
}

@container esapp-booking (min-width: 900px) {
	.esapp-booking__workspace {
		grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
		gap: 1.75rem 2.25rem;
	}
}

.esapp-booking__schedule,
.esapp-booking__details {
	min-width: 0;
}

.esapp-booking__details {
	padding: 1.15rem 1.15rem 1.25rem;
	border-radius: 14px;
	background: var(--esapp-booking-panel-bg, color-mix(in srgb, var(--esapp-accent) 4%, #f8fafc));
	border: 1px solid var(--esapp-booking-panel-border, color-mix(in srgb, var(--esapp-accent) 12%, var(--esapp-border)));
}

.esapp-booking__details-title {
	margin: 0 0 0.15rem;
	font-size: 1.05rem;
	font-weight: 700;
}

.esapp-booking__intro {
	margin-bottom: 1.15rem;
}

.esapp-booking__type {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
}

.esapp-booking__hint {
	margin: 0.25rem 0 0;
	color: var(--esapp-muted);
	font-size: 0.95rem;
}

.esapp-booking__steps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 1.4rem;
	padding: 0;
}

.esapp-booking__steps li {
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	background: #f1f5f9;
	color: var(--esapp-muted);
	font-size: 0.85rem;
}

.esapp-booking__steps li.is-active {
	background: color-mix(in srgb, var(--esapp-accent) 15%, white);
	color: var(--esapp-accent);
	font-weight: 600;
}

.esapp-booking__steps li.is-done {
	background: color-mix(in srgb, var(--esapp-accent) 10%, white);
	color: var(--esapp-text);
}

.esapp-booking__panel {
	display: grid;
	gap: 1rem;
}

.esapp-booking__panel[hidden],
.esapp-booking__success[hidden],
.esapp-booking__success:empty,
.esapp-booking__error[hidden],
.esapp-booking__summary[hidden] {
	display: none !important;
}

.esapp-booking__summary {
	margin: 0;
	padding: 0.75rem 1rem;
	border-radius: 10px;
	background: color-mix(in srgb, var(--esapp-accent) 12%, white);
	color: var(--esapp-text);
	font-weight: 600;
	text-transform: capitalize;
}

.esapp-picker {
	display: grid;
	gap: 1.35rem;
	align-items: start;
}

@container esapp-booking (min-width: 560px) {
	.esapp-picker {
		grid-template-columns: minmax(0, 1.2fr) minmax(140px, 0.8fr);
		gap: 1.5rem;
	}

	/* Stack inside the left column until the split workspace is active. */
	.esapp-booking--split .esapp-picker {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}
}

@container esapp-booking (min-width: 900px) {
	.esapp-booking--split .esapp-picker {
		grid-template-columns: minmax(0, 1.35fr) minmax(128px, 0.65fr);
		gap: 1.35rem;
	}
}

.esapp-booking--split .esapp-slots {
	grid-template-columns: 1fr;
	max-height: 26rem;
}

@container esapp-booking (max-width: 899px) {
	.esapp-booking--split .esapp-slots {
		grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
		max-height: none;
	}
}

.esapp-cal {
	min-width: 0;
}

.esapp-cal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.esapp-cal__title {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
	text-transform: capitalize;
	text-align: center;
	flex: 1;
}

.esapp-cal__nav {
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	border: 1px solid var(--esapp-border);
	background: var(--esapp-booking-nav-bg, #fff);
	color: var(--esapp-text);
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.esapp-cal__nav:hover:not(:disabled) {
	border-color: var(--esapp-accent);
	color: var(--esapp-accent);
}

.esapp-cal__nav:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.esapp-cal__weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.25rem;
	margin-bottom: 0.35rem;
	text-align: center;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--esapp-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.esapp-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.35rem;
	min-height: 14rem;
}

.esapp-cal__loading {
	grid-column: 1 / -1;
	text-align: center;
	padding: 3rem 1rem;
	margin: 0;
}

.esapp-cal__day {
	aspect-ratio: 1;
	min-height: 2.4rem;
	border: none;
	border-radius: 999px;
	background: transparent;
	color: #94a3b8;
	font: inherit;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: default;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.esapp-cal__day--empty {
	visibility: hidden;
	pointer-events: none;
}

.esapp-cal__day.is-unavailable,
.esapp-cal__day.is-disabled {
	color: #cbd5e1;
	background: transparent;
}

.esapp-cal__day.is-available {
	color: #fff;
	background: var(--esapp-accent);
	cursor: pointer;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--esapp-accent) 35%, transparent);
}

.esapp-cal__day.is-available:hover {
	filter: brightness(1.08);
	transform: scale(1.06);
}

.esapp-cal__day.is-selected {
	background: color-mix(in srgb, var(--esapp-accent) 72%, #0f172a) !important;
	color: #fff !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--esapp-accent) 35%, white),
		0 4px 12px color-mix(in srgb, var(--esapp-accent) 40%, transparent);
}

.esapp-cal__day.is-today:not(.is-selected):not(.is-available) {
	box-shadow: inset 0 0 0 2px #94a3b8;
	color: #64748b;
}

.esapp-cal__day.is-today.is-available:not(.is-selected) {
	box-shadow: inset 0 0 0 2px #fff, 0 2px 8px color-mix(in srgb, var(--esapp-accent) 35%, transparent);
}

.esapp-cal__day:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--esapp-accent) 55%, white);
	outline-offset: 2px;
}

.esapp-cal__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.85rem;
	margin: 0.9rem 0 0;
	font-size: 0.8rem;
	color: var(--esapp-muted);
}

.esapp-cal__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.esapp-cal__legend-item::before {
	content: "";
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 999px;
	background: #e2e8f0;
}

.esapp-cal__legend-item--available::before {
	background: var(--esapp-accent);
}

.esapp-times {
	display: grid;
	gap: 0.85rem;
	min-width: 0;
	align-content: start;
}

.esapp-times__heading {
	margin: 0;
	font-weight: 700;
	font-size: 1rem;
	text-transform: capitalize;
	min-height: 1.4em;
}

.esapp-slots {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.55rem;
	max-height: 22rem;
	overflow-y: auto;
	padding-right: 0.15rem;
}

.esapp-slots .esapp-muted {
	grid-column: 1 / -1;
}

@container esapp-booking (max-width: 559px) {
	.esapp-slots {
		grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
		max-height: none;
	}
}

.esapp-slot {
	border: 2px solid var(--esapp-accent);
	background: color-mix(in srgb, var(--esapp-accent) 12%, white);
	border-radius: 10px;
	padding: 0.7rem 0.75rem;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	color: color-mix(in srgb, var(--esapp-accent) 75%, #0f172a);
	text-align: center;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.esapp-slot:hover {
	background: color-mix(in srgb, var(--esapp-accent) 22%, white);
	transform: translateY(-1px);
}

.esapp-slot.is-selected,
.esapp-slot[aria-selected="true"] {
	background: var(--esapp-accent);
	border-color: var(--esapp-accent);
	color: #fff;
	box-shadow: 0 2px 10px color-mix(in srgb, var(--esapp-accent) 40%, transparent);
}

.esapp-slot:focus-visible {
	outline: 3px solid color-mix(in srgb, var(--esapp-accent) 45%, white);
	outline-offset: 2px;
}

.esapp-booking__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.esapp-label,
.esapp-field label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.35rem;
}

.esapp-input,
.esapp-field input[type="text"],
.esapp-field input[type="email"],
.esapp-field input[type="tel"],
.esapp-field input[type="date"],
.esapp-field textarea {
	width: 100%;
	max-width: 100%;
	border: 1px solid var(--esapp-border);
	border-radius: 10px;
	padding: 0.7rem 0.85rem;
	font: inherit;
	background: var(--esapp-booking-input-bg, #fff);
	color: var(--esapp-text);
}

.esapp-input:focus,
.esapp-field input:focus,
.esapp-field textarea:focus {
	outline: 3px solid color-mix(in srgb, var(--esapp-accent) 35%, white);
	border-color: var(--esapp-accent);
}

@media (prefers-reduced-motion: reduce) {
	.esapp-cal__day.is-available:hover,
	.esapp-slot,
	.esapp-cal__nav {
		transition: none;
		transform: none;
	}
}

.esapp-form {
	display: grid;
	gap: 0.9rem;
}

.esapp-field--checkbox label {
	font-weight: 400;
	display: flex;
	gap: 0.55rem;
	align-items: flex-start;
}

.esapp-hp {
	position: absolute !important;
	left: -9999px !important;
	height: 0 !important;
	overflow: hidden !important;
}

.esapp-booking__error {
	margin-top: 1rem;
	padding: 0.85rem 1rem;
	border-radius: 10px;
	background: #fef2f2;
	color: #991b1b;
	border: 1px solid #fecaca;
}

.esapp-booking__success {
	padding: 1.25rem 1.35rem;
	border-radius: 12px;
	background: #ecfdf5;
	color: #065f46;
	border: 1px solid #a7f3d0;
}

.esapp-booking__success-message {
	margin: 0;
	font-weight: 600;
}

.esapp-booking__success-when {
	margin: 0.65rem 0 0;
	font-size: 1.05rem;
}

.esapp-booking__success-actions {
	margin: 1rem 0 0;
}

.esapp-btn--calendar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.esapp-muted,
.esapp-empty,
.esapp-error {
	color: var(--esapp-muted);
}

.esapp-public-page {
	max-width: 1280px;
	margin: 2rem auto;
	padding: 0 1.25rem 3rem;
}

/* —— Catalog overview (Hostinger-style /afspraken/) —— */
.esapp-archive-page {
	width: 100%;
	background: #f1f1f1;
}

.esapp-catalog {
	--esapp-accent: #83c55f;
	font-family: var(--esapp-font);
	color: #1a1a1a;
	max-width: 1200px;
	margin: 0 auto;
	padding: 2.5rem 1.25rem 4rem;
	box-sizing: border-box;
}

.esapp-catalog *,
.esapp-catalog *::before,
.esapp-catalog *::after {
	box-sizing: border-box;
}

.esapp-catalog__header {
	text-align: center;
	margin-bottom: 1.75rem;
}

.esapp-catalog__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #111;
}

.esapp-catalog__intro {
	margin: 0 auto;
	max-width: 36rem;
	color: #555;
	font-size: 1.05rem;
	line-height: 1.5;
}

.esapp-catalog__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.75rem;
}

.esapp-catalog__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.esapp-catalog__filter {
	appearance: none;
	border: 1px solid #d4d4d4;
	background: #fff;
	color: #333;
	border-radius: 999px;
	padding: 0.45rem 0.95rem;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.esapp-catalog__filter:hover {
	border-color: var(--esapp-accent);
	color: #1a1a1a;
}

.esapp-catalog__filter.is-active {
	background: var(--esapp-accent);
	border-color: var(--esapp-accent);
	color: #fff;
}

.esapp-catalog__search {
	margin: 0;
	min-width: min(100%, 220px);
}

.esapp-catalog__search input {
	width: 100%;
	border: 1px solid #d4d4d4;
	border-radius: 999px;
	padding: 0.55rem 1rem;
	font: inherit;
	background: #fff;
}

.esapp-catalog__search input:focus {
	outline: 3px solid color-mix(in srgb, var(--esapp-accent) 40%, white);
	border-color: var(--esapp-accent);
}

.esapp-grid--catalog {
	gap: 1.35rem;
}

.esapp-card--catalog {
	background: #fff;
	backdrop-filter: none;
	border: none;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.esapp-card--catalog:hover,
.esapp-card--catalog:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1);
}

.esapp-card--catalog .esapp-card__media {
	aspect-ratio: 4 / 3;
}

.esapp-card--catalog .esapp-card__media-link {
	display: block;
	text-decoration: none;
}

.esapp-card--catalog .esapp-card__body {
	padding: 1rem 1.1rem 1.25rem;
	gap: 0.55rem;
}

.esapp-card--catalog .esapp-card__title {
	font-size: 1.05rem;
	font-weight: 700;
}

.esapp-card--catalog .esapp-card__title a {
	color: inherit;
	text-decoration: none;
}

.esapp-card--catalog .esapp-card__title a:hover {
	color: var(--esapp-accent);
}

.esapp-card__price-line {
	margin: 0;
	color: #666;
	font-size: 0.95rem;
}

.esapp-card--catalog .esapp-btn--primary {
	margin-top: auto;
	align-self: stretch;
	border-radius: 8px;
	background: var(--esapp-accent);
	color: #fff;
}

.esapp-card--catalog .esapp-btn--primary:hover {
	filter: brightness(0.95);
}

.esapp-catalog__empty {
	text-align: center;
	color: #666;
	margin: 1.5rem 0 0;
}

.esapp-card.is-hidden {
	display: none !important;
}

@media (max-width: 639px) {
	.esapp-catalog__toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.esapp-catalog__search {
		min-width: 0;
	}
}

/* Service page embed (bottom of dienstenpagina's) */
.esapp-service-appointments {
	width: 100%;
	background: #f1f1f1;
	margin: 0;
	padding: 0;
}

.esapp-catalog--section {
	padding-top: 3rem;
	padding-bottom: 3.5rem;
}

.esapp-catalog--section .esapp-catalog__title {
	font-size: clamp(1.45rem, 2.4vw, 1.9rem);
}

/* Frame-only detail: hide content above the booking box */
.esapp-detail--frame-only {
	display: block;
}

.esapp-detail--frame-only .esapp-detail__media,
.esapp-detail--frame-only .esapp-detail__body {
	display: none !important;
}

.esapp-detail--frame-only .esapp-detail__booking {
	margin: 0;
}

.esapp-detail--frame-only .esapp-booking {
	margin-top: 0;
}

.esapp-booking--no-intro .esapp-booking__intro {
	display: none !important;
}

/* Booking layout themes */
.esapp-booking--layout-white {
	--esapp-text: #0f172a;
	--esapp-muted: #334155;
	--esapp-border: rgba(15, 23, 42, 0.14);
	--esapp-booking-surface: #fff;
	--esapp-booking-shadow: var(--esapp-shadow);
	--esapp-booking-nav-bg: #fff;
	--esapp-booking-input-bg: #fff;
	--esapp-booking-panel-bg: color-mix(in srgb, var(--esapp-accent) 4%, #f8fafc);
	--esapp-booking-panel-border: color-mix(in srgb, var(--esapp-accent) 12%, var(--esapp-border));
}

.esapp-booking--layout-black {
	--esapp-text: #f8fafc;
	--esapp-muted: #94a3b8;
	--esapp-border: rgba(148, 163, 184, 0.28);
	--esapp-booking-surface: #0f172a;
	--esapp-booking-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
	--esapp-booking-nav-bg: #1e293b;
	--esapp-booking-input-bg: #1e293b;
	--esapp-booking-panel-bg: color-mix(in srgb, var(--esapp-accent) 8%, #1e293b);
	--esapp-booking-panel-border: color-mix(in srgb, var(--esapp-accent) 18%, rgba(148, 163, 184, 0.28));
}

.esapp-booking--layout-white-transparent,
.esapp-booking--layout-white_transparent {
	--esapp-text: #0f172a;
	--esapp-muted: #334155;
	--esapp-border: rgba(15, 23, 42, 0.18);
	--esapp-booking-surface: rgba(255, 255, 255, 0.72);
	--esapp-booking-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
	--esapp-booking-nav-bg: rgba(255, 255, 255, 0.92);
	--esapp-booking-input-bg: #fff;
	--esapp-booking-panel-bg: color-mix(in srgb, var(--esapp-accent) 6%, rgba(255, 255, 255, 0.82));
	--esapp-booking-panel-border: color-mix(in srgb, var(--esapp-accent) 14%, rgba(15, 23, 42, 0.12));
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	color: var(--esapp-text);
}

.esapp-booking--layout-white-transparent .esapp-cal__title,
.esapp-booking--layout-white-transparent .esapp-times__heading,
.esapp-booking--layout-white-transparent .esapp-booking__details-title,
.esapp-booking--layout-white-transparent .esapp-booking__type,
.esapp-booking--layout-white_transparent .esapp-cal__title,
.esapp-booking--layout-white_transparent .esapp-times__heading,
.esapp-booking--layout-white_transparent .esapp-booking__details-title,
.esapp-booking--layout-white_transparent .esapp-booking__type {
	color: #0f172a;
}

.esapp-booking--layout-white-transparent .esapp-cal__weekdays,
.esapp-booking--layout-white_transparent .esapp-cal__weekdays {
	color: #475569;
}

.esapp-booking--layout-white-transparent .esapp-cal__legend,
.esapp-booking--layout-white-transparent .esapp-muted,
.esapp-booking--layout-white-transparent .esapp-booking__hint,
.esapp-booking--layout-white_transparent .esapp-cal__legend,
.esapp-booking--layout-white_transparent .esapp-muted,
.esapp-booking--layout-white_transparent .esapp-booking__hint {
	color: #334155;
}

.esapp-booking--layout-white-transparent .esapp-cal__day.is-unavailable,
.esapp-booking--layout-white-transparent .esapp-cal__day.is-disabled,
.esapp-booking--layout-white_transparent .esapp-cal__day.is-unavailable,
.esapp-booking--layout-white_transparent .esapp-cal__day.is-disabled {
	color: #64748b;
}

.esapp-booking--layout-white-transparent .esapp-cal__day.is-today:not(.is-selected):not(.is-available),
.esapp-booking--layout-white_transparent .esapp-cal__day.is-today:not(.is-selected):not(.is-available) {
	color: #475569;
	box-shadow: inset 0 0 0 2px #64748b;
}

.esapp-booking--layout-white-transparent .esapp-field label,
.esapp-booking--layout-white-transparent .esapp-field--checkbox label,
.esapp-booking--layout-white_transparent .esapp-field label,
.esapp-booking--layout-white_transparent .esapp-field--checkbox label {
	color: #0f172a;
}

.esapp-booking--layout-white-transparent .esapp-cal__legend-item::before,
.esapp-booking--layout-white_transparent .esapp-cal__legend-item::before {
	background: #cbd5e1;
}

.esapp-booking--layout-black-transparent,
.esapp-booking--layout-black_transparent {
	--esapp-text: #f8fafc;
	--esapp-muted: #94a3b8;
	--esapp-border: rgba(148, 163, 184, 0.28);
	--esapp-booking-surface: rgba(15, 23, 42, 0.72);
	--esapp-booking-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
	--esapp-booking-nav-bg: rgba(30, 41, 59, 0.88);
	--esapp-booking-input-bg: rgba(30, 41, 59, 0.92);
	--esapp-booking-panel-bg: color-mix(in srgb, var(--esapp-accent) 8%, rgba(15, 23, 42, 0.55));
	--esapp-booking-panel-border: color-mix(in srgb, var(--esapp-accent) 18%, rgba(148, 163, 184, 0.28));
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.esapp-booking--layout-black .esapp-cal__day.is-unavailable,
.esapp-booking--layout-black .esapp-cal__day.is-disabled,
.esapp-booking--layout-black-transparent .esapp-cal__day.is-unavailable,
.esapp-booking--layout-black-transparent .esapp-cal__day.is-disabled,
.esapp-booking--layout-black_transparent .esapp-cal__day.is-unavailable,
.esapp-booking--layout-black_transparent .esapp-cal__day.is-disabled {
	color: #64748b;
}

.esapp-booking--layout-black .esapp-cal__legend-item::before,
.esapp-booking--layout-black-transparent .esapp-cal__legend-item::before,
.esapp-booking--layout-black_transparent .esapp-cal__legend-item::before {
	background: #475569;
}

.esapp-booking--layout-black .esapp-slot,
.esapp-booking--layout-black-transparent .esapp-slot,
.esapp-booking--layout-black_transparent .esapp-slot {
	background: color-mix(in srgb, var(--esapp-accent) 18%, #1e293b);
	color: color-mix(in srgb, var(--esapp-accent) 65%, #f8fafc);
}

.esapp-booking--layout-black .esapp-booking__summary,
.esapp-booking--layout-black-transparent .esapp-booking__summary,
.esapp-booking--layout-black_transparent .esapp-booking__summary {
	background: color-mix(in srgb, var(--esapp-accent) 18%, #1e293b);
}

.esapp-booking-section-head {
	margin: 0 0 1.35rem;
	color: var(--esapp-booking-section-text, var(--esapp-text, #0f172a));
}

.esapp-booking-section-head__title {
	margin: 0 0 0.55rem;
	font-size: clamp(1.45rem, 2.4vw, 1.9rem);
	line-height: 1.15;
	font-weight: 700;
	color: inherit;
}

.esapp-booking-section-head__intro {
	margin: 0;
	max-width: 42rem;
	font-size: 1.02rem;
	line-height: 1.6;
	color: color-mix(in srgb, var(--esapp-booking-section-text, var(--esapp-text, #0f172a)) 82%, transparent);
}
