/* Vuurwerkshows.nu — tips & aanbevelingen (Kermis.nu-stijl) */

/* Aanbevelen — bovenaan praktische informatie */
body.page--show-detail #praktische-info .kv2-pi-endorse{
  display:block;
  width:100%;
  margin:1.25rem 0 1.5rem;
  padding:0.72rem 0.85rem;
  border:1px solid rgba(111,224,160,.38);
  border-radius:10px;
  background:rgba(111,224,160,.07);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
  color:#b8f0ce;
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
  -webkit-appearance:none;
  appearance:none;
}
body.page--show-detail #praktische-info .kv2-pi-endorse:hover{
  border-color:rgba(140,240,185,.62);
  background:rgba(111,224,160,.12);
  box-shadow:0 0 0 1px rgba(140,240,185,.14),0 4px 14px rgba(0,0,0,.14);
  transform:translateY(-1px);
}
body.page--show-detail #praktische-info .kv2-pi-endorse:active{
  transform:translateY(0);
  background:rgba(111,224,160,.15);
}
body.page--show-detail #praktische-info .kv2-pi-endorse:focus-visible{
  outline:2px solid rgba(140,170,255,.85);
  outline-offset:3px;
}
body.page--show-detail #praktische-info .kv2-pi-endorse.is-active{
  border-color:rgba(111,224,160,.55);
  background:rgba(111,224,160,.1);
}
@keyframes kv2-pi-endorse-glow{
  0%,100%{
    box-shadow:
      0 0 0 1px rgba(140,240,185,.35) inset,
      0 0 18px rgba(80,220,140,.28);
  }
  50%{
    box-shadow:
      0 0 0 2px rgba(170,255,200,.55) inset,
      0 0 32px rgba(90,240,155,.55),
      0 0 48px rgba(60,200,120,.28);
  }
}
body.page--show-detail #praktische-info .kv2-pi-endorse.is-just-endorsed{
  border-color:rgba(150,255,195,.78);
  background:rgba(111,224,160,.16);
  animation:kv2-pi-endorse-glow .95s ease-in-out 3;
}
body.page--show-detail #praktische-info .kv2-pi-endorse.is-just-endorsed .kv2-pi-endorse__badge .bi,
body.page--show-detail #praktische-info .kv2-pi-endorse.is-just-endorsed .kv2-pi-endorse__num{
  filter:drop-shadow(0 0 8px rgba(120,255,175,.75));
}
body.page--show-detail .kv2-pi-endorse__layout{
  display:flex;
  align-items:center;
  gap:.65rem;
  width:100%;
}
body.page--show-detail .kv2-pi-endorse__badge{
  display:flex;
  flex:0 0 auto;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.2rem;
  min-width:2.4rem;
  align-self:center;
}
body.page--show-detail .kv2-pi-endorse__divider{
  flex:0 0 1px;
  align-self:stretch;
  width:1px;
  min-height:2.6rem;
  margin:.05rem 0;
  background:linear-gradient(
    180deg,
    rgba(111,224,160,0),
    rgba(111,224,160,.45) 18%,
    rgba(111,224,160,.45) 82%,
    rgba(111,224,160,0)
  );
}
body.page--show-detail .kv2-pi-endorse__copy{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.22rem;
}
body.page--show-detail .kv2-endorse-btn .bi{
  flex:0 0 auto;
  font-size:1.65rem;
  line-height:1;
  color:#6fe0a0;
}
body.page--show-detail .kv2-pi-endorse__num{
  flex:0 0 auto;
  font-size:1.65rem;
  font-weight:800;
  line-height:1;
  color:#6fe0a0;
  font-variant-numeric:tabular-nums;
}
body.page--show-detail .kv2-endorse-btn__label{
  display:block;
  font-size:.76rem;
  font-weight:600;
  line-height:1.35;
  color:#b8f0ce;
}
body.page--show-detail .kv2-pi-endorse__sub,
body.page--show-detail .kv2-pi-endorse__low{
  display:block;
  margin:0;
  padding:0;
  font-size:.8rem;
  line-height:1.45;
  color:rgba(255,255,255,.72);
}
body.page--show-detail #praktische-info .kv2-pi-endorse:hover .kv2-endorse-btn__label,
body.page--show-detail #praktische-info .kv2-pi-endorse:hover .kv2-pi-endorse__sub{
  color:#d4f8e4;
}
body.page--show-detail .kv2-pi-endorse__sub[hidden],
body.page--show-detail .kv2-pi-endorse__low[hidden],
body.page--show-detail .kv2-pi-endorse__num[hidden]{
  display:none !important;
}

.vs-eng-followup{
  margin:0 0 1.5rem;
  padding:0.72rem 0.85rem;
  border-radius:10px;
  border:1px solid rgba(111,224,160,.38);
  background:rgba(111,224,160,.07);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
  color:#b8f0ce;
}
.vs-eng-followup__q{
  margin:0 0 12px;
  font-weight:700;
  font-size:.92rem;
  line-height:1.45;
  color:#b8f0ce;
}
.vs-eng-followup .muted{
  color:rgba(255,255,255,.78);
}
.vs-eng-followup__actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.vs-eng-followup__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:68px;
  height:36px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(111,224,160,.45);
  background:rgba(111,224,160,.12);
  color:#d4f8e4;
  font:inherit;
  font-size:14px;
  font-weight:700;
  line-height:1;
  text-align:center;
  cursor:pointer;
  transition:
    border-color .15s ease,
    background-color .15s ease,
    transform .12s ease;
  -webkit-appearance:none;
  appearance:none;
}
.vs-eng-followup__btn:hover{
  border-color:rgba(140,240,185,.65);
  background:rgba(111,224,160,.2);
  transform:translateY(-1px);
}
.vs-eng-followup__btn:active{
  transform:translateY(0);
}
.vs-eng-followup__btn--no{
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.06);
  color:#fff;
}
.vs-eng-followup__btn--no:hover{
  border-color:rgba(255,255,255,.34);
  background:rgba(255,255,255,.1);
}
.vs-eng-followup__btn:focus-visible{
  outline:2px solid rgba(140,170,255,.85);
  outline-offset:2px;
}

.vs-visitor-tips{margin-top:12px;display:grid;gap:10px}
.vs-visitor-tip{
  margin:0;padding:12px 14px;border-radius:12px;
  background:rgba(255,255,255,.06);border-left:4px solid #a855f7;
}
.vs-visitor-tip footer{margin-top:8px;font-size:13px;color:rgba(255,255,255,.72)}
.vs-visitor-reviews{display:grid;gap:12px}
.vs-visitor-review{
  padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.05);
  border-left:4px solid #3cb371;
}
.vs-visitor-review footer{margin-top:8px;font-size:13px;color:rgba(255,255,255,.72)}

/* Ruimte rond actieknoppen — hogere specificiteit dan .detail-block p */
body.page--show-detail .detail-block .vs-eng-actions{
  display:block;
  margin:1.75rem 0 1.25rem;
  padding:0.35rem 0;
}
body.page--show-detail .detail-block .vs-kijkplekken__text + .vs-eng-actions,
body.page--show-detail .detail-block .vs-visitor-tips + .vs-eng-actions,
body.page--show-detail .detail-block .vs-kijkplekken__empty + .vs-eng-actions{
  margin-top:1.75rem;
}
body.page--show-detail .detail-block .vs-eng-actions .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.vs-eng-modal{
  position:fixed;inset:0;z-index:35000;
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.vs-eng-modal[hidden]{display:none !important}
.vs-eng-modal__backdrop{position:absolute;inset:0;background:rgba(4,8,18,.72);backdrop-filter:blur(3px)}
.vs-eng-modal__dialog{
  position:relative;z-index:1;width:min(560px,100%);max-height:min(90vh,760px);overflow:auto;
  padding:18px 18px 16px;border-radius:16px;
  background:#151520;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 48px rgba(0,0,0,.45);
}
.vs-eng-modal__close{
  position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;border-radius:999px;
  background:rgba(255,255,255,.08);color:#fff;font-size:22px;line-height:1;cursor:pointer;
}
.vs-eng-form{display:grid;gap:12px;margin-top:12px}
.vs-eng-form label{display:grid;gap:6px;font-weight:700;font-size:14px}
.vs-eng-form input,.vs-eng-form textarea{
  width:100%;box-sizing:border-box;padding:10px 12px;border-radius:10px;
  border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.35);color:#fff;font:inherit;
}
.vs-eng-form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.vs-eng-check{font-weight:600;font-size:13px}
.vs-eng-check a{color:#ffb36a}
.vs-eng-form__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.vs-eng-form__msg{margin:0;padding:10px 12px;border-radius:10px;font-size:14px}
.vs-eng-form__msg.is-ok{background:rgba(46,154,95,.18);border:1px solid rgba(76,220,130,.35)}
.vs-eng-form__msg.is-err{background:rgba(192,57,43,.18);border:1px solid rgba(220,80,70,.35)}