/* Shared booking dialog appearance: creation and reservation status (SSOT 4/8/11). */
.booking-dialog-heading {
	display: flex;
	align-items: center;
	gap: var(--wa-space-xs);
	padding: var(--wa-space-m) var(--wa-space-l);
	border-block-start: 3px solid var(--sonub-accent);
	border-block-end: 1px solid var(--sonub-border);
	background: linear-gradient(120deg, var(--wa-color-brand-fill-quiet), var(--sonub-surface));
}
.booking-dialog-heading h2 {
	display: flex;
	align-items: center;
	flex: 1;
	gap: var(--wa-space-s);
	min-inline-size: 0;
	margin: 0;
	font-size: calc(1.25rem * var(--wa-font-size-scale, 1));
	line-height: 1.3;
	overflow-wrap: anywhere;
}
.booking-dialog-heading h2 > :is(i, .sonub-icon-tile) {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: var(--wa-border-radius-m);
	background: var(--sonub-surface);
	color: var(--sonub-accent);
	font-size: var(--wa-font-size-l);
}
.booking-dialog-heading > .booking-dialog-close {
	flex: none;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: 0;
	border: 1px solid var(--sonub-border);
	border-radius: var(--wa-border-radius-m);
	background: var(--sonub-surface);
	color: var(--sonub-accent);
}
.booking-class-summary {
	grid-template-columns: fit-content(40%) minmax(0, 1fr);
	align-items: center;
	gap: 0 var(--wa-space-m);
	padding: var(--wa-space-m);
	border: 1px solid var(--sonub-border);
	border-radius: var(--wa-border-radius-l);
	background: var(--sonub-surface);
	box-shadow: var(--wa-shadow-s);
}
.booking-class-summary :is(dt, dd) {
	min-inline-size: 0;
	margin: 0;
	padding-block: var(--wa-space-s);
	line-height: 1.6;
	overflow-wrap: anywhere;
}
.booking-class-summary dt:not(:first-child),
.booking-class-summary dd:not(:nth-child(2)) {
	border-block-start: 1px solid var(--sonub-border);
}
.booking-class-summary dt {
	align-self: stretch;
	display: flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	color: var(--sonub-muted);
	font-size: var(--wa-font-size-s);
	font-weight: var(--wa-font-weight-semibold);
}
.booking-class-summary dt > i {
	flex: none;
	inline-size: 1.25em;
	margin: 0;
	color: var(--sonub-accent);
	text-align: center;
}
.booking-class-summary dd {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.booking-class-summary :is([data-book-price], .booking-status-price > bdi) {
	color: var(--sonub-accent-ink);
	font-size: calc(1.25rem * var(--wa-font-size-scale, 1));
}
.booking-class-summary :is(.booking-teacher-name, .booking-learner-name) .teacher-avatar {
	flex: none;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border: 3px solid var(--wa-color-brand-fill-quiet);
	background: var(--wa-color-brand-fill-quiet);
	color: var(--sonub-accent-ink);
	font-size: calc(1.25rem * var(--wa-font-size-scale, 1));
}
.booking-class-summary :is(.booking-teacher-name, .booking-learner-name) > span:not(.teacher-avatar) {
	color: var(--sonub-accent-ink);
	font-weight: var(--wa-font-weight-semibold);
}
.booking-popup-footer {
	background: var(--sonub-canvas);
}
@media (min-width: 600px) {
	.booking-dialog-heading { padding: var(--wa-space-xs) var(--wa-space-m); }
}
@media (max-width: 599px) {
	.booking-dialog-heading { padding-inline: var(--wa-space-m); }
	.booking-class-summary { column-gap: var(--wa-space-s); }
	.booking-class-summary dt { flex-wrap: wrap; }
}