/* ==========================================================================
   Nereida Button Widget
   ========================================================================== */

.nereida-button-wrapper {
  --nereida-button-text: var(--color-text, #111);
  --nereida-button-border: var(--nereida-button-text);
  --nereida-button-bg: transparent;
  --nereida-button-hover-bg: var(--nereida-button-border);
  --nereida-button-hover-border: var(--nereida-button-border);
  --nereida-button-hover-text-default: #fff;
  --nereida-button-hover-text: var(--nereida-button-hover-text-default);
  --nereida-button-radius: var(--n-btn-radius, 100px);
  --nereida-button-ease-out: var(--n-btn-ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  --nereida-button-ease-inout: var(--n-btn-ease-inout, cubic-bezier(0.4, 0, 0, 1));
  --nereida-button-ease-elastic: var(--n-btn-ease-elastic, cubic-bezier(0.34, 2.5, 0.64, 1));
  line-height: 0;
}

.nereida-button-wrapper--nav-link {
  --nereida-button-hover-text-default: var(--nereida-button-text);
}

.nereida-button-wrapper a {
  text-decoration: none;
}

.elementor-editor-active .nereida-button-wrapper a {
  pointer-events: auto;
}

.n-btn-primary {
  position: relative;
  display: inline-block;
  padding: 16px 32px;
  border: none;
  border-radius: var(--nereida-button-radius);
  color: var(--nereida-button-text);
  background: var(--nereida-button-bg);
  overflow: hidden;
  transform: translateZ(0);
  line-height: 1;
  font-family: var(--font-sans, inherit);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.3s var(--nereida-button-ease-out);
}

.n-btn-primary__border {
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 1px solid var(--nereida-button-border);
  border-radius: var(--nereida-button-radius);
  pointer-events: none;
  transition: border-color 0.3s ease;
}

.n-btn-primary__ripple {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  transform: translateZ(0);
  pointer-events: none;
}

.n-btn-primary__ripple span {
  display: block;
  width: 100%;
  height: 100%;
  transform: translateY(101%);
  border-radius: 50% 50% 0 0;
  background: var(--nereida-button-hover-bg);
  transition: transform 0.5s var(--nereida-button-ease-inout), border-radius 0.5s var(--nereida-button-ease-inout);
}

.n-btn-primary__text {
  position: relative;
  z-index: 2;
  display: block;
  overflow: hidden;
}

.n-btn-primary__text span {
  position: relative;
  display: block;
  transition: transform 0.8s var(--nereida-button-ease-out);
  will-change: transform;
}

.n-btn-primary__text span::after {
  content: attr(data-text);
  position: absolute;
  top: 110%;
  left: 0;
  color: var(--nereida-button-hover-text);
}

@media (pointer: fine) {
  .n-btn-primary:hover {
    transform: scaleX(1.02);
    transition: transform 0.6s var(--nereida-button-ease-elastic);
  }

  .n-btn-primary:hover .n-btn-primary__border {
    border-color: var(--nereida-button-hover-border);
  }

  .n-btn-primary:hover .n-btn-primary__ripple span {
    transform: translateY(0);
    border-radius: 0;
    transition-duration: 0.5s, 0.9s;
  }

  .n-btn-primary:hover .n-btn-primary__text span {
    transform: translateY(-110%);
  }
}

.n-btn-primary:focus-visible,
.n-nav-link:focus-visible {
  outline: 2px solid var(--color-focus, currentColor);
  outline-offset: 4px;
}

.n-nav-link {
  position: relative;
  display: inline-block;
  padding: 6px 2px;
  color: var(--nereida-button-text);
  background: var(--nereida-button-bg);
  font-family: var(--font-sans, inherit);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
}

.n-nav-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--nereida-button-border);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s var(--nereida-button-ease-inout), background-color 0.3s ease;
}

.n-nav-link__text {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0.1em;
  margin: -0.1em;
}

.n-nav-link__text span {
  position: relative;
  display: block;
  transition: transform 1.2s var(--nereida-button-ease-out);
  transform-origin: left center;
  will-change: transform;
}

.n-nav-link__text span::after {
  content: attr(data-text);
  position: absolute;
  top: 150%;
  left: 0;
  color: var(--nereida-button-hover-text);
  transform: skewY(8deg);
  transform-origin: left center;
  transition: transform 1.2s var(--nereida-button-ease-out);
}

@media (pointer: fine) {
  .n-nav-link:hover::after {
    background: var(--nereida-button-hover-border);
    transform: scaleX(1);
  }

  .n-nav-link:hover .n-nav-link__text span {
    transform: translateY(-150%) skewY(4deg);
  }

  .n-nav-link:hover .n-nav-link__text span::after {
    transform: skewY(-4deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .n-btn-primary,
  .n-btn-primary *,
  .n-nav-link,
  .n-nav-link * {
    transition: none !important;
    animation: none !important;
  }
}

/* Keep widget controls authoritative when legacy child styles also exist. */
.elementor-widget-nereida-button .nereida-button-wrapper .n-btn-primary {
  color: var(--nereida-button-text);
  background: var(--nereida-button-bg);
}

.elementor-widget-nereida-button .nereida-button-wrapper .n-btn-primary .n-btn-primary__border {
  border: 1px solid var(--nereida-button-border);
}

.elementor-widget-nereida-button .nereida-button-wrapper .n-btn-primary .n-btn-primary__ripple span {
  background: var(--nereida-button-hover-bg);
}

.elementor-widget-nereida-button .nereida-button-wrapper .n-btn-primary .n-btn-primary__text span::after {
  color: var(--nereida-button-hover-text);
}

@media (pointer: fine) {
  .elementor-widget-nereida-button .nereida-button-wrapper .n-btn-primary:hover .n-btn-primary__border {
    border-color: var(--nereida-button-hover-border);
  }
}

.elementor-widget-nereida-button .nereida-button-wrapper .n-nav-link {
  color: var(--nereida-button-text);
  background: var(--nereida-button-bg);
}

.elementor-widget-nereida-button .nereida-button-wrapper .n-nav-link::after {
  background: var(--nereida-button-border);
}

.elementor-widget-nereida-button .nereida-button-wrapper .n-nav-link .n-nav-link__text span::after {
  color: var(--nereida-button-hover-text);
}

@media (pointer: fine) {
  .elementor-widget-nereida-button .nereida-button-wrapper .n-nav-link:hover::after {
    background: var(--nereida-button-hover-border);
  }
}