/* Piccole correzioni al tema DLE per cmsXGo */

/* link "Anime" esterno (→ animeunity) con freccia diagonale, come scz.eu */
.navbar-nav .nav-link .external-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* menu: dimensioni reali di scz.eu (16px, peso 400) invece del vw del tema DLE */
.news-navbar .navbar-nav .nav-link {
  font-size: 16px !important;
  font-weight: 400 !important;
}

/* icone social nell'hero: 30px come scz.eu (erano 36) */
.header .social a svg,
.page-head .social a svg {
  width: 30px !important;
  height: 30px !important;
  /* ombra: le icone bianche restano nitide anche sulle zone chiare dell'hero */
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.75));
}
.header .social a,
.page-head .social a {
  opacity: 1 !important;
}

/* ===== pagina dettaglio: votazione + azioni ===== */
#title-single .cx-rate-circle {
  position: relative;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#title-single .cx-rate-circle strong {
  position: absolute;
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
}
#title-single .cx-actions {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
#title-single .cx-icon-action {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: #fff;
  text-decoration: none;
  font-size: 0.68rem;
  opacity: 0.85;
  white-space: nowrap;
  transition: opacity 0.15s ease, color 0.15s ease;
}
#title-single .cx-icon-action i {
  font-size: 1.15rem;
}
#title-single .cx-icon-action:hover {
  opacity: 1;
  color: #6cb0ff;
}
#title-single .cx-muted {
  color: rgba(255, 255, 255, 0.5);
}

/* tooltip stile DLE (grigio chiaro, testo nero bold) su .cx-tip[data-title] */
.cx-tip {
  position: relative;
}
.cx-tip::after,
.cx-tip::before {
  position: absolute;
  left: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 60;
}
.cx-tip::after {
  content: attr(data-title);
  bottom: calc(100% + 9px);
  transform: translateX(-50%);
  background: #d3d3d3;
  color: #000;
  font-weight: 700;
  font-size: 0.72rem;
  line-height: 1;
  padding: 0.35em 0.8em;
  border-radius: 3px;
  white-space: nowrap;
}
.cx-tip::before {
  content: "";
  bottom: calc(100% + 3px);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #d3d3d3;
}
.cx-tip:hover::after,
.cx-tip:hover::before {
  opacity: 0.95;
}

/* ===== trailer nel popup di anteprima (hover) ===== */
.preview-box-16x9 {
  position: relative;
  overflow: hidden;
}
/* il player sta SOTTO (visibile a YT, così fa autoplay) e il poster lo copre
   tutto; dopo 2s sfumo il poster e si vede il video pulito */
.cx-prev-player {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.cx-prev-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  transform: scale(1.6); /* nasconde titolo/barra controlli di YouTube */
}
/* il poster copre TUTTO il box, sopra al player */
.preview-box-16x9 > a {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
}
.preview-box-16x9 .preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.4s ease;
}
.preview-box-16x9.cx-prev-playing .preview-image {
  opacity: 0;
}
/* bottone audio del trailer nel popup (visibile solo quando il video è rivelato) */
.cx-prev-mute {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 4;
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  cursor: pointer;
  font-size: 0.85em;
}
.cx-prev-mute:hover {
  background: rgba(20, 20, 20, 0.85);
}
.preview-box-16x9.cx-prev-playing .cx-prev-mute {
  display: flex;
}

/* ===== trailer video nell'hero ===== */
#home .header .bg-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 75vh;
  z-index: 0;
  overflow: hidden;
  background: transparent !important;
}
#home .header .bg-preview iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* scale 1.3: ingrandisce così titolo (sopra) e barra controlli (sotto) restano fuori dal box */
  transform: translate(-50%, -50%) scale(1.3);
  width: 100vw;
  height: 56.25vw; /* 16:9 sulla larghezza */
  min-height: 75vh;
  min-width: 133.34vh; /* 16:9 sull'altezza 75vh → copre senza bande */
  border: 0;
  pointer-events: none;
}
/* quando il trailer parte, dissolvenza del backdrop */
#home .header .bg-image {
  transition: opacity 0.8s ease;
}
#home .header.cx-playing .bg-image {
  opacity: 0;
}
/* pulsante audio sopra il video */
#home .header #toggle-sound.mute-button {
  position: absolute;
  z-index: 6;
  right: 3vw;
  bottom: 9vh;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  background: rgba(20, 20, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  width: 2.6em;
  height: 2.6em;
}
#home .header #toggle-sound.mute-button:hover {
  background: rgba(20, 20, 20, 0.85);
}

/* posizione verticale del backdrop hero (sovrascrive il 50% !important del tema) */
#home .header .background.cx-hero-bg {
  background-position: center var(--hero-pos, 50%) !important;
  background-size: 100% var(--hero-h, 133%) !important;
  background-repeat: no-repeat !important;
}

/* menu Generi nell'hero */
.sc-selector {
  position: relative;
}
.cx-genres-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(3, minmax(120px, 1fr));
  gap: 2px 6px;
  width: max-content;
  max-width: 460px;
  max-height: 320px;
  overflow-y: auto;
  padding: 10px;
  background: rgba(20, 20, 20, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
}
.cx-genres-menu a {
  display: block;
  padding: 7px 12px;
  font-size: 0.9rem;
  color: #e5e5e5;
  text-decoration: none;
  border-radius: 5px;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.cx-genres-menu a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* hero a rotazione: dissolvenza al cambio slide */
.cx-hero-fade {
  animation: cx-hero-fade-in 1.2s ease;
}
@keyframes cx-hero-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* dots di navigazione hero */
.cx-hero-dots {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.cx-hero-dots button {
  width: 28px;
  height: 4px;
  border: 0;
  padding: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background 0.2s ease;
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}
.cx-hero-dots button:focus,
.cx-hero-dots button:focus-visible,
.cx-hero-dots button:active {
  outline: none !important;
  box-shadow: none !important;
}
.cx-hero-dots button.active {
  background: #fff;
}

/* striscia Telegram: sfondo (il tema non lo imposta) */
.tele {
  background: rgb(0, 136, 204);
}

/* bottone chiudi striscia */
.close-tele {
  position: fixed;
  top: 0;
  right: 12px;
  margin: 0 !important;
  height: 28px;
  display: flex;
  align-items: center;
  z-index: 1001;
  cursor: pointer;
  font-size: 15px;
  color: #fff;
  opacity: 0.9;
}
@media (max-width: 499px) {
  .close-tele {
    height: 34px;
  }
}
.close-tele:hover {
  opacity: 1;
}

/* striscia chiusa: nascondila subito (no flash) e attacca la navbar in cima */
html.tele-closed .tele {
  display: none !important;
}
html.tele-closed .news-navbar {
  top: 0 !important;
}
/* ...e tutto il contenuto sale di 28px (altezza striscia) → niente spazio vuoto */
html.tele-closed #app main {
  margin-top: 64px !important;
}
@media (max-width: 499px) {
  html.tele-closed #app main {
    margin-top: 60px !important;
  }
}

/* popup anteprima: titolo lungo troncato → non deforma i pulsanti play/info */
.previewpanel .buttons {
  display: flex;
  align-items: center;
  gap: 6px;
}
.previewpanel .buttons .play,
.previewpanel .buttons .more-info {
  flex: 0 0 auto;
}
.previewpanel .info-title {
  flex: 1 1 auto;
  min-width: 0;
}
.previewpanel .info-title span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* frecce slider stile StreamingCommunity: pannelli a tutta altezza, gradiente, su hover */
#home .owl-carousel .owl-nav {
  margin: 0;
}
#home .owl-carousel .owl-nav button.owl-prev,
#home .owl-carousel .owl-nav button.owl-next {
  position: absolute;
  top: 15px; /* = margin-top dell'.owl-item → allinea all'immagine */
  bottom: 0;
  width: 56px; /* copre il peek (stagePadding) della card di bordo */
  margin: 0 !important;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 20;
}
#home .owl-carousel .owl-nav button:focus,
#home .owl-carousel .owl-nav button:active {
  outline: none !important;
  box-shadow: none !important;
}
#home .owl-carousel .owl-nav button.owl-prev {
  left: 0;
  background: linear-gradient(
    to left,
    rgba(20, 20, 20, 0.35),
    rgba(20, 20, 20, 0.97)
  ) !important;
}
#home .owl-carousel .owl-nav button.owl-next {
  right: 0;
  background: linear-gradient(
    to right,
    rgba(20, 20, 20, 0.35),
    rgba(20, 20, 20, 0.97)
  ) !important;
}

/* lo slider arriva al bordo reale della pagina (la label resta inset) */
#home.container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#home .slider-title .row-content {
  margin-left: calc(15px - 4vw);
  margin-right: calc(15px - 4vw);
}

/* dots paginazione stile SC: dashine, solo su hover, non cliccabili, allineate al contenuto */
#home .owl-carousel .owl-dots {
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  right: calc(4vw - 15px) !important;
}
#home .slider-title:hover .owl-carousel .owl-dots {
  opacity: 1;
}
#home .owl-carousel .owl-dots .owl-dot span {
  display: none;
}
#home .owl-carousel .owl-dots .owl-dot {
  width: 12px !important;
  height: 2px !important;
}

/* via lo spinner di caricamento immagini del vecchio tema (ora c'è lo skeleton) */
#home .tile-image,
#home .box-16x9,
#home .poster-image,
#home .box-7x10 {
  background-image: none !important;
}
#home .slider-title:hover .owl-carousel .owl-nav button.owl-prev:not(.disabled),
#home .slider-title:hover .owl-carousel .owl-nav button.owl-next:not(.disabled) {
  opacity: 1;
}
#home .owl-carousel .owl-nav button:hover {
  background: rgba(20, 20, 20, 0.75) !important;
}
#home .owl-carousel .owl-nav button svg {
  width: 1.6em;
  height: 1.6em;
  transition: transform 0.15s ease;
}
#home .owl-carousel .owl-nav button:hover svg {
  transform: scale(1.25);
}
#home .owl-carousel .owl-nav button.disabled {
  display: none !important;
}

/* skeleton di caricamento righe (stile streamingcommunityz) */
.cx-skel-row {
  display: flex;
  gap: 4px;
  width: 100%;
}
.cx-skel-box {
  flex: 0 0 calc((100% - 20px) / 6);
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  background: #2a2a2a;
  animation: cx-pulse 1.3s ease-in-out infinite;
}
@keyframes cx-pulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.75;
  }
}
@media (max-width: 1199px) {
  .cx-skel-box {
    flex-basis: calc((100% - 16px) / 5);
  }
}
@media (max-width: 999px) {
  .cx-skel-box {
    flex-basis: calc((100% - 12px) / 4);
  }
}

/* niente spinner.gif del DLE sui tile: usiamo sfondo scuro (skeleton altrove) */
.tile-image {
  background: #1a1a1a !important;
}

/* ===== effetto hero all'avvio del trailer (come SCZ): dopo ~5s il logo
   si rimpicciolisce ancorato in basso-sx, la trama collassa e i bottoni
   diventano trasparenti. Il DELAY è solo sullo stato cx-playing (andata):
   al ritorno (cambio slide) tutto torna pieno SUBITO. ===== */
.header .info-wrap .img-fluid {
  transform-origin: left bottom;
  transition: transform 0.7s ease; /* ritorno (a 25s) morbido, senza delay */
}
.header .info-wrap .plot-wrap {
  overflow: hidden;
  max-height: 9em;
  transition: opacity 0.5s ease, max-height 0.7s ease, margin 0.7s ease;
}
.header .info-wrap .info-buttons,
.header .info-wrap .cx-hero-dots,
.header .billboard .social,
.header .billboard .sc-selector {
  transition: opacity 0.5s ease;
}
/* andata (trailer in play): transizioni morbide con ritardo ~5s */
.header.cx-playing .info-wrap .img-fluid {
  transform: scale(0.62);
  transition: transform 1.3s ease 4.5s;
}
.header.cx-playing .info-wrap .plot-wrap {
  opacity: 0;
  max-height: 0;
  margin: 0;
  transition: opacity 0.5s ease 4.5s, max-height 0.7s ease 4.5s, margin 0.7s ease 4.5s;
}
.header.cx-playing .info-wrap .info-buttons {
  opacity: 0.18;
  transition: opacity 0.5s ease 4.5s;
}
.header.cx-playing .info-wrap .info-buttons:hover {
  opacity: 1;
  transition: opacity 0.2s ease;
}
/* anche i social (Telegram/Instagram) in alto a destra diventano trasparenti durante il trailer */
.header.cx-playing .billboard .social {
  opacity: 0.18;
  transition: opacity 0.5s ease 4.5s;
}
.header.cx-playing .billboard .social:hover {
  opacity: 1;
  transition: opacity 0.2s ease;
}
/* anche la scritta "Generi" in alto a sinistra diventa trasparente durante il trailer */
.header.cx-playing .billboard .sc-selector {
  opacity: 0.18;
  transition: opacity 0.5s ease 4.5s;
}
.header.cx-playing .billboard .sc-selector:hover,
.header.cx-playing .billboard .sc-selector.open {
  opacity: 1;
  transition: opacity 0.2s ease;
}
/* anche i dot sotto i bottoni diventano trasparenti durante il trailer */
.header.cx-playing .info-wrap .cx-hero-dots {
  opacity: 0.18;
  transition: opacity 0.5s ease 4.5s;
}
/* hover sui dot OPPURE sui pulsanti Riproduci/Altre info → i dot ricompaiono */
.header.cx-playing .info-wrap .cx-hero-dots:hover,
.header.cx-playing .info-wrap .info-buttons:hover ~ .cx-hero-dots {
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* ══════════════════════════════════════════════════════════════════
   Mobile (≤799px): le tile mostrano la LOCANDINA (cover) invece del
   backdrop — replica esatta dell'originale SC.
   orig .boxart: desktop padding 28.125% (16:9) · mobile padding-top:150% (2:3)
   ══════════════════════════════════════════════════════════════════ */
.slider-tile-inner .img-mobile { display: none; }            /* desktop: nascosta */
@media screen and (max-width: 799px) {
  .slider-tile-inner .img-desktop { display: none !important; }
  .slider-tile-inner .img-mobile  { display: block !important; object-fit: cover; }
  .slider-tile-inner .box-16x9 {
    padding-top: 150% !important;    /* 2:3 locandina */
    border-radius: 3px;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Menu mobile (drawer) — replica sidebar-mobile dell'originale SC.
   Misure originali: content width 80%/max 300px, translate(-100%)→0,
   transizione .2s; item height 50px padding 0 20px; menu padding 15px 0,
   font 16px; backdrop #00000040 in dissolvenza.
   ══════════════════════════════════════════════════════════════════ */
.cx-burger {
  display: none;                 /* desktop: nascosto (menu Bootstrap visibile) */
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: #fff;
  padding: 6px;
  margin-left: 4%;               /* orig .navbar-toggler margin-left:4% */
  cursor: pointer;
  line-height: 0;
}
@media (max-width: 767px) {
  .cx-burger { display: inline-flex; }
}
@media (min-width: 768px) {
  .cx-sidebar { display: none; } /* drawer solo su mobile */
}

html.cx-menu-open { overflow: hidden; }

.cx-sidebar {
  position: fixed;
  inset: 0;
  z-index: 3000;
  pointer-events: none;
  visibility: hidden;
}
.cx-sidebar-show { visibility: visible; }

.cx-sidebar-backdrop {
  position: absolute;
  inset: 0;
  background: #00000040;
  opacity: 0;
  transition: opacity .2s ease-in-out;
  pointer-events: auto;
}
.cx-sidebar-show .cx-sidebar-backdrop { opacity: 1; }

.cx-sidebar-content {
  position: relative;
  width: 80%;
  max-width: 300px;
  height: 100%;
  overflow-y: auto;
  background: var(--color-bg-base, #141414);
  box-shadow: 2px 0 5px #00000040;
  transform: translateX(-100%);
  transition: transform .2s ease-in-out;
  pointer-events: auto;
}
.cx-sidebar-show .cx-sidebar-content { transform: translateX(0); }

.cx-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.cx-sidebar-close {
  background: none;
  border: 0;
  color: #fff;
  padding: 4px;
  cursor: pointer;
  line-height: 0;
}

.cx-sidebar-menu {
  list-style: none;
  font-size: 16px;
  padding: 15px 0;
  margin: 0;
}
.cx-sidebar-item {
  height: 50px;
  width: 100%;
  display: flex;
  padding: 0 20px;
}
.cx-sidebar-item a {
  text-decoration: none;
  display: flex;
  align-items: center;
  color: #fff;
  width: 100%;
}
.cx-sidebar-item a:hover { color: var(--color-grey-10, #b3b3b3); }

/* Mobile (≤499px): "Top 10 titoli di oggi" attaccato tutto a sinistra come l'originale
   (annulla il padding-left calc(4% - 15px) di .slider-title) */
@media screen and (max-width: 499px) {
  .cx-top10 { padding-left: 0 !important; }
}