/*
 * Square widget fallback modal (Booking\Fallback, booking-fallback.js).
 * Same scrim and panel as the booking page's time modal. Theme tokens with
 * literal fallbacks; logical properties only.
 */

.codigo-fallback-open {
	overflow: hidden;
}

.codigo-fallback {
	position: fixed;
	inset: 0;
	z-index: 400;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	background: color-mix(in srgb, var(--wp--preset--color--ink, #022253) 35%, transparent);
}

.codigo-fallback[hidden] {
	display: none;
}

.codigo-fallback__panel {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30, 16px);
	inline-size: 100%;
	max-inline-size: 720px;
	max-block-size: calc(100vh - 36px);
	overflow-y: auto;
	padding: var(--wp--preset--spacing--50, 32px);
	border-radius: var(--wp--custom--radius--lg, 28px);
	background: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--ink, #022253);
}

.codigo-fallback__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.codigo-fallback__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading, Georgia, serif);
	font-size: 28px;
	font-weight: 400;
}

.codigo-fallback__close,
.codigo-fallback__choice {
	border: 1px solid var(--wp--custom--divider, rgba(2, 34, 83, 0.13));
	background: var(--wp--preset--color--base, #fff);
	color: inherit;
	cursor: pointer;
}

.codigo-fallback__close {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	inline-size: 42px;
	block-size: 42px;
	border-radius: 999px;
}

.codigo-fallback__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.codigo-fallback__ask,
.codigo-fallback__slow,
.codigo-fallback__links {
	margin: 0;
}

.codigo-fallback__choice {
	padding: 14px 18px;
	border-radius: 999px;
	font-weight: 700;
	text-align: start;
}

.codigo-fallback__widget iframe {
	inline-size: 100%;
	min-block-size: 560px;
	border: 0;
}

.codigo-fallback__links {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.codigo-fallback__link {
	color: inherit;
	font-weight: 700;
}

.codigo-fallback :focus-visible {
	outline: 2px solid var(--wp--preset--color--ink, #022253);
	outline-offset: 2px;
}