/* WATCH v48 — consolidated clean frontend layer.
   One CSS file replaces stacked v41-v47 visual hotfixes.
   No MutationObserver, no bookmark JS, no fixed-menu hacks.
*/

/* ===== from watch_visual_clean_v41.css ===== */
/* WATCH v41 — clean visual layer, no bookmark overrides.
   Keeps the good poster hover/text animation from v28 and removes only seasonal overlay.
   No MutationObserver, no fixed bookmark menus, no bookmark rewrites. */

#watchSnow,
.watch-snow,
canvas#watchSnow{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* WATCH v28 — hover animation like the reference, while keeping vertical posters/layout */

/* Keep the poster geometry from v26/v27. */
.mcard__img{
  overflow:hidden !important;
  border-radius:18px !important;
  clip-path:inset(0 round 18px) !important;
  background:#000 !important;
  isolation:isolate !important;
  contain:paint !important;
}
.mcard__img img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  border-radius:inherit !important;
  transform:translateZ(0) scale(1.018) !important;
  transform-origin:center center !important;
  backface-visibility:hidden !important;
}

/* Reference-like dim: soft, glassy fade, no layout jump. */
.mcard__img::after{
  content:"" !important;
  position:absolute !important;
  inset:-10px !important;
  border-radius:28px !important;
  background:
    linear-gradient(180deg, rgba(0,0,0,.52) 0%, rgba(0,0,0,.66) 54%, rgba(0,0,0,.76) 100%) !important;
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .32s cubic-bezier(.22,1,.36,1) !important;
  z-index:6 !important;
}
.mcard:hover .mcard__img::after,
.mcard.is-preview-open .mcard__img::after,
.mcard.is-bm-open .mcard__img::after{
  opacity:1 !important;
}

/* Keep the current vertical-card text placement. Only the motion changes. */
.mcard__overlay{
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  align-items:flex-end !important;
  padding:12px !important;
  border-radius:inherit !important;
  overflow:hidden !important;
  background:transparent !important;
  clip-path:inset(0 round 18px) !important;
  opacity:1 !important;
  transform:none !important;
  transition:none !important;
  z-index:8 !important;
  pointer-events:none !important;
}
.mcard__overlay::before{
  display:none !important;
  content:none !important;
}

/* The text no longer jumps from the bottom.
   It stays in the same bottom area, but softly appears from slightly above + deblurs,
   which matches the reference feel better on vertical posters. */
.mcard__overlayBody{
  position:relative !important;
  z-index:9 !important;
  bottom:auto !important;
  width:100% !important;
  opacity:0 !important;
  transform:translate3d(0,-10px,0) scale(.992) !important;
  filter:blur(5px) saturate(.9) !important;
  transition:
    opacity .46s cubic-bezier(.16,1,.3,1),
    transform .54s cubic-bezier(.16,1,.3,1),
    filter .46s cubic-bezier(.16,1,.3,1) !important;
  transition-delay:.04s !important;
  will-change:opacity, transform, filter !important;
}

.mcard:hover .mcard__overlayBody,
.mcard.is-preview-open .mcard__overlayBody,
.mcard.is-bm-open .mcard__overlayBody{
  opacity:1 !important;
  transform:translate3d(0,0,0) scale(1) !important;
  filter:blur(0) saturate(1) !important;
}

/* Stagger the internal text very slightly; this makes it feel 60fps even if screen capture is 30fps. */
.mcard__overlayTitle,
.mcard__overlayDesc{
  transform:translate3d(0,-6px,0) !important;
  opacity:0 !important;
  transition:
    opacity .42s cubic-bezier(.16,1,.3,1),
    transform .50s cubic-bezier(.16,1,.3,1) !important;
  will-change:opacity, transform !important;
}
.mcard__overlayDesc{
  transition-delay:.07s !important;
}
.mcard:hover .mcard__overlayTitle,
.mcard.is-preview-open .mcard__overlayTitle,
.mcard.is-bm-open .mcard__overlayTitle,
.mcard:hover .mcard__overlayDesc,
.mcard.is-preview-open .mcard__overlayDesc,
.mcard.is-bm-open .mcard__overlayDesc{
  opacity:1 !important;
  transform:translate3d(0,0,0) !important;
}

/* Keep the always-visible bottom title unchanged; only soften its fade when hover overlay appears. */
.mcard__title{
  transition:opacity .28s cubic-bezier(.22,1,.36,1), filter .28s cubic-bezier(.22,1,.36,1) !important;
}
.mcard:hover .mcard__title,
.mcard.is-preview-open .mcard__title,
.mcard.is-bm-open .mcard__title{
  opacity:0 !important;
  filter:blur(2px) !important;
}

/* Prevent older hotfixes from adding bottom movement back. */
.mcard__img:hover .mcard__overlayBody,
.mcard:hover .mcard__overlayBody,
.mcard:hover .mcard__overlayTitle,
.mcard:hover .mcard__overlayDesc{
  bottom:auto !important;
}


/* ===== from watch_visual_clean_v42.css ===== */
/* WATCH v42 — minimal correction after bookmarks restore.
   No JS, no observers, no fixed menus. Only:
   1) bookmark dropdown above poster overlay
   2) thinner inline-preview button font
   3) replace visible "play_arrow" text with one CSS play icon */

/* Bookmark dropdown must be above poster dark/text overlay, but keep original behavior/position. */
.mcard{
  overflow:visible !important;
}
.mcard:hover,
.mcard.is-bm-open,
.mcard:has(.mcard__bm.is-open){
  z-index:2000 !important;
}
.mcard__img{
  position:relative !important;
}
.mcard__bm{
  z-index:120 !important;
}
.mcard__bm.is-open{
  z-index:220 !important;
}
.mcard__bmMenu{
  z-index:260 !important;
}
.mcard__bm.is-open .mcard__bmMenu{
  z-index:260 !important;
}

/* Keep menu readable above the hover dim. */
.mcard__bmMenu{
  background:rgba(14,14,14,.96) !important;
  border-color:rgba(255,255,255,.10) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.46) !important;
}

/* Inline preview buttons: lighter, closer to material page. */
.watch-inlinepreview__btn,
.watch-cardpreview__btn,
.watch-inlinepreview__btn span,
.watch-cardpreview__btn span{
  font-family:"Inter","Google Sans","SF Pro Display","Segoe UI Variable","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,sans-serif !important;
  font-size:14px !important;
  font-weight:600 !important;
  letter-spacing:-.004em !important;
  line-height:1 !important;
  font-synthesis:none !important;
  text-rendering:geometricPrecision !important;
  -webkit-font-smoothing:antialiased !important;
}

/* If Material Icons font fails, do not show the word play_arrow. Draw one clean play icon instead. */
.watch-inlinepreview__btn--play,
.watch-cardpreview__btn--play,
.watch-material__primaryBtn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
}

.watch-inlinepreview__btn--play .watch-mi,
.watch-cardpreview__btn--play .watch-mi,
.watch-material__primaryBtn .watch-mi{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  width:0 !important;
  min-width:0 !important;
  height:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  font-size:0 !important;
}

.watch-inlinepreview__btn--play::before,
.watch-cardpreview__btn--play::before,
.watch-material__primaryBtn::before{
  content:"" !important;
  display:inline-block !important;
  width:0 !important;
  height:0 !important;
  flex:0 0 auto !important;
  margin-left:-1px !important;
  border-top:5.5px solid transparent !important;
  border-bottom:5.5px solid transparent !important;
  border-left:8.5px solid currentColor !important;
  transform:translateY(.2px) !important;
}

/* Do not create a second play icon. */
.watch-inlinepreview__btn--play::after,
.watch-cardpreview__btn--play::after,
.watch-material__primaryBtn::after{
  content:none !important;
  display:none !important;
}


/* ===== from watch_visual_clean_v43.css ===== */
/* WATCH v43 — bookmark module above poster + info icon fallback.
   CSS only. No observers, no bookmark logic rewrites. */

/* 1) Bookmark module/menu must be above poster hover/dim/text layers. */
.mcard{
  position:relative !important;
  overflow:visible !important;
}

.mcard__img{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
}

/* poster dim/text layers stay lower */
.mcard__img::after{
  z-index:6 !important;
}
.mcard__overlay{
  z-index:8 !important;
}
.mcard__overlayBody{
  z-index:9 !important;
}

/* bookmark button/menu above all poster layers */
.mcard__img > .mcard__bm,
.mcard > .mcard__bm,
.mcard__link > .mcard__bm{
  z-index:80 !important;
  pointer-events:auto !important;
}

.mcard__img > .mcard__bm.is-open,
.mcard > .mcard__bm.is-open,
.mcard__link > .mcard__bm.is-open{
  z-index:180 !important;
}

.mcard__bmBtn{
  position:relative !important;
  z-index:181 !important;
}

.mcard__bmMenu{
  z-index:220 !important;
  background:rgba(14,14,14,.96) !important;
  border-color:rgba(255,255,255,.10) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.50) !important;
}

.mcard__bm.is-open .mcard__bmMenu{
  z-index:220 !important;
}

/* Opening bookmark keeps the card over neighbours but does not rewrite the menu behavior. */
.mcard.is-bm-open,
.mcard:has(.mcard__bm.is-open){
  z-index:3000 !important;
}

/* 2) Restore info icon in preview/detail buttons when Material Icons font fails.
   Hide the literal "info" text and draw a clean circled i. */
.watch-inlinepreview__btn:not(.watch-inlinepreview__btn--play) .watch-mi,
.watch-cardpreview__btn:not(.watch-cardpreview__btn--play) .watch-mi,
.watch-material__secondaryBtn .watch-mi{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:18px !important;
  height:18px !important;
  min-width:18px !important;
  margin:0 !important;
  color:currentColor !important;
  font-size:0 !important;
  line-height:0 !important;
  overflow:hidden !important;
  position:relative !important;
  visibility:visible !important;
  opacity:1 !important;
}

.watch-inlinepreview__btn:not(.watch-inlinepreview__btn--play) .watch-mi::before,
.watch-cardpreview__btn:not(.watch-cardpreview__btn--play) .watch-mi::before,
.watch-material__secondaryBtn .watch-mi::before{
  content:"i" !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:15px !important;
  height:15px !important;
  border:2px solid currentColor !important;
  border-radius:999px !important;
  font-family:"Inter","Google Sans","SF Pro Display","Segoe UI",system-ui,sans-serif !important;
  font-size:10px !important;
  font-weight:800 !important;
  line-height:1 !important;
  box-sizing:border-box !important;
  transform:translateY(.1px) !important;
}

/* Do not let the raw icon word render next to Подробнее. */
.watch-inlinepreview__btn:not(.watch-inlinepreview__btn--play) .watch-mi,
.watch-cardpreview__btn:not(.watch-cardpreview__btn--play) .watch-mi,
.watch-material__secondaryBtn .watch-mi{
  text-indent:-9999px !important;
}
.watch-inlinepreview__btn:not(.watch-inlinepreview__btn--play) .watch-mi::before,
.watch-cardpreview__btn:not(.watch-cardpreview__btn--play) .watch-mi::before,
.watch-material__secondaryBtn .watch-mi::before{
  text-indent:0 !important;
}


/* ===== from watch_visual_clean_v44.css ===== */
/* WATCH v44 — bookmark dropdown above card text.
   CSS only. Fixes poster title/description overlay appearing over the bookmark menu. */

/* When bookmark menu is open, the card and poster image become the top stacking context. */
.mcard.is-bm-open,
.mcard:has(.mcard__bm.is-open){
  position:relative !important;
  z-index:5000 !important;
  isolation:auto !important;
}

/* The original card text layer can be a sibling over the poster/menu.
   Drop it below the bookmark module only while the bookmark menu is open. */
.mcard.is-bm-open .mcard__textLayer,
.mcard:has(.mcard__bm.is-open) .mcard__textLayer,
.mcard.is-bm-open .mcard__overlay,
.mcard:has(.mcard__bm.is-open) .mcard__overlay,
.mcard.is-bm-open .mcard__overlayBody,
.mcard:has(.mcard__bm.is-open) .mcard__overlayBody,
.mcard.is-bm-open .mcard__overlayTitle,
.mcard:has(.mcard__bm.is-open) .mcard__overlayTitle,
.mcard.is-bm-open .mcard__overlayDesc,
.mcard:has(.mcard__bm.is-open) .mcard__overlayDesc{
  z-index:1 !important;
}

/* Keep bookmark wrapper/menu above all poster text layers. */
.mcard.is-bm-open .mcard__bm,
.mcard:has(.mcard__bm.is-open) .mcard__bm,
.mcard.is-bm-open .mcard__img > .mcard__bm,
.mcard:has(.mcard__bm.is-open) .mcard__img > .mcard__bm{
  z-index:10000 !important;
  position:absolute !important;
}

.mcard.is-bm-open .mcard__bmBtn,
.mcard:has(.mcard__bm.is-open) .mcard__bmBtn{
  z-index:10001 !important;
  position:relative !important;
}

.mcard.is-bm-open .mcard__bmMenu,
.mcard:has(.mcard__bm.is-open) .mcard__bmMenu,
.mcard__bm.is-open .mcard__bmMenu{
  z-index:10002 !important;
  position:absolute !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

/* The poster image itself must not create a lower isolated stacking context while menu is open. */
.mcard.is-bm-open .mcard__img,
.mcard:has(.mcard__bm.is-open) .mcard__img{
  z-index:9000 !important;
  isolation:auto !important;
}

/* Keep the hover dim, but put it under the menu when bookmark menu is open. */
.mcard.is-bm-open .mcard__img::after,
.mcard:has(.mcard__bm.is-open) .mcard__img::after{
  z-index:2 !important;
}

/* If browser supports :has, also dim/hide text hit layer behind the menu visually enough to avoid crossing text. */
.mcard:has(.mcard__bm.is-open) .mcard__textLayer{
  pointer-events:none !important;
}

/* Same for JS-added class fallback. */
.mcard.is-bm-open .mcard__textLayer{
  pointer-events:none !important;
}


/* ===== from watch_visual_clean_v45.css ===== */
/* WATCH v45 — remove poster hover bounce + keep rating above dim.
   CSS only. No JS, no bookmark logic changes. */

/* 1) Remove the small hover bounce/lift/zoom on poster cards. */
.watch-home .mcard:hover,
.watch-home .mcard:focus-within,
.watch-libv2 .mcard:hover,
.watch-libv2 .mcard:focus-within,
.watch-catpage .mcard:hover,
.watch-catpage .mcard:focus-within,
.mcard:hover,
.mcard:focus-within{
  transform:none !important;
}

/* No scale on poster wrapper/text layer/image itself. */
.watch-home .mcard:hover .mcard__img,
.watch-home .mcard:focus-within .mcard__img,
.watch-libv2 .mcard:hover .mcard__img,
.watch-libv2 .mcard:focus-within .mcard__img,
.watch-catpage .mcard:hover .mcard__img,
.watch-catpage .mcard:focus-within .mcard__img,
.mcard:hover .mcard__img,
.mcard:focus-within .mcard__img{
  transform:translateZ(0) scale(1) !important;
}

.watch-home .mcard:hover .mcard__textLayer,
.watch-home .mcard:focus-within .mcard__textLayer,
.watch-libv2 .mcard:hover .mcard__textLayer,
.watch-libv2 .mcard:focus-within .mcard__textLayer,
.watch-catpage .mcard:hover .mcard__textLayer,
.watch-catpage .mcard:focus-within .mcard__textLayer,
.mcard:hover .mcard__textLayer,
.mcard:focus-within .mcard__textLayer{
  transform:translateZ(0) scale(1) !important;
}

.watch-home .mcard:hover .mcard__img img,
.watch-home .mcard__img:hover img,
.watch-home .mcard:focus-within .mcard__img img,
.watch-libv2 .mcard:hover .mcard__img img,
.watch-libv2 .mcard__img:hover img,
.watch-libv2 .mcard:focus-within .mcard__img img,
.watch-catpage .mcard:hover .mcard__img img,
.watch-catpage .mcard__img:hover img,
.watch-catpage .mcard:focus-within .mcard__img img,
.mcard:hover .mcard__img img,
.mcard__img:hover img,
.mcard:focus-within .mcard__img img{
  transform:none !important;
}

/* Keep transitions smooth for overlay/text, but no transform animation on card/poster. */
.mcard,
.mcard__img,
.mcard__img img,
.mcard__textLayer{
  transition-property:box-shadow, opacity, filter !important;
}

/* 2) Rating/badges must stay above the hover dim layer. */
.mcard__badges,
.mcard__badge{
  z-index:70 !important;
  opacity:1 !important;
  filter:none !important;
  mix-blend-mode:normal !important;
  transform:none !important;
  pointer-events:none !important;
}

/* Make badge independent of the poster dim pseudo/overlay layers. */
.mcard:hover .mcard__badges,
.mcard:focus-within .mcard__badges,
.mcard:hover .mcard__badge,
.mcard:focus-within .mcard__badge{
  z-index:70 !important;
  opacity:1 !important;
  filter:none !important;
}

/* Bookmark stays above rating, menu stays above everything. */
.mcard__bm{
  z-index:120 !important;
}
.mcard__bm.is-open{
  z-index:220 !important;
}
.mcard__bmMenu{
  z-index:260 !important;
}


/* ===== from watch_visual_clean_v47.css ===== */
/* WATCH v47 — corrected bookmark text fade.
   CSS only. Does NOT touch normal hover text animation.
   Applies only while the bookmark menu is open. */

/* Smooth only the disappearance of poster text when bookmark dropdown opens. */
.mcard.is-bm-open .mcard__title,
.mcard:has(.mcard__bm.is-open) .mcard__title,
.mcard.is-bm-open .mcard__overlayBody,
.mcard:has(.mcard__bm.is-open) .mcard__overlayBody,
.mcard.is-bm-open .mcard__overlayTitle,
.mcard:has(.mcard__bm.is-open) .mcard__overlayTitle,
.mcard.is-bm-open .mcard__overlayDesc,
.mcard:has(.mcard__bm.is-open) .mcard__overlayDesc{
  opacity:0 !important;
  filter:blur(1.5px) !important;
  transition:
    opacity .18s cubic-bezier(.22,1,.36,1),
    filter .18s cubic-bezier(.22,1,.36,1) !important;
}

/* Do not hide visibility/display: that was what broke the hover text animation in v46. */
.mcard.is-bm-open .mcard__textLayer,
.mcard:has(.mcard__bm.is-open) .mcard__textLayer,
.mcard.is-bm-open .mcard__overlay,
.mcard:has(.mcard__bm.is-open) .mcard__overlay{
  visibility:visible !important;
}

/* Keep bookmark dropdown above text, but do not alter text hover transitions. */
.mcard.is-bm-open .mcard__bm,
.mcard:has(.mcard__bm.is-open) .mcard__bm{
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
  z-index:10000 !important;
}

.mcard.is-bm-open .mcard__bmMenu,
.mcard:has(.mcard__bm.is-open) .mcard__bmMenu,
.mcard__bm.is-open .mcard__bmMenu{
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
  z-index:10002 !important;
}

/* ===== WATCH v48 clean additions ===== */

/* Search modal: same double sliders as category page, without replacing existing search logic. */
.watch-searchmodal__dualRange{
  display:grid;
  gap:10px;
  margin:8px 0 18px;
}
.watch-searchmodal__dualRangeHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:700;
}
.watch-searchmodal__dualRangeBox{
  position:relative;
  height:28px;
}
.watch-searchmodal__dualTrack,
.watch-searchmodal__dualFill{
  position:absolute;
  left:0;
  right:0;
  top:12px;
  height:4px;
  border-radius:999px;
}
.watch-searchmodal__dualTrack{
  background:rgba(255,255,255,.13);
}
.watch-searchmodal__dualFill{
  left:0;
  right:0;
  background:#6066ff;
}
.watch-searchmodal__dualInput{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:28px;
  margin:0;
  pointer-events:none;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
}
.watch-searchmodal__dualInput::-webkit-slider-thumb{
  pointer-events:auto;
  appearance:none;
  -webkit-appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  border:0;
  background:#fff;
  box-shadow:0 5px 14px rgba(0,0,0,.35);
  cursor:pointer;
}
.watch-searchmodal__dualInput::-moz-range-thumb{
  pointer-events:auto;
  width:18px;
  height:18px;
  border-radius:50%;
  border:0;
  background:#fff;
  box-shadow:0 5px 14px rgba(0,0,0,.35);
  cursor:pointer;
}
.watch-searchmodal__dualInput::-webkit-slider-runnable-track{
  height:4px;
  background:transparent;
}
.watch-searchmodal__dualInput::-moz-range-track{
  height:4px;
  background:transparent;
}
.watch-searchmodal__hiddenFilterValue{
  display:none !important;
}
html[data-watch-theme="light"] .watch-searchmodal__dualTrack{
  background:rgba(0,0,0,.12);
}
html[data-watch-theme="light"] .watch-searchmodal__dualRangeHead{
  color:rgba(0,0,0,.66);
}

/* Watch Importer admin polish is kept CSS-only and scoped. */
.watch-importer-v48-note{
  margin:10px 0 0;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(88,102,255,.10);
  border:1px solid rgba(88,102,255,.22);
  color:#dfe4ff;
  font-size:13px;
  line-height:1.45;
}