/*
 * Anan Back To Top - the floating button's two states.
 *
 * The theme's rule is `.backtop, .contact-box` (0,1,0) and it is loaded from
 * main.css, which FlyingPress both inlines as critical CSS and re-serves later
 * through data-href. Rather than depend on which copy wins, these two
 * declarations are marked important - they are leaf colour overrides with
 * nothing below them to lose.
 *
 * Everything else about the button - size, radius, shadow, the .islive slide-in
 * and its `transition: all .4s ease` - is left to the theme, so the colour
 * change crossfades for free and removing this module restores the original.
 */

:root {
	--anan-backtop-taupe: #6e6659;
}

/* Default: the brand taupe, for the white and cream sections. */
a.backtop,
a.contact-box {
	background-color: var( --anan-backtop-taupe ) !important;
	color: #fff !important;
}

/*
 * Inverted, applied by backtop.js when the ground under the button is taupe or
 * dark. The taupe band is the exact same colour as the default tile, so without
 * this the button disappears completely rather than merely losing contrast.
 *
 * The shadow is restated because the theme's rgba(0,0,0,.045) does nothing on a
 * dark ground - a white tile floating on a photograph needs a light edge to sit
 * on, not a dark one.
 */
a.backtop.anan-backtop-on-dark,
a.contact-box.anan-backtop-on-dark {
	background-color: #fff !important;
	color: var( --anan-backtop-taupe ) !important;
	box-shadow: 0 0 27px 0 rgba( 0, 0, 0, 0.18 );
}

/*
 * Out of Ana's way.
 *
 * The chat dock moved to the bottom-right corner on 2026-08-17: a ~58px pill
 * at bottom:24px / right:24px carrying z-index 99999, which parks itself on
 * top of this button - the theme fixes it at bottom:70px / right:15px with
 * z-index 102, so the dock simply covers its lower-left corner. The dock is
 * the louder and more-clicked of the two, so the chevron is the one that
 * moves: lifted clear of the pill and right-aligned with it, so the two read
 * as one stack rather than two things that nearly collide.
 *
 * Below 768px the dock is a full-width bottom bar (~66px tall) instead, which
 * the theme's own 70px clears by 4px - 78px gives it a real gap.
 *
 * `right` has to be restated on .islive rather than on the base rule: the
 * theme parks the button off-screen at right:-60px and only slides it to
 * right:15px when control.js adds that class.
 *
 * No !important needed here, unlike the colours above: `a.backtop` outranks
 * the theme's own `.backtop` whichever order FlyingPress ends up serving them
 * in.
 */
a.backtop,
a.contact-box {
	bottom: 78px;
}

@media (min-width: 768px) {

	a.backtop,
	a.contact-box {
		bottom: 96px;
	}

	a.backtop.islive,
	a.contact-box.islive {
		right: 24px;
	}
}