/* ==========================================
   EYESCODE LIVES PAGE
   BUSCA + FILTROS
========================================== */


.lives-page {
    
    padding: 20px;
    
}



/* ==========================================
   ÁREA DE BUSCA
========================================== */


.live-tools {
    
    display: flex;
    
    align-items: center;
    
    justify-content: space-between;
    
    gap: 20px;
    
    margin: 25px 0;
    
    
}



/* ==========================================
   BUSCA
========================================== */


.live-search-box{
    
    flex: 1;
    
    max-width: 600px;
    
    height: 48px;
    
    display: flex;
    
    align-items: center;
    
    gap: 12px;
    
    
    background: #111827;
    
    border: 1px solid rgba(255, 255, 255, .08);
    
    border-radius: 16px;
    
    
    padding: 0 18px;
    
    
    color: #94a3b8;
    
}



.live-search-box i {
    
    font-size: 18px;
    
}



.live-search-box input {
    
    
    width: 100%;
    
    height: 100%;
    
    
    background: none;
    
    border: none;
    
    outline: none;
    
    
    color: white;
    
    font-size: 15px;
    
    
}



.live-search input::placeholder {
    
    color: #64748b;
    
}




/* ==========================================
   FILTROS
========================================== */


.live-filters {
    
    
    display: flex;
    
    gap: 10px;
    
}



.live-filters button {
    
    
    height: 42px;
    
    padding: 0 18px;
    
    
    border-radius: 999px;
    
    
    border: 1px solid rgba(255, 255, 255, .08);
    
    
    background: #111827;
    
    
    color: #cbd5e1;
    
    
    font-weight: 600;
    
    
    cursor: pointer;
    
    
    transition: .25s;
    
    
}



.live-filters button:hover {
    
    
    background: #2563eb;
    
    color: white;
    
    border-color: #2563eb;
    
    
}





/* ==========================================
   MOBILE
========================================== */


@media(max-width:700px) {
    
    
    
    .lives-page {
        
        padding: 15px;
        
    }
    
    
    
.live-search-section {
    
    display: flex;
    
    align-items: center;
    
    justify-content: space-between;
    
    gap: 20px;
    
    margin: 25px 0;
    
}
    
    
    
    .live-search {
        
        
        max-width: none;
        
        width: 100%;
        
        
    }
    
    
    
    .live-filters {
        
        
        overflow-x: auto;
        
        padding-bottom: 5px;
        
        
    }
    
    
    
    .live-filters button {
        
        
        flex-shrink: 0;
        
    }
    
    
    
}

.live-streamers {
    
    display: flex;
    
    gap: 20px;
    
    overflow-x: auto;
    
    padding: 10px 0;
    
}



.live-streamer {
    
    text-align: center;
    
    min-width: 70px;
    
}



.streamer-avatar {
    
    width: 55px;
    
    height: 55px;
    
    position: relative;
    
}



.streamer-avatar img {
    
    width: 100%;
    
    height: 100%;
    
    object-fit: cover;
    
    border-radius: 50%;
    
    border: 3px solid #ef4444;
    
}



.streamer-avatar span {
    
    position: absolute;
    
    right: 0;
    
    bottom: 3px;
    
    width: 14px;
    
    height: 14px;
    
    background: #ef4444;
    
    border-radius: 50%;
    
    border: 2px solid #111827;
    
}



.live-streamer p {
    
    font-size: 12px;
    
    color: white;
    
    margin-top: 8px;
    
    overflow: hidden;
    
    text-overflow: ellipsis;
    
}

/* ==========================================
   STREAMERS AO VIVO
========================================== */

.live-streamers-carousel {
    
    display: flex;
    
    gap: 18px;
    
    overflow-x: auto;
    
    padding: 10px 0;
    
}


.live-streamer {
    
    flex-shrink: 0;
    
    text-align: center;
    
}


.streamer-avatar {
    
    position: relative;
    
    width: 64px;
    
    height: 64px;
    
}



.streamer-avatar img {
    
    width: 100%;
    
    height: 100%;
    
    border-radius: 50%;
    
    object-fit: cover;
    
    border: 3px solid #ef4444;
    
}



.live-dot {
    
    position: absolute;
    
    bottom: 0;
    
    right: 0;
    
    font-size: 14px;
    
}



.live-streamer p {
    
    margin-top: 8px;
    
    color: white;
    
    font-size: 12px;
    
    max-width: 70px;
    
    overflow: hidden;
    
    text-overflow: ellipsis;
    
    white-space: nowrap;
    
}

/* ==========================================
   AJUSTE DE ESPAÇAMENTO ENTRE SEÇÕES
========================================== */
@media(max-width:700px) {
    
    .live-search-section {
        
        flex-direction: column;
        
        align-items: stretch;
        
    }
    
}

.featured-live-section {
    
    margin-bottom: 30px;
    
}


.live-search-section {
    
    margin-top: 0;
    
    margin-bottom: 35px;
    
}


.community-live-section {
    
    margin-top: 30px;
    
}



@media(max-width:700px) {
    
    
    .featured-live-section {
        
        margin-bottom: 20px;
        
    }
    
    
    
    .live-search-section {
        
        margin-bottom: 25px;
        
    }
    
    
    
    .community-live-section,
    .live-streamers-section,
    .all-lives-section {
        
        margin-top: 25px;
        
    }
    
    
}

/* ==========================================
   RESULTADO DA BUSCA DE LIVES
========================================== */

.live-search-results {
    
    display: none;
    
    margin-top: 10px;
    
    width: 100%;
    
    max-width: 600px;
    
    background: #111827;
    
    border: 1px solid rgba(255, 255, 255, .08);
    
    border-radius: 16px;
    
    overflow: hidden;
    
    animation: liveSearchIn .25s ease;
    
}



/* ANIMAÇÃO ENTRADA */

@keyframes liveSearchIn {
    
    
    from {
        
        opacity: 0;
        
        transform:
            translateY(-8px);
        
    }
    
    
    to {
        
        opacity: 1;
        
        transform:
            translateY(0);
        
    }
    
    
}



/* ITEM */

.live-search-item {
    
    display: flex;
    
    align-items: center;
    
    gap: 12px;
    
    padding: 12px;
    
    text-decoration: none;
    
    color: white;
    
    transition: .25s;
    
}



.live-search-item:hover {
    
    background: #1e293b;
    
}



/* AVATAR */

.live-search-item img {
    
    width: 45px;
    
    height: 45px;
    
    border-radius: 50%;
    
    object-fit: cover;
    
    border: 2px solid #ef4444;
    
    flex-shrink: 0;
    
}



/* TEXTO */

.live-search-item div {
    
    min-width: 0;
    
}



.live-search-item strong {
    
    display: block;
    
    font-size: 14px;
    
}



.live-search-item span {
    
    display: block;
    
    color: #60a5fa;
    
    font-size: 12px;
    
}



.live-search-item p {
    
    margin: 3px 0 0;
    
    color: #94a3b8;
    
    font-size: 12px;
    
    white-space: nowrap;
    
    overflow: hidden;
    
    text-overflow: ellipsis;
    
}



/* MOBILE */

@media(max-width:700px) {
    
    
    .live-search-results {
        
        max-width: none;
        
    }
    
    
    
    .live-search-item {
        
        padding: 10px;
        
    }
    
    
    
}
.live-search-item {
    
    animation: resultItem .2s ease;
    
}


@keyframes resultItem {
    
    
    from {
        
        opacity: 0;
        
        transform: translateX(-10px);
        
    }
    
    
    to {
        
        opacity: 1;
        
        transform: translateX(0);
        
    }
    
    
}

.live-search-results.hide-search-results {
    
    
    animation:
        liveSearchOut .2s ease forwards;
    
    
}



@keyframes liveSearchOut {
    
    
    from {
        
        opacity: 1;
        
        transform:
            translateY(0);
        
    }
    
    
    to {
        
        opacity: 0;
        
        transform:
            translateY(-8px);
        
    }
    
    
}