/* ============================================================
   NEWS PORTAL — MODERN 2026 FRONTEND STYLES
   Bootstrap 5.3 · Hindi-safe Google fonts · CSS variables · dark/light themes
   Colors flow from Admin Settings -> :root vars (header.php)
   ============================================================ */

/* ---------- Theme tokens (light) ---------- */
* {
    scrollbar-width: thin;
    scrollbar-color: #262626 #00000000;
}
:root {
    --news-primary: var(--brand-primary, #e63946);
    --news-dark: var(--brand-secondary, #0f172a);
    --news-accent: var(--brand-accent, #f59e0b);
    --bg-page: var(--body-bg, #f6f7fb);
    --bg-surface: #ffffff;
    --bg-alt: #eef1f6;
    --text-heading: var(--heading-color, #111827);
    --text-body: var(--body-color, #374151);
    --border-soft: #e5e8f0;
    --shadow-soft: 0 0 0 0 transparent;
    --shadow-card: 0 0 0 0 transparent;
    --radius-lg: 18px;
    --radius-md: 12px;
    --font-ui: var(--site-font, "Noto Sans Devanagari"), "Mukta", system-ui, sans-serif;
}

/* ---------- Dark theme overrides ---------- */
[data-bs-theme="dark"] {
    --bg-page: #0b1220;
    --bg-surface: #121a2b;
    --bg-alt: #0e1526;
    --text-heading: #f1f5f9;
    --text-body: #cbd5e1;
    --border-soft: #23304a;
    --shadow-soft: 0 0 0 0 transparent;
    --shadow-card: 0 0 0 0 transparent;
    color-scheme: dark;
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-ui) !important;
    background: var(--bg-page);
    color: var(--text-body);
    font-size: var(--base-font-size, 15px);
    font-weight: var(--base-font-weight, 400);
    line-height: 1.65;
    transition: background-color .3s ease, color .3s ease;
}
h1, h2, h3, h4, h5, h6 { color: var(--text-heading); font-weight: var(--heading-weight, 700); letter-spacing: -.01em; }
a { color: inherit; text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--link-color, var(--news-primary)); }
img { max-width: 100%; }
.btn { border-radius: var(--btn-radius, 10px); }
.btn-brand, .btn-outline-brand { background: var(--btn-bg, var(--news-primary)); border-color: var(--btn-bg, var(--news-primary)); color: var(--btn-text, #fff); }
@media (min-width: 992px) { .container { max-width: var(--container-max, 1140px); } }
@media (min-width: 1400px) { .container { max-width: var(--container-max-xxl, 1320px); } }
.homepage-builder-layout > .row { row-gap: var(--section-gap, 1.5rem); }

.text-brand { color: var(--news-primary) !important; }
.btn-brand {
    background: var(--news-primary); border-color: var(--news-primary); color: #fff;
    border-radius: var(--btn-radius, 10px); font-weight: 600; transition: filter .2s ease, transform .2s ease;
}
.btn-brand:hover, .btn-brand:focus { color: #fff; filter: brightness(.92); transform: translateY(-1px); }
.btn-outline-brand {
    color: var(--btn-bg, var(--news-primary)); border: 1.5px solid var(--btn-bg, var(--news-primary)); border-radius: var(--btn-radius, 10px); font-weight: 600; background: transparent;
}
.btn-outline-brand:hover { background: var(--news-primary); color: #fff; }
.btn-xs { padding: .15rem .55rem; font-size: .72rem; border-radius: 8px; }

.shadow-soft { box-shadow: var(--shadow-soft) !important; }
.min-w-0 { min-width: 0; }
.clamp-1, .clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-1 { -webkit-line-clamp: 1; }
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }

.img-placeholder {
    background: linear-gradient(135deg, var(--bg-alt), var(--border-soft));
    color: #94a3b8; min-height: 160px; width: 100%; font-size: 2rem;
}

/* ============================================================
   HEADER 2026 — "Hindustan" style (desktop + mobile)
   Strip 1 top news · Strip 2 logo/quick/search · red navbar
   Mobile quick icons + chip scroller + drawer
   ============================================================ */

/* ---------- STRIP 1 : breaking / top ---------- */
.hn-top {
    background: var(--header-bg, #fff);
    border-bottom: 1px solid var(--border-soft);
}
.hn-top-in {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-height: 54px;
    padding-top: .3rem;
    padding-bottom: .3rem;
}
.hn-ribbon {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: #E20401;
    color: #fff;
    font-weight: 700;
    font-size: .86rem;
    padding: .5rem 1.7rem .5rem 1rem;
    white-space: nowrap;
    flex: 0 0 auto;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 100%, 0 100%);
}
.hn-ribbon i { font-size: .95rem; }
.hn-ribbon--plain { background: var(--news-dark, #0f172a); }
.hn-ticker {
    flex: 1;
    min-width: 0;
    position: relative;
    height: 1.8em;
}
.hn-headline {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: .55rem;
    color: var(--text-heading);
    font-weight: 600;
    font-size: var(--base-font-size, 15px);
    font-weight: var(--base-font-weight, 400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .35s ease, transform .35s ease;
}
.hn-headline.is-active { opacity: 1; transform: none; }
.hn-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--breaking-bg, #dc2626);
    flex: 0 0 auto;
    animation: hnBlink 1.6s ease infinite;
}
@keyframes hnBlink { 50% { opacity: .35; } }
.hn-static-headline { color: var(--text-heading); font-weight: 600; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hn-tick-nav { display: flex; gap: .1rem; flex: 0 0 auto; }
.hn-tick-nav button {
    border: 0;
    background: transparent;
    color: var(--text-heading);
    font-size: .8rem;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hn-tick-nav button:hover { background: var(--bg-alt); }
.hn-slash {
    flex: 0 0 auto;
    width: 24px;
    height: 36px;
    background: var(--breaking-bg, #dc2626);
    clip-path: polygon(60% 0, 100% 0, 40% 100%, 0 100%);
    margin-left: auto;
}
.hn-top-actions { display: flex; align-items: center; gap: .55rem; flex: 0 0 auto; }
.hn-lang-btn {
    border: 1px solid var(--border-soft);
    background: var(--bg-surface);
    border-radius: 10px;
    padding: .35rem .8rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-heading);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.hn-lang-glyph {
    background: var(--text-heading);
    color: var(--bg-surface);
    border-radius: 4px;
    font-size: .58rem;
    padding: .18rem .22rem;
    line-height: 1;
    letter-spacing: -.08em;
}
.theme-toggle {
    background: var(--bg-alt);
    color: var(--text-heading);
    border: 1px solid var(--border-soft);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease, transform .2s ease;
    font-size: .9rem;
}
.theme-toggle:hover { background: var(--news-primary); color: #fff; transform: rotate(15deg); }
.hn-socials { display: flex; gap: .45rem; }
.hn-social {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    transition: transform .2s ease, filter .2s ease;
}
.hn-social:hover { transform: translateY(-2px); filter: brightness(1.08); color: #fff; }
.hn-social--facebook { background: #1877f2; }
.hn-social--twitter { background: #1da1f2; }
.hn-social--youtube { background: #f00; }
.hn-social--instagram { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }

/* ---------- STRIP 2 : logo / quick links / search ---------- */
.hn-main { background: var(--header-bg, #fff); }
.hn-main-in {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding-top: .85rem;
    padding-bottom: .85rem;
}
.hn-burger {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border: 1px solid var(--border-soft);
    background: var(--bg-surface);
    color: var(--text-heading);
    border-radius: 12px;
    font-size: 1.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.hn-burger:hover { border-color: var(--news-primary); color: var(--news-primary); }
.hn-logo { display: flex; align-items: center; gap: .8rem; text-decoration: none; min-width: 0; }
.hn-logo:hover { color: inherit; }
.hn-logo-img { height: 52px; width: auto; max-width: 320px; object-fit: contain; }
.hn-shield { position: relative; width: 54px; height: 60px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.hn-shield i {
    font-size: 54px;
    line-height: 1;
    background: linear-gradient(160deg, #fdfdfd 10%, #c7cdda 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 3px rgba(15, 23, 42, .2));
}
.hn-shield b {
    position: absolute;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--news-primary);
}
.hn-shield--sm { width: 40px; height: 45px; }
.hn-shield--sm i { font-size: 40px; }
.hn-shield--sm b { font-size: 1rem; }
.hn-logo-text { min-width: 0; }
.hn-logo-name {
    display: block;
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--news-primary);
    line-height: 1.05;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hn-logo-tagline {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #64748b;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
    margin-top: .15rem;
}
.hn-logo-tagline i { display: block; width: 30px; height: 2px; border-radius: 2px; background: #cbd5e1; }
/* Logo column: logo on top, date/time line directly BELOW it.
   (datetime was moved out of the logo row — no longer beside the logo) */
.hn-brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .3rem;
    min-width: 0;
}
/* date · time · day in ONE line under the logo (classic newspaper strip) */
.hn-datetime {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: .5rem;
    line-height: 1.2;
    color: var(--text-heading);
    font-weight: 600;
    white-space: nowrap;
}
.hn-datetime > span + span::before {
    content: '•';
    margin-right: .25rem;
    color: var(--border-soft);
    font-size: .62rem;
    line-height: 1;
}
.hn-dt-day {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--news-primary);
}
.hn-dt-date { font-size: .98rem; font-weight: 700; }
.hn-dt-time { font-size: .8rem; font-weight: 600; color: #64748b; display: inline-flex; align-items: center; gap: .28rem; }
.hn-dt-time i { color: var(--news-primary); font-size: .85rem; }
/* quick-link circles (desktop row + mobile row share these) */
.hn-quick { align-items: flex-end; gap: 1.3rem; margin-left: .4rem; padding-left: 1.2rem; border-left: 1px solid var(--border-soft); }
.hn-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    flex: 0 0 auto;
}
.hn-quick-item:hover { color: inherit; }
.hn-quick-ico {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--news-primary) 10%, #fff);
    color: var(--news-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    border: 1px solid color-mix(in srgb, var(--news-primary) 18%, transparent);
    transition: transform .2s ease, background .2s ease;
}
[data-bs-theme="dark"] .hn-quick-ico { background: color-mix(in srgb, var(--news-primary) 24%, #121a2b); }
.hn-quick-item:hover .hn-quick-ico {
    transform: translateY(-2px) scale(1.05);
    background: color-mix(in srgb, var(--news-primary) 18%, #fff);
}
.hn-quick-label { font-size: .76rem; font-weight: 700; color: var(--text-heading); }
.hn-quick-ico--solid { background: var(--news-primary); color: #fff; border-color: var(--news-primary); }
.hn-search {
    margin-left: auto;
    align-items: center;
    background: #fff;
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    padding: .28rem .3rem .28rem 1.05rem;
    min-width: 240px;
    max-width: 300px;
    flex: 0 1 300px;
}
[data-bs-theme="dark"] .hn-search { background: var(--bg-alt); }
.hn-search input {
    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
    flex: 1;
    min-width: 0;
    font-size: .9rem;
    color: var(--text-body);
}
.hn-search button {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 0;
    background: var(--news-primary);
    color: #fff;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: filter .2s ease;
}
.hn-search button:hover { filter: brightness(.92); }
.hn-epaper-btn {
    margin-left: auto;
    width: 44px;
    height: 44px;
    border: 1.5px solid var(--news-primary);
    color: var(--news-primary);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    background: var(--bg-surface);
    flex: 0 0 auto;
}
/* ---------- MOBILE : quick icon row + chips ---------- */
.hn-quick-mobile { background: var(--header-bg, #fff); padding: .1rem .9rem .55rem; }
.hn-quick-mobile-scroll {
    display: flex;
    gap: 1.05rem;
    align-items: flex-end;
    overflow-x: auto;
    scrollbar-width: none;
}
.hn-quick-mobile-scroll::-webkit-scrollbar { display: none; }
.hn-quick-mobile .hn-quick-ico { width: 46px; height: 46px; font-size: 1.15rem; }
.hn-chips {
    background: var(--header-bg, #fff);
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
}
/* Mobile: the chip menu sticks (logo strip scrolls away) when the
   "sticky header" option is enabled in Header Settings. */
.hn-chips.hn-sticky {
    position: sticky;
    top: 0;
    z-index: 1030;
}
.hn-chips-scroll {
    display: flex;
    gap: .2rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding: .4rem .55rem;
}
.hn-chips-scroll::-webkit-scrollbar { display: none; }
.hn-chip {
    white-space: nowrap;
    border: 0;
    background: transparent;
    color: var(--text-heading);
    font-weight: 700;
    font-size: .86rem;
    padding: .42rem .85rem;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex: 0 0 auto;
    text-decoration: none;
}
.hn-chip.is-active { background: var(--news-primary); color: #fff; }
.hn-chip i { font-size: .68rem; }
.hn-chip-wrap { position: relative; }
.hn-chip-drop {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1050;
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
    padding: .4rem;
    min-width: 200px;
}
.hn-chip-drop.open { display: block; }
.hn-chip-drop a {
    display: block;
    padding: .45rem .7rem;
    color: var(--text-body);
    font-size: .85rem;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
}
.hn-chip-drop a:hover { background: var(--bg-alt); color: var(--news-primary); }

/* ---------- DESKTOP : RED NAVBAR + MEGA PANEL ---------- */
.hn-navwrap { position: relative; }
/* Full-width bar that contains the red navbar. When "sticky header" is
   enabled (Header Settings), THIS bar sticks to the top — the logo strip
   above scrolls away normally. */
.hn-navbar-bar { background: transparent; }
.hn-navbar-bar.hn-sticky {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--breaking-bg, #c0392b);
   
}
.hn-navbar-bar.hn-sticky .hn-navbar {
    border-radius: var(--radius-md);
    margin-bottom: .9rem;
}
.hn-navbar {
    display: flex;
    align-items: center;
    gap: .1rem;
    border-radius: 16px;
    padding: .32rem .5rem;
    margin-bottom: 1.1rem;
    box-shadow: none;
    overflow: visible;
}
.hn-navbar > * + * { position: relative; }
.hn-navbar > * + *::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, .28);
}
.hn-nav-home {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #fff;
    color: var(--breaking-bg, #c0392b);
    font-weight: 800;
    font-size: .9rem;
    border-radius: 12px;
    padding: .52rem 1.05rem;
    margin-right: .2rem;
    text-decoration: none;
    flex: 0 0 auto;
    white-space: nowrap;
}
.hn-nav-home:hover { color: var(--breaking-bg, #c0392b); filter: brightness(.96); }
.hn-nav-link {
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    padding: .6rem .9rem;
    background: transparent;
    border: 0;
    border-radius: 10px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    text-decoration: none;
}
a.hn-nav-link i { font-size: .95rem; }
.hn-nav-link.dropdown-toggle i { font-size: .95rem; }
.hn-nav-link:hover, .hn-nav-link.is-active, .hn-nav-link[aria-expanded="true"] {   color: #e30205; }
.hn-nav-dd .dropdown-toggle::after { color: #fff; margin-left: .35rem; }
.hn-nav-hl {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: #fff;
    color: var(--breaking-bg, #c0392b);
    font-weight: 800;
    font-size: .9rem;
    border-radius: 12px;
    padding: .52rem 1rem;
    white-space: nowrap;
    text-decoration: none;
    flex: 0 0 auto;
}
.hn-nav-hl:hover { color: var(--breaking-bg, #c0392b); filter: brightness(.96); }
.hn-grid {
    background: transparent;
    border: 0;
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.hn-grid:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.hn-mega {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - .45rem);
    z-index: 1045;
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}
.hn-mega-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .8rem 1.1rem;
    background: var(--bg-alt);
    color: var(--text-heading);
    font-weight: 800;
}
.hn-mega-close { border: 0; background: transparent; color: inherit; font-size: 1rem; }
/* mega panel content (shared with mega grid) */
.mega-menu-grid { display: grid; gap: 0; padding: .7rem; }
.mega-menu-column { min-width: 0; padding: 0 .6rem; border-right: 1px solid var(--border-soft); }
.mega-menu-column:last-child { border-right: 0; }
.mega-group { padding: .45rem 0 .7rem; }
.mega-parent { display: block; color: var(--text-heading); font-size: .88rem; font-weight: 800; margin-bottom: .18rem; text-decoration: none; }
.mega-parent:hover { color: var(--news-primary); }
.mega-child { display: block; padding: .16rem 0; color: var(--text-body); font-size: .78rem; line-height: 1.35; text-decoration: none; }
.mega-child:hover { color: var(--news-primary); }

/* dropdown panels (navbar + generic) */
.nav-dropdown {
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
    padding: .5rem;
    min-width: 220px;
    background: var(--bg-surface);
}
.nav-dropdown .dropdown-item {
    font-weight: 600;
    font-size: .86rem;
    padding: .55rem .8rem;
    border-radius: 9px;
    color: var(--text-body);
}
.nav-dropdown .dropdown-item:hover { background: var(--bg-alt); color: var(--news-primary); }

/* ---------- DRAWER ---------- */
.hn-drawer { width: min(86vw, 360px); background: var(--bg-surface); border: 0; color: var(--text-body); }
.hn-drawer .offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .9rem 1rem;
    border-bottom: 1px solid var(--border-soft);
}
.hn-drawer-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.hn-drawer-brand img { height: 40px; width: auto; max-width: 200px; object-fit: contain; }
.hn-drawer-close { border: 0; background: transparent; font-size: 1.25rem; color: var(--text-heading); }
.hn-drawer .offcanvas-body { padding: .7rem .6rem 1.2rem; display: flex; flex-direction: column; }
.hn-drawer-nav { display: flex; flex-direction: column; gap: .12rem; }
.hn-drawer-item {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .78rem .9rem;
    border-radius: 12px;
    color: var(--text-heading);
    font-weight: 700;
    font-size: .94rem;
    font-family: inherit;
    text-decoration: none;
    border: 0;
    background: transparent;
    width: 100%;
    text-align: start;
}
.hn-drawer-item i:first-child { font-size: 1.05rem; color: var(--text-heading); width: 22px; text-align: center; flex: 0 0 auto; }
.hn-drawer-item span { flex: 1; }
.hn-drawer-item .hn-caret { font-size: .68rem; opacity: .45; }
.hn-drawer-item:hover { background: var(--bg-alt); color: var(--text-heading); }
.hn-drawer-item.is-active {
    background: color-mix(in srgb, var(--news-primary) 9%, transparent);
    color: var(--news-primary);
}
.hn-drawer-item.is-active i:first-child { color: var(--news-primary); }
.hn-drawer-home { color: var(--news-primary); }
.hn-drawer-home i:first-child { color: var(--news-primary); }
.hn-drawer-group > summary { list-style: none; cursor: pointer; }
.hn-drawer-group > summary::-webkit-details-marker { display: none; }
.hn-drawer-group > summary::marker { content: ''; }
.hn-drawer-group[open] > summary .hn-caret { transform: rotate(90deg); }
.hn-drawer-group[open] > summary { background: color-mix(in srgb, var(--news-primary) 9%, transparent); color: var(--news-primary); }
.hn-drawer-group[open] > summary i:first-child { color: var(--news-primary); }
.hn-drawer-sub {
    margin: .15rem 0 .35rem 1.5rem;
    padding: .1rem 0 .1rem .75rem;
    border-left: 2px solid color-mix(in srgb, var(--news-primary) 45%, transparent);
    display: block;
}
.hn-drawer-sub a { display: flex; align-items: center; gap: .55rem; padding: .42rem .55rem; color: var(--text-body); font-size: .88rem; font-weight: 600; border-radius: 8px; text-decoration: none; }
.hn-drawer-sub a i { width: 16px; text-align: center; flex: 0 0 auto; font-size: .85rem; opacity: .75; }
.hn-drawer-sub a:hover { color: var(--news-primary); background: var(--bg-alt); }
.hn-drawer-hl { background: color-mix(in srgb, var(--news-primary) 9%, transparent); color: var(--news-primary) !important; }
.hn-drawer-hl i:first-child { color: var(--news-primary) !important; }
.hn-drawer-tools { display: flex; gap: .4rem; margin: .9rem 0; padding-top: .8rem; border-top: 1px solid var(--border-soft); }
.hn-drawer-tools button {
    flex: 1;
    border: 1px solid var(--border-soft);
    background: var(--bg-alt);
    color: var(--text-body);
    font-weight: 700;
    font-size: .8rem;
    padding: .45rem .3rem;
    border-radius: 9px;
}
.hn-drawer-signin {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: .8rem;
    font-weight: 800;
    color: var(--text-heading);
    background: var(--bg-surface);
    text-decoration: none;
}
.hn-drawer-signin:hover { border-color: var(--news-primary); color: var(--news-primary); }

/* Drawer install button (below sign-in) */
.hn-drawer-install-btn {
    margin-top: .6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: .7rem .8rem;
    font-weight: 700;
    font-size: .92rem;
    width: 100%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    transition: all .2s ease;
}
.hn-drawer-install-btn:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    transform: translateY(-1px);
}

/* ---------- HEADER RESPONSIVE ---------- */
@media (max-width: 1199.98px) {
    .hn-quick { gap: .9rem; padding-left: .9rem; }
    .hn-logo-name { font-size: 1.9rem; }
}
@media (max-width: 991.98px) {
    .hn-top-in { min-height: 46px; gap: .6rem; }
    .hn-ribbon { font-size: .72rem; padding: .38rem 1.15rem .38rem .7rem; }
    .hn-headline { font-size: .85rem; }
    .hn-slash { display: none; }
    .hn-main-in { gap: .8rem; padding-top: .6rem; padding-bottom: .6rem; }
    .hn-datetime { gap: .4rem; }
    .hn-dt-day { font-size: .7rem; }
    .hn-dt-date { font-size: .8rem; }
    .hn-dt-time { font-size: .76rem; }
    .hn-logo-img { height: 42px; }
    .hn-logo-name { font-size: 1.6rem; }
    .hn-shield { width: 42px; height: 47px; }
    .hn-shield i { font-size: 42px; }
    .hn-shield b { font-size: 1.05rem; }
    .hn-logo-tagline { font-size: .62rem; }
    .hn-logo-tagline i { width: 20px; }
    .hn-navbar { margin-bottom: .9rem; }
}
@media (max-width: 575.98px) {
    .hn-lang-btn { padding: .3rem .55rem; font-size: .74rem; gap: .3rem; }
    .hn-social { width: 28px; height: 28px; font-size: .85rem; }
    .theme-toggle { width: 30px; height: 30px; font-size: .8rem; }
    .hn-top-actions { gap: .35rem; }
    .hn-tick-nav button { width: 22px; height: 22px; }
    .hn-logo-name { font-size: 1.35rem; }
    .hn-main-in { gap: .6rem; }
    .hn-datetime { gap: .35rem; }
    .hn-dt-day { font-size: .66rem; }
    .hn-dt-date { font-size: .72rem; }
    .hn-dt-time { font-size: .68rem; }
    .hn-burger, .hn-epaper-btn { width: 40px; height: 40px; font-size: 1.15rem; }
    .hn-quick-mobile .hn-quick-ico { width: 42px; height: 42px; }
}


/* ============ SECTION TITLES / CARDS ============ */
.section-title {
    position: relative; font-size: 1.3rem; padding-left: 1rem; margin-bottom: 0;
}
.title-bar {
    position: absolute; left: 0; top: 15%; bottom: 15%; width: 5px;
    border-radius: 4px; background: var(--news-primary);
}

/* ============ UNIFIED SECTION HEADING (all homepage sections) ============
   [icon circle] Title {{hl}} ——line—— [और पढ़ें (→)]  — see
   views/home_sections/_section_heading.php
   Matches the reference design: big soft brand-tinted circle holding a
   rounded brand tile with a white glyph, extra-bold title, brand line
   and a round arrow button.                                             */
.sec-heading {
    display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
}
.sec-heading-icon {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--news-primary) 10%, transparent);
}
.sec-heading-icon i {
    width: 46px;
    height: 46px;
    border-radius: 29px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--news-primary);
    color: #fff;
    font-size: 1rem;
}
.sec-heading-title {
    font-size: clamp(1.2rem, 2vw, 1rem); font-weight: 800; letter-spacing: -.01em;
    color: var(--text-heading); line-height: 1.2; white-space: nowrap;
}
.sec-heading-hl { color: var(--news-primary); }
.sec-heading-line {
    flex: 1 1 60px; height: 3px; min-width: auto; border-radius: 999px;
    background: var(--news-primary);
}
.sec-heading-more {
    display: inline-flex; align-items: center; gap: .7rem; flex-shrink: 0;
    font-size: 1rem; font-weight: 700; color: var(--text-heading);
}
.sec-heading-more:hover { color: var(--news-primary); }
.sec-heading-arrow {
    width: 30px; height: 30px; border-radius: 50%; color: #fff; font-size: 1.1rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--news-primary);
    transition: transform .2s ease, filter .2s ease;
}
.sec-heading-more:hover .sec-heading-arrow { transform: translateX(3px); filter: brightness(.92); color: #fff; }
@media (max-width: 575.98px) {
    .sec-heading { gap: .8rem; }
    .sec-heading-icon { width: 56px; height: 56px; }
    .sec-heading-icon i { width: 34px; height: 34px; border-radius: 10px; font-size: 1.05rem; box-shadow: none; }
    .sec-heading-title { font-size: 1.25rem; }
    .sec-heading-more-text { display: none; } /* keep only the round arrow */
    .sec-heading-arrow { width: 32px; height: 32px; font-size: .95rem; box-shadow: none; }
}

/* ============ JOBS & CAREER SECTION (reference-design layout) ============ */
/* NOT scoped to .jobs-career-section on purpose: the badge, gradient
   overlay and body are absolutely positioned, so .jc-lead must ALWAYS be
   their containing block — even if a renderer strips the section shell. */
.jc-lead {
    position: relative; border-radius: var(--radius-md); overflow: hidden;
    border: 1px solid var(--border-soft); background: var(--news-dark);
    display: block;
}
.jc-lead-img {
    width: 100%; height: 360px; object-fit: cover; display: block;
}
.jc-lead-img.img-placeholder { height: 420px; min-height: 420px; font-size: 3rem; color: #fff; }
.jc-lead-badge {
    position: absolute; top: 14px; left: 14px; z-index: 2;
    display: inline-flex; align-items: center; padding: .32rem .8rem;
    border-radius: 999px; background: var(--news-primary); color: #fff;
    font-size: .78rem; font-weight: 700;
}
.jc-lead-overlay {
    position: absolute; left: 0; right: 0; bottom: 0; height: 65%; z-index: 1;
    background: linear-gradient(transparent, rgba(2, 6, 23, .9));
}
.jc-lead-body {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
    padding: 1.1rem 1.25rem; color: #fff;
}
.jc-lead-title { color: #fff; font-size: 1.35rem; font-weight: 800; margin-bottom: .9rem; }
.jc-lead-foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; flex-wrap: wrap;
}
.jc-meta {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .8rem; font-weight: 600; color: var(--text-muted, #64748b);
}
.jc-meta-light { color: rgba(255, 255, 255, .85); }
.jc-read-btn {
    display: inline-flex; align-items: center; padding: .55rem 1.1rem;
    border-radius: 10px; background: var(--news-primary); color: #fff;
    font-size: .88rem; font-weight: 700; white-space: nowrap;
    transition: filter .2s ease, transform .2s ease;
}
.jc-lead-link:hover .jc-read-btn { filter: brightness(.92); transform: translateX(2px); color: #fff; }

.jc-item {
    display: flex; align-items: flex-start; gap: 1rem;  
    border: 1px solid var(--border-soft); border-radius: var(--radius-md);
    background: var(--bg-surface);
    transition: border-color .2s ease, transform .2s ease;
}
.jobs-career-section .jc-lead-link + .jc-item,
.jc-side-list .jc-item + .jc-item,
.jobs-career-section .jc-item + .jc-item { margin-top: 1rem; }
.jc-item:hover { border-color: color-mix(in srgb, var(--news-primary) 38%, var(--border-soft)); transform: translateY(-2px); }
.jc-thumb-wrap { flex-shrink: 0; }
.jc-thumb {
    width: 132px; height: 92px; object-fit: cover; border-radius: 10px; display: block;
}
.jc-thumb.img-placeholder { width: 132px; height: 92px; min-height: 92px; font-size: 1.6rem; }
.jc-cat-badge {
    display: inline-block; padding: .18rem .6rem; margin-bottom: .35rem;
    border-radius: 999px; font-size: .72rem; font-weight: 700;
    color: var(--news-primary);
    background: color-mix(in srgb, var(--news-primary) 10%, transparent);
}
.jc-item-title {
    font-size: 1rem; font-weight: 700; color: var(--text-heading);
    margin-bottom: .4rem; line-height: 1.45;
}
.jc-item:hover .jc-item-title { color: var(--news-primary); }
@media (max-width: 575.98px) {
    .jc-lead-img, .jc-lead-img.img-placeholder { height: 280px; min-height: 280px; }
    .jc-thumb, .jc-thumb.img-placeholder { width: 104px; height: 76px; min-height: 76px; }
    .jc-lead-title { font-size: 1.1rem; }
}

.bg-alt { background: var(--bg-alt); transition: background-color .3s ease; }
.bg-dark-section { background: var(--news-dark); }

.card { background: var(--bg-surface); border-color: var(--border-soft); border-radius: var(--radius-lg); }
[data-bs-theme="dark"] .card { background: var(--bg-surface) !important; color: var(--text-body); }
.news-card {
    overflow: hidden; border: 1px solid var(--border-soft);
    transition: transform .25s ease, border-color .25s ease, background-color .25s ease;
}
.news-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--news-primary) 38%, var(--border-soft)); }
.news-card .card-img-top { height: 190px; object-fit: cover; transition: transform .55s ease; }
.news-card:hover .card-img-top { transform: scale(1.05); }
.news-card .card-title { color: var(--text-heading); line-height: 1.35; }
.category-badge {
    background: color-mix(in srgb, var(--news-primary) 12%, transparent);
    color: var(--news-primary); font-weight: 600; font-size: .68rem;
    padding: .32em .7em; border-radius: 20px;
}

/* ============ HERO ============ */
.hero-lead { min-height: 420px; background: var(--news-dark); }
.hero-img { object-fit: cover; height: 440px; }
.hero-placeholder { height: 440px; color: rgba(255,255,255,.25); font-size: 4.5rem; }
.hero-overlay { background: linear-gradient(transparent, rgba(2,6,23,.92)); }
.hero-title { font-size: clamp(1.35rem, 2.6vw, 2.1rem); line-height: 1.25; }
.hero-side { background: var(--bg-surface); border: 1px solid var(--border-soft); transition: transform .2s ease, border-color .2s ease; }
.hero-side:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--news-primary) 38%, var(--border-soft)); }
.hero-side-img { width: 96px; height: 72px; object-fit: cover; }

/* ============ TRENDING ============ */
.trending-num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 28px; height: 28px; border-radius: 8px;
    background: color-mix(in srgb, var(--news-primary) 14%, transparent);
    color: var(--news-primary); font-weight: 800; font-size: .85rem; flex-shrink: 0;
}
.trending-num.big {
    min-width: 44px; height: 44px; font-size: 1.05rem; border-radius: 12px;
}
.trending-card:hover { transform: none; }

/* ============ NEWS BLOCK (lead image + left-thumb list) ============ */
.nb-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.nb-header {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
    color: #fff; padding: .55rem 1.1rem;
}
.nb-header-title { color: #fff; font-size: 1.12rem; font-weight: 800; }
.nb-header-link {
    color: rgba(255,255,255,.85); font-size: .74rem; font-weight: 700;
    white-space: nowrap; display: inline-flex; align-items: center; gap: .25rem;
}
.nb-header-link:hover { color: #fff; }
 
.nb-lead-img {
    width: 100%; height: 240px; object-fit: cover;
    border-radius: var(--radius-md); display: block;
}
.nb-lead-img.img-placeholder { height: 240px; min-height: 240px; font-size: 2.6rem; }
.nb-lead-body { margin-top: .7rem; }
.nb-lead-title {
    font-size: 1.16rem; font-weight: 800; line-height: 1.5;
    color: var(--text-heading); margin: .5rem 0 .35rem;
}
a:hover .nb-lead-title { color: var(--news-primary); }
.nb-item-meta {
    display: flex; flex-wrap: wrap; gap: 1rem;
    color: var(--text-muted, #94a3b8); font-size: .76rem;
}
.nb-item {
    display: flex; align-items: flex-start; gap: .9rem;
    padding:  .5rem 0; border-bottom: 1px dashed var(--border-soft);
}
.nb-list >:first-child .nb-item{ padding:  .5rem 0;  border-top: 1px dashed var(--border-soft);}
.nb-list > a:last-child .nb-item { border-bottom: 0; padding-bottom: .15rem; }
.nb-thumb {
    width: 118px; height: 84px; object-fit: cover;
    border-radius: 10px; flex-shrink: 0;
}
.nb-thumb.img-placeholder { width: 118px; height: 84px; min-height: 84px; font-size: 1.3rem; }
.nb-item-title {
    font-size: .97rem; font-weight: 700; line-height: 1.5;
    color: var(--text-heading); margin-bottom: .4rem;
}
a:hover .nb-item-title { color: var(--news-primary); }
.nb-item .nb-item-meta { margin-top: .15rem; }

/* ============ VIDEO NEWS (big video + right list) ============ */
.vn-card {
    background: #0f172a;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.vn-header {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: linear-gradient(135deg, #b91c1c 0%, #e63946 100%);
    color: #fff; padding: .55rem 1.1rem;
}
.vn-header-title { color: #fff; font-size: 1.12rem; font-weight: 800; }
.vn-header-link {
    color: rgba(255,255,255,.9); font-size: .74rem; font-weight: 700;
    white-space: nowrap; display: inline-flex; align-items: center; gap: .25rem;
}
.vn-header-link:hover { color: #fff; }
.vn-body { padding: 1rem; }
.vn-lead-img { width: 100%; height: 300px; object-fit: cover; display: block; }
.vn-lead-img.img-placeholder { height: 300px; min-height: 300px; font-size: 3rem; }
.vn-lead-caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: linear-gradient(transparent, rgba(2,6,23,.92));
    padding: 1.1rem;
}
.vn-lead-title { color: #fff; font-size: 1.3rem; font-weight: 800; line-height: 1.5; margin: .3rem 0 0; }
.vn-lead:hover .vn-lead-title { color: #fda4af; }
.vn-meta { color: #fca5a5; font-size: .78rem; font-weight: 600; }
.vn-list { display: flex; flex-direction: column; gap: .6rem; height: 100%; }
.vn-item { display: flex; align-items: flex-start; gap: .85rem; padding: .45rem 0; border-bottom: 1px dashed rgba(255,255,255,.14); }
.vn-list > a:last-child .vn-item { border-bottom: 0; }
.vn-thumb { width: 118px; height: 74px; object-fit: cover; display: block; }
.vn-thumb.img-placeholder { width: 118px; height: 74px; min-height: 74px; font-size: 1.2rem; }
.vn-thumb-wrap { flex-shrink: 0; }
.vn-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(230, 57, 70, .95); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.vn-item-title { color: #e2e8f0; font-size: .9rem; font-weight: 700; line-height: 1.45; margin-bottom: .35rem; }
a:hover .vn-item-title { color: #fff; }
.vn-item-meta { display: flex; flex-wrap: wrap; gap: .9rem; color: #94a3b8; font-size: .74rem; }
.video-card { aspect-ratio: 16/10; background: var(--news-dark); display: block; }
.video-card img, .video-card .img-placeholder { width: 100%; height: 100%; object-fit: cover; opacity: .85; transition: opacity .25s ease; }
.video-card:hover img { opacity: 1; }
.play-badge {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--news-primary); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 1.7rem;
    border: 2px solid rgba(255,255,255,.85);
    transition: transform .2s ease;
}
.video-card:hover .play-badge { transform: translate(-50%, -50%) scale(1.12); }
.video-caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(2,6,23,.9)); }

/* Search modal */
.search-modal { border: 0; border-radius: var(--radius-lg); background: var(--bg-surface); }
.search-form .form-control:focus { box-shadow: none; }
.ad-placeholder {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 220px; height: 120px; border: 2px dashed var(--border-soft);
    border-radius: var(--radius-md); color: #94a3b8; font-weight: 600;
}

/* Homepage Builder output: the saved Bootstrap widths now share one grid. */
.homepage-builder-layout { max-width: 1320px; }
 
.homepage-section-item .hero-section,
.homepage-section-item > section { padding-top: 0 !important; padding-bottom: 0 !important; }

/* ============ HISTORY (Aaj Ka Itihas) ============ */
.history-date {
    display: inline-flex; align-items: center;
    font-size: .72rem; font-weight: 700; letter-spacing: .03em;
    color: var(--news-primary);
}
.history-icon {
    width: 64px; height: 64px; border-radius: 16px;
    background: color-mix(in srgb, var(--news-primary) 10%, transparent);
    color: var(--news-primary); font-size: 1.6rem;
    display: flex; align-items: center; justify-content: center;
}

/* Calendar */
.calendar-card { overflow: hidden; }
.btn-nav {
    background: color-mix(in srgb, var(--news-primary) 10%, transparent);
    color: var(--news-primary); border: 0; border-radius: 9px; width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
}
.calendar-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.cal-dow {
    text-align: center; font-size: .68rem; font-weight: 700; color: #94a3b8;
    padding: .25rem 0; text-transform: uppercase;
}
.cal-day {
    position: relative; aspect-ratio: 1/1; border: 0; border-radius: 10px;
    background: transparent; color: var(--text-body); font-weight: 600; font-size: .82rem;
    transition: background .15s ease, color .15s ease;
    display: flex; align-items: center; justify-content: center;
}
.cal-day:hover:not(.empty) { background: var(--bg-alt); }
.cal-day.today { outline: 2px solid var(--news-primary); outline-offset: -2px; }
.cal-day.selected { background: var(--news-primary); color: #fff; }
.cal-day.has-events { font-weight: 800; }
.event-dot {
    position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%);
    width: 5px; height: 5px; border-radius: 50%; background: var(--news-primary);
    display: inline-block;
}
.cal-day.selected .event-dot { background: #fff; }

/* ============ WEBSITES ============ */
.website-card {
    border-radius: var(--radius-lg); border: 1px solid var(--border-soft);
    transition: transform .22s ease, border-color .22s ease;
}
.website-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--news-primary) 38%, var(--border-soft)); }
.website-logo { width: 46px; height: 46px; object-fit: contain; background: var(--bg-alt); padding: 6px; }

/* ============ SIDEBAR / SIDE CARDS ============ */
.side-card { border-radius: var(--radius-lg); border: 1px solid var(--border-soft); }
.poll-card { max-width: 640px; border: 1px solid var(--border-soft); }
.poll-option-row { padding: .75rem; border: 1px solid var(--border-soft); border-radius: 10px; transition: border-color .2s ease, background-color .2s ease; }
.poll-option-row:has(.form-check-input:checked) { border-color: var(--news-primary); background: color-mix(in srgb, var(--news-primary) 8%, transparent); }
.side-header {
    background: var(--bg-surface); color: var(--text-heading);
    font-weight: 700; border-bottom: 2px solid var(--news-primary);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important; font-size: .95rem;
}
[data-bs-theme="dark"] .side-header { background: var(--bg-surface); }
.list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--border-soft); }
.list-group-item { background: var(--bg-surface); color: var(--text-body); }

/* ============ FOOTER ============ */
.site-footer {
    background: linear-gradient(135deg, var(--footer-bg, #0f172a), color-mix(in srgb, var(--footer-bg, #0f172a) 84%, #000));
    color: var(--footer-text, #cbd5e1);
    margin-top: auto;
    border-top: 4px solid var(--news-accent);
}
.footer-brand { color: var(--footer-text, #fff); font-weight: 800; gap: .6rem; }
.footer-heading {
    color: var(--footer-text, #fff); font-size: .8rem; text-transform: uppercase;
    letter-spacing: .08em; margin-bottom: 1rem; opacity: .9;
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .45rem; }
.footer-links a { color: var(--footer-text, #cbd5e1); font-size: .88rem; opacity: .85; }
.footer-links a:hover { color: var(--news-primary); opacity: 1; }
.social-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: color-mix(in srgb, var(--footer-text, #fff) 12%, transparent); color: var(--footer-text, #fff); font-size: 1.05rem; margin-right: .5rem;
    transition: background .2s ease, transform .2s ease;
}
.social-link:hover { background: var(--news-primary); transform: translateY(-3px); color: var(--footer-text, #fff); }
.newsletter-form .form-control { border-radius: 10px; }
.footer-bottom { background: color-mix(in srgb, var(--footer-bg, #0f172a) 76%, #000); color: inherit; border-top: 1px solid color-mix(in srgb, var(--footer-text, #fff) 14%, transparent); }
.site-footer .form-control { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); color: #fff; }
.site-footer .form-control::placeholder { color: rgba(255,255,255,.4); }

.back-to-top {
    position: fixed; bottom: 22px; right: 22px; z-index: 999;
    width: 46px; height: 46px; display: none; align-items: center; justify-content: center;
    border: 1px solid var(--border-soft);
}

/* ============ FORMS (dark friendly) ============ */
.form-control, .form-select {
    background-color: var(--bg-surface); color: var(--text-body);
    border-color: var(--border-soft); border-radius: 10px;
}
.form-control:focus, .form-select:focus {
    background-color: var(--bg-surface); color: var(--text-body);
    border-color: var(--news-primary); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--news-primary) 18%, transparent);
}
.breadcrumb-item a { color: var(--link-color, var(--news-primary)); font-weight: 600; }
.breadcrumb-item.active { color: var(--text-muted, #94a3b8); }

/* ============================================================
   2026 SECTION REFRESH — one shared card language + reference
   layout polish (Jobs & Career reference design)
   ============================================================ */

/* ---------- Flat modern card language: border + lift, NO shadows ----- */
.news-card, .website-card, .history-card, .slider-card,
.trending-card, .poll-card, .nb-card, .jc-item {
    background: linear-gradient(180deg, var(--bg-surface), color-mix(in srgb, var(--bg-surface) 97%, var(--bg-alt)));
    border: 1px dashed var(--border-soft);
    border-radius: var(--radius-lg);
    transition: transform .25s ease, border-color .25s ease, background-color .25s ease;
}
.news-card:hover, .website-card:hover,
.history-card:hover, .slider-card:hover, .trending-card:hover,
.poll-card:hover, .nb-card:hover, .jc-item:hover {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--news-primary) 38%, var(--border-soft));
}
.news-card .card-img-top { height: 200px; }
.slider-card .card-img-top { height: 175px; }

/* Category pill + meta look identical in every section. */
.jc-cat-badge, .category-badge { letter-spacing: .01em; }

/* ---------- Jobs & Career — reference layout polish ------------------- */
.jc-lead { border-radius: var(--radius-lg); border-bottom: 4px solid var(--news-primary); }
 
.jc-lead-title { font-size: 1.5rem; }
.jc-thumb { border-radius: 12px; }

/* Vertical rhythm: the lead link and every stacked card link is an <a>. */
.jobs-career-section .col-lg-6 > a { display: block; }
.jobs-career-section .col-lg-6 > a + a { margin-top: 1rem; }

/* Right column: ONE white panel with soft dividers (reference design). */
.jc-side-list {
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    height: 100%;
}

.jc-side-list > :first-child .jc-item {
    padding-top: 0;
}
.jc-side-list .jc-item {
    border: 0; border-radius: 0; box-shadow: none;
    padding: .5rem 0; margin-top: 0;
}
.jc-side-list > a { display: block; }
.jc-side-list > a + a { border-top: 1px dashed var(--border-soft); }
.jc-side-list .jc-item:hover {
    transform: none; box-shadow: none; background: transparent;
}
.jc-side-list .jc-item:hover .jc-item-title { color: var(--news-primary); }

@media (max-width: 991.98px) {
    .jc-side-list { margin-top: 1.25rem; height: auto; }
    .jc-lead-img { height: 380px; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 991.98px) {
    .hero-img, .hero-placeholder { height: 320px; }
    .hero-lead { min-height: 320px; }
    .section-title { font-size: 1.15rem; }
    .main-nav { min-height: 56px; }
}
@media (max-width: 575.98px) {
    body { font-size: .9rem; }
    .hero-img, .hero-placeholder { height: 240px; }
    .hero-lead { min-height: 240px; }
    .brand-name { font-size: 1.1rem; }
    .ticker-item { margin-right: 2rem; }
    .breaking-label { font-size: .66rem; padding: .25rem .7rem; }
    .back-to-top { width: 40px; height: 40px; bottom: 16px; right: 16px; }
    .nb-lead-img, .nb-lead-img.img-placeholder { height: 190px; min-height: 190px; }
    .nb-thumb, .nb-thumb.img-placeholder { width: 96px; height: 70px; min-height: 70px; }
    .nb-lead-title { font-size: 1.05rem; }
}
.website-logo.placeholder { width: 46px; height: 46px; background: var(--bg-alt); color: #94a3b8; font-size: 1.3rem; }
.website-logo-lg {
    width: 84px; height: 84px; object-fit: contain;
    background: var(--bg-alt); border-radius: 20px; padding: 14px;
}
.website-logo-lg.placeholder {
    width: 84px; height: 84px; color: var(--news-primary); font-size: 2.2rem;
    background: color-mix(in srgb, var(--news-primary) 10%, transparent);
}
.website-card-lg {
    border-radius: var(--radius-lg); border: 1px solid var(--border-soft);
    transition: transform .22s ease, border-color .22s ease;
}
.ad-slot-wide .ad-placeholder { width: 100%; max-width: 728px; height: 90px; margin: 0 auto; }
.ad-slot-wide .ad-image { display: inline-block; max-width: 100%; height: auto; border: 0; }
.ad-slot-wide a { text-decoration: none; }

/* ============ VIDEO NEWS — portrait 9:16 video slider ============ */
/* Reference design: horizontally scrollable strip of portrait cards,
   full-bleed cover, centered red play button, bottom gradient title.
   Slides per view is FIXED: 4 on desktop, 2 on mobile (--vp-n below). */
.vp-wrap { position: relative; }
.vp-strip {
    --vp-n-d: 4;
    --vp-n-m: 2;
    --vp-n: var(--vp-n-d, 4); /* per view: --vp-n-d desktop, --vp-n-m mobile (media query below) */
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: .35rem;
    scrollbar-width: thin;
    scrollbar-color: var(--border-soft) transparent;
    cursor: grab;
}
.vp-strip.vp-dragging { scroll-snap-type: none; cursor: grabbing; }
.vp-strip.vp-dragging .vp-card { pointer-events: none; } /* no link-drag ghost */
.vp-strip::-webkit-scrollbar { height: 6px; }
.vp-strip::-webkit-scrollbar-thumb { background: var(--border-soft); border-radius: 999px; }
.vp-card {
    /* --vp-n = cards per view (4 desktop / 2 mobile) */
    flex: 0 0 calc((100% - (var(--vp-n, 4) - 1) * 1rem) / var(--vp-n, 4));
    scroll-snap-align: start;
    display: block; text-decoration: none;
    border-radius: 18px; overflow: hidden;
    background: var(--news-dark);
    border: 1px solid var(--border-soft);
    transition: transform .25s ease, border-color .25s ease;
    -webkit-user-select: none; user-select: none;
}
.vp-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--news-primary) 38%, var(--border-soft)); }
.vp-media { position: relative; display: block; aspect-ratio: 9 / 16; }
.vp-media .vp-img,
.vp-media .vp-img.img-placeholder {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: flex; align-items: center; justify-content: center;
}
.vp-play {
    position: absolute; top: 50%; left: 50%; z-index: 2;
    transform: translate(-50%, -50%);
    width: 62px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: var(--news-primary); color: #fff; font-size: 1.7rem;
    border: 2px solid rgba(255,255,255,.85);
    transition: transform .2s ease, filter .2s ease;
}
.vp-play .bi-play-fill { margin-left: 2px; } /* optically center the triangle */
.vp-card:hover .vp-play { transform: translate(-50%, -50%) scale(1.12); filter: brightness(1.05); }
.vp-caption {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
    padding: 2.4rem .9rem 1rem;
    background: linear-gradient(transparent, var(--vp-cap, #0f172a) 82%);
    text-align: center;
}
.vp-title {
    color: #fff; font-size: 1rem; font-weight: 700; line-height: 1.5; margin: 0;
}
/* Slider nav arrows: circular, side-positioned, hidden at scroll edges. */
.vp-nav {
    position: absolute; top: 50%; z-index: 3;
    transform: translateY(-50%);
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-soft);
    background: var(--bg-surface, #fff); color: var(--text-heading, #0f172a);
    font-size: 1.05rem; line-height: 1;
    box-shadow: var(--shadow-card);
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.vp-nav:hover { background: var(--news-primary); border-color: var(--news-primary); color: #fff; }
.vp-nav:disabled { opacity: 0; pointer-events: none; }
.vp-prev { left: 10px; }
.vp-next { right: 10px; }
/* Slides per view: --vp-n-d (desktop) / --vp-n-m (mobile). Sections can
   override the two variables inline on the strip (Homepage Builder
   "Desktop slides" / "Mobile slides" options). */
@media (max-width: 767.98px) {
    .vp-strip { --vp-n: var(--vp-n-m, 2); }
    .vp-title { font-size: .92rem; }
}

/* ============ TABBED NEWS — reference-design category tabs ============ */
/* Card content inside the panels reuses the shared Jobs & Career (jc-*)
   styles; only the tab bar + sub-category strip are section-specific. */
.nt-tabs {
    display: flex; gap: 10px; overflow-x: auto; list-style: none;
    margin: 0 0 14px; padding: 2px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.nt-tabs::-webkit-scrollbar { display: none; }
.nt-tab { flex-shrink: 0; }
.nt-tab button {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    min-width: 96px; padding: 12px 16px 10px; cursor: pointer;
    background: var(--bg-surface); color: var(--text-body);
    border: 1px solid var(--border-soft); border-radius: var(--radius-md);
    transition: border-color .18s ease, background-color .18s ease, color .18s ease,
                box-shadow .18s ease, transform .18s ease;
}
.nt-tab button:hover { transform: translateY(-2px); border-color: var(--text-muted, #64748b); }
.nt-tab.active button {
    background: var(--news-dark); border-color: var(--news-dark); color: #fff;
}
.nt-icon {
    width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-size: 1.3rem; overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .22);
}
.nt-icon img {
    width: 100%; height: 100%; object-fit: contain; padding: 7px; display: block;
}
.nt-label { font-size: .82rem; font-weight: 600; line-height: 1.15; white-space: nowrap; }
/* Dark sub-category strip (main category -> its sub-categories). */
.nt-subline {
    display: flex; flex-wrap: wrap; align-items: center; gap: 2px 20px;
    background: var(--news-dark); color: #fff;
    padding: 10px 18px; border-radius: var(--radius-md); margin-bottom: 18px;
}
.nt-sub {
    font-size: .86rem; font-weight: 600; color: rgba(255, 255, 255, .82);
    text-decoration: none; padding: 2px 0;
    border-bottom: 2px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
.nt-sub:hover, .nt-sub.active { color: #fff; border-bottom-color: var(--news-primary); }
.nt-panel { min-height: 120px; }
/* Spacing between stacked cards inside the tab panels (same rhythm
   as .jobs-career-section). */
.tabbed-news-section .jc-side-list .jc-item + .jc-item,
.tabbed-news-section .jc-item + .jc-item { margin-top: 1rem; }

/* ============================================================
   TODAY IN HISTORY (आज का इतिहास) — historynet-style module
   ============================================================ */
.thi {
    --thi-beige: #f1ede4;
    --thi-beige-soft: #f7f4ec;
    --thi-red: var(--news-primary);
}
[data-bs-theme="dark"] .thi {
    --thi-beige: #232733;
    --thi-beige-soft: #1c202b;
}

/* ---- hero band + red flag strip ---- */
.thi-hero { background: var(--bg-surface); border-bottom: 1px solid var(--border-soft); position: relative; }
.thi-hero-in { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-top: 1.6rem; }
.thi-title-main {
    color: var(--thi-red); font-weight: 800; font-size: 2rem; line-height: 1.05;
    margin: 0; text-transform: uppercase; letter-spacing: .01em;
}
.thi-title-sub {
    display: block; margin-top: .3rem; font-size: .72rem; font-weight: 700;
    letter-spacing: .22em; color: var(--text-muted, #8a8f98); text-transform: uppercase;
}
.thi-strip { display: flex; align-items: flex-start; gap: .55rem; }
.thi-days { display: flex; align-items: flex-start; gap: .55rem; }
.thi-day {
    width: 86px; border: 0; cursor: pointer; background: var(--thi-beige);
    color: var(--text-heading); display: flex; flex-direction: column; align-items: center;
    gap: .15rem; padding: .6rem .4rem .85rem;
    transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.thi-day:hover { transform: translateY(-2px); }
.thi-day-m { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.thi-day-n { font-size: 2.3rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.thi-day-n .bi { font-size: 1.7rem; color: var(--thi-red); }
.thi-day.is-active {
    background: var(--thi-red); color: #fff; position: relative; z-index: 2;
    padding-bottom: 2.7rem; margin-bottom: -2rem;
    clip-path: polygon(0 0, 100% 0, 100% 74%, 50% 100%, 0 74%);
}
.thi-day.is-active .thi-day-m { opacity: .9; }
.thi-birthday {
    background: none; border: 0; padding: 0; cursor: pointer; text-align: right;
    font-weight: 800; font-size: .95rem; color: var(--text-heading);
    text-decoration: underline; text-decoration-color: var(--thi-red); text-underline-offset: 4px;
}
.thi-birthday:hover { color: var(--thi-red); }

/* ---- pick-a-day calendar popup ---- */
.thi-calpop {
    position: absolute; z-index: 60; top: 100%; left: 50%; transform: translateX(-50%);
    width: min(400px, 92vw); margin-top: .6rem;
    background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: 10px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .18); overflow: hidden;
}
.thi-cal-head { display: flex; align-items: center; justify-content: space-between; background: var(--thi-red); color: #fff; padding: .7rem .9rem; }
.thi-cal-title { font-weight: 800; letter-spacing: .04em; }
.thi-cal-nav { background: none; border: 0; color: #fff; font-size: 1.05rem; line-height: 1; padding: .2rem .4rem; }
.thi-cal-nav:hover { opacity: .85; }
.thi-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: .8rem; }
.thi-cal-dow { text-align: center; font-size: .66rem; font-weight: 700; color: var(--text-muted, #8a8f98); padding: .2rem 0; }
.thi-cal-day {
    position: relative; aspect-ratio: 1 / 1; border: 0; border-radius: 6px; cursor: pointer;
    background: var(--thi-beige); color: var(--text-heading); font-weight: 700; font-size: .85rem;
    display: flex; align-items: center; justify-content: center;
}
.thi-cal-day.off { background: var(--bg-surface); color: #c9cdd3; font-weight: 600; cursor: default; }
.thi-cal-day:not(.off):hover { background: var(--thi-beige-soft); }
.thi-cal-day.today { box-shadow: inset 0 0 0 2px var(--thi-red); }
.thi-cal-day.sel { background: var(--thi-red); color: #fff; }
.thi-dot { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--thi-red); }
.thi-cal-day.sel .thi-dot { background: #fff; }
.thi-cal-foot { display: flex; justify-content: space-between; padding: .6rem 1rem .8rem; }
.thi-cal-foot button {
    background: none; border: 0; padding: 0 0 .15rem; cursor: pointer;
    font-weight: 700; font-size: .82rem; color: var(--text-heading);
    border-bottom: 2px solid var(--thi-red);
}
.thi-cal-foot button:hover { color: var(--thi-red); }

/* ---- body: pill + year blocks ---- */
.thi-body { padding-top: 3.2rem; padding-bottom: 2.5rem; }
.thi-pill {
    display: inline-flex; align-items: center; gap: .55rem;
    background: var(--thi-beige); color: var(--text-heading);
    font-weight: 800; font-size: 1rem; letter-spacing: .02em;
    padding: .5rem 1.1rem; border-radius: 999px;
}
.thi-pill .bi { color: var(--thi-red); font-size: 1.05rem; }
.thi-event { padding: 1.5rem 0 1.3rem; border-bottom: 1px solid var(--border-soft); }
.thi-year { font-size: 3.4rem; font-weight: 800; line-height: 1; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.thi-event-img { max-width: 340px; width: 100%; border-radius: 12px; margin: .9rem 0 .3rem; display: block; }
.thi-event-title { font-size: 1.12rem; font-weight: 700; margin: .7rem 0 .35rem; color: var(--text-heading); }
.thi-event-text { color: var(--text-body); font-size: 1.02rem; line-height: 1.75; margin: 0; max-width: 62ch; }
.thi-event-rich { color: var(--text-body); font-size: 1.02rem; line-height: 1.75; max-width: 62ch; }
.thi-event-rich p { margin: 0 0 .7rem; }
.thi-event-rich img { max-width: 100%; height: auto; border-radius: 12px; margin: .6rem 0; }
.thi-event-rich table { width: 100%; border-collapse: collapse; margin: .8rem 0; }
.thi-event-rich table th, .thi-event-rich table td { border: 1px solid var(--border-soft); padding: .45rem .7rem; }
.thi-event-rich blockquote { border-left: 4px solid var(--news-primary); background: var(--thi-beige-soft); padding: .6rem 1rem; margin: .8rem 0; }
.thi-event-rich ul, .thi-event-rich ol { padding-left: 1.5rem; margin: 0 0 .7rem; }
.thi-hide { display: none; }
.thi-more-link {
    background: none; border: 0; padding: 0; margin-top: 1.2rem; cursor: pointer;
    font-weight: 800; font-size: 1.05rem; color: var(--text-heading);
    text-decoration: underline; text-decoration-color: var(--thi-red); text-underline-offset: 5px;
}
.thi-more-link:hover { color: var(--thi-red); }
.thi-empty { padding: 2.5rem 0; color: var(--text-muted, #8a8f98); font-weight: 600; display: flex; align-items: center; gap: .6rem; }
.thi-loading { padding: 2.5rem 0; display: flex; justify-content: center; color: var(--thi-red); }

/* ---- spotlight sidebar ---- */
.thi-side { background: var(--thi-beige-soft); border: 1px solid var(--border-soft); border-radius: 14px; padding: 1.3rem 1.3rem 1rem; }
.thi-side-head { display: flex; align-items: flex-start; gap: .7rem; }
.thi-side-ico { color: var(--thi-red); font-size: 1.5rem; line-height: 1.2; }
.thi-side-head h2 { font-size: 1.18rem; font-weight: 800; margin: 0; color: var(--text-heading); line-height: 1.3; }
.thi-side-row { display: flex; gap: .9rem; padding: 1rem 0; border-bottom: 1px solid var(--border-soft); }
.thi-side-row:last-child { border-bottom: 0; padding-bottom: .4rem; }
.thi-side-year {
    flex: 0 0 auto; min-width: 58px; text-align: center; align-self: flex-start;
    background: var(--bg-surface); border: 2px solid var(--thi-red); border-radius: 8px;
    font-weight: 800; padding: .35rem .3rem; font-size: 1rem; color: var(--text-heading);
    font-variant-numeric: tabular-nums;
}
.thi-side-txt h3 { font-size: .98rem; font-weight: 700; margin: 0 0 .25rem; color: var(--text-heading); }
.thi-side-txt p { font-size: .88rem; color: var(--text-body); margin: 0 0 .45rem; line-height: 1.6; }
.thi-side-txt a { font-weight: 700; font-size: .85rem; color: var(--thi-red); text-decoration: none; }
.thi-side-txt a:hover { text-decoration: underline; }

/* ---- responsive ---- */
@media (max-width: 991.98px) {
    .thi-hero-in { flex-wrap: wrap; padding-top: 1.1rem; gap: 1rem; }
    .thi-strip { width: 100%; overflow-x: auto; padding-bottom: .4rem; }
    .thi-day { width: 74px; }
    .thi-day-n { font-size: 1.9rem; }
    .thi-day.is-active { padding-bottom: 2.3rem; margin-bottom: -1.7rem; }
    .thi-calpop { left: 1rem; right: 1rem; transform: none; width: auto; }
    .thi-body { padding-top: 2.6rem; }
    .thi-title-main { font-size: 1.5rem; }
    .thi-year { font-size: 2.6rem; }
}

/* ============================================================
   LIVE BLOG — modern timeline layout (article page + /live-blog)
   ============================================================ */
.live-blog-box {
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-surface);
}
.lb-header {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .8rem 1.1rem;
    background: linear-gradient(90deg, var(--news-primary), color-mix(in srgb, var(--news-primary) 72%, #000));
    color: #fff;
}
.lb-title {
    display: inline-flex; align-items: center;
    font-weight: 800; font-size: 1.02rem; letter-spacing: .01em;
}
.lb-title i { font-size: 1.15rem; }
.lb-live-tag {
    display: inline-flex; align-items: center; gap: .45rem;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35);
    color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .08em;
    padding: .28rem .7rem; border-radius: 999px;
}
.lb-pulse {
    width: 9px; height: 9px; border-radius: 50%; background: #fff;
    animation: lb-blink 1.2s ease-in-out infinite;
}
@keyframes lb-blink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.72); }
}
.lb-timeline {
    position: relative;
    padding: 1.2rem 1.2rem 1rem;
}
.lb-timeline::before {
    content: '';
    position: absolute; top: 1.4rem; bottom: 1rem; left: 4.55rem;
    width: 2px; background: linear-gradient(180deg, var(--news-primary) 0%, color-mix(in srgb, var(--news-primary) 28%, transparent) 100%);
}
.lb-item {
    position: relative;
    display: flex; gap: 1.1rem;
    margin-bottom: 1.15rem;
}
.lb-item:last-child { margin-bottom: .2rem; }
.lb-rail {
    flex: 0 0 3.1rem;
    display: flex; flex-direction: column; align-items: center; gap: .4rem;
    padding-top: .2rem;
    position: relative; z-index: 1;
}
.lb-dot {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--bg-surface);
    border: 3px solid var(--news-primary);
    box-shadow: 0 0 0 4px var(--bg-surface);
}
.lb-dot.is-latest {
    background: var(--news-primary);
    animation: lb-pulse-dot 1.4s ease-in-out infinite;
}
@keyframes lb-pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--news-primary) 55%, transparent), 0 0 0 3px var(--bg-surface); }
    50%      { box-shadow: 0 0 0 7px transparent, 0 0 0 3px var(--bg-surface); }
}
.lb-time {
    font-size: .72rem; font-weight: 700; color: var(--text-body);
    background: var(--bg-alt); border: 1px solid var(--border-soft);
    border-radius: 999px; padding: .18rem .5rem;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.lb-card {
    flex: 1 1 auto; min-width: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--news-primary);
    border-radius: 10px;
    padding: .85rem 1rem;
}
.lb-heading {
    font-size: 1.08rem; font-weight: 800; line-height: 1.4;
    color: var(--text-heading); margin: 0 0 .45rem;
}
.lb-rich {
    font-size: .96rem; line-height: 1.75; color: var(--text-body);
}
.lb-rich p { margin: 0 0 .6rem; }
.lb-rich h2, .lb-rich h3, .lb-rich h4 { font-weight: 700; color: var(--text-heading); margin: .7rem 0 .4rem; line-height: 1.35; }
.lb-rich ul, .lb-rich ol { padding-left: 1.4rem; margin: 0 0 .6rem; }
.lb-rich li { margin-bottom: .25rem; }
.lb-rich img { max-width: 100%; height: auto; border-radius: 8px; margin: .4rem 0; }
.lb-rich blockquote {
    border-left: 4px solid var(--news-primary); background: var(--bg-alt);
    padding: .55rem .9rem; margin: .7rem 0; border-radius: 0 8px 8px 0;
    color: var(--text-body);
}
.lb-rich table { width: 100%; border-collapse: collapse; margin: .6rem 0; }
.lb-rich table th, .lb-rich table td { border: 1px solid var(--border-soft); padding: .4rem .6rem; }
.lb-rich table th { background: var(--bg-alt); font-weight: 700; }
.lb-rich a { color: var(--news-primary); font-weight: 600; text-decoration: underline; }
.lb-text {
    font-size: .96rem; line-height: 1.75; color: var(--text-body); margin: 0;
}
/* Video embeds inside live entries — pasted video links render as
   responsive iframes (frontend + admin preview list). */
.lb-video {
    position: relative; width: 100%;
    aspect-ratio: 16 / 10;
    margin: .6rem 0;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.lb-video iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
}
@media (max-width: 575.98px) {
    .lb-video { aspect-ratio: 16 / 10; }
}
/* responsive live blog */
@media (max-width: 575.98px) {
    .lb-timeline::before { left: 1.55rem; }
    .lb-rail { flex-basis: 2rem; }
    .lb-time { font-size: .64rem; padding: .14rem .4rem; }
    .lb-item { gap: .8rem; }
    .lb-card { padding: .7rem .8rem; }
    .lb-heading { font-size: 1rem; }
}

/* ============================================================
   LIVE BLOG HOMEPAGE SECTION (Homepage Builder output)
   Reuses the .live-blog-box / .lb-* timeline styles above.
   The section shell background + heading color are applied via
   inline CSS custom props (--lb-bg / --lb-fg) in the partial.
   ============================================================ */
.lb-home-card {
    border: 1px solid var(--border-soft);
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-surface);
}
.lb-home-card .lb-header { text-decoration: none; display: flex; gap: .6rem; }
.lb-home-card .lb-header:hover .lb-title { text-decoration: underline; }
.lb-home-card .lb-timeline { max-height: 380px; overflow: hidden; }
.lb-home-footer {
    border-top: 1px solid var(--border-soft);
    padding: .75rem 1.1rem;
    background: var(--bg-surface);
    text-align: right;
}
.lb-home-footer a {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--news-primary); color: #fff;
    font-size: .85rem; font-weight: 700; line-height: 1.4;
    padding: .45rem 1rem; border-radius: 999px;
    transition: filter .15s ease, transform .15s ease;
    text-decoration: none;
}
.lb-home-footer a:hover { color: #fff; filter: brightness(.92); transform: translateY(-1px); }

/* ============================================================
   LIVE INDICATOR — red pulsing badge before post titles in
   every grid/list when the post is a live blog (is_live = 1)
   ============================================================ */
.live-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--news-primary, #dc2626);
    color: #fff; font-size: .66rem; font-weight: 800;
    letter-spacing: .05em; text-transform: uppercase; line-height: 1;
    padding: .3rem .5rem; border-radius: 999px;
    vertical-align: middle; margin-right: .4rem; flex-shrink: 0;
    box-shadow: 0 0 0 0 transparent; /* flat modern */
}
.live-badge-dot {
    width: 6px; height: 6px; border-radius: 50%; background: #fff;
    animation: lb-blink 1.2s ease-in-out infinite;
}
/* Small screens: keep the badge compact inside clamped card titles */
@media (max-width: 991.98px) {
    .live-badge { font-size: .6rem; padding: .26rem .42rem; gap: .3rem; }
    .live-badge-dot { width: 5px; height: 5px; }
}
/* ============================================================
   POST PAGE — ad slots, in-content related slider, sidebar widgets
   Controlled from Admin > Post Page Settings.
   ============================================================ */
.post-ad { text-align: center; overflow: hidden; }
.post-ad .post-ad-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted, #8892a2); margin-bottom: .25rem; }
.post-ad .post-ad-img { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border-soft, #e7ebf2); background: var(--bg-alt, #f6f7fb); }
.post-ad .ad-placeholder {
    display: flex; align-items: center; justify-content: center;
    min-height: 90px; border: 1px dashed var(--border-soft, #cbd5e1);
    background: var(--bg-alt, #f6f7fb); border-radius: 10px;
    color: var(--text-muted, #8892a2); font-size: .8rem; font-weight: 600;
}

/* In-content related slider */
.post-rel-slider { border: 1px solid var(--border-soft, #e7ebf2); border-radius: 14px; background: var(--bg-surface, #fff); padding: 1rem 1rem .25rem; }
.post-rel-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; }
.post-rel-title { font-weight: 800; font-size: 1.05rem; color: var(--heading-color, #172033); display: inline-flex; align-items: center; gap: .35rem; }
.post-rel-title i { color: var(--news-primary, #dc2626); }
.post-rel-nav { display: inline-flex; gap: .4rem; }
.rel-arrow {
    width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border-soft, #e7ebf2);
    background: var(--bg-alt, #f6f7fb); color: var(--news-primary, #dc2626);
    display: inline-flex; align-items: center; justify-content: center; font-size: .9rem;
    transition: background .15s ease, color .15s ease;
}
.rel-arrow:hover { background: var(--news-primary, #dc2626); border-color: transparent; color: #fff; }
.post-rel-card { border-radius: 12px; overflow: hidden; }
.post-rel-thumb { display: block; border-radius: 12px; overflow: hidden; }
.post-rel-img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 12px; transition: transform .3s ease; }
a:hover .post-rel-img { transform: scale(1.045); }
.post-rel-ttl { font-size: .92rem; line-height: 1.45; }
.post-rel-ttl a { color: var(--heading-color, #172033); }
.post-rel-ttl a:hover { color: var(--news-primary, #dc2626); }

/* Sidebar trending list (with images) */
.post-trend-list { padding: .35rem 0; }
.post-trend-item {
    display: flex; align-items: center; gap: .65rem;
    padding: .6rem 1rem; text-decoration: none;
    border-bottom: 1px solid var(--border-soft, #eef1f6);
    transition: background .15s ease;
}
.post-trend-item:last-child { border-bottom: 0; }
.post-trend-item:hover { background: var(--bg-alt, #f8fafc); }
.post-trend-num {
    flex-shrink: 0; width: 30px; height: 34px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--news-primary, #dc2626) 10%, transparent);
    color: var(--news-primary, #dc2626); font-weight: 800; font-size: .9rem;
}
.post-trend-img { flex-shrink: 0; width: 58px; height: 46px; object-fit: cover; border-radius: 8px; }
.post-trend-body { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.post-trend-ttl { font-size: .84rem; font-weight: 700; color: var(--heading-color, #172033); line-height: 1.4; }
.post-trend-item:hover .post-trend-ttl { color: var(--news-primary, #dc2626); }

/* Sidebar related list thumbnails */
.side-thumb-img { flex-shrink: 0; width: 64px; height: 48px; object-fit: cover; border-radius: 8px; }

/* Post page: sticky left ad column */
.article-leftad { position: sticky; top: 100px; }
.article-leftad .post-ad { min-height: 260px; }
.article-leftad .post-ad .post-ad-img { width: 100%; max-height: 620px; object-fit: contain; }
.article-leftad .post-ad .ad-placeholder { min-height: 620px; writing-mode: vertical-rl; text-orientation: mixed; }

/* Post page: right sidebar top ad */
.col-lg-4.col-xl-3 > .post-ad .post-ad-img { max-height: 280px; width: 100%; object-fit: contain; }

[data-bs-theme="dark"] .post-rel-slider { background: var(--bg-surface, #1c1f23); border-color: #2a2e33; }
[data-bs-theme="dark"] .post-trend-item { border-color: #26292c; }
[data-bs-theme="dark"] .post-trend-item:hover { background: #212529; }
[data-bs-theme="dark"] .post-rel-ttl a { color: #e3e6ea; }
[data-bs-theme="dark"] .post-trend-ttl { color: #e3e6ea; }
/* ============================================================
   HOME SECTION — LIVE BLOG (home_sections/live_blog.php)
   Featured latest live blog (content LEFT / image RIGHT) + grid
   of the other live blogs. Scoped under .lb-home-area; the CSS
   variables --lb-bg / --lb-fg / --lb-soft are set inline per
   section from the admin bg_color so every section can differ.
   ============================================================ */
.lb-home-area .sec-heading-title { color: var(--lb-fg); }
.lb-home-area .sec-heading-more { color: var(--lb-fg); }
.lb-home-area .sec-heading-more:hover { color: var(--news-primary); }
.lb-home-area .sec-heading-more-text { color: var(--lb-soft); }

/* ---- Featured latest live blog: content LEFT / image RIGHT ---- */
.live-blog-feature {
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-soft, #e7ebf2);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
    transition: box-shadow .25s ease, transform .25s ease;
}
.live-blog-feature:hover { box-shadow: 0 18px 42px rgba(15, 23, 42, .14); transform: translateY(-3px); }
.lb-feature-media {
    position: relative;
    min-height: 280px;
    overflow: hidden;
    background: var(--bg-alt, #eef1f6);
}
.lb-feature-media .lb-feature-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.lb-feature-body {
    padding: 1.6rem 1.75rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .7rem;
}
.lb-feature-live {
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--news-primary, #dc2626);
    color: #fff;
    font-size: .76rem; font-weight: 700; letter-spacing: .08em;
    padding: .28rem .75rem; border-radius: 999px;
}
.lb-feature-title {
    font-size: 1.35rem; font-weight: 800; line-height: 1.32;
    margin: 0;
}
.lb-feature-title a { color: var(--heading-color, #172033); }
.lb-feature-title a:hover { color: var(--news-primary, #dc2626); }
.lb-feature-excerpt {
    color: var(--text-body, #344054);
    font-size: .95rem; line-height: 1.65;
    margin: 0;
}
.lb-feature-meta {
    display: flex; flex-wrap: wrap; gap: .9rem;
    color: var(--text-muted, #667085);
    font-size: .8rem;
}
.lb-feature-update {
    width: 100%;
    border-left: 3px solid var(--news-primary, #dc2626);
    background: var(--bg-alt, #f6f7fb);
    border-radius: 10px;
    padding: .7rem .85rem;
}
.lb-feature-update-time { font-size: .72rem; font-weight: 700; color: var(--news-primary, #dc2626); }
.lb-feature-update-body { font-size: .84rem; line-height: 1.5; color: var(--text-body, #344054); }
.lb-feature-actions { margin-top: auto; }
.lb-feature-actions .btn-danger { border-radius: 999px; padding: .45rem 1.15rem; font-weight: 600; }

/* ---- "Other 4" live blog grid ---- */
.lb-grid-card {
    background: var(--bg-surface, #fff);
    border: 1px solid var(--border-soft, #e7ebf2);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .22s ease, transform .22s ease;
}
.lb-grid-card:hover { box-shadow: 0 12px 26px rgba(15, 23, 42, .13); transform: translateY(-4px); }
.lb-grid-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-alt, #eef1f6); }
.lb-grid-media img.lb-grid-img,
.lb-grid-media .img-placeholder { width: 100%; height: 100%; object-fit: cover; }
.lb-grid-title {
    font-size: .92rem; font-weight: 700; line-height: 1.42;
    color: var(--heading-color, #172033); margin: 0;
}
.lb-grid-card:hover .lb-grid-title { color: var(--news-primary, #dc2626); }
@media (max-width: 575.98px) {
    .lb-feature-body { padding: 1.2rem 1.2rem; }
    .lb-feature-title { font-size: 1.12rem; }
    .lb-feature-media { min-height: 220px; }
}

/* ============================================================
   WEB PUSH NOTIFICATIONS - bell, prompt bubble, toasts
   ============================================================ */
.hn-push-bell {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.hn-push-bell.is-on .hn-quick-ico { background: var(--news-primary, #e63946); color: #fff; }
.hn-push-bell.is-on .hn-quick-ico i { color: #fff; }
.hn-push-bell.push-unsupported { opacity: .45; cursor: not-allowed; }

#pushBubble {
    position: fixed;
    bottom: 92px;
    right: 18px;
    z-index: 1090;
    max-width: 340px;
    width: calc(100vw - 36px);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
}
#pushBubble.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

.push-bubble-card {
    position: relative;
    display: flex;
    gap: .75rem;
    align-items: flex-start;
    background: var(--bg-surface, #fff);
    color: var(--text-body, #212529);
    border: 1px solid var(--border-soft, rgba(0,0,0,.08));
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
    padding: .9rem 1rem;
}
.push-bubble-close {
    position: absolute;
    top: 4px;
    right: 8px;
    background: none;
    border: 0;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--text-muted, #6c757d);
    cursor: pointer;
}
.push-bubble-ico {
    flex: 0 0 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--news-primary, #e63946);
    color: #fff;
    font-size: 1.25rem;
}
.push-bubble-txt { display: flex; flex-direction: column; gap: .15rem; font-size: .86rem; }
.push-bubble-txt b { font-size: .95rem; }
.push-bubble-txt span { opacity: .75; }
.push-bubble-actions { display: flex; gap: .5rem; margin-top: .5rem; }
.push-bubble-actions .push-bubble-allow {
    background: var(--news-primary, #e63946);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: .3rem .95rem;
    font-weight: 600;
    cursor: pointer;
    font-size: .84rem;
}
.push-bubble-actions .push-bubble-later {
    background: transparent;
    color: var(--text-muted, #6c757d);
    border: 1px solid var(--border-soft, rgba(0,0,0,.12));
    border-radius: 999px;
    padding: .3rem .85rem;
    cursor: pointer;
    font-size: .84rem;
}

#pushToastHost {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1091;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: center;
    pointer-events: none;
}
.push-toast {
    background: #212529;
    color: #fff;
    border-radius: 999px;
    padding: .55rem 1.2rem;
    font-size: .88rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .3s ease, transform .3s ease;
    max-width: min(92vw, 480px);
    text-align: center;
}
.push-toast.is-visible { opacity: 1; transform: translateY(0); }
.push-toast--success { background: #198754; }
.push-toast--warn    { background: #b45309; }
.push-toast--error   { background: #b02a37; }
/* ============================================================
   FLAT MODERN DESIGN LAYER — public frontend (loaded LAST, wins)
   Design language:
   • NO box-shadows on cards / sections / hover states
   • NO border-radius on images, videos, iframes, cards, badges
   • Cards = flat surfaces with NO borders
   • Lists = bottom hairline border ONLY
   • Section headings = modern left accent bar
   ============================================================ */
:root {
    --radius-lg: 0px;
    --radius-md: 0px;
    --btn-radius: 0px;
    --shadow-soft: 0 0 0 0 transparent;
    --shadow-card: 0 0 0 0 transparent;
}

/* ---------- 1. MEDIA — sharp corners everywhere ---------- */
img, video, iframe,
.img-placeholder {
    border-radius: 0 !important;
}

/* ---------- 2. CARDS & PANELS — flat, borderless, shadowless ---------- */
.card,
.side-card,
.poll-card,
.news-card,
.website-card,
.website-card-lg,
.history-card,
.slider-card,
.trending-card,
.nb-card,
.vn-card,
.vp-card,
.jc-item,
.jc-lead,
.jc-side-list,
.hero-side,
.live-blog-feature,
.lb-grid-card,
.thi-side,
.post-rel-slider,
.search-modal {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--bg-surface);
}

/* cards never lift or glow on hover (color/underline hovers stay) */
.news-card:hover, .website-card:hover, .website-card-lg:hover,
.history-card:hover, .slider-card:hover, .trending-card:hover,
.poll-card:hover, .nb-card:hover, .vn-card:hover, .vp-card:hover,
.jc-item:hover, .hero-side:hover,
.live-blog-feature:hover, .lb-grid-card:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* section shell extras */
.jc-lead { border-bottom: 0 !important; }          /* old 4px bottom accent */
.live-blog-feature, .lb-grid-card { border: 0 !important; }

/* ---------- 3. PILLS / BADGES / PLAY BUTTONS — sharp rectangles ---- */
.category-badge,
.jc-cat-badge,
.jc-lead-badge,
.jc-read-btn,
.trending-num,
.trending-num.big,
.vn-play,
.vp-play,
.poll-option-row,
.website-logo,
.website-logo-lg,
.push-bubble-card,
.push-bubble-ico,
.push-bubble-allow,
.push-bubble-later,
.push-toast,
.title-bar,
.sec-heading-line,
.sec-heading-arrow,
.post-rel-card,
.post-rel-thumb,
.post-trend-img,
.side-thumb-img,
.post-ad .post-ad-img {

/* ---------- 4. SECTION HEADINGS — modern left accent bar ---------- */
.sec-heading {
    border-left: 4px solid var(--news-primary);
    padding-left: .95rem;
    gap: .85rem;
}
.sec-heading-icon {
    width: 42px;
    height: 42px;
    border-radius: 0 !important;
    background: transparent;
}
.sec-heading-icon i {
    width: 42px;
    height: 42px;
    border-radius: 0 !important;
    background: var(--news-primary);
    color: #fff;
    font-size: 1.15rem;
    box-shadow: none;
}
.sec-heading-title { font-size: 1.3rem; }
@media (max-width: 767.98px) {
    .sec-heading { padding-left: .7rem; border-left-width: 3px; }
    .sec-heading-icon,
    .sec-heading-icon i { width: 34px; height: 34px; }
    .sec-heading-icon i { font-size: .95rem; }
    .sec-heading-title { font-size: 1.15rem; }
}
/* legacy title bar (if still used anywhere) */
.title-bar { width: 4px; border-radius: 0; }

/* ---------- 5. LISTS — bottom hairline border ONLY ---------- */
/* stacked row items: drop the box, keep a single bottom hairline */
.jc-item {
    border: 0 !important;
    border-bottom: 1px solid var(--border-soft) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 1rem 0;
}
.jc-item:last-child,
a:last-child > .jc-item { border-bottom: 0 !important; }

/* jobs right-column white panel: flat shell, items keep hairlines */
.jc-side-list { padding: .25rem 0 !important; }
.jc-side-list > a + a { border-top: 0 !important; }

/* news block list: dashed -> solid hairline */
.nb-item { border-bottom: 1px solid var(--border-soft) !important; }

/* video list (dark panel): dashed -> solid hairline */
.vn-item { border-bottom: 1px solid rgba(255, 255, 255, .14) !important; }

/* bootstrap list-groups (sidebar widgets etc.): bottom borders only */
.list-group-item {
    border: 0 !important;
    border-bottom: 1px solid var(--border-soft) !important;
    border-radius: 0 !important;
}
.list-group-item:last-child { border-bottom: 0 !important; }

/* hero side rows: flat rows with hairline separators */
.hero-side {
    border: 0 !important;
    border-bottom: 1px solid var(--border-soft) !important;
}
.hero-side:last-child { border-bottom: 0 !important; }

/* trending / side list rows get hairlines between items */
.trending-list > li + li,
.post-trend-item + .post-trend-item { border-top: 0 !important; }

/* ---------- 6. REMAINING SHAPES — flatten content chrome ---------- */
.thi-event-img,
.thi-event-rich img,
.thi-cal-day,
.thi-side .btn,
.lb-rich img,
.lb-item-img,
.post-rel-nav button,
.story-thumb,
.website-logo-lg.placeholder,
.search-modal .form-control,
.newsletter-form .form-control {
    border-radius: 0 !important;
}
.side-header { border-radius: 0 !important; }
    border-radius: 0 !important;
}
.push-bubble-card,
.push-toast { box-shadow: none !important; }

/* ============================================================
   POLL SECTION — modern card with COMPLETE border, clean row
   selection, animated % result bars and a See-Result toggle.
   (Intentional exception to the flat borderless card layer above:
    the user asked for a full border on the poll box.)
   ============================================================ */
.poll-card-modern {
    max-width: 640px;
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-top: 4px solid var(--news-primary);
    padding: 1.4rem 1.5rem 1.5rem;
}
.poll-live-chip {
    display: inline-flex;
    align-items: center;
    background: color-mix(in srgb, var(--news-primary) 12%, transparent);
    color: var(--news-primary);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .28rem .7rem;
    margin-bottom: .8rem;
}
.poll-question {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.5;
    color: var(--text-heading);
    margin: 0 0 1rem;
}

/* ---------- option rows: whole row is the click target ---------- */
.poll-option {
    display: flex;
    align-items: center;
    gap: .7rem;
    border: 1.5px solid var(--border-soft);
    padding: .7rem .9rem;
    margin-bottom: .6rem;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease;
    position: relative;
}
.poll-option:hover {
    border-color: color-mix(in srgb, var(--news-primary) 45%, var(--border-soft));
    background: var(--bg-alt);
}
.poll-option-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.poll-option-box {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border: 2px solid var(--border-soft);
    background: var(--bg-surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: .8rem;
    transition: all .18s ease;
}
.poll-option.is-picked {
    border-color: var(--news-primary);
    background: color-mix(in srgb, var(--news-primary) 7%, transparent);
}
.poll-option.is-picked .poll-option-box {
    border-color: var(--news-primary);
    background: var(--news-primary);
    color: #fff;
}
.poll-option-text {
    font-weight: 600;
    color: var(--text-heading);
    font-size: .95rem;
}
.poll-vote-btn {
    width: 100%;
    margin-top: .9rem;
    padding: .65rem 1rem;
    background: var(--news-primary);
    border: 0;
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    transition: filter .18s ease;
}
.poll-vote-btn:hover:not(:disabled) { filter: brightness(.92); }
.poll-vote-btn:disabled { opacity: .55; cursor: not-allowed; }
.poll-see-btn {
    width: 100%;
    margin-top: .6rem;
    padding: .55rem 1rem;
    background: transparent;
    border: 1.5px solid var(--news-primary);
    color: var(--news-primary);
    font-weight: 700;
    font-size: .88rem;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
}
.poll-see-btn:hover { background: var(--news-primary); color: #fff; }
.poll-msg { min-height: 1.2rem; font-size: .85rem; margin-top: .5rem; }

/* ---------- results: animated % bars ---------- */
.poll-result { margin-bottom: .9rem; }
.poll-result-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .8rem;
    margin-bottom: .3rem;
}
.poll-result-label { font-weight: 600; color: var(--text-heading); font-size: .93rem; }
.poll-result-pct { font-weight: 800; color: var(--text-heading); }
.poll-result.is-lead .poll-result-label,
.poll-result.is-lead .poll-result-pct { color: var(--news-primary); }
.poll-result-track {
    height: 10px;
    background: var(--bg-alt);
    overflow: hidden;
}
.poll-result-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--news-primary), color-mix(in srgb, var(--news-primary) 65%, #fff));
    transition: width .8s cubic-bezier(.2, .7, .3, 1);
}
.poll-result.is-mine .poll-result-fill {
    background: linear-gradient(90deg, var(--news-accent, #f59e0b), color-mix(in srgb, var(--news-accent, #f59e0b) 65%, #fff));
}
.poll-result-votes {
    font-size: .74rem;
    color: var(--text-muted, #94a3b8);
    margin-top: .2rem;
}
.poll-total {
    font-size: .82rem;
    font-weight: 700;
    color: var(--text-muted, #94a3b8);
    border-top: 1px solid var(--border-soft);
    padding-top: .7rem;
    margin-top: .3rem;
}

/* ============================================================
   PWA — splash screen · install button · install popup
   ============================================================ */
.pwa-splash-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .5s ease;
}
.pwa-splash-overlay.is-hidden {
    opacity: 0;
    pointer-events: none;
}
.pwa-splash-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.pwa-splash-icon {
    width: 96px;
    height: 96px;
    border-radius: 22px;
    object-fit: contain;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
}
.pwa-splash-name {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.pwa-splash-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(127, 127, 127, .25);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: pwaSpin .8s linear infinite;
}
@keyframes pwaSpin {
    to { transform: rotate(360deg); }
}

/* Footer install button */
.pwa-install-footer {
    display: flex;
    align-items: center;
}
.pwa-install-btn {
    font-weight: 600;
    border-radius: 8px;
    padding: .35rem .85rem;
    font-size: .85rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
    transition: all .2s ease;
}
.pwa-install-btn:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
    transform: translateY(-1px);
}
.pwa-install-btn:disabled {
    opacity: .7;
    cursor: wait;
}

/* Install popup */
.pwa-popup {
    border: none;
    border-radius: 18px;
    overflow: hidden;
}
.pwa-popup-close {
    position: absolute;
    top: 8px;
    right: 12px;
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    z-index: 2;
}
.pwa-popup-close:hover { color: #1e293b; }
.pwa-popup-body {
    padding: 2rem 1.5rem 1.5rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
}
.pwa-popup-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    object-fit: contain;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}
.pwa-popup-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
}
.pwa-popup-text {
    font-size: .85rem;
    color: #475569;
    line-height: 1.5;
    max-width: 280px;
}
.pwa-popup .btn-brand {
    background: var(--primary, #e20401);
    color: #fff;
    border: none;
    font-weight: 600;
}
.pwa-popup .btn-brand:hover {
    background: color-mix(in srgb, var(--primary, #e20401) 85%, #000);
    color: #fff;
}
.pwa-popup-later {
    color: #94a3b8;
    font-size: .8rem;
    text-decoration: none;
}
.pwa-popup-later:hover { color: #475569; }