/* ╔══════════════════════════════════════════════════════════╗
   ║  Jandarpannews24.in — Master CSS v4.0                        ║
   ║  🎨 SIRF YAHAN 3 LINES BADLO = POORI SITE CHANGE!    ║
   ╚══════════════════════════════════════════════════════════╝ */
:root {
    --c1: #c0392b;   /* Primary — navbar, buttons, badges     */
    --c2: #1a1a2e;   /* Dark    — footer, sidebar             */
    --c3: #f39c12;   /* Accent  — breaking, highlights        */

    /* Auto-computed — mat chhedo */
    --c1d: color-mix(in srgb, var(--c1) 78%, #000);
    --c1l: color-mix(in srgb, var(--c1) 10%, #fff);
    --c1g: color-mix(in srgb, var(--c1) 20%, transparent);

    --fh: 'Poppins', sans-serif;
    --fb: 'Hind', 'Noto Sans Devanagari', system-ui, sans-serif;
    --r1:6px; --r2:10px; --r3:16px;
    --s1:0 2px 8px rgba(0,0,0,.07);
    --s2:0 4px 20px rgba(0,0,0,.11);
    --s3:0 8px 32px rgba(0,0,0,.16);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--fb);background:#f4f5f7;color:#1a1a1a;line-height:1.7;font-size:15px}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* ANIMATIONS */
@keyframes fadeUp  {from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn  {from{opacity:0}to{opacity:1}}
@keyframes slideD  {from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes ticker  {from{transform:translateX(100vw)}to{transform:translateX(-100%)}}
@keyframes pulse   {0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes popIn   {from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}
@keyframes bdPulse {0%,100%{border-color:var(--c1)}50%{border-color:var(--c3)}}
@keyframes spin    {to{transform:rotate(360deg)}}

.reveal{opacity:0;transform:translateY(26px);transition:.55s ease}
.reveal.on{opacity:1;transform:translateY(0)}

/* BREAKING BAR */
.brk-bar{background:var(--c1);overflow:hidden}
.brk-in{display:flex;align-items:stretch;min-height:34px}
.brk-badge{
    background:var(--c2);color:#fff;padding:0 20px 0 12px;white-space:nowrap;
    font-size:10px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
    display:flex;align-items:center;gap:6px;flex-shrink:0;
    clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%)
}
.brk-badge .dot{animation:pulse 1.4s infinite;color:var(--c3)}
.brk-wrap{flex:1;overflow:hidden;display:flex;align-items:center;padding:0 12px}
.brk-tick{display:inline-block;white-space:nowrap;animation:ticker 40s linear infinite}
.brk-tick:hover{animation-play-state:paused}
.brk-tick a{color:#fff;margin-right:60px;font-size:13px;font-weight:500;opacity:.92}
.brk-tick a::before{content:'▶';margin-right:8px;font-size:9px;color:var(--c3)}
.brk-tick a:hover{opacity:1;text-decoration:underline}

/* HEADER */
.site-header{background:#fff;border-bottom:3px solid var(--c1);padding:10px 0;box-shadow:var(--s1);animation:slideD .45s ease}
.logo-img{height:56px;width:auto;object-fit:contain}
.logo-name{font-family:var(--fh);font-size:26px;font-weight:900;color:var(--c1);line-height:1;letter-spacing:-.5px}
.logo-dot{color:var(--c2)}
.logo-tag{font-size:11px;color:#999;letter-spacing:.3px;margin-top:2px}
.h-search{display:flex}
.h-search input{flex:1;border:2px solid #eee;border-right:none;border-radius:var(--r1) 0 0 var(--r1);padding:8px 14px;font-size:13px;font-family:var(--fb);transition:.2s}
.h-search input:focus{outline:none;border-color:var(--c1)}
.h-search button{background:var(--c1);color:#fff;border:none;border-radius:0 var(--r1) var(--r1) 0;padding:8px 16px;cursor:pointer;font-size:15px;transition:.2s}
.h-search button:hover{background:var(--c1d)}
.h-date{font-size:11px;color:#bbb;text-align:right;margin-top:4px}

/* NAVBAR */
.main-nav{background:var(--c1);position:sticky;top:0;z-index:500;box-shadow:0 3px 14px rgba(0,0,0,.22)}
.nav-in{display:flex;align-items:center;min-height:48px;justify-content:space-between}
.nav-ul{display:flex;list-style:none;gap:2px;flex-wrap:wrap}
.nav-ul a{color:rgba(255,255,255,.88);padding:10px 13px;font-size:13px;font-weight:600;border-radius:var(--r1);transition:.2s;display:block;white-space:nowrap;position:relative}
.nav-ul a::after{content:'';position:absolute;bottom:4px;left:13px;right:13px;height:2px;background:#fff;transform:scaleX(0);transition:.2s;border-radius:2px}
.nav-ul a:hover,.nav-ul a.on{color:#fff;background:rgba(255,255,255,.15)}
.nav-ul a:hover::after,.nav-ul a.on::after{transform:scaleX(1)}
.nav-soc{display:flex;gap:6px}
.nav-soc a{color:rgba(255,255,255,.75);font-size:16px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.1);transition:.2s}
.nav-soc a:hover{background:rgba(255,255,255,.25);color:#fff;transform:translateY(-2px)}
.nav-tog{display:none;background:none;border:2px solid rgba(255,255,255,.5);color:#fff;padding:4px 10px;border-radius:var(--r1);cursor:pointer;font-size:18px}

/* AD SPACES */
.ad-pvt{width:100%;border-radius:var(--r2);overflow:hidden;background:linear-gradient(135deg,#f8f9fa,#edf0f2);border:2px dashed #cdd2d8;display:flex;align-items:center;justify-content:center;position:relative;transition:.3s}
.ad-pvt:hover{border-color:var(--c1);animation:bdPulse 2s infinite}
.ad-pvt .ad-lbl{position:absolute;top:5px;left:8px;font-size:9px;color:#bbb;letter-spacing:.5px;text-transform:uppercase;font-weight:600}
.ad-pvt img{max-width:100%;max-height:100%;object-fit:contain}
.ad-goog{width:100%;border-radius:var(--r2);overflow:hidden;background:#fff;border:1px solid #e8eaed;display:flex;align-items:center;justify-content:center;position:relative;min-height:100px}
.ad-goog .g-lbl{position:absolute;top:4px;right:8px;font-size:9px;color:#ccc;letter-spacing:.4px}
.ad-h90{min-height:90px} .ad-h250{min-height:250px} .ad-h70{min-height:70px}

/* ══════════ POPUP AD ══════════
   - 15 sec delay on page load
   - Manual close ALWAYS possible (X button works immediately)
   - Countdown just shows time, doesn't block close
   ════════════════════════════ */
.popup-ov{
    display:none;position:fixed;inset:0;
    background:rgba(0,0,0,.75);z-index:9999;
    align-items:center;justify-content:center;
    backdrop-filter:blur(4px);
}
.popup-ov.open{display:flex;animation:fadeIn .3s ease}
.popup-box{
    background:#fff;border-radius:var(--r3);
    max-width:480px;width:94%;overflow:hidden;
    box-shadow:var(--s3);animation:popIn .38s ease;position:relative;
}
.popup-hd{
    background:var(--c1);color:#fff;padding:13px 18px;
    display:flex;align-items:center;justify-content:space-between;
    font-weight:800;font-size:14px;font-family:var(--fh);
}
.popup-close{
    /* ALWAYS CLICKABLE — no disabled state */
    background:rgba(255,255,255,.25);border:none;color:#fff;
    width:32px;height:32px;border-radius:50%;cursor:pointer;
    font-size:18px;display:flex;align-items:center;justify-content:center;
    transition:.2s;flex-shrink:0;
}
.popup-close:hover{background:rgba(255,255,255,.45);transform:scale(1.1)}
.popup-body{padding:18px}
.popup-foot{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 18px;background:#f8f8f8;border-top:1px solid #eee;
    font-size:12px;color:#999;
}
.popup-foot .timer-txt{display:flex;align-items:center;gap:6px}
.popup-foot .timer-ring{
    width:28px;height:28px;border-radius:50%;
    border:3px solid #eee;border-top-color:var(--c1);
    animation:spin 1s linear infinite;flex-shrink:0;
}
.popup-foot .timer-ring.done{animation:none;border-color:#27ae60}
.popup-foot .close-now{
    background:var(--c1);color:#fff;border:none;
    padding:5px 14px;border-radius:20px;font-size:12px;
    font-weight:700;cursor:pointer;transition:.2s;
}
.popup-foot .close-now:hover{background:var(--c1d)}

/* HERO */
.hero-main{position:relative;border-radius:var(--r3);overflow:hidden;height:385px;display:block;animation:fadeIn .6s ease}
.hero-main img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.hero-main:hover img{transform:scale(1.04)}
.hero-ph{width:100%;height:100%;background:linear-gradient(135deg,var(--c2),var(--c1));display:flex;align-items:center;justify-content:center;font-size:90px;color:rgba(255,255,255,.12)}
.hero-ov{position:absolute;bottom:0;left:0;right:0;padding:30px 22px 20px;background:linear-gradient(transparent,rgba(0,0,0,.9))}
.hero-ov .bdgs{margin-bottom:9px;display:flex;gap:6px;flex-wrap:wrap}
.cpill{display:inline-block;color:#fff;font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;padding:3px 10px;border-radius:3px}
.cpill.brk{background:var(--c3);color:#1a1a1a}
.hero-ov h2{color:#fff;font-size:21px;font-weight:800;line-height:1.36;margin-bottom:10px;font-family:var(--fh)}
.hero-ov .hm{color:rgba(255,255,255,.62);font-size:12px;display:flex;gap:14px;flex-wrap:wrap}
.hero-ov .hm span{display:flex;align-items:center;gap:4px}

/* SIDE CARDS */
.scard{display:flex;background:#fff;border-radius:var(--r2);overflow:hidden;box-shadow:var(--s1);border:1px solid #efefef;transition:.25s;cursor:pointer;animation:fadeUp .5s ease}
.scard:hover{box-shadow:var(--s2);transform:translateX(4px)}
.scard .sth{width:90px;min-height:80px;flex-shrink:0;object-fit:cover}
.scard .sph{width:90px;min-height:80px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:28px;color:rgba(255,255,255,.3)}
.scard .sb{padding:10px 12px 10px 10px;display:flex;flex-direction:column;justify-content:center}
.scard .sc{font-size:10px;font-weight:800;text-transform:uppercase;color:var(--c1);margin-bottom:4px}
.scard .st{font-size:13px;font-weight:700;line-height:1.4;color:#1a1a1a;margin-bottom:4px;font-family:var(--fh);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.scard .sm{font-size:11px;color:#bbb}

/* SECTION HEADS */
.sec-h{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding-bottom:10px;border-bottom:2px solid #eee;position:relative}
.sec-h::before{content:'';position:absolute;bottom:-2px;left:0;width:54px;height:2px;background:var(--c1)}
.sec-h h2{font-size:18px;font-weight:800;color:#1a1a1a;font-family:var(--fh);display:flex;align-items:center;gap:8px}
.sec-h h2 .ico{color:var(--c1)}
.sec-h .va{margin-left:auto;font-size:12px;color:var(--c1);font-weight:700;padding:4px 14px;border:1.5px solid var(--c1);border-radius:20px;transition:.2s}
.sec-h .va:hover{background:var(--c1);color:#fff}

/* NEWS CARDS */
.ncard{background:#fff;border-radius:var(--r2);overflow:hidden;box-shadow:var(--s1);border:1px solid #f0f0f0;height:100%;display:flex;flex-direction:column;transition:.28s;animation:fadeUp .55s ease}
.ncard:hover{box-shadow:var(--s2);transform:translateY(-5px)}
.nth{position:relative;height:176px;overflow:hidden;flex-shrink:0}
.nth img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.ncard:hover .nth img{transform:scale(1.06)}
.nth .nph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:44px;color:rgba(255,255,255,.28)}
.nth .cpill{position:absolute;bottom:8px;left:10px}
.nth .bpill{position:absolute;top:8px;right:8px;background:var(--c3);color:#1a1a1a;font-size:9px;font-weight:800;padding:3px 8px;border-radius:3px;letter-spacing:.5px}
.nbody{padding:14px;flex:1;display:flex;flex-direction:column}
.nbody h3{font-size:14px;font-weight:700;line-height:1.45;color:#1a1a1a;margin-bottom:8px;font-family:var(--fh);flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:.2s}
.ncard:hover .nbody h3{color:var(--c1)}
.nexc{font-size:12px;color:#888;line-height:1.5;margin-bottom:10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nft{padding:9px 14px;border-top:1px solid #f5f5f5;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#aaa}
.nft .auth{display:flex;align-items:center;gap:4px;color:#999}
.nft .sts{display:flex;gap:8px}

/* CATEGORY TABS */
.ctabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.ctabs a{padding:6px 16px;border-radius:20px;font-size:12px;font-weight:700;border:2px solid #e0e0e0;color:#666;background:#fff;transition:.2s}
.ctabs a:hover,.ctabs a.on{background:var(--c1);border-color:var(--c1);color:#fff;box-shadow:0 3px 10px var(--c1g);transform:translateY(-1px)}

/* WIDGETS */
.wgt{background:#fff;border-radius:var(--r2);box-shadow:var(--s1);border:1px solid #f0f0f0;margin-bottom:20px;overflow:hidden;animation:fadeUp .55s ease}
.wgt-h{background:var(--c1);color:#fff;padding:12px 16px;font-size:13px;font-weight:800;display:flex;align-items:center;gap:8px;font-family:var(--fh)}
.trow{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-bottom:1px solid #f8f8f8;transition:.15s;cursor:pointer}
.trow:hover{background:#fafafa}
.trow:last-child{border-bottom:none}
.tn{font-size:22px;font-weight:900;color:#eee;min-width:28px;line-height:1;font-family:var(--fh)}
.trow:hover .tn{color:var(--c1l)}
.tt{font-size:12px;font-weight:700;color:#2a2a2a;line-height:1.4;margin-bottom:3px}
.trow:hover .tt{color:var(--c1)}
.tm{font-size:11px;color:#bbb}

/* SOCIAL GRID */
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px}
.sbtn{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 8px;border-radius:var(--r1);color:#fff;font-size:12px;font-weight:700;transition:.2s;border:none;cursor:pointer;text-decoration:none}
.sbtn:hover{transform:translateY(-2px);box-shadow:var(--s1);color:#fff}
.sbtn.fb{background:#1877f2}.sbtn.yt{background:#ff0000}.sbtn.wa{background:#25d366}.sbtn.tw{background:#1da1f2}.sbtn.ig{background:linear-gradient(135deg,#f09433,#dc2743,#bc1888)}

/* CTA BOXES */
.cta{border-radius:var(--r2);padding:20px 16px;text-align:center;margin-bottom:20px;box-shadow:var(--s1)}
.cta.green{background:linear-gradient(135deg,#25d366,#128C7E)}
.cta.red{background:linear-gradient(135deg,var(--c1),var(--c1d))}
.cta .ci{font-size:36px;margin-bottom:8px}
.cta h5{color:#fff;font-weight:800;font-size:15px;margin-bottom:4px;font-family:var(--fh)}
.cta p{color:rgba(255,255,255,.82);font-size:12px;margin-bottom:12px}
.cta a{background:#fff;display:inline-block;padding:8px 22px;border-radius:20px;font-size:12px;font-weight:800;transition:.2s}
.cta.green a{color:#128C7E}.cta.red a{color:var(--c1)}
.cta a:hover{transform:scale(1.05);box-shadow:var(--s1)}

/* ARTICLE */
.art-wrap{background:#fff;border-radius:var(--r3);box-shadow:var(--s1);overflow:hidden;border:1px solid #f0f0f0;animation:fadeUp .55s ease}
.art-head{padding:28px 30px 0}
.art-body{padding:20px 30px 30px;font-size:16px;line-height:1.9;color:#2a2a2a}
.art-body h2{font-size:20px;font-weight:800;margin:28px 0 12px}
.art-body h3{font-size:17px;font-weight:700;margin:22px 0 10px}
.art-body p{margin-bottom:18px}
.art-body img{max-width:100%;border-radius:var(--r2);margin:16px 0}
.art-body blockquote{border-left:4px solid var(--c1);background:var(--c1l);padding:14px 18px;border-radius:0 var(--r1) var(--r1) 0;font-style:italic;color:#555;margin:20px 0}
.art-meta{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding:12px 0;border-top:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0;margin:14px 0;font-size:12px;color:#888}
.art-meta .auth{color:var(--c1);font-weight:700}
.art-ad{margin:24px 0;padding:14px;background:#f8f9fa;border-radius:var(--r2);border:2px dashed #d0d7de;text-align:center}
.art-ad .adn{font-size:9px;color:#ccc;display:block;margin-bottom:6px;letter-spacing:.5px;text-transform:uppercase}
.share-bar{padding:16px 30px;background:#fafafa;border-top:1px solid #f0f0f0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.share-bar .lbl{font-size:13px;font-weight:700;color:#555}
.shb{padding:7px 16px;border-radius:20px;font-size:12px;font-weight:700;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:.2s;color:#fff;text-decoration:none}
.shb:hover{transform:translateY(-2px);color:#fff}
.shb.wa{background:#25d366}.shb.fb{background:#1877f2}.shb.tw{background:#1da1f2}

/* FOOTER */
.site-footer{background:var(--c2);color:rgba(255,255,255,.7);padding:44px 0 0;margin-top:48px}
.f-ln{font-family:var(--fh);font-size:24px;font-weight:900;color:#fff}
.f-ld{color:var(--c1)}
.f-tag{color:var(--c3);font-size:12px;font-weight:600;margin-top:2px}
.f-desc{font-size:13px;margin-top:10px;line-height:1.7;color:rgba(255,255,255,.52)}
.f-h{color:#fff;font-weight:800;font-size:14px;margin-bottom:14px;font-family:var(--fh)}
.f-ul{list-style:none}
.f-ul li{margin-bottom:8px}
.f-ul a{color:rgba(255,255,255,.55);font-size:13px;transition:.2s;display:flex;align-items:center;gap:6px}
.f-ul a::before{content:'›';color:var(--c1);font-weight:900;font-size:16px}
.f-ul a:hover{color:#fff}
.f-cl{list-style:none}
.f-cl li{display:flex;gap:10px;margin-bottom:10px;font-size:13px;align-items:flex-start}
.f-cl .fi{color:var(--c1);font-size:15px;flex-shrink:0;margin-top:2px}
.f-cl a{color:rgba(255,255,255,.6);transition:.2s}
.f-cl a:hover{color:#fff}
.f-bot{background:rgba(0,0,0,.28);margin-top:32px;padding:14px 0;text-align:center;font-size:12px;color:rgba(255,255,255,.36)}
.f-bot strong{color:var(--c1)}

/* FORMS */
.form-card{background:#fff;border-radius:var(--r3);box-shadow:var(--s2);overflow:hidden;animation:fadeUp .55s ease}
.form-card-head{padding:22px 28px;background:var(--c1);color:#fff}
.form-card-head h3{font-family:var(--fh);font-weight:800;margin-bottom:4px}
.form-card-head p{font-size:13px;opacity:.85;margin:0}
.form-card-body{padding:28px}

/* CATEGORY PAGE */
.cat-hero{background:var(--c1);color:#fff;border-radius:var(--r3);padding:28px 32px;margin-bottom:24px;animation:fadeUp .5s ease}
.cat-hero h1{font-family:var(--fh);font-weight:900;font-size:26px;margin-bottom:6px}

/* SEARCH PAGE */
.search-result{background:#fff;border-radius:var(--r2);padding:16px 18px;margin-bottom:12px;box-shadow:var(--s1);border:1px solid #f0f0f0;display:flex;gap:14px;transition:.2s;animation:fadeUp .5s ease}
.search-result:hover{box-shadow:var(--s2);transform:translateX(4px)}
.search-result img{width:90px;height:70px;object-fit:cover;border-radius:var(--r1);flex-shrink:0}
.search-result h4{font-size:15px;font-weight:700;color:#1a1a1a;margin-bottom:6px;font-family:var(--fh);transition:.2s}
.search-result:hover h4{color:var(--c1)}
.search-result p{font-size:12px;color:#888;margin:0}

/* RESPONSIVE */
@media(max-width:991px){
    .nav-ul{display:none;flex-direction:column;width:100%;gap:0;background:var(--c1d)}
    .nav-ul.open{display:flex}
    .nav-ul a{border-radius:0;border-bottom:1px solid rgba(255,255,255,.08);padding:11px 16px}
    .nav-ul a::after{display:none}
    .nav-tog{display:block}
    .nav-in{flex-wrap:wrap;padding:8px 16px}
    .nav-row{display:flex;width:100%;justify-content:space-between;align-items:center;padding:4px 0}
    .nav-soc{display:none!important}
    .hero-main{height:248px}
    .hero-ov h2{font-size:15px}
    .art-head{padding:16px 16px 0}
    .art-body{padding:14px 16px 20px;font-size:15px}
    .share-bar{padding:12px 16px}
    .popup-box{max-width:95%}
}
@media(max-width:576px){
    .logo-img{height:42px}
    .logo-name{font-size:20px}
    .ctabs a{padding:5px 12px;font-size:11px}
    .scard .sth,.scard .sph{width:76px}
}
.sticky-sb{position:sticky;top:60px}