/* ==========================================================================
   Sticky "Request a trip" button ( 2026-10-12 ). See inc/sticky-request.php for who gets it and why it is not decided by the device.

   Printed for every visitor of a paid listing, shown only:
     - below 768px ( the width the theme's phone styles and the HubSpot phone rule use ), and
     - once assets/js/meetr-sticky-request.js has put .is-ready on it, which it does only when the form ( #meetr-trips ) is on the page.
   A page without the form, or without JavaScript, never shows a button that goes nowhere.

   Everything it has to share the screen with is already fixed to the bottom ( see "First-visit phone screen" in meetr-mobile.css ):
     - ListingPro's app-view bar ( .footer-app-menu, z-index 99 ), whose measured height is --meetr-app-bar-h on <html> ( html.meetr-has-app-bar );
     - the CookieYes card ( z-index 9999999 ), which this button gives way to ( hidden while the card is up );
     - the HubSpot chat bubble and CookieYes's revisit button, which are LIFTED by the button's height ( --meetr-request-bar-h, set by the script,
       html.meetr-has-request-bar ), so a tap on the bubble never lands on the button and the button never sits under the bubble's box.
   Pixels, not rem: the theme's rem is 10px.
   ========================================================================== */

.meetr-btn.meetr-sticky-request, /* ( two classes: .meetr-btn is inline-flex, and must not win ) */
.meetr-sticky-request-spacer {
	display: none;
}

@media ( max-width: 767px ) {
	.meetr-btn.meetr-sticky-request.is-ready {
		display: flex;
		position: fixed;
		z-index: 90; /* under the app bar's neighbours ( 99 ), the consent card and every modal; over the page */
		left: 16px;
		right: 16px;
		bottom: calc( 12px + env( safe-area-inset-bottom, 0px ) );
		max-width: 420px;
		margin: 0 auto;
		min-height: 48px;
		box-sizing: border-box;
		padding: 14px 20px;
		font-size: 16px;
		font-weight: 700;
		line-height: 1.2;
		border-radius: 999px;
		box-shadow: 0 6px 18px rgba( 12, 26, 36, 0.28 );
		text-align: center;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
		-webkit-tap-highlight-color: transparent;
	}

	/* Above ListingPro's app bar when it is on the screen ( its height is measured by app-view-footer-clearance-fix.js ). */
	html.meetr-has-app-bar .meetr-btn.meetr-sticky-request.is-ready {
		bottom: calc( var( --meetr-app-bar-h, 0px ) + 12px );
	}

	/* While the form itself is on the screen: out of the way ( visibility, so it is not tappable, focusable or read out ). */
	.meetr-btn.meetr-sticky-request.is-ready.is-in-view {
		opacity: 0;
		visibility: hidden;
		transform: translateY( 8px );
		pointer-events: none;
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
	}

	/* While the cookie card is up it is the one thing to answer ( the same test the chat window waits on, meetr-mobile.css ).
	   visibility: hidden is what makes it untappable and unfocusable; no pointer-events rule here, because test-where-i-guide-select-markup.php
	   refuses any rule with pointer-events: none whose selector names body, html, a form or a label ( this one names body for :has ). */
	body:has( .cky-consent-container:not( .cky-hide ) ) .meetr-btn.meetr-sticky-request.is-ready {
		opacity: 0;
		visibility: hidden;
	}

	/* Room for it at the very end of the page, so the last of the footer is not stuck under it. */
	html.meetr-has-request-bar .meetr-sticky-request-spacer {
		display: block;
		height: var( --meetr-request-bar-h, 72px );
	}

	/* The chat bubble and CookieYes's revisit button sit above it, and above the app bar when there is one. These are third parties' boxes: !important only where they set it. */
	html.meetr-has-request-bar #hubspot-messages-iframe-container {
		bottom: var( --meetr-request-bar-h, 72px ) !important;
	}
	html.meetr-has-request-bar.meetr-has-app-bar #hubspot-messages-iframe-container {
		bottom: calc( var( --meetr-app-bar-h, 0px ) + var( --meetr-request-bar-h, 72px ) ) !important;
	}
	html.meetr-has-request-bar .cky-btn-revisit-wrapper {
		bottom: calc( var( --meetr-request-bar-h, 72px ) + 15px );
	}
	html.meetr-has-request-bar.meetr-has-app-bar .cky-btn-revisit-wrapper {
		bottom: calc( var( --meetr-app-bar-h, 0px ) + var( --meetr-request-bar-h, 72px ) + 15px );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.meetr-btn.meetr-sticky-request.is-ready,
	.meetr-btn.meetr-sticky-request.is-ready.is-in-view {
		transition: none;
	}
}