:root{
  --vl24-radius:8px; /* sama mis CTA */
}

/* =========================================
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);
  }

}

/* =========================================
VL24 BUTTON — PRIMARY GOLD (ROCKET)
========================================= */

.vl24-btn--light{
  background:var(--vl24-gold-metal);
  color:#111;
  border:none;

  box-shadow:
    0 8px 24px rgba(184,146,62,.25),
    inset 0 1px 0 rgba(255,255,255,.35);
}

/* icon ring */
.vl24-btn--light .vl24-btn__icon{
  background:#fff;
  color:#111;
}

/* eemaldame arrow stroke */
.vl24-btn--light .vl24-btn__icon svg{
  display:none;
}

/* ROCKET SVG */
.vl24-btn--light .vl24-btn__icon::before{
  content:"";
  width:18px;
  height:18px;

  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 20c2-1 4-1 6-3l-3-3c-2 2-2 4-3 6z'/%3E%3Cpath d='M14 10l-4-4a8 8 0 0 1 10-2 8 8 0 0 1-2 10z'/%3E%3Cline x1='14' y1='10' x2='10' y2='14'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* =========================================
VL24 BUTTON — SKELETON GOLD (CART FINAL)
gold ring + dark cart inside
========================================= */

.vl24-btn--dark{
  background:transparent;
  color:var(--gold-3);
  border:1px solid var(--gold-3);
}

/* ICON RING — GOLD BACKGROUND */
.vl24-btn--dark .vl24-btn__icon{
  background:var(--vl24-gold-metal);
  border:none;
  color:#111;
}

/* eemaldame vana arrow */
.vl24-btn--dark .vl24-btn__icon svg{
  display:none;
}

/* CART SVG — DARK INSIDE GOLD RING */
.vl24-btn--dark .vl24-btn__icon::before{
  content:"";
  width:18px;
  height:18px;

  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.6 13.4a2 2 0 0 0 2 1.6h9.4a2 2 0 0 0 2-1.6L23 6H6'/%3E%3C/svg%3E") center/contain no-repeat;
}



/* =========================================
VL24 BUTTON — SAME RADIUS SYSTEM AS CTA
========================================= */

/* nupu raam */
.vl24-btn{
  border-radius:var(--vl24-radius);
}

/* icon container (ring → rounded square) */
.vl24-btn__icon{
  border-radius:var(--vl24-radius);
}

/* skeleton / dark variant */
.vl24-btn--dark{
  border-radius:var(--vl24-radius);
}

/* primary variant */
.vl24-btn--light{
  border-radius:var(--vl24-radius);
}

/* =========================================
VL24 BUTTON — RIPPLE FILL SYSTEM
========================================= */

.vl24-btn{
  position:relative;
  overflow:hidden;
  z-index:1;
}

/* ripple layer */
.vl24-btn::before{
  content:"";
  position:absolute;

  left:var(--ripple-x,50%);
  top:var(--ripple-y,50%);

  width:0;
  height:0;

  border-radius:50%;
  transform:translate(-50%,-50%);

  background:var(--vl24-gold-metal);

  opacity:.9;
  transition:
    width 2.8s cubic-bezier(.22,1,.36,1),
    height 2.8s cubic-bezier(.22,1,.36,1);

  z-index:-1;
}

/* DESKTOP hover */
.vl24-btn.vl24-hover::before{
  width:420px;
  height:420px;
}

/* MOBILE click */
.vl24-btn.vl24-click::before{
  width:420px; 
  height:420px;
}

/* text muutub tumedaks */
.vl24-btn.vl24-hover,
.vl24-btn.vl24-click{
  color:#111 !important;
}

/* =========================================
VL24 ICON — ENERGY CHARGE EFFECT
========================================= */

.vl24-btn__icon{
  transition:
    transform .4s cubic-bezier(.22,1,.36,1),
    box-shadow .4s ease;
}

/* glow ring */
.vl24-btn.vl24-hover .vl24-btn__icon{
  box-shadow:
    0 0 22px rgba(184,146,62,.6),
    0 0 45px rgba(184,146,62,.35);
}


/* ===== ROCKET (primary button) ===== */
/* lisa klass vl24-btn--rocket kui tahad spetsiifiliselt */

.vl24-btn.vl24-hover .vl24-btn__icon svg{
  animation:vl24EnergyRocket .7s cubic-bezier(.22,1,.36,1);
}

/* rocket micro launch */
@keyframes vl24EnergyRocket{

  0%{
    transform:translateY(0) scale(1);
  }

  25%{
    transform:translateY(-6px) scale(1.08);
  }

  50%{
    transform:translateY(-4px) scale(1.05);
  }

  100%{
    transform:translateY(0) scale(1);
  }

}


/* ===== CART ENERGY ===== */
/* lisa klass vl24-btn--cart */

.vl24-btn--cart.vl24-hover .vl24-btn__icon svg{
  animation:vl24EnergyCart .7s cubic-bezier(.22,1,.36,1);
}

@keyframes vl24EnergyCart{

  0%{
    transform:translateX(0);
  }

  30%{
    transform:translateX(6px);
  }

  60%{
    transform:translateX(3px);
  }

  100%{
    transform:translateX(0);
  }

}

/* =========================================
PRIMARY → SKELETON ON HOVER
(hoiab ripple efekti alles)
========================================= */

/* icon ring kuldseks */
.vl24-btn--light.vl24-hover .vl24-btn__icon{
  background:var(--vl24-gold-metal);
  color:#111;
}

/* =====================================================
VL24 BUTTON — NO INSTANT BACKGROUND CHANGE
Only ripple paints the button
===================================================== */

.vl24-btn--dark:hover .vl24-btn__icon{
  background:var(--vl24-gold-metal) !important; /* jääb kuldne ring */
  color:#111 !important;
}

/* 2) Tapame PRIMARY (light) instant hover state */
.vl24-btn--light.vl24-hover,
.vl24-btn--light.vl24-click{
  background:var(--vl24-gold-metal) !important; /* jääb algne kuld */
  color:#111 !important;
  border:none !important;
  box-shadow:
    0 8px 24px rgba(184,146,62,.25),
    inset 0 1px 0 rgba(255,255,255,.35);
}

/* =====================================================
RIPPLE COLOR PER BUTTON TYPE
- light: skeleton/glass spreads from pointer
- dark: gold spreads from pointer
===================================================== */

.vl24-btn{ --vl24-ripple-bg: var(--vl24-gold-metal); }

/* ripple layer uses variable */
.vl24-btn::before{
  background:var(--vl24-ripple-bg) !important;
}

/* PRIMARY: ripple = skeleton glass (NOT gold) */
.vl24-btn--light{ --vl24-ripple-bg: rgba(255,255,255,.12); }

/* DARK: ripple = gold metal */
.vl24-btn--dark{ --vl24-ripple-bg: var(--vl24-gold-metal); }

/* =====================================================
TEXT COLOR CHANGE ONLY WHEN RIPPLE ACTIVE
(no instant switch)
===================================================== */

/* primary: kui skeleton levib, text jääb kuldne */
.vl24-btn--light.vl24-hover,
.vl24-btn--light.vl24-click{
  color:#111 !important; /* kuldse baasi peal sobib */
}

/* dark: kui gold levib, text läheb tumedaks (aga ainult ripple ajal) */
.vl24-btn--dark.vl24-hover,
.vl24-btn--dark.vl24-click{
  color:#111 !important;
  border-color:transparent !important; /* näeb clean välja kui ripple täidab */
}

/* E-POOD (dark) — hover: icon bg white */
@media (hover:hover){
  .vl24-btn--dark:hover .vl24-btn__icon{
    background:#fff !important;
  }
}

@media (hover:none){
  .vl24-btn--dark:active .vl24-btn__icon{
    background:#fff !important;
  }
}

/* PRIMARY → hover = same as EPOOD skeleton */
@media (hover:hover){

  .vl24-btn--light:hover{
    background:transparent !important;
    border:1px solid var(--gold-3) !important;
    color:var(--gold-3) !important;
    box-shadow:none !important;
  }

  /* icon ring kuldseks */
  .vl24-btn--light:hover .vl24-btn__icon{
    background:var(--vl24-gold-metal) !important;
    color:#111 !important;
  }

}

/* =====================================================
ENERGY CHARGE — ROCKET + CART
===================================================== */

/* shared energy glow */
.vl24-btn.vl24-hover .vl24-btn__icon{
  box-shadow:
    0 0 18px rgba(184,146,62,.6),
    0 0 40px rgba(184,146,62,.35);
}

/* =========================================
ROCKET USES SAME MOTION AS CART
========================================= */

.vl24-btn--light.vl24-hover .vl24-btn__icon{
  animation:vl24CartNudge .45s cubic-bezier(.22,1,.36,1);
}

.vl24-btn--light.vl24-hover .vl24-btn__icon::before{
  animation:vl24CartDrive .45s ease;
}

/* =====================================================
🛒 CART — WHEELS SPIN + NUDGE
===================================================== */

/* whole cart nudge */
.vl24-btn--dark.vl24-hover .vl24-btn__icon{
  animation:vl24CartNudge .45s cubic-bezier(.22,1,.36,1);
}

.vl24-btn--dark.vl24-hover .vl24-btn__icon::before{
  animation:vl24CartWheelBounce .25s linear 3;
}

/* forward push */
@keyframes vl24CartNudge{
  0%{ transform:translateY(-50%) translateX(0); }
  40%{ transform:translateY(-50%) translateX(6px); }
  70%{ transform:translateY(-50%) translateX(3px); }
  100%{ transform:translateY(-50%) translateX(0); }
}

/* ===== PATCH — CART REAL MOTION ===== */

/* container shake + forward push */
@keyframes vl24CartNudge{

  0%{
    transform:translateY(-50%) translateX(0);
  }

  15%{
    transform:translateY(-52%) translateX(2px);
  }

  30%{
    transform:translateY(-48%) translateX(6px);
  }

  45%{
    transform:translateY(-52%) translateX(10px);
  }

  60%{
    transform:translateY(-48%) translateX(6px);
  }

  75%{
    transform:translateY(-51%) translateX(3px);
  }

  100%{
    transform:translateY(-50%) translateX(0);
  }
}


/* wheel bounce illusion (MITTE rotate) */
@keyframes vl24CartWheelBounce{

  0%{ transform:translateY(0); }
  25%{ transform:translateY(1px); }
  50%{ transform:translateY(-1px); }
  75%{ transform:translateY(1px); }
  100%{ transform:translateY(0); }

}

/* =====================================================
VL24 ENERGY SHAKE — FINAL PATCH
container shake + icon scale + rocket flame + cart wobble
===================================================== */


/* ===== 1️⃣ ICON BOX SHAKE (mõlemale) ===== */

.vl24-btn.vl24-hover .vl24-btn__icon{
  animation:vl24EnergyBoxShake .45s cubic-bezier(.36,.07,.19,.97);
}

@keyframes vl24EnergyBoxShake{
  0%   { transform:translateY(-50%) translateX(0) scale(1); }
  20%  { transform:translateY(-50%) translateX(-2px) scale(1.08); }
  40%  { transform:translateY(-50%) translateX(2px) scale(1.08); }
  60%  { transform:translateY(-50%) translateX(-2px) scale(1.06); }
  80%  { transform:translateY(-50%) translateX(2px) scale(1.04); }
  100% { transform:translateY(-50%) translateX(0) scale(1); }
}


/* ===== 3️⃣ CART — wobble like driving ===== */

.vl24-btn--dark.vl24-hover .vl24-btn__icon::before{
  animation:vl24CartDrive .45s ease;
}

@keyframes vl24CartDrive{
  0%   { transform:translateX(0) rotate(0deg); }
  20%  { transform:translateX(2px) rotate(6deg); }
  40%  { transform:translateX(-2px) rotate(-6deg); }
  60%  { transform:translateX(2px) rotate(4deg); }
  80%  { transform:translateX(-1px) rotate(-3deg); }
  100% { transform:translateX(0) rotate(0deg); }
}

/* =========================================
VL24 BUTTON — GLOBAL RESPONSIVE SYSTEM
mõjutab kõiki .vl24-btn nuppe kogu saidil
========================================= */

/* ===== LARGE DESKTOP ===== */

@media (max-width:1400px){

  .vl24-btn{
    min-height:52px;
    padding:8px 60px 8px 26px;
    font-size:14px;
  }

  .vl24-btn__icon{
    width:42px;
    height:42px;
  }

}


/* ===== LAPTOP ===== */

@media (max-width:1200px){

  .vl24-btn{
    min-height:50px;
    padding:8px 56px 8px 24px;
    font-size:14px;
  }

  .vl24-btn__icon{
    width:40px;
    height:40px;
    right:7px;
  }

}


/* ===== TABLET ===== */

@media (max-width:900px){

  .vl24-btn{
    min-height:46px;
    padding:7px 50px 7px 22px;
    font-size:13px;
  }

  .vl24-btn__icon{
    width:36px;
    height:36px;
    right:6px;
  }

  .vl24-btn__icon::before{
    width:16px;
    height:16px;
  }

}


/* ===== MOBILE ===== */

@media (max-width:640px){

  .vl24-btn{
    min-height:42px;
    padding:6px 46px 6px 18px;
    font-size:13px;
  }

  .vl24-btn__icon{
    width:34px;
    height:34px;
    right:6px;
  }

  .vl24-btn__icon::before{
    width:15px;
    height:15px;
  }

}


/* ===== SMALL MOBILE ===== */

@media (max-width:420px){

  .vl24-btn{
    min-height:40px;
    padding:6px 42px 6px 16px;
    font-size:12px;
  }

  .vl24-btn__icon{
    width:32px;
    height:32px;
  }

}