/* ==========================================================================
   BUTTON ROTATING WIDGET (.rs-button-rotating)
   Ported 2026-09-10 from the Blunor theme's button-rotating.css.

   All colours/sizes/spacing here are Elementor Style-tab overridable via
   this widget's `selectors` controls (Wrapper Background, Text Color,
   Icon Color, etc.) - the values below are only fallback defaults for when
   a control is left unset, since this plugin doesn't rely on the Blunor
   theme's global CSS variables (--primaryColor / --titleColor / etc.),
   which aren't defined anywhere else in this plugin and won't exist once
   the Blunor theme itself is inactive.
   ========================================================================== */

.rs-button-rotating {
  display: inline-block;
}

.rs-button-rotating a {
  display: block;
  position: relative;
  width: 150px;
  height: 150px;
  background: #16181c;
  border-radius: 50%;
  padding: 2px;
  z-index: 5;
  text-decoration: none;
}

.rs-button-rotating a > * {
  z-index: 1;
}

.rs-button-rotating a .button-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
  transform: translate(-50%, -50%);
  background: #16181c;
  border-radius: 50%;
  text-align: center;
  padding: 20px;
  z-index: 1;
}

.rs-button-rotating a .button-logo i,
.rs-button-rotating a .button-logo svg {
  transition: all 0.3s ease;
}

.rs-button-rotating a .button-logo img {
  width: auto;
  height: 100%;
}

.rs-button-rotating a .text-wrapper-parent {
  position: relative;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.rs-button-rotating a .text-wrapper-parent .rs-lettering-text {
  position: inherit;
  width: inherit;
  height: inherit;
}

.rs-button-rotating a .text-wrapper-parent .rs-lettering-text span {
  position: absolute;
  height: 100%;
  width: 100%;
  text-align: center;
  color: #ffffff;
}

.rs-button-rotating.text-anim-yes a .rs-lettering-text {
  animation: rs-button-rotating-text-anim 30s infinite linear;
}

.rs-button-rotating.text-anim-pause-yes a:hover .rs-lettering-text {
  animation-play-state: paused;
}

.rs-button-rotating.image-anim-yes a .button-logo img {
  animation: rs-button-rotating-image-anim 1s infinite alternate;
}

.rs-button-rotating.overlay-yes a::before {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-radius: 50%;
  pointer-events: none;
}

.rs-button-rotating.colors-shape-yes {
  position: relative;
  margin-right: 100px;
}

.rs-button-rotating.colors-shape-yes .color-shape {
  --size-measure: 39px;
  pointer-events: none;
  position: absolute;
  left: calc(100% - 65px);
  top: 50%;
  transform: translateY(-50%);
  background: #0585f2;
  height: var(--size-measure);
  width: 163px;
  border-radius: 0 30px 30px 0;
  z-index: 0;
}

.rs-button-rotating.colors-shape-yes .color-shape:before,
.rs-button-rotating.colors-shape-yes .color-shape:after {
  height: inherit;
  width: calc(100% - 26px);
  position: absolute;
  left: 0;
  content: "";
  border-radius: inherit;
  transition: transform 0.3s ease;
  transform: translateX(0);
}

.rs-button-rotating.colors-shape-yes .color-shape:after {
  background: #82dd00;
  top: calc(-1 * var(--size-measure));
}

.rs-button-rotating.colors-shape-yes .color-shape:before {
  background: #5002c8;
  bottom: calc(-1 * var(--size-measure));
}

.rs-button-rotating.colors-shape-yes:hover .color-shape:before,
.rs-button-rotating.colors-shape-yes:hover .color-shape:after {
  transform: translateX(-5px);
}

@keyframes rs-button-rotating-text-anim {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(359deg);
  }
}

@keyframes rs-button-rotating-image-anim {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}