/*
 * Back-to-top button (back-to-top.php). Ink circle, cream arrow and rule, soft shadow like the Explore
 * List / Map pill; olive on hover / press. Bottom left (the BOOK NOW seal is on the right, the pill in
 * the centre), under the seal's z-index, hidden while the Explore map is full-screen and in print.
 * Every state names its own background, border, colour and text-decoration so Hello Elementor's
 * magenta button:hover never shows; `body button.cr-totop` outranks Hello's and the Elementor kit's
 * button rules. Tokens on :where() so a site rule wins.
 */
:where(.cr-totop) {
	--cr-totop-bg: var(--e-global-color-c9d9ea6, #443B27);
	--cr-totop-fg: var(--e-global-color-primary, #F9F6ED);
	--cr-totop-hover: var(--e-global-color-text, #584E06);
	--cr-totop-size: 48px;
	--cr-totop-edge: 24px;
}

body button.cr-totop {
	position: fixed;
	left: var(--cr-totop-edge);
	bottom: calc(var(--cr-totop-edge) + env(safe-area-inset-bottom, 0px));
	z-index: 9997;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--cr-totop-size);
	height: var(--cr-totop-size);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 1px solid var(--cr-totop-fg);
	border-radius: 50%;
	background-color: var(--cr-totop-bg);
	color: var(--cr-totop-fg);
	box-shadow: 0 6px 18px rgba(68, 59, 39, .28);
	font-size: 0;
	line-height: 0;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity .25s ease, transform .25s ease, visibility .25s, background-color .15s ease;
}

body button.cr-totop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

body button.cr-totop .cr-totop__icon {
	display: block;
	width: 20px;
	height: 12px;
	transform: rotate(-90deg);
	pointer-events: none;
}

body button.cr-totop:hover,
body button.cr-totop:active {
	background-color: var(--cr-totop-hover);
	border-color: var(--cr-totop-fg);
	color: var(--cr-totop-fg);
	text-decoration: none;
}

body button.cr-totop:focus-visible {
	outline: 2px solid var(--cr-totop-bg);
	outline-offset: 3px;
	background-color: var(--cr-totop-hover);
	border-color: var(--cr-totop-fg);
	color: var(--cr-totop-fg);
	text-decoration: none;
}

body button.cr-totop:focus:not(:focus-visible) {
	outline: none;
}

@media (max-width: 767px) {
	:where(.cr-totop) {
		--cr-totop-size: 44px;
		--cr-totop-edge: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body button.cr-totop {
		transform: none;
		transition: none;
	}
}

/* Explore at ≤ 1200px: the floating List / Map pill (48px at 24px, centred, 218px wide) reaches the left
   corner on narrow phones, so the button sits above its line, as the plugin's own controls do. */
html.cr-map-stacked body button.cr-totop {
	bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}

body.cr-map-open button.cr-totop {
	display: none;
}

@media print {
	body button.cr-totop {
		display: none;
	}
}