/* ================= WRAPPER ================= */

.live-wrapper{
max-width:820px;
margin:auto;
padding:25px;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
line-height:1.6;
background:#fff;
}

/* ================= HEADER ================= */

.live-header{
margin-bottom:20px;
}

.live-badge{
background:#e10600;
color:#fff;
padding:6px 12px;
font-size:12px;
font-weight:700;
border-radius:4px;
display:inline-flex;
align-items:center;
gap:6px;
letter-spacing:0.5px;
}

/* ðŸ”´ header dot */

/* LIVE मा मात्र dot देखाउने */
.live-badge.is-live::before{
content:"";
width:8px;
height:8px;
background:#fff;
border-radius:50%;
animation:blink 1.2s infinite;
}

/* ENDED मा dot हटाउने */
.live-badge.is-ended::before{
content:none;
}

.live-title{
font-size:32px;
font-weight:800;
line-height:1.3;
margin:10px 0 0;
}

/* ================= SECTION ================= */

.section-title{
font-size:22px;
font-weight:800;
margin:30px 0 15px;
border-bottom:2px solid #eee;
padding-bottom:6px;
}

/* ================= LIVE DOT ================= */

.live-dot{
width:8px;
height:8px;
background:#ff3b30;
border-radius:50%;
display:inline-block;
animation:blink 1.2s infinite ease-in-out;
}

@keyframes blink{
0%{opacity:1;}
50%{opacity:0.3;}
100%{opacity:1;}
}

/* ================= TIMELINE ================= */

#live-posts{
position:relative;
padding-left:40px;
margin-top:20px;
}

#live-posts::before{
content:"";
position:absolute;
left:12px;
top:0;
bottom:0;
width:2px;
background:#ddd;
}

#live-posts .live-card{
border:none;
box-shadow:none;
padding:0;
margin-bottom:35px;
position:relative;
}

/* ðŸ”´ timeline dot */

#live-posts .live-card::before{
content:"";
position:absolute;
left:-28px;
top:6px;
width:12px;
height:12px;
background:#ff3b30;
border-radius:50%;
border:3px solid #fff;
box-shadow:0 0 0 2px #ff3b30;
}

/* ================= TIME BADGE ================= */

#live-posts .live-status{
background:#0b2c5f;
color:#fff;
padding:6px 12px;
border-radius:20px;
display:inline-flex;
align-items:center;
gap:6px;
font-size:12px;
margin-bottom:10px;
}

/* ðŸ”´ IMPORTANT FIX (white â†’ red blinking dot) */

#live-posts .live-status .live-dot{
background:#ff3b30;
animation:blink 1.2s infinite;
}

/* ================= LIVE CONTENT ================= */

.live-news-title{
font-size:20px;
font-weight:700;
margin-bottom:8px;
line-height:1.4;
}

.live-excerpt{
font-size:15px;
color:#333;
}

/* ================= LOAD MORE ================= */

.load-more{
padding:12px 24px;
background:#111;
color:#fff;
border:none;
cursor:pointer;
border-radius:4px;
font-weight:600;
margin:25px auto;
display:block;
transition:all 0.2s ease;
}

.load-more:hover{
background:#333;
}

.load-more.loading{
opacity:0.6;
pointer-events:none;
}

/* ================= NEWS ================= */

.news-card{
padding:25px 0;
border-bottom:1px solid #eee;
}

.news-flex{
display:flex;
gap:20px;
align-items:center;
}

.news-text{
flex:1;
}

.news-title{
font-size:28px;
font-weight:800;
line-height:1.3;
margin:10px 0;
}

.news-title a{
color:#111;
text-decoration:none;
}

.news-title a:hover{
color:#e10600;
text-decoration:underline;
}

.news-excerpt{
font-size:16px;
color:#444;
margin-bottom:15px;
}

.news-thumb img{
width:260px;
height:160px;
object-fit:cover;
}

/* ðŸ”´ NEWS LIVE DOT FIX */

.news-card .live-status{
display:flex;
align-items:center;
gap:6px;
color:#e10600;
font-weight:700;
font-size:12px;
margin-bottom:8px;
}

.news-card .live-dot{
background:#ff3b30;
animation:blink 1.2s infinite;
}

/* BUTTON */

.read-more{
display:inline-block;
padding:10px 16px;
border:2px solid #111;
font-weight:600;
text-decoration:none;
color:#111;
transition:all 0.2s;
}

.read-more:hover{
background:#111;
color:#fff;
}

/* ================= NOTICE ================= */

.live-notice{
background:#fff3cd;
padding:12px 15px;
margin:20px 0;
border-left:4px solid #ffc107;
font-size:14px;
}

.final-results{
background:#f8f9fa;
padding:15px;
border-radius:6px;
margin-bottom:25px;
}

/* ================= MOBILE ================= */

@media(max-width:768px){

.live-wrapper{
padding:15px;
}

.live-title{
font-size:24px;
}

.news-flex{
flex-direction:column;
align-items:flex-start;
}

.news-thumb img{
width:100%;
height:auto;
}

.news-title{
font-size:22px;
}

}

/* ================= INTRO ================= */

.live-intro{
font-size:17px;
color:#444;
margin:15px 0 25px;
line-height:1.7;
max-width:720px;
}

/* optional highlight style (news feel) */
.live-intro strong{
font-weight:700;
color:#111;
}

/* spacing fix (title → intro → section) */
.live-title + .live-intro{
margin-top:10px;
}

.live-intro + .section-title{
margin-top:20px;
}