/* ==========================================================================
   ivoice — design system
   Author: Niranjan Mishra
   --------------------------------------------------------------------------
   Table of contents

     1.  Tokens
     2.  Base & typography
     3.  Layout primitives
     4.  Section headings
     5.  Cards
     6.  Badges, ranks, icons
     7.  Top bar
     8.  Masthead
     9.  Primary navigation
    10.  Breaking ticker
    11.  Home: hero
    12.  Home: trending tags
    13.  Home: state tabs
    14.  Home: video strip
    15.  Home: election + rail
    16.  Home: live score
    17.  Home: sports
    18.  Home: entertainment
    19.  Home: horoscope
    20.  Home: gallery
    21.  Home: category columns
    22.  Home: app CTA
    23.  Live TV panel
    24.  Ads
    25.  Article
    26.  Archive, search, 404
    27.  Sidebar & widgets
    28.  Footer
    29.  Mobile tab bar
    30.  Utilities & motion

   Conventions
     .iv-block              a component
     .iv-block__element     a part of it
     .iv-block--modifier    a variant of it
     --iv-*                 a design token

   Bootstrap does the layout (row, col-*, d-flex, ratio, nav, tab-pane).
   This file only does look and feel. Keep it that way.
   ========================================================================== */


/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  /* Brand — these four are overwritten at runtime by the Customizer. */
  --iv-primary: #c8102e;
  --iv-primary-dark: #a00d25;
  --iv-primary-soft: #fdeef0;
  --iv-dark: #111418;
  --iv-dark-2: #1c2128;
  --iv-accent: #0a7d3c;
  --iv-accent-soft: #e9f6ee;
  --iv-scale: 1;

  /* Neutrals */
  --iv-ink: #12161c;
  --iv-ink-2: #3d4653;
  --iv-ink-3: #6b7688;
  --iv-line: #e4e7ec;
  --iv-line-2: #f0f2f5;
  --iv-bg: #ffffff;
  --iv-bg-2: #f6f7f9;
  --iv-bg-3: #eef0f3;

  /* Typography */
  --iv-font: "Anek Devanagari", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --iv-fs-xs: calc(0.75rem * var(--iv-scale));
  --iv-fs-sm: calc(0.8125rem * var(--iv-scale));
  --iv-fs-base: calc(0.9375rem * var(--iv-scale));
  --iv-fs-md: calc(1.0625rem * var(--iv-scale));
  --iv-fs-lg: calc(1.25rem * var(--iv-scale));
  --iv-fs-xl: calc(1.5rem * var(--iv-scale));
  --iv-fs-2xl: calc(1.875rem * var(--iv-scale));
  --iv-fs-3xl: calc(2.25rem * var(--iv-scale));

  --iv-lh-tight: 1.28;
  --iv-lh-snug: 1.45;
  --iv-lh-body: 1.75;

  /* Space */
  --iv-gap: 1rem;
  --iv-gap-lg: 1.5rem;
  --iv-section-y: 2.25rem;

  /* Shape */
  --iv-radius: 6px;
  --iv-radius-lg: 10px;
  --iv-radius-pill: 999px;

  /* Elevation */
  --iv-shadow-sm: 0 1px 2px rgba(17, 20, 24, 0.06);
  --iv-shadow: 0 2px 10px rgba(17, 20, 24, 0.08);
  --iv-shadow-lg: 0 8px 28px rgba(17, 20, 24, 0.12);

  /* Chrome */
  --iv-header-h: 64px;
  --iv-nav-h: 44px;
  --iv-tabbar-h: 58px;
  --iv-z-header: 1030;
  --iv-z-tabbar: 1040;

  --iv-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* ==========================================================================
   2. Base & typography
   ========================================================================== */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body.iv-body {
  margin: 0;
  font-family: var(--iv-font);
  font-size: var(--iv-fs-base);
  line-height: var(--iv-lh-snug);
  color: var(--iv-ink);
  background: var(--iv-bg-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/*
 * Base link style. :where() keeps these at the lowest useful specificity:
 * enough to beat Bootstrap's bare `a` / `a:hover` (same weight, later file)
 * but below any component rule, so buttons, tabs and tags keep their own
 * hover colours.
 */
:where(.iv-body) a {
  color: inherit;
  text-decoration: none;
  transition: color 0.16s var(--iv-ease), background-color 0.16s var(--iv-ease);
}

:where(.iv-body) a:hover,
:where(.iv-body) a:focus-visible {
  color: var(--iv-primary);
}

.iv-body img {
  max-width: 100%;
  height: auto;
}

/*
 * The rule above is the usual responsive-image reset. `.iv-body img` is more
 * specific than `.iv-card__img`, so images inside fixed-ratio boxes need the
 * selectors below to fill the box instead of keeping their natural height.
 */
.iv-body .ratio > img,
.iv-body .iv-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.iv-body h1,
.iv-body h2,
.iv-body h3,
.iv-body h4,
.iv-body h5,
.iv-body h6 {
  margin: 0;
  font-weight: 600;
  line-height: var(--iv-lh-tight);
  letter-spacing:0;
  
}

#iv-hero .iv-card__body { padding:15px;}

.iv-body .iv-section__title {padding:10px 20px 8px;}
.iv-body p {
  margin: 0 0 1em;
}

.iv-body :focus-visible {
  outline: 2px solid var(--iv-primary);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Skip link — visible only when tabbed to. */
.iv-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  padding: 0.75rem 1.25rem;
  background: var(--iv-primary);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 var(--iv-radius) 0;
}

.iv-skip:focus {
  left: 0;
  color: #fff;
}

/*
 * WordPress's own hidden-text class (pagination headings, form labels).
 * Core only styles it when the admin bar is loaded, so without this a
 * logged-out visitor would see "Posts pagination" above every pager.
 */
.screen-reader-text,
.iv-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   3. Layout primitives
   ========================================================================== */

.iv-shell {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 16px;
}

@media (min-width: 1400px) {
  .iv-shell {
    max-width: 1340px;
  }
}

.iv-section {
  padding-block: var(--iv-section-y);
}

.iv-section--tight {
  padding-block: 1.25rem;
}

.iv-section--flush {
  padding-block: 0 var(--iv-section-y);
}

/* Full-bleed dark band, e.g. the video strip. */
.iv-section--dark {
  background: var(--iv-dark);
  color: #fff;
}

.iv-section--dark .iv-card__title,
.iv-section--dark .iv-section__title {
  color: #fff;
}

.iv-section--dark .iv-card__time {
  color: rgba(255, 255, 255, 0.62);
}

.iv-panel {
  background: var(--iv-bg);
  border: 1px solid var(--iv-line);
  border-radius: var(--iv-radius-lg);
  padding: var(--iv-gap-lg);
}

.iv-divider {
  height: 1px;
  background: var(--iv-line);
  border: 0;
  margin-block: var(--iv-gap);
}


/* ==========================================================================
   4. Section headings
   ========================================================================== */

/*
 * Per-section accent colours.
 *
 * Every block sets one of these on its heading. --iv-sec is then the single
 * variable the tab, the tail and the "और भी" link all read, so adding a new
 * accent means adding one class here and nothing else.
 */
.iv-accent--red    { --iv-sec: var(--iv-primary); }
.iv-accent--green  { --iv-sec: #167b4b; }
.iv-accent--purple { --iv-sec: #8b2a86; }
.iv-accent--blue   { --iv-sec: #1166a7; }
.iv-accent--orange { --iv-sec: #b4671f; }
.iv-accent--indigo { --iv-sec: #2a4d9a; }
.iv-accent--ink    { --iv-sec: #100e0c; }

.iv-section__head {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 1.125rem;
}

.iv-section__title {
  flex-shrink: 0;
  margin: 0;
  padding: 0.38rem 0.9rem;
  font-size: var(--iv-fs-base);
  font-weight: 800;
  line-height: 1.5;
  color: #fff;
  background: var(--iv-sec, var(--iv-primary));
}

.iv-section__title-link,
.iv-section__title-link:hover {
  color: #fff;
}

/* The slanted ribbon tail that follows the tab. */
.iv-section__tail {
  flex-shrink: 0;
  width: 18px;
  align-self: stretch;
  margin-inline-start: -3px;
  background: var(--iv-sec, var(--iv-primary));
  clip-path: polygon(0 0, 100% 0, 58% 100%, 0 100%);
}

/* Hairline that carries the eye across to the "और भी" link. */
.iv-section__rule {
  flex: 1 1 auto;
  height: 1px;
  min-width: 1rem;
  margin-inline: 0.9rem;
  background: var(--iv-line);
}

.iv-section__more {
  flex-shrink: 0;
  font-size: var(--iv-fs-sm);
  font-weight: 600;
  color: var(--iv-sec, var(--iv-primary));
  white-space: nowrap;
}

.iv-section__more:hover {
  color: var(--iv-sec, var(--iv-primary));
  text-decoration: underline;
  text-underline-offset: 3px;
}

.iv-section__more-chevron {
  margin-inline-start: 0.15rem;
}

/* Dark variant, used on the video strip. */
.iv-section__head--dark .iv-section__rule {
  background: rgba(255, 255, 255, 0.18);
}

.iv-section__head--dark .iv-section__more {
  color: rgba(255, 255, 255, 0.78);
}

.iv-section__head--dark .iv-section__more:hover {
  color: #fff;
}


/* ==========================================================================
   5. Cards
   ========================================================================== */

.iv-card {
  position: relative;
  background: var(--iv-bg);
  border-radius: var(--iv-radius);
  overflow: hidden;
}

.iv-card__link {
  display: block;
  color: inherit;
  height: 100%;
}

.iv-card__media {
  position: relative;
  overflow: hidden;
  background: var(--iv-bg-3);
  border-radius: var(--iv-radius);
}

.iv-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s var(--iv-ease);
}

.iv-card__link:hover .iv-card__img {
  transform: scale(1.045);
}

.iv-card__img--empty {
  object-fit: cover;
  opacity: 0.6;
}

.iv-card__body {
  padding-top: 0.625rem;
}

.iv-card__cat {
  display: inline-block;
  margin-bottom: 0.3rem;
  font-size: var(--iv-fs-xs);
  font-weight: 700;
  color: var(--iv-primary);
}

.iv-card__title {
  font-size: var(--iv-fs-md);
  font-weight: 700;
  line-height: var(--iv-lh-tight);
  color: var(--iv-ink);
  transition: color 0.16s var(--iv-ease);
}

.iv-card__link:hover .iv-card__title {
  color: var(--iv-primary);
}

.iv-card__title--sm {
  font-size: var(--iv-fs-base);
  font-weight: 600;
}

.iv-card__title--lead {
  font-size: var(--iv-fs-2xl);
  font-weight: 800;
  color: #fff;
}

.iv-card__summary {
  margin: 0.4rem 0 0;
  font-size: var(--iv-fs-sm);
  line-height: var(--iv-lh-snug);
  color: var(--iv-ink-2);
}

.iv-card__time {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--iv-fs-xs);
  color: var(--iv-ink-3);
}

/* --- Lead card ------------------------------------------------------- */

.iv-card--lead {
  border-radius: var(--iv-radius-lg);
}

.iv-card--lead .iv-card__media {
  border-radius: var(--iv-radius-lg);
}

.iv-card--lead .iv-card__overlay {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  padding: 2.5rem 1.5rem 1.25rem;
  background: linear-gradient(
    to top,
    rgba(10, 12, 15, 0.92) 0%,
    rgba(10, 12, 15, 0.72) 45%,
    rgba(10, 12, 15, 0) 100%
  );
  color: #fff;
}

.iv-card--lead .iv-card__summary {
  color: rgba(255, 255, 255, 0.82);
}

.iv-card--lead .iv-card__time {
  display: inline-block;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
}

.iv-card--lead .iv-card__link:hover .iv-card__title {
  color: #fff;
}

.iv-card__badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

/* --- Overlay card ---------------------------------------------------- *
 *
 * Image fills the tile; the headline sits on a gradient over the bottom of
 * it. The gradient is a pseudo-element rather than a background on the text
 * block so it can cover the whole tile edge to edge.
 */

.iv-card--overlay {
  border-radius: var(--iv-radius);
  overflow: hidden;
  background: var(--iv-dark);
}

.iv-card--overlay .iv-card__media {
  border-radius: 0;
}

.iv-card--overlay .iv-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(8, 10, 12, 0.94) 0%,
    rgba(8, 10, 12, 0.72) 28%,
    rgba(8, 10, 12, 0.08) 62%,
    rgba(8, 10, 12, 0) 100%
  );
}

.iv-card--overlay .iv-card__overlay {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 3;
  padding: 0.9rem 1rem 0.95rem;
  color: #fff;
}

.iv-card__title--over {
  font-size: var(--iv-fs-md);
  font-weight: 700;
  color: #fff;
}

.iv-card--overlay .iv-card__link:hover .iv-card__title {
  color: #fff;
}

.iv-card--overlay .iv-card__time {
  margin-top: 0.3rem;
  color: rgba(255, 255, 255, 0.74);
}

.iv-card__dot {
  margin-inline: 0.3rem;
  opacity: 0.7;
}

/* Category chip, top left of an overlay card. */
.iv-chip {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  z-index: 3;
  padding: 0.16rem 0.55rem;
  font-size: var(--iv-fs-xs);
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  background: var(--iv-sec, var(--iv-primary));
  border-radius: 3px;
}

/* --- Row card -------------------------------------------------------- */

.iv-card--row {
  padding-block: 0.8rem;
  border-bottom: 1px solid var(--iv-line-2);
  border-radius: 0;
}

.iv-card--row:last-child {
  border-bottom: 0;
}

.iv-card--row .iv-card__body {
  padding-top: 0;
}

.iv-card__media--row {
  width: 104px;
  aspect-ratio: 16 / 11;
  border-radius: var(--iv-radius);
}

.iv-card__media--mini {
  width: 64px;
  aspect-ratio: 1 / 1;
  border-radius: var(--iv-radius);
}

/* --- Text card ------------------------------------------------------- */

.iv-card--text {
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--iv-line-2);
  border-radius: 0;
}

.iv-card--text:last-child {
  border-bottom: 0;
}

/* --- Bordered grid card ---------------------------------------------- */

.iv-card--boxed {
  height: 100%;
  border: 1px solid var(--iv-line);
  border-radius: var(--iv-radius-lg);
  padding: 0.75rem;
}

.iv-card--boxed .iv-card__body {
  padding: 0.7rem 0.1rem 0.1rem;
}


/* ==========================================================================
   6. Badges, ranks, icons
   ========================================================================== */

.iv-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.16rem 0.5rem;
  font-size: var(--iv-fs-xs);
  font-weight: 700;
  line-height: 1.5;
  border-radius: 3px;
  background: var(--iv-bg-3);
  color: var(--iv-ink-2);
}

.iv-badge--cat {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  backdrop-filter: blur(4px);
}

.iv-badge--live {
  background: var(--iv-primary);
  color: #fff;
}

.iv-badge--live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: iv-pulse 1.6s infinite;
}

.iv-badge--accent {
  background: var(--iv-accent);
  color: #fff;
}

@keyframes iv-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.25; }
}

/* Numbered rank in the top-stories rail. */
.iv-rank {
  flex-shrink: 0;
  width: 26px;
  font-size: var(--iv-fs-xl);
  font-weight: 800;
  line-height: 1;
  color: var(--iv-primary);
  font-variant-numeric: tabular-nums;
}

/* Play button overlay on video thumbnails. */
.iv-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--iv-primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: transform 0.22s var(--iv-ease);
}

.iv-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #fff;
}

.iv-card__link:hover .iv-play {
  transform: translate(-50%, -50%) scale(1.12);
}

/* Image count on gallery tiles — top right, with a small picture glyph. */
.iv-photo-count {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.5rem;
  font-size: var(--iv-fs-xs);
  font-weight: 700;
  color: #fff;
  background: rgba(10, 12, 15, 0.78);
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

.iv-photo-count::before {
  content: "";
  width: 12px;
  height: 10px;
  background: currentColor;
  /* A tiny "photo" mask: frame with a mountain and a sun. */
  -webkit-mask: var(--iv-photo-glyph) center / contain no-repeat;
  mask: var(--iv-photo-glyph) center / contain no-repeat;
}

:root {
  --iv-photo-glyph: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M2 1h20a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1Zm1.6 15.6h16.8L15 9.4l-3.3 4.1-2.4-2.6-5.7 5.7ZM7 6.6a1.7 1.7 0 1 0 0-3.4 1.7 1.7 0 0 0 0 3.4Z'/%3E%3C/svg%3E");
}

/* Smaller count on row thumbnails (photo gallery list). */
.iv-photo-count--sm {
  top: 0.3rem;
  right: 0.3rem;
  gap: 0.2rem;
  padding: 0.05rem 0.3rem;
  font-size: 0.68rem;
}

.iv-photo-count--sm::before {
  width: 10px;
  height: 8px;
}

/* Duration pill on video cards. */
.iv-duration {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 2;
  padding: 0.1rem 0.4rem;
  font-size: var(--iv-fs-xs);
  font-weight: 600;
  color: #fff;
  background: rgba(10, 12, 15, 0.8);
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   7. Top bar
   ========================================================================== */

.iv-topbar {
  background: var(--iv-primary-dark);
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--iv-fs-xs);
}

.iv-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 32px;
}

.iv-topbar a {
  color: rgba(255, 255, 255, 0.9);
}

.iv-topbar a:hover {
  color: #fff;
}

.iv-topbar__date {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  white-space: nowrap;
}

.iv-topbar__sep {
  opacity: 0.55;
}

.iv-topbar__right {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.iv-topbar__lang {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.iv-topbar__lang .is-active {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.iv-social {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.iv-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  transition: background 0.16s var(--iv-ease);
}

.iv-social__link:hover {
  background: rgba(255, 255, 255, 0.3);
}

.iv-social__link svg {
  width: 11px;
  height: 11px;
  fill: currentColor;
}


/* ==========================================================================
   8. Masthead
   ========================================================================== */

.iv-masthead {
  background: var(--iv-bg);
  border-bottom: 1px solid var(--iv-line);
}

.iv-masthead__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: var(--iv-header-h);
  padding-block: 0.6rem;
  justify-content: space-between;
}

.iv-brand {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.iv-brand__logo {
  max-height: 80px;
  width: auto;
}

.iv-brand__text {
  font-size: var(--iv-fs-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--iv-primary);
}

.iv-brand__tagline {
  display: block;
  font-size: var(--iv-fs-xs);
  font-weight: 500;
  color: var(--iv-ink-3);
  letter-spacing: 0;
}

/* Search box at the top of the search results page. */
.iv-page-head__search {
  max-width: 560px;
  margin: 0.75rem 0 0.5rem;
}

/* Search */
.iv-search {
  flex: 1 1 auto;
  max-width: 520px;
}

.iv-search__form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem 0.35rem 0.9rem;
  background: var(--iv-bg-2);
  border: 1px solid var(--iv-line);
  border-radius: var(--iv-radius-pill);
  transition: border-color 0.16s var(--iv-ease), background 0.16s var(--iv-ease);
}

.iv-search__form:focus-within {
  background: var(--iv-bg);
  border-color: var(--iv-primary);
}

.iv-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--iv-fs-sm);
  color: var(--iv-ink);
}

.iv-search__input:focus {
  outline: 0;
}

.iv-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: var(--iv-primary);
  color: #fff;
  cursor: pointer;
  transition: background 0.16s var(--iv-ease);
}

.iv-search__submit:hover {
  background: var(--iv-primary-dark);
}

.iv-search__submit svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Header actions */
.iv-masthead__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.iv-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  font-size: var(--iv-fs-sm);
  font-weight: 700;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--iv-radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s var(--iv-ease), color 0.16s var(--iv-ease),
    border-color 0.16s var(--iv-ease);
}

.iv-btn--primary {
  background: var(--iv-primary);
  color: #fff;
}

.iv-btn--primary:hover {
  background: var(--iv-primary-dark);
  color: #fff;
}

.iv-btn--ghost {
  background: transparent;
  border-color: var(--iv-line);
  color: var(--iv-ink-2);
}

.iv-btn--ghost:hover {
  border-color: var(--iv-primary);
  color: var(--iv-primary);
}

.iv-btn--dark {
  background: var(--iv-dark);
  color: #fff;
}

.iv-btn--dark:hover {
  background: var(--iv-dark-2);
  color: #fff;
}

.iv-btn__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: iv-pulse 1.6s infinite;
}

/* Hamburger (mobile) */
.iv-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--iv-ink);
  cursor: pointer;
}

.iv-burger__bar,
.iv-burger__bar::before,
.iv-burger__bar::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s var(--iv-ease), opacity 0.2s var(--iv-ease);
}

.iv-burger__bar::before,
.iv-burger__bar::after {
  content: "";
  position: absolute;
}

.iv-burger__bar::before { transform: translateY(-6px); }
.iv-burger__bar::after  { transform: translateY(6px); }


/* ==========================================================================
   9. Primary navigation
   ========================================================================== */

.iv-nav {
  background: var(--iv-primary);
  color: #fff;
}

.iv-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--iv-nav-h);
}

/*
 * flex-direction is stated explicitly because Bootstrap's .navbar-nav sets
 * `column` and only flips to `row` inside a .navbar-expand-* wrapper, which
 * this bar deliberately does not use.
 */
.iv-nav__list {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.iv-nav__list::-webkit-scrollbar {
  display: none;
}

.iv-nav__link {
  display: block;
  padding: 0.65rem 0.85rem 0.55rem ;
  font-size: var(--iv-fs-base);
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  border-radius: 0;
  transition: background 0.16s var(--iv-ease);
}

/* Hover and the current page: a white tab with red text. */
.iv-nav .iv-nav__link:hover,
.iv-nav .iv-nav__link:focus-visible,
.iv-nav .iv-nav__item.current-menu-item > .iv-nav__link,
.iv-nav .iv-nav__item.current-menu-parent > .iv-nav__link,
.iv-nav .iv-nav__item.current-menu-ancestor > .iv-nav__link,
.iv-nav .iv-nav__item.show > .iv-nav__link,
.iv-nav .iv-nav__link.show {
  background: #fff;
  color: var(--iv-primary);
}

.iv-nav .iv-nav__link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

.iv-nav__dropdown {
  padding: 0.35rem;
  border: 0;
  border-radius: var(--iv-radius);
  box-shadow: var(--iv-shadow-lg);
}

.iv-nav__sublink {
  padding: 0.5rem 0.75rem;
  font-size: var(--iv-fs-sm);
  font-weight: 500;
  border-radius: 4px;
}

.iv-nav__sublink:hover,
.iv-nav__sublink:focus {
  background: var(--iv-primary-soft);
  color: var(--iv-primary);
}

/* "राज्य चुनें" selector on the right of the bar. */
.iv-nav__aside .iv-btn {
  padding: 0.35rem 0.85rem;
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}

.iv-nav__aside .iv-btn:hover {
  background: rgba(0, 0, 0, 0.34);
}

/*
 * राज्य चुनें mega menu — a full-width panel of state cards instead of a
 * plain dropdown list. `.iv-nav` is the positioning context (data-bs-display
 * "static" on the button stops Bootstrap/Popper from placing the panel by
 * JS, so it just follows normal CSS positioning here), and `.iv-states`
 * itself reverts to `position: static` so the panel's `inset-inline: 0`
 * spans the bar, not just the button.
 */
.iv-nav {
  position: relative;
}

.iv-states,
.iv-nav .iv-nav__list .iv-states {
  position: static;
}

/* The राज्य dropdown toggle is a <button> styled like the other menu links. */
.iv-nav button.iv-nav__link {
  font-family: inherit;
  line-height: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.iv-nav button.iv-nav__link.dropdown-toggle::after {
  margin-left: 0.35em;
  vertical-align: 0.15em;
}

/* (Bootstrap makes .navbar-nav dropdowns static; this one floats.) */
.iv-states__panel,
.iv-nav .iv-nav__list .iv-states__panel {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: var(--iv-z-header);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0 0 var(--iv-radius) var(--iv-radius);
  background: var(--iv-bg);
  box-shadow: var(--iv-shadow-lg);
}

.iv-states__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
}

/* Live TV page: room between the player and "और वीडियो". */
.iv-livetv__more {
  margin-top: 2rem;
}

@media (min-width: 992px) {
  .iv-livetv__more { margin-top: 2.75rem; }
}

.iv-states__all {
  margin: 0;
  padding: 0.6rem 0 0.2rem;
  text-align: center;
  border-top: 1px solid var(--iv-line-2);
}

.iv-states__all a {
  font-size: var(--iv-fs-sm);
  font-weight: 800;
  color: var(--iv-primary);
}

.iv-states__all a:hover {
  color: var(--iv-primary-dark);
  text-decoration: underline;
}

.iv-states__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.1rem 0.5rem;
  text-align: center;
  color: var(--iv-ink-2);
  border-inline-end: 1px solid var(--iv-line);
  border-block-start: 1px solid var(--iv-line);
  transition: background 0.16s var(--iv-ease), color 0.16s var(--iv-ease);
}

/* Map in red, name in black; on hover the cell turns dark red and both go white. */
.iv-states__item {
  color: var(--iv-ink);
}

.iv-states__item .iv-states__icon {
  color: var(--iv-primary);
  transition: color 0.16s var(--iv-ease);
}

.iv-states__item:hover,
.iv-states__item:focus-visible {
  background: var(--iv-primary-dark);
  color: #fff;
}

.iv-states__item:hover .iv-states__icon,
.iv-states__item:focus-visible .iv-states__icon {
  color: #fff;
}

.iv-states__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 36px;
}

.iv-states__icon svg {
  max-width: 36px;
}

/* State map outline: the PNG is used as a mask and filled with the text
   colour, so it follows the label's colour on hover. */
.iv-states__map {
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.iv-states__icon svg {
  width: 100%;
  height: 100%;
}

.iv-states__label {
  font-size: var(--iv-fs-sm);
  font-weight: 600;
  line-height: 1.3;
}

/* Sticky behaviour, toggled by JS adding .is-stuck. */
.iv-has-sticky-header .iv-nav.is-stuck {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: var(--iv-z-header);
  box-shadow: var(--iv-shadow);
  animation: iv-slide-down 0.24s var(--iv-ease);
}

@keyframes iv-slide-down {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}


/* ==========================================================================
   10. Breaking ticker
   ========================================================================== */

/* Dark navy bar; red slanted "BREAKING NEWS" tab with a blue edge stripe;
   white headlines separated by red dots. */
.iv-ticker {
  --iv-ticker-bg: #0f1d3d;
  --iv-ticker-bg-2: #172b57;
  --iv-ticker-blue: #2f6fe4;
  --iv-ticker-slant: 14px;
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 44px;
  background: linear-gradient(90deg, var(--iv-ticker-bg), var(--iv-ticker-bg-2));
  overflow: hidden;
}

.iv-ticker__label {
  position: relative;
  z-index: 2; /* above the scrolling headlines: they slide under the slant */
  isolation: isolate;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 0.5rem calc(1.1rem + var(--iv-ticker-slant)) 0.5rem 0.95rem;
  font-family: "Inter", var(--iv-font);
  font-size: 1rem;
  font-style: italic;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

/* Red tab: a skewed box behind the text (the left overhang is clipped). */
.iv-ticker__label::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: -2rem;
  right: 8px;
  background: linear-gradient(90deg, #a00d25 0%, var(--iv-primary) 45%, #e3262f 100%);
  transform: skewX(-18deg);
  transform-origin: bottom right;
}

/* White gap + blue stripe along the slanted edge (fills the 8px the red
   tab leaves free: 3px white, 5px blue). */
.iv-ticker__label::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  right: 0;
  width: 8px;
  background: linear-gradient(90deg, #fff 0 3px, var(--iv-ticker-blue) 3px 100%);
  transform: skewX(-18deg);
  transform-origin: bottom right;
}

.iv-ticker__viewport {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.iv-ticker__track {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding-block: 0.5rem;
  padding-inline-start: 1.1rem;
  white-space: nowrap;
  width: max-content;
  animation: iv-marquee var(--iv-ticker-duration, 48s) linear infinite;
}

.iv-ticker:hover .iv-ticker__track,
.iv-ticker__track:focus-within {
  animation-play-state: paused;
}

.iv-ticker__item {
  display: inline-flex;
  align-items: center;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}

.iv-ticker__item::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-inline-end: 0.75rem;
  border-radius: 50%;
  background: #e3262f;
}

.iv-ticker__item:hover,
.iv-ticker__item:focus-visible {
  color: #ffd5da;
}

/* Breaking News mode: the ticker is fed by the breaking live blog. */
.iv-ticker--live .iv-ticker__label:hover,
.iv-ticker--live .iv-ticker__label:focus-visible {
  color: #fff;
}

.iv-ticker--live .iv-ticker__label:hover::before,
.iv-ticker--live .iv-ticker__label:focus-visible::before {
  background: linear-gradient(90deg, #8a0b20 0%, var(--iv-primary-dark) 100%);
}

.iv-ticker__live {
  padding: 0.05rem 0.35rem;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.3;
  color: var(--iv-primary);
  background: #fff;
  border-radius: 3px;
}

.iv-ticker__time {
  margin-inline-end: 0.45rem;
  font-size: var(--iv-fs-xs);
  font-weight: 800;
  color: #ff8a97;
  font-variant-numeric: tabular-nums;
}

.iv-ticker__all {
  flex-shrink: 0;
  display: none;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  font-size: var(--iv-fs-xs);
  font-weight: 800;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border-inline-start: 1px solid rgba(255, 255, 255, 0.14);
  white-space: nowrap;
  text-decoration: none;
}

.iv-ticker__all:hover,
.iv-ticker__all:focus-visible {
  color: #fff;
  background: var(--iv-primary);
}

@media (min-width: 768px) {
  .iv-ticker__all { display: inline-flex; }
}

@media (max-width: 575.98px) {
  .iv-ticker {
    --iv-ticker-slant: 10px;
    min-height: 38px;
  }

  .iv-ticker__label {
    padding-inline-start: 0.7rem;
    font-size: 0.8rem;
  }

  .iv-ticker__item {
    font-size: 0.92rem;
  }
}

@keyframes iv-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ==========================================================================
   11. Home: hero
   ========================================================================== */

.iv-hero {
  padding-block: 1.25rem var(--iv-section-y);
}

.iv-hero__lead .iv-card--lead {
  box-shadow: var(--iv-shadow);
}

/* Top stories rail */
.iv-toplist {
  height: 100%;
  background: var(--iv-bg);
  border: 1px solid var(--iv-line);
  border-radius: var(--iv-radius-lg);
  padding: 0 1rem 0.35rem;
}

.iv-toplist .iv-section__head {
     margin-inline: -16px;
    padding-inline: 1rem;
    margin-bottom: 0.25rem;
    background-color: #000000;
    padding: 0;
}

.iv-toplist .iv-section__title {
  border-radius: 0 0 0 0;
}

/* Secondary card row under the hero */
.iv-hero__strip {
  margin-top: 1.25rem;
}

/*
 * Every card in the row is the same height: the card fills its column, the
 * headline always takes three lines' worth of space (longer ones end in
 * "…"), and the time sits on the bottom edge. Used by the strip under the
 * hero and the "ये भी पढ़ें" row on articles.
 */
.iv-hero__strip > [class*="col-"],
.iv-carousel--related .iv-carousel__item {
  display: flex;
}

.iv-hero__strip .iv-card,
.iv-carousel--related .iv-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.iv-hero__strip .iv-card__link,
.iv-carousel--related .iv-card__link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.iv-hero__strip .iv-card__body,
.iv-carousel--related .iv-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
}

.iv-hero__strip .iv-card__title,
.iv-carousel--related .iv-card__title {
  display: -webkit-box;
  width: 100%;
  min-height: calc(3em * var(--iv-lh-tight));
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.iv-hero__strip .iv-card__time,
.iv-carousel--related .iv-card__time {
  margin-top: auto;
  padding-top: 0.5rem;
}

.iv-carousel--related .iv-card__title {
  font-size: var(--iv-fs-base);
}


/* ==========================================================================
   12. Home: trending tags
   ========================================================================== */

.iv-trending {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem;
  background: var(--iv-dark);
  border-radius: var(--iv-radius-lg);
  overflow: hidden;
}

.iv-trending__label {
  flex-shrink: 0;
  padding: 0.25rem 0.7rem;
  font-size: var(--iv-fs-xs);
  font-weight: 800;
  color: var(--iv-dark);
  background: #fff;
  border-radius: var(--iv-radius-pill);
}

.iv-trending__list {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.iv-trending__list::-webkit-scrollbar {
  display: none;
}

.iv-trending__tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: var(--iv-fs-xs);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--iv-radius-pill);
  white-space: nowrap;
  transition: background 0.16s var(--iv-ease), color 0.16s var(--iv-ease);
}

.iv-trending__tag:hover {
  background: var(--iv-primary);
  color: #fff;
}

/*
 * A horizontally-scrolling row with prev/next arrows, used wherever a block
 * has more cards than comfortably fit — Trending and the राज्य state tabs.
 * `.iv-carousel__item` is a plain flex tile (not a Bootstrap column) sized
 * with a percentage width so a handful of cards fit the row and the rest
 * scroll into view; the numbers below assume ~4 gutters between tiles.
 */
.iv-carousel {
  position: relative;
}

.iv-carousel__track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Animated in JS (carousels() in ivoice.js), not via CSS scroll-behavior —
     some browsers/environments silently no-op a native smooth scrollBy(),
     leaving the arrows looking broken. A hand-rolled rAF animation is the
     one path that reliably moves scrollLeft everywhere. */
  scrollbar-width: none;
  padding-block: 0.15rem; /* room for the card's focus ring */
}

.iv-carousel__track::-webkit-scrollbar {
  display: none;
}

.iv-carousel__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  width: 64%;
}

@media (min-width: 480px) {
  .iv-carousel__item { width: 45%; }
}

@media (min-width: 768px) {
  .iv-carousel__item { width: 31%; }
}

@media (min-width: 992px) {
  .iv-carousel__item { width: 23.5%; }
}

@media (min-width: 1200px) {
  .iv-carousel__item { width: 18.5%; }
}

.iv-carousel__btn {
  position: absolute;
  top: 50%;
  /* Above an overlay-style card's own text layer (.iv-card__overlay is
     z-index: 3 and can sit right under this button at the edge of the
     row) — otherwise a real click here lands on the card link underneath
     instead of the arrow. */
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: var(--iv-ink-2);
  background: var(--iv-bg);
  border: 1px solid var(--iv-line);
  border-radius: 50%;
  box-shadow: var(--iv-shadow);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color 0.16s var(--iv-ease), border-color 0.16s var(--iv-ease);
}

.iv-carousel__btn:hover {
  color: var(--iv-primary);
  border-color: var(--iv-primary);
}

.iv-carousel__btn svg {
  width: 18px;
  height: 18px;
}

.iv-carousel__btn--prev {
  left: -14px;
}

.iv-carousel__btn--next {
  right: -14px;
}

@media (max-width: 575.98px) {
  /* No room for floating arrows over the edge cards on a phone; the row
     still scrolls fine by touch. */
  .iv-carousel__btn {
    display: none;
  }
}


/* ==========================================================================
   13. Home: tabs (states, sports)
   ========================================================================== */

.iv-tabs__nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 1.125rem;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 0;
}

.iv-tabs__nav::-webkit-scrollbar {
  display: none;
}

.iv-tabs__btn {
  padding: 0.35rem 0.85rem;
  font-family: inherit;
  font-size: var(--iv-fs-sm);
  font-weight: 600;
  color: var(--iv-ink-2);
  background: var(--iv-bg);
  border: 1px solid var(--iv-line);
  border-radius: var(--iv-radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.16s var(--iv-ease);
}

.iv-tabs__btn:hover {
  border-color: var(--iv-primary);
  color: var(--iv-primary);
}

.iv-tabs__btn.active {
  background: var(--iv-primary);
  border-color: var(--iv-primary);
  color: #fff;
}

/* राज्यवार खबरें: the state pills are plain links to each state's page. */
a.iv-tabs__btn {
  display: inline-block;
  text-decoration: none;
}

a.iv-tabs__btn:hover,
a.iv-tabs__btn:focus-visible {
  background: var(--iv-primary);
  border-color: var(--iv-primary);
  color: #fff;
}

/* Tabs that sit inside a section head, right aligned. */
.iv-section__head .iv-tabs__nav {
  margin: 0 0 0.4rem;
}


/* ==========================================================================
   14. Home: video strip
   ========================================================================== */

.iv-videos {
  background: var(--iv-dark);
  color: #fff;
  padding-block: var(--iv-section-y);
}

.iv-videos .iv-card {
  background: transparent;
}

.iv-videos .iv-card__title {
  font-size: var(--iv-fs-base);
  color: #fff;
}

.iv-videos .iv-card__link:hover .iv-card__title {
  color: rgba(255, 255, 255, 0.78);
}

.iv-videos .iv-card__media {
  background: var(--iv-dark-2);
}

/* --- Video Reels ------------------------------------------------------ *
 *
 * Vertical 9:16 tiles in the shared .iv-carousel row. Narrower than the
 * Trending tiles so five or six fit across a desktop screen.
 */

.iv-carousel--reels .iv-carousel__item { width: 42%; }

@media (min-width: 480px) {
  .iv-carousel--reels .iv-carousel__item { width: 30%; }
}

@media (min-width: 768px) {
  .iv-carousel--reels .iv-carousel__item { width: 22%; }
}

@media (min-width: 992px) {
  .iv-carousel--reels .iv-carousel__item { width: 18.2%; }
}

@media (min-width: 1200px) {
  .iv-carousel--reels .iv-carousel__item { width: 15.3%; }
}

.iv-reel {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  font: inherit;
  text-align: start;
  color: #fff;
  background: var(--iv-dark-2);
  border: 0;
  border-radius: var(--iv-radius-lg);
  overflow: hidden;
  cursor: pointer;
}

.iv-reel__media {
  position: relative;
  display: block;
  aspect-ratio: 9 / 16;
  background: var(--iv-dark-2);
}

/*
 * Two classes, not one: `.iv-body img` (height: auto) outranks a single
 * class and would shrink the poster to its natural height instead of
 * filling the 9:16 tile. Same trap as the card images in section 2.
 */
.iv-reel .iv-reel__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s var(--iv-ease);
}

.iv-reel:hover .iv-reel__poster,
.iv-reel:focus-visible .iv-reel__poster {
  transform: scale(1.045);
}

/* Bottom gradient so the title reads over any poster. */
.iv-reel__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(8, 10, 12, 0.9) 0%,
    rgba(8, 10, 12, 0.35) 32%,
    rgba(8, 10, 12, 0) 60%
  );
  pointer-events: none;
}

.iv-reel .iv-play {
  width: 42px;
  height: 42px;
  pointer-events: none;
}

.iv-reel:hover .iv-play,
.iv-reel:focus-visible .iv-play {
  transform: translate(-50%, -50%) scale(1.12);
}

.iv-reel__title {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  padding: 0.75rem 0.8rem 0.8rem;
  font-size: var(--iv-fs-sm);
  font-weight: 700;
  line-height: var(--iv-lh-tight);
  pointer-events: none;
}

/* --- Short Videos page (/short-videos/) ------------------------------ *
 *
 * The same tiles as the homepage row, in a grid. Column counts divide the
 * default 24 reels per page evenly (2, 3, 4, 6).
 */

.iv-reel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 576px) {
  .iv-reel-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .iv-reel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  .iv-reel-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.iv-reels-page .iv-pagination {
  display: flex;
  justify-content: center;
}

.iv-reels-page__empty {
  padding: 3rem 1rem;
  text-align: center;
  color: var(--iv-ink-3);
}

/* --- Web Stories ----------------------------------------------------- *
 *
 * Portrait 3:4 cover cards (the Google Web Story poster ratio): homepage
 * row in the shared .iv-carousel, and a grid on /web-stories/. A card is a
 * plain link to the full-screen AMP story.
 */

.iv-carousel--stories .iv-carousel__item { width: 42%; }

@media (min-width: 480px) {
  .iv-carousel--stories .iv-carousel__item { width: 30%; }
}

@media (min-width: 768px) {
  .iv-carousel--stories .iv-carousel__item { width: 22%; }
}

@media (min-width: 992px) {
  .iv-carousel--stories .iv-carousel__item { width: 18.2%; }
}

@media (min-width: 1200px) {
  .iv-carousel--stories .iv-carousel__item { width: 15.3%; }
}

.iv-story {
  position: relative;
  display: block;
  color: #fff;
  text-decoration: none;
  background: var(--iv-dark-2);
  border-radius: var(--iv-radius-lg);
  overflow: hidden;
  isolation: isolate;
}

.iv-story:hover,
.iv-story:focus-visible {
  color: #fff;
}

/* Story-ring outline, like a stories app. */
.iv-story::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 2px solid var(--iv-sec, var(--iv-primary));
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s var(--iv-ease);
}

.iv-story:hover::before,
.iv-story:focus-visible::before {
  opacity: 1;
}

.iv-story__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
}

/* Two classes: `.iv-body img { height: auto }` would otherwise win. */
.iv-story .iv-story__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s var(--iv-ease);
}

.iv-story:hover .iv-story__img,
.iv-story:focus-visible .iv-story__img {
  transform: scale(1.045);
}

.iv-story__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(8, 10, 12, 0.92) 0%,
    rgba(8, 10, 12, 0.4) 38%,
    rgba(8, 10, 12, 0) 62%
  );
}

.iv-story__badge {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.45rem;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 999px;
}

.iv-story__badge svg {
  width: 14px;
  height: 14px;
}

.iv-story__title {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  display: -webkit-box;
  padding: 0.75rem 0.8rem 0.85rem;
  font-size: var(--iv-fs-sm);
  font-weight: 700;
  line-height: var(--iv-lh-tight);
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Homepage band: like the Video Reels row, on a deep brand-red gradient,
   with the same 9:16 tiles. */
.iv-stories-band {
  position: relative;
  color: #fff;
  padding-block: var(--iv-section-y);
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, #5c0714 0%, var(--iv-primary-dark) 45%, var(--iv-primary) 100%);
}

.iv-stories-band .iv-section__rule {
  background: rgba(255, 255, 255, 0.28);
}

.iv-stories-band .iv-section__more {
  color: rgba(255, 255, 255, 0.9);
}

.iv-stories-band .iv-story__media {
  aspect-ratio: 9 / 16;
}

.iv-stories-band .iv-story {
  background: rgba(0, 0, 0, 0.25);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* On red, the hover ring is white rather than the section colour. */
.iv-stories-band .iv-story::before {
  border-color: #fff;
}

.iv-stories-band .iv-carousel__btn {
  color: var(--iv-primary);
  border-color: transparent;
}

/* Popup story player (storyPlayer() in ivoice.js). */
.iv-story-open,
.iv-story-open body {
  overflow: hidden;
}

.iv-story-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 12, 0.92);
}

/* Always 9:16, so the story keeps its phone layout (tap left / right)
   instead of switching to the player's wide-screen layout. */
.iv-story-overlay {
  --iv-story-h: 100vh;
  --iv-story-w: min(100vw, calc(100vh * 9 / 16));
}

@supports (height: 100dvh) {
  .iv-story-overlay {
    --iv-story-h: 100dvh;
    --iv-story-w: min(100vw, calc(100dvh * 9 / 16));
  }
}

@media (min-width: 768px) {
  .iv-story-overlay {
    --iv-story-h: 92vh;
    --iv-story-w: min(100vw, calc(92vh * 9 / 16));
  }
}

.iv-story-overlay__player {
  width: var(--iv-story-w);
  height: var(--iv-story-h);
}

@media (min-width: 768px) {
  .iv-story-overlay__player {
    border-radius: 14px;
    overflow: hidden;
  }
}

.iv-story-overlay__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.iv-story-overlay__close:hover,
.iv-story-overlay__close:focus-visible {
  background: var(--iv-primary);
}

.iv-story-overlay__close svg {
  width: 22px;
  height: 22px;
}

/* On wider screens there is room beside the story for our own close
   button; on phones the player's built-in close (×) is used. */
@media (min-width: 768px) {
  .iv-story-overlay__close { display: inline-flex; }
}

.iv-story-overlay__stage {
  position: relative;
}

.iv-story-overlay__nav {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.16s var(--iv-ease), opacity 0.16s var(--iv-ease);
}

.iv-story-overlay__nav:hover,
.iv-story-overlay__nav:focus-visible {
  background: var(--iv-primary);
  border-color: var(--iv-primary);
}

.iv-story-overlay__nav svg {
  width: 22px;
  height: 22px;
}

/* Beside the story when there is room, otherwise at the screen edge. */
.iv-story-overlay__nav--prev { left: max(-64px, calc((var(--iv-story-w) - 100vw) / 2 + 0.4rem)); }
.iv-story-overlay__nav--next { right: max(-64px, calc((var(--iv-story-w) - 100vw) / 2 + 0.4rem)); }

.iv-story-overlay__nav[disabled] {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* Phones: the arrows sit on the story itself, so keep them small. */
@media (max-width: 767.98px) {
  .iv-story-overlay__nav {
    width: 38px;
    height: 38px;
    background: rgba(0, 0, 0, 0.45);
  }

  .iv-story-overlay__nav[disabled] { display: none; }
}

.iv-story-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 576px) {
  .iv-story-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .iv-story-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  .iv-story-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.iv-stories-page .iv-pagination {
  display: flex;
  justify-content: center;
}

/* --- Reel popup player ------------------------------------------------ */

.iv-reel-modal .modal-dialog {
  /* As tall as the screen allows, at 9:16. */
  max-width: min(420px, calc((100vh - 6rem) * 9 / 16));
  margin-inline: auto;
}

.iv-reel-modal .modal-content {
  position: relative;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.iv-reel-modal__player {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #000;
  border-radius: var(--iv-radius-lg);
  overflow: hidden;
}

.iv-reel-modal__player iframe,
.iv-reel-modal__player video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  object-fit: contain;
}

.iv-reel-modal__title {
  margin: 0.7rem 0 0;
  font-size: var(--iv-fs-base);
  font-weight: 700;
  line-height: var(--iv-lh-tight);
  color: #fff;
}

.iv-reel-modal__close,
.iv-reel-modal__nav {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.16s var(--iv-ease);
}

.iv-reel-modal__close:hover,
.iv-reel-modal__nav:hover {
  background: rgba(255, 255, 255, 0.28);
}

.iv-reel-modal__close svg,
.iv-reel-modal__nav svg {
  width: 20px;
  height: 20px;
}

.iv-reel-modal__close {
  top: 0;
  right: -52px;
}

.iv-reel-modal__nav {
  top: calc(50% - 1.5rem);
  transform: translateY(-50%);
}

.iv-reel-modal__nav--prev { left: -56px; }
.iv-reel-modal__nav--next { right: -56px; }

.iv-reel-modal__nav[disabled] {
  opacity: 0.3;
  cursor: default;
}

/* Darker backdrop for the player only (JS sets the body class). */
.iv-reel-open .modal-backdrop {
  --bs-backdrop-opacity: 0.88;
}

/* Phones: no room beside the player, so the controls sit on top of it. */
@media (max-width: 575.98px) {
  .iv-reel-modal .modal-dialog {
    max-width: calc(100vw - 1.5rem);
  }

  .iv-reel-modal__close {
    top: 0.6rem;
    right: 0.6rem;
    background: rgba(0, 0, 0, 0.45);
  }

  .iv-reel-modal__nav {
    background: rgba(0, 0, 0, 0.45);
  }

  .iv-reel-modal__nav--prev { left: 0.5rem; }
  .iv-reel-modal__nav--next { right: 0.5rem; }
}


/* ==========================================================================
   15. Home: election + rail
   ========================================================================== */

.iv-rail {
  display: flex;
  flex-direction: column;
  gap: var(--iv-gap-lg);
}

.iv-rail__block {
  background: var(--iv-bg);
  border: 1px solid var(--iv-line);
  border-radius: var(--iv-radius-lg);
  padding: 0 1rem 0.5rem;
}

.iv-rail__block .iv-section__head {
  margin-inline: -1rem;
  padding-inline: 1rem;
  margin-bottom: 0.25rem;
}


/* ==========================================================================
   16. Home: live score
   ========================================================================== */

.iv-score {
  border: 1px solid var(--iv-line);
  border-radius: var(--iv-radius-lg);
  overflow: hidden;
  background: var(--iv-bg);
}

.iv-score__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  background: var(--iv-accent);
  color: #fff;
}

.iv-score__title {
  font-size: var(--iv-fs-base);
  font-weight: 800;
}

.iv-score__live {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--iv-fs-xs);
  font-weight: 700;
}

.iv-score__live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: iv-pulse 1.6s infinite;
}

.iv-score__body {
  padding: 0.85rem 1rem;
}

.iv-score__meta {
  font-size: var(--iv-fs-xs);
  color: var(--iv-ink-3);
  margin-bottom: 0.6rem;
}

.iv-score__team {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.45rem;
}

.iv-score__team + .iv-score__team {
  border-top: 1px solid var(--iv-line-2);
}

.iv-score__name {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--iv-fs-base);
  font-weight: 600;
}

.iv-score__flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 22px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: var(--iv-ink-3);
  border-radius: 3px;
}

.iv-score__runs {
  font-size: var(--iv-fs-lg);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.iv-score__overs {
  font-size: var(--iv-fs-xs);
  font-weight: 500;
  color: var(--iv-ink-3);
  margin-inline-start: 0.25rem;
}

.iv-score__status {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--iv-line-2);
  font-size: var(--iv-fs-xs);
  font-weight: 600;
  color: var(--iv-accent);
}

.iv-score__empty {
  padding: 1.25rem 1rem;
  text-align: center;
  font-size: var(--iv-fs-sm);
  color: var(--iv-ink-3);
}

/* Fixtures list */
.iv-fixture {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--iv-line-2);
}

.iv-fixture:last-child {
  border-bottom: 0;
}

.iv-fixture__teams {
  font-size: var(--iv-fs-sm);
  font-weight: 600;
}

.iv-fixture__when {
  font-size: var(--iv-fs-xs);
  font-weight: 600;
  color: var(--iv-primary);
  white-space: nowrap;
}


/* ==========================================================================
   17. Home: sports
   ========================================================================== */

.iv-sports__lead .iv-card--lead .iv-card__title--lead {
  font-size: var(--iv-fs-xl);
}


/* Photo gallery: one big gallery + a list of smaller ones. On desktop the
   big photo grows to the height of the list beside it. */
@media (min-width: 992px) {
  .iv-gallery__lead .iv-card,
  .iv-gallery__lead .iv-card__link,
  .iv-gallery__lead .iv-card__media {
    height: 100%;
  }

  .iv-gallery__lead .iv-card__link {
    display: block;
  }

  .iv-gallery__lead .iv-card__media {
    min-height: 320px;
  }

  .iv-gallery__lead .iv-card__media::before {
    padding-top: 0;
  }
}

.iv-gallery__lead .iv-card__title--over {
  font-size: var(--iv-fs-xl);
}


/* ==========================================================================
   18. Home: entertainment
   ========================================================================== */

.iv-mosaic__lead .iv-card--lead .iv-card__title--lead {
  font-size: var(--iv-fs-xl);
}


/* ==========================================================================
   19. Home: horoscope
   ========================================================================== */

.iv-horoscope {
  position: relative;
  /* Soft blue-grey panel with a faint zodiac wheel peeking from the top
     centre (inline SVG, no extra request). */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='460' viewBox='0 0 460 460'%3E%3Cg fill='none' stroke='%23c3cadb' stroke-width='1.6' opacity='.6'%3E%3Ccircle cx='230' cy='230' r='220'/%3E%3Ccircle cx='230' cy='230' r='165'/%3E%3Ccircle cx='230' cy='230' r='105'/%3E%3Ccircle cx='230' cy='230' r='62'/%3E%3Cline x1='289.9' y1='246.0' x2='442.5' y2='286.9'/%3E%3Cline x1='273.8' y1='273.8' x2='385.6' y2='385.6'/%3E%3Cline x1='246.0' y1='289.9' x2='286.9' y2='442.5'/%3E%3Cline x1='214.0' y1='289.9' x2='173.1' y2='442.5'/%3E%3Cline x1='186.2' y1='273.8' x2='74.4' y2='385.6'/%3E%3Cline x1='170.1' y1='246.0' x2='17.5' y2='286.9'/%3E%3Cline x1='170.1' y1='214.0' x2='17.5' y2='173.1'/%3E%3Cline x1='186.2' y1='186.2' x2='74.4' y2='74.4'/%3E%3Cline x1='214.0' y1='170.1' x2='173.1' y2='17.5'/%3E%3Cline x1='246.0' y1='170.1' x2='286.9' y2='17.5'/%3E%3Cline x1='273.8' y1='186.2' x2='385.6' y2='74.4'/%3E%3Cline x1='289.9' y1='214.0' x2='442.5' y2='173.1'/%3E%3Cpolygon points='230.0,395.0 87.1,147.5 372.9,147.5'/%3E%3Cpolygon points='230.0,65.0 372.9,312.5 87.1,312.5'/%3E%3C/g%3E%3Cg fill='%23c3cadb' opacity='.6'%3E%3Ccircle cx='422.5' cy='230.0' r='4.5'/%3E%3Ccircle cx='396.7' cy='326.2' r='4.5'/%3E%3Ccircle cx='326.2' cy='396.7' r='4.5'/%3E%3Ccircle cx='230.0' cy='422.5' r='4.5'/%3E%3Ccircle cx='133.8' cy='396.7' r='4.5'/%3E%3Ccircle cx='63.3' cy='326.2' r='4.5'/%3E%3Ccircle cx='37.5' cy='230.0' r='4.5'/%3E%3Ccircle cx='63.3' cy='133.7' r='4.5'/%3E%3Ccircle cx='133.7' cy='63.3' r='4.5'/%3E%3Ccircle cx='230.0' cy='37.5' r='4.5'/%3E%3Ccircle cx='326.2' cy='63.3' r='4.5'/%3E%3Ccircle cx='396.7' cy='133.7' r='4.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat center -190px / 460px 460px,
    linear-gradient(180deg, #eef2fb 0%, #f4f6fc 100%);
  border: 1px solid var(--iv-line);
  border-radius: var(--iv-radius-lg);
  padding: 1.25rem;
  overflow: hidden;
}

/* Story rows sit straight on the panel, under a hairline, instead of in
   white boxes that would hide the background. */
.iv-horoscope > .row {
  padding-top: 1rem;
  border-top: 1px solid rgba(18, 22, 28, 0.08);
}

.iv-horoscope .iv-panel,
.iv-horoscope .iv-card {
  padding-inline: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.iv-horoscope__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.iv-horoscope__title {
  font-size: var(--iv-fs-md);
  font-weight: 800;
}

.iv-horoscope__date {
  font-size: var(--iv-fs-xs);
  color: var(--iv-ink-3);
}

.iv-zodiac {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.iv-zodiac__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.55rem 0.25rem;
  /* Transparent so the wheel behind shows through; a card appears on hover. */
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--iv-radius);
  text-align: center;
  transition: transform 0.16s var(--iv-ease), border-color 0.16s var(--iv-ease);
}

.iv-zodiac__item:hover,
.iv-zodiac__item:focus-visible,
.iv-zodiac__item.is-active {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.8);
  border-color: var(--iv-primary);
}

/*
 * Zodiac characters (U+2648…) have an emoji presentation in most fonts, which
 * renders them as multicoloured blobs. Force the monochrome text glyph so the
 * row reads as a set of typographic marks in the brand colour.
 */
.iv-zodiac__glyph {
  font-family: "Noto Sans Symbols 2", "Segoe UI Symbol", "DejaVu Sans", serif;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--iv-primary);
  font-variant-emoji: text;
}

.iv-zodiac__name {
  font-size: var(--iv-fs-xs);
  font-weight: 600;
  color: var(--iv-ink-2);
}


/* ==========================================================================
   20. Home: gallery
   ========================================================================== */

.iv-gallery .iv-card__media {
  border-radius: var(--iv-radius-lg);
}

.iv-gallery .iv-card__title {
  font-size: var(--iv-fs-base);
}


/* ==========================================================================
   21. Home: category columns
   ========================================================================== */

.iv-column {
  height: 100%;
  background: var(--iv-bg);
  border: 1px solid var(--iv-line);
  border-radius: var(--iv-radius-lg);
  padding: 0 1rem 0.5rem;
}

.iv-column .iv-section__head {
  margin-inline: -1rem;
  padding-inline: 1rem;
  margin-bottom: 0.75rem;
}

.iv-column__lead {
  margin-bottom: 0.5rem;
}


/* ==========================================================================
   22. Home: app CTA
   ========================================================================== */

.iv-appcta {
  background: #0e0c0b;
  color: #fff;
  padding-block: 1.6rem;
}

.iv-appcta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.iv-appcta__lede {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.iv-appcta__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: var(--iv-primary);
  border-radius: 8px;
}

.iv-appcta__icon svg {
  width: 26px;
  height: 26px;
  fill: #fff;
}

.iv-appcta__title {
  font-size: var(--iv-fs-lg);
  font-weight: 800;
}

.iv-appcta__text {
  margin: 0.3rem 0 0;
  font-size: var(--iv-fs-sm);
  color: rgba(255, 255, 255, 0.66);
}

.iv-appcta__links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* Rectangular, not pills — the design uses square-ish store buttons. */
.iv-appcta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 108px;
  padding: 0.65rem 1.4rem;
  font-size: var(--iv-fs-sm);
  font-weight: 700;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 4px;
  transition: background 0.16s var(--iv-ease), border-color 0.16s var(--iv-ease);
}

.iv-appcta__btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.iv-appcta__btn--primary {
  background: var(--iv-primary);
  border-color: var(--iv-primary);
}

.iv-appcta__btn--primary:hover {
  background: var(--iv-primary-dark);
  border-color: var(--iv-primary-dark);
  color: #fff;
}


/* ==========================================================================
   23. Live TV panel
   ========================================================================== */

.iv-livetv {
  position: relative;
  border-radius: var(--iv-radius-lg);
  overflow: hidden;
  background: var(--iv-dark);
  color: #fff;
}

.iv-livetv__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  background: var(--iv-primary);
  font-size: var(--iv-fs-xs);
  font-weight: 800;
}

.iv-livetv__player {
  background: #000;
}

.iv-livetv__player iframe {
  display: block;
  width: 100%;
  border: 0;
}

/* --- Clean Live TV player (sound + full screen only) ----------------- */

.iv-player {
  position: relative;
  background: #000;
}

.iv-player__mount,
.iv-player__mount iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Sits over the video so YouTube's hover bar (title, share, logo links)
   never opens; a click only starts playback if it has stopped. */
.iv-player__shield {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: pointer;
}

.iv-player__controls {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 3;
  display: flex;
  gap: 0.5rem;
}

.iv-player__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 40px;
  min-width: 40px;
  padding: 0 0.7rem;
  font: inherit;
  font-size: var(--iv-fs-sm);
  font-weight: 700;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.16s var(--iv-ease);
}

.iv-player__btn:hover,
.iv-player__btn:focus-visible {
  background: var(--iv-primary);
}

.iv-player__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.iv-player__icon--on,
.iv-player__icon--shrink,
.iv-player.is-unmuted .iv-player__icon--muted,
.iv-player.is-full .iv-player__icon--expand {
  display: none;
}

.iv-player.is-unmuted .iv-player__icon--on,
.iv-player.is-full .iv-player__icon--shrink {
  display: block;
}

/* Muted: the label invites the reader to turn the sound on. */
.iv-player.is-unmuted .iv-player__label {
  display: none;
}

@media (max-width: 575.98px) {
  .iv-player__label { display: none; }
}

/* Full screen (real, or the CSS fallback on phones without the API). */
.iv-player.is-full {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.iv-player.is-full .iv-player__frame {
  width: 100%;
  height: 100%;
}

.iv-player.is-full .iv-player__frame::before {
  display: none;
}

.iv-player.is-pseudo-full {
  position: fixed;
  inset: 0;
  z-index: 2000;
}

.iv-livetv__foot {
  padding: 0.7rem 0.9rem;
  font-size: var(--iv-fs-sm);
  font-weight: 700;
  text-align: center;
}

/* Poster state, shown when there is no video id to embed. */
.iv-livetv__poster {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  aspect-ratio: 16 / 10;
  background: radial-gradient(circle at 50% 40%, var(--iv-dark-2), var(--iv-dark));
  text-align: center;
  padding: 1rem;
}

/*
 * `relative`, not `static`: the triangle is an absolutely positioned ::after,
 * so a static parent would anchor it to .iv-livetv and float it away from
 * the circle.
 */
.iv-livetv__poster .iv-play {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: 56px;
  height: 56px;
}

.iv-livetv__poster .iv-play::after {
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
}


/* ==========================================================================
   24. Ads
   ========================================================================== */

/*
 * Printed only when a placement has at least one ad (wp-admin >
 * Advertisements), so there is never an empty reserved box. Several ads in
 * one placement stack with a small gap.
 */
.iv-ads {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-block: var(--iv-gap-lg);
}

.iv-ads__label {
  margin-bottom: -0.5rem;
  font-size: 11px;
  font-weight: 600;
  color: var(--iv-ink-3);
}

.iv-ads__item {
  width: 100%;
  max-width: 970px;
  text-align: center;
  overflow: hidden;
}

.iv-ads__item.d-none {
  display: none;
}

@media (min-width: 992px) {
  .iv-ads__item.d-none.d-lg-block {
    display: block;
  }
}

.iv-ads__link {
  display: inline-block;
}

.iv-ads__img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: var(--iv-radius);
}

.iv-ads--top {
  margin-block: 1rem 0;
}

.iv-ads--inline {
  margin-block: 1.75rem;
}

/* Right column: stay inside the 300px-ish rail. */
.iv-sidebar .iv-ads,
.iv-ads--home-rail {
  margin-block: 1.25rem 0;
}


/* ==========================================================================
   25. Article
   ========================================================================== */

.iv-article {
  background: var(--iv-bg);
  border: 1px solid var(--iv-line);
  border-radius: var(--iv-radius-lg);
  padding: 1.5rem;
}

@media (min-width: 992px) {
  .iv-article {
    padding: 2rem 2.5rem;
  }
}

.iv-article__cat {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.2rem 0.65rem;
  font-size: var(--iv-fs-xs);
  font-weight: 700;
  color: #fff;
  background: var(--iv-primary);
  border-radius: 3px;
}

.iv-article__title {
  font-size: var(--iv-fs-2xl);
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 0.85rem;
}

@media (min-width: 992px) {
  .iv-article__title {
    font-size: var(--iv-fs-3xl);
  }
}

.iv-article__summary {
  margin-bottom: 1.25rem;
  padding: 0.85rem 1.1rem;
  font-size: var(--iv-fs-md);
  font-weight: 500;
  line-height: var(--iv-lh-snug);
  color: var(--iv-ink-2);
  background: var(--iv-primary-soft);
  border-inline-start: 3px solid var(--iv-primary);
  border-radius: 0 var(--iv-radius) var(--iv-radius) 0;
}

.iv-article__figure {
  margin: 0 0 1.5rem;
}

.iv-article__figure img {
  width: 100%;
  border-radius: var(--iv-radius-lg);
}

.iv-article__caption {
  margin-top: 0.5rem;
  font-size: var(--iv-fs-xs);
  color: var(--iv-ink-3);
}

/* Body copy */
.iv-article__body {
  font-size: var(--iv-fs-md);
  line-height: var(--iv-lh-body);
  color: var(--iv-ink);
}

.iv-article__body p {
  margin-bottom: 1.2em;
}

.iv-article__body a {
  color: var(--iv-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.iv-article__body h2,
.iv-article__body h3,
.iv-article__body h4 {
  margin: 1.8em 0 0.6em;
  font-size: var(--iv-fs-lg);
}

.iv-article__body ul,
.iv-article__body ol {
  margin: 0 0 1.2em;
  padding-inline-start: 1.4em;
}

.iv-article__body li {
  margin-bottom: 0.45em;
}

.iv-article__body img {
  height: auto;
  border-radius: var(--iv-radius);
}

.iv-article__body blockquote {
  margin: 1.5em 0;
  padding: 0.9em 1.2em;
  border-inline-start: 3px solid var(--iv-primary);
  background: var(--iv-bg-2);
  font-style: normal;
  font-weight: 500;
  border-radius: 0 var(--iv-radius) var(--iv-radius) 0;
}

.iv-article__body iframe {
  max-width: 100%;
  border-radius: var(--iv-radius);
}

/* The "पढ़ें :-" inline related links the editors insert. */
.iv-article__body .readmore,
.iv-article__body h6.readmore {
  margin: 1.25em 0;
  padding: 0.6em 0.9em;
  font-size: var(--iv-fs-base);
  font-weight: 600;
  background: var(--iv-bg-2);
  border-inline-start: 3px solid var(--iv-primary);
  border-radius: 0 var(--iv-radius) var(--iv-radius) 0;
}

/* Meta line */
.iv-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: var(--iv-fs-xs);
  color: var(--iv-ink-3);
}

.iv-meta__author {
  font-weight: 700;
  color: var(--iv-ink-2);
}

.iv-meta__sep {
  opacity: 0.5;
}

/* Share */
.iv-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 0.9rem;
  margin-block: 1.25rem;
  padding-block: 0.9rem;
  border-block: 1px solid var(--iv-line);
}

.iv-share__label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--iv-fs-sm);
  font-weight: 800;
  color: var(--iv-ink-2);
}

.iv-share__label .iv-share__icon {
  width: 16px;
  height: 16px;
  color: var(--iv-primary);
}

.iv-share__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.iv-share__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 30px;
  height: 30px;
  padding: 0;
  font-family: inherit;
  font-size: var(--iv-fs-sm);
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--iv-ink-3);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(17, 20, 24, 0.12);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.16s var(--iv-ease), box-shadow 0.16s var(--iv-ease), filter 0.16s var(--iv-ease);
}

.iv-share__btn[hidden] {
  display: none;
}

:where(.iv-body) .iv-share__btn:hover,
:where(.iv-body) .iv-share__btn:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(17, 20, 24, 0.2);
  filter: brightness(1.06);
}

.iv-share__btn:focus-visible {
  outline: 2px solid var(--iv-primary);
  outline-offset: 2px;
}

.iv-share__icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.iv-share__btn--whatsapp { background: #25d366; }
.iv-share__btn--whatsapp .iv-share__icon { width: 17px; height: 17px; }

.iv-share__btn--facebook { background: #1877f2; }
.iv-share__btn--twitter  { background: #0f1419; }
.iv-share__btn--twitter .iv-share__icon { width: 13px; height: 13px; }
.iv-share__btn--telegram { background: #229ed9; }
.iv-share__btn--telegram .iv-share__icon { margin-left: -1px; }

/* Copy link: outlined; turns green with a tick once copied. */
.iv-share__btn--copy,
.iv-share__btn--more {
  color: var(--iv-ink-2);
  background: var(--iv-bg);
  box-shadow: inset 0 0 0 1.5px var(--iv-line);
}

:where(.iv-body) .iv-share__btn--copy:hover,
:where(.iv-body) .iv-share__btn--copy:focus-visible,
:where(.iv-body) .iv-share__btn--more:hover,
:where(.iv-body) .iv-share__btn--more:focus-visible {
  color: var(--iv-primary);
  box-shadow: inset 0 0 0 1.5px var(--iv-primary), 0 6px 14px rgba(17, 20, 24, 0.12);
}

.iv-share__icon--check {
  display: none;
}

.iv-share__btn--copy.is-copied {
  color: #fff;
  background: var(--iv-accent);
  box-shadow: none;
}

.iv-share__btn--copy.is-copied .iv-share__icon--link {
  display: none;
}

.iv-share__btn--copy.is-copied .iv-share__icon--check {
  display: block;
}

/* Tags */
.iv-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-block: 1.25rem;
}

.iv-tags__label {
  font-size: var(--iv-fs-xs);
  font-weight: 700;
  color: var(--iv-ink-3);
}

.iv-tags__tag {
  padding: 0.25rem 0.7rem;
  font-size: var(--iv-fs-xs);
  font-weight: 600;
  color: var(--iv-ink-2);
  background: var(--iv-bg-2);
  border: 1px solid var(--iv-line);
  border-radius: var(--iv-radius-pill);
}

.iv-tags__tag:hover {
  border-color: var(--iv-primary);
  color: var(--iv-primary);
}

/* Reading progress bar */
.iv-progress {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  z-index: 1050;
  height: 3px;
  width: 0;
  background: var(--iv-primary);
  transition: width 0.1s linear;
}


/* ==========================================================================
   25b. Live Blog
   ========================================================================== */

/* LIVE badge — pulsing dot, used on the page, the listing and cards. */
.iv-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.7rem;
  font-size: var(--iv-fs-xs);
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--iv-primary);
  border-radius: var(--iv-radius-pill);
}

.iv-live-badge__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}

.iv-live-badge__dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #fff;
  animation: iv-live-ring 1.6s ease-out infinite;
}

@keyframes iv-live-ring {
  from { transform: scale(0.6); opacity: 0.9; }
  to   { transform: scale(1.6); opacity: 0; }
}

.iv-live-badge--ended {
  letter-spacing: 0;
  color: var(--iv-ink-2);
  background: var(--iv-bg-3);
}

/* Header */
.iv-liveblog__badge {
  margin-bottom: 0.75rem;
}

.iv-liveblog__flags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.iv-liveblog__flags .iv-liveblog__badge {
  margin-bottom: 0;
}

.iv-liveblog__kicker {
  padding: 0.16rem 0.6rem;
  font-size: var(--iv-fs-xs);
  font-weight: 800;
  line-height: 1.4;
  color: var(--iv-primary);
  border: 1.5px solid var(--iv-primary);
  border-radius: 4px;
}

/* Opened from the ticker (#update-123): the update glows for a moment. */
.iv-lu.is-target {
  border-radius: 4px;
  animation: iv-lu-target 4.5s ease-out forwards;
}

@keyframes iv-lu-target {
  0%, 45% {
    background: var(--iv-primary-soft);
    box-shadow: 0 0 0 0.6rem var(--iv-primary-soft);
  }
  100% {
    background: transparent;
    box-shadow: 0 0 0 0.6rem transparent;
  }
}

.iv-liveblog__earlier {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--iv-line);
}

.iv-liveblog__earlier-title {
  margin: 0 0 0.75rem;
  font-size: var(--iv-fs-md);
  font-weight: 800;
}

.iv-liveblog__earlier ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.iv-liveblog__earlier li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px dashed var(--iv-line);
}

.iv-liveblog__earlier li a {
  font-weight: 700;
  color: var(--iv-ink);
}

.iv-liveblog__earlier li a:hover {
  color: var(--iv-primary);
}

.iv-liveblog__earlier li span {
  flex-shrink: 0;
  font-size: var(--iv-fs-xs);
  color: var(--iv-ink-3);
}

.iv-liveblog__intro {
  font-size: var(--iv-fs-md);
  line-height: var(--iv-lh-body);
  color: var(--iv-ink-2);
}

.iv-liveblog__intro > :last-child {
  margin-bottom: 0;
}

.iv-liveblog__byline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0.6rem 0 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--iv-line-2);
  font-size: var(--iv-fs-xs);
  color: var(--iv-ink-3);
}

.iv-liveblog__author a {
  font-weight: 700;
  color: var(--iv-primary);
}

/* Key highlights */
.iv-liveblog__highlights {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem 0.6rem;
  background: var(--iv-primary-soft);
  border-inline-start: 4px solid var(--iv-primary);
  border-radius: 0 var(--iv-radius) var(--iv-radius) 0;
}

.iv-liveblog__highlights-title {
  margin-bottom: 0.6rem;
  font-size: var(--iv-fs-md);
  font-weight: 800;
  color: var(--iv-primary);
}

.iv-liveblog__highlights ul {
  margin: 0;
  padding-inline-start: 1.1rem;
}

.iv-liveblog__highlights li {
  margin-bottom: 0.45rem;
  font-weight: 600;
  line-height: var(--iv-lh-snug);
}

/* Feed heading */
.iv-liveblog__feed-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 1.75rem 0 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--iv-primary);
  scroll-margin-top: calc(var(--iv-nav-h) + 1rem);
}

.iv-liveblog__feed-title {
  font-size: var(--iv-fs-lg);
  font-weight: 800;
}

.iv-liveblog__count {
  font-size: var(--iv-fs-sm);
  font-weight: 700;
  color: var(--iv-ink-3);
}

/* One update — a timeline entry with a dot on the left rail. */
.iv-liveblog__feed,
.iv-liveblog__pinned {
  position: relative;
}

.iv-lu {
  position: relative;
  padding: 0 0 1.5rem 1.5rem;
  border-inline-start: 2px solid var(--iv-line);
  scroll-margin-top: calc(var(--iv-nav-h) + 1rem);
}

.iv-lu::before {
  content: "";
  position: absolute;
  top: 0.3rem;
  left: -7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--iv-bg);
  border: 3px solid var(--iv-primary);
}

.iv-lu:last-child {
  padding-bottom: 0.5rem;
}

.iv-lu__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  margin-bottom: 0.4rem;
}

.iv-lu__time {
  font-size: var(--iv-fs-xs);
  color: var(--iv-ink-3);
}

.iv-lu__time strong {
  margin-inline-end: 0.35rem;
  font-size: var(--iv-fs-sm);
  font-weight: 800;
  color: var(--iv-primary);
}

.iv-lu__pin,
.iv-lu__new {
  padding: 0.05rem 0.5rem;
  font-size: 11px;
  font-weight: 700;
  border-radius: 3px;
}

.iv-lu__pin {
  color: #fff;
  background: var(--iv-dark);
}

/* "नया" only on updates that arrived while the page was open. */
.iv-lu__new {
  display: none;
  color: #fff;
  background: var(--iv-accent);
}

.iv-lu.is-new .iv-lu__new {
  display: inline-block;
}

.iv-lu.is-new {
  animation: iv-lu-in 0.6s var(--iv-ease);
}

@keyframes iv-lu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

.iv-lu__share {
  margin-inline-start: auto;
  padding: 0.1rem 0.55rem;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--iv-ink-3);
  background: transparent;
  border: 1px solid var(--iv-line);
  border-radius: var(--iv-radius-pill);
  cursor: pointer;
}

.iv-lu__share:hover {
  color: var(--iv-primary);
  border-color: var(--iv-primary);
}

.iv-lu__title {
  margin-bottom: 0.4rem;
  font-size: var(--iv-fs-lg);
  font-weight: 800;
  line-height: var(--iv-lh-tight);
}

.iv-lu__body {
  font-size: var(--iv-fs-base);
}

.iv-lu__body > :last-child {
  margin-bottom: 0;
}

.iv-lu__body img {
  height: auto;
  border-radius: var(--iv-radius);
}

.iv-lu__body iframe {
  max-width: 100%;
}

/* Pinned updates sit in a tinted panel above the stream. */
.iv-liveblog__pinned {
  margin-bottom: 1.25rem;
  padding: 1rem 1rem 0.25rem;
  background: var(--iv-bg-2);
  border: 1px solid var(--iv-line);
  border-radius: var(--iv-radius-lg);
}

.iv-liveblog__pinned .iv-lu {
  border-inline-start-color: var(--iv-dark);
}

.iv-liveblog__pinned .iv-lu::before {
  border-color: var(--iv-dark);
}

/* "3 नए अपडेट" — floats at the top while the reader is further down. */
.iv-liveblog__pill {
  position: fixed;
  top: calc(var(--iv-nav-h) + 12px);
  left: 50%;
  z-index: 1020;
  padding: 0.45rem 1.1rem;
  font-family: inherit;
  font-size: var(--iv-fs-sm);
  font-weight: 700;
  color: #fff;
  background: var(--iv-primary);
  border: 0;
  border-radius: var(--iv-radius-pill);
  box-shadow: var(--iv-shadow-lg);
  cursor: pointer;
  transform: translateX(-50%);
}

.iv-liveblog__pill::before {
  content: "↑ ";
}

.iv-liveblog__empty {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--iv-ink-3);
  background: var(--iv-bg-2);
  border-radius: var(--iv-radius);
}

.iv-liveblog__more-wrap {
  margin: 1rem 0 0;
  text-align: center;
}

/* Listing page cards */
.iv-lb-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.iv-lb-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.9rem;
  padding: 1rem;
  background: var(--iv-bg);
  border: 1px solid var(--iv-line);
  border-radius: var(--iv-radius-lg);
}

.iv-lb-card.is-live {
  border-color: var(--iv-primary);
  box-shadow: 0 0 0 1px var(--iv-primary) inset;
}

@media (min-width: 768px) {
  .iv-lb-card {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 1.25rem;
  }
}

.iv-lb-card__media {
  overflow: hidden;
  background: var(--iv-bg-3);
  border-radius: var(--iv-radius);
}

.iv-lb-card__badge {
  margin-bottom: 0.5rem;
}

.iv-lb-card__title {
  font-size: var(--iv-fs-lg);
  font-weight: 800;
  line-height: var(--iv-lh-tight);
}

.iv-lb-card__meta {
  margin: 0.4rem 0 0.6rem;
  font-size: var(--iv-fs-xs);
  color: var(--iv-ink-3);
}

.iv-lb-card__points {
  margin: 0;
  padding-inline-start: 1.1rem;
  font-size: var(--iv-fs-sm);
  color: var(--iv-ink-2);
}

.iv-lb-card__points li {
  margin-bottom: 0.25rem;
}

.iv-lb-card__intro {
  margin: 0;
  font-size: var(--iv-fs-sm);
  color: var(--iv-ink-2);
}

/* Menu link to /live-blog/ while a live blog is live: pulsing red dot. */
.iv-menu-live > a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.iv-menu-live > a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  animation: iv-menu-live 1.6s infinite;
}

@keyframes iv-menu-live {
  0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
  70%  { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .iv-live-badge__dot::after,
  .iv-menu-live > a::before,
  .iv-lu.is-new {
    animation: none;
  }
}


/* ==========================================================================
   26. Archive, search, 404
   ========================================================================== */

.iv-page-head {
  margin-bottom: 1.5rem;
}

.iv-page-head__title {
  font-size: var(--iv-fs-2xl);
  font-weight: 800;
}

.iv-page-head__desc {
  margin: 0.5rem 0 0;
  font-size: var(--iv-fs-sm);
  color: var(--iv-ink-3);
}

.iv-crumbs {
  margin-bottom: 1rem;
}

.iv-crumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--iv-fs-xs);
  color: var(--iv-ink-3);
}

.iv-crumbs__item + .iv-crumbs__item::before {
  content: "›";
  margin-inline-end: 0.35rem;
  opacity: 0.6;
}

.iv-crumbs__link {
  color: var(--iv-ink-3);
}

.iv-crumbs__link:hover {
  color: var(--iv-primary);
}

.iv-crumbs__current {
  color: var(--iv-ink-2);
  font-weight: 600;
}

/* Pagination */
.iv-pagination {
  margin-top: 2rem;
}

.iv-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  margin: 0 0.15rem;
  padding: 0 0.6rem;
  font-size: var(--iv-fs-sm);
  font-weight: 600;
  color: var(--iv-ink-2);
  background: var(--iv-bg);
  border: 1px solid var(--iv-line);
  border-radius: var(--iv-radius);
}

.iv-pagination .page-numbers:hover {
  border-color: var(--iv-primary);
  color: var(--iv-primary);
}

.iv-pagination .page-numbers.current {
  background: var(--iv-primary);
  border-color: var(--iv-primary);
  color: #fff;
}

/* 404 */
.iv-404 {
  text-align: center;
  padding-block: 3rem;
}

.iv-404__code {
  font-size: clamp(4rem, 14vw, 8rem);
  font-weight: 800;
  line-height: 1;
  color: var(--iv-primary);
}

.iv-404__title {
  margin-top: 0.75rem;
  font-size: var(--iv-fs-xl);
}

.iv-404__text {
  margin: 0.6rem auto 1.5rem;
  max-width: 44ch;
  color: var(--iv-ink-3);
}

/* Empty state */
.iv-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--iv-ink-3);
}


/* ==========================================================================
   27. Sidebar & widgets
   ========================================================================== */

.iv-widget {
  margin-bottom: var(--iv-gap-lg);
  background: var(--iv-bg);
  border: 1px solid var(--iv-line);
  border-radius: var(--iv-radius-lg);
  padding: 1rem;
}

.iv-widget__title {
  margin: -1rem -1rem 0.75rem;
  padding: 0.55rem 1rem;
  font-size: var(--iv-fs-base);
  font-weight: 800;
  color: #fff;
  background: var(--iv-primary);
  border-radius: var(--iv-radius-lg) var(--iv-radius-lg) 0 0;
}

.iv-widget ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.iv-widget li {
  padding-block: 0.5rem;
  border-bottom: 1px solid var(--iv-line-2);
  font-size: var(--iv-fs-sm);
}

.iv-widget li:last-child {
  border-bottom: 0;
}

.iv-sticky {
  position: sticky;
  top: calc(var(--iv-nav-h) + 16px);
}

/* "सभी राज्य" on state pages: the mega-menu cells in a 3-up grid. */
.iv-widget__title a {
  color: inherit;
}

.iv-state-list__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 -1rem -1rem;
}

.iv-state-list__item {
  gap: 0.35rem;
  padding: 0.8rem 0.35rem;
  border-inline-end: 1px solid var(--iv-line);
  border-block-start: 0;
  border-block-end: 1px solid var(--iv-line);
}

.iv-state-list__item:nth-child(3n) {
  border-inline-end: 0;
}

.iv-state-list__item .iv-states__icon {
  width: 48px;
  height: 30px;
}

.iv-state-list__item .iv-states__label {
  font-size: var(--iv-fs-xs);
}

/* The state being viewed. */
.iv-state-list__item.is-current {
  background: var(--iv-primary);
  color: #fff;
}

.iv-state-list__item.is-current .iv-states__icon {
  color: #fff;
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .iv-state-list__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .iv-state-list__item:nth-child(3n) { border-inline-end: 1px solid var(--iv-line); }
  .iv-state-list__item:nth-child(4n) { border-inline-end: 0; }
}


/* ==========================================================================
   28. Footer
   ========================================================================== */

/*
 * Logo + social icons, a row of section links, a row of page links, and the
 * copyright band. Colours come from three tokens so the Customizer's
 * red / dark / light choice only swaps those.
 */
.iv-footer {
  --iv-f-bg: var(--iv-primary);
  --iv-f-bg-2: var(--iv-primary-dark);
  --iv-f-fg: rgba(255, 255, 255, 0.9);
  --iv-f-fg-2: rgba(255, 255, 255, 0.72);
  --iv-f-strong: #fff;
  --iv-f-line: rgba(255, 255, 255, 0.2);
  background: var(--iv-f-bg);
  color: var(--iv-f-fg);
  padding-block: 1.75rem 0;
  /* The bottom band bleeds edge to edge with 50vw, and vw counts the
     scrollbar — clip the few px it overshoots. */
  overflow-x: clip;
}

.iv-footer--dark {
  --iv-f-bg: var(--iv-dark);
  --iv-f-bg-2: #0a0c0f;
  --iv-f-line: rgba(255, 255, 255, 0.12);
}

.iv-footer--light {
  --iv-f-bg: var(--iv-bg-2);
  --iv-f-bg-2: var(--iv-bg-3);
  --iv-f-fg: var(--iv-ink-2);
  --iv-f-fg-2: var(--iv-ink-3);
  --iv-f-strong: var(--iv-ink);
  --iv-f-line: var(--iv-line);
  border-top: 1px solid var(--iv-line);
}

.iv-footer a {
  color: var(--iv-f-fg);
}

.iv-footer a:hover,
.iv-footer a:focus-visible {
  color: var(--iv-f-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.iv-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--iv-f-line);
}

.iv-footer__home {
  display: inline-block;
}

.iv-footer__home:hover {
  text-decoration: none;
}

/* White tile behind the logo so it reads on red or dark. */
.iv-footer .iv-footer__logo {
  display: block;
  width: auto;
  height: 64px;
  padding: 3px;
  background: #fff;
  border-radius: 4px;
}

.iv-footer--light .iv-footer__logo {
  padding: 0;
}

/* No logo uploaded: a simple framed wordmark. */
.iv-footer__mark {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border: 2px solid var(--iv-f-strong);
  text-align: center;
  line-height: 1.15;
}

.iv-footer__mark-name {
  display: block;
  font-size: var(--iv-fs-xl);
  font-weight: 800;
  color: var(--iv-f-strong);
}

.iv-footer__mark-tag {
  display: block;
  margin-top: 0.2rem;
  font-size: var(--iv-fs-xs);
  font-weight: 600;
}

/* Social icons: outlined circles. */
.iv-footer .iv-social {
  gap: 0.6rem;
}

.iv-footer .iv-social__link {
  width: 36px;
  height: 36px;
  color: var(--iv-f-fg);
  background: transparent;
  border: 1px solid var(--iv-f-line);
}

.iv-footer .iv-social__link:hover {
  color: var(--iv-f-strong);
  background: transparent;
  border-color: var(--iv-f-strong);
  text-decoration: none;
}

.iv-footer .iv-social__link svg {
  width: 16px;
  height: 16px;
}

.iv-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
}

.iv-footer__links--sections {
  padding-top: 1rem;
  font-size: var(--iv-fs-base, 1rem);
  font-weight: 700;
}

.iv-footer__links--pages {
  padding-block: 0.65rem 1.25rem;
  font-size: var(--iv-fs-sm);
}

.iv-footer__links--pages a {
  color: var(--iv-f-fg-2);
}

/* Sections row missing (no menu, no categories): keep the spacing. */
.iv-footer__top + .iv-footer__links--pages {
  padding-top: 1rem;
}

@media (max-width: 575.98px) {
  .iv-footer__links {
    gap: 0.35rem 1rem;
  }
}

/*
 * The bottom band spans the full width, so it is pulled out of the shell's
 * padding rather than separated by a rule.
 */
.iv-footer__bottom {
  margin-inline: calc(-50vw + 50%);
  padding-block: 0.8rem;
  background: var(--iv-f-bg-2);
  font-size: var(--iv-fs-xs);
  color: var(--iv-f-fg-2);
}

.iv-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 16px;
}

@media (min-width: 1400px) {
  .iv-footer__bottom-inner {
    max-width: 1340px;
  }
}


/* ==========================================================================
   29. Mobile tab bar
   ========================================================================== */

/* --- Top 10 news to listen (template-parts/home/listen.php) ----------- */

.iv-listen {
  padding-block: 0.25rem 0.5rem;
}

.iv-listen__bar {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0.9rem;
  color: #fff;
  background: linear-gradient(120deg, var(--iv-dark) 0%, var(--iv-dark-2) 55%, var(--iv-primary-dark) 100%);
  border-radius: var(--iv-radius-lg);
  box-shadow: var(--iv-shadow-sm, 0 2px 8px rgba(17, 20, 24, 0.12));
}

.iv-listen__play,
.iv-listen__mini-play {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  color: #fff;
  background: var(--iv-primary);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(200, 16, 46, 0.28);
  cursor: pointer;
  transition: transform 0.16s var(--iv-ease), background 0.16s var(--iv-ease);
}

.iv-listen__play:hover,
.iv-listen__play:focus-visible {
  background: #e01a3a;
  transform: scale(1.05);
}

.iv-listen__play svg,
.iv-listen__mini-play svg {
  width: 24px;
  height: 24px;
}

.iv-listen__icon-pause,
.iv-listen.is-playing .iv-listen__icon-play {
  display: none;
}

.iv-listen.is-playing .iv-listen__icon-pause {
  display: block;
}

.iv-listen__info {
  flex: 1;
  min-width: 0;
}

.iv-listen__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  font-size: var(--iv-fs-base);
  font-weight: 800;
}

.iv-listen__badge {
  padding: 0.05rem 0.45rem;
  font-size: var(--iv-fs-xs);
  font-weight: 800;
  color: var(--iv-primary);
  background: #fff;
  border-radius: 4px;
}

.iv-listen__count {
  font-size: var(--iv-fs-xs);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
}

.iv-listen__now {
  margin: 0.15rem 0 0;
  overflow: hidden;
  font-size: var(--iv-fs-sm);
  color: rgba(255, 255, 255, 0.85);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Little equaliser while it plays. */
.iv-listen__eq {
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
}

.iv-listen.is-playing .iv-listen__eq {
  display: inline-flex;
}

.iv-listen__eq i {
  width: 3px;
  height: 100%;
  background: #ff8a9a;
  border-radius: 2px;
  animation: iv-eq 0.9s ease-in-out infinite;
}

.iv-listen__eq i:nth-child(2) { animation-delay: -0.3s; }
.iv-listen__eq i:nth-child(3) { animation-delay: -0.6s; }
.iv-listen__eq i:nth-child(4) { animation-delay: -0.15s; }

@keyframes iv-eq {
  0%, 100% { transform: scaleY(0.3); transform-origin: bottom; }
  50% { transform: scaleY(1); transform-origin: bottom; }
}

.iv-listen__ctrls {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.iv-listen__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 38px;
  height: 38px;
  padding: 0 0.55rem;
  font-family: inherit;
  font-size: var(--iv-fs-sm);
  font-weight: 700;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  cursor: pointer;
}

.iv-listen__btn:hover,
.iv-listen__btn:focus-visible,
.iv-listen__btn[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.26);
}

.iv-listen__btn:disabled,
.iv-listen__play:disabled {
  opacity: 0.4;
  cursor: default;
}

.iv-listen__btn svg {
  width: 18px;
  height: 18px;
}

.iv-listen__list {
  margin: 0.5rem 0 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--iv-bg);
  border: 1px solid var(--iv-line);
  border-radius: var(--iv-radius-lg);
}

@media (min-width: 992px) {
  .iv-listen__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.75rem;
  }

  .iv-listen__list[hidden] {
    display: none;
  }
}

.iv-listen__list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--iv-radius);
}

.iv-listen__list li.is-current {
  background: var(--iv-primary-soft);
}

.iv-listen__item {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.55rem 0.6rem;
  font-family: inherit;
  font-size: var(--iv-fs-sm);
  font-weight: 600;
  line-height: var(--iv-lh-tight);
  color: var(--iv-ink);
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
}

.iv-listen__item:hover .iv-listen__headline,
.iv-listen__list li.is-current .iv-listen__headline {
  color: var(--iv-primary);
}

.iv-listen__num {
  flex-shrink: 0;
  width: 1.6rem;
  font-weight: 800;
  color: var(--iv-primary);
  text-align: center;
}

.iv-listen__read {
  flex-shrink: 0;
  padding: 0.2rem 0.6rem;
  font-size: var(--iv-fs-xs);
  font-weight: 700;
  color: var(--iv-primary);
  border: 1px solid var(--iv-line);
  border-radius: 999px;
}

.iv-listen__read:hover {
  color: #fff;
  background: var(--iv-primary);
  border-color: var(--iv-primary);
}

.iv-listen__note {
  margin: 0.5rem 0 0;
  font-size: var(--iv-fs-xs);
  color: var(--iv-ink-3);
}

@media (max-width: 767.98px) {
  .iv-listen__bar {
    gap: 0.65rem;
    padding: 0.6rem 0.7rem;
  }

  .iv-listen__play {
    width: 44px;
    height: 44px;
  }

  .iv-listen__btn--list span,
  .iv-listen__btn[data-iv-listen-prev] {
    display: none;
  }

}

/* "TOP 10 NEWS" floating button + listen panel (template-parts/footer/listen.php). */
.iv-top10__fab {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 1036;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: 66px;
  padding: 0.55rem 0.3rem 0.5rem;
  font-family: inherit;
  color: #fff;
  background: var(--iv-dark);
  border: 0;
  border-left: 3px solid var(--iv-primary);
  border-radius: 10px 0 0 10px;
  box-shadow: -4px 6px 18px rgba(17, 20, 24, 0.28);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.16s var(--iv-ease), width 0.16s var(--iv-ease);
}

.iv-top10__fab:hover,
.iv-top10__fab:focus-visible {
  background: var(--iv-primary);
}

.iv-top10__phones {
  width: 28px;
  height: 28px;
}

.iv-top10__label {
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.03em;
  text-align: center;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.iv-top10__eq {
  display: none;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}

.iv-top10__eq i {
  width: 3px;
  height: 100%;
  background: #ff8a9a;
  border-radius: 2px;
  animation: iv-eq 0.9s ease-in-out infinite;
}

.iv-top10__eq i:nth-child(2) { animation-delay: -0.3s; }
.iv-top10__eq i:nth-child(3) { animation-delay: -0.6s; }
.iv-top10__eq i:nth-child(4) { animation-delay: -0.15s; }

.iv-top10.is-playing .iv-top10__eq {
  display: inline-flex;
}

.iv-top10.is-playing .iv-top10__fab {
  background: var(--iv-primary);
}

.iv-top10__backdrop {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(8, 10, 12, 0.35);
}

.iv-top10__backdrop[hidden] {
  display: none;
}

.iv-top10__panel {
  position: fixed;
  top: var(--wp-admin--admin-bar--height, 0px);
  right: 0;
  bottom: 0;
  z-index: 3001;
  display: flex;
  flex-direction: column;
  width: min(420px, 100vw);
  background: var(--iv-bg);
  box-shadow: -8px 0 28px rgba(17, 20, 24, 0.25);
  transform: translateX(100%);
  transition: transform 0.25s var(--iv-ease);
}

.iv-top10__panel[hidden] {
  display: none;
}

.iv-top10__panel.is-open {
  transform: none;
}

.iv-top10__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  color: #fff;
  background: linear-gradient(120deg, var(--iv-dark) 0%, var(--iv-primary-dark) 100%);
}

.iv-top10__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: var(--iv-fs-md);
  font-weight: 800;
  color: #fff;
}

.iv-top10__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.iv-top10__close:hover,
.iv-top10__close:focus-visible {
  background: rgba(255, 255, 255, 0.28);
}

.iv-top10__close svg {
  width: 20px;
  height: 20px;
}

.iv-top10__player {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  color: #fff;
  background: var(--iv-dark-2);
}

.iv-top10__now {
  flex: 1;
  min-width: 0;
}

.iv-top10__now p {
  display: -webkit-box;
  margin: 0.1rem 0 0;
  overflow: hidden;
  font-size: var(--iv-fs-sm);
  font-weight: 600;
  line-height: var(--iv-lh-tight);
  color: rgba(255, 255, 255, 0.9);
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.iv-top10__ctrls {
  display: flex;
  gap: 0.35rem;
}

.iv-top10__list {
  flex: 1;
  margin: 0;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
}

/* (The panel list is always one column.) */
@media (min-width: 992px) {
  .iv-top10__list {
    display: block;
  }
}

.iv-top10__list li {
  border-bottom: 1px solid var(--iv-line-2);
}

.iv-top10-open {
  overflow: hidden;
}

@media (max-width: 767.98px) {
  .iv-top10__fab {
    top: auto;
    bottom: calc(var(--iv-tabbar-h) + env(safe-area-inset-bottom) + 4.25rem);
    width: 56px;
    padding: 0.45rem 0.25rem;
    transform: none;
  }

  .iv-top10__phones {
    width: 22px;
    height: 22px;
  }

  .iv-top10__label {
    font-size: 0.6rem;
  }
}

@media print {
  .iv-listen,
  .iv-top10 { display: none !important; }
}

/* Back to top (footer.php). Sits above the phone tab bar. */
.iv-totop {
  position: fixed;
  right: 1.25rem;
  bottom: 1.5rem;
  z-index: 1035;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  color: #fff;
  background: var(--iv-primary);
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(17, 20, 24, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.2s var(--iv-ease), transform 0.2s var(--iv-ease), visibility 0.2s, background 0.16s var(--iv-ease);
}

.iv-totop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.iv-totop:hover,
.iv-totop:focus-visible {
  color: #fff;
  background: var(--iv-primary-dark);
}

.iv-totop svg {
  width: 24px;
  height: 24px;
}

@media (max-width: 767.98px) {
  .iv-totop {
    right: 0.9rem;
    bottom: calc(var(--iv-tabbar-h) + env(safe-area-inset-bottom) + 0.9rem);
    width: 42px;
    height: 42px;
  }
}

@media print {
  .iv-totop { display: none !important; }
}

.iv-tabbar {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: var(--iv-z-tabbar);
  background: var(--iv-bg);
  border-top: 1px solid var(--iv-line);
  box-shadow: 0 -2px 12px rgba(17, 20, 24, 0.08);
  padding-bottom: env(safe-area-inset-bottom);
}

.iv-tabbar__list {
  display: flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.iv-tabbar__item {
  flex: 1;
}

.iv-tabbar__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  height: var(--iv-tabbar-h);
  font-size: 10px;
  font-weight: 600;
  color: var(--iv-ink-3);
}

.iv-tabbar__link.is-active,
.iv-tabbar__link:hover {
  color: var(--iv-primary);
}

.iv-tabbar__icon {
  width: 19px;
  height: 19px;
  fill: currentColor;
}

/* Offcanvas menu (mobile) */
.iv-offcanvas .offcanvas-header {
  background: var(--iv-primary);
  color: #fff;
}

.iv-offcanvas .btn-close {
  filter: invert(1) grayscale(1) brightness(2);
}

.iv-offcanvas__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.iv-offcanvas__list .iv-nav__link {
  padding: 0.75rem 0;
  color: var(--iv-ink);
  border-bottom: 1px solid var(--iv-line-2);
}

.iv-offcanvas__list .iv-nav__link:hover {
  background: transparent;
  color: var(--iv-primary);
}

.iv-offcanvas__list .dropdown-menu {
  position: static !important;
  transform: none !important;
  border: 0;
  box-shadow: none;
  padding-inline-start: 0.75rem;
}


/* ==========================================================================
   30. Utilities & motion
   ========================================================================== */

.iv-line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.iv-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.iv-text-muted { color: var(--iv-ink-3); }
.iv-text-brand { color: var(--iv-primary); }
.iv-bg-soft    { background: var(--iv-bg-2); }

.iv-scroll-x {
  display: flex;
  gap: var(--iv-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.iv-scroll-x::-webkit-scrollbar {
  display: none;
}

.iv-scroll-x > * {
  scroll-snap-align: start;
  flex: 0 0 78%;
}


/* ==========================================================================
   App features: header icon buttons, dark mode, install banner, toast,
   next story (inc/app.php, inc/push.php, inc/next-story.php)
   ========================================================================== */

/* Round icon buttons in the header (dark mode, alerts bell). */
.iv-iconbtn {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--iv-line);
  border-radius: 50%;
  background: var(--iv-bg);
  color: var(--iv-ink-2);
  cursor: pointer;
  transition: color 0.16s var(--iv-ease), border-color 0.16s var(--iv-ease), background 0.16s var(--iv-ease);
}

.iv-iconbtn[hidden] {
  display: none;
}

.iv-iconbtn:hover,
.iv-iconbtn:focus-visible {
  color: var(--iv-primary);
  border-color: var(--iv-primary);
}

.iv-iconbtn svg {
  width: 19px;
  height: 19px;
}

.iv-theme-toggle__sun {
  display: none;
}

html[data-theme="dark"] .iv-theme-toggle__moon {
  display: none;
}

html[data-theme="dark"] .iv-theme-toggle__sun {
  display: block;
}

.iv-bell__dot {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--iv-bg);
  border-radius: 50%;
  background: var(--iv-primary);
}

.iv-bell.is-on {
  color: var(--iv-primary);
  border-color: var(--iv-primary);
  background: var(--iv-primary-soft);
}

.iv-bell.is-on .iv-bell__dot {
  background: var(--iv-accent);
}

/* --------------------------------------------------------------------------
   Dark mode: the design tokens flip, everything built on them follows.
   -------------------------------------------------------------------------- */

html[data-theme="dark"] {
  color-scheme: dark;
  --iv-ink: #e8eaed;
  --iv-ink-2: #c4c9d1;
  --iv-ink-3: #98a1b0;
  --iv-line: #2c323b;
  --iv-line-2: #232930;
  --iv-bg: #171b21;
  --iv-bg-2: #0f1216;
  --iv-bg-3: #20262e;
  --iv-primary-soft: rgba(229, 57, 75, 0.16);
  --iv-accent-soft: rgba(30, 170, 90, 0.16);
  --iv-dark: #0b0d10;
  --iv-dark-2: #1b2027;
  --iv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --iv-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  --iv-shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.55);
  --bs-body-bg: #0f1216;
  --bs-body-color: #e8eaed;
}

/* No colour transitions while switching (they would flicker). */
html.iv-theme-switching *,
html.iv-theme-switching *::before,
html.iv-theme-switching *::after {
  transition: none !important;
}

/* The logo has dark lettering on a transparent background: give it a card. */
html[data-theme="dark"] .iv-brand__logo,
html[data-theme="dark"] .iv-offcanvas .custom-logo,
html[data-theme="dark"] .offcanvas .iv-brand__logo {
  padding: 3px 6px;
  border-radius: 6px;
  background: #fff;
}

/* Red text on near-black needs a lighter red to stay readable. */
html[data-theme="dark"] .iv-card__cat,
html[data-theme="dark"] .iv-article__body a {
  color: #ff6b7d;
}

html[data-theme="dark"] .iv-article__body,
html[data-theme="dark"] .iv-article__summary {
  color: var(--iv-ink);
}

html[data-theme="dark"] .iv-article__body blockquote {
  border-color: var(--iv-primary);
  background: var(--iv-bg-3);
}

html[data-theme="dark"] .iv-article__body table td,
html[data-theme="dark"] .iv-article__body table th {
  border-color: var(--iv-line);
}

/* Rashifal panel: night version of the blue-grey panel and its wheel. */
html[data-theme="dark"] .iv-horoscope {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='460' viewBox='0 0 460 460'%3E%3Cg fill='none' stroke='%23394358' stroke-width='1.6' opacity='.6'%3E%3Ccircle cx='230' cy='230' r='220'/%3E%3Ccircle cx='230' cy='230' r='165'/%3E%3Ccircle cx='230' cy='230' r='105'/%3E%3Ccircle cx='230' cy='230' r='62'/%3E%3Cline x1='289.9' y1='246.0' x2='442.5' y2='286.9'/%3E%3Cline x1='273.8' y1='273.8' x2='385.6' y2='385.6'/%3E%3Cline x1='246.0' y1='289.9' x2='286.9' y2='442.5'/%3E%3Cline x1='214.0' y1='289.9' x2='173.1' y2='442.5'/%3E%3Cline x1='186.2' y1='273.8' x2='74.4' y2='385.6'/%3E%3Cline x1='170.1' y1='246.0' x2='17.5' y2='286.9'/%3E%3Cline x1='170.1' y1='214.0' x2='17.5' y2='173.1'/%3E%3Cline x1='186.2' y1='186.2' x2='74.4' y2='74.4'/%3E%3Cline x1='214.0' y1='170.1' x2='173.1' y2='17.5'/%3E%3Cline x1='246.0' y1='170.1' x2='286.9' y2='17.5'/%3E%3Cline x1='273.8' y1='186.2' x2='385.6' y2='74.4'/%3E%3Cline x1='289.9' y1='214.0' x2='442.5' y2='173.1'/%3E%3Cpolygon points='230.0,395.0 87.1,147.5 372.9,147.5'/%3E%3Cpolygon points='230.0,65.0 372.9,312.5 87.1,312.5'/%3E%3C/g%3E%3Cg fill='%23394358' opacity='.6'%3E%3Ccircle cx='422.5' cy='230.0' r='4.5'/%3E%3Ccircle cx='396.7' cy='326.2' r='4.5'/%3E%3Ccircle cx='326.2' cy='396.7' r='4.5'/%3E%3Ccircle cx='230.0' cy='422.5' r='4.5'/%3E%3Ccircle cx='133.8' cy='396.7' r='4.5'/%3E%3Ccircle cx='63.3' cy='326.2' r='4.5'/%3E%3Ccircle cx='37.5' cy='230.0' r='4.5'/%3E%3Ccircle cx='63.3' cy='133.7' r='4.5'/%3E%3Ccircle cx='133.7' cy='63.3' r='4.5'/%3E%3Ccircle cx='230.0' cy='37.5' r='4.5'/%3E%3Ccircle cx='326.2' cy='63.3' r='4.5'/%3E%3Ccircle cx='396.7' cy='133.7' r='4.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat center -190px / 460px 460px,
    linear-gradient(180deg, #161c27 0%, #1a2130 100%);
}

html[data-theme="dark"] .iv-horoscope > .row {
  border-top-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .iv-zodiac__item:hover,
html[data-theme="dark"] .iv-zodiac__item:focus-visible,
html[data-theme="dark"] .iv-zodiac__item.is-active {
  background: rgba(255, 255, 255, 0.06);
}

/* Share buttons: X's black and the grey "copy" chip vanish on a dark page. */
html[data-theme="dark"] .iv-share__btn--twitter {
  background: #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

html[data-theme="dark"] .iv-score__flag {
  background: #3d4653;
}

/* Photos a touch softer at night. */
html[data-theme="dark"] .iv-article__image,
html[data-theme="dark"] .iv-card__img {
  filter: brightness(0.92);
}

/* Search box, forms. */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  color: var(--iv-ink);
}

html[data-theme="dark"] ::placeholder {
  color: var(--iv-ink-3);
}

/* --------------------------------------------------------------------------
   "Install the app" card
   -------------------------------------------------------------------------- */

.iv-install {
  position: fixed;
  z-index: 3100;
  left: 12px;
  right: 12px;
  bottom: calc(var(--iv-tabbar-h) + env(safe-area-inset-bottom) + 10px);
  overflow: hidden;
  color: var(--iv-ink);
  background: var(--iv-bg);
  border: 1px solid var(--iv-line);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(17, 20, 24, 0.22), 0 2px 6px rgba(17, 20, 24, 0.08);
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transform-origin: bottom left;
  transition: opacity 0.28s var(--iv-ease), transform 0.28s var(--iv-ease);
}

.iv-install[hidden] {
  display: none;
}

.iv-install.is-visible {
  opacity: 1;
  transform: none;
}

/* Red head with the app icon. */
.iv-install__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 3rem 1rem 1rem;
  color: #fff;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(135deg, var(--iv-primary) 0%, var(--iv-primary-dark) 100%);
}

.iv-install__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 6px 14px rgba(0, 0, 0, 0.25);
}

.iv-install__title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.25;
}

.iv-install__sub {
  margin: 0.15rem 0 0;
  font-size: var(--iv-fs-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.86);
}

.iv-install__close {
  position: absolute;
  z-index: 1;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  cursor: pointer;
  transition: background 0.16s var(--iv-ease);
}

.iv-install__close:hover,
.iv-install__close:focus-visible {
  background: rgba(255, 255, 255, 0.32);
}

.iv-install__close svg {
  width: 16px;
  height: 16px;
}

/* Three small reasons, as chips. */
.iv-install__perks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0.9rem 1rem 0.2rem;
  list-style: none;
}

.iv-install__perks[hidden],
.iv-install__steps[hidden],
.iv-install__steps-text[hidden],
.iv-install__go[hidden] {
  display: none;
}

.iv-install__perks li {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.65rem 0.3rem 0.5rem;
  font-size: var(--iv-fs-xs);
  font-weight: 700;
  color: var(--iv-ink-2);
  background: var(--iv-bg-2);
  border: 1px solid var(--iv-line);
  border-radius: var(--iv-radius-pill);
}

.iv-install__perks svg {
  width: 14px;
  height: 14px;
  color: var(--iv-primary);
}

/* iPhone steps / browser-menu hint. */
.iv-install__steps {
  margin: 0;
  padding: 0.9rem 1rem 0.1rem 2.2rem;
  font-size: var(--iv-fs-sm);
  font-weight: 600;
  line-height: 1.6;
  color: var(--iv-ink-2);
}

.iv-install__steps li + li {
  margin-top: 0.25rem;
}

.iv-install__key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-inline: 0.15rem;
  vertical-align: -6px;
  color: #1a73e8;
  background: var(--iv-bg-2);
  border: 1px solid var(--iv-line);
  border-radius: 6px;
}

.iv-install__key svg {
  width: 15px;
  height: 15px;
}

.iv-install__steps-text {
  margin: 0;
  padding: 0.9rem 1rem 0.1rem;
  font-size: var(--iv-fs-sm);
  font-weight: 600;
  line-height: 1.55;
  color: var(--iv-ink-2);
}

.iv-install__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.85rem 1rem 1rem;
}

.iv-install__later {
  padding: 0.6rem 0.9rem;
  font: inherit;
  font-size: var(--iv-fs-sm);
  font-weight: 700;
  color: var(--iv-ink-3);
  background: transparent;
  border: 0;
  border-radius: var(--iv-radius-pill);
  cursor: pointer;
}

.iv-install__later:hover,
.iv-install__later:focus-visible {
  color: var(--iv-ink);
  background: var(--iv-bg-2);
}

.iv-install__go {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1.3rem;
  font: inherit;
  font-size: var(--iv-fs-base);
  font-weight: 800;
  color: #fff;
  background: var(--iv-primary);
  border: 0;
  border-radius: var(--iv-radius-pill);
  box-shadow: 0 6px 16px rgba(200, 16, 46, 0.32);
  cursor: pointer;
  transition: background 0.16s var(--iv-ease), transform 0.16s var(--iv-ease);
}

.iv-install__go:hover,
.iv-install__go:focus-visible {
  background: var(--iv-primary-dark);
  transform: translateY(-1px);
}

.iv-install__go svg {
  width: 18px;
  height: 18px;
}

@media (min-width: 768px) {
  .iv-install {
    left: 20px;
    right: auto;
    bottom: 20px;
    width: 380px;
  }
}

/* --------------------------------------------------------------------------
   "Get the app" box in the footer
   -------------------------------------------------------------------------- */

.iv-footer__app {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.65rem 0.6rem 0.6rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--iv-f-line);
  border-radius: 14px;
}

.iv-footer__app[hidden] {
  display: none;
}

.iv-footer--light .iv-footer__app {
  background: var(--iv-bg);
}

.iv-footer__app-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85);
}

.iv-footer__app-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.iv-footer__app-text strong {
  font-size: var(--iv-fs-base);
  font-weight: 800;
  color: var(--iv-f-strong);
}

.iv-footer__app-text span {
  font-size: var(--iv-fs-xs);
  color: var(--iv-f-fg-2);
}

.iv-footer__app-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-inline-start: 0.4rem;
}

.iv-footer__app-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  font: inherit;
  font-size: var(--iv-fs-sm);
  font-weight: 800;
  white-space: nowrap;
  color: var(--iv-primary);
  background: #fff;
  border: 0;
  border-radius: var(--iv-radius-pill);
  cursor: pointer;
  transition: transform 0.16s var(--iv-ease), box-shadow 0.16s var(--iv-ease);
}

.iv-footer__app-btn:hover,
.iv-footer__app-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.iv-footer--light .iv-footer__app-btn {
  color: #fff;
  background: var(--iv-primary);
}

.iv-footer__app-btn svg {
  width: 16px;
  height: 16px;
}

.iv-footer .iv-footer__app-play {
  font-size: var(--iv-fs-xs);
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .iv-footer__app {
    order: 3;
    flex-wrap: wrap;
    width: 100%;
  }

  .iv-footer__app-text {
    flex: 1;
  }

  .iv-footer__app-actions {
    width: 100%;
    margin-inline-start: 0;
  }

  .iv-footer__app-btn {
    flex: 1;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   Toast (bell messages)
   -------------------------------------------------------------------------- */

.iv-toast {
  position: fixed;
  z-index: 3200;
  left: 50%;
  bottom: calc(var(--iv-tabbar-h) + env(safe-area-inset-bottom) + 16px);
  max-width: min(92vw, 420px);
  padding: 0.7rem 1rem;
  font-size: var(--iv-fs-sm);
  font-weight: 600;
  line-height: 1.45;
  color: #fff;
  background: #1c2128;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition: opacity 0.2s var(--iv-ease), transform 0.2s var(--iv-ease);
}

.iv-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (min-width: 768px) {
  .iv-toast {
    bottom: 28px;
  }
}

/* --------------------------------------------------------------------------
   Next story
   -------------------------------------------------------------------------- */

.iv-next-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 2rem 0 1.25rem;
}

.iv-next-divider::before,
.iv-next-divider::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--iv-line);
}

.iv-next-divider span {
  padding: 0.3rem 0.9rem;
  font-size: var(--iv-fs-sm);
  font-weight: 800;
  color: #fff;
  background: var(--iv-primary);
  border-radius: var(--iv-radius-pill);
}

.iv-article--next .iv-article__title a {
  color: inherit;
}

.iv-next-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1.5rem 0;
  font-size: var(--iv-fs-sm);
  font-weight: 600;
  color: var(--iv-ink-3);
}

.iv-next-loading[hidden] {
  display: none;
}

.iv-next-loading__spin {
  width: 18px;
  height: 18px;
  border: 2px solid var(--iv-line);
  border-top-color: var(--iv-primary);
  border-radius: 50%;
  animation: iv-spin 0.8s linear infinite;
}

@keyframes iv-spin {
  to { transform: rotate(360deg); }
}

.iv-next-sentinel {
  height: 1px;
}

@media print {
  .iv-iconbtn,
  .iv-install,
  .iv-toast,
  .iv-next-divider,
  .iv-next-loading,
  .iv-article--next {
    display: none !important;
  }
}


/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1199.98px) {
  .iv-zodiac {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  :root {
    --iv-section-y: 1.75rem;
  }

  .iv-burger {
    display: inline-flex;
  }

  .iv-nav {
    display: none;
  }

  .iv-masthead__inner {
    gap: 0.75rem;
  }

  /* Tablets: burger, logo, a narrower search box, Live TV on the right. */
  .iv-masthead__inner {
    min-height: 0;
    padding-block: 0.5rem;
  }

  .iv-search {
    max-width: none;
  }

  .iv-masthead__actions {
    margin-inline-start: auto;
  }

  .iv-brand__logo {
    max-height: 56px;
  }

  .iv-card__title--lead {
    font-size: var(--iv-fs-lg);
  }

  .iv-toplist,
  .iv-rail__block,
  .iv-column {
    margin-top: var(--iv-gap-lg);
  }
}

@media (max-width: 767.98px) {
  :root {
    --iv-section-y: 1.5rem;
  }

  .iv-body {
    padding-bottom: calc(var(--iv-tabbar-h) + env(safe-area-inset-bottom));
  }

  .iv-tabbar {
    display: block;
  }

  /*
   * Phones: no search box in the header (the bottom tab bar has a "खोजें"
   * button), so the header is one tidy row: burger + logo on the left,
   * Live TV on the right.
   */
  .iv-masthead .iv-search {
    display: none;
  }

  .iv-masthead__inner {
    justify-content: flex-start;
  }

  .iv-brand__logo {
    max-height: 46px;
  }

  .iv-masthead__actions .iv-btn {
    padding: 0.4rem 0.75rem;
    font-size: var(--iv-fs-sm);
  }

  .iv-masthead__actions {
    gap: 0.4rem;
  }

  .iv-iconbtn {
    width: 34px;
    height: 34px;
  }

  .iv-iconbtn svg {
    width: 17px;
    height: 17px;
  }

  .iv-bell__dot {
    top: 5px;
    right: 6px;
  }

  .iv-topbar__right .iv-social {
    display: none;
  }

  .iv-article {
    padding: 1.1rem;
    border-radius: 0;
    border-inline: 0;
  }

  .iv-card--lead .iv-card__overlay {
    padding: 2rem 1rem 1rem;
  }

  .iv-section__title {
    font-size: var(--iv-fs-base);
    padding: 0.35rem 0.8rem;
  }

  .iv-appcta__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 575.98px) {
  .iv-zodiac {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .iv-shell {
    padding-inline: 12px;
  }
}


/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .iv-topbar,
  .iv-nav,
  .iv-ticker,
  .iv-tabbar,
  .iv-ads,
  .iv-share,
  .iv-footer,
  .iv-sidebar {
    display: none !important;
  }

  .iv-article {
    border: 0;
    padding: 0;
  }
}


/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .iv-ticker__track {
    animation: none;
  }
}