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

   Not ported - see class-aidem-rs-button-widget.php's header docblock for
   the full reasoning on each:
     - .rs-button.style6 rules (never existed - style 6 had zero CSS in
       the original theme, so the dropdown option itself was dropped too)
     - .rs-latest-button / .rs-latest-button--calypso (unused leftover
       CSS from an unrelated component - confirmed unreferenced by this
       widget's render())
     - keyframes latterWave, MoveScaleUpInitial, MoveScaleUpEnd,
       rspulse512, MoveUpInitial, MoveUpEnd (all confirmed unreferenced
       anywhere in this widget)

   Variable fallbacks: this plugin doesn't load the Blunor theme's own
   --primaryColor/--titleColor/etc. (defined in its now-inactive
   rsaddons.css), so every var(--xColor) reference below is renamed to a
   locally-scoped --rs-btn-* custom property, defined once on .rs-button
   with the theme's own original default values (read directly from
   rsaddons.css: --primaryColor:#b3de4f, --secondaryColor:#96b44e,
   --titleColor/--bodyBgColor via light-dark(), light-mode values used).
   Every Elementor Style-tab control on this widget still overrides the
   actual property (color/background/etc.) directly via `selectors`, so
   these are only the visual defaults before a user touches the Style
   tab - matching the original theme's real designed look, not an
   arbitrary substitute palette.
   ========================================================================== */

.rs-button {
  --rs-btn-primary: #b3de4f;
  --rs-btn-secondary: #96b44e;
  --rs-btn-title: #000000;
  --rs-btn-body-bg: #ffffff;
  --rs-btn-black: #000000;
  --rs-btn-transition: all 0.3s ease 0s;
}

.rs-button .rs-btn.btn-rtl.btn-row-reverse {
  flex-direction: row !important;
}
.rs-button .rs-btn.btn-rtl.btn-row {
  flex-direction: row-reverse !important;
}
.rs-button .rs-btn[type="submit"] {
  background: transparent;
  padding: 0;
}

/* ---------------------------------------------------------------- Style 1 */
.rs-button.style1 {
  line-height: 0;
}
.rs-button.style1 .rs-btn {
  background: var(--rs-btn-primary);
  color: var(--rs-btn-title);
  padding: 19px 29px;
  border-radius: 3px;
  overflow: hidden;
  font-weight: 500;
  line-height: 1.34;
  position: relative;
  display: inline-block;
  transition: var(--rs-btn-transition);
}
.rs-button.style1 .rs-btn span {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.rs-button.style1 .rs-btn em {
  display: inline-block;
  overflow: hidden;
  position: relative;
  width: 18px;
  height: 18px;
  line-height: 20px;
  flex-shrink: 0;
}
.rs-button.style1 .rs-btn em > * {
  height: inherit;
  width: inherit;
  line-height: inherit;
  font-size: 18px;
  position: absolute;
  top: 0;
  left: 0;
  transition: var(--rs-btn-transition);
}
.rs-button.style1 .rs-btn em > *:last-child {
  transform: translateX(-150%);
}
.rs-button.style1 .rs-btn em svg path {
  fill: var(--rs-btn-title);
  transition: var(--rs-btn-transition);
}
.rs-button.style1 .rs-btn em i {
  color: var(--rs-btn-title);
}
.rs-button.style1 .rs-btn:hover {
  background: var(--rs-btn-title);
  color: var(--rs-btn-body-bg);
}
.rs-button.style1 .rs-btn:hover em > * {
  transform: translateX(150%);
}
.rs-button.style1 .rs-btn:hover em > *:last-child {
  transform: translateX(0) !important;
}
.rs-button.style1 .rs-btn:hover em svg path {
  fill: var(--rs-btn-body-bg);
}
.rs-button.style1 .rs-btn:hover em i {
  color: var(--rs-btn-body-bg);
}
.rs-button.style1 .rs-btn.anim-dir-bottom em > *:last-child {
  transform: translateY(-150%);
}
.rs-button.style1 .rs-btn.anim-dir-bottom:hover em > * {
  transform: translateY(150%);
}
.rs-button.style1 .rs-btn.anim-dir-top em > *:last-child {
  transform: translateY(150%);
}
.rs-button.style1 .rs-btn.anim-dir-top:hover em > * {
  transform: translateY(-150%);
}
.rs-button.style1 .rs-btn.anim-dir-left em > *:last-child {
  transform: translateX(150%);
}
.rs-button.style1 .rs-btn.anim-dir-left:hover em > * {
  transform: translateX(-150%);
}

/* ---------------------------------------------------------------- Style 2 */
.rs-button.style2 .rs-btn {
  --baseSize: 60px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transition: var(--rs-btn-transition);
}
.rs-button.style2 .rs-btn span {
  background: var(--rs-btn-primary);
}
.rs-button.style2 .rs-btn .rs-icon {
  height: var(--baseSize);
  width: var(--baseSize);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: var(--rs-btn-transition);
  opacity: 0;
}
.rs-button.style2 .rs-btn .rs-icon.two {
  transform: translate3d(calc(-1 * var(--baseSize)), 0px, 0px);
  transform-style: preserve-3d;
  opacity: 1;
}
.rs-button.style2 .rs-btn .rs-icon svg {
  width: 16px;
  height: 16px;
}
.rs-button.style2 .rs-btn .rs-icon svg path {
  fill: var(--rs-btn-black);
  transition: var(--rs-btn-transition);
}
.rs-button.style2 .rs-btn .rs-icon i {
  color: var(--rs-btn-black);
  font-size: 16px;
  transition: var(--rs-btn-transition);
}
.rs-button.style2 .rs-btn .rs-btn-text {
  color: var(--rs-btn-black);
  border-radius: 28px;
  padding: 16px 36px;
  display: inline-block;
  transition: var(--rs-btn-transition);
  z-index: 9;
}
.rs-button.style2 .rs-btn.icon-sty-yes .rs-btn-text {
  transform: translate3d(calc(-1 * var(--baseSize)), 0px, 0px);
  transform-style: preserve-3d;
}
.rs-button.style2 .rs-btn.icon-sty-yes:hover .rs-btn-text {
  transform: translate3d(0px, 0px, 0px) !important;
  transform-style: preserve-3d;
}
.rs-button.style2 .rs-btn:hover .rs-icon {
  opacity: 1;
}
.rs-button.style2 .rs-btn:hover .rs-icon.two {
  opacity: 0;
}
.rs-button.style2 .rs-btn.btn-row-reverse.icon-sty-yes .rs-btn-text {
  transform: translate3d(var(--baseSize), 0px, 0px);
}
.rs-button.style2 .rs-btn.btn-row-reverse.icon-sty-yes .rs-icon.two {
  transform: translate3d(var(--baseSize), 0px, 0px);
}
.rs-button.style2 .rs-btn.btn-rtl.btn-row {
  flex-direction: row !important;
}
.rs-button.style2 .rs-btn.btn-rtl.btn-row.icon-sty-yes .rs-btn-text {
  transform: translate3d(var(--baseSize), 0px, 0px);
}
.rs-button.style2 .rs-btn.btn-rtl.btn-row.icon-sty-yes .rs-icon.two {
  transform: translate3d(var(--baseSize), 0px, 0px);
}
.rs-button.style2 .rs-btn.btn-rtl.btn-row-reverse {
  flex-direction: row-reverse !important;
}
.rs-button.style2 .rs-btn.btn-rtl.btn-row-reverse.icon-sty-yes .rs-btn-text {
  transform: translate3d(calc(-1 * var(--baseSize)), 0px, 0px);
}
.rs-button.style2 .rs-btn.btn-rtl.btn-row-reverse.icon-sty-yes .rs-icon.two {
  transform: translate3d(calc(-1 * var(--baseSize)), 0px, 0px);
}

/* ---------------------------------------------------------------- Style 3 */
.rs-button.style3 .rs-btn {
  --baseSize: 60px;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  white-space: nowrap;
  transition: var(--rs-btn-transition);
  border: 1px solid var(--rs-btn-title);
  padding: 5px;
  border-radius: 50px;
}
.rs-button.style3 .rs-btn .rs-icon {
  background: var(--rs-btn-primary);
  height: var(--baseSize);
  width: var(--baseSize);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.5s ease 0s, right 0.5s;
  position: relative;
  right: 0;
}
.rs-button.style3 .rs-btn .rs-icon svg {
  width: 16px;
  height: 16px;
}
.rs-button.style3 .rs-btn .rs-icon svg path {
  fill: var(--rs-btn-title);
  transition: var(--rs-btn-transition);
}
.rs-button.style3 .rs-btn .rs-icon i {
  color: var(--rs-btn-title);
  font-size: 16px;
  transition: var(--rs-btn-transition);
}
.rs-button.style3 .rs-btn .rs-btn-text {
  color: var(--rs-btn-title);
  display: inline-block;
  text-transform: uppercase;
  transition: all 0.5s ease 0s, right 0.5s;
  padding: 0 20px;
  z-index: 9;
}
.rs-button.style3 .rs-btn.icon-sty-yes .rs-btn-text {
  transform: translate3d(0px, 0px, 0px);
  transform-style: preserve-3d;
}
.rs-button.style3 .rs-btn.icon-sty-yes:hover .rs-btn-text {
  transform: translate3d(calc(-1 * var(--baseSize)), 0px, 0px) !important;
  transform-style: preserve-3d;
}
.rs-button.style3 .rs-btn:hover .rs-icon {
  right: calc(-100% - -1 * var(--baseSize));
}
.rs-button.style3 .rs-btn.btn-row-reverse.icon-sty-yes:hover .rs-btn-text {
  transform: translate3d(var(--baseSize), 0px, 0px) !important;
}
.rs-button.style3 .rs-btn.btn-row-reverse .rs-icon {
  right: unset;
  left: 0;
}
.rs-button.style3 .rs-btn.btn-row-reverse:hover .rs-icon {
  left: calc(-100% - -1 * var(--baseSize));
}

/* ---------------------------------------------------------------- Style 4 */
.rs-button.style4 {
  line-height: 0;
}
.rs-button.style4 .rs-btn {
  background: transparent;
  color: #fff;
  padding: 18px 32px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: inline-block;
  transition: var(--rs-btn-transition);
}
.rs-button.style4 .rs-btn span {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.rs-button.style4 .rs-btn em {
  display: inline-block;
  overflow: hidden;
  position: relative;
  width: 18px;
  height: 18px;
  line-height: 20px;
  flex-shrink: 0;
}
.rs-button.style4 .rs-btn em > * {
  height: inherit;
  width: inherit;
  line-height: inherit;
  font-size: 18px;
  position: absolute;
  top: 0;
  left: 0;
  transition: var(--rs-btn-transition);
}
.rs-button.style4 .rs-btn em > *:last-child {
  transform: translateX(-150%);
}
.rs-button.style4 .rs-btn em svg path {
  fill: #fff;
  transition: var(--rs-btn-transition);
}
.rs-button.style4 .rs-btn em i {
  color: #fff;
}
.rs-button.style4 .rs-btn::after {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  width: calc(100% - 2px);
  aspect-ratio: 1/0.9;
  background: var(--rs-btn-primary);
  pointer-events: none;
  transition: var(--rs-btn-transition);
}
.rs-button.style4 .rs-btn:hover {
  background: transparent;
  color: #fff;
}
.rs-button.style4 .rs-btn:hover em > * {
  transform: translateX(150%);
}
.rs-button.style4 .rs-btn:hover em > *:last-child {
  transform: translateX(0) !important;
}
.rs-button.style4 .rs-btn:hover em svg path {
  fill: #fff;
}
.rs-button.style4 .rs-btn:hover em i {
  color: #fff;
}
.rs-button.style4 .rs-btn:hover::after {
  background: var(--rs-btn-secondary);
}
.rs-button.style4 .rs-btn.anim-dir-bottom em > *:last-child {
  transform: translateY(-150%);
}
.rs-button.style4 .rs-btn.anim-dir-bottom:hover em > * {
  transform: translateY(150%);
}
.rs-button.style4 .rs-btn.anim-dir-top em > *:last-child {
  transform: translateY(150%);
}
.rs-button.style4 .rs-btn.anim-dir-top:hover em > * {
  transform: translateY(-150%);
}
.rs-button.style4 .rs-btn.anim-dir-left em > *:last-child {
  transform: translateX(150%);
}
.rs-button.style4 .rs-btn.anim-dir-left:hover em > * {
  transform: translateX(-150%);
}

/* ---------------------------------------------------------------- Style 5 */
.rs-button.style5 {
  line-height: 0;
}
.rs-button.style5 .rs-btn {
  background: transparent;
  color: white;
  padding: 19px 29px;
  border-radius: 3px;
  overflow: hidden;
  font-weight: 500;
  line-height: 1.34;
  position: relative;
  display: inline-block;
  transition: var(--rs-btn-transition);
}
.rs-button.style5 .rs-btn span {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: inherit;
}
.rs-button.style5 .rs-btn em {
  display: inline-block;
  overflow: hidden;
  position: relative;
  width: 18px;
  height: 18px;
  line-height: 20px;
  flex-shrink: 0;
}
.rs-button.style5 .rs-btn em > * {
  height: inherit;
  width: inherit;
  line-height: inherit;
  font-size: 18px;
  position: absolute;
  top: 0;
  left: 0;
  transition: var(--rs-btn-transition);
}
.rs-button.style5 .rs-btn em > *:last-child {
  transform: translateX(-150%);
}
.rs-button.style5 .rs-btn em svg path {
  fill: white;
  transition: var(--rs-btn-transition);
}
.rs-button.style5 .rs-btn em i {
  color: white;
}
.rs-button.style5 .rs-btn:before,
.rs-button.style5 .rs-btn:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  transition: var(--rs-btn-transition);
}
.rs-button.style5 .rs-btn:after {
  background: linear-gradient(182deg, var(--rs-btn-primary) 0%, var(--rs-btn-secondary) 84%);
}
.rs-button.style5 .rs-btn:before {
  background: linear-gradient(182deg, var(--rs-btn-secondary) 0%, var(--rs-btn-primary) 84%);
  opacity: 0;
}
.rs-button.style5 .rs-btn:hover {
  background: transparent;
  color: white;
}
.rs-button.style5 .rs-btn:hover:after {
  opacity: 0;
}
.rs-button.style5 .rs-btn:hover:before {
  opacity: 1;
}
.rs-button.style5 .rs-btn:hover em > * {
  transform: translateX(150%);
}
.rs-button.style5 .rs-btn:hover em > *:last-child {
  transform: translateX(0) !important;
}
.rs-button.style5 .rs-btn:hover em svg path {
  fill: white;
}
.rs-button.style5 .rs-btn:hover em i {
  color: white;
}
.rs-button.style5 .rs-btn.anim-dir-bottom em > *:last-child {
  transform: translateY(-150%);
}
.rs-button.style5 .rs-btn.anim-dir-bottom:hover em > * {
  transform: translateY(150%);
}
.rs-button.style5 .rs-btn.anim-dir-top em > *:last-child {
  transform: translateY(150%);
}
.rs-button.style5 .rs-btn.anim-dir-top:hover em > * {
  transform: translateY(-150%);
}
.rs-button.style5 .rs-btn.anim-dir-left em > *:last-child {
  transform: translateX(150%);
}
.rs-button.style5 .rs-btn.anim-dir-left:hover em > * {
  transform: translateX(-150%);
}