/* Live TV page skin
   - clean spacing so it doesn't hug the sidebar
   - responsive grid using auto-fill
   - card glow + center play with waves
   - LIVE (blinking dot) & Featured (blinking star) badges
*/
:root{
  --lv-accent:#9871ff;            /* changed to requested purple */
  --lv-card-1:#171727;
  --lv-card-2:#131323;
  --lv-chip:#23233a;
  --lv-chip-b:#2d3050;
  --lv-border:#242642;
  --lv-ink:#dde3ff;
}

:root{ --card-border-color:#9871ff; } /* purple */

.lv-page{padding:14px 18px 28px}

/* ------------ Filter bar ------------ */
.lv-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:6px 0 16px}
.lv-input,
.lv-select{
  height:38px; border-radius:10px; padding:0 12px;
  background:#0f1320; border:2px solid var(--lv-accent);                         /* purple + bolder */
box-shadow:0 0 0 1px rgba(152,113,255,.25) inset,          /* soft inner ring */
           0 10px 24px rgba(0,0,0,.25);                    /* keep drop shadow */ color:#e8ecff;
}
.lv-input{min-width:280px}
.lv-btn{
  height:38px; border-radius:10px; padding:0 14px; font-weight:800; border:0;
  display:inline-flex; align-items:center; justify-content:center;
}
.lv-btn.primary{background:var(--lv-accent); color:#fff}
.lv-btn.ghost{background:#23233a; color:#dbe4ff}

/* ------------ Grid ------------ */
.lv-grid{
  display:grid;
  /* bigger cards: 320 instead of 260 */
  grid-template-columns:repeat(auto-fill, minmax(420px,1fr));
  gap:18px;
}

/* ------------ Card ------------ */
/* Card wrapper: no back plate, no outer border */
.lv-card{
  background:transparent;              /* remove the dark panel */
  border:0;                            /* remove outer border line */
  border-radius:14px;
  position:relative;
  text-decoration:none; color:inherit;
  transition:transform .18s ease;
}
.lv-card:hover{ transform:translateY(-2px); }

/* art 16:9 on WHITE canvas so transparent logos/text show up */
.lv-art{
  position:relative;
  background:#fff center/cover no-repeat;               /* <- was #0e1220 */
  border:2px solid var(--card-border-color);
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(152,113,255,.25) inset,
             0 10px 24px rgba(0,0,0,.25);
}
.lv-card:hover .lv-art{
  box-shadow:0 22px 44px rgba(158,124,255,.28), 0 8px 20px rgba(0,0,0,.35);
}
.lv-art::before{content:""; display:block; padding-top:56.25%}

/* softer darkening—keeps the “grey” feel over white */
.lv-art::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.35) 100%);
  opacity:1;                                             /* constant */
  pointer-events:none; transition:none;
}
/* no hover fade change (keeps brightness consistent) */
.lv-card:hover .lv-art::after{ opacity:1; }


/* channel logo (optional) */
.lv-logo{
  position:absolute; left:14px; bottom:12px; height:28px; width:auto;
  border-radius:6px; background:rgba(0,0,0,.25); padding:4px 6px; display:block;
}

/* center play with two rings + caret
   - hidden by default
   - shows on hover
   - waves + caret in purple
   Also style .ltv-play for backward compatibility.
*/
.lv-play,.ltv-play{
  position:absolute; top:50%; left:50%;
  width:78px; height:78px; transform:translate(-50%,-50%) scale(.94);
  border-radius:50%;
  background:var(--lv-accent);                          /* purple */
  display:block;
  box-shadow:0 0 0 6px rgba(152,113,255,.25),            /* soft ring */
              0 10px 25px rgba(0,0,0,.35);               /* drop shadow */
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.lv-card:hover .lv-play,
.lv-card:hover .ltv-play{
  opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1);
}
/* bold white waves that radiate from behind the purple button */
.lv-play::before,.lv-play::after,
.ltv-play::before,.ltv-play::after{
  content:""; position:absolute; top:50%; left:50%;
  border-radius:50%; pointer-events:none;
  /* start centered and slightly smaller */
  transform:translate(-50%,-50%) scale(.85);
  /* bigger than the button and WHITE */
  width:120px; height:120px;
  border:12px solid rgba(255,255,255,.65);
  opacity:.75;
  animation:lv_wave 1.8s ease-out infinite;
  z-index:1;                       /* under the caret, over the art */
}
.lv-play::after,.ltv-play::after{
  width:160px; height:160px;
  opacity:.55; animation-delay:.5s;
}

/* white triangle, visually centered */
.lv-play i,.ltv-play i{
  position:absolute; top:50%; left:50%;
  transform:translate(-36%,-50%);                       /* visually centered */
  width:0; height:0;
  border-left:18px solid #fff;                          /* white icon */
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));
  z-index:2;
}
@keyframes lv_wave{
  0%   { transform:translate(-50%,-50%) scale(.85); opacity:.75; }
  70%  { opacity:.22; }
  100% { transform:translate(-50%,-50%) scale(1.6); opacity:0; }
}

/* badges */
.lv-badge{
  position:absolute; top:10px; left:10px; z-index:2;
  background:#ff3b30; color:#fff; padding:4px 10px; border-radius:999px;
  font-size:.78rem; font-weight:800; letter-spacing:.25px;
  display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  user-select:none;
}
.lv-badge .dot{
  width:8px; height:8px; border-radius:50%;
  background:#ffd24d; display:inline-block;
  animation:lv_blink 1s ease-in-out infinite;
}
@keyframes lv_blink{
  0%,100% { opacity:.35; transform:scale(.9); }
  50%     { opacity:1;   transform:scale(1);  }
}
.lv-badge.featured{
  left:auto; right:10px; background:#ffad33; color:#1c1406;
}
.lv-badge.featured .fa-star{animation:lv_blink 1.1s infinite}
@keyframes lv_blink{50%{opacity:.45}}

/* meta / chips — overlay on the image (centered) */
.lv-meta{
  position:absolute;
  left:14px; right:14px; bottom:12px;
  padding:0; margin:0;
  z-index:2;
  pointer-events:none;
  display:flex; flex-direction:column; gap:6px;
  align-items:center;             /* center children horizontally */
  text-align:center;              /* center text */
}

.lv-title{
  margin:0;
  font-size:1.05rem;
  color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-shadow:0 2px 6px rgba(0,0,0,.55), 0 1px 2px rgba(0,0,0,.85);
  text-align:center;              /* centered title */
}

.lv-chips{
  display:flex; gap:6px; flex-wrap:wrap;
  justify-content:center;         /* centered chips */
}


/* chips keep their pill look, just a touch more contrast on image */
.chip{
  background:rgba(35,35,58,.9);
  border:1px solid var(--lv-chip-b);
  color:#cfe2ff;
  padding:3px 8px; border-radius:999px; font-size:.74rem; font-weight:800;
}
.chip-ql{background:var(--lv-accent); color:#fff; border-color:transparent}

/* empty */
.lv-empty{padding:14px;color:#cbd5ff;opacity:.85}


/* === HOME — Live TV slider: target ˜ 427 × 240, sized by CSS === */
#liveHome .swiper-wrapper{ padding:4px 2px; align-items:stretch; }

#liveHome .swiper-wrapper > .swiper-slide{
  width:427px !important;
  max-width:427px !important;
  flex:0 0 427px !important;
  display:block !important;
}

#liveHome .lv-meta{ padding:10px 12px 12px !important; }
#liveHome .lv-title{ font-size:.95rem !important; }
#liveHome .lv-logo{ height:24px !important; }

/* responsive widths */
@media (max-width:1199.98px){
  #liveHome .swiper-wrapper > .swiper-slide{
    width:360px !important; flex:0 0 360px !important;
  }
}
@media (max-width:767.98px){
  #liveHome .swiper-wrapper > .swiper-slide{
    width:88vw !important; max-width:520px !important; flex:0 0 88vw !important;
  }
}

/* HOME — Live TV: control height explicitly */
#liveHome { --liveH: 240px; } /* set the height you want */

#liveHome .lv-art{
  display:block !important;
  height:var(--liveH) !important;      /* fixed height */
  min-height:var(--liveH) !important;  /* belt-and-suspenders */
  padding-top:0 !important;            /* neutralize any leftover padding */
}

/* make sure no ratio pseudo keeps forcing height */
#liveHome .lv-art::before{
  content:none !important;
  display:none !important;
  padding-top:0 !important;
}

/* ===== LIVE PAGE — responsive fixes ===== */

/* Tablet & small desktop: allow smaller cards */
@media (max-width: 991.98px){
  .lv-grid{
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

/* Phones/Mobile : ONE-UP grid + comfy sizing */
@media (max-width: 576px){
  .lv-page{ padding:12px 12px 24px; }

  .lv-grid{
    grid-template-columns: repeat(1, minmax(0,1fr)) !important; /* 1 card / row */
    gap:14px !important;
  }

  /* art */
  .lv-art{ border-width:1.5px; }
  .lv-art::before{ padding-top:56.25%; } /* back to 16:9 on full width */

  /* overlay content */
  .lv-meta{ left:12px; right:12px; bottom:10px; gap:6px; }
  .lv-title{ font-size:.95rem; }
  .lv-chips .chip{ font-size:.70rem; padding:3px 8px; }

  /* badges */
  .lv-badge{
    top:10px; left:10px; padding:4px 10px;
    font-size:.75rem; gap:7px;
  }
  .lv-badge.featured{ right:10px; left:auto; }

  /* corner logo */
  .lv-logo{ height:24px; left:10px; bottom:10px; padding:3px 6px; }

  /* play size on small screens */
  .lv-play{ width:68px; height:68px; }
  .lv-play::before{ width:108px; height:108px; border:10px solid rgba(255,255,255,.6); }
  .lv-play::after { width:150px; height:150px; }
}