/* Wrapper owns the positioning so the button floats even if Resy
   replaces the inner element. */
.viewpoint-resy-float {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 9999;
	transition: opacity 0.2s ease;
}

/* Hidden from first paint until Resy's button has replaced the
   placeholder link, so the fallback never flashes. */
.viewpoint-resy-float.is-pending {
	visibility: hidden;
	opacity: 0;
}

/* Respect iPhone home-indicator / notch safe areas so the button
   doesn't sit under the gesture bar. */
@supports (bottom: env(safe-area-inset-bottom)) {
	.viewpoint-resy-float {
		bottom: calc(1.5rem + env(safe-area-inset-bottom));
	}
}

/* Style our anchor, or whatever Resy injects if it replaces it */
.viewpoint-resy-float > .viewpoint-resy-button,
.viewpoint-resy-float > * {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px; /* accessible tap target */
	padding: 0.25rem 1.25rem;

	background: #0B2638; /* $dark-navy */
	color: #ffffff;
	font-family: "Outfit", sans-serif;
	font-weight: 700;
	font-size: 0.9rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	text-transform: uppercase;
	border: 0;
	border-radius: 999px;
	box-shadow: 0 6px 20px rgba(11, 38, 56, 0.35);
	cursor: pointer;

	transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

/* Normalize Resy's injected button internals (text + logo) so they sit
   in one centered row instead of using Resy's own offsets. */
.viewpoint-resy-float > * {
	flex-direction: row;
	gap: 0.5rem;
	width: auto !important;
	height: auto !important;
	line-height: 1 !important;
	white-space: nowrap;
	background-image: none !important;
	text-indent: 0 !important;
	box-sizing: border-box;
}

.viewpoint-resy-float > * > *,
.viewpoint-resy-float > * span,
.viewpoint-resy-float > * img,
.viewpoint-resy-float > * svg {
	position: static !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	line-height: 1 !important;
	vertical-align: middle;
	transform: none !important;
	pointer-events: none !important; /* let clicks fall through to the button itself */
}

.viewpoint-resy-float > * img,
.viewpoint-resy-float > * svg {
	display: block;
	height: 1em !important;
	width: auto !important;
	flex-shrink: 0;
}

.viewpoint-resy-float > *:hover,
.viewpoint-resy-float > *:focus-visible {
	background: #F5C65D; /* $sunlight */
	color: #0B2638;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(11, 38, 56, 0.4);
}

.viewpoint-resy-float > *:focus-visible {
	outline: 2px solid #F5C65D;
	outline-offset: 3px;
}

@media (max-width: 600px) {
	.viewpoint-resy-float {
		right: 1rem;
		bottom: 1rem;
	}

	.viewpoint-resy-float > * {
		padding: 0.75rem 1.25rem;
		font-size: 0.8rem;
	}
}