/* =========================================================
   Zippidobi mascot layer — static, image-only.

     1. Final CTA — Zippibag + Zippiwash flanking the button
     2. Sticky CTA — Zippiwash standing on the site's own
        booking control: the floating button on desktop, the
        bottom booking bar on phones.

   No copy, fonts, colours or layout of existing elements are
   changed, and no new wording is introduced anywhere.
   All selectors are prefixed .mz-
   ========================================================= */

.mz-img{display:block;height:auto;pointer-events:none;-webkit-user-select:none;user-select:none}
.mz{position:absolute;z-index:2;pointer-events:none}

/* ---------- 1. final CTA — the pair, held clear of the edges ---------- */
.mz-final-l,.mz-final-r{bottom:6px;z-index:0}
.mz-final-l{left:clamp(20px,6vw,120px);width:clamp(96px,13.5vw,178px)}
.mz-final-r{right:clamp(20px,6vw,120px);width:clamp(104px,14.5vw,192px)}

@media(max-width:880px){
  .mz-final-l{left:22px;width:90px;bottom:4px}
  .mz-final-r{right:22px;width:97px;bottom:4px}
}
/* Phones: the CTA copy and the Founding Member chip run nearly edge to edge,
   so the pair gets its own strip of room underneath rather than sitting on
   the chip. Only spacing is added — no copy or type changes. */
@media(max-width:700px){
  .final{padding-bottom:116px}
  .mz-final-l{left:24px;width:80px;bottom:8px}
  .mz-final-r{right:24px;width:86px;bottom:8px}
}
@media(max-width:400px){
  .final{padding-bottom:106px}
  .mz-final-l{left:18px;width:72px}
  .mz-final-r{right:18px;width:78px}
}

/* ---------- 2. sticky CTA — Zippiwash stands on the booking control ----------
   Positioned from the live position of the site's own floating button
   (desktop) or bottom booking bar (phones). Sits above both in the stacking
   order so he is never clipped or hidden behind them. */
.mz-cta{position:fixed;z-index:97;right:24px;bottom:90px;width:78px;
  pointer-events:none;opacity:0;transition:opacity .35s;
  filter:drop-shadow(0 8px 14px rgba(30,27,46,.22))}
.mz-cta.on{opacity:1}
@media(max-width:759px){.mz-cta{width:66px}}
@media(max-width:380px){.mz-cta{width:58px}}
