/* SFW previews, 2026-10-08 (Alenci). Loaded together with the preview script (templates/frontend/modern/js/lm-sfw.js, see that file).
   Same look as the site: dark surfaces, pink buttons, gold crown. Everything here is inside the player box (.lm-sfw-wrap on the
   video page, .lm-sfw-stage in the Sneak Peek window) or on a video card. */

/* ---- player: label, counter, note ---- */
/* the bar "Only for premium members" of the locked page is not shown over a playing preview (the label sits there) */
body.lm .lm-sfw-wrap > .notification-box,body.lm .lm-sfw-wrap > .video_download{display:none !important}
/* a preview has no control bar at all (2026-10-08, Alenci): the whole bar of the player (#placeholder-nv-nv-controls with the
   progress bar nv-play-progress and every button) is not shown. Only inside the preview box; the Premium player is untouched. */
body.lm .lm-sfw-wrap #placeholder-nv-nv-controls,body.lm .lm-sfw-wrap [id$="-nv-controls"]{display:none !important}
/* and it never jumps to the next video: the site's "Up next" countdown is cancelled by the script and never shown here */
body.lm .lm-sfw-wrap .lm-upnext{display:none !important}
body.lm .lm-sfw-ui{position:absolute;left:12px;top:12px;right:12px;z-index:30;display:flex;flex-wrap:wrap;align-items:center;gap:8px;pointer-events:none}
body.lm .lm-sfw-tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:7px;background:#d81b60;color:#fff;font:800 12px/1 var(--lm-font,system-ui,sans-serif);letter-spacing:.08em;box-shadow:0 4px 14px rgba(0,0,0,.35)}
body.lm .lm-sfw-count{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:7px;background:rgba(15,10,16,.72);color:#fff;font:600 12px/1 var(--lm-font,system-ui,sans-serif);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
body.lm .lm-sfw-count:empty{display:none}
body.lm .lm-sfwp-note{margin:10px 0 0;padding:0 2px;font:500 13px/1.4 var(--lm-font,system-ui,sans-serif);color:rgba(255,255,255,.72)}

/* ---- still pictures ---- */
/* Always the site's own thumbnail (img.lm-sfw-still). On the poster no filter is set here: inside .player the site's rule blurs a
   thumbnail that is not marked safe (class removeblur), exactly as on the locked poster. */
body.lm img.lm-sfw-still{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;z-index:0;border-radius:0}
body.lm .lm-sfw-poster{position:absolute;inset:0;z-index:20;overflow:hidden;pointer-events:none;background:#0f0a10;border-radius:inherit;transition:opacity .28s ease}
body.lm .lm-sfw-poster.is-out{opacity:0}
body.lm .lm-sfw-playico{position:absolute;left:50%;top:50%;z-index:2;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(216,27,96,.94);color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.45)}
body.lm .lm-sfw-playico svg{width:34px;height:34px;margin-left:3px}

/* ---- end card and gate (same style): blurred thumbnail, pink to dark gradient, icon, headline, line, ONE button ---- */
body.lm .lm-sfw-end,body.lm .lm-sfw-gate{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:18px;overflow:hidden;background:#160b13;animation:lmSfwIn .3s ease both}
body.lm #placeholder.is-gate,body.lm .lm-sfw-stage.is-gate{position:relative;width:100%;aspect-ratio:16/9;min-height:210px;overflow:hidden;background:#160b13}
/* background picture of the card: always blurred (a thumbnail the site blurs for guests gets the stronger blur) */
body.lm img.lm-sfw-still.lm-sfw-bg{filter:blur(22px) saturate(1.2) !important;transform:scale(1.14)}
body.lm img.lm-sfw-still.lm-sfw-bg.is-unsafe{filter:blur(36px) saturate(1.1) !important}
body.lm .lm-sfw-grad{position:absolute;inset:0;z-index:1;background:linear-gradient(160deg,rgba(216,27,96,.56) 0%,rgba(132,16,66,.6) 32%,rgba(30,12,24,.86) 70%,rgba(15,10,16,.95) 100%)}
body.lm .lm-sfw-card{position:relative;z-index:2;max-width:560px;width:100%;text-align:center;color:#fff}
body.lm .lm-sfw-crown{width:58px;height:58px;margin:0 auto 12px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#ffc65c;background:rgba(15,10,16,.42);border:1px solid rgba(255,198,92,.55);box-shadow:0 8px 24px rgba(0,0,0,.35),inset 0 0 18px rgba(255,198,92,.16)}
body.lm .lm-sfw-crown svg{width:28px;height:28px;fill:currentColor}
body.lm .lm-sfw-crown.is-lock svg{fill:none;width:26px;height:26px}
body.lm .lm-sfw-h{margin:0 0 6px;font:700 34px/1.08 var(--lm-font-head,'Barlow Condensed',system-ui,sans-serif);letter-spacing:.01em;text-transform:uppercase;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.35)}
body.lm .lm-sfw-msg{margin:0 0 14px;font:500 16px/1.4 var(--lm-font,system-ui,sans-serif);color:rgba(255,255,255,.9)}
body.lm .lm-sfw-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0 0 18px;padding:0;list-style:none}
body.lm .lm-sfw-chips span{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;background:rgba(15,10,16,.46);border:1px solid rgba(255,255,255,.22);color:#fff;font:600 13px/1 var(--lm-font,system-ui,sans-serif);white-space:nowrap}
body.lm .lm-sfw-chips svg{width:14px;height:14px;color:#ffc65c;fill:currentColor;flex:0 0 auto}
body.lm .lm-sfw-btns{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px}
body.lm a.lm-sfw-b{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;border-radius:999px;text-decoration:none;font-family:var(--lm-font,system-ui,sans-serif);font-weight:800;line-height:1;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease}
body.lm a.lm-sfw-b1{min-height:54px;padding:0 38px;font-size:18px;color:#fff;background:linear-gradient(135deg,#ad1457,#e91e63 55%,#ff5c93);box-shadow:0 10px 26px rgba(216,27,96,.5)}
body.lm a.lm-sfw-b1:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(216,27,96,.6);color:#fff}
/* "Watch the next preview": small card under the button (thumbnail of the next video that has a preview + its title) */
body.lm a.lm-sfw-next{display:inline-flex;align-items:center;gap:12px;max-width:380px;margin:16px auto 0;padding:6px 16px 6px 6px;border-radius:12px;background:rgba(15,10,16,.55);border:1px solid rgba(255,255,255,.2);color:#fff;text-decoration:none;text-align:left;transition:border-color .15s ease,background .15s ease,transform .15s ease}
body.lm a.lm-sfw-next:hover{border-color:#ff5c93;background:rgba(15,10,16,.78);transform:translateY(-1px);color:#fff}
body.lm .lm-sfw-next-img{position:relative;flex:0 0 auto;width:96px;height:54px;border-radius:8px;overflow:hidden;background:#0f0a10}
body.lm .lm-sfw-next-img img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;border-radius:0}
body.lm .lm-sfw-next-img i{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(216,27,96,.92);color:#fff}
body.lm .lm-sfw-next-img i svg{width:13px;height:13px;margin-left:1px}
body.lm .lm-sfw-next-t{min-width:0;display:flex;flex-direction:column;gap:3px}
body.lm .lm-sfw-next-t small{font:700 11px/1.2 var(--lm-font,system-ui,sans-serif);letter-spacing:.06em;text-transform:uppercase;color:#ff8fb4}
body.lm .lm-sfw-next-t b{font:600 14px/1.25 var(--lm-font,system-ui,sans-serif);color:#fff;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Replay: small round button in the top right corner of the end card */
body.lm .lm-sfw-replay{position:absolute;right:14px;top:14px;z-index:3;width:44px;height:44px;padding:0;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.4);background:rgba(15,10,16,.5);color:#fff;cursor:pointer;transition:background .15s ease,transform .15s ease}
body.lm .lm-sfw-replay:hover{background:#d81b60;transform:rotate(-30deg)}
body.lm .lm-sfw-replay svg{width:20px;height:20px}
@keyframes lmSfwIn{from{opacity:0}to{opacity:1}}

/* ---- cards ---- */
/* "Preview" badge on the cards (Alenci, 2026-10-08): it exists only for the hover preview. It waits just outside the left edge of the
   picture (the picture box clips it) and, while the mouse is over the picture or the card has the keyboard focus, slides in from
   the left (transform only, 380 ms) to the place of the duration tag (same right and bottom edge, set by the script; 20 px high,
   radius 6 px, in line with the Watched tag). The hover clip is anchored to its left edge, so on the normal cards the watermark
   lies outside the picture. Only on cards that show the whole width of the clip (16:9, Sneak Peek) the badge sits on the
   watermark and covers it (lm-sfw.js, place). When the mouse leaves it slides back out. The duration tag fades out (150 ms) for
   that time (class lm-sfw-durx). Mouse devices only: on phones and tablets the badge never shows and the duration stays. With
   "reduce motion" it only fades. */
body.lm .lm-sfw-badge{position:absolute;right:8px;bottom:8px;left:auto;top:auto;opacity:0;transform:translateX(var(--lm-sfw-x,-300px));transition:transform .38s cubic-bezier(.2,.8,.2,1),opacity 0s linear .38s;z-index:4;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;height:20px;padding:0 7px;border-radius:6px;background:#d81b60;color:#fff;font:800 10px/1 var(--lm-font,system-ui,sans-serif);letter-spacing:.06em;text-transform:uppercase;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.3)}
@media (hover:hover){
  body.lm .lm-sfw-ph:hover > .lm-sfw-badge,body.lm a.lm-sfw-has:focus-visible .lm-sfw-badge{opacity:1;transform:none;transition:transform .38s cubic-bezier(.2,.8,.2,1),opacity 0s}
  body.lm .lm-sfw-ph.lm-sfw-durx .info,body.lm .lm-sfw-ph.lm-sfw-durx .lm-sneak2-dur{transition:opacity .15s ease}
  body.lm .lm-sfw-ph.lm-sfw-durx:hover .info,body.lm .lm-sfw-ph.lm-sfw-durx:hover .lm-sneak2-dur,body.lm a.lm-sfw-has:focus-visible .lm-sfw-ph.lm-sfw-durx .info,body.lm a.lm-sfw-has:focus-visible .lm-sfw-ph.lm-sfw-durx .lm-sneak2-dur{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  body.lm .lm-sfw-badge{transform:none !important;transition:opacity .15s ease !important}
}
body.lm .lm-sfw-hv,body.lm .lm-sfw-anim,body.lm .lm-sfw-lv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0% 50%;z-index:3;pointer-events:none;background:#0f0a10;filter:none !important;transform:none !important;border-radius:inherit}
/* the hover preview plays UNDER the card tags (NEW, HD, Viewed / Watched / Continue stay visible) */
body.lm .lm-sfw-hv{z-index:2;opacity:0;transition:opacity .2s ease}
/* phones: the animated cover sits under the duration and the card tags */
body.lm .lm-sfw-anim{z-index:1;background:transparent}
/* touch devices: the MP4 loop of a card; the thumbnail stays visible under it until its first picture plays (no black flash) */
body.lm .lm-sfw-lv{z-index:1;opacity:0;background:transparent}
body.lm .lm-sfw-lv.is-on{opacity:1}
body.lm .lm-sfw-has .info,body.lm .lm-sfw-has .isnew,body.lm .lm-sfw-has .quality,body.lm .lm-sfw-has .lm-seen-b{z-index:3}
body.lm .lm-sfw-hv.is-on{opacity:1}

/* tablets and small desktop windows */
@media (max-width:1099px){
  body.lm .lm-sfw-h{font-size:28px}
  body.lm .lm-sfw-msg{font-size:15px;margin-bottom:12px}
  body.lm .lm-sfw-crown{width:50px;height:50px;margin-bottom:10px}
  body.lm .lm-sfw-crown svg{width:24px;height:24px}
  body.lm .lm-sfw-chips{margin-bottom:14px}
  body.lm a.lm-sfw-b1{min-height:50px;padding:0 32px;font-size:17px}
  body.lm a.lm-sfw-next{margin-top:12px}
}
/* phones: the player is only about 200 px high, so everything is tighter */
@media (max-width:767px){
  body.lm .lm-sfw-ui{left:8px;top:8px;right:8px;gap:6px}
  body.lm .lm-sfw-tag,body.lm .lm-sfw-count{height:22px;padding:0 8px;font-size:11px}
  body.lm .lm-sfw-end,body.lm .lm-sfw-gate{padding:8px 10px}
  body.lm .lm-sfw-crown{width:30px;height:30px;margin-bottom:4px;box-shadow:none}
  body.lm .lm-sfw-crown svg{width:16px;height:16px}
  body.lm .lm-sfw-crown.is-lock svg{width:15px;height:15px}
  body.lm .lm-sfw-h{font-size:20px;margin-bottom:2px}
  body.lm .lm-sfw-msg{font-size:12.5px;line-height:1.3;margin-bottom:6px}
  body.lm .lm-sfw-chips{gap:5px;margin-bottom:8px}
  body.lm .lm-sfw-chips span{height:22px;padding:0 8px;font-size:11px;gap:4px}
  body.lm .lm-sfw-chips svg{width:11px;height:11px}
  body.lm .lm-sfw-btns{gap:8px}
  body.lm a.lm-sfw-b1{min-height:40px;padding:0 24px;font-size:15px;box-shadow:0 6px 16px rgba(216,27,96,.5)}
  /* with the next preview card the crown is left out on phones, so everything fits the small player */
  body.lm .lm-sfw-end.has-next .lm-sfw-crown{display:none}
  body.lm a.lm-sfw-next{max-width:100%;gap:8px;margin-top:8px;padding:3px 10px 3px 3px;border-radius:9px}
  body.lm .lm-sfw-next-img{width:60px;height:34px;border-radius:6px}
  body.lm .lm-sfw-next-img i{width:20px;height:20px;margin:-10px 0 0 -10px}
  body.lm .lm-sfw-next-img i svg{width:10px;height:10px}
  body.lm .lm-sfw-next-t{gap:1px}
  body.lm .lm-sfw-next-t small{font-size:9.5px}
  body.lm .lm-sfw-next-t b{font-size:12px;display:block;white-space:nowrap;text-overflow:ellipsis}
  body.lm .lm-sfw-replay{right:8px;top:8px;width:34px;height:34px}
  body.lm .lm-sfw-replay svg{width:16px;height:16px}
  body.lm .lm-sfw-playico{width:58px;height:58px;margin:-29px 0 0 -29px}
  body.lm .lm-sfw-playico svg{width:26px;height:26px}
}
/* narrow phones: the one button takes the full width */
@media (max-width:479px){
  body.lm .lm-sfw-btns{display:block}
  body.lm .lm-sfw-btns a.lm-sfw-b1,body.lm .lm-sfw-foot a.lm-sfw-b1{display:flex;width:100%;box-sizing:border-box}
}
@media (prefers-reduced-motion:reduce){body.lm .lm-sfw-end,body.lm .lm-sfw-gate{animation:none}body.lm a.lm-sfw-b.lm-shine::after{animation:none;display:none}}

/* ---- Sneak Peek: preview window ---- */
html.lm-sfw-open{overflow:hidden}
body.lm .lm-sfw-modal{position:fixed;inset:0;z-index:10050;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(10,6,11,.86);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:lmSfwIn .2s ease both}
body.lm .lm-sfw-modal-in{position:relative;width:100%;max-width:880px;background:#1b1219;border:1px solid rgba(255,255,255,.1);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden}
body.lm .lm-sfw-stage{position:relative;width:100%;aspect-ratio:16/9;background:#000;overflow:hidden}
body.lm .lm-sfw-stage video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
body.lm .lm-sfw-x{position:absolute;right:10px;top:10px;z-index:60;width:36px;height:36px;border:0;border-radius:50%;background:rgba(15,10,16,.72);color:#fff;font:400 24px/1 system-ui,sans-serif;cursor:pointer}
body.lm .lm-sfw-x:hover{background:#d81b60}
/* in this window the close button sits in the corner, so Replay moves next to it */
body.lm .lm-sfw-stage .lm-sfw-replay{right:56px;top:10px;width:36px;height:36px}
body.lm .lm-sfw-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px 6px}
body.lm .lm-sfw-foot-t{min-width:0;display:flex;flex-direction:column;gap:4px}
body.lm .lm-sfw-foot-t b{color:#fff;font:700 16px/1.3 var(--lm-font,system-ui,sans-serif);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.lm .lm-sfw-foot-t span{color:#ff8fb4;font:700 13px/1.2 var(--lm-font,system-ui,sans-serif)}
body.lm .lm-sfw-foot a.lm-sfw-b1{flex:0 0 auto;min-height:42px;padding:0 22px;font-size:15px}
body.lm .lm-sfw-modal .lm-sfwp-note{margin:0;padding:4px 16px 14px}
@media (max-width:767px){
  body.lm .lm-sfw-modal{padding:8px}
  body.lm .lm-sfw-foot{flex-direction:column;align-items:stretch;gap:10px;padding:12px 12px 4px}
  body.lm .lm-sfw-foot-t b{white-space:normal}
  body.lm .lm-sfw-modal .lm-sfwp-note{padding:4px 12px 12px}
  body.lm .lm-sfw-stage .lm-sfw-replay{right:50px;top:10px;width:34px;height:34px}
}