/* =========================
   Voltina — FAQ 11 (Relume)
   Plak dit in je stylesheet
   ========================= */

.faq-11{
  position: relative;
  overflow: hidden;

  /* rustige basis (wit blijft “primair gebruik”) */
  color: #000;
}

/* zachte “V”-watermark / blobs (geen HTML wijziging) */
.faq-11::before{
  content:"";
  position:absolute;
  inset: -40% -30% auto -30%;
  height: 520px;
  filter: blur(10px);
  pointer-events:none;
}

.faq-11::after{
  content:"";
  position:absolute;
  inset: auto -35% -45% -20%;
  height: 560px;

  filter: blur(12px);
  pointer-events:none;
}

/* Header tekst wat “Voltina-zwart” en strakker */
.faq-11 h2{
  letter-spacing: -0.02em;
  color: #000;
}

.faq-11 p{
  color: rgba(0,0,0,0.78);
}

/* FAQ card / item */
.faq-11 .faq-item{
  border-radius: 16px;
  overflow: hidden;

  /* gradient border vibe zonder extra wrappers */
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(10px);

  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

.faq-11 .faq-item:hover{
  transform: translateY(-2px);
  border-color: rgba(230, 0, 126, 0.22);
  box-shadow: 0 14px 34px rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.90);
}

/* Trigger button */
.faq-11 .faq-trigger{
  position: relative;
  gap: 16px;

  color: #000;
  background: transparent;
}

.faq-11 .faq-trigger:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.22);
}

/* subtiele highlight lijn bovenaan de button */
.faq-11 .faq-trigger::before{
  content:"";
  position:absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 1px;

  opacity: 0.9;
}

.faq-11 .faq-icon{
  color: rgba(0,0,0,0.82);
  transition: transform .25s ease, color .2s ease, opacity .2s ease;
  opacity: .9;
}

/* open state (aria-expanded) */
.faq-11 [data-faq-trigger][aria-expanded="true"] .faq-icon{
  color: rgba(230, 0, 126, 0.95);
  opacity: 1;
}

/* Content */
.faq-11 .faq-content{
  background: rgba(255,255,255,0.65);
}

.faq-11 .faq-content .overflow-hidden > div{
  color: rgba(0,0,0,0.78);
  line-height: 1.6;
}

/* Links in answer (wp_kses_post) */
.faq-11 .faq-content a{
  color: rgba(230, 0, 126, 1);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.faq-11 .faq-content a:hover{
  color: rgba(241, 135, 0, 1);
}

/* Footer button: 1 kleur (magenta) zoals je eerder wilde */
.faq-11 a.inline-flex{
  border-radius: 999px;
  border: 1px solid rgba(230, 0, 126, 0.35);
  background: rgba(230, 0, 126, 1);
  color: #fff;
  text-decoration: none;

  box-shadow: 0 10px 22px rgba(230, 0, 126, 0.18);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.faq-11 a.inline-flex:hover{
  background: rgba(230, 0, 126, 0.92);
  border-color: rgba(230, 0, 126, 0.55);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(230, 0, 126, 0.22);
}

.faq-11 a.inline-flex:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(241, 135, 0, 0.25), 0 14px 28px rgba(230, 0, 126, 0.18);
}



.faq-11{
  --vt-pink:#E6007E;
  --vt-orange:#F18700; /* enkel voor verloop */
  --vt-black:#000;

  position: relative;
  overflow: hidden;

  color: var(--vt-black);
}

.faq-11::after{
  content:"";
  position:absolute;
  left: 6%;
  right: 6%;
  top: 0;
  height: 1px;
  pointer-events:none;

  opacity: .9;
}

.faq-11 h2{
  letter-spacing: -0.02em;
  color: #000;
}

.faq-11 p{
  color: rgba(0,0,0,0.78);
}

.faq-11 .faq-item{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.90);
  backdrop-filter: blur(10px);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  box-shadow: 0 14px 34px rgba(0,0,0,0.07);
}

.faq-11 .faq-item:hover{
  transform: translateY(-2px);
  border-color: rgba(230, 0, 126, 0.20);
  box-shadow: 0 18px 46px rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.98);
}

.faq-11 .faq-trigger{
  position: relative;
  gap: 16px;
  color: #000;
  background: transparent;
}

.faq-11 .faq-trigger:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(230, 0, 126, 0.22);
}

.faq-11 .faq-trigger::before{
  content:"";
  position:absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 2px;
  border-radius: 999px;

  opacity: .85;
}

.faq-11 .faq-icon{
  color: rgba(0,0,0,0.82);
  transition: transform .25s ease, color .2s ease, opacity .2s ease;
  opacity: .9;
}

.faq-11 [data-faq-trigger][aria-expanded="true"] .faq-icon{
  color: rgba(230, 0, 126, 0.95);
  opacity: 1;
}

.faq-11 .faq-content{
  background: rgba(255,255,255,0.70);
}

.faq-11 .faq-content .overflow-hidden > div{
  color: rgba(0,0,0,0.78);
  line-height: 1.6;
}

.faq-11 .faq-content a{
  color: rgba(230, 0, 126, 1);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.faq-11 .faq-content a:hover{
  color: rgba(241, 135, 0, 1);
}

.faq-11 a.inline-flex{
  border-radius: 999px;
  border: 1px solid rgba(230, 0, 126, 0.35);
  background: rgba(230, 0, 126, 1);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 14px 28px rgba(230, 0, 126, 0.18);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}

.faq-11 a.inline-flex:hover{
  background: rgba(230, 0, 126, 0.92);
  border-color: rgba(230, 0, 126, 0.55);
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(230, 0, 126, 0.22);
}

.faq-11 a.inline-flex:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(241, 135, 0, 0.25), 0 14px 28px rgba(230, 0, 126, 0.18);
}