/* ==========================================================
   YouAndYou TV v2.0 RC2
   Hero Live CSS
   Production Ready
==========================================================*/


/* ===================================
   HERO SECTION
=================================== */

.hero-live{

    display:grid;

    grid-template-columns:70px minmax(0,2fr) minmax(320px,1fr) 70px;

    gap:24px;

    align-items:stretch;

    margin-bottom:45px;

}


/* ===================================
   NAV BUTTONS
=================================== */

.carousel-btn{

    width:60px;

    height:100%;

    min-height:520px;

    border-radius:18px;

    background:var(--card);

    color:#fff;

    font-size:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:var(--transition);

}

.carousel-btn:hover{

    background:var(--primary);

}


/* ===================================
   PLAYER CARD
=================================== */

.live-player-card{

    position:relative;

    background:#000;

    border-radius:20px;

    overflow:hidden;

    box-shadow:var(--shadow);

}


/* ===================================
   PLAYER
=================================== */

#livePlayer{

    width:100%;

    aspect-ratio:16/9;

    background:#000;

    object-fit:cover;

}


/* ===================================
   LOADER
=================================== */

.live-loader{

    position:absolute;

    inset:0;

    display:none;

    align-items:center;

    justify-content:center;

    background:rgba(0,0,0,.55);

    z-index:10;

}

.spinner{

    width:56px;

    height:56px;

    border:5px solid rgba(255,255,255,.2);

    border-top:5px solid var(--secondary);

    border-radius:50%;

    animation:spin 1s linear infinite;

}


/* ===================================
   LIVE INFO
=================================== */

.live-info{

    background:var(--card);

    border-radius:20px;

    padding:28px;

    display:flex;

    flex-direction:column;

}


/* ===================================
   LIVE BADGE
=================================== */

.live-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:max-content;

    padding:6px 14px;

    border-radius:999px;

    background:var(--primary);

    color:#fff;

    font-size:13px;

    font-weight:700;

    letter-spacing:.5px;

    margin-bottom:20px;

}


/* ===================================
   CHANNEL LOGO
=================================== */

.channel-logo{

    width:78px;

    height:78px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid var(--secondary);

    margin-bottom:18px;

}


/* ===================================
   CHANNEL TITLE
=================================== */

#liveChannel{

    font-size:30px;

    font-weight:700;

    margin-bottom:12px;

}


/* ===================================
   DESCRIPTION
=================================== */

#liveDescription{

    color:var(--text-light);

    margin-bottom:24px;

    line-height:1.7;

}


/* ===================================
   META
=================================== */

.live-meta{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-bottom:25px;

}

.live-meta span{

    background:var(--bg3);

    padding:8px 14px;

    border-radius:999px;

    font-size:14px;

}


/* ===================================
   WATCH BUTTON
=================================== */

.watch-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:52px;

    border-radius:14px;

    background:var(--primary);

    color:#fff;

    font-weight:700;

    transition:var(--transition);

}

.watch-btn:hover{

    background:var(--primary-hover);

}


/* ===================================
   UP NEXT
=================================== */

.up-next{

    margin-top:auto;

    border-top:1px solid var(--border);

    padding-top:22px;

}

.up-next small{

    display:block;

    color:var(--text-muted);

    margin-bottom:8px;

    letter-spacing:1px;

}

#nextChannel{

    font-size:18px;

    font-weight:600;

}


/* ===================================
   PLAYER FADE
=================================== */

.fade-player{

    animation:fadePlayer .35s ease;

}


/* ===================================
   RESPONSIVE
=================================== */

@media(max-width:1400px){

.hero-live{

grid-template-columns:60px minmax(0,2fr) 340px 60px;

}

}

@media(max-width:1200px){

.hero-live{

grid-template-columns:50px 1fr 320px 50px;

gap:18px;

}

.carousel-btn{

min-height:430px;

}

#liveChannel{

font-size:26px;

}

}

@media(max-width:992px){

.hero-live{

grid-template-columns:1fr;

}

.carousel-btn{

display:none;

}

.live-info{

padding:22px;

}

}

@media(max-width:768px){

.live-info{

padding:18px;

}

.channel-logo{

width:64px;

height:64px;

}

#liveChannel{

font-size:22px;

}

.live-meta{

gap:8px;

}

.live-meta span{

font-size:13px;

padding:7px 12px;

}

.watch-btn{

height:48px;

}

}

@media(max-width:480px){

.hero-live{

gap:16px;

}

.live-info{

padding:16px;

}

#liveDescription{

font-size:14px;

}

}