/**
 * Zilo Sports - Main Stylesheet
 */

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0a0a0f; }
::-webkit-scrollbar-thumb { background: #222230; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #00d4ff; }

/* Selection */
::selection {
    background: rgba(0, 212, 255, 0.3);
    color: white;
}

/* Focus Visible */
:focus-visible {
    outline: 2px solid #00d4ff;
    outline-offset: 2px;
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

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

.animate-fade-in {
    animation: fadeIn 0.5s ease-out;
}

.animate-slide-in {
    animation: slideIn 0.3s ease-out;
}

/* Glass Card */
.glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Gradient Border */
.gradient-border {
    position: relative;
}

.gradient-border::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, #00d4ff, #00ff87);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

/* Shimmer Loading Effect */
.shimmer {
    background: linear-gradient(90deg, #1a1a25 25%, #222230 50%, #1a1a25 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Hover Lift Effect */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

/* Status Indicators */
.status-live {
    position: relative;
}

.status-live::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;
    border: 2px solid #ef4444;
    animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.02); }
}

/* Video Player Overrides */
.video-js .vjs-control-bar {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9)) !important;
}

.video-js .vjs-play-progress,
.video-js .vjs-volume-level {
    background-color: #00d4ff !important;
}

.video-js .vjs-slider {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Tooltip */
[data-tooltip] {
    position: relative;
}

[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: #222230;
    color: white;
    font-size: 12px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 100;
}

/* Print Styles */
@media print {
    nav, footer, .no-print { display: none !important; }
    body { background: white; color: black; }
}