/* Sewa Rent — platform WhatsApp button (E13-lite). Mobile-first; tokens.css variables.
   Phones: 56px circle bottom-right, or an icon button inside the sticky "Request dates" bar (listing.css .sewa-lp-cta).
   Desktop (≥ 993px): green pill with text. WhatsApp brand green #25D366 is fixed by the brand, not a token. */

.sewa-wa{--sewa-wa-green:var(--sewa-whatsapp-aa);--sewa-wa-green-dark:var(--sewa-whatsapp-aa-dark);--sewa-wa-size:56px;
	display:inline-flex;align-items:center;justify-content:center;gap:var(--sewa-space-2);box-sizing:border-box;
	background:var(--sewa-wa-green);color:#fff;text-decoration:none;font-weight:600;font-size:var(--sewa-font-size);line-height:1;
	border-radius:var(--sewa-radius-pill);box-shadow:0 6px 20px rgba(37,211,102,.35),var(--sewa-shadow);
	transition:background .2s,transform .2s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.sewa-wa:hover,.sewa-wa:focus{background:var(--sewa-wa-green-dark);color:#fff;text-decoration:none;transform:translateY(-1px)}
.sewa-wa:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px var(--sewa-wa-green-dark)}
.sewa-wa-icon{width:28px;height:28px;flex:0 0 auto}
.sewa-wa-label{display:none;white-space:nowrap}

/* Floating circle (phones) */
.sewa-wa--float{position:fixed;right:var(--sewa-space-4);bottom:calc(var(--sewa-space-4) + env(safe-area-inset-bottom,0px));z-index:1050;width:var(--sewa-wa-size);height:var(--sewa-wa-size);padding:0}

/* Listeo's own "back to top" sits bottom-right too: lift it above our button */
body.sewa-wa-on #backtotop{bottom:calc(var(--sewa-space-4) + 56px + var(--sewa-space-3) + env(safe-area-inset-bottom,0px))}

@media (max-width:992px){
	/* Phones: a slightly smaller circle hugging the corner */
	.sewa-wa--float{--sewa-wa-size:52px;right:var(--sewa-space-3);bottom:calc(var(--sewa-space-3) + env(safe-area-inset-bottom,0px))}
	.sewa-wa--float .sewa-wa-icon{width:26px;height:26px}
	/* Home (body.sewa-wa-defer): hidden while the hero search form / category chips are on screen; whatsapp.js adds
	   .is-revealed once the hero has scrolled above the circle (audit #53: it covered "Search" and the chips). */
	body.sewa-wa-defer .sewa-wa--float{transition:opacity .2s,visibility .2s,background .2s}
	body.sewa-wa-defer .sewa-wa--float:not(.is-revealed){opacity:0;visibility:hidden;pointer-events:none}
	/* No-JS fallback on listing pages with the sticky bar (76px, listing.css) or Listeo's own booking footer: raise the circle */
	body.sewa-lp-has-cta .sewa-wa--float,body.single-listing .sewa-wa--float{bottom:calc(76px + var(--sewa-space-3) + env(safe-area-inset-bottom,0px))}
	/* With JS the button lives inside the bar — the float goes away so there is one bottom zone */
	body.sewa-wa-in-bar .sewa-wa--float{display:none}
	/* Icon button inside .sewa-lp-cta (flex row: price · WhatsApp · Request dates) */
	.sewa-lp-cta .sewa-wa--bar{--sewa-wa-size:46px;width:var(--sewa-wa-size);height:var(--sewa-wa-size);flex:0 0 auto;margin-left:auto;padding:0;box-shadow:none;transform:none}
	.sewa-lp-cta .sewa-wa--bar+.sewa-lp-cta-btn.button{margin-left:0}
	.sewa-lp-cta .sewa-wa--bar .sewa-wa-icon{width:26px;height:26px}
	/* Archives (visual review N8): a smaller circle tight in the corner, room under the last card for it, and no
	   back-to-top button over the Leaflet credits while the map is open. */
	body.archive .sewa-wa--float,body.tax-region .sewa-wa--float{--sewa-wa-size:48px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
	body.archive .sewa-wa--float .sewa-wa-icon{width:24px;height:24px}
	body.archive #listeo-listings-container{padding-bottom:72px}
	body.sewa-map-open #backtotop{display:none!important}
}

/* Without JavaScript nothing would reveal the deferred circle: keep it visible then. */
@media (max-width:992px) and (scripting:none){
	body.sewa-wa-defer .sewa-wa--float:not(.is-revealed){opacity:1;visibility:visible;pointer-events:auto}
}

@media (min-width:993px){
	/* Desktop pill: "Chat on WhatsApp" */
	.sewa-wa--float{right:var(--sewa-space-6);bottom:var(--sewa-space-6);width:auto;height:56px;padding:0 var(--sewa-space-6) 0 var(--sewa-space-4)}
	.sewa-wa--float .sewa-wa-label{display:inline}
	.sewa-wa--bar{display:none}
	body.sewa-wa-on #backtotop{bottom:calc(var(--sewa-space-6) + 56px + var(--sewa-space-3))}
}

/* Listing page sidebar (visual review #6): full-width button under the booking widget replaces the floating pill on
   desktop, so the pill never covers the "Booking" heading or the date picker. Phones keep the icon in the sticky bar. */
.sewa-wa--side{display:none}
@media (min-width:993px){
	.sewa-wa--side{display:flex;width:100%;height:52px;margin:-15px 0 var(--sewa-space-6);padding:0 var(--sewa-space-4);box-shadow:none}
	.sewa-wa--side .sewa-wa-label{display:inline}
	.sewa-wa--side .sewa-wa-icon{width:24px;height:24px}
	body.sewa-wa-in-side .sewa-wa--float{display:none}
}
/* Listing page (TRACKER 2.70): "Request dates" is the primary action, WhatsApp the secondary one — outline in the
   sidebar (desktop) and in the sticky bar (phones), filled green only on hover/focus. */
.sewa-wa--side,.sewa-lp-cta .sewa-wa--bar{background:#fff;color:var(--sewa-wa-green);border:2px solid var(--sewa-wa-green);box-shadow:none}
.sewa-wa--side:hover,.sewa-wa--side:focus,.sewa-lp-cta .sewa-wa--bar:hover,.sewa-lp-cta .sewa-wa--bar:focus{background:var(--sewa-wa-green);color:#fff}
.sewa-wa--side:focus-visible,.sewa-lp-cta .sewa-wa--bar:focus-visible{outline:3px solid var(--sewa-wa-green-dark);outline-offset:2px;box-shadow:none}
@media (min-width:993px){
	.sewa-wa--side{height:46px;margin-top:-10px;font-size:var(--sewa-font-size-sm)}
}
/* An open date picker (Listeo's daterangepicker) is never covered by the floating button. */
body.sewa-wa-picker-open .sewa-wa--float{opacity:0;visibility:hidden;pointer-events:none}
/* Tablets (768–992px, home): the circle sat on the end of centred section subtitles — keep their text out of its lane. */
@media (min-width:768px) and (max-width:992px){
	body.sewa-wa-on .sewa-section-head p,body.sewa-wa-on .sewa-cta-inner p{padding-left:72px;padding-right:72px}
}

@media (prefers-reduced-motion:reduce){
	.sewa-wa{transition:none}
	.sewa-wa:hover,.sewa-wa:focus{transform:none}
}

@media print{
	.sewa-wa{display:none}
}