/* va-sticky.css — White bars + blue text + animated icons */

:root{
  --va-bg: #101a3b;   /* jouw blauw (komt uit PHP setting) */
  --va-btn:#b6861f;   /* goud (komt uit PHP setting) */
  --va-gold:#b6861f;

  --va-white:#fff;
  --va-ink:#0d0f18;

  --va-shadow: 0 18px 60px rgba(0,0,0,.18);
  --va-radius: 16px;
  --va-border: rgba(13,15,24,.12);
  --va-soft: rgba(16,26,59,.06);
}

.va-wrap{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.va-wrap *{ box-sizing:border-box; }

.va-wrap{
  position: fixed;
  right: 16px;
  top: 160px;
  z-index: 999999;

  width: 270px;
  display:flex;
  flex-direction:column;
  gap: 10px;

  transform:none !important;
  filter:none !important;
}

/* ===== BALKEN: WIT + BLAUW ===== */
.va-tab{
  width: 100%;
  border: 1px solid var(--va-border);
  border-radius: var(--va-radius);

  background: #fff;                 /* ✅ wit */
  color: var(--va-bg);              /* ✅ blauw tekst */

  box-shadow: var(--va-shadow);
  padding: 11px 12px;
  cursor: pointer;
  text-decoration: none;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;

  font-weight: 900;
  font-size: 13.5px;
  letter-spacing: .2px;
}

.va-tab:hover{
  box-shadow: 0 22px 70px rgba(0,0,0,.20);
  border-color: rgba(16,26,59,.20);
  background: linear-gradient(0deg, var(--va-soft), #fff);
}

.va-left{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
}

.va-label{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Icon bubble */
.va-ico{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:grid;
  place-items:center;

  background: rgba(16,26,59,.06);
  border: 1px solid rgba(16,26,59,.12);

  color: var(--va-btn); /* ✅ goud icoon */
  flex: 0 0 auto;
}

/* Right-side micro buttons (chevron / external) */
.va-chev, .va-ext{
  color: var(--va-bg);
  display:grid;
  place-items:center;
  width: 34px;
  height: 34px;
  border-radius: 12px;

  border: 1px solid rgba(16,26,59,.12);
  background: rgba(16,26,59,.04);
  flex: 0 0 auto;
}

.va-wrap.open .va-chev{
  transform: rotate(180deg);
}

/* ===== PANEL ===== */
.va-panel{
  display:none;
  background:#fff;
  border: 1px solid rgba(13,15,24,.12);
  border-radius: var(--va-radius);
  box-shadow: var(--va-shadow);
  overflow:hidden;
}

.va-wrap.open .va-panel{ display:block; }

.va-head{
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(13,15,24,.10);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}

.va-head h4{ margin:0; font-size:15px; line-height:1.2; color: var(--va-ink); }
.va-head p{ margin:6px 0 0; font-size:12.5px; line-height:1.35; color: rgba(13,15,24,.62); }

.va-x{
  border: 1px solid rgba(13,15,24,.12);
  background: #fff;
  color: rgba(13,15,24,.85);
  width: 34px; height: 34px;
  border-radius: 12px;
  cursor:pointer;
  font-size: 22px;
  line-height: 30px;
  padding:0;
}

.va-form{
  padding: 14px;
  display:grid;
  gap: 10px;
}

.va-form input[type="email"]{
  width:100%;
  border: 1px solid rgba(13,15,24,.14);
  border-radius: 14px;
  padding: 12px;
  font-size: 14px;
  outline:none;
}

.va-form input[type="email"]:focus{
  border-color: rgba(13,15,24,.28);
  box-shadow: 0 0 0 4px rgba(13,15,24,.06);
}

.va-form button{
  width:100%;
  border:0;
  border-radius: 14px;
  padding: 12px 14px;
  cursor:pointer;
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .2px;
  background: var(--va-btn);
  color: #101a3b;
}

.va-hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
}

/* Status */
.va-msg{
  display:none;
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.3;
  border: 1px solid rgba(13,15,24,.12);
  background: rgba(13,15,24,.04);
  color: rgba(13,15,24,.8);
}
.va-wrap.open .va-msg{ display:block; }
.va-msg.is-ok{ border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.10); color: rgba(15,82,35,.95); }
.va-msg.is-err{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.10); color: rgba(127,29,29,.95); }

/* ===== ICON ANIMATIES ===== */
/* Bell ring */
@keyframes va-bell-ring {
  0%{ transform: rotate(0deg); }
  10%{ transform: rotate(12deg); }
  20%{ transform: rotate(-12deg); }
  30%{ transform: rotate(10deg); }
  40%{ transform: rotate(-10deg); }
  50%{ transform: rotate(7deg); }
  60%{ transform: rotate(-7deg); }
  70%{ transform: rotate(4deg); }
  80%{ transform: rotate(-4deg); }
  100%{ transform: rotate(0deg); }
}

/* Arrow float up */
@keyframes va-arrow-up {
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-6px); }
}

/* Alleen als JS het activeert */
.va-wrap.is-bell-ringing #vaTab .va-ico svg{
  transform-origin: 50% 10%;
  animation: va-bell-ring 900ms ease-in-out 1;
}

.va-wrap.is-cv-bounce #vaCvLink .va-ext svg{
  animation: va-arrow-up 650ms ease-in-out 1;
}

/* Subtiele “idle” animaties (optioneel): alleen als niet reduced motion */
@media (prefers-reduced-motion: no-preference){
  /* wanneer ingeklapt: elke zoveel tijd een klein hintje */
  .va-wrap:not(.open) #vaTab .va-ico svg.va-idle-bell{
    transform-origin: 50% 10%;
    animation: va-bell-ring 1400ms ease-in-out 1;
    animation-delay: 1.2s;
  }
  .va-wrap:not(.open) #vaCvLink .va-ext svg.va-idle-up{
    animation: va-arrow-up 1100ms ease-in-out infinite;
    animation-delay: .6s;
  }
}

/* Mobile behavior (jouw bestaande): icon-only */
@media (max-width: 720px){
  .va-wrap{
    top: auto;
    bottom: 12px;
    right: 12px;
    width: auto;
    align-items: flex-end;
  }

  .va-tab{
    width: 56px;
    padding: 8px;
    justify-content:center;
  }

  .va-label{ display:none; }
  .va-chev, .va-ext{ display:none; }

  .va-tab.is-expanded{
    width: 240px;
    justify-content:space-between;
    padding: 10px 12px;
  }
  .va-tab.is-expanded .va-label{ display:block; }

  .va-panel{
    width: min(92vw, 360px);
  }
}