/*
 * Booking dialog.
 *
 * Native <dialog>: closed state, backdrop and focus containment are the browser's
 * job. This file only styles the open panel.
 */

.booking-modal {
	width: min(100% - 2rem, 34rem);
	max-height: calc(100vh - 4rem);
	padding: 0;
	border: 0;
	border-radius: var(--myco-radius-none);
	background: transparent;
	color: var(--myco-color-text);
	overflow: visible;
}

.booking-modal::backdrop {
	background: rgba(26, 26, 26, 0.55);
	backdrop-filter: blur(2px);
}

.booking-modal__panel {
	position: relative;
	max-height: calc(100vh - 4rem);
	overflow-y: auto;
	padding: var(--myco-space-2xl);
	background: var(--myco-color-bg);
	box-shadow: var(--myco-shadow-card);
}

@media (min-width: 600px) {
	.booking-modal__panel {
		padding: var(--myco-space-3xl);
	}
}

.booking-modal__close {
	position: absolute;
	top: var(--myco-space-md);
	right: var(--myco-space-md);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--myco-color-border);
	border-radius: var(--myco-radius-none);
	background: transparent;
	color: var(--myco-color-text);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background var(--myco-transition), border-color var(--myco-transition);
}

.booking-modal__close:hover,
.booking-modal__close:focus-visible {
	border-color: var(--myco-color-accent);
	background: var(--myco-color-accent-soft);
}

.booking-modal__title {
	margin-bottom: var(--myco-space-lg);
	font-size: var(--myco-font-size-2xl);
}

.booking-modal__lead {
	max-width: 28rem;
	margin-bottom: var(--myco-space-xl);
	color: var(--myco-color-muted);
}

.booking-modal__contact {
	display: grid;
	gap: var(--myco-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.booking-modal__contact li {
	display: grid;
	gap: var(--myco-space-2xs);
	padding-left: var(--myco-space-lg);
	border-left: 2px solid var(--myco-color-accent);
}

.booking-modal__label {
	color: var(--myco-color-accent-strong);
	font-size: var(--myco-font-size-xs);
	font-weight: 600;
	letter-spacing: var(--myco-tracking-wide);
	text-transform: uppercase;
}

.booking-modal__contact a {
	text-decoration: none;
}

.booking-modal__contact a:hover {
	text-decoration: underline;
}

/* Give plugin-rendered form fields the theme's square, calm look. */
.booking-modal__form input[type="text"],
.booking-modal__form input[type="email"],
.booking-modal__form input[type="tel"],
.booking-modal__form textarea,
.booking-modal__form select {
	width: 100%;
	border-radius: var(--myco-radius-none);
}