/* ==========================================
   LIVE PAGE
========================================== */

.live-page{

    max-width:1600px;

    margin:35px auto;

    padding:0 25px;

}

/* ==========================================
   PLAYER + CHAT
========================================== */

.live-top{

    display:grid;

    grid-template-columns:minmax(0,1fr) 380px;

    gap:25px;

    align-items:start;

}

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



.live-player iframe {
    
    width: 100%;
    
    height: 100%;
    
    position: absolute;
    
    inset: 0;
    
    border: none;
    
}
/* ==========================================
   CHAT
========================================== */

.live-chat{

    background:#131722;

    border-radius:20px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.06);

    display:flex;

    flex-direction:column;

    height:100%;

    min-height:540px;

}

.chat-header{

    padding:18px 20px;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.chat-header h3{

    color:#fff;

    font-size:18px;

}

.chat-messages{

    flex:1;

    overflow:auto;

    padding:18px;

}

.chat-input{

    display:flex;

    gap:10px;

    padding:15px;

    border-top:1px solid rgba(255,255,255,.06);

}

.chat-input input{

    flex:1;

    background:#0d1018;

    border:1px solid rgba(255,255,255,.08);

    color:#fff;

    border-radius:12px;

    padding:12px;

    outline:none;

}

.chat-input input:focus{

    border-color:#3b82f6;

}

.chat-input button{

    background:#3b82f6;

    color:#fff;

    border:none;

    padding:12px 18px;

    border-radius:12px;

    cursor:pointer;

    transition:.25s;

}

.chat-input button:hover{

    background:#4b92ff;

}

/* ==========================================
   STREAMER
========================================== */

.streamer-info{

    margin-top:30px;

    background:#141922;

    border-radius:20px;

    padding:25px;

    border:1px solid rgba(255,255,255,.06);

}

.streamer-header{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:20px;

}

.streamer-avatar{

    width:82px;

    height:82px;

    border-radius:50%;

    object-fit:cover;

    border:3px solid #3b82f6;

}

.streamer-header h2{

    color:#fff;

    font-size:24px;

}

.streamer-header p{

    color:#8f9cb4;

    margin-top:5px;

}

.streamer-header span{

    color:#3b82f6;

    font-size:14px;

}

.seguir-streamer{

    margin-left:auto;

    background:linear-gradient(
        135deg,
        #3b82f6,
        #2563eb
    );

    border:none;

    color:#fff;

    padding:13px 22px;

    border-radius:12px;

    cursor:pointer;

    font-weight:600;

    transition:.25s;

}

.seguir-streamer:hover{

    transform:translateY(-2px);

    box-shadow:0 0 25px rgba(59,130,246,.35);

}

.streamer-info h1{

    color:#fff;

    margin-bottom:15px;

}

.streamer-info p{

    color:#b8c0d4;

    line-height:1.6;

}

.streamer-info span{

    color:#67a4ff;

}

/* ==========================================
   BLOCOS ABAIXO
========================================== */

#produtosStreamer,
#postsStreamer,
#livesRelacionadas{

    margin-top:25px;

    background:#141922;

    border-radius:20px;

    padding:25px;

    border:1px solid rgba(255,255,255,.06);

    min-height:180px;

}

.player-placeholder{

    text-align:center;

}

.play-circle {
    
    display: flex;
    
    align-items: center;
    
    justify-content: center;
    
}

.player-placeholder h2{

    color:#fff;

    margin-bottom:10px;

}

.player-placeholder p{

    color:#8d98b0;

}

.watch-live {
    
    position: absolute;
    
    left: 50%;
    
    top: 50%;
    
    transform: translate(-50%, -50%);
    
    padding: 12px 22px;
    
    border: none;
    
    border-radius: 12px;
    
    background: #2f7dff;
    
    color: #fff;
    
    font-weight: 700;
    
    opacity: 0;
    
    transition: .25s;
    
    pointer-events: none;
    
}

.live-card:hover .watch-live {
    
    opacity: 1;
    
}

.end-live-btn {
    
    background: #d92c2c;
    
    color: #fff;
    
    border: none;
    
    padding: 14px 22px;
    
    border-radius: 12px;
    
    font-weight: 700;
    
    cursor: pointer;
    
    transition: .25s;
    
    margin-top: 20px;
    
}

.end-live-btn:hover {
    
    background: #f24141;
    
    transform: translateY(-2px);
    
    box-shadow: 0 10px 25px rgba(217, 44, 44, .35);
    
}

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

.live-player {
    
    width: 100%;
    
    aspect-ratio: 16 / 9;
    
    position: relative;
    
    border-radius: 20px;
    
    overflow: hidden;
    
    background: #10131c;
    
    border: 1px solid rgba(255, 255, 255, .06);
    
    box-shadow:
        0 20px 60px rgba(0, 0, 0, .45),
        0 0 30px rgba(59, 130, 246, .10);
    
}
/* camada por cima do player */

.player-overlay{

    position:absolute;

    top:0;
    left:0;
    right:0;
    bottom:0;


    width:100%;
    height:100%;


    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;


    text-align:center;


    background:

    linear-gradient(
        135deg,
        rgba(15,23,42,.90),
        rgba(37,99,235,.25)
    );


    z-index:10;

}



/* botão */

.play-circle button{


    width:90px;

    height:90px;


    border-radius:50%;


    border:none;


    background:

    linear-gradient(
        135deg,
        #3b82f6,
        #2563eb
    );


    color:white;


    font-size:35px;


    cursor:pointer;


    display:flex;

    align-items:center;

    justify-content:center;


    box-shadow:

    0 0 40px rgba(59,130,246,.6);


}