/* ===== Base ===== */
:root {
  /* Figma: art is 1200px tall on a 1440px frame */
  --hero-art-height: min(1200px, 83.33vw);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  position: relative;
  background: #000;
  color: #fff;
  font-family: "Noto Sans", Arial, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}
.tablet-device, .mobile-device, .desktop-device {
    overflow: hidden;
}
p{
  margin-top: 0;
  margin-bottom: 0;
}
img {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}
div.top-head-body.top-head-body{ background-color: #000000; border-bottom: 0px;}
.top-hed-menu ul li:nth-child(1) a{color: #ebebeb;}
.rest_arrow{background-color: #212121;} .rest_arrow svg {fill: #f2f2f2;}
.currenttimestamp.currenttimestamp{color: #9d9d9d;}
.ssoLoginMain span.sso_image img{top: 0;}
.gMenuOpen.gMenuOpen{background-color: #151515;top: 31px;}
.gMenuOpen.gMenuOpen.openGnav{border-bottom: 1px solid #000;}
@media (max-width: 1024px) {.top-hed-menu.top-hed-menu ul {background: #161616;}}
footer{position: relative;}
.page {
  max-width: 1240px;
  margin: 0 auto;
}
.topAd {
z-index :1;
position :relative;
background-color: transparent;
margin-bottom: 0px;
}
.topAd .adtext{
  color: #bcbcbc;
}
.currenttimestamp {color :#000; font-weight: 500;}
/* ===== Full-bleed background art =====
   .hero is unpositioned on desktop, so these absolute layers resolve
   against <body> and span the full screen width from the very top. */
.hero__art {
  position: absolute;
  top:0px;
  left: 0;
  width: 100%;
  height: var(--hero-art-height);
  object-fit: cover;
  /* Source is 9:16 portrait; this keeps the figure in frame in a wide box */
  object-position: center 38%;
  z-index: 0;
  pointer-events: none;
}
.hero__art:has(img){
  top:20px;
}

.hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--hero-art-height);
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.88) 26%, rgba(0,0,0,0.5) 46%, rgba(0,0,0,0.12) 70%, rgba(0,0,0,0) 88%),
    linear-gradient(180deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.15) 18%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0.9) 62%, #000 70%);
}

/* ===== Top bar (y=40, h=63) ===== */
.topbar {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 0px 0px;
}

.topbar .icon-btn img, .mc-logo-container  .icon-btn img {
  width: 13px;
  transition: all 0.3s linear;
}
.topbar .icon-btn:hover img, .mc-logo-container  .icon-btn:hover img { transform: translateX(-4px);}

.topbar .logo {
  height: 63px;
  width: auto;
}

/* Avatar removed, but its slot stays reserved so the logo keeps
   the position it has in the design. */
.topbar::after {
  content: "";
  width: 40px;
}

/* ===== Ad slots (top y=130, bottom y=1907) ===== */
.ad-slot {
  position: relative;
  z-index: 1;
  max-width: 970px;
  height: 90px;
  background: #eee;
  color: #666;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 4px;
}

.ad-slot--top {
  margin: 27px auto 0;
}

.ad-slot--bottom {
  margin: 70px auto 121px;
}

.ad-slot__label--mobile {
  display: none;
}

/* ===== Hero content (y=223, w=656, h=327) ===== */
.hero {
  padding-top: 3px;
}

.hero__content {
  position: relative;
  z-index: 1;
  width: 820px;
  max-width: 100%;
}

.hero__title {
  font-size: 64px;
  font-weight: 700;
  line-height: 75px;
  padding-bottom: 10px;
}

.hero__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border: 0.5px solid #fff;
  border-radius: 3px;
  font-size: 16px;
  line-height: 16px;
  white-space: nowrap;
}

.tag--yellow { background: rgba(255, 204, 41, 0.5); }
.tag--blue { background: rgba(41, 216, 255, 0.5); }

.hero__info {
  font-size: 20px;
  font-weight: 500;
}

.hero__desc {
  font-size: 18px;
  line-height: 28px;
  margin-top: 20px;
}

.hero__actions {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 50px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 16px;
  border-radius: 24px;
  font-size: 16px;
  line-height: 27px;
  font-weight: 700;
  letter-spacing: 0.22px;
  white-space: nowrap;
  transition: background-color 0.2s ease;
  min-width: 175px;
  text-transform: uppercase;
}

.btn--primary {
  background: #c00;
  color: #fff;
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: #a00;
}

.btn--primary img {
  width: 20px;
  height: 20px;
}

.btn--ghost {
  backdrop-filter: blur(12px);
  border: 0.5px solid #fff;
  color: #fff;
  text-transform: uppercase;
  min-width: 175px;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.16);
}

/* ===== Popular this week (carousel) ===== */
.pop {
  position: relative;
  z-index: 1;
  padding-top: 120px;
}

.pop__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.section-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 32px;
}

.see-all {
  position: relative;
  color: #fff;
  font-size: 14px;
  line-height: 24px;
  font-weight: 600;
  text-decoration: none;
  padding-bottom: 5px;
}

.see-all::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #c00 0 4px, transparent 4px 6px, #c00 6px 26px);
  transition: all 0.1s linear; 
}
.see-all:hover::after{
  width:100%;
  transition: all 0.3s linear; 
}

/* ponytail: native overflow scroll + scroll-snap. No JS, no carousel lib.
   Wheel/trackpad/drag scroll it; cards are links so Tab scrolls them into view. */
.pop__track {
  display: flex;
  gap: 40px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  /* Scroll container clips at its own edges, so the hover scale needs padding
     to grow into — pulled back out with a matching negative margin. */
  padding: 10px;
  margin-inline: -10px;
  scroll-padding-inline: 10px;
  scrollbar-width: none;
}

.pop__track::-webkit-scrollbar {
  display: none;
}

.pop-card {
  flex: 0 0 158px;
  scroll-snap-align: start;
  color: inherit;
  text-decoration: none;
}

.pop-card:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 20px;
}

/* ===== Free-trial CTA banner (1240x228) ===== */
.trial {
  position: relative;
  z-index: 1;
  margin-top: 60px;
  /* 41 + 146 (text) + 41 = 228 in the design; grows if the copy wraps longer */
  min-height: 228px;
  border-radius: 12px;
  overflow: hidden;
  background: #0f0f0f;
  display: flex;
  align-items: center;
  gap: 100px;
  padding: 41px 80px;
}

/* Mosaic is 1646x395 — larger than the banner, centred and clipped */
.trial__mosaic {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  margin-left: 25px;
  width: 1646px;
  height: 395px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.trial__row {
  display: flex;
  gap: 20px;
  flex: 1 0 0;
  min-height: 0;
}

.trial__row img {
  flex: 1 0 0;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/* Figma's last stop is rgba(229,0,0,0) at 169% — a transparent RED. Figma
   interpolates in straight alpha so the tail reads red; CSS interpolates
   premultiplied, where a 0-alpha stop adds no colour. These explicit stops
   sample that straight-alpha ramp so the red wash survives. */
.trial__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    #0f0f0f 2.4%,
    rgba(20, 15, 15, 0.975) 25.5%,
    rgba(34, 14, 14, 0.91) 46.7%,
    rgba(55, 13, 13, 0.81) 60%,
    rgba(71, 11, 11, 0.74) 70%,
    rgba(87, 10, 10, 0.66) 80%,
    rgba(103, 9, 9, 0.59) 90%,
    rgba(119, 8, 8, 0.51) 100%);
}

/* 736px at the 1240 design width, but allowed to shrink so the button
   never gets pushed out on narrower desktops */
.trial__text {
  position: relative;
  flex: 0 1 736px;
  min-width: 0;
}

.trial__heading {
  font-size: 48px;
  line-height: 1.5;
  font-weight: 700;
}

.trial__desc {
  margin-top: 14px;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 400;
}

.trial__btn {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 22px 44px;
  border-radius: 68px;
  background: #e50000;
  color: #fff;
  font-size: 22px;
  line-height: 1.5;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.trial__btn:hover,
.trial__btn:focus-visible {
  background: #c00;
}

/* ===== Plan picker (1440x570 red band) =====
   Base card = the design's 2nd card (382x400); the 1st card is drawn in its
   hover state at 408x427, i.e. the same card scaled by 1.0686. */
.plans {
  position: relative;
  z-index: 1;
  margin-top: 60px;
  /* full-bleed red band out of the padded .page */
  margin-inline: calc(50% - 50vw);
  padding: 40px calc(50vw - 50%);
  min-height: 480px;
  background: #c00;
  text-align: center;
}

.plans__title {
  font-size: 34px;
  line-height: 1.445;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}

.plans__group {
  margin: 27px auto 0;
  max-width: 825px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* A hovered card grows 13.1px per side; the design shows 9px still visible
     between the cards at that point, so the resting gap is 9 + 13.1. */
  gap: 22.08px;
}

.plan-box {
  flex: 0 1 382px;
  min-width: 0;
  height:245px;
  padding: 25.27px;
  border-radius: 18.72px;
  background: #fff;
  color: #000;
  text-align: left;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.25s ease;
}

.plan-box:hover,
.plan-box:focus-within {
  transform: scale(1.0686);
}

.plan-box__label {
  font-size: 13px;
    line-height: 19px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 4px;
    background-color: #009e06;
    color: #fff;
    padding: 5px 12px;
    width: fit-content;
    border-radius: 5px;
}
.plan-box__label:empty{ background-color: transparent;}
.plan-box__name {
  font-size: 24.43px;
  line-height: 35.38px;
  font-weight: 600;
}

.plan-box__sub {
  margin-top: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  font-size: 16.3px;
  line-height: 22.95px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
}

.plan-box__list {
  margin: 18.7px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 9.36px;
  list-style: disc;
}

.plan-box__list li {
  font-size: 13.1px;
  line-height: 20.96px;
  font-weight: 700;
}

/* Strip is full-bleed inside the padded card */
.plan-box__strip {
  margin: auto -25.27px 0;
  padding: 13px 25.27px;
  background: #e4e4e4;
  font-size: 13.1px;
  line-height: 20.96px;
  font-weight: 700;
}

.plan-box__foot {
  margin-top: 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.withad .plan-box__foot {
  margin-top:38px
}

.plan-box__price {
  display: flex;
  align-items: baseline;
}

.plan-box__amount {
  font-size: 37.4px;
  line-height: 30.32px;
  font-weight: 700;
}
.planDisclaimer {
  font-size: 15px;
  color: #fff;
  padding-top: 20px;
  text-align: center;
}
.planDisclaimer a{ color:#fff; text-decoration: underline dotted #fff; text-underline-offset: 3px;}
.planDisclaimer p{line-height: 1.2;}
.planDisclaimer button.cta{ text-decoration: underline dotted #fff; text-underline-offset: 3px;}
/* The paid plan's price is emphasised in the design */
.plan-box--primary .plan-box__amount {
  font-size: 37.4px;
  line-height: 30.32px;
}

.plan-box__per {
  font-size: 13.1px;
  line-height: 17.69px;
  color: rgba(0, 0, 0, 0.6);
}

.plan-box__btn {
  padding: 7.49px 14.97px;
  border-radius: 22.46px;
  background: #c00;
  color: #fff;
  font-size: 16.85px;
  font-weight: 700;
  letter-spacing: 0.337px;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.plan-box__btn:empty{ display: none;}

.plan-box__btn:hover,
.plan-box__btn:focus-visible {
  background: #a00;
}

.premplan-badg{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mngtext a{ font-size:15px; color:#c00; text-decoration:none;font-weight: 700;}
/* ===== Episodes ===== */
.episodes {
  position: relative;
  z-index: 1;
  padding-top: 60px;
}

.episodes__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 30px;
}

.episodes__title {
  font-size: 22px;
  font-weight: 800;
  line-height: 32px;
}

.tab-group {
  display: flex;
  gap: 12px;
}

.tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 6px 16px;
  border-radius: 28px;
  background: #1b1b1b;
  border: 0.5px solid #3d3d3d;
  color: #fff;
  font-size: 12px;
}

.tab img {
  width: 16px;
  height: 16px;
}

.tab--active {
  background: rgba(204, 0, 0, 0.4);
  border: 0.5px solid #c00;
  border-radius: 44px;
}

.tab--locked {
  color: #626262;
}

/* ===== Episode grid (6 cols, 158x210 thumbs) ===== */
.episode-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  column-gap: 58.6px;
  row-gap: 50px;
  margin-bottom:60px;
}

.episode-card {
  display: flex;
  flex-direction: column;
}



.episode-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 158 / 210;
  border-radius: 20px;
  overflow: hidden;
  background: #222;
  border: 1px solid transparent;
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.episode-card > :not(.episode-card__thumb) {
  transition: transform 0.25s ease;
}

.episode-card:hover .episode-card__thumb,
.pop-card:focus-visible .episode-card__thumb {
  transform: scale(1.09);
  border-color: #fff;
}

/* Thumb grows 9.45px downward (210 * 0.09 / 2); shift the text by the same
   amount so the 10px gap survives the hover, as in the design. */
.episode-card:hover > :not(.episode-card__thumb),
.pop-card:focus-visible > :not(.episode-card__thumb) {
  transform: translateY(9.45px);
}

.episode-card__thumb img:not(.lock-icon) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.episode-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.lock-icon {
  position: absolute;
  top: 88px;
  left: calc(50% - 18px);
  width: 36px;
  height: 36px;
}

.duration-badge {
  position: absolute;
  left: 6px;
  bottom: 16px;
  padding: 3px 10px;
  border-radius: 4px;
  background: rgba(21, 21, 21, 0.6);
  backdrop-filter: blur(4px);
  font-size: 10px;
  line-height: 18px;
  letter-spacing: 0.5px;
}

.progress-bar {
  position: absolute;
  left: 16px;
  right: 15px;
  bottom: 0;
  height: 2px;
  background: #979696;
}

.progress-bar__track {
  height: 100%;
  background: #ff0404;
}

.episode-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  margin-top: 10px;
}

.episode-card__ep {
  font-size: 12px;
  font-weight: 600;
  line-height: 12px;
  margin-top:12px;
}

.episode-card__desc {
  font-size: 12px;
  line-height: 18px;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.load-more-wrap {
  display: flex;
  justify-content: center;
}

.load-more-wrap .btn--ghost {
  font-size: 18px;
  line-height: 25px;
  font-weight: 400;
  letter-spacing: 0.36px;
}

.mobile-hide {
  display: flex;
}

/* ===== Paywall page (login-adfree-subcrebtion) ===== */
.paywall {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  /* topbar ends at 103; panel starts at 140 in the design */
  padding-top: 37px;
}

.paywall__panel {
  position: relative;
  width: 360px;
  height: 637px;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}

.paywall__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(5.5px);
  /* blur samples past the edge, so grow the layer to avoid soft corners */
  scale: 1.06;
}

.paywall__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 31%),
    linear-gradient(180deg, rgba(0,0,0,0) 56%, rgba(0,0,0,0.6) 100%),
    rgba(0, 0, 0, 0.6);
}

.paywall__content {
  position: relative;
  height: 100%;
  padding: 0px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 100%;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #4d4d4d transparent;
}

.series-login-container .paywall__content , .series-subscription-container .paywall__content{
    justify-content: center;
}

.plan__amount.free-text {
    font-size: 28px;
}

.paywall__lock { width: 38px; height: 38px; }

.paywall__title {
  margin-top: 4px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.paywall__title h1 {
    font-size: 16px;
    line-height: 23px;
    font-weight: 600;
}
.paywall__title h1 span{display: block;}
.sv-plan-header { font-size: 18px; line-height: 22px; font-weight: 700;    margin-bottom: 10px; }
.paywall__title p {
  font-size: 10px;
  line-height: 16px;
  font-weight: 400;
}

.plan-card {
  width: 300px;
  margin-top: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: rgba(26, 26, 26, 0.5);
  border: 1px solid #262626;
  border-radius: 12px;
}

.plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.plan--divided {
  padding-bottom: 20px;
  border-bottom: 1px solid #b6b6b6;
}

.plan__heading {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
}

.plan__sub {
  margin-top: 4px;
  font-size: 16px;
  line-height: 22px;
  color: #999;
  word-wrap: anywhere;
}

.plan__amount { font-size: 34px; line-height: 33px; font-weight: 600; display: block; text-align: center; }

.plan__amount--free {
  font-size: 30px;
  line-height: 20px;
}
.plan-card ul li { font-size: 14px; line-height: 22px; font-weight: 400; color: #fff; }
.plan-card ul { margin-top: 8px; list-style: disc; padding-left: 24px; }
.plan__unit {
    font-size: 12px;
    line-height: 15px;
    font-weight: 500;
    color: #999;
    text-align: center;
    width: 100%;
    display: block;
    margin-top: 5px;
}
.sv-download-headline { line-height: 14px; font-size: 12px; }
.plan__btn { margin-top: 15px; width: 100%; padding: 8px 24px; border-radius: 8px; font-size: 14px; line-height: 18px; color: #fff; transition: background-color 0.2s ease; }
.sv-download-row {     display: flex;
    gap: 12px;
    margin-top: 4px;
    align-items: center; }
.plan__btn--primary {
  background: #e50000;
  font-weight: 500;
}
.sv-download-section { margin-top: 12px; }
.plan__btn--primary:hover,
.plan__btn--primary:focus-visible {
  background: #c00;
}

.plan__btn--outline {
  border: 1px solid #fff;
}

.plan__btn--outline:hover,
.plan__btn--outline:focus-visible {
  background: rgba(255, 255, 255, 0.16);
}

/* ===== Card skeleton =====
   Add `is-loading` to any container of .episode-card — .pop__track or
   .episode-grid — and remove it once the real data is in. Re-skins the
   existing cards, so placeholders inherit the real geometry and nothing
   extra has to be rendered. */
@keyframes skeleton-sweep {
  from { background-position: 150% 0; }
  to   { background-position: -150% 0; }
}

.is-loading .episode-card {
  pointer-events: none;
}

/* hide the real content but keep the boxes that size it — this covers the
   image, duration badge, progress bar, lock overlay and lock icon alike */
.is-loading .episode-card__thumb > * {
  visibility: hidden;
}

.is-loading .episode-card__thumb,
.is-loading .episode-card__title,
.is-loading .episode-card__ep,
.is-loading .episode-card__desc {
  color: transparent;
  border-radius: 4px;
  background-color: #1b1b1b;
  background-image: linear-gradient(90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0) 100%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: skeleton-sweep 1.4s linear infinite;
}

.is-loading .episode-card__thumb {
  border-radius: 20px;
  border-color: transparent;
}

/* stagger so the sweep reads as a wave across the row */
.is-loading .episode-card:nth-child(2n) .episode-card__thumb { animation-delay: 0.12s; }
.is-loading .episode-card:nth-child(3n) .episode-card__thumb { animation-delay: 0.24s; }

/* ragged line ends, like real text */
.is-loading .episode-card__title { width: 70%; }
.is-loading .episode-card__ep { width: 45%; }

.plan-foot-text{
font-weight: 500;
    line-height: 24px;
    text-align: center;
    padding: 20px 20px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    font-size: 14px;
    margin-top: 20px;
}
.plan-foot-text a{ color:#000; text-decoration: underline;}
.sv-plan-row { display: grid; grid-template-columns: 1fr 70px; gap: 8px; align-items: start; width: 100%;}



@media (prefers-reduced-motion: reduce) {
  .is-loading .episode-card__thumb,
  .is-loading .episode-card__title,
  .is-loading .episode-card__ep,
  .is-loading .episode-card__desc {
    animation: none;
  }
}

@media (max-width:1239px){
.page{
  padding:0 15px;
}
.topbar{ padding-left: 15px; padding-right: 15px;}

}
@media (max-width:1190px){
  .episode-grid{
    grid-template-columns:repeat(auto-fit,minmax(162px,1fr));
  }
}
@media (max-width:820px){
  .hero__title{ font-size: 50px;}
}
/* ===== Mobile (Figma mobile frame: 360px) ===== */
@media (max-width: 640px) {
  .page {
    padding: 0 20px;
  }
  div.top-head-body.top-head-body{border-bottom:0px;}
   .login.login { margin-top:0;}
  .topbar {
    padding: 15px 20px 0;
  }
   .topAd{
    border: 1px solid #1b1b1b;
    background-color: #0f0f0f;
    margin-top:10px;
   }
  .topbar .logo {
    height: 45px;
  }

  .topbar::after {
    width: 28px;
  }

  .topbar .icon-btn img {
    width: 9px;
  }

  .ad-slot {
    height: 250px;
    width: 300px;
    font-size: 10px;
    flex-direction: column;
    text-transform: uppercase;
    justify-content: flex-start;
    padding-top: 10px;
  }

  .ad-slot--top {
    margin: 20px auto 0;
  }

  .ad-slot--bottom {
    margin: 24px auto 20px;
  }

  .ad-slot__label--desktop {
    display: none;
  }

  .ad-slot__label--mobile {
    display: block;
  }

  /* Mobile: the art is a 338px band below the ad, not a full-page layer,
     so .hero becomes the positioning context for the two layers. */
  .hero {
    position: relative;
    min-height: 338px;
    display: flex;
    align-items: flex-end;
    margin: 0px -20px 0;
    padding: 0 20px 6px;
  }

  .hero__art,
  .hero__overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .hero__overlay {
    background: linear-gradient(180deg, rgba(6,6,8,0) 30%, #060608 75%);
    top: calc(calc(100dvw * 9 / 16) - 17px);
    height: 50px;
    z-index: 1;
  }

  .hero__content {
    width: 100%;
    margin-top: calc(calc(100dvw * 9 / 16) + 35px);
  }

  .hero__title {
    font-size: 24px;
    line-height: 1.4;
    text-transform: uppercase;
    padding-bottom:2px;
  }

  .hero__meta {
    margin-top: 8px;
    gap: 10px;
  }

  .tag {
    padding: 4px 12px;
    font-size: 10px;
    line-height: 10px;
  }

  .hero__info {
    font-size: 10px;
  }

  .hero__desc {
    font-size: 12px;
    line-height: 16px;
    color: #d2d2d2;
    margin-top: 6px;
  }

  .hero__actions {
    gap: 16px;
    margin-top: 16px;
  }

  .btn {
    font-size: 11px;
    letter-spacing: 0.22px;
    padding: 8px 16px;
    min-width:125px;
    height: 32px;
  }

  .btn--primary img {
    width: 16px;
    height: 16px;
  }

  .btn--ghost {
    min-width: 126px;
    height: 32px;
  }

  .pop {
    padding-top: 21px;
  }

  .pop__header {
    margin-bottom: 10px;
  }

  .section-title {
    font-size: 20px;
    line-height: 29px;
    font-weight:600;
  }
  .see-all{
    font-size: 16px;
    font-weight: 600;
  }
  .pop__track {
    gap: 20px;
    margin-inline: -20px;
    padding-inline: 20px;
    /* must match padding-inline, else snap parks the track mid-padding
       and card 1 lands short of the 20px gutter */
    scroll-padding-inline: 20px;
    /* no hover scale on mobile, so no vertical room needed (design: 304) */
    padding-block: 0;
  }

  /* Hover scale is a pointer affordance; drop it on mobile. The text
     translate goes with it — it only offsets the scale. */
  .episode-card:hover .episode-card__thumb,
  .episode-card:hover > :not(.episode-card__thumb),
  .pop-card:focus-visible .episode-card__thumb,
  .pop-card:focus-visible > :not(.episode-card__thumb) {
    transform: none;
  }

  /* Mobile CTA: 320x206, text and button stacked, mosaic pushed further left */
  .trial {
    margin-top: 30px;
    /* 16 + 112 (text) + 20 + 42 (button) + 16 = 206 */
    min-height: 206px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: 16px 20px;
  }

  /* column flex: the 736px basis would apply to height, so reset it */
  .trial__text {
    flex: 0 0 auto;
    width: 100%;
  }

  .trial__heading {
    font-size: 20px;
    line-height: 1.45;
  }

  .trial__desc {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.65;
  }

  .trial__btn {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 68px;
  }

  /* Plans: stacked full-width cards, no hover scale (pointer affordance) */
  .plans {
    margin-top: 30px;
    min-height: 0;
    padding: 20px;
    text-align: left;
  }

  .plans__title {
    font-size: 20px;
    line-height: 1.445;
    font-weight:600;
  }

  .plans__group {
    margin-top: 10px;
    max-width: none;
    flex-direction: column;
    align-items: stretch;
    /* no hover scale here, so the design's 9px gap applies directly */
    gap: 9px;
  }

  .plan-box {
    flex: 0 0 auto;
    height: auto;
    padding: 20px;
    border-radius: 20px;
  }

  .plan-box:hover,
  .plan-box:focus-within {
    transform: none;
  }

  /* mobile design drops the plan label */
  /* .plan-box__label {
    display: none;
  } */

  .plan-box__name {
    font-size: 18px;
    line-height: 20px;
  }

  .plan-box__sub {
    margin-top: 10px;
    font-size: 16.3px;
  }

  .plan-box__list {
    margin-top: 10px;
    gap: 10px;
  }

  .plan-box__list li {
    font-size: 14px;
    line-height: 22.4px;
  }

  /* inset, not full-bleed, on mobile */
  .plan-box__strip {
    margin: 16px 0 0;
    padding: 13px 10px;
    font-size: 14px;
    line-height: 22.4px;
  }

  .plan-box__foot {
    margin-top: 16px;
  }

  .plan-box__amount,
  .plan-box--primary .plan-box__amount {
    font-size: 28px;
    line-height: 33px;
  }

  .plan-box__per {
    font-size: 14px;
  }

  .plan-box__btn {
    padding: 8px 16px;
    font-size: 16px;
  }

  .episodes {
    padding-top: 30px;
  }

  .episodes__header {
    margin-bottom: 21px;
  }

  .episodes__title {
    display: none;
  }

  .tab-group {
    width: 100%;
  }

  .episode-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 20px;
  }

  .episode-card__title {
    margin-top: 6px;
  }

  .mobile-hide {
    display: none;
  }

  .load-more-wrap {
    margin-top: 32px;
  }

  /* Paywall fills the whole mobile screen below the topbar */
  .paywall {
    padding-top: 0;
  }

  .paywall__panel {
    width: 100%;
    height: calc(100dvh - 50px);
    border-radius: 0;
  }

  .paywall__content {
    justify-content: center;
    overflow-y: auto;
    padding: 24px 20px;
  }

 

  .plan-card {
    max-width: 100%;
  }
}

@media (max-max-width:480px){
.hero__content {
    width: 100%;
    margin-top: 72%;
  }
}



/* css by vishal start */
:root{
    --microdrama-wrapper-height:100dvh;
    --microdrama-container-height : 637px;
    --microdrama-container-width:360px;
}
        .series-popup {
            position: absolute;
            background: rgb(0, 0, 0, .8);
            width: 100%;
            height: calc(100% - 150px);
            bottom: 0px;
            z-index: 10;
            left: 0;
            transform: translateY(100%);
            transition: transform .6s ease-in-out;
        }
        .series-subscription-container, .series-login-container {
            position: absolute;
            background: rgb(0, 0, 0, .8);
            width: 100%;
            height: 100%;
            z-index: 10;
            left: 0;
            opacity: 0;
            visibility: hidden;
            transition: opacity .6s ease-in-out;
            top: 0;
            backdrop-filter: blur(11px);
        }
        .series-subscription-container.subscription-active, .series-login-container.login-active {
            opacity: 1;
            visibility: visible;
        }
      
        .series-pop-container {
            padding: 40px 20px 0px 20px;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .series-pop-header {
            flex-shrink: 0;
        }
        .series-data-container {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: #626262 #1B1B1B;
            margin-bottom: 10px;
        }
        .series-data-container::-webkit-scrollbar {
            width: 6px;
        }
        .series-data-container::-webkit-scrollbar-track {
            background: #1B1B1B;
            border-radius: 10px;
        }
        .series-data-container::-webkit-scrollbar-thumb {
            background: #626262;
            border-radius: 10px;
        }
        .series-data-container::-webkit-scrollbar-thumb:hover {
            background: #808080;
        }
.series-data-name {
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    vertical-align: middle;
    color: #fff;
}

.series-data-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(69px,1fr));
    gap: 11px 14px;
    margin-top: 20px;
    align-items: start;
}
.series-data-grid .episode {
    border: 0.5px solid #3D3D3D;
    border-radius: 6px;
    background-color: #1B1B1B;
    height: 43px;
    display: grid;
    place-content: center;
    gap: 2px;
    pointer-events: none;
}
.episode-series-data-name {
    font-weight: 400;
    font-size: 10px;
    line-height: 1;
    color: #626262;
}


.series-data-grid .episode .episode-series-data-cheked {
    background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.00033 14.6667H12.0003C12.7337 14.6667 13.3337 14.0667 13.3337 13.3333V7.33334C13.3337 6.60001 12.7337 6.00001 12.0003 6.00001H11.3337V4.66668C11.3337 2.82668 9.84033 1.33334 8.00033 1.33334C6.16033 1.33334 4.66699 2.82668 4.66699 4.66668V6.00001H4.00033C3.26699 6.00001 2.66699 6.60001 2.66699 7.33334V13.3333C2.66699 14.0667 3.26699 14.6667 4.00033 14.6667ZM8.66699 11.8133V13.3333H7.33366V11.8133C7.13214 11.697 6.96458 11.53 6.84763 11.3288C6.73067 11.1276 6.6684 10.8994 6.66699 10.6667C6.66699 9.93334 7.26699 9.33334 8.00033 9.33334C8.73366 9.33334 9.33366 9.93334 9.33366 10.6667C9.33225 10.8994 9.26998 11.1276 9.15303 11.3288C9.03607 11.53 8.86851 11.697 8.66699 11.8133ZM6.00033 4.66668C6.00033 3.56668 6.90033 2.66668 8.00033 2.66668C9.10033 2.66668 10.0003 3.56668 10.0003 4.66668V6.00001H6.00033V4.66668Z" fill="%23626262"/></svg>');
    width: 14px;
    height: 14px;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0 auto;
}

.series-data-grid .episode[status='free-play'] .episode-series-data-cheked{
    background-image:url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_2944_2059)"><path d="M7.00033 1.16666C3.78033 1.16666 1.16699 3.77999 1.16699 6.99999C1.16699 10.22 3.78033 12.8333 7.00033 12.8333C10.2203 12.8333 12.8337 10.22 12.8337 6.99999C12.8337 3.77999 10.2203 1.16666 7.00033 1.16666ZM5.83366 9.91666L2.91699 6.99999L3.73949 6.17749L5.83366 8.26582L10.2612 3.83832L11.0837 4.66666L5.83366 9.91666Z" fill="%23626262"/></g><defs><clipPath id="clip0_2944_2059"><rect width="14" height="14" fill="white"/></clipPath></defs></svg>');
}

.series-data-grid .episode[status='playing'] .episode-series-data-cheked, .series-data-grid .episode[status='completed'] .episode-series-data-cheked {
    background-image:url('data:image/svg+xml,<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_2944_2053)"><path d="M7.00033 1.16666C3.78033 1.16666 1.16699 3.77999 1.16699 6.99999C1.16699 10.22 3.78033 12.8333 7.00033 12.8333C10.2203 12.8333 12.8337 10.22 12.8337 6.99999C12.8337 3.77999 10.2203 1.16666 7.00033 1.16666ZM5.83366 9.91666L2.91699 6.99999L3.73949 6.17749L5.83366 8.26582L10.2612 3.83832L11.0837 4.66666L5.83366 9.91666Z" fill="white"/></g><defs><clipPath id="clip0_2944_2053"><rect width="14" height="14" fill="white"/></clipPath></defs></svg>')
}
.series-data-grid .episode[status='playing'] , .series-data-grid .episode[status='completed']{
    pointer-events: all;
    cursor: pointer;
}

.series-data-grid .episode[status='playing'] .episode-series-data-cheked{
    width: 16px;
    height: 16px;
    background-size:16px;
}

.sv-vertical:has(.popup-active):before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 5;
    backdrop-filter: blur(11px);
}
.svv-nav{transition: opacity 0.4s;}
.sv-vertical:has(.popup-active) .svv-nav{
    opacity: 0;
}
    
.series-data-grid .episode[status='completed'] .episode-series-data-name,
.series-data-grid .episode[status='playing']  .episode-series-data-name{
    color:#fff;
}

.series-data-grid .episode[status='playing']{
    background-color: rgba(204, 0, 0, 0.4);
    border-color: rgba(204, 0, 0, 1);
}

.series-data-pop-close {
    position: absolute;
    top: 8px;
    right: 12px;
    cursor: pointer;
    width: 24px;
    height: 24px;
}

.sv-vertical .swiper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.series-popup.popup-active {
    transform: translateY(0px);
}


.video-play-screen-header {
    grid-column: 1 / -1;
    width: 100%;
    height: var(--header-height);
}

.video-progress-bar {
    height: 3px;
    width: 100%;
    background-color: rgba(51, 51, 51, 1);
    position: relative;
    cursor: pointer;
}

.video-progress-bar span {
    background-color: rgba(255, 4, 4, 1);
    position: absolute;
    left: 0;
    height: 100%;
    width: 0%;
    transition: width 0.1s ease;
}


.svv-lower-lyr {
    display: grid;
    align-items: end;
    gap: 14px;
    max-height: max-content;
    z-index: 999;
    -webkit-transition: all 0.35s ease;
      transition: opacity 0.35s ease;
      opacity: 1;
}

.svv-title, .svv-title h1 {
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1;
    letter-spacing: -0.3px;
    min-height: auto;
    font-weight: 600;
    padding:0px ;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    line-height: 24px;
}
.svv-bottom{bottom:14px;}



.svv-description {
    display: none;
}
.svv-text-area {
    padding: 0px 16px;
}
.svv-footer > div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    height: auto;
}

.svv-footer-svg-text {
    font-size: 10px;
    line-height: 14px;
    font-weight: 400;
    text-align: center;
}
.svv-nav > div {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background-color: #00000076;
    display: grid;
    align-items: center;
    cursor: pointer;
    justify-content: center;
    line-height: 0px;
    outline: 0;
}

.svv-nav .sv_swiper-prev {
    margin-bottom: 24px;
}
.svv-thumb.adv {
    background-color: #cd0200;
}
.svv-nav > div:hover {
    background-color: transparent;
}


.series-video-date-headline {
font-weight: 500;
    font-size: 14px;
    line-height: 1;
    letter-spacing: -0.3px;
    text-align: center;
    position: absolute;
    padding: 0px 10px;
    z-index: 2;
    top: 22px;
    left: 0;
    width: 100%;
}

.series-mobile-back-button {
        cursor: pointer;
    display: none;
    position: absolute;
    top: 17px;
    left: 10px;
    z-index: 3;
}

.video-loader-text {
    font-weight: 600;
    font-size: 16px;
    line-height: 18px;
    text-align: center;
}

.loader_wrapper {
    padding-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.spinning-svg {
    transform-origin: center;
    animation: rotateSVG 2s linear infinite;
  }

@keyframes rotateSVG {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .svv-thumb {width: 100%;}

  .login-by-pass{
    position: fixed;
    top: 0;
    z-index: 99999;
    background: #c00;
    color: #fff;
    font: bold 10px / 1.6 sans-serif;
    padding: 0 6px;
    letter-spacing: 1px;
    pointer-events: none;
    right: 0;
  }
  .mc-container {
    max-width: 1240px;
    margin: 0 auto;
    width: calc(100% - 40px);
}



.mc-logo-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 30px;
}
.mc-logo-row .mc-logo-img{ height:63px; width:auto;}

.microdrama-content-header {
    padding: 40px 0px 0px 0px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
    left: 0;
}

.sv-wrapper{
  background-color: #000;
  height: var(--microdrama-wrapper-height, 100dvh);
}


.loader_custom {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999999;
}

.next-icon,
.swiper-button-disabled {
  pointer-events: none;
  cursor: auto;
  opacity: 0.35;
}

.svv-thumb {
  min-height: 100%
}

.svv-audio svg,
.svv-audio svg path {
  pointer-events: none;
}

.svv-audio-unmute,
.svv-audio-mute {
  pointer-events: none;
}

.svv-play-pause {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  cursor: pointer;
  pointer-events: none;
  min-height:80px;
  min-width:55px;
  -webkit-transition: all 0.35s ease;
  transition: opacity 0.35s ease;
  opacity: 0;
}
.svv-play-pause.button-show{opacity: 1;}
.svv-play-pause svg {
  width: 55px;
  height: 80px;
}

.ssv-pause {
  display: none;
}

.jw-title.jw-reset-text {
  display: none;
}

.ad-section {
  display: none;
}



.player-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}

.svv {
  position: relative;
      background: linear-gradient(180deg, #000000 -31.02%, rgba(0, 0, 0, 0) 100%);
}


.md-ad-break {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #000;
  visibility: hidden;
  opacity: 0;
}

.md-ad-break.ad-break-active {
  visibility: visible;
  opacity: 1;
}

.md-ad-break-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.md-ad-break-label {
  flex: 0 0 auto;
  padding: 8px 0;
  color: #9a9a9a;
  font: 10px/1.6 Arial, sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.md-ad-break-slot {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

.md-ad-break-cta {
  flex: 0 0 auto;
  margin: 12px 0;
  padding: 12px 28px;
  border: 0;
  border-radius: 24px;
  background-color: #e2261c;
  color: #fff;
  font: 600 14px/1.2 Arial, sans-serif;
  cursor: pointer;
}

.md-ad-break-status {
  flex: 0 0 auto;
  min-height: 20px;
  padding: 6px 16px;
  color: #cfcfcf;
  font: 12px/1.6 Arial, sans-serif;
  text-align: center;
}

.md-wall-note {
  margin: 10px 10px 0px;
  color: #ffd479;
  font: 12px/1.6 Arial, sans-serif;
  text-align: center;
}

.md-wall-signin {
  margin: 5px 10px 0;
  color: #b3b3b3;
  font: 13px/1.6 Arial, sans-serif;
  text-align: center;
}

.md-wall-signin[hidden] {
  display: none;
}

.md-wall-signin__link {
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.swiper-nav.nav-locked {
  display: none;
}

.swiper-nav.nav-fwd-locked .sv_swiper-next {
  display: none;
}

.series-denied-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.92);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s linear;
}

.series-denied-container.denied-active {
  visibility: visible;
  opacity: 1;
}

.series-denied-container .paywall__content {
  padding: 0 24px;
  color: #fff;
  text-align: center;
  justify-content: center;
}

.sv-vertical {
    aspect-ratio: 9 / 16;
    max-height: var(--microdrama-container-height);
    max-width: var(--microdrama-container-width);
}

.swiper-container {
    height: var(--microdrama-container-height);
    user-select: none;
    width: 100%;
}
.swiper-slide {height: var(--microdrama-container-height);}


.tablet-device.portrait .sv-vertical {
      --microdrama-container-width: 394px;
     --microdrama-container-height: 700px;
}

.mobile-device .swiper-slide video {
    object-fit: cover;
    aspect-ratio: 9 / 16;
}

.tablet-device.tablet-large .sv-vertical {
    --microdrama-container-height: 920px;
    --microdrama-container-width: 517.5px;
}


.mobile-device.landscape .rotation-msg {
    display: block;
}

.bottom-plan-area {
    border: 1px solid #363636;
    padding: 10px;
    border-radius: 5px;
}

 .nofcta a {
    display: flex;
    align-items: center;
    border: 1px solid #d90000;
    border-radius: 50vw;
    color: #fff;
    text-decoration: none;
    padding: 12px 20px;
    width: fit-content;
    font-size: 14px;
    margin-inline: auto;
    line-height: 1;
    background: #d90000;
    font-weight: 600;
    justify-content: center;
}
 .nofcta svg {
    margin-right: 5px;
}

.series-notifiy-container {
    position: absolute;
    background: rgb(0, 0, 0, .8);
    width: 100%;
    height: 100%;
    z-index: 10;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease-in-out;
    top: 0;
    backdrop-filter: blur(11px);
}
.series-notifiy-container.notifie-active {
    opacity: 1;
    visibility: visible;
}

.series-notifiy-container .paywall__content {
    justify-content: center;
}
.series-notifiy-container .sv-plan-header {
    font-weight: 600;
    text-align: center;
    font-size: 18px;
    margin: 0;
}

.series-notifiy-container .plan.plan--divided .sv-plan-header {
    font-size: 12px;
    color: #d1d1d1;
    font-weight: 500;
}


.nofcta {
    width: 100%;
    text-align: center;
    margin-top: 20px;
}
.series-notifiy-container .plan--divided {
    border: 0;
    padding-bottom: 0;
    justify-content: center;
    align-items: center;
}

.pay-circle svg {
    width: 60px;
    height: 60px;
}


.series-notifiy-container .plan-card {
    margin-top: 20px;
    background: transparent;
    border: 0;
    padding: 0;
}

body:has(.notifie-active) .svv-nav {
    opacity: 0;
}






@media (max-device-width:1400px) {
  .video-play-screen-header {padding: 20px 20px 0px 20px;}
  .video-play-screen-header .logo {height: 45px;}
  .loader_wrapper {    gap: 5px;}
  .paywall__lock { width: 30px; height: 30px; }
  .paywall__title { margin-top: 5px; }
.plan-card { gap: 8px; width: 100%; padding: 12px; border-radius: 8px; }
  .plan__heading { font-size: 18px; line-height: 24px; }
 .plan__btn { padding: 7px 10px; font-size: 13px; line-height: 16px; }
  .plan__sub { font-size: 14px; line-height: 20px; }
  .plan__amount { font-size: 27px; line-height: 30px;}
  .plan__unit { font-size: 11px;line-height: 14px;}
  .plan__heading { font-size: 15px; line-height: 21px;}
  .topbar .icon-btn img { width: 10px; }
  .md-wall-note {font: 10px / 1.6 Arial, sans-serif;}
  .paywall__content { padding: 10px 15px; }
  .sv-vertical {--microdrama-container-height: 500px;}
  .microdrama-content-header {padding-top: 20px;}
.md-wall-signin {margin: 5px 5px 0; font:12px/1.6 Arial, sans-serif}
.paywall__title h1 { font-size: 12px; line-height: 16px; }
.plan-card ul { margin-top: 5px; list-style: disc; padding-left: 16px; }
.plan-card ul li { font-size: 12px; line-height: 18px; }
.plan__amount.free-text { font-size: 22px; }
.sv-plan-header { font-size: 14px; line-height: 17px; }
.bottom-plan-area { margin-top: 5px; }
.sv-download-headline { line-height: 12px; font-size: 11px; }

}


@media (max-width: 767px) {
  .sv-wrapper {justify-content: center;}
}

@media (max-device-width: 767px) {
  .series-mobile-back-button {display: block;}
  .microdrama-content-header {display: none;}
  .sv-vertical {
      --microdrama-container-height: 100dvh;
      --microdrama-container-width: 100%;
      aspect-ratio: initial;
  }
  .sv-wrapper {justify-content: initial;}
  .sv-plan-header {
    font-size: 18px;
    line-height: 22px;
  }

  .plan-card ul li {
      font-size: 14px;
      line-height: 22px;
  }
      .plan__amount {
        font-size: 34px;
        line-height: 33px;
    }

    .plan__unit {
        font-size: 12px;
        line-height: 15px;
    }
    .plan__amount.free-text {
    font-size: 28px;
}
    .plan__btn {
        padding: 8px 10px;
        font-size: 14px;
        line-height: 18px;
        
    }
    .plan--divided {
    padding-bottom: 12px
    }

    .paywall__content {
        padding: 20px;
    }
    .sv-plan-row {
      margin: 5px 0px;
  }
    .paywall__title h1 {
        font-size: 16px;
        line-height: 23px;
    }
}
/* css by vishal end */


/***************** COMING SOON SECTION **********/
.comingsoon.hero:has(.teaser__section:empty),.comingsoon.hero:not(:has(.teaser__section)){text-align: center;}
.comingsoon.hero:has(.teaser__section:empty) .soon__content,.comingsoon.hero:not(:has(.teaser__section)) .soon__content{margin-inline:auto;width: 650px;}
.comingsoon.hero:has(.teaser__section:empty) .soon__desc, .comingsoon.hero:not(:has(.teaser__section)) .soon__desc{ padding:0 40px}
.comingsoon.hero:not(:has(.teaser__section)) .soon__wapper{ grid-template-columns:1fr;}
.comingsoon.hero{padding-top: 20px;}
.soon__wapper{ display: grid;grid-template-columns: 635px 260px;gap: 70px;margin-inline: auto;width: fit-content; margin-bottom:32px;}
.comingsoon.hero .hero__overlay{backdrop-filter: blur(20px);}
.comingsoon .soon__content {position: relative;z-index: 1;width: 820px;max-width: 100%;}
.soon__content .soon__title{color: #FF0000;font-size:54px;font-weight: 800;text-transform: uppercase;letter-spacing:1.5px;margin-bottom: 20px; line-height: 1;}
.soon__content .soon__subtitle{font-size: 32px;font-weight: 700;text-transform: capitalize;margin-bottom: 15px;line-height:1.3;}
.soon__desc{font-size: 20px;font-weight: 400;line-height: 30px;margin-bottom: 30px;}
.soon__seriesdata{font-size: 35px;font-weight: 700;text-transform: uppercase;}
.soon__teaser{ position: relative; z-index: 1;}
.teaser__section{ max-width:260px; max-height:458px; border: 1px solid #4D4D4D; height:100%; border-radius:10px;margin-left: auto; overflow: hidden; position: relative;}
.teaser__section .teaser__vid{ width:100%;}
.ply_teaser{position: absolute;bottom: 15px;left: 50%;transform: translateX(-50%);}
.ply_teaser a{display: flex;align-items: center;gap: 5px;color: inherit; text-decoration: none;}
.itgdAdsPlaceholder.common_ads_container{position: relative;}
.full_desc {overflow: hidden;}
.full_desc.is-collapsed {display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 4;line-clamp: 4;overflow: hidden;}
.read_toggle {font-size: 15px; display: inline-block;margin-top: 8px;padding: 0;border: 0;background: none;color: #FF0000;font-weight: 600;cursor: pointer;margin-bottom: 20px;}
.hero__desc .read_toggle{ margin-bottom:0;}
.soon__desc:last-child{ margin-bottom: 0px;}
.soon__subtext{ font-size: 18px;
    padding-bottom: 15px;
    line-height: 1.5;}
@media (max-width:1024px){
  .comingsoon .soon__content, .comingsoon.hero:not(:has(.teaser__section)) .soon__content{ width:100%}
  .comingsoon .soon__content{text-align: center;}
  .soon__wapper{grid-template-columns:1fr; margin-bottom: 30px;}
  .teaser__section{margin: 0 auto;}
  .comingsoon.hero .hero__overlay{background: #000;}
  .comingsoon.hero{min-height:auto; padding-top: 0;}
}
@media (max-width:768px){
  .soon__content{text-align: center;}
  .soon__wapper{gap:30px}
  .soon__content .soon__title{font-size: 26px;letter-spacing: 2.90px;}
  .soon__content .soon__subtitle{ font-size:20px; line-height: 1.3; margin-bottom: 8px;}
  .soon__desc{ font-size:14px; line-height: 21px;margin-bottom: 8px;}
  .soon__seriesdata{ font-size:20px;}
  .comingsoon.hero:has(.teaser__section:empty) .soon__desc, .comingsoon.hero:not(:has(.teaser__section)) .soon__desc{padding:0 15px;}
  .soon__subtext{font-size:14px;padding-bottom: 10px;}
}

/* ===== Micro drama end-of-feed screens: #notified-screen (all caught up), #season-over-screen (season over) ===== */
.series-notifiy-container .paywall__content {
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 24px;
    background: linear-gradient(180deg, rgba(10, 10, 16, 0) 0%, rgba(10, 10, 16, .6) 40%, rgba(60, 8, 16, .45) 100%);
}
.md-end-illus {
    width: 190px;
    height: auto;
    margin-bottom: 24px;
}
.md-end-title {
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 12px;
}
.md-end-text {
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
    color: #c9ccd6;
    margin: 0;
}
.series-notifiy-container .nofcta {
    margin-top: 32px;
}
.series-notifiy-container .nofcta a {
    gap: 10px;
    min-width: 200px;
    padding: 14px 28px;
    font-size: 15px;
    border: 0;
    background: #e0112b;
    box-shadow: 0 6px 20px rgba(224, 17, 43, .35);
}
.series-notifiy-container .nofcta svg {
    margin: 0;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
@media (max-width: 767px) {
    .md-end-illus { width: 150px; margin-bottom: 18px; }
    .md-end-title { font-size: 20px; line-height: 26px; }
    .md-end-text { font-size: 13px; line-height: 19px; }
}

/*** T & C popup **/

.terms-btn {
    padding: 10px 18px;
    border: 0;
    border-radius: 6px;
    background: #1565c0;
    color: #fff;
    cursor: pointer;
    font-size: 14px;
}
 
.pay {
    width: min(90%, 760px);
    max-height: 80vh;
    padding: 28px;
    border: 0;
    border-radius: 12px;
    box-sizing: border-box;
    overflow-y: auto;
    color: #222;
    margin: auto;
}
 .pay::-webkit-scrollbar {
  width: 6px;
}

.pay::-webkit-scrollbar-track {
background: #e9ecef;
}

.pay::-webkit-scrollbar-thumb { 
background: #6f6f6f;
border-radius: 6px;
}

.pay:popover-open {
    display: block;
}
 
.pay::backdrop {
    background: rgba(0, 0, 0, 0.55);
}
 
.pay__close {
    position: sticky;
    float: right;
    top: 0;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: #eee;
    color: #333;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-content: center;
}
 
.pay__title {
    margin: 0 35px 18px 0;
    font-size: 21px;
    font-weight: 600;
}
 
.pay__body {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
}
.pay__body ul{
  list-style:disc;
  margin: 0;
  padding-left:20px;
}
.pay__body li {
    margin-bottom: 12px;
}
@media (max-width:767px) {
  .pay {
    padding:15px;
    border-radius:12px;
  }
}