/* =========================================================
   ROTATIE (1 waarheid, conflictvrij)
   ========================================================= */

.effect-rotate-left       { --klik-rotate:-1.6deg; }
.effect-rotate-right      { --klik-rotate:1.6deg; }
.effect-rotate-hard-left  { --klik-rotate:-4deg; }
.effect-rotate-hard-right { --klik-rotate:4deg; }

.wpb_text_column[class*="effect-rotate"] .wpb_wrapper,
.wpb_column[class*="effect-rotate"] > .vc_column-inner > .wpb_wrapper {
  transform: rotate(var(--klik-rotate));
}


/* =========================================================
   EFFECT BOX
   ========================================================= */

.wpb_text_column.effect-box .wpb_wrapper,
.wpb_column.effect-box > .vc_column-inner > .wpb_wrapper {
  background:#fff;
  padding:28px 30px;
  border-radius:18px;
  position:relative;
  z-index:2;
}

.wpb_text_column.effect-box .wpb_wrapper::after,
.wpb_column.effect-box > .vc_column-inner > .wpb_wrapper::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  z-index:-1;
  transform:translateY(10px);
  box-shadow:
    0 30px 40px rgba(255,255,255,.80),
    0 20px 30px rgba(255,255,255,.55),
    0 16px 26px rgba(255,180,240,.45),
    0 14px 22px rgba(226,0,223,.40),
    0 10px 18px rgba(226,0,223,.28);
  filter:blur(16px);
}


/* =========================================================
   NEON STRIP
   ========================================================= */

.wpb_text_column.effect-neon-strip .wpb_wrapper,
.wpb_column.effect-neon-strip > .vc_column-inner > .wpb_wrapper {
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:32px 36px;
  border-radius:16px;
  position:relative;
  z-index:3;
}


/* =========================================================
   NEON STRIP - ZWARTE VARIANT

   GEBRUIK:
   effect-neon-strip effect-black
   ========================================================= */

.wpb_text_column.effect-neon-strip.effect-black .wpb_wrapper,
.wpb_column.effect-neon-strip.effect-black > .vc_column-inner > .wpb_wrapper {
  background:#000 !important;
}


/* =========================================================
   NEON STRIP RAND / GLOW
   ========================================================= */

.wpb_text_column.effect-neon-strip .wpb_wrapper::after,
.wpb_column.effect-neon-strip > .vc_column-inner > .wpb_wrapper::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:2px solid rgba(226,0,223,.6);
  box-shadow:
    0 0 6px rgba(226,0,223,.55),
    0 0 16px rgba(226,0,223,.45),
    inset 0 0 10px rgba(226,0,223,.35);
  animation:neonStripPulse 3.2s ease-in-out infinite;
  pointer-events:none;
}


/* =========================================================
   NEON ANIMATIE
   ========================================================= */

@keyframes neonStripPulse {
  0%   { opacity:.55; }
  50%  { opacity:.95; }
  100% { opacity:.55; }
}


/* =========================================================
   LOGO (default + optioneel override)
   ========================================================= */

.wpb_text_column[class*="effect-logo"] .wpb_wrapper::before,
.wpb_column[class*="effect-logo"] > .vc_column-inner > .wpb_wrapper::before {
  content:"";
  position:absolute;
  width:140px;
  height:140px;

  background-image:var(
    --klik-logo,
    url("https://www.klikerotiek.nl/wp-content/uploads/2025/10/logo-klikertiek.webp")
  );

  background-size:contain;
  background-repeat:no-repeat;
  opacity:.92;
  pointer-events:none;
  z-index:5;
}


/* =========================================================
   LOGO POSITIES
   ========================================================= */

.effect-logo-top-left .wpb_wrapper::before {
  top:8px;
  left:8px;
}

.effect-logo-top-right .wpb_wrapper::before {
  top:8px;
  right:8px;
}

.effect-logo-bottom-left .wpb_wrapper::before {
  bottom:8px;
  left:8px;
}

.effect-logo-bottom-right .wpb_wrapper::before {
  bottom:8px;
  right:8px;
}

/* =========================================================
   NEON STRIP - DONKER GLAS VARIANT (transparant, geen plat zwart)
   GEBRUIK:
   effect-neon-strip effect-glass-dark
   ========================================================= */
.wpb_text_column.effect-neon-strip.effect-glass-dark .wpb_wrapper,
.wpb_column.effect-neon-strip.effect-glass-dark > .vc_column-inner > .wpb_wrapper {
  background:rgba(0,0,0,.45) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}