/**
 * Standard Logo CSS - من live-player.html
 * يطبق على جميع الصفحات
 */

/* Logo Container */
.logo,
.header-logo,
.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Logo Icon */
.logo .logo-icon,
.header-logo .logo-icon,
.sidebar-logo {
    width: 38px;
    height: 38px;
    background: #e50914;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.9rem;
    flex-shrink: 0;
}

.logo .logo-icon i,
.header-logo .logo-icon i,
.sidebar-logo i {
    font-size: 0.9rem;
    color: white;
}

/* Logo Text */
.logo .logo-text,
.header-logo .logo-text {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.1;
    align-items: flex-start;
}

.logo .logo-text .brand,
.header-logo .logo-text .brand {
    font-size: 1.2rem;
    font-weight: 700;
    display: block !important;
    white-space: nowrap;
}

.logo .logo-text .brand .super,
.header-logo .logo-text .brand .super {
    color: #ffffff;
}

.logo .logo-text .brand .iptv,
.header-logo .logo-text .brand .iptv {
    color: #e50914;
    font-weight: 800;
}

.logo .logo-text .tagline,
.header-logo .logo-text .tagline {
    font-size: 0.5rem;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block !important;
    margin-top: 2px;
    white-space: nowrap;
    width: 100%;
}

/* CRITICAL: Override any inline display rules */
.logo .logo-text span.tagline,
.header-logo .logo-text span.tagline {
    display: block !important;
}

/* Hover Effects */
.logo:hover .logo-icon,
.header-logo:hover .logo-icon,
.sidebar-logo:hover {
    background: #f40612;
    transform: scale(1.05);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .logo,
    .header-logo {
        gap: 10px;
    }
    
    .logo .logo-icon,
    .header-logo .logo-icon {
        width: 38px;
        height: 38px;
        font-size: 0.9rem;
    }
    
    .logo .logo-text,
    .header-logo .logo-text {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .logo .logo-text .brand,
    .header-logo .logo-text .brand {
        font-size: 1.2rem;
        display: block !important;
    }
    
    .logo .logo-text .tagline,
    .header-logo .logo-text .tagline,
    .logo .logo-text span.tagline,
    .header-logo .logo-text span.tagline {
        font-size: 0.5rem;
        display: block !important;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .logo .logo-icon,
    .header-logo .logo-icon {
        width: 38px;
        height: 38px;
        font-size: 0.9rem;
    }
    
    .logo .logo-text,
    .header-logo .logo-text {
        display: flex !important;
        flex-direction: column !important;
    }
    
    .logo .logo-text .brand,
    .header-logo .logo-text .brand {
        font-size: 1.2rem;
        display: block !important;
    }
    
    .logo .logo-text .tagline,
    .header-logo .logo-text .tagline,
    .logo .logo-text span.tagline,
    .header-logo .logo-text span.tagline {
        display: block !important;
        width: 100%;
    }
}