/**
 * PrepsNext — Content Protection (protect.css)
 *
 * .pn-protected is added by JS only on mobile (pointer: coarse).
 * Desktop users are never affected by the selection-disable rules.
 */

/* ── Text selection + highlight — mobile only (class set by JS) ──────── */
.pn-protected {
  -webkit-user-select: none;
  -moz-user-select:    none;
  -ms-user-select:     none;
  user-select:         none;
}

.pn-protected ::selection      { background: transparent; }
.pn-protected ::-moz-selection { background: transparent; }

/* ── Image drag disabled everywhere (protects post images on all devices) */
.pn-img-wrap img {
  -webkit-user-drag: none;
  user-drag:         none;
}

/* ── Image wrapper ───────────────────────────────────────────────────── */
.pn-img-wrap {
  position: relative;
  display: inline-block;
  -webkit-touch-callout: none;
}

/* ── Download button — hidden by default ─────────────────────────────── */
.pn-img-dl {
  position:         absolute;
  top:              8px;
  right:            8px;
  width:            36px;
  height:           36px;
  border-radius:    50%;
  background:       rgba(0, 0, 0, 0.55);
  backdrop-filter:  blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border:           1px solid rgba(255, 255, 255, 0.15);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  cursor:           pointer;
  opacity:          0;
  transition:       opacity 0.18s, background 0.18s;
  pointer-events:   auto;
  z-index:          10;
  text-decoration:  none;
}

/* Desktop: show on hover */
@media (pointer: fine) {
  .pn-img-wrap:hover .pn-img-dl {
    opacity: 1;
  }
}

/* Mobile: show on long-press (JS adds .pn-img-wrap--active) */
@media (pointer: coarse) {
  .pn-img-wrap--active .pn-img-dl {
    opacity: 1;
  }
}

.pn-img-dl svg {
  width:      18px;
  height:     18px;
  display:    block;
  flex-shrink: 0;
}

.pn-img-dl:hover {
  background: rgba(0, 0, 0, 0.75);
}