/* LC Top 10 Hits - Frontend */
.lc-top10-wrap {
  display: grid;
  gap: 16px;
}
.lc-top10-wrap.columns-1 { grid-template-columns: repeat(1, 1fr); }
.lc-top10-wrap.columns-2 { grid-template-columns: repeat(2, 1fr); }
.lc-top10-wrap.columns-3 { grid-template-columns: repeat(3, 1fr); }
.lc-top10-wrap.columns-4 { grid-template-columns: repeat(4, 1fr); }
.lc-top10-wrap.columns-5 { grid-template-columns: repeat(5, 1fr); }
.lc-top10-wrap.columns-6 { grid-template-columns: repeat(6, 1fr); }

@media (max-width: 1024px) { .lc-top10-wrap { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 640px)  { .lc-top10-wrap { grid-template-columns: repeat(1, 1fr) !important; } }

.lc-top10-item { position: relative; display: block; text-decoration: none; color: inherit; background: #fff; border: 1px solid #eee; overflow: visible; transition: transform .2s ease, box-shadow .2s ease; border-radius: 16px; }
.lc-top10-wrap.is-rounded .lc-top10-item,
.lc-top10-wrap.is-rounded .lc-thumb,
.lc-top10-wrap.is-rounded .lc-thumb img { border-radius: 16px; }

.lc-top10-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
}

.lc-thumb{ position: relative; aspect-ratio: var(--lc-ar, 16/9); overflow: hidden; height: var(--lc-thumb-h, auto); }
@media (max-width: 640px){
  .lc-thumb{ height: var(--lc-thumb-h-m, var(--lc-thumb-h, auto)); }
}
.lc-thumb img{ width:100%; height:100%; object-fit: var(--lc-fit, cover); background-color:#000; display:block; transform: scale(var(--lc-thumb-zoom,1)); transform-origin:center center; }

.lc-info{ display:flex; align-items:center; gap:12px; padding:10px 12px; }
.lc-pos{
  font-size: 32px;
  font-weight: 800;
  color: var(--lc-pos-color, #ff3b85);
  line-height: 1;
  min-width: 44px;
}
.lc-title{ font-size: 16px; line-height: 1.2; margin: 0; }

/* Dots acima do último card visível */
.lc-last .lc-dot-nav{ position:absolute; display:flex; gap:8px; top:-22px; right:8px; z-index:3; }
.lc-last.no-arrows .lc-dot-nav{ right:8px; }
.lc-dot-nav button{
  width:8px; height:8px; border-radius:50%;
  background:#c9c2dc; border:0; opacity:.6; cursor:pointer; padding:0;
}
.lc-dot-nav button.is-active{ opacity:1; transform:scale(1.25); background:#8a5adb; }

/* Arrows (padrão estilo do anexo: finas, pequenas e roxas) */
.lc-last .lc-arrow-nav{ position:absolute; top: calc(-1 * var(--lc-arrow-h,18px) - 10px); right: -10px; display:flex; gap: var(--lc-arrow-gap,16px); z-index:4; }
.lc-arrow-nav button{ width: var(--lc-arrow-w,28px); height: var(--lc-arrow-h,18px); background:transparent; border:0; padding:0; cursor:pointer; color: var(--lc-arrow-color,#8a5adb); font-size: var(--lc-arrow-fs,18px); line-height:1; }
.lc-arrow-nav button:hover{ opacity:.85; }

/* Modal */
.lc-top10-modal[hidden]{display:none;}
.lc-top10-modal{ position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; }
.lc-top10-backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.7); }
.lc-top10-dialog{ position: relative; width: min(92vw, 920px); background: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.lc-top10-player{ position: relative; width: 100%; aspect-ratio: 16/9; }
.lc-top10-player iframe{ position:absolute; inset:0; width:100%; height:100%; }
.lc-top10-close{ position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; border: 0; border-radius: 999px; background: rgba(255,255,255,.15); color:#fff; font-size: 18px; line-height: 1; cursor: pointer; }
.lc-top10-close:hover{ background: rgba(255,255,255,.30); }

@media (max-width: 640px){ .lc-thumb img{ transform: scale(var(--lc-thumb-zoom-m, var(--lc-thumb-zoom,1))); } }


/* Play overlay on hover */
.lc-thumb{ background:#000; position: relative; }
.lc-top10-item .lc-thumb::after{
  content:''; position:absolute; inset:0; display:block; transform: scale(var(--lc-thumb-zoom,1)); transform-origin:center center; opacity:0; transition:opacity .2s ease;
  background: radial-gradient(circle at center, rgba(0,0,0,.0) 40%, rgba(0,0,0,.35) 100%);
}
.lc-top10-item .lc-thumb::before{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.85);
  width:62px; height:62px; border-radius:50%; background:#ff5252;
  box-shadow: 0 4px 12px rgba(0,0,0,.25); opacity:0; transition:transform .2s ease, opacity .2s ease;
}
.lc-top10-item:hover .lc-thumb::after{ opacity:1; }
.lc-top10-item:hover .lc-thumb::before{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.lc-top10-item .lc-thumb .lc-play-icon{
  position:absolute; left:50%; top:50%; transform:translate(-46%,-50%); width:0; height:0; border-left:18px solid #fff; border-top:12px solid transparent; border-bottom:12px solid transparent; z-index:2; opacity:0; transition: opacity .2s ease;
}
.lc-top10-item:hover .lc-thumb .lc-play-icon{ opacity:1; }



/* --- Enforce theme-agnostic colors (Hello/Elementor conflicts) --- */
.lc-top10-wrap .lc-arrow-nav button{
  color: var(--lc-arrow-color, #8a5adb) !important;
  border-color: currentColor !important;
  background: transparent;
}
.lc-top10-wrap .lc-arrow-nav button svg{
  fill: var(--lc-arrow-color, #8a5adb) !important;
  stroke: var(--lc-arrow-color, #8a5adb) !important;
}
.lc-top10-wrap .lc-pos{
  color: var(--lc-pos-color, #ff3b85) !important;
}