/* =========================================================
   INDIAVAANI — Premium News Web Player
   ========================================================= */

:root{
  --iv-blue-900:#0D2E7A;
  --iv-blue-800:#0D47A1;
  --iv-blue-700:#1246A0;
  --iv-blue-600:#1E5FD9;
  --iv-blue-500:#2E6FEA;
  --iv-orange-600:#FF7A00;
  --iv-orange-500:#FF9800;
  --iv-orange-400:#FFA726;

  --iv-bg:#F6F8FC;
  --iv-surface:#FFFFFF;
  --iv-surface-2:#F0F3F9;
  --iv-text:#101828;
  --iv-text-muted:#5B6472;
  --iv-border:#E6E9F0;
  --iv-shadow: 0 8px 24px rgba(13,46,122,.08);
  --iv-shadow-lg: 0 20px 48px rgba(13,46,122,.16);
  --iv-radius:16px;
  --iv-radius-sm:10px;
  --iv-header-h:116px; /* top bar + secondary nav strip, shown together at lg+ */

  --font-heading:'Poppins', sans-serif;
  --font-body:'Inter', sans-serif;
}

[data-theme="dark"]{
  --iv-bg:#070B14;
  --iv-surface:#0F1626;
  --iv-surface-2:#141C30;
  --iv-text:#EEF2FA;
  --iv-text-muted:#93A0B8;
  --iv-border:#212B42;
  --iv-shadow: 0 8px 24px rgba(0,0,0,.4);
  --iv-shadow-lg: 0 20px 48px rgba(0,0,0,.55);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top: 76px; max-width:100%; overflow-x:hidden; }

@media (min-width: 992px){
  html{ scroll-padding-top: 128px; }
}

body{
  font-family: var(--font-body);
  background: var(--iv-bg);
  color: var(--iv-text);
  transition: background .3s ease, color .3s ease;
  max-width:100%;
  overflow-x:hidden;
}

@media (max-width: 991.98px){
  body{ padding-bottom: 64px; } /* space for mobile bottom nav */
}

img, svg{ max-width:100%; height:auto; }

h1,h2,h3,h4,h5,h6{ font-family: var(--font-heading); font-weight:700; color: var(--iv-text); }

a{ color:inherit; }

.text-orange{ color: var(--iv-orange-600) !important; }
.text-light-50{ color: var(--iv-text-muted); }

/* ---------- Scroll progress ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background: linear-gradient(90deg, var(--iv-orange-600), var(--iv-blue-600));
  z-index:2000; transition: width .1s ease-out;
}

/* =========================================================
   HEADER
   ========================================================= */
.iv-header{
  background: var(--iv-surface);
  border-bottom: 1px solid var(--iv-border);
  z-index: 1030;
  transition: box-shadow .3s ease, background .3s ease;
}
.iv-header.scrolled{ box-shadow: var(--iv-shadow); }

.iv-brand{ gap:.6rem; }
.iv-logo{ height:44px; width:auto; }
.iv-logo-footer{ height:48px; filter: drop-shadow(0 0 0 transparent); }
.iv-brand-text{
  font-family: var(--font-heading);
  font-weight:800;
  font-size:1.35rem;
  letter-spacing:.5px;
  color: var(--iv-blue-800);
}
[data-theme="dark"] .iv-brand-text{ color:#EAF0FF; }

.iv-navbar{
  background: var(--iv-surface-2);
  border-top:1px solid var(--iv-border);
  border-bottom:1px solid var(--iv-border);
}
.iv-nav{ gap:.1rem; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
.iv-nav::-webkit-scrollbar{ display:none; }
.iv-nav-link{
  position:relative;
  padding:.65rem .65rem;
  font-weight:600;
  font-size:.85rem;
  color: var(--iv-text);
  text-decoration:none;
  border-radius:8px;
  white-space:nowrap;
  flex:0 0 auto;
  transition: color .2s ease, background .2s ease;
}
.iv-nav-link:hover{ color: var(--iv-blue-700); background: var(--iv-surface-2); }
.iv-nav-link.active{ color: var(--iv-blue-700); }
.iv-nav-link.active::after{
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:2px; height:2px;
  background: linear-gradient(90deg, var(--iv-blue-600), var(--iv-orange-500));
  border-radius:2px;
}

.iv-actions{ gap:.4rem; position:relative; }

.iv-icon-btn{
  width:40px; height:40px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background: transparent; border:none; color: var(--iv-text);
  font-size:1.05rem; transition: background .2s ease, color .2s ease, transform .2s ease;
  position:relative;
}
.iv-icon-btn:hover{ background: var(--iv-surface-2); color: var(--iv-blue-700); transform: translateY(-1px); }
.iv-icon-btn-border{ border:1px solid var(--iv-border); }

.iv-bell{ position:relative; }
.iv-bell-dot{
  position:absolute; top:8px; right:9px; width:8px; height:8px; border-radius:50%;
  background: var(--iv-orange-600); box-shadow:0 0 0 2px var(--iv-surface);
}
.iv-bell.ringing i{ animation: bellRing .6s ease; }
@keyframes bellRing{
  0%,100%{ transform:rotate(0); }
  20%{ transform:rotate(15deg); }
  40%{ transform:rotate(-13deg); }
  60%{ transform:rotate(9deg); }
  80%{ transform:rotate(-6deg); }
}

.btn.iv-btn-outline{
  border:1.5px solid var(--iv-blue-700); color: var(--iv-blue-700);
  font-weight:600; border-radius:10px; padding:.45rem 1.1rem;
  background:transparent; transition:.2s ease;
}
.btn.iv-btn-outline:hover{ background: var(--iv-blue-700); color:#fff; }

.btn.iv-btn-primary{
  background: linear-gradient(135deg, var(--iv-blue-600), var(--iv-blue-800));
  color:#fff; font-weight:700; border:none; border-radius:10px; padding:.6rem 1.3rem;
  box-shadow: 0 6px 18px rgba(18,70,160,.35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn.iv-btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(18,70,160,.45); color:#fff; }

.btn.iv-btn-outline-light{
  border:1.5px solid rgba(255,255,255,.6); color:#fff; border-radius:10px; font-weight:600; background:transparent;
}
.btn.iv-btn-outline-light:hover{ background: rgba(255,255,255,.12); color:#fff; }

.btn.iv-btn-live{
  background: linear-gradient(135deg, #E11D2E, #B7101F);
  color:#fff; font-weight:700; border:none; border-radius:10px;
  padding:.5rem 1rem; display:inline-flex; align-items:center; gap:.4rem;
  box-shadow: 0 6px 16px rgba(225,29,46,.35);
  transition: transform .2s ease, padding .2s ease;
  flex-shrink:0;
}
.btn.iv-btn-live:hover{ transform: translateY(-2px); color:#fff; }

.iv-live-dot{
  width:8px; height:8px; border-radius:50%; background:#fff; display:inline-block;
  animation: pulseDot 1.4s infinite;
}
.iv-badge-live .iv-live-dot, .iv-eyebrow .iv-live-dot{ background:#fff; }
@keyframes pulseDot{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,.6); }
  70%{ box-shadow:0 0 0 8px rgba(255,255,255,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); }
}

/* Search bar */
.iv-search-bar{
  max-height:0; overflow:hidden; background: var(--iv-surface-2);
  border-top:1px solid transparent;
  transition: max-height .3s ease, border-color .3s ease;
}
.iv-search-bar.open{ max-height:90px; border-top-color: var(--iv-border); }
.iv-search-bar input{ font-size:1rem; background:transparent; }
.iv-search-bar input:focus{ box-shadow:none; }

/* Notification panel */
.iv-notif-panel{
  position:absolute; top:100%; right:1rem; width:320px; max-width:90vw;
  background: var(--iv-surface); border:1px solid var(--iv-border);
  border-radius: var(--iv-radius-sm); box-shadow: var(--iv-shadow-lg);
  opacity:0; visibility:hidden; transform: translateY(-8px);
  transition: .2s ease; z-index:1050;
}
.iv-notif-panel.open{ opacity:1; visibility:visible; transform: translateY(4px); }
.iv-notif-item{
  display:flex; gap:.7rem; padding:.7rem 1rem; border-top:1px solid var(--iv-border);
  font-size:.85rem;
}
.iv-notif-item i{ font-size:1.1rem; margin-top:2px; }
.iv-notif-item span{ display:block; color: var(--iv-text-muted); font-size:.75rem; margin-top:2px; }

/* Mobile nav */
.iv-mobile-nav{
  max-height:0; overflow:hidden; background: var(--iv-surface);
  border-top:1px solid transparent; transition: max-height .35s ease, border-color .3s ease;
  padding: 0 1rem;
}
.iv-mobile-nav.open{ max-height:600px; border-top-color: var(--iv-border); padding:1rem; }
.iv-mobile-nav .iv-nav-link{ display:block; padding:.7rem .5rem; border-bottom:1px solid var(--iv-border); border-radius:0; }

/* =========================================================
   HERO / PLAYER
   ========================================================= */
.iv-hero{ padding: 2rem 0 1rem; }

.iv-player-wrap{ position:relative; }
.iv-player{
  position:relative; width:100%; aspect-ratio: 16/9; border-radius: var(--iv-radius);
  overflow:hidden; background: linear-gradient(160deg,#0A1120,#101B33 60%,#0A1120);
  box-shadow: var(--iv-shadow-lg);
}
.iv-player-frame{ position:absolute; inset:0; }
.iv-player-frame iframe{ width:100%; height:100%; border:0; display:block; }

.iv-badge-live{
  position:absolute; top:16px; left:16px; z-index:5;
  background: linear-gradient(135deg,#E11D2E,#B7101F); color:#fff;
  font-weight:700; font-size:.75rem; letter-spacing:.5px;
  padding:.35rem .7rem; border-radius:6px; display:inline-flex; align-items:center; gap:.4rem;
  box-shadow:0 4px 12px rgba(225,29,46,.4);
  pointer-events:none;
}

/* Only the fullscreen button sits above the native player — a small
   corner hit-target so the embedded player's own controls stay clickable. */
.iv-ctrl-fullscreen{
  position:absolute; right:14px; bottom:14px; z-index:5;
  width:38px; height:38px; border-radius:50%; border:none;
  background: rgba(0,0,0,.55); color:#fff; font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(2px); transition:.2s ease;
}
.iv-ctrl-fullscreen:hover{ background: rgba(0,0,0,.75); }

/* Ticker */
.iv-ticker{
  margin-top:1rem; display:flex; align-items:stretch; border-radius:10px; overflow:hidden;
  box-shadow: var(--iv-shadow);
}
.iv-ticker-label{
  background: linear-gradient(135deg, var(--iv-orange-500), var(--iv-orange-600));
  color:#fff; font-weight:800; font-size:.8rem; letter-spacing:.5px;
  padding:.7rem 1rem; display:flex; align-items:center; white-space:nowrap;
}
.iv-ticker-track{
  flex:1; background: var(--iv-blue-800); overflow:hidden; position:relative; display:flex; align-items:center;
}
.iv-ticker-content{
  display:flex; gap:3rem; white-space:nowrap; padding-left:100%;
  animation: ticker 32s linear infinite;
  color:#fff; font-weight:500; font-size:.9rem;
}
.iv-ticker-content span{ display:inline-flex; align-items:center; gap:.5rem; }
.iv-ticker-content span::before{ content:"•"; color: var(--iv-orange-400); }
@keyframes ticker{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-100%); }
}

/* Live info panel */
.iv-live-panel{
  background: var(--iv-surface); border:1px solid var(--iv-border); border-radius: var(--iv-radius);
  padding:1.6rem; box-shadow: var(--iv-shadow); display:flex; flex-direction:column;
}
.iv-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem; background: var(--iv-blue-800); color:#fff;
  font-size:.72rem; font-weight:800; letter-spacing:1px; padding:.35rem .7rem; border-radius:20px; margin-bottom:.9rem;
}
.iv-eyebrow .iv-live-dot{ background: var(--iv-orange-400); }
.iv-headline{ font-size:1.5rem; line-height:1.3; margin-bottom:.6rem; }

.iv-live-stats{ margin:1.3rem 0 0; display:flex; flex-direction:column; gap:.9rem; }
.iv-live-stats li{ display:flex; align-items:center; gap:.8rem; }
.iv-live-stats i{
  width:40px; height:40px; border-radius:10px; background: var(--iv-surface-2); color: var(--iv-blue-700);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0;
}
.iv-live-stats strong{ display:block; font-size:1rem; }
.iv-live-stats span{ font-size:.78rem; color: var(--iv-text-muted); }

.iv-panel-subtitle{ font-size:.85rem; letter-spacing:.3px; color: var(--iv-text-muted); text-transform:uppercase; margin-bottom:.8rem; }

.iv-mini-story{ display:flex; gap:.8rem; }
.iv-mini-thumb{
  width:72px; height:56px; border-radius:8px; flex-shrink:0;
  background: linear-gradient(135deg, var(--iv-blue-600), var(--iv-blue-900));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.2rem; opacity:.85;
}
.iv-mini-story p{ font-size:.88rem; font-weight:600; line-height:1.35; margin:0; }

/* =========================================================
   SECTION HEAD / SHARED
   ========================================================= */
section{ padding: 3rem 0; }

.iv-section-head{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  margin-bottom:1.6rem;
}
.iv-section-head h3{ font-size:1.6rem; margin:0; position:relative; padding-left:16px; }
.iv-section-head h3::before{
  content:""; position:absolute; left:0; top:4px; bottom:4px; width:5px; border-radius:4px;
  background: linear-gradient(180deg, var(--iv-orange-500), var(--iv-blue-700));
}

.iv-filter-tabs{ display:flex; gap:.5rem; flex-wrap:wrap; }
.iv-filter-tabs button{
  border:1px solid var(--iv-border); background: var(--iv-surface); color: var(--iv-text-muted);
  font-weight:600; font-size:.82rem; padding:.4rem .9rem; border-radius:20px; transition:.2s ease;
}
.iv-filter-tabs button:hover{ border-color: var(--iv-blue-600); color: var(--iv-blue-700); }
.iv-filter-tabs button.active{
  background: linear-gradient(135deg, var(--iv-blue-600), var(--iv-blue-800)); color:#fff; border-color:transparent;
}

/* Reveal on scroll */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }

/* =========================================================
   CATEGORIES
   ========================================================= */
.iv-categories{ padding-top:1rem; }
.iv-cat-scroll{
  display:flex; gap:1rem; overflow-x:auto; padding-bottom:.5rem; scrollbar-width:thin;
}
.iv-cat-scroll::-webkit-scrollbar{ height:6px; }
.iv-cat-scroll::-webkit-scrollbar-thumb{ background: var(--iv-border); border-radius:4px; }

.iv-cat-card{
  flex: 0 0 auto; width:140px; text-align:center; text-decoration:none; color: var(--iv-text);
  background: var(--iv-surface); border:1px solid var(--iv-border); border-radius: var(--iv-radius-sm);
  padding:1.3rem 1rem; transition: .25s ease;
}
.iv-cat-card i{
  font-size:1.6rem; margin-bottom:.6rem; display:inline-flex; width:52px; height:52px; border-radius:50%;
  align-items:center; justify-content:center; color:#fff;
  background: linear-gradient(135deg, var(--iv-blue-600), var(--iv-blue-800));
}
.iv-cat-card:nth-child(even) i{ background: linear-gradient(135deg, var(--iv-orange-500), var(--iv-orange-600)); }
.iv-cat-card span{ display:block; font-weight:600; font-size:.85rem; }
.iv-cat-card:hover{
  transform: translateY(-6px); box-shadow: var(--iv-shadow-lg); border-color: var(--iv-blue-600);
}

/* =========================================================
   NEWS CARDS
   ========================================================= */
.iv-news-card{
  background: var(--iv-surface); border:1px solid var(--iv-border); border-radius: var(--iv-radius);
  overflow:hidden; height:100%; display:flex; flex-direction:column;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.iv-news-card:hover{
  transform: translateY(-6px); box-shadow: var(--iv-shadow-lg); border-color: var(--iv-blue-500);
}
.iv-card-thumb{
  aspect-ratio: 16/10; position:relative; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:2rem; overflow:hidden;
}
.iv-card-thumb i{ opacity:.55; }
.iv-card-badge{
  position:absolute; top:12px; left:12px; font-size:.68rem; font-weight:800; letter-spacing:.4px;
  color:#fff; padding:.3rem .65rem; border-radius:6px; background: var(--iv-blue-700); text-transform:uppercase;
}
.iv-card-body{ padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; flex:1; }
.iv-card-body h5{ font-size:1.02rem; line-height:1.4; margin-bottom:.5rem; }
.iv-card-body p{ font-size:.85rem; color: var(--iv-text-muted); flex:1; margin-bottom:.8rem; }
.iv-card-meta{ font-size:.76rem; color: var(--iv-text-muted); display:flex; align-items:center; gap:.4rem; }

/* thumb gradient variants */
.thumb-1{ background: linear-gradient(135deg,#1246A0,#0D2E7A); }
.thumb-2{ background: linear-gradient(135deg,#FF9800,#FF7A00); }
.thumb-3{ background: linear-gradient(135deg,#2E6FEA,#0D47A1); }
.thumb-4{ background: linear-gradient(135deg,#0D2E7A,#101B33); }
.thumb-5{ background: linear-gradient(135deg,#FFA726,#E11D2E); }
.thumb-6{ background: linear-gradient(135deg,#1E5FD9,#FF7A00); }

/* =========================================================
   TRENDING SIDEBAR
   ========================================================= */
.iv-sidebar{
  background: var(--iv-surface); border:1px solid var(--iv-border); border-radius: var(--iv-radius);
  padding:1.4rem; box-shadow: var(--iv-shadow); position:sticky; top: calc(var(--iv-header-h) + 16px);
}
.iv-sidebar-title{ margin-bottom:1.1rem; }
.iv-trending-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1rem; counter-reset: trend; }
.iv-trending-list li{
  display:flex; align-items:center; gap:.8rem; counter-increment: trend; cursor:pointer;
}
.iv-trending-list li::before{
  content: counter(trend);
  font-family: var(--font-heading); font-weight:800; font-size:1.3rem; color: var(--iv-border);
  width:28px; flex-shrink:0; text-align:center; transition:.2s ease;
}
.iv-trending-list li:hover::before{ color: var(--iv-orange-500); }
.iv-trend-thumb{
  width:56px; height:44px; border-radius:8px; flex-shrink:0; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1rem; opacity:.9;
}
.iv-trending-list p{ margin:0; font-size:.86rem; font-weight:600; line-height:1.35; }
.iv-trending-list span{ font-size:.74rem; color: var(--iv-text-muted); }

/* =========================================================
   VIDEO CARDS
   ========================================================= */
.iv-video-card{
  background: var(--iv-surface); border:1px solid var(--iv-border); border-radius: var(--iv-radius);
  overflow:hidden; transition: transform .3s ease, box-shadow .3s ease;
}
.iv-video-card:hover{ transform: translateY(-6px); box-shadow: var(--iv-shadow-lg); }
.iv-video-thumb{
  aspect-ratio:16/9; position:relative; display:flex; align-items:center; justify-content:center; color:#fff; overflow:hidden;
}
.iv-video-thumb .iv-play-mini{
  width:52px; height:52px; border-radius:50%; background: rgba(255,255,255,.18); border:2px solid rgba(255,255,255,.8);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; backdrop-filter: blur(2px);
  transition:.25s ease;
}
.iv-video-card:hover .iv-play-mini{ background: var(--iv-orange-600); border-color: var(--iv-orange-600); transform: scale(1.1); }
.iv-video-duration{
  position:absolute; bottom:10px; right:10px; background: rgba(0,0,0,.75); color:#fff; font-size:.72rem;
  font-weight:700; padding:.2rem .5rem; border-radius:5px;
}
.iv-video-body{ padding:1rem 1.1rem 1.2rem; }
.iv-video-body h6{ font-size:.94rem; line-height:1.4; margin-bottom:.5rem; }
.iv-video-meta{ font-size:.76rem; color: var(--iv-text-muted); display:flex; gap:.9rem; }

/* =========================================================
   CTA STRIP
   ========================================================= */
.iv-cta{
  background: linear-gradient(120deg, var(--iv-blue-900), var(--iv-blue-700) 60%, var(--iv-orange-600));
  color:#fff; text-align:center; padding:3.5rem 0;
}
.iv-cta h3{ color:#fff; font-size:1.9rem; margin-bottom:.6rem; }
.iv-cta p{ color: rgba(255,255,255,.85); max-width:560px; margin:0 auto 1.6rem; }

/* =========================================================
   FOOTER
   ========================================================= */
.iv-footer{
  background: linear-gradient(160deg, var(--iv-blue-900), #071331 70%);
  color: rgba(255,255,255,.82); padding-top:3.5rem;
}
.iv-footer .iv-brand-text{ color:#fff; }
.iv-footer-title{ color:#fff; font-size:1rem; margin-bottom:1.1rem; }
.iv-footer-links, .iv-footer-contact{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.7rem; font-size:.9rem; }
.iv-footer-links a{ text-decoration:none; color: rgba(255,255,255,.75); transition:.2s ease; }
.iv-footer-links a:hover{ color: var(--iv-orange-400); padding-left:4px; }
.iv-footer-contact li{ display:flex; align-items:flex-start; gap:.6rem; }
.iv-footer-contact i{ color: var(--iv-orange-400); margin-top:3px; }

.iv-social{ display:flex; gap:.6rem; }
.iv-social a{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.08); color:#fff; text-decoration:none; transition:.25s ease;
}
.iv-social a:hover{ background: var(--iv-orange-600); transform: translateY(-3px); }

.iv-footer-divider{ border-color: rgba(255,255,255,.12); margin: 2rem 0 1rem; }
.iv-footer-legal{ display:flex; gap:1.2rem; font-size:.82rem; }
.iv-footer-legal a{ text-decoration:none; color: rgba(255,255,255,.65); }
.iv-footer-legal a:hover{ color:#fff; }
.iv-footer p.small{ color: rgba(255,255,255,.6); }

/* =========================================================
   FLOATING WATCH LIVE
   ========================================================= */
.iv-float-live{
  position:fixed; right:22px; bottom:90px; z-index:1040;
  background: linear-gradient(135deg,#E11D2E,#B7101F); color:#fff; border:none;
  font-weight:700; font-size:.85rem; padding:.8rem 1.3rem; border-radius:50px;
  display:flex; align-items:center; gap:.5rem; box-shadow: 0 10px 28px rgba(225,29,46,.45);
  transition: transform .25s ease, opacity .25s ease;
  opacity:0; visibility:hidden; transform: translateY(20px);
}
.iv-float-live.show{ opacity:1; visibility:visible; transform:none; }
.iv-float-live:hover{ transform: translateY(-4px); }

/* =========================================================
   MOBILE BOTTOM NAV
   ========================================================= */
.iv-bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:1035;
  background: var(--iv-surface); border-top:1px solid var(--iv-border);
  display:flex; justify-content:space-around; align-items:center;
  padding:.4rem 0; box-shadow: 0 -6px 20px rgba(13,46,122,.08);
}
.iv-bottom-nav a{
  display:flex; flex-direction:column; align-items:center; gap:.15rem;
  text-decoration:none; color: var(--iv-text-muted); font-size:.66rem; font-weight:600;
  padding:.3rem .5rem; border-radius:8px; transition:.2s ease;
}
.iv-bottom-nav a i{ font-size:1.15rem; }
.iv-bottom-nav a.active,
.iv-bottom-nav a:hover{ color: var(--iv-blue-700); }

/* =========================================================
   RESPONSIVE TWEAKS
   ========================================================= */
@media (max-width: 991.98px){
  .iv-headline{ font-size:1.3rem; }
  section{ padding:2.2rem 0; }
  .iv-sidebar{ position:static; }
  .iv-float-live{ bottom:82px; } /* clears the bottom tab bar */
}

@media (min-width: 992px){
  .iv-float-live{ bottom:32px; }
}

@media (max-width: 767.98px){
  .iv-section-head{ flex-direction:column; align-items:flex-start; gap:.9rem; }
  .iv-filter-tabs{ flex-wrap:nowrap; overflow-x:auto; width:100%; padding-bottom:.4rem; scrollbar-width:thin; }
  .iv-filter-tabs button{ white-space:nowrap; flex:0 0 auto; }
}

@media (max-width: 575.98px){
  .iv-logo{ height:36px; }
  .iv-badge-live{ font-size:.7rem; padding:.3rem .55rem; }
  .iv-ctrl-fullscreen{ width:34px; height:34px; right:10px; bottom:10px; }
  .iv-cta h3{ font-size:1.5rem; }
  .iv-section-head h3{ font-size:1.35rem; }
  .iv-live-panel{ padding:1.25rem; }
}

/* Tight phones: shrink header chrome so nothing overflows or wraps */
@media (max-width: 399.98px){
  .iv-actions{ gap:.25rem; }
  .iv-icon-btn{ width:34px; height:34px; font-size:.95rem; }
  .btn.iv-btn-live{ padding:.5rem .65rem; }
  .iv-live-text{ display:none; }
}

@media (min-width: 400px){
  .iv-live-text{ margin-left:.15rem; }
}

/* Dark theme icon swap */
[data-theme="dark"] #themeToggle i::before{ content:"\f5a2"; } /* sun icon fallback handled via JS class instead */