/* ==========================================================================
   ViewGems NSFW moderation — blur / reveal UI (nsfw1)
   Companion to the core plugin's nsfw-blur.css (loaded on the reels page
   only). This file is loaded on EVERY page: it styles the server-rendered
   blur on feed posts, the post page, and BioStudio, where the core CSS
   is not present. Class names are shared with the core on purpose:
   .vg-nsfw-blurred (wrapper) and .vg-nsfw-overlay (tap-to-reveal layer)
   are the same ones the core reels JS uses, so a server-blurred reel
   and a client-blurred reel look and behave the same. Media elements
   carry .vg-nsfw-media; the core reels CSS already blurs the reel
   frame's thumbnail / injected video off the wrapper class.
   ========================================================================== */

/* positioning context for the overlay */
.vg-nsfw-wrap {
  position: relative;
}

/* blur the media while the wrapper carries the blurred class */
.vg-nsfw-blurred .vg-nsfw-media {
  filter: blur(20px) saturate(.85) brightness(.7);
}

/* tap-to-reveal overlay: covers the media while blurred */
.vg-nsfw-overlay {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  width: 100%;
  padding: 1rem;
  border: 0;
  border-radius: inherit;
  background: rgba(10, 10, 15, .55);
  color: #fff;
  text-align: center;
  cursor: pointer;
}

.vg-nsfw-overlay .vg-nsfw-label {
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 9999px;
  padding: .2rem .7rem;
}

.vg-nsfw-overlay .vg-nsfw-hint {
  font-size: .85rem;
  line-height: 1.3;
  opacity: .9;
}

/* hidden until revealed, then this becomes the re-hide control */
.vg-nsfw-overlay .vg-nsfw-hide {
  display: none;
}

/* revealed state: overlay shrinks to a small "Hide" pill, media is clear */
.vg-nsfw-revealed .vg-nsfw-overlay {
  inset: auto;
  right: .5rem;
  bottom: .5rem;
  width: auto;
  padding: .3rem .75rem;
  border-radius: 9999px;
  background: rgba(0, 0, 0, .65);
  gap: 0;
}

.vg-nsfw-revealed .vg-nsfw-overlay > :not(.vg-nsfw-hide) {
  display: none;
}

.vg-nsfw-revealed .vg-nsfw-overlay .vg-nsfw-hide {
  display: inline;
  font-size: .75rem;
  font-weight: 600;
  text-decoration: underline;
  opacity: .9;
}