/* Circle Expand — Button extension styles
   The circle is a ::before pseudo-element on .elementor-button.
   No DOM insertion needed. JS only sets CSS variables + class.
   Animation: only width, height, left/right, border-radius transition.
   top and transform NEVER change — keeps vertical centering stable. */

/* === Button base === */
.elementor-button.pe-ce-active {
  position: relative !important;
  background: transparent !important;
  overflow: hidden !important;
  cursor: pointer;
}

/* Content wrapper above circle */
.pe-ce-active .elementor-button-content-wrapper {
  position: relative;
  z-index: 1;
}

/* === Circle = ::before pseudo-element === */
.elementor-button.pe-ce-active::before {
  content: '';
  position: absolute;
  top: var(--pe-ce-circle-top, 50%);
  left: var(--pe-ce-circle-left, 4px);
  transform: translateY(-50%);
  width: var(--pe-ce-circle-size, 48px);
  height: var(--pe-ce-circle-size, 48px);
  background: var(--pe-ce-circle-color, #69727D);
  border-radius: 50%;
  z-index: 0;
  transition: width var(--pe-ce-duration, 0.45s) cubic-bezier(0.65, 0, 0.076, 1),
              height var(--pe-ce-duration, 0.45s) cubic-bezier(0.65, 0, 0.076, 1),
              left var(--pe-ce-duration, 0.45s) cubic-bezier(0.65, 0, 0.076, 1),
              top var(--pe-ce-duration, 0.45s) cubic-bezier(0.65, 0, 0.076, 1),
              border-radius var(--pe-ce-duration, 0.45s) cubic-bezier(0.65, 0, 0.076, 1);
}

/* Circle on right side */
.pe-ce-active[data-pe-ce-dir="right"]::before {
  left: auto;
  right: var(--pe-ce-circle-right, 4px);
  transition: width var(--pe-ce-duration, 0.45s) cubic-bezier(0.65, 0, 0.076, 1),
              height var(--pe-ce-duration, 0.45s) cubic-bezier(0.65, 0, 0.076, 1),
              right var(--pe-ce-duration, 0.45s) cubic-bezier(0.65, 0, 0.076, 1),
              top var(--pe-ce-duration, 0.45s) cubic-bezier(0.65, 0, 0.076, 1),
              border-radius var(--pe-ce-duration, 0.45s) cubic-bezier(0.65, 0, 0.076, 1);
}

/* Hover: circle grows to fill button.
   top and transform stay the same — vertical center is stable.
   height: 100% + translateY(-50%) = fills full height from center. */
.elementor-button.pe-ce-active:hover::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--pe-ce-border-radius, 3px);
}

/* Right direction hover */
.pe-ce-active[data-pe-ce-dir="right"]:hover::before {
  left: auto;
  right: 0;
}

/* === Text color transition === */
.pe-ce-active .elementor-button-text {
  transition: color var(--pe-ce-duration, 0.45s) cubic-bezier(0.65, 0, 0.076, 1);
}

.elementor-button.pe-ce-active:hover .elementor-button-text {
  color: var(--pe-ce-text-hover-color, #ffffff) !important;
}

/* === Icon color — static state (independent from Elementor text color) === */
.pe-ce-active .elementor-button-icon i {
  color: var(--pe-ce-icon-color, inherit) !important;
  transition: color var(--pe-ce-duration, 0.45s) cubic-bezier(0.65, 0, 0.076, 1);
}

.pe-ce-active .elementor-button-icon svg {
  fill: var(--pe-ce-icon-color, currentColor);
  transition: fill var(--pe-ce-duration, 0.45s) cubic-bezier(0.65, 0, 0.076, 1);
}

/* === Icon color — hover state === */
.elementor-button.pe-ce-active:hover .elementor-button-icon i {
  color: var(--pe-ce-icon-hover-color, #ffffff) !important;
}

.elementor-button.pe-ce-active:hover .elementor-button-icon svg {
  fill: var(--pe-ce-icon-hover-color, #ffffff);
}

/* === Active press === */
.elementor-button.pe-ce-active:active {
  transform: scale(0.97);
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
  .elementor-button.pe-ce-active::before,
  .pe-ce-active .elementor-button-text,
  .pe-ce-active .elementor-button-icon i,
  .pe-ce-active .elementor-button-icon svg {
    transition: none !important;
  }
}