/* ============================================================
   ElementsKit Widget Builder  ->  CSS TAB

   Har badalne wali cheez upar variables me hai — agle step me
   Elementor ke Color controls seedha inhi par map honge:

     --ekbtn-color        text ka normal color
     --ekbtn-color-hover  text ka hover color
     --ekbtn-line         border/line ka normal color
     --ekbtn-line-hover   border/line ka hover color

   Sab kuch .ekbtn ke andar scoped hai — page ke baaki elements
   par koi asar nahi. Theme ke a/button styles ko harane ke liye
   zaroori jagah !important laga hai.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');

.ekbtn-wrap { display: block; }

.ekbtn {
  /* ---- yeh 4 values controls se aayengi ---- */
  --ekbtn-color:       rgba(236,228,215,.75);
  --ekbtn-color-hover: #ece4d7;
  --ekbtn-line:        rgba(236,228,215,.35);
  --ekbtn-line-hover:  #ece4d7;

  /* ---- yeh bhi controls se aa sakti hain (baad me) ---- */
  --ekbtn-width:   360px;
  --ekbtn-size:    12px;
  --ekbtn-spacing: .22em;
  --ekbtn-gap:     18px;    /* text aur line ke beech ka faasla */
  --ekbtn-shift:   10px;    /* hover par arrow kitna aage jaye  */

  --ekbtn-font: 'Termina', 'Inter', system-ui, -apple-system, sans-serif;
  --ekbtn-ease: cubic-bezier(.22, 1, .36, 1);

  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 24px;

  width: 100%;
  max-width: var(--ekbtn-width, 360px);
  padding: 0 0 var(--ekbtn-gap, 18px) !important;
  margin: 0;

  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  cursor: pointer;

  font-family: var(--ekbtn-font) !important;
  font-size: var(--ekbtn-size, 12px) !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: var(--ekbtn-spacing) !important;
  text-transform: uppercase !important;
  color: var(--ekbtn-color, rgba(236,228,215,.75)) !important;

  transition: color .5s var(--ekbtn-ease);
}

.ekbtn:hover,
.ekbtn:focus,
.ekbtn:focus-visible,
.ekbtn.is-touched {
  color: var(--ekbtn-color-hover, #ece4d7) !important;
  background: transparent !important;
  outline: none !important;
}

/* ---------- label ---------- */
.ekbtn__label { white-space: nowrap; }

/* ---------- arrow ---------- */
.ekbtn__icon {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  transition: transform .5s var(--ekbtn-ease);
}
.ekbtn__icon svg {
  width: 26px;
  height: 10px;
  display: block;
  fill: none !important;
}
.ekbtn__icon svg path {
  fill: none !important;
  stroke: currentColor !important;
}

.ekbtn:hover .ekbtn__icon,
.ekbtn:focus-visible .ekbtn__icon,
.ekbtn.is-touched .ekbtn__icon { transform: translateX(var(--ekbtn-shift, 10px)); }

/* ---------- bottom line ----------
   ::before = hamesha dikhne wali halki line
   ::after  = hover par left se right wipe hone wali line */
.ekbtn__line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  overflow: hidden;
}
.ekbtn__line::before,
.ekbtn__line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
}
.ekbtn__line::before { background: var(--ekbtn-line, rgba(236,228,215,.35)); }
.ekbtn__line::after {
  background: var(--ekbtn-line-hover, #ece4d7);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .6s var(--ekbtn-ease);
}

.ekbtn:hover .ekbtn__line::after,
.ekbtn:focus-visible .ekbtn__line::after,
.ekbtn.is-touched .ekbtn__line::after { transform: scaleX(1); }

/* ---------- responsive ---------- */
@media (max-width: 600px) {
  .ekbtn {
    max-width: 100%;
    --ekbtn-size: 11px;
    --ekbtn-spacing: .18em;
    --ekbtn-gap: 14px;
    gap: 16px;
  }
  .ekbtn__label { white-space: normal; }
}