/* Shared booking dialog appearance: creation and reservation status (SSOT 4/8/11). */
/* 창의 위치·스크롤·테두리는 Web Awesome의 실제 dialog/body가 맡는다. */
wa-dialog[data-booking-shell] { display: contents !important; --width: 36rem; --spacing: 0; --show-duration: 0ms; --hide-duration: 0ms; }
wa-dialog[data-booking-shell]:not([open]), wa-dialog[data-booking-shell]:not(:defined) { display: none !important; }
wa-dialog[data-booking-shell]::part(dialog) { inline-size: min(var(--width), calc(100vw - 2rem)); max-inline-size: calc(100vw - 2rem); max-block-size: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--sonub-border); border-radius: var(--sonub-radius-panel); background: var(--sonub-surface); color: var(--sonub-ink); box-shadow: var(--sonub-shadow-card); }
wa-dialog[data-booking-shell]::part(body) { display: grid; min-inline-size: 0; padding: 0; overscroll-behavior: contain; }
wa-dialog.book-dialog:has([data-book-popup]) { --width: 52rem; }
wa-dialog.booking-cancel-dialog { --width: 42rem; }
wa-dialog:is(.booking-actions-dialog, .booking-payment-confirmation, .payer-reputation-dialog) { --width: 32rem; }
wa-dialog.payer-reputation-dialog::part(body), wa-dialog[data-booking-shell]:has(> #booking-blocked-title)::part(body) { padding: var(--wa-space-l); }
wa-dialog.booking-actions-dialog::part(body), wa-dialog.booking-cancel-dialog::part(body) { grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
:is(wa-dialog[data-booking-shell], .booking-payment-details, .booking-cancellation-details, .payment-proof-dialog, .payment-submission-history, .booking-resource-dialog, .pending-payments-dialog, .booking-attention-dialog) { --show-duration: 0ms; --hide-duration: 0ms; }
:is(wa-dialog[data-booking-shell], .booking-payment-details, .booking-cancellation-details, .payment-proof-dialog, .payment-submission-history, .booking-resource-dialog, .pending-payments-dialog, .booking-attention-dialog)::part(dialog) { animation: none !important; transition: none !important; }
#form-confirmation { --show-duration: 0ms; --hide-duration: 0ms; }
#form-confirmation::part(dialog) { animation: none !important; transition: none !important; }
.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; }
}