/* =========================
   ATTACCO FLOATING (v1.0)
   - shrink synced with text delete (no overflow hack)
   ========================= */

:root{
  --attacco-fixed-left: 18px;
  --attacco-fixed-bottom: 18px;
  --attacco-fixed-size: 56px;
  --attacco-fixed-bg: var(--e-global-color-primary, #111);
  --attacco-fixed-color: #fff;
  --attacco-fixed-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

#attacco{
  position: fixed !important;
  left: var(--attacco-fixed-left, 18px) !important;
  bottom: var(--attacco-fixed-bottom, 18px) !important;
  right: auto !important;
  z-index: 350 !important;
  transform: none !important;
}

#attacco.elementor-button{
  min-width: var(--attacco-fixed-size, 56px);
  min-height: var(--attacco-fixed-size, 56px);
  padding: 0 18px;
  border-radius: 999px;
  background-color: var(--attacco-fixed-bg, #111);
  color: var(--attacco-fixed-color, #fff);
  box-shadow: var(--attacco-fixed-shadow, 0 10px 30px rgba(0,0,0,0.25));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Hide CTA when mobile menu is open */
html.has-menu-open #attacco{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Mobile: start centered in viewport, then move left on fixed state */
@media (max-width: 1024px){
  #attacco{
    left: 50% !important;
    bottom: var(--attacco-fixed-bottom, 18px) !important;
    top: auto !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    transition: left .35s ease, bottom .35s ease, transform .35s ease;
  }

  #attacco.is-attacco-fixed{
    left: var(--attacco-fixed-left, 18px) !important;
    bottom: var(--attacco-fixed-bottom, 18px) !important;
    top: auto !important;
    transform: none !important;
  }
}

/* Fixed state: shrink padding in sync with text deletion */
#attacco.is-attacco-fixed{
  width: auto;
  height: var(--attacco-fixed-size, 56px);
  padding-left: 18px;
  padding-right: 18px;
  animation: attacco-pill-shrink .8s linear forwards;
}

#attacco.is-attacco-fixed .elementor-button-content-wrapper{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

#attacco.is-attacco-fixed .elementor-button-text{
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  max-width: 18ch;
  animation: attacco-text-delete .8s steps(18, end) forwards;
}

@keyframes attacco-text-delete{
  0%{ max-width: 18ch; opacity: 1; }
  85%{ max-width: 1ch; opacity: .25; }
  100%{ max-width: 0ch; opacity: 0; }
}

@keyframes attacco-pill-shrink{
  from{ padding-left: 18px; padding-right: 18px; }
  to{ padding-left: 0px; padding-right: 0px; }
}

/* Icon appears after text deletion finishes */
#attacco.is-attacco-fixed .elementor-button-content-wrapper::after{
  content: '';
  width: 22px;
  height: 22px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 height=%2724px%27 viewBox=%270 -960 960 960%27 width=%2724px%27 fill=%27%231f1f1f%27%3E%3Cpath d=%27m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm330.5-51.5Q520-263 520-280t-11.5-28.5Q497-320 480-320t-28.5 11.5Q440-297 440-280t11.5 28.5Q463-240 480-240t28.5-11.5ZM440-360h80v-200h-80v200Zm40-100Z%27/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 height=%2724px%27 viewBox=%270 -960 960 960%27 width=%2724px%27 fill=%27%231f1f1f%27%3E%3Cpath d=%27m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm330.5-51.5Q520-263 520-280t-11.5-28.5Q497-320 480-320t-28.5 11.5Q440-297 440-280t11.5 28.5Q463-240 480-240t28.5-11.5ZM440-360h80v-200h-80v200Zm40-100Z%27/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0;
  animation: attacco-icon-in .25s ease forwards;
  animation-delay: .85s;
}

@keyframes attacco-icon-in{
  from{ opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  to{ opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (prefers-reduced-motion: reduce){
  #attacco.is-attacco-fixed{
    animation: none;
    padding-left: 0;
    padding-right: 0;
  }
  #attacco.is-attacco-fixed .elementor-button-text{
    animation: none;
    max-width: 0;
    opacity: 0;
  }
  #attacco.is-attacco-fixed .elementor-button-content-wrapper::after{
    animation: none;
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}