/* ==========================================================
   BuddySocial v9.75 - PIMP LIVE PREVIEW + EASY SAVE
   Alleen Pimp mijn profiel > Profielblokken
   ========================================================== */

body[data-page="pimp_profile"] #blocks .block-style-preview{
  position:relative !important;
  min-height:82px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  gap:3px !important;
  padding:12px 14px !important;
  margin:7px 0 10px !important;
  border:1px dashed #9ebed5 !important;
  transition:
    background .18s ease,
    border-color .18s ease,
    border-radius .18s ease,
    color .18s ease,
    box-shadow .18s ease !important;
  overflow:hidden !important;
}

body[data-page="pimp_profile"] #blocks .block-style-preview>b{
  display:block !important;
  line-height:1.2 !important;
}

body[data-page="pimp_profile"] #blocks .block-style-preview>small{
  display:block !important;
  font-size:.78em !important;
  opacity:.72 !important;
  line-height:1.2 !important;
}

body[data-page="pimp_profile"] #blocks .pimp-preview-inner{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  margin-top:7px !important;
  padding:6px 8px !important;
  border:1px solid rgba(120,150,175,.50) !important;
  font-size:.72em !important;
  transition:background .18s ease,border .18s ease,border-radius .18s ease !important;
}

body[data-page="pimp_profile"] #blocks .pimp-preview-chip{
  display:inline-flex !important;
  align-items:center !important;
  min-height:20px !important;
  padding:2px 6px !important;
  background:rgba(255,255,255,.58) !important;
  border:1px solid rgba(130,155,175,.35) !important;
}

body[data-page="pimp_profile"] #blocks .pimp-preview-link{
  text-decoration:underline !important;
  opacity:.82 !important;
}

/* disabled live state */
body[data-page="pimp_profile"] #blocks .block-style-preview.preview-disabled{
  filter:grayscale(.65) !important;
  opacity:.48 !important;
}
body[data-page="pimp_profile"] #blocks .block-style-preview.preview-disabled::after{
  content:"Blok staat uit" !important;
  position:absolute !important;
  right:8px !important;
  top:7px !important;
  padding:3px 6px !important;
  border:1px solid #d6a7a7 !important;
  background:#fff0f0 !important;
  color:#a24747 !important;
  font-size:9px !important;
  font-weight:800 !important;
}

/* text effects used only inside preview */
@keyframes pimpPreviewRgb{
  0%{color:var(--preview-c1)}
  50%{color:var(--preview-c2)}
  100%{color:var(--preview-c1)}
}
@keyframes pimpPreviewGlow{
  0%,100%{text-shadow:0 0 3px currentColor}
  50%{text-shadow:0 0 11px currentColor,0 0 18px var(--preview-c2)}
}
@keyframes pimpPreviewGlitter{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.45)}
}

body[data-page="pimp_profile"] #blocks .preview-effect-rgb>b,
body[data-page="pimp_profile"] #blocks .preview-effect-rgb>small{
  animation:pimpPreviewRgb var(--preview-speed,5s) linear infinite !important;
}

body[data-page="pimp_profile"] #blocks .preview-effect-glitter{
  animation:pimpPreviewGlitter calc(var(--preview-speed,5s) / 2) ease-in-out infinite !important;
}

body[data-page="pimp_profile"] #blocks .preview-effect-rgb-glitter>b,
body[data-page="pimp_profile"] #blocks .preview-effect-rgb-glitter>small{
  animation:pimpPreviewRgb var(--preview-speed,5s) linear infinite !important;
}
body[data-page="pimp_profile"] #blocks .preview-effect-rgb-glitter{
  animation:pimpPreviewGlitter calc(var(--preview-speed,5s) / 2) ease-in-out infinite !important;
}

body[data-page="pimp_profile"] #blocks .preview-effect-glow>b{
  text-shadow:0 0 7px currentColor !important;
}
body[data-page="pimp_profile"] #blocks .preview-effect-neon>b{
  animation:pimpPreviewGlow var(--preview-speed,5s) ease-in-out infinite !important;
}
body[data-page="pimp_profile"] #blocks .preview-effect-shadow>b{
  text-shadow:2px 2px 2px rgba(0,0,0,.32) !important;
}
body[data-page="pimp_profile"] #blocks .preview-effect-outline>b{
  -webkit-text-stroke:1px var(--preview-c2) !important;
  paint-order:stroke fill !important;
}

/* live values for size/speed */
body[data-page="pimp_profile"] #blocks .pimp-live-value{
  float:right !important;
  margin-left:6px !important;
  color:#e38100 !important;
  font-size:10px !important;
  font-weight:800 !important;
}

/* save helper under intro */
body[data-page="pimp_profile"] #blocks .pimp-quick-save{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin:8px 0 11px !important;
  padding:8px 10px !important;
  border:1px solid #b9d0e0 !important;
  background:linear-gradient(180deg,#f9fcfe,#edf6fb) !important;
}
body[data-page="pimp_profile"] #blocks .pimp-quick-save>span{
  color:#547083 !important;
  font-size:10px !important;
}

/* sticky easy-save bar */
body[data-page="pimp_profile"] #blocks .pimp-easy-savebar{
  position:sticky !important;
  left:0 !important;
  right:0 !important;
  bottom:8px !important;
  z-index:80 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  margin:16px 0 4px !important;
  padding:9px 10px !important;
  border:1px solid #9fbacf !important;
  border-radius:8px !important;
  background:rgba(244,249,252,.97) !important;
  box-shadow:0 8px 24px rgba(23,54,78,.18) !important;
  backdrop-filter:blur(8px) !important;
}

body[data-page="pimp_profile"] #blocks .pimp-save-state{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  min-width:0 !important;
}

body[data-page="pimp_profile"] #blocks .pimp-save-dot{
  width:10px !important;
  height:10px !important;
  flex:0 0 10px !important;
  border-radius:50% !important;
  background:#4daf59 !important;
  box-shadow:0 0 0 3px rgba(77,175,89,.13) !important;
}

body[data-page="pimp_profile"] #blocks .pimp-save-state b,
body[data-page="pimp_profile"] #blocks .pimp-save-state small{
  display:block !important;
}
body[data-page="pimp_profile"] #blocks .pimp-save-state b{
  color:#315e7d !important;
  font-size:11px !important;
}
body[data-page="pimp_profile"] #blocks .pimp-save-state small{
  margin-top:2px !important;
  color:#718493 !important;
  font-size:9px !important;
}

body[data-page="pimp_profile"] #blocks .pimp-easy-savebar.is-dirty{
  border-color:#d9a74d !important;
  background:rgba(255,249,231,.98) !important;
}
body[data-page="pimp_profile"] #blocks .pimp-easy-savebar.is-dirty .pimp-save-dot{
  background:#f0a11d !important;
  box-shadow:0 0 0 3px rgba(240,161,29,.15) !important;
}
body[data-page="pimp_profile"] #blocks .pimp-easy-savebar.is-dirty .pimp-save-state b{
  color:#8b5b08 !important;
}

body[data-page="pimp_profile"] #blocks .pimp-easy-savebar.is-saving{
  opacity:.75 !important;
  pointer-events:none !important;
}

body[data-page="pimp_profile"] #blocks .pimp-save-actions{
  display:flex !important;
  gap:6px !important;
  flex:0 0 auto !important;
}

body[data-page="pimp_profile"] #blocks .pimp-jump-top{
  min-height:34px !important;
  padding:6px 10px !important;
  border:1px solid #b7cbd9 !important;
  background:#fff !important;
  color:#356383 !important;
  font-weight:700 !important;
  cursor:pointer !important;
}

body[data-page="pimp_profile"] #blocks .pimp-save-now{
  min-height:34px !important;
  padding:6px 13px !important;
}

/* bottom original save still available */
body[data-page="pimp_profile"] #blocks .pimp-original-save{
  display:block !important;
  min-width:220px !important;
  margin:12px auto 4px !important;
}

/* Mobile */
@media(max-width:760px){
  body[data-page="pimp_profile"] #blocks .pimp-easy-savebar{
    bottom:calc(70px + env(safe-area-inset-bottom,0px)) !important;
    align-items:stretch !important;
    flex-direction:column !important;
  }
  body[data-page="pimp_profile"] #blocks .pimp-save-actions{
    display:grid !important;
    grid-template-columns:90px minmax(0,1fr) !important;
  }
  body[data-page="pimp_profile"] #blocks .pimp-save-actions>*{
    width:100% !important;
  }
  body[data-page="pimp_profile"] #blocks .pimp-quick-save{
    align-items:stretch !important;
    flex-direction:column !important;
  }
  body[data-page="pimp_profile"] #blocks .pimp-quick-save button{
    width:100% !important;
  }
}

@media(prefers-reduced-motion:reduce){
  body[data-page="pimp_profile"] #blocks .block-style-preview,
  body[data-page="pimp_profile"] #blocks .block-style-preview *{
    animation:none !important;
    transition:none !important;
  }
}