/* =========================================
VL24 BUTTON — FINAL DEMO STRUCTURE
text grows / icon locked right
========================================= */

.vl24-btn{
  position:relative;
  display:inline-flex;
  align-items:center;

  min-height:56px;

  /* ⭐ reserveeri iconile ala */
  padding:8px 64px 8px 28px;

  border-radius:999px;
  border:2px solid transparent;

  font-family:Montserrat,sans-serif;
  font-weight:600;
  font-size:15px;

  text-decoration:none !important;
  white-space:nowrap;
}


/* TEXT — ei lähe iconi alla */
.vl24-btn__text{
  display:block;
}


/* ICON — ALATI PAREMAS SERVAS */
.vl24-btn__icon{
  position:absolute;
  right:8px;          /* ⭐ edge lock */
  top:50%;
  transform:translateY(-50%);

  width:46px;
  height:46px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;
  flex-shrink:0;
}


/* ARROW */
.vl24-btn__icon svg{
  width:14px;
  height:14px;
  stroke:currentColor;
  stroke-width:2.2;
  fill:none;
  transform:rotate(-45deg);
}


/* PRIMARY */
.vl24-btn--light{
  background:var(--brand-primary);
  color:#111;
}

.vl24-btn--light .vl24-btn__icon{
  background:#fff;
  color:#111;
}


/* SECONDARY */
.vl24-btn--dark{
  background:#fff;
  color:#111;
}

.vl24-btn--dark .vl24-btn__icon{
  background:var(--brand-primary);
  color:#111;
}

/* ⭐ TEKST EI SAA MINNA RINGI ALLA */
.vl24-btn__text{
  display:block;
  padding-right:6px; /* peab olema suurem kui icon + offset */
}

/* =========================================
VL24 BUTTON — ICON ANIMATION SYSTEM
ei muuda layouti / ainult icon
========================================= */

/* icon wrapper smooth */
.vl24-btn__icon{
  transition:transform .3s ease;
}

/* arrow smooth */
.vl24-btn__icon svg{
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}


/* =========================
DESKTOP — hover spin
========================= */

@media (hover:hover){

  .vl24-btn:hover .vl24-btn__icon svg{
    animation:vl24ArrowSpin 1s linear infinite;
  }

}

@keyframes vl24ArrowSpin{
  from{ transform:rotate(-45deg); }
  to{ transform:rotate(315deg); }
}


/* =========================================
VL24 BUTTON — MOBILE ICON ATTENTION
sama loogika nagu header CTA pulse
ainult ring liigub
ei muuda layouti
========================================= */

@media (hover:none){

  .vl24-btn__icon{
    animation:vl24IconPulse 5s ease-in-out infinite;
    transform-origin:center;
  }

}

/* sama timing feel nagu header */
@keyframes vl24IconPulse{

  0%{
    transform:translateY(-50%) scale(1) rotate(0deg);
    box-shadow:0 0 0 rgba(212,225,87,0);
  }

  4%{
    transform:translateY(-50%) scale(1.12) rotate(-8deg);
    box-shadow:0 0 18px rgba(212,225,87,.6);
  }

  8%{
    transform:translateY(-50%) scale(1.12) rotate(8deg);
  }

  12%{
    transform:translateY(-50%) scale(1) rotate(0deg);
    box-shadow:0 0 0 rgba(212,225,87,0);
  }

  100%{
    transform:translateY(-50%) scale(1) rotate(0deg);
  }

}