/**
 * EDS Modern Button — Styles
 * All hover effects use only ::before / ::after — zero extra DOM.
 * Classes use consistent eds-btn prefix.
 * eDesign Space · https://edesignspace.com/
 */

/* ── Custom Properties — overridden per-instance via Elementor selectors ─── */
.eds-btn {
  --eds-btn-fx    : #6366f1;
  --eds-btn-speed : 0.35s;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
.eds-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  font-family: inherit;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  vertical-align: middle;
  background: var(--e-global-color-accent, #6366f1);
  color: #fff;
  padding: 14px 28px;
  font-size: 1rem;
  border-radius: 6px;
  transition:
    color        var(--eds-btn-speed) ease,
    background   var(--eds-btn-speed) ease,
    border-color var(--eds-btn-speed) ease,
    box-shadow   var(--eds-btn-speed) ease,
    transform    var(--eds-btn-speed) ease;
  z-index: 0;
}

.eds-btn:hover,
.eds-btn:focus { text-decoration: none; }

.eds-btn:focus-visible {
  outline: 3px solid var(--eds-btn-fx);
  outline-offset: 3px;
}

/* Base ::before — clip-able pseudo for fill sweeps */
.eds-btn::before {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: inherit;
  transition: transform var(--eds-btn-speed) ease,
              opacity   var(--eds-btn-speed) ease;
}

/* ── Sizes ────────────────────────────────────────────────────────────────── */
.eds-btn--xs { padding: 8px  16px; font-size: 0.78rem; }
.eds-btn--sm { padding: 10px 20px; font-size: 0.875rem; }
.eds-btn--md { padding: 14px 28px; font-size: 1rem;     }
.eds-btn--lg { padding: 17px 36px; font-size: 1.125rem; }
.eds-btn--xl { padding: 20px 48px; font-size: 1.25rem;  }

/* ── Icon ─────────────────────────────────────────────────────────────────── */
.eds-btn__icon {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* Elementor SVG icons have no intrinsic size — set a sensible default */
.eds-btn__icon svg,
.eds-btn__icon .e-font-icon-svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
  display: block;
}

/* ── Label ────────────────────────────────────────────────────────────────── */
.eds-btn__label {
  position: relative;
  z-index: 1;
}

/* ════════════════════════════════════════════════════════════════════════════
   HOVER EFFECTS — all ::before / ::after only
════════════════════════════════════════════════════════════════════════════ */

/* ── Fill Left → Right ───────────────────────────────────────────────────── */
.eds-btn--fx-fill-left::before {
  inset: 0;
  background: var(--eds-btn-fx);
  transform: scaleX(0);
  transform-origin: left center;
}
.eds-btn--fx-fill-left:hover::before { transform: scaleX(1); }

/* ── Fill Right → Left ───────────────────────────────────────────────────── */
.eds-btn--fx-fill-right::before {
  inset: 0;
  background: var(--eds-btn-fx);
  transform: scaleX(0);
  transform-origin: right center;
}
.eds-btn--fx-fill-right:hover::before { transform: scaleX(1); }

/* ── Fill Bottom → Top ───────────────────────────────────────────────────── */
.eds-btn--fx-fill-up::before {
  inset: 0;
  background: var(--eds-btn-fx);
  transform: scaleY(0);
  transform-origin: center bottom;
}
.eds-btn--fx-fill-up:hover::before { transform: scaleY(1); }

/* ── Fill Top → Bottom ───────────────────────────────────────────────────── */
.eds-btn--fx-fill-down::before {
  inset: 0;
  background: var(--eds-btn-fx);
  transform: scaleY(0);
  transform-origin: center top;
}
.eds-btn--fx-fill-down:hover::before { transform: scaleY(1); }

/* ── Fill Expand from Center ─────────────────────────────────────────────── */
.eds-btn--fx-fill-center::before {
  inset: 0;
  background: var(--eds-btn-fx);
  transform: scale(0);
  border-radius: 50%;
  transition: transform var(--eds-btn-speed) ease,
              border-radius var(--eds-btn-speed) ease;
}
.eds-btn--fx-fill-center:hover::before {
  transform: scale(2.5);
  border-radius: inherit;
}

/* ── Radial Ripple — JS injects .eds-btn__ripple at click coords ──────────── */
.eds-btn--fx-fill-radial { overflow: hidden; }

.eds-btn__ripple {
  position: absolute;
  border-radius: 50%;
  background: var(--eds-btn-fx);
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  animation: eds-btn-ripple 0.6s ease-out forwards;
}

@keyframes eds-btn-ripple {
  to { width: 400px; height: 400px; opacity: 0; }
}

/* ── Border Draw ──────────────────────────────────────────────────────────── */
.eds-btn--fx-border-draw { overflow: visible; }

.eds-btn--fx-border-draw::before,
.eds-btn--fx-border-draw::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--eds-btn-fx);
  border-radius: inherit;
  transition: transform var(--eds-btn-speed) ease;
}
.eds-btn--fx-border-draw::before {
  border-bottom-color: transparent;
  border-right-color: transparent;
  transform: scale(0, 1);
  transform-origin: left;
}
.eds-btn--fx-border-draw::after {
  border-top-color: transparent;
  border-left-color: transparent;
  transform: scale(1, 0);
  transform-origin: bottom;
}
.eds-btn--fx-border-draw:hover::before,
.eds-btn--fx-border-draw:hover::after { transform: scale(1, 1); }

/* ── Border Flip Inward ──────────────────────────────────────────────────── */
.eds-btn--fx-border-flip {
  overflow: visible;
  box-shadow: inset 0 0 0 0 var(--eds-btn-fx);
  transition: box-shadow var(--eds-btn-speed) ease,
              color var(--eds-btn-speed) ease;
}
.eds-btn--fx-border-flip:hover {
  box-shadow: inset 0 0 0 2px var(--eds-btn-fx);
}

/* ── Lift ─────────────────────────────────────────────────────────────────── */
.eds-btn--fx-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px rgba(0,0,0,0.18);
}

/* ── Press ────────────────────────────────────────────────────────────────── */
.eds-btn--fx-press:hover {
  transform: translateY(2px) scale(0.97);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* ── Skew Slide ───────────────────────────────────────────────────────────── */
.eds-btn--fx-skew::before {
  inset: 0;
  background: var(--eds-btn-fx);
  transform: skewX(-18deg) scaleX(0);
  transform-origin: left;
}
.eds-btn--fx-skew:hover { transform: skewX(-4deg); }
.eds-btn--fx-skew:hover::before { transform: skewX(-18deg) scaleX(1); }

/* ── Underline Slide In ───────────────────────────────────────────────────── */
.eds-btn--fx-underline { overflow: visible; }
.eds-btn--fx-underline::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 4px;
  width: 0; height: 2px;
  background: var(--eds-btn-fx);
  border-radius: 2px;
  transition: width var(--eds-btn-speed) ease, left var(--eds-btn-speed) ease;
}
.eds-btn--fx-underline:hover::after { width: 80%; left: 10%; }

/* ── Strikethrough ────────────────────────────────────────────────────────── */
.eds-btn--fx-strike { overflow: visible; }
.eds-btn--fx-strike::after {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 0; height: 2px;
  background: var(--eds-btn-fx);
  border-radius: 2px;
  transition: width var(--eds-btn-speed) ease;
}
.eds-btn--fx-strike:hover::after { width: 100%; }

/* ── Shimmer Sweep ────────────────────────────────────────────────────────── */
.eds-btn--fx-shimmer::before {
  top: 0; left: -80%; bottom: 0; width: 50%;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.45) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-18deg);
  opacity: 0;
  transition: none;
}
.eds-btn--fx-shimmer:hover::before {
  left: 150%; opacity: 1;
  transition: left calc(var(--eds-btn-speed) * 1.5) ease, opacity 0.1s;
}

/* ── Glitch Flash ─────────────────────────────────────────────────────────── */
@keyframes eds-btn-glitch {
  0%,100% { clip-path: inset(0 0 100% 0); transform: translate(0); }
  10%  { clip-path: inset(20% 0 40% 0); transform: translate(-3px,  1px); }
  20%  { clip-path: inset(50% 0 20% 0); transform: translate( 3px, -1px); }
  30%  { clip-path: inset(10% 0 60% 0); transform: translate(-2px,  2px); }
  40%  { clip-path: inset(70% 0 10% 0); transform: translate( 2px,  0);   }
  50%  { clip-path: inset(0   0 0   0); transform: translate(0);          }
}

.eds-btn--fx-glitch::before,
.eds-btn--fx-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: inherit;
  font: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}
.eds-btn--fx-glitch::before { color: #0ff; }
.eds-btn--fx-glitch::after  { color: #f0f; }
.eds-btn--fx-glitch:hover::before {
  opacity: 0.7;
  animation: eds-btn-glitch 0.4s steps(1) infinite;
}
.eds-btn--fx-glitch:hover::after {
  opacity: 0.7;
  animation: eds-btn-glitch 0.4s steps(1) 0.1s infinite reverse;
}