/* ============================================================
   HiddenFlirt UI · hf-player.css
   Player media proprietario (video/audio/gallery) + lightbox.
   ============================================================ */

/* ---------- Video player ---------- */
.hf-player { --_ctrl: rgba(15,15,15,.82); position: relative; border-radius: var(--hf-r-lg); overflow: hidden; background: #000; aspect-ratio: 16/9; font-family: var(--hf-font); user-select: none; }
.hf-player--vertical { aspect-ratio: 9/16; }
.hf-player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hf-player--nsfw:not(.is-revealed) video { filter: blur(var(--hf-veil-blur)); transform: scale(1.06); }
.hf-player__gate { position: absolute; inset: 0; z-index: 5; background: rgba(10,10,10,.55); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; color: rgba(255,255,255,.92); font: 600 12.5px/1.45 var(--hf-font); text-align: center; cursor: pointer; transition: opacity var(--hf-t-reveal) var(--hf-ease); }
.hf-player.is-revealed .hf-player__gate { opacity: 0; pointer-events: none; }
.hf-player__watermark { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .3; background-repeat: repeat; }
.hf-player__center { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 4; width: 68px; height: 68px; border-radius: 999px; background: var(--_ctrl); border: 1px solid rgba(255,255,255,.2); display: grid; place-content: center; color: #fff; font-size: 22px; cursor: pointer; transition: opacity var(--hf-t-ui), transform var(--hf-t-tap); }
.hf-player__center:active { transform: translate(-50%,-50%) scale(.94); }
.hf-player.is-playing .hf-player__center { opacity: 0; pointer-events: none; }
.hf-player__seekhint { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; width: 84px; height: 84px; border-radius: 999px; background: rgba(255,255,255,.14); display: grid; place-content: center; color: #fff; font: 800 13px/1 var(--hf-font); opacity: 0; pointer-events: none; }
.hf-player__seekhint.is-on { animation: hf-fadeout .6s both; }
.hf-player__seekhint--back { left: 8%; } .hf-player__seekhint--fwd { right: 8%; }
.hf-player__controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: 28px 14px 12px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.75)); display: flex; flex-direction: column; gap: 8px; opacity: 0; transition: opacity var(--hf-t-ui); }
.hf-player:hover .hf-player__controls, .hf-player.is-paused .hf-player__controls, .hf-player.is-touch .hf-player__controls { opacity: 1; }

/* Scrubber */
.hf-scrubber { position: relative; height: 18px; display: flex; align-items: center; cursor: pointer; }
.hf-scrubber__rail { position: relative; flex: 1; height: 4px; border-radius: 999px; background: rgba(255,255,255,.25); overflow: visible; transition: height var(--hf-t-tap); }
.hf-scrubber:hover .hf-scrubber__rail { height: 6px; }
.hf-scrubber__buffer { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: rgba(255,255,255,.35); }
.hf-scrubber__fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 999px; background: var(--hf-primary); }
.hf-scrubber__thumb { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 999px; background: #fff; border: 2.5px solid var(--hf-primary); transform: translate(-50%,-50%) scale(0); transition: transform var(--hf-t-tap); }
.hf-scrubber:hover .hf-scrubber__thumb { transform: translate(-50%,-50%) scale(1); }
.hf-scrubber__preview { position: absolute; bottom: 22px; transform: translateX(-50%); padding: 5px 9px; border-radius: 8px; background: rgba(0,0,0,.85); color: #fff; font: 700 10.5px/1 var(--hf-font); opacity: 0; pointer-events: none; }
.hf-scrubber:hover .hf-scrubber__preview { opacity: 1; }

/* Riga controlli */
.hf-player__row { display: flex; align-items: center; gap: 6px; }
.hf-player__btn { width: 38px; height: 38px; border: 0; border-radius: 10px; background: transparent; color: #fff; font-size: 15px; cursor: pointer; display: grid; place-content: center; transition: background var(--hf-t-tap); }
.hf-player__btn:hover { background: rgba(255,255,255,.14); }
.hf-player__btn.is-active { color: var(--hf-primary-soft); }
.hf-player__time { font: 600 11.5px/1 var(--hf-font); color: rgba(255,255,255,.85); font-variant-numeric: tabular-nums; padding: 0 6px; }
.hf-player__spacer { flex: 1; }
.hf-player__volume { display: flex; align-items: center; gap: 6px; }
.hf-player__volume input { width: 0; opacity: 0; transition: all var(--hf-t-ui) var(--hf-ease); accent-color: var(--hf-primary); }
.hf-player__volume:hover input { width: 74px; opacity: 1; }
.hf-player__menu { position: absolute; right: 12px; bottom: 62px; z-index: 7; min-width: 170px; background: rgba(15,15,15,.95); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; overflow: hidden; display: none; }
.hf-player__menu.is-open { display: block; animation: hf-rise .2s var(--hf-ease); }
.hf-player__menu button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 11px 15px; border: 0; background: none; color: #fff; font: 600 12px/1 var(--hf-font); cursor: pointer; }
.hf-player__menu button:hover { background: rgba(255,255,255,.1); }
.hf-player__menu button[aria-checked="true"] { color: var(--hf-primary-soft); }
.hf-player__badge { position: absolute; top: 12px; left: 12px; z-index: 4; }
.hf-player__live { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 7px; background: var(--hf-primary); color: #fff; font: 800 9.5px/1 var(--hf-font); letter-spacing: .08em; }
.hf-player__live i { width: 6px; height: 6px; border-radius: 999px; background: #fff; animation: hf-blinkdot 1.2s infinite; }
.hf-player--mini { position: fixed; right: 20px; bottom: 20px; width: 300px; z-index: var(--hf-z-toast); box-shadow: var(--hf-shadow-pop); }

/* ---------- Audio player (vocali / audio racconti) ---------- */
.hf-audio { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--hf-r-md); background: var(--hf-surface); border: 1px solid var(--hf-border); max-width: 420px; }
.hf-audio__play { width: 42px; height: 42px; border-radius: 999px; border: 0; background: var(--hf-primary); color: #fff; font-size: 14px; cursor: pointer; flex: none; display: grid; place-content: center; }
.hf-audio__wave { flex: 1; display: flex; align-items: center; gap: 2.5px; height: 32px; cursor: pointer; }
.hf-audio__wave i { flex: 1; border-radius: 999px; background: var(--hf-border); min-height: 6px; }
.hf-audio__wave i.is-played { background: var(--hf-primary); }
.hf-audio__time { font: 600 11px/1 var(--hf-font); color: var(--hf-muted); font-variant-numeric: tabular-nums; }

/* ---------- Gallery / Lightbox ---------- */
.hf-gallery { display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }
.hf-gallery__item { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--hf-dark); }
.hf-gallery__item img, .hf-gallery__item .hf-gallery__ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hf-lightbox__stage { position: relative; width: min(1000px, 92vw); height: min(80vh, 760px); display: grid; place-content: center; }
.hf-lightbox__img { max-width: 100%; max-height: 76vh; border-radius: 12px; transition: transform var(--hf-t-ui) var(--hf-ease); }
.hf-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; font-size: 17px; cursor: pointer; display: grid; place-content: center; }
.hf-lightbox__nav--prev { left: -70px; } .hf-lightbox__nav--next { right: -70px; }
.hf-lightbox__close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 16px; cursor: pointer; }
.hf-lightbox__count { position: absolute; top: 24px; left: 24px; color: rgba(255,255,255,.7); font: 700 12px/1 var(--hf-font); }

@keyframes hf-blinkdot { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes hf-fadeout { 0% { opacity: 1; } 100% { opacity: 0; } }