:root {
    --bg: #f1f5f9; 
    --card: #ffffff; 
    --text: #1e293b; 
    --accent: #2563eb;
    --live: #ef4444; 
    --gray: #64748b;
    --primary: #2563eb;
}

[data-theme="dark"] {
    --bg: #0f172a; 
    --card: #1e293b; 
    --text: #f8fafc; 
    --accent: #3b82f6;
}

body { 
    font-family: 'Inter', sans-serif; 
    background: var(--bg); 
    color: var(--text); 
    margin: 0; 
    overflow-x: hidden; 
}

/* --- Header & Navigation --- */
header { 
    display: flex; 
    justify-content: space-between; 
    padding: 15px 5%; 
    background: var(--card); 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-left { display: flex; align-items: center; gap: 15px; }
.logo { font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 600; color: var(--text); }
.logo span { color: var(--accent); }

.filter-bar { display: flex; justify-content: center; gap: 10px; padding: 20px; flex-wrap: wrap; }
.filter-btn { 
    padding: 8px 18px; 
    border-radius: 20px; 
    border: 1px solid rgba(0,0,0,0.1); 
    cursor: pointer; 
    background: var(--card); 
    color: var(--text); 
    font-weight: 600; 
    transition: 0.3s;
}
.filter-btn.active { background: var(--accent); color: rgb(211, 210, 210); border-color: var(--accent); }

/* --- Match Card --- */
.match-card {
    background: var(--card);
    width: 95%; 
    max-width: 480px;
    margin: 15px auto;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    box-sizing: border-box;
    overflow: hidden;
}

.card-header { display: flex; justify-content: space-between; margin-bottom: 12px; align-items: center; }
.status-badge { font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 6px; text-transform: uppercase; }
.status-live { background: #fee2e2; color: var(--live); }
.status-sched { background: #e0f2fe; color: #0369a1; }
.status-ended { background: #e2e8f0; color: #475569; }

.teams-grid { display: grid; grid-template-columns: 1fr 80px 1fr; align-items: center; text-align: center; }
.team img { width: 48px; height: 48px; object-fit: contain; }
.team p { font-size: 13px; font-weight: 700; margin: 8px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.match-center { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.score-display { font-size: 20px; font-weight: 800; color: var(--accent); letter-spacing: 1px; }
.timer-text { font-size: 11px; color: var(--gray); margin-top: 4px; font-weight: 600; }

.watch-btn {
    display: block; width: 100%; text-align: center; margin-top: 15px; 
    padding: 12px; background: var(--accent); color: rgb(255, 255, 255); 
    text-decoration: none; border-radius: 10px; font-weight: 700; font-size: 14px;
}

/* --- Watch Page Specifics --- */
.video-section {
    width: 95%;
    max-width: 780px; 
    margin: 0 auto;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    position: relative;
}

.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; 
    background: #000;

    -webkit-user-select: none; /* Disable text selection */
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

}

.video-container::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 999;
    background: transparent;
    pointer-events: all; 
    cursor: default;
}

.video-container.youtube-mode::after,
.video-container.is-untouchable::after {
    pointer-events: all !important;
}
.video-container.allow-click::after {
    pointer-events: none !important;
}

#video-player {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border: none;
    z-index: 1;
}

.stream-selector-container {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

.stream-selector {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.stream-selector .filter-btn {
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 6px;
    background: var(--card);
}

.player-controls {
    display: flex;
    justify-content: space-between;
    padding: 12px 15px;
    background: #111;
    color: white;
    position: relative;
    z-index: 10;
}

.ctrl-group { display: flex; gap: 8px; }

.player-controls button {
    background: #333;
    border: none;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}

.player-controls button:hover { background: #444; }

.watch-info {
    width: 95%;
    max-width: 780px; 
    margin: 20px auto;
}

.description-card {
    background: var(--card);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.description-card h3 {
    margin-top: 0;
    font-size: 16px;
    color: var(--accent);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.description-card p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--gray);
    margin: 0;
}

.back-btn { background: none; border: none; font-size: 18px; color: var(--text); cursor: pointer; }
#score-axis-widget { width: 95%; max-width: 780px; margin: 20px auto; }
.player-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #1a1a1a; color: white; z-index: 15; }

.live-min-google {
    color: var(--live);
    font-size: 12px;
    font-weight: 800;
    margin-top: 2px;
    animation: blinker 1.5s linear infinite;
}

@keyframes blinker {
    50% { opacity: 0.5; }
}

/* --- FIXED EMBED STYLES --- */
.embed-container {
    width: 100%;
    min-height: 150px; /* Added higher min-height for initial load */
    overflow: visible; /* Changed from hidden to allow widget growth */
    border-radius: 8px;
    background: transparent;
    margin-bottom: 10px;
}

.scoreaxis-widget {
    margin-top: 10px;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 120px;
    box-sizing: border-box;
}

.embed-container iframe {
    width: 100% !important;
    min-height: 120px;
    border: none !important;
    display: block;
}



/* News Portal Hero */
.hero-portal { background: var(--card); padding: 50px 5%; text-align: center; border-bottom: 3px solid var(--accent); }
.hero-portal h3 { font-family: 'Poppins'; font-size: 2.5rem; margin-bottom: 10px; margin-top:0%; }
.live-shortcuts { display: flex; justify-content: center; gap: 15px; margin-top: 25px; flex-wrap: wrap; }
.shortcut-btn { 
    background: var(--accent); color: white; padding: 12px 25px; 
    border-radius: 50px; text-decoration: none; font-weight: 700; transition: 0.3s;

}
.shortcut-btn:hover { transform: scale(1.05); background: #1e40af; }

/* News Grid */
/* News Grid */
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px;
    padding: 20px 0;
}

/* Sky Sports Style Card */
.news-card {
    background: var(--card-bg, #ffffff);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0,0,0,0.05);
}

.news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.12);
}

.news-img-wrapper {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.news-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.news-card:hover .news-img {
    transform: scale(1.05);
}

/* ADD THIS UPDATED VERSION */
.card-labels-overlay {
    position: absolute;
    bottom: 12px; /* Original "Latest" position */
    left: 12px;
    display: flex;
    flex-direction: row; /* Aligns them side-by-side */
    align-items: center; /* Centers them vertically on the same line */
    gap: 10px; /* Space between the badge and the sport text */
    z-index: 10;
}

/* "News Type" - The Badge (The "Latest" style) */
.news-category {
    background: #991531; /* Your original Crimson Red or use var(--accent) */
    color: white;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
    white-space: nowrap;
}

/* "Sport Type" - The White Text to the right */
.card-sport-label {
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 0 1px 4px rgba(0,0,0,0.8);
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.news-info {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.news-date {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px;
    display: block;
}

.news-info h3 {
    font-size: 1.25rem;
    margin-bottom: 12px;
    line-height: 1.3;
    color: #0f172a;
    font-family: 'Poppins', sans-serif;
}

.news-preview-text {
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 20px;
}

.news-footer {
    margin-top: auto;
    padding-top: 15px;
    border-top: 1px solid #f1f5f9;
}

.read-more-btn {
    color: #2563eb;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Dark Mode Overrides */
[data-theme='dark'] .news-card {
    background: #1e293b;
    border-color: #334155;
}
[data-theme='dark'] .news-info h3 { color: #f8fafc; }
[data-theme='dark'] .news-preview-text { color: #94a3b8; }

/* 
footer { background: var(--card); padding: 40px 5%; margin-top: 50px; border-top: 1px solid #ddd; text-align: center; }
*/
/* Ad Placeholders */
.ad-slot-news, .ad-top-card { 
    background: #f8fafc; border: 1px dashed #cbd5e1; 
    text-align: center; padding: 10px; margin: 10px 0; min-height: 50px;
}

/* Base Footer Style */
footer {
    background: var(--card);
    padding: 20px 5%;
    margin-top: 60px;
    border-top: 1px solid rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.4s ease, bottom 0.4s ease; /* Smooth sliding animation */
    width: 100%;
    box-sizing: border-box;
    z-index: 1000;
}
.footer-links { margin: 15px 0; }
.footer-links a { margin: 0 15px; text-decoration: none; color: var(--accent); font-weight: 600; }


/* The "Overlay" state when scrolling down */
footer.sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
    border-top: 2px solid var(--accent);
    padding: 10px 5%; /* Slightly slimmer when sticky */
}

/* Optional: Hide footer when scrolling UP to reveal content, */
 


 
 .ad-container { 
            background: #f8fafc; border: 1px dashed #cbd5e1; 
            padding: 20px; margin:  0; text-align: center; border-radius: 10px;
        }  

         /* Live Timer Pill */
        .live-timer {
            display: inline-block;
            background: #ef4444;
            color: white;
            padding: 2px 10px;
            border-radius: 4px;
            font-size: 12px;
            margin-top: 5px;
            font-weight: bold;
            font-family: monospace;
        }

        /* Description Styling */
        #match-desc h2 { font-size: 1.2rem; margin: 15px 0 10px; color: var(--primary); }
        #match-desc p { margin-bottom: 10px; line-height: 1.6; }

        /* Fullscreen & Redirect Protection Styles */
        #fullscreen-target {
            background: var(--bg);
            transition: background 0.3s ease;
        }

      /* --- ENHANCED FULLSCREEN & MINIMIZE STYLING --- */

/* This targets the section when it enters Fullscreen mode */
#fullscreen-target:fullscreen {
    display: flex !important;
    flex-direction: column !important;
    background: #000 !important;
    width: 100vw !important;
    height: 100vh !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Safari/iOS Specific Fullscreen Fix */
#fullscreen-target:-webkit-full-screen {
    display: flex !important;
    flex-direction: column !important;
    background: #000 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Make the video container expand to fill the top area */
#fullscreen-target:fullscreen .video-container {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0 !important; /* Reset the 16:9 aspect ratio padding */
    height: auto;
}

/* Force the iframe to be centered and large in fullscreen */
#fullscreen-target:fullscreen #video-player {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 100vh;
}

/* Ensure controls stay at the bottom in fullscreen */
#fullscreen-target:fullscreen .player-controls {
    width: 100%;
    background: rgba(20, 20, 20, 0.95); /* Darker background for focus */
    padding: 15px 25px;
    border-top: 1px solid #333;
    box-sizing: border-box;
    z-index: 2000;
}

/* Styling the 'Minimize' button state specifically */
#fullscreen-btn i.fa-compress {
    color: #fbbf24; /* Make the compress icon a different color to stand out */
}

/* Fix for mobile: Hide headers and ads when in fullscreen */
#fullscreen-target:fullscreen ~ header, 
#fullscreen-target:fullscreen ~ .match-meta-top,
#fullscreen-target:fullscreen ~ .ad-container {
    display: none !important;
}

      

        #fullscreen-target:fullscreen .player-controls {
            background: rgba(0,0,0,0.8);
            padding: 15px;
        }

        /* Safari/iOS Fullscreen Fixes */
        #fullscreen-target:-webkit-full-screen { width: 100%; height: 100%; background: #000; }
        
        .video-container {
            position: relative;
            background: #000;
            overflow: hidden;
        }

        /* Ensure the overlay doesn't block interactions once the match is live */
        #no-video-ui {
            pointer-events: none;
            z-index: 5;
        }