/* Mobile behavior layer only. Visual identity (palette, glow, cards and effects)
   is inherited from the same desktop CSS so the brand does not change by device. */

/* Video controls: never depend on emoji/text glyph rendering. */
.site-video-player [data-site-play-icon],
[data-edit-id="span-004"],
[data-edit-id="span-026"]{
  background:linear-gradient(135deg,var(--primary),#fda5d5)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:0 12px 36px color-mix(in srgb,var(--primary) 34%,transparent),0 5px 18px rgba(0,0,0,.38)!important;
}
.site-video-player [data-site-play-icon] svg,
[data-edit-id="span-004"] svg,
[data-edit-id="span-026"] svg{
  display:block!important;
  width:26px!important;
  height:26px!important;
  fill:#fff!important;
  stroke:#fff!important;
}

/* Floating WhatsApp: consistent brand button instead of a generic chat glyph. */
a[data-edit-id="a-006"] [data-whatsapp-brand-icon]{
  display:grid;
  place-items:center;
  width:27px;
  height:27px;
  flex:0 0 27px;
  color:#fff;
}
a[data-edit-id="a-006"] [data-whatsapp-brand-icon] svg{
  width:100%!important;
  height:100%!important;
  display:block!important;
}
a[data-edit-id="a-006"] > svg[data-whatsapp-replaced="true"]{display:none!important}

@media(max-width:640px){
  html,body{
    overscroll-behavior-y:none;
  }

  /* Do not redefine --background, --card, --primary, muted colors or the hero
     glow here. Mobile intentionally inherits the exact same visual system used
     by desktop. Only geometry/interaction remains device-specific below. */

  /* Static and runtime video play controls share one premium treatment. */
  .site-video-player [data-site-play-icon],
  [data-edit-id="span-004"],
  [data-edit-id="span-026"]{
    width:58px!important;
    height:58px!important;
    border-radius:999px!important;
  }

  /* WhatsApp stays clear of the CTA, respects iPhone safe areas and remains perfectly circular. */
  .conversion-enhanced a[data-edit-id="a-006"]{
    position:fixed!important;
    z-index:1910!important;
    right:16px!important;
    left:auto!important;
    bottom:calc(16px + env(safe-area-inset-bottom,0px))!important;
    width:54px!important;
    min-width:54px!important;
    height:54px!important;
    min-height:54px!important;
    padding:0!important;
    margin:0!important;
    display:grid!important;
    place-items:center!important;
    gap:0!important;
    border-radius:999px!important;
    border:1px solid rgba(255,255,255,.22)!important;
    background:#25d366!important;
    color:#fff!important;
    box-shadow:0 12px 34px rgba(0,0,0,.42),0 5px 18px rgba(37,211,102,.22)!important;
    transform:none!important;
    overflow:hidden!important;
  }
  html.mobile-sticky-active .conversion-enhanced a[data-edit-id="a-006"]{
    bottom:calc(94px + env(safe-area-inset-bottom,0px))!important;
  }
  .conversion-enhanced a[data-edit-id="a-006"] span:not([data-whatsapp-brand-icon]),
  .conversion-enhanced a[data-edit-id="a-006"] > svg:not([data-whatsapp-brand-svg]){display:none!important}
  .conversion-enhanced a[data-edit-id="a-006"] [data-whatsapp-brand-icon]{display:grid!important}

  /* Sticky CTA geometry only; colors come from the same site palette. */
  .conversion-sticky-cta{
    position:fixed!important;
    z-index:1900!important;
    left:max(14px,env(safe-area-inset-left,0px))!important;
    right:max(14px,env(safe-area-inset-right,0px))!important;
    bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
    width:auto!important;
    max-width:540px!important;
    margin-inline:auto!important;
    box-sizing:border-box!important;
    transform:translateY(14px)!important;
  }
  .conversion-sticky-cta.mobile-cta-ready{display:block!important}
  .conversion-sticky-cta.mobile-cta-ready:not(.mobile-cta-visible){opacity:0!important;pointer-events:none!important;transform:translateY(14px)!important}
  .conversion-sticky-cta.mobile-cta-visible{opacity:1!important;pointer-events:auto!important;transform:none!important}
  .conversion-sticky-cta a{
    width:100%!important;
    min-width:0!important;
    min-height:64px!important;
    padding:10px 12px 10px 20px!important;
    margin:0!important;
    box-sizing:border-box!important;
    border-radius:20px!important;
    overflow:hidden!important;
    background:linear-gradient(100deg,var(--primary) 0%,#fb64b6 58%,#fda5d5 100%)!important;
    border:1px solid rgba(255,255,255,.25)!important;
    box-shadow:0 16px 42px rgba(0,0,0,.46),0 8px 30px color-mix(in srgb,var(--primary) 23%,transparent)!important;
  }
  .conversion-sticky-cta a>span{min-width:0!important;text-align:left!important}
  .conversion-sticky-cta strong{font-size:13px!important;line-height:1.15!important;color:var(--primary-foreground)!important}
  .conversion-sticky-cta small{margin-top:3px!important;font-size:10px!important;color:color-mix(in srgb,var(--primary-foreground) 68%,transparent)!important;opacity:1!important}
  .conversion-sticky-cta a>b{
    width:38px!important;
    height:38px!important;
    flex:0 0 38px!important;
    background:rgba(0,0,0,.10)!important;
    color:var(--primary-foreground)!important;
    font-size:20px!important;
  }

  /* Fixed UI must not force extra horizontal width. */
  body{overflow-x:hidden!important}
  .conversion-sticky-cta,.conversion-sticky-cta *{box-sizing:border-box}
}