:root{
  --cta-color:#E30009;           /* aangepaste kleur */
  --cta-size:56px;
  --cta-gap:12px;
  --icon-size:26px;

  /* schaduwen en effecten */
  --shadow-base:0 8px 20px rgba(0,0,0,.18);
  --shadow-hover:0 12px 28px rgba(0,0,0,.24);

  /* gloedkleur bij hover – afgestemd op #E30009 */
  --glow: rgba(227, 0, 9, .35);
}

/* basis lay-out */
.cta-stack{
  position:fixed;
  right:80px;                    /* 25px meer naar links t.o.v. 20px */
  bottom:70px;
  z-index:9999;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--cta-gap);
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

/* button */
.cta-btn{
  position:relative;
  width:var(--cta-size);
  height:var(--cta-size);
  border-radius:50%;
  background:var(--cta-color);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-base);
  cursor:pointer;
  border:0;
  text-decoration:none;          /* geen onderstreping standaard */
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease;
  outline:1px solid rgba(255,255,255,.6);
  outline-offset:-1px;
  will-change: transform;
}

/* verwijder eventuele underline bij alle states */
.cta-btn,
.cta-btn:hover,
.cta-btn:focus,
.cta-btn:active{
  text-decoration:none !important;
}

/* iconen via Tabler webfont */
.cta-btn .ti{
  font-size:var(--icon-size);
  line-height:1;
  display:inline-block;
}

/* gloed en puls */
.cta-btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  box-shadow:0 0 0 0 var(--glow);
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease;
}

/* hover focus effecten */
.cta-btn:hover,
.cta-btn:focus-visible{
  transform:translateY(-2px) scale(1.06);
  box-shadow:var(--shadow-hover);
  filter:brightness(1.04);
}
.cta-btn:hover::after,
.cta-btn:focus-visible::after{
  opacity:1;
  animation:pulse 1.2s ease-out forwards;
}

@keyframes pulse{
  0%   { box-shadow:0 0 0 0 var(--glow); }
  70%  { box-shadow:0 0 0 12px rgba(227, 0, 9, 0); }
  100% { box-shadow:0 0 0 0 rgba(227, 0, 9, 0); }
}

/* animatie bij openen stack */
.cta-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--cta-gap);
}
.cta-actions .cta-btn{
  opacity:0;
  transform:translateY(6px) scale(.98);
}
.cta-stack.open .cta-actions .cta-btn{
  opacity:1;
  transform:none;
  transition:transform .14s, opacity .14s;
}
.cta-actions .cta-btn:nth-child(2){ transition-delay:.04s; }
.cta-actions .cta-btn:nth-child(3){ transition-delay:.08s; }
.cta-actions .cta-btn:nth-child(4){ transition-delay:.12s; }

/* toggle wissel (wordt door JS als class op de toggle gebruikt) */
.cta-toggle .icon-open{ display:block; }
.cta-toggle .icon-close{ display:none; }
.cta-stack.open .cta-toggle .icon-open{ display:none; }
.cta-stack.open .cta-toggle .icon-close{ display:block; }

/* accessibility */
.cta-btn:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}

/* reduce motion respecteren */
@media (prefers-reduced-motion: reduce){
  .cta-btn,
  .cta-actions .cta-btn{
    transition:none;
  }
  .cta-btn:hover,
  .cta-btn:focus-visible{
    transform:none;
    box-shadow:var(--shadow-base);
    filter:none;
  }
  .cta-btn::after{
    animation:none !important;
  }
}

/* mobiel marge */
@media (max-width:480px){
  .cta-stack{
    right:39px;                  /* ook hier 25px extra t.o.v. vorige 14px */
    bottom:54px;
  }
}

/* --- Mobiele positie (25px meer naar links, 40px omhoog) --- */
@media (max-width:480px){
  .cta-stack{
    right:39px;  /* 14 + 25 */
    bottom:54px; /* 14 + 40 */
  }
}

/* --- Forceer hover op desktop en tik-effect op touch --- */
.cta-stack .cta-btn { isolation: isolate; }

@media (hover: hover){
  .cta-stack .cta-btn:hover,
  .cta-stack .cta-btn:focus-visible{
    transform: translateY(-3px) scale(1.08) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.28) !important;
    filter: brightness(1.06) !important;
  }
  .cta-stack .cta-btn:hover::after,
  .cta-stack .cta-btn:focus-visible::after{
    opacity: 1 !important;
    animation: pulse 1.2s ease-out forwards !important;
  }
}

@media (hover: none){
  .cta-stack .cta-btn:active{
    transform: translateY(-3px) scale(1.08) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.28) !important;
    filter: brightness(1.06) !important;
  }
  .cta-stack .cta-btn:active::after{
    opacity: 1 !important;
    animation: pulse 1.2s ease-out forwards !important;
  }
}

/* Reduce-motion: minimale animatie behouden voor dit component */
@media (prefers-reduced-motion: reduce){
  .cta-stack .cta-btn,
  .cta-stack .cta-actions .cta-btn{
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
  }
}