/* Works page styles: section 1 */
.download-feature-note {
      display: inline-block;
      margin-inline-start: .35rem;
      color: rgba(255, 255, 255, .45);
      font-size: .78em;
      line-height: 1.7;
      vertical-align: baseline;
      }

    .download-feature-note::before {
      content: "(";
      }

    .download-feature-note::after {
      content: ")";
      }

    .series-downloaditems .download-feature-note {
      display: block;
      margin: .25rem 0 0;
      font-size: .72em;
      white-space: normal;
      }

    /* the works subsystems rendered by partials/work_extra_sections.dj.html */
    .work-people {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 1rem;
      }

    .work-person {
      display: block;
      text-align: center;
      }

    .work-person-thumb {
      display: block;
      width: 100%;
      aspect-ratio: 3 / 4;
      border-radius: .5rem;
      background-size: cover;
      background-position: top center;
      }

    .work-person-name {
      margin-top: .4rem;
      font-weight: 700;
      }

    .work-person-role {
      font-size: .82em;
      color: rgba(150, 150, 150, .95);
      }

    /* collections: same grid as the cast, with a 2:3 poster instead of a
       portrait, and the work you are already on marked so the reader can see
       where this title sits in the set */
    .work-collection-head {
      display: flex;
      align-items: center;
      gap: .5rem;
      margin-bottom: .8rem;
      color: var(--primary-color, #96F207);
      font-size: .95rem;
      font-weight: 900;
      }

    .work-collection-count {
      color: rgba(150, 150, 150, .95);
      font-weight: 400;
      }

    .work-collection-poster {
      display: block;
      width: 100%;
      aspect-ratio: 2 / 3;
      border-radius: .5rem;
      background-size: cover;
      background-position: top center;
      }

    .work-person.is-current {
      pointer-events: none;
      }

    .work-person.is-current .work-collection-poster {
      outline: 2px solid var(--primary-color, #96F207);
      outline-offset: 2px;
      }

    .work-person.is-current .work-person-name {
      color: var(--primary-color, #96F207);
      }

    .work-table {
      width: 100%;
      border-collapse: collapse;
      }

    .work-table th,
    .work-table td {
      padding: .55rem .8rem;
      border-bottom: 1px solid rgba(128, 128, 128, .18);
      text-align: start;
      }

    /* Self-contained tabs. The bundled bootstrap.css carries no .nav-tabs or
       .tab-pane rules and its bootstrap.js has no Tab component, so none of
       Bootstrap's tab classes are used here - see work_additional_info.dj.html. */
    .work-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: .25rem;
      margin-bottom: 1.25rem;
      border-bottom: 1px solid rgba(128, 128, 128, .25);
      }

    /* Longhands, not `font: inherit`. The shorthand resets every font longhand
       it does not name, and font-feature-settings is one of them - body turns
       on kern, liga and dlig, so `font: inherit` on a <button> silently dropped
       those three and the Persian in these tabs was shaped differently from
       every other string on the page. That is what "the accordion fonts are
       wrong" was. The variation axis is set alongside the weight because that
       is the pairing the rest of the theme uses. */
    .work-tab {
      padding: .55rem 1.1rem;
      border: 0;
      border-bottom: 2px solid transparent;
      border-radius: .4rem .4rem 0 0;
      background: none;
      color: inherit;
      font-family: inherit;
      font-size: .9rem;
      font-weight: 700;
      font-variation-settings: "wght" 700;
      line-height: 1.8;
      cursor: pointer;
      }

    @media (hover: hover) {
        .work-tab:hover {
          background: rgba(128, 128, 128, .1);
          }
    }


    .work-tab.is-active {
      border-bottom-color: var(--primary-color, #96F207);
      color: var(--primary-color, #96F207);
      }

    /* the whole point: exactly one pane is in flow at a time */
    .work-tab-pane {
      display: none;
      }

    .work-tab-pane.is-active {
      display: block;
      }

    /* The page is RTL, so text-align:start would put these against the right
       edge; the values in this table are latin (titles, ids, years) and read
       better flush left, next to their label column. */
    #work-pane-more .work-table td {
      text-align: left;
      }

    .work-country-ratings {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: .75rem;
      }

    .country-rating {
      display: flex;
      align-items: center;
      gap: .7rem;
      padding: .7rem .85rem;
      border: 1px solid rgba(128, 128, 128, .16);
      border-radius: .65rem;
      background: var(--card-bg, rgba(255, 255, 255, .04));
      }

    /* Both the flag and the name fall back to the ISO code with no JS and no
       match in SelectCountries, so a card is never blank. */
    .country-rating-flag {
      flex: 0 0 auto;
      font-size: 1.7rem;
      line-height: 1.2;
      }

    .country-rating-name:empty::before,
    .work-chip-label:empty::before,
    .work-flag:empty::before {
      content: attr(data-country-code);
      }

    .work-flag:empty::before {
      font-size: .95rem;
      font-weight: 700;
      }

    .country-rating-body {
      flex: 1 1 auto;
      min-width: 0;
      }

    .country-rating-name {
      display: block;
      overflow: hidden;
      font-size: .92rem;
      font-weight: 700;
      text-overflow: ellipsis;
      white-space: nowrap;
      }

    .country-rating-votes {
      display: inline-flex;
      align-items: center;
      gap: .3rem;
      margin-top: .1rem;
      color: rgba(150, 150, 150, .95);
      font-size: .8rem;
      }

    .country-rating-votes svg {
      flex: 0 0 auto;
      }

    .country-rating-score {
      flex: 0 0 auto;
      padding: .2rem .55rem;
      border-radius: .45rem;
      background: rgba(150, 242, 7, .12);
      color: var(--primary-color, #96F207);
      font-size: .95rem;
      font-weight: 900;
      }

    /* The "see all" link at the end of every accordion header. :link/:visited
       are spelled out because bootstrap's `a:visited { color: inherit }` has a
       higher specificity than a bare class - without them the links a reader
       had already followed dropped back to the body colour and only the
       unvisited ones looked green. */
    .work-preview-more,
    .work-preview-more:link,
    .work-preview-more:visited {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      padding: .1rem .5rem;
      border: 1px solid rgba(150, 242, 7, .3);
      border-radius: .4rem;
      color: var(--primary-color, #96F207);
      font-size: .78rem;
      font-weight: 700;
      white-space: nowrap;
      transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
      }

    /* :focus-visible stays unconditional - that is the keyboard affordance.
       Only the hover half is pointer-only. */
    .work-preview-more:focus-visible {
      border-color: var(--primary-color, #96F207);
      background: rgba(150, 242, 7, .14);
      color: var(--primary-color, #96F207);
      }

    @media (hover: hover) {
      .work-preview-more:hover {
        border-color: var(--primary-color, #96F207);
        background: rgba(150, 242, 7, .14);
        color: var(--primary-color, #96F207);
        }
    }

    /* release dates and alternate titles: one boxed item per entry, same
       treatment as the country rating cards above */
    .work-chip-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: .6rem;
      }

    .work-chip {
      display: flex;
      align-items: center;
      gap: .6rem;
      padding: .55rem .7rem;
      border: 1px solid rgba(128, 128, 128, .16);
      border-radius: .55rem;
      background: var(--card-bg, rgba(255, 255, 255, .04));
      }

    .work-chip-flag {
      flex: 0 0 auto;
      font-size: 1.35rem;
      line-height: 1.2;
      }

    .work-chip-body {
      flex: 1 1 auto;
      min-width: 0;
      }

    .work-chip-value {
      display: block;
      overflow: hidden;
      font-size: .88rem;
      font-weight: 700;
      text-overflow: ellipsis;
      white-space: nowrap;
      }

    .work-chip-label {
      display: block;
      overflow: hidden;
      color: rgba(150, 150, 150, .95);
      font-size: .8rem;
      text-overflow: ellipsis;
      white-space: nowrap;
      }

    /* on the release-date chips the country is the only line, so it carries the
       weight the title has on the alternate-title chips */
    .work-chip-body > .work-chip-label:only-child {
      color: inherit;
      font-size: .88rem;
      font-weight: 700;
      }

    .work-chip-tag {
      flex: 0 0 auto;
      padding: .15rem .5rem;
      border-radius: .4rem;
      background: rgba(128, 128, 128, .14);
      font-size: .78rem;
      white-space: nowrap;
      }

    .work-histogram-row {
      display: flex;
      align-items: center;
      gap: .6rem;
      margin-bottom: .3rem;
      }

    .work-histogram-label {
      flex: 0 0 1.5rem;
      font-size: .85em;
      text-align: center;
      }

    .work-histogram-track {
      flex: 1 1 auto;
      height: .6rem;
      border-radius: .3rem;
      background: rgba(128, 128, 128, .18);
      }

    .work-histogram-bar {
      display: block;
      height: 100%;
      border-radius: .3rem;
      background: var(--primary-color, #96F207);
      }

    .work-histogram-count {
      flex: 0 0 4.5rem;
      font-size: .8em;
      text-align: start;
      color: rgba(150, 150, 150, .95);
      }

    /* The gallery: a wrapping row of tiles of one height, each as wide as its
       picture is at that height - nothing cropped, nothing stretched. The
       trailer's tile is the same height, 16:9 when it has no poster. */
    .work-gallery-body {
      margin-top: 1rem;
      }

    .work-gallery-loading {
      display: flex;
      align-items: center;
      gap: .6rem;
      margin-bottom: .75rem;
      font-size: 13px;
      color: rgba(200, 200, 200, .9);
      }

    .work-gallery-loading[hidden] {
      display: none;
      }

    .work-gallery-spinner {
      width: 18px;
      height: 18px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, .2);
      border-top-color: currentColor;
      animation: work-gallery-spin .8s linear infinite;
      }

    @keyframes work-gallery-spin {
      to { transform: rotate(360deg); }
      }

    .work-gallery {
      --gallery-h: 170px;
      display: flex;
      flex-wrap: wrap;
      gap: .75rem;
      }

    .work-gallery-item {
      margin: 0;
      max-width: 100%;
      }

    .work-gallery-zoom {
      position: relative;
      display: block;
      height: var(--gallery-h);
      max-width: 100%;
      padding: 0;
      border: 0;
      border-radius: .5rem;
      overflow: hidden;
      background: rgba(255, 255, 255, .06);
      cursor: zoom-in;
      -webkit-tap-highlight-color: transparent;
      }

    .work-gallery-zoom img {
      display: block;
      height: 100%;
      width: auto;
      max-width: 100%;
      object-fit: cover;
      min-width: calc(var(--gallery-h) * .5);
      transition: transform .25s ease;
      }

    .work-gallery-zoom.is-video {
      cursor: pointer;
      background: #000;
      }

    /* no poster: a 16:9 frame at the row's height */
    .work-gallery-zoom.is-video:not(:has(img)) {
      aspect-ratio: 16 / 9;
      }

    .work-gallery-play {
      position: absolute;
      top: 50%;
      left: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: rgba(0, 0, 0, .55);
      border: 2px solid rgba(255, 255, 255, .85);
      color: #fff;
      transform: translate(-50%, -50%);
      transition: transform .2s ease, background-color .2s ease;
      }

    /* The title over the foot of a tile: on a desktop, on hover only. */
    .work-gallery-cap {
      position: absolute;
      inset: auto 0 0 0;
      padding: 1.4rem .6rem .45rem;
      background: linear-gradient(to top, rgba(0, 0, 0, .8), transparent);
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      text-align: center;
      text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      opacity: 0;
      transition: opacity .2s ease;
      pointer-events: none;
      }

    @media (hover: hover) {
      .work-gallery-zoom:hover img {
        transform: scale(1.03);
        }

      .work-gallery-zoom:hover .work-gallery-cap,
      .work-gallery-zoom:focus-visible .work-gallery-cap {
        opacity: 1;
        }

      .work-gallery-zoom.is-video:hover .work-gallery-play {
        transform: translate(-50%, -50%) scale(1.1);
        background: rgba(0, 0, 0, .75);
        }
      }

    @media (max-width: 991.98px) {
      .work-gallery {
        --gallery-h: 120px;
        gap: .5rem;
        }

      .work-gallery-play {
        width: 42px;
        height: 42px;
        }
      }

    /* The viewer, above every layer of the page. */
    .work-lightbox {
      position: fixed;
      inset: 0;
      z-index: 2147483000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 3.5rem 4.5rem;
      background: rgba(0, 0, 0, .97);
      }

    .work-lightbox[hidden] {
      display: none;
      }

    .work-lightbox-stage {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      }

    /* the picture with its caption on its foot */
    .work-lightbox-frame {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: 100%;
      max-height: 100%;
      overflow: hidden;
      border-radius: .5rem;
      }

    .work-lightbox-media {
      display: block;
      max-width: calc(100vw - 9rem);
      max-height: calc(100vh - 7rem);
      border-radius: .5rem;
      object-fit: contain;
      background: #000;
      transition: opacity .2s ease;
      }

    .work-lightbox-media.is-loading {
      opacity: .35;
      }

    .work-lightbox-error {
      margin: 0;
      color: #fff;
      font-size: 15px;
      text-align: center;
      }

    /* The buttons: no outline or tap flash on a click (a ring for the
       keyboard only), and on a desktop a hover that lights them. */
    .work-lightbox-close,
    .work-lightbox-nav,
    .work-lightbox-cap-toggle {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 46px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, .12);
      color: #fff;
      z-index: 2; /* over the picture, which comes later in the viewer */
      cursor: pointer;
      outline: none;
      -webkit-tap-highlight-color: transparent;
      -webkit-appearance: none;
      appearance: none;
      transition: background-color .2s ease, transform .2s ease;
      }

    /* bootstrap.css rings every focused button (button:focus, outline auto
       5px): a ring left round an arrow after a click. Keyboard focus only. */
    .work-lightbox .work-lightbox-close:focus,
    .work-lightbox .work-lightbox-nav:focus,
    .work-lightbox .work-lightbox-cap-toggle:focus {
      outline: none;
      }

    .work-lightbox-close:focus-visible,
    .work-lightbox-nav:focus-visible,
    .work-lightbox-cap-toggle:focus-visible {
      box-shadow: 0 0 0 2px #fff;
      }

    @media (hover: hover) {
      .work-lightbox-close:hover,
      .work-lightbox-nav:hover {
        background: rgba(255, 255, 255, .28);
        transform: scale(1.08);
        }

      .work-lightbox-nav:hover {
        transform: translateY(-50%) scale(1.08);
        }
      }

    .work-lightbox-close {
      top: .75rem;
      left: .75rem;
      }

    .work-lightbox-nav {
      top: 50%;
      transform: translateY(-50%);
      }

    .work-lightbox-nav.is-prev {
      right: .75rem;
      }

    .work-lightbox-nav.is-next {
      left: .75rem;
      }

    /* Title and caption at the foot, centred, shadowed to read on any picture. */
    .work-lightbox-cap {
      position: absolute;
      inset: auto 0 0 0;
      border-radius: 0 0 .5rem .5rem;
      padding: 2.5rem 1rem 1.25rem;
      background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent);
      color: #fff;
      text-align: center;
      z-index: 1;
      text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 2px 12px rgba(0, 0, 0, .8);
      pointer-events: none;
      }

    .work-lightbox-cap[hidden] {
      display: none;
      }

    /* the trailer's caption goes under the player, clear of its controls */
    .work-lightbox-frame.is-video .work-lightbox-cap {
      position: static;
      width: 100%;
      background: none;
      padding: .75rem 1rem 0;
      }

    .work-lightbox-frame.is-video .work-lightbox-media {
      max-height: calc(100vh - 11rem);
      }

    .work-lightbox-title {
      margin: 0;
      font-size: 16px;
      font-weight: 800;
      }

    .work-lightbox-desc {
      max-width: 52rem;
      margin: .35rem auto 0;
      font-size: 14px;
      line-height: 1.8;
      opacity: .92;
      }

    .work-lightbox-desc:empty {
      display: none;
      }

    /* the fold toggle is a phone's */
    .work-lightbox-cap-toggle {
      display: none;
      }

    @media (max-width: 991.98px) {
      .work-lightbox {
        padding: 3.5rem .5rem;
        }

      .work-lightbox-media {
        max-width: calc(100vw - 1rem);
        max-height: calc(100vh - 8rem);
        }

      .work-lightbox-nav {
        width: 40px;
        height: 40px;
        }

      .work-lightbox-nav.is-prev {
        right: .25rem;
        }

      .work-lightbox-nav.is-next {
        left: .25rem;
        }

      /* On a phone: the title, and over it an arrow that unfolds the caption
         (pointing up while folded, down while open). */
      .work-lightbox-cap {
        padding: 1.75rem .75rem 1rem;
        pointer-events: auto;
        }

      .work-lightbox-cap.has-desc .work-lightbox-cap-toggle {
        position: static;
        display: flex;
        width: 36px;
        height: 36px;
        margin: 0 auto .35rem;
        background: rgba(255, 255, 255, .16);
        }

      .work-lightbox-cap-toggle svg {
        transition: transform .2s ease;
        }

      .work-lightbox-cap.is-open .work-lightbox-cap-toggle svg {
        transform: rotate(180deg);
        }

      .work-lightbox-cap .work-lightbox-desc {
        display: none;
        }

      .work-lightbox-cap.is-open .work-lightbox-desc:not(:empty) {
        display: block;
        max-height: 40vh;
        overflow-y: auto;
        }
      }

    html.work-lightbox-open {
      overflow: hidden;
      }

    .work-collapse {
      margin-bottom: .6rem;
      padding: .8rem 1rem;
      border-radius: .6rem;
      background: var(--card-bg, rgba(255, 255, 255, .04));
      }

    /* The accordion header. font-weight on its own is not enough against a
       variable font that the theme drives through the wght axis, so the axis is
       named too - otherwise these headers sat at whatever the axis last
       inherited while their font-weight said 700. */
    .work-collapse > summary {
      cursor: pointer;
      font-family: inherit;
      font-size: .95rem;
      font-weight: 700;
      font-variation-settings: "wght" 700;
      }

    .work-collapse-body {
      margin-top: .8rem;
      line-height: 2.1;
      text-align: justify;
      }

    .work-entry {
      margin-bottom: .8rem;
      }

    .work-entry-meta {
      color: rgba(150, 150, 150, .95);
      }

    .work-badge {
      display: inline-block;
      margin-inline-end: .4rem;
      padding: .05rem .55rem;
      border-radius: .4rem;
      background: rgba(150, 242, 7, .12);
      color: var(--primary-color, #96F207);
      font-size: .78em;
      }

    /* Spoilers stay blurred until the reader asks for them. Click, not hover:
       hover reveals by accident, and does nothing at all on a touchscreen. */
    .work-spoiler {
      cursor: pointer;
      filter: blur(5px);
      transition: filter .15s ease-in-out;
      }

    .work-spoiler.is-revealed {
      cursor: auto;
      filter: none;
      }

    /* the four preview accordions, two across on desktop */
    .work-reads {
      display: grid;
      grid-template-columns: 1fr;
      gap: .75rem;
      align-items: start;
      }

    @media (min-width: 992px) {
      .work-reads {
        grid-template-columns: repeat(2, 1fr);
        }
      }

    .work-read {
      border: 1px solid rgba(128, 128, 128, .16);
      border-radius: .6rem;
      background: var(--card-bg, rgba(255, 255, 255, .04));
      }

    /* The native disclosure marker is a list-item marker, so it sits on its
       own line above a block-level child. Drop it and draw the arrow as a
       flex item instead: marker, title and "see all" then share one row. */
    .work-read-summary,
    .work-faq-question {
      display: flex;
      align-items: center;
      gap: .55rem;
      cursor: pointer;
      list-style: none;
      }

    .work-read-summary::-webkit-details-marker,
    .work-faq-question::-webkit-details-marker {
      display: none;
      }

    .work-read-summary::before,
    .work-faq-question::before {
      content: "";
      flex: 0 0 auto;
      width: .42rem;
      height: .42rem;
      margin-bottom: .18rem;
      border-bottom: 2px solid currentColor;
      border-left: 2px solid currentColor;
      opacity: .65;
      transform: rotate(-45deg);
      transition: transform .15s ease-in-out;
      }

    .work-read[open] > .work-read-summary::before,
    .work-faq[open] > .work-faq-question::before {
      transform: rotate(135deg);
      }

    .work-read-summary {
      padding: .8rem 1rem;
      font-size: .92rem;
      font-weight: 900;
      }

    /* title at the start, "see all" pinned to the far end, which on this RTL
       page is the left */
    .work-read-head {
      flex: 1 1 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
      }

    .work-read-title {
      flex: 1 1 auto;
      }

    .work-read-body {
      padding: 0 1rem 1rem;
      }

    /* every entry is its own card, so two trivia items never read as one */
    .work-read-item {
      margin-bottom: .55rem;
      padding: .7rem .85rem;
      border: 1px solid rgba(128, 128, 128, .14);
      border-radius: .5rem;
      background: rgba(128, 128, 128, .06);
      font-size: .88rem;
      line-height: 2;
      text-align: justify;
      }

    /* the accent edge is asked for on the right specifically, so it is a
       physical border: these blockquotes carry dir="ltr" for the English
       dialogue, and border-inline-start would follow that and flip to the left */
    .work-read-quote {
      margin: 0 0 1rem;
      border-right: 3px solid var(--primary-color, #96F207);
      font-style: italic;
      }

    .work-read-item:last-child {
      margin-bottom: 0;
      }

    /* one accordion per question, nested inside the FAQ accordion */
    .work-faq {
      padding: 0;
      }

    .work-faq-question {
      padding: .7rem .85rem;
      font-weight: 700;
      line-height: 1.9;
      }

    .work-faq-answer {
      padding: 0 .85rem .7rem;
      }

/* Works page styles: section 2 */
.mb-coverimg {
        display: none;
    }

    .content-toggle:after {
        width: 0 !important;
    }



    #dubbed-info {
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transition: max-height 0.4s ease, opacity 0.4s ease;
        display: none;
        width: -webkit-fill-available;
    }

    @media (hover: hover) {
        #openDubbedInfo:hover {
            background: unset !important;
        }
    }



    @media screen and (min-width:769px) {

        #openDubbedInfo {
            width: fit-content !important;
            position: absolute;
            left: 1rem;
            top: 0;
        }

        .person-thumb {
            width: 75px !important;
            height: 90px !important;
        }

        .person-item {
            width: 75px !important;
        }

        .persons-items {
            height: fit-content !important;
            width: fit-content !important;
            gap: 22px;
            padding: 12px;
        }

        .person-name {
            font-size: 12px !important;
        }

        .persons-list {
            width: fit-content;
            padding: 0 .3rem;
        }

        .person-role {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .persons {
            flex-wrap: nowrap !important;
        }






    }

    @media screen and (max-width:768px) {




        .download-season {
            z-index: 2;
            position: relative;
        }




        div.entry-poster {
            position: static !important;
            display: inline-flex !important;
            gap: .7rem !important;
        }



        #post-intro .entry-poster .btn-watch {
            top: .6rem !important;
            left: .6rem !important;
            width: 24px !important;
            height: 24px !important;
        }

        #post-intro .entry-poster .btn-tracking {
            top: .6rem;
            left: 2.5rem;
            width: 24px !important;
            height: 24px !important;
        }

        #post-intro .entry-poster img {
            width: 140px !important;
            min-width: 140px !important;
            height: 200px !important;
            max-width: inherit !important;
            /* The source is the 256x256 square thumbnail again. cover crops it
               to the slot at the right proportions; the old fill stretched the
               square and distorted every face in it. Anchored to the top so the
               crop takes it off the bottom, matching the desktop rule. */
            -o-object-fit: cover !important;
            object-fit: cover !important;
            -o-object-position: top center !important;
            object-position: top center !important;
            border-radius: var(--border-radius) !important;


            margin-left: .2rem;
        }


        .fsz-17.d-inline-flex.gap-05.lh-15>svg {
            width: 24px !important;
        }

        .fsz-17.d-inline-flex.gap-05.lh-15>span {
            font-size: 14px !important;
        }

        .fsz-17.d-inline-flex.gap-05.lh-15>span>strong {
            font-size: 14px !important;
        }

        .col-auto.col-lg-auto.d-flex.align-items-center.gap-05.my-3>svg {
            width: 20px !important;
        }



        .col-auto.col-lg-auto.d-flex.align-items-center.gap-05.my-3 {
            margin-bottom: .4rem !important;
            margin-top: .4rem !important;
        }


        .entry-title {
            font-size: 20px !important;
            margin-bottom: 1rem !important;
            -webkit-padding-end: unset !important;
            padding-inline-end: unset !important;
        }

        .entry-icons i {
            width: 22px !important;
            height: 22px !important;
        }

        .entry-icons i svg {
            width: 15px !important;
            height: 15px !important;
        }


        #post-intro .entry-icons {
            text-align: -webkit-center;
            margin-top: .5rem;
            position: unset !important;
            display: flex;
            place-self: center;
            gap: 10px;

        }


        .mb-coverimg {
            display: block !important;
            position: fixed;
            top: 0;
            /* Fixed positioning is shrink-to-fit, and a replaced element given
               only a height takes its intrinsic ratio as the width - so without
               these two the cover rendered narrower than the phone and
               object-fit had no box to cover. */
            left: 0;
            width: 100%;
            z-index: 1;
            height: 330px;
            object-fit: cover;

            -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-position: top;
            -webkit-mask-size: 100% 100%;
            mask-image: linear-gradient(to bottom, #000000 30%, transparent 100%);
            mask-repeat: no-repeat;
            mask-position: top;
            mask-size: 100% 100%;
            background-color: white;


            transition: opacity 0.1s linear;


        }


        #post-intro .coverimg {
            -webkit-filter: blur(120px) brightness(0.20);
            filter: blur(120px) brightness(0.20);
        }


        .image-side {
            display: flex;
            flex-direction: row-reverse;
        }

        .entry-title {
            text-align: left !important;
        }

        .note {
            font-size: 11px !important;
        }

        .note svg {
            width: 18px !important;
        }


        .entry-cast {
            padding-bottom: .5rem;
        }


        .d-flex.flex-column.pt-3.position-relative {
            padding-top: 0 !important;
        }







        .download-season.bg-card.rounded button {
            font-size: 12px !important;
        }


        .download-season.bg-card.rounded button span {
            font-size: 9px !important;
            padding: 10px 10px;
        }


        .col-auto.col-lg-auto.d-flex.align-items-center.gap-05.my-3 {
            width: 50%;
        }

        .note {
            direction: rtl;
        }




    }






    button.btn.btn-icon svg,
    button.btn.btn-icon span {
        display: inline-block;
        transform-origin: center bottom;
    }

    button.btn.btn-icon.fx svg,
    button.btn.btn-icon.fx span {
        animation: like-bounce 0.35s ease-out;
    }

    @keyframes like-bounce {
        0% {
            transform: translateY(0) scale(1);
        }

        30% {
            transform: translateY(-6px) scale(1.3);
        }

        55% {
            transform: translateY(2px) scale(0.9);
        }

        80% {
            transform: translateY(-3px) scale(1.1);
        }

        100% {
            transform: translateY(0) scale(1);
        }
    }






    .persons-list {
        margin: 30px 0;
    }

    .persons-list h3 {
        font-size: 18px;
        margin-bottom: 15px;
        font-weight: 600;
    }

    .persons-items {
        display: flex;
        flex-wrap: wrap;
        gap: 25px;
        margin-top: 1.5rem;
        border-radius: var(--border-radius);
        border: 1px solid var(--border-color);
        padding: 14px;
    }

    .person-item {
        text-align: center;
        text-decoration: none;
        color: #222;
        width: 85px;
        transition: all .3s ease;
    }

    @media (hover: hover) {
        .person-item:hover {
            transform: translateY(-5px);
        }
    }

    .person-thumb {
        width: 85px;
        /* A portrait, 75 wide by 90 high; 50% rounds it to an oval. The
           picture covers it, kept near its top so faces stay in frame. */
        aspect-ratio: 75 / 90;
        height: auto;
        border-radius: 50%;
        background-size: cover;
        background-position: center top 15%;
        margin: 0 auto 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .person-name {
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 4px;
        color: var(--text-body);
    }

    .person-role {
        font-size: 12px;
        color: #666;
    }

    #reviews .comment-list,
    #reviews .comment-replies {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #reviews .comment {
        margin-bottom: 1rem;
    }

    /* Replies sit inside the comment they answer. The indent and the rule down
       its side are what say so - and both are lighter on a phone, where 2.5rem
       of every screen is too much to give up. */
    #reviews .comment-replies {
        margin: 1rem 0 0;
        padding-inline-start: 1.5rem;
        border-inline-start: 2px solid var(--border-color);
    }

    #reviews .comment-replies:empty {
        display: none;
    }

    #reviews .comment-replies .comment:last-child {
        margin-bottom: 0;
    }

    @media (max-width: 576px) {
        #reviews .comment-replies {
            padding-inline-start: .75rem;
        }
    }

    #reviews .commnetbody {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        padding: 1rem;
    }

    #reviews .avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: var(--bg-body);
        object-fit: cover;
    }

    #reviews .comment-text {
        white-space: pre-line;
    }

    #reviews .reply-chain {
        margin: 0 0 1rem;
        padding-right: 1rem;
        border-right: 2px solid var(--primary-color);
    }

    #reviews .reply-chain-item {
        background: var(--bg-body);
        border: 1px solid var(--border-color);
        border-radius: calc(var(--border-radius) - 2px);
        padding: .75rem;
    }

    #reviews .reply-chain-item:not(:last-child) {
        margin-bottom: .5rem;
    }

    #reviews .reply-chain-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        margin-bottom: .35rem;
        font-size: 13px;
        font-weight: 700;
    }

    #reviews .reply-chain-meta a,
    #reviews .reply-chain-text {
        color: var(--text-muted);
    }

    #reviews .reply-chain-text {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 13px;
        line-height: 1.8;
        white-space: pre-line;
    }

    #reviews .like-dislike {
        border-radius: 50px;
        overflow: hidden;
    }

    .sfc-wrap {
        display: flex;
    }

    .sfc-aside {
        width: 14%;
        min-width: 14%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 2.5rem;
        border-radius: .5rem;
        background-color: rgb(25 25 25);
    }

    .sfc-aside-inner {
        text-align: center;
        padding: 1rem;
    }

    .sfc-aside-label {
        place-self: center;
        margin-top: 1.5rem;
        font-size: 1.2rem;
        font-weight: bold;
    }

    .sfc-list-wrap {
        width: 84%;
        padding: 1.5rem;
        border-radius: var(--border-radius-half);
        background-color: var(--bg-card);
        box-shadow: 0 0 10px 0 #0000002b;
    }

    body.light-mode .sfc-aside {
        background: #fff !important;
    }

    @media (max-width:768px) {
        #reviews .comment.is-reply {
            margin-right: 1rem;
        }
    }

    @media (max-width: 769px) {
        .sfc-wrap {
            flex-wrap: wrap;
            justify-content: center;
            gap: 1rem;
        }

        .sfc-aside {
            width: -webkit-fill-available !important;
            margin-left: 0 !important;
        }

        .sfc-aside-inner {
            width: -webkit-fill-available;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            padding: 1rem;
        }

        .sfc-aside-inner svg {
            width: 40px !important;
        }

        .sfc-aside-label {
            margin-top: 0 !important;
        }

        .sfc-list-wrap {
            width: -webkit-fill-available !important;
            padding: 1.5rem 1rem !important;
            box-shadow: unset !important;
        }
    }

    /* ------------------------------------------------------------------
       The actions on the poster: like, dislike, follow, add-to-list, trailer.

       One piece of markup, two layouts. From 992px - where the hero becomes
       two columns - this is the rail down the right edge of the poster, as it
       was. Below that the hero stacks, the poster shrinks, and a vertical rail
       over the artwork is exactly where a thumb cannot reach it, so the same
       buttons become a row under the image.

       The names are still in the markup, hidden from the eye but read out by a
       screen reader, and so are the counts - which is also what keeps the
       counters the rate and follow handlers write into.
       ------------------------------------------------------------------ */
    .entry-poster .work-actions {
        position: absolute;
        z-index: 3;
        top: 50%;
        right: .55rem;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .35rem;
        padding: .35rem .3rem;
        border-radius: 999px;
        background: rgba(0, 0, 0, .52);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }

    .entry-poster .work-actions .btn {
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 38px;
        height: 38px;
        min-width: 0;
        padding: 0;
        border: 0;
        border-radius: 50%;
        line-height: 1;
        background: rgba(255, 255, 255, .1);
        color: #fff;
        transition: background .18s ease, color .18s ease, transform .18s ease;
    }

    .entry-poster .work-actions .btn svg {
        /* A block, so no baseline gap sits under it and its middle is the
           middle of the 20px it takes - the line a figure beside it lines up on. */
        display: block;
        width: 20px;
        height: 20px;
    }

    .entry-poster .work-actions .btn:active {
        transform: scale(.93);
    }

    .entry-poster .work-actions .btn:focus-visible {
        outline: 2px solid var(--primary-color);
        outline-offset: 2px;
    }

    /* The states that persist. .filled is what the rate handler writes when a
       visitor has liked or disliked, and [aria-expanded] is the open list
       panel - both have to stand on a touch screen, so they are stated apart
       from the hover styling below rather than sharing a selector list with
       it. Sharing one was what would have taken the "you liked this" colour
       away from every phone once hover became pointer-only. */
    .entry-poster .work-actions .btn.work-action-like.filled {
        color: var(--primary-color);
        background: rgba(150, 242, 7, .16);
    }

    .entry-poster .work-actions .btn.work-action-dislike.filled {
        color: var(--danger-color);
        background: var(--danger-lighten-color);
    }

    .entry-poster .work-actions .btn.work-action-follow.filled {
        color: var(--warning-color);
        background: var(--warning-lighten-color);
    }

    .entry-poster .work-actions .btn.work-action-list[aria-expanded="true"] {
        color: var(--info-color);
        background: var(--info-lighten-color);
    }

    /* On the watchlist: the bookmark fills in, so one look at the rail says
       what is already on it. */
    .entry-poster .work-actions .btn.work-action-watchlist.filled {
        color: var(--primary-color);
        background: rgba(150, 242, 7, .16);
    }

    .entry-poster .work-actions .btn.work-action-watchlist.filled svg {
        fill: currentColor;
    }

    /* Hover, only where there is a pointer to hover with. On a touch screen
       :hover latches after a tap and stays latched until something else is
       tapped, so an icon a visitor pressed keeps a colour that means a state
       it is not in. */
    @media (hover: hover) {
        .entry-poster .work-actions .btn:hover {
            transform: scale(1.07);
        }

        .entry-poster .work-actions .btn.work-action-like:hover {
            color: var(--primary-color);
            background: rgba(150, 242, 7, .16);
        }

        .entry-poster .work-actions .btn.work-action-dislike:hover {
            color: var(--danger-color);
            background: var(--danger-lighten-color);
        }

        .entry-poster .work-actions .btn.work-action-follow:hover {
            color: var(--warning-color);
            background: var(--warning-lighten-color);
        }

        .entry-poster .work-actions .btn.work-action-list:hover {
            color: var(--info-color);
            background: var(--info-lighten-color);
        }

        .entry-poster .work-actions .btn.work-action-watchlist:hover {
            color: var(--primary-color);
            background: rgba(150, 242, 7, .16);
        }

        .entry-poster .work-actions .btn.work-action-trailer:hover {
            color: var(--primary-color);
            background: rgba(150, 242, 7, .16);
        }
    }

    .entry-poster .work-actions .f2m-list-host {
        display: flex;
    }

    /* The name, on hover and on keyboard focus. It opens away from the poster
       so it never covers the artwork it belongs to, and :after is used
       deliberately - .like-dislike .btn:not(:last-child):after draws a
       separator meant for a row, and this replaces it. */
    .entry-poster .work-actions .btn:after {
        content: attr(data-tip);
        position: absolute;
        z-index: 4;
        top: 50%;
        bottom: auto;
        left: calc(100% + 10px);
        /* Both sides said out loud on purpose: the separator rule this replaces
           leaves a right and a height behind, and a box with a left and a right
           and a width of its own is over-constrained - which on a right-to-left
           page is resolved by dropping the left, putting the name back over the
           poster. */
        right: auto;
        transform: translateY(-50%);
        width: max-content;
        max-width: 11rem;
        height: auto;
        margin: 0;
        padding: .25rem .6rem;
        border-radius: var(--border-radius-half);
        background: rgba(0, 0, 0, .88);
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        line-height: 26px;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .16s ease;
    }

    .entry-poster .work-actions .btn:before {
        content: "";
        position: absolute;
        z-index: 4;
        top: 50%;
        bottom: auto;
        left: calc(100% + 4px);
        right: auto;
        width: 0;
        height: 0;
        transform: translateY(-50%);
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-right: 6px solid rgba(0, 0, 0, .88);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .16s ease;
    }

    .entry-poster .work-actions .btn:focus-visible:after,
    .entry-poster .work-actions .btn:focus-visible:before {
        opacity: 1;
        visibility: visible;
    }

    @media (hover: hover) {
        .entry-poster .work-actions .btn:hover:after,
        .entry-poster .work-actions .btn:hover:before {
            opacity: 1;
            visibility: visible;
        }
    }

    /* Under 992px the rail becomes a row under the poster. The figure is laid
       out as a column so the buttons can simply follow the image, and the pill
       loses its backdrop - it sits over the page here, not over artwork. 40px
       is the floor, not 38: a thumb is about 44px wide and these sit side by
       side, where a slip hits the neighbour. */
    /* ---- The counts on like and dislike --------------------------
       The numbers are in the markup already, kept for the screen reader
       and for the rate handler to write into; what changes here is who
       sees them.

       On a phone they are simply shown: the two buttons grow into pills
       with the figure beside the thumb. There is no hover on a phone, so
       a count that only appears on one would never appear at all.

       With a pointer the button opens instead, and it opens towards the
       middle of the page: the rail is pinned to the poster's right edge
       and its items are aligned to the cross-axis start, which on this
       right-to-left page is the right - so the extra width can only come
       off the left side.
       ------------------------------------------------------------- */
    .entry-poster .work-actions .btn.work-action-like .count,
    .entry-poster .work-actions .btn.work-action-dislike .count {
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }

    /* The figure centred on its drawn digits, not on the font's line box:
       the box is trimmed to the cap height and the baseline, so the space the
       font keeps above and below its glyphs no longer pushes the number off
       the icon's middle - the same fix as the hero's ratings. Where text-box
       is not supported the figure stays as it was. */
    .entry-poster .work-actions .btn.work-action-like .count,
    .entry-poster .work-actions .btn.work-action-dislike .count,
    .entry-poster .work-actions .btn.work-action-watchlist .count {
        text-box: trim-both cap alphabetic;
    }

    @media (hover: hover) and (min-width: 992px) {
        /* Pinned right, so growth goes left - and held at the width of
           one button, so the pill behind the rail does not grow with
           them. The open buttons hang out of it over the artwork, which
           is what the negative margin below pays for: a box 78 wide with
           40 taken off its end measures 38 to the rail, the width it had
           when it was a circle. */
        .entry-poster .work-actions {
            align-items: flex-start;
            width: calc(38px + .6rem);
            overflow: visible;
        }

        .entry-poster .work-actions .btn.work-action-like,
        .entry-poster .work-actions .btn.work-action-dislike {
            grid-auto-flow: column;
            place-items: center;
            justify-content: center;
            width: 38px;
            /* The space between the icon and the figure, as a column gap
               rather than a margin on the figure: at rest the figure has
               no width and the gap is zero, so the icon stays in the
               middle of its circle rather than being pushed off centre
               by a margin that is there whether or not anything follows
               it. */
            column-gap: 0;
            overflow: hidden;
            border-radius: 999px;
            transition: background .18s ease, color .18s ease,
                        transform .18s ease, width .2s ease,
                        column-gap .2s ease, margin .2s ease;
        }

        /* Out of the screen-reader clip and into the button, but at no
           width until the pointer is on it - a span that is display: none
           cannot be transitioned, and one that is absolutely positioned
           does not push the button open. */
        .entry-poster .work-actions .btn.work-action-like .count,
        .entry-poster .work-actions .btn.work-action-dislike .count {
            position: static;
            align-self: center;
            width: 0;
            height: auto;
            margin: 0;
            padding: 0;
            clip: auto;
            overflow: hidden;
            opacity: 0;
            /* The digits sit on their own line box; without this the
               figure rides on a baseline that is not the icon's middle. */
            line-height: 1;
            transition: width .2s ease, opacity .15s ease;
        }

        /* Clipped sideways only - that is what the opening needs. Clipped
           both ways, the tops of the digits were cut off: the figure's box is
           trimmed to the digits (text-box), so their ink reaches just past it. */
        @supports (overflow: clip) {
            .entry-poster .work-actions .btn.work-action-like .count,
            .entry-poster .work-actions .btn.work-action-dislike .count {
                overflow-x: clip;
                overflow-y: visible;
            }
        }

        /* Only the one under the pointer opens. */
        .entry-poster .work-actions .btn.work-action-like:hover,
        .entry-poster .work-actions .btn.work-action-dislike:hover {
            width: 78px;
            /* Taken back off the end, so the rail measures the button at
               38 however wide it is drawn and the pill behind it stays
               the size it was. inline-end is the left on this page,
               which is the side the extra width appears on. */
            margin-inline-end: -40px;
            column-gap: .45rem;
            /* The width is the affordance on these two. The scale the other
               buttons take on hover would push the right edge out as well,
               and that edge is the one this is anchored to. */
            transform: none;
        }

        .entry-poster .work-actions .btn.work-action-like:hover .count,
        .entry-poster .work-actions .btn.work-action-dislike:hover .count {
            /* Five digits of 13px bold come to about 35px; 3.2em is 42,
               which is room for six. */
            width: 3.2em;
            opacity: 1;
        }

        /* The name of the button is what the tooltip is for; with the
           count beside the icon the two would collide. */
        .entry-poster .work-actions .btn.work-action-like:hover:after,
        .entry-poster .work-actions .btn.work-action-like:hover:before,
        .entry-poster .work-actions .btn.work-action-dislike:hover:after,
        .entry-poster .work-actions .btn.work-action-dislike:hover:before {
            opacity: 0;
            visibility: hidden;
        }

        /* Open, these three hang out of the rail over the artwork, where a
           tint of their own colour is no background at all - on a light
           poster the green figure all but disappears. So, open, each takes
           the rail's dark glass, solid enough to read on any poster, keeps
           its colour for the icon and the figure, and is ringed in it. */
        .entry-poster .work-actions .btn.work-action-like:hover,
        .entry-poster .work-actions .btn.work-action-dislike:hover,
        .entry-poster .work-actions .btn.work-action-watchlist:hover {
            background: rgba(10, 11, 12, .88);
            -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
            box-shadow: inset 0 0 0 1.5px currentColor, 0 4px 14px rgba(0, 0, 0, .4);
        }

        .entry-poster .work-actions .btn.work-action-like:hover .count,
        .entry-poster .work-actions .btn.work-action-dislike:hover .count,
        .entry-poster .work-actions .btn.work-action-watchlist:hover .count {
            text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
        }
    }

    @media (max-width: 991.98px) {
        /* The two of them go to the bottom of the group and take a row
           of their own: half the width each, less the 8px that holds
           them apart. The other three - follow, list, trailer - stay
           round and stay above them. */
        /* The title block runs up against the poster beside it - five
           pixels of grid gap is not a margin - so the subtitle is held
           off it. Physical right: the poster is in the first column,
           which on this right-to-left page is the right-hand one. */
        .entry-subtitle {
            padding-right: 6px;
        }

        /* The three badges - subtitled, dubbed, the rest - move onto the
           bottom of the poster instead of sitting in the column under
           it. Same cell as the image, so they overlap it: a grid places
           two items in one cell quite happily, and end/center puts them
           across the foot of it. */
        .entry-poster .entry-icons,
        #post-intro .entry-icons {
            grid-column: 1;
            grid-row: 1;
            align-self: end;
            justify-self: center;
            z-index: 2;
            margin: 0 0 .5rem;
            padding: .25rem .4rem;
            border-radius: 999px;
            background: rgba(0, 0, 0, .55);
            -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
        }

        /* The group runs the full width of the hero rather than sitting in
           the poster's own column. .entry-poster is display: contents at
           this width, so this is a grid item of the hero itself and can
           span it. */
        .entry-poster .work-actions {
            grid-column: 1 / -1;
            flex-wrap: wrap;
            row-gap: .5rem;
            column-gap: 1rem;
            width: 100%;
        }

        .entry-poster .work-actions .btn {
            order: 1;
        }

        /* A line break between the round three and the pair. Flexbox has
           no break-before, so this is the standing trick for one: an empty
           item that is a whole line wide, ordered with the round buttons
           and last among them, which leaves the pair no room on that line
           and sends it to the next. Without it the like fits beside the
           other three and only the dislike wraps. */
        .entry-poster .work-actions::after {
            content: "";
            order: 1;
            flex: 0 0 100%;
            height: 0;
            margin: 0;
        }

        .entry-poster .work-actions .btn.work-action-like,
        .entry-poster .work-actions .btn.work-action-dislike {
            order: 2;
            flex: 0 0 calc(50% - 8px);
            grid-auto-flow: column;
            gap: .4rem;
            width: auto;
            min-width: 0;
            height: 44px;
            padding-inline: .7rem;
            border-radius: 999px;
        }

        .entry-poster .work-actions .btn.work-action-like .count,
        .entry-poster .work-actions .btn.work-action-dislike .count {
            position: static;
            width: auto;
            height: auto;
            margin: 0;
            overflow: visible;
            clip: auto;
        }
    }
    @media (max-width: 991.98px) {
        .entry-poster {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .entry-poster .work-actions {
            position: static;
            transform: none;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            /* 16px between the two halves, which is what makes a pair of
               calc(50% - 8px) buttons meet the two edges of the box. This
               rule sits after the one that sets the pair up, so a column-gap
               declared there would lose to a plain gap here. */
            gap: .5rem 1rem;
            width: 100%;
            margin-top: .7rem;
            padding: 0;
            border-radius: 0;
            background: none;
            -webkit-backdrop-filter: none;
            backdrop-filter: none;
        }

        .entry-poster .work-actions .btn {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, .08);
        }

        /* The row is horizontal here, so the name opens below the button
           instead of off its side. */
        .entry-poster .work-actions .btn:after {
            top: calc(100% + 8px);
            left: 50%;
            transform: translateX(-50%);
        }

        .entry-poster .work-actions .btn:before {
            top: calc(100% + 2px);
            left: 50%;
            transform: translateX(-50%);
            border-top: 0;
            border-bottom: 6px solid rgba(0, 0, 0, .88);
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
        }
    }

    /* A screen with no pointer never fires :hover, and :focus-visible stays
       away from taps - so on a phone these were unlabelled icons and nothing
       said what they did. A tap holds the name until the tap moves on, which
       is the only moment a phone has to show it. */
    @media (hover: none) {
        .entry-poster .work-actions .btn:focus:after,
        .entry-poster .work-actions .btn:focus:before {
            opacity: 1;
            visibility: visible;
        }
    }

    @media (max-width:768px) {
        .persons-items {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            gap: 15px;
            scrollbar-width: none;
        }

        .person-item {
            flex: 0 0 calc(28% - 10px);
        }
    }

/* Works page styles: section 3 */
.work-comment-captcha,
    .work-report-captcha {
      display: grid;
      gap: .75rem;
      align-items: center;
      grid-template-columns: auto minmax(120px, 220px) minmax(160px, 1fr);
    }

    .work-comment-captcha img,
    .work-report-captcha img {
      width: 100%;
      min-height: 48px;
      object-fit: contain;
      border-radius: var(--form-control-radius);
      background: var(--bg-card);
      border: 1px solid var(--border-color);
    }

    #work-comment-form textarea {
      min-height: 130px;
      resize: vertical;
    }

    /* The theme's grid has a horizontal gutter and no vertical one: --gutter is
       a single value, spent on the columns' left and right padding, and nothing
       in either stylesheet ever sets a row-gap. So any column that wraps onto a
       line of its own sits flush against the one above it - which is the whole
       comment form: name and email, the text box, the captcha, the button. */
    #respond .row {
      row-gap: 1rem;
    }

    /* Same thing inside a comment card, where the actions column wraps under
       the comment text on a narrow screen. */
    #reviews .commnetbody .row {
      row-gap: .75rem;
    }

    #reviews .comment {
      margin-bottom: 1.25rem;
    }

    /* The card: a little more room than the theme default, so the avatar, the
       text and the buttons are not pressed against its edges. */
    #reviews .commnetbody {
      padding: 1.15rem 1.25rem;
    }

    @media (max-width: 576px) {
      #reviews .commnetbody {
        padding: 1rem;
      }
    }

    #reviews .comment-meta {
      gap: .5rem;
      margin-bottom: .5rem;
      font-weight: 700;
    }

    /* On a phone the author line stacks, and the pieces need their own spacing. */
    #reviews .comment-replyto,
    #reviews .comment-date {
      display: inline-block;
      font-weight: 400;
    }

    /* The date arrives after the page does, so the slot takes no room until it
       has something in it - otherwise the author line shifts as it lands. */
    #reviews .comment-date:empty {
      display: none;
    }

    /* Pushed to the end of the author line, away from the name. */
    #reviews .comment-date {
      margin-inline-start: auto;
    }

    #reviews .comment-text {
      margin-top: .25rem;
      overflow-wrap: anywhere;
    }

    /* The action column is a row on a phone and a stack from lg up; both need
       to be clear of the comment text above them. */
    #reviews .comment .like-dislike {
      padding: .35rem .6rem;
      border-radius: var(--btn-border-radius);
    }

    /* The reply notice sits directly on the field below it once the alert's own
       margin is the only thing between them. */
    #respond [data-comment-reply-notice] {
      margin-bottom: 1rem;
    }

    #reviews .commentslist li .commnetbody .comment-reply-link,
    #reviews .comment-list li .commnetbody .comment-reply-link,
    #reviews .commentslist li .commnetbody .comment-report-link,
    #reviews .comment-list li .commnetbody .comment-report-link {
      width: 100%;
      margin-top: .75rem;
      line-height: 36px;
      padding: 0 1rem;
      color: var(--text-body);
      border-width: 1px;
      background-color: transparent;
      border-color: var(--border-color);
      border-radius: var(--btn-border-radius);
    }

    @media (hover: hover) {
      #reviews .commentslist li .commnetbody .comment-reply-link:hover,
      #reviews .comment-list li .commnetbody .comment-reply-link:hover,
      #reviews .commentslist li .commnetbody .comment-report-link:hover,
      #reviews .comment-list li .commnetbody .comment-report-link:hover {
        color: var(--bg-body);
        border-color: var(--primary-color);
        background-color: var(--primary-color);
      }
    }

    .comment-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: .2rem .55rem;
      border-radius: 999px;
      font-size: .75rem;
      font-weight: 700;
      line-height: 1.4;
      margin-inline-start: .5rem;
      white-space: nowrap;
    }

    .comment-badge--spoiler {
      background: rgba(150, 242, 7, .12);
      color: #96F207;
      border: 1px solid rgba(150, 242, 7, .35);
    }

    @media (max-width: 768px) {
      .work-comment-captcha,
      .work-report-captcha {
        grid-template-columns: 1fr;
      }
    }

    /* ------------------------------------------------------------------
       The heading, its subtitle, and the score strip.

       The API sends Title as a full SEO sentence - "دانلود سریال … بدون
       سانسور با زیرنویس فارسی چسبیده" - which as an h1 is a wall of words at
       28px that nobody reads and that pushes everything else below the fold.
       The heading is the short name now; that sentence is the subtitle one
       line down, where it is the right size for what it is.

       The three of them are one group, .entry-head, because under 992px they
       move beside the poster together while everything below them stays full
       width. See the mobile block at the end of this file.
       ------------------------------------------------------------------ */
    .entry-head .entry-title {
        margin-bottom: 0;
    }

    .entry-subtitle {
        margin-top: .7rem;
        /* The gap under the subtitle is stated here rather than only as the
           strip's margin-top, so the subtitle keeps its breathing room even
           where the score strip is absent - a title with no score at all. */
        margin-bottom: .6rem;
        color: var(--text-muted, #9aa08e);
        font-size: 14px;
        font-weight: 500;
        line-height: 1.9;
    }

    /* Every score the page has, in one strip under the subtitle instead of
       IMDb alone up here and the other three buried in a tab further down.
       A logo and a number per chip, nothing else: the vote counts and the
       second-opinion scores that used to sit under each number turned four
       chips into a paragraph, and they are what the ratings tab is for.

       Chips wrap rather than scroll: there are at most four, and a row that
       scrolls hides the fourth on exactly the screens that have room for it
       on a second line. */
    /* align-items: center, not stretch: the four logos are different shapes -
       IMDb is a wide wordmark, Metacritic and Rotten Tomatoes are square, the
       site mark is tall - and stretching the chips to a shared height left
       each number sitting at its own offset inside its box. Centred against a
       shared min-height, the numbers land on one line across the strip. */
    .work-scores {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: .6rem;
        margin-top: 1.1rem;
    }

    .work-score {
        display: inline-flex;
        align-items: center;
        gap: .55rem;
        min-height: 42px;
        /* More room after the number than before the logo: the number is the
           thing being read, and in this direction it ends at the left edge. */
        padding-block: .4rem;
        padding-inline: .85rem 1.1rem;
        border: 1px solid rgba(255, 255, 255, .09);
        border-radius: var(--border-radius-half, .5rem);
        background: rgba(255, 255, 255, .04);
        color: inherit;
        text-decoration: none;
        line-height: 1.2;
        transition: border-color .18s ease, background .18s ease;
    }

    /* One height for every mark, width left to the viewBox, so four logos of
       four different aspect ratios still centre on the same line. */
    .work-score-logo {
        flex: 0 0 auto;
        display: block;
        height: 18px;
        width: auto;
    }

    @media (hover: hover) {
        a.work-score:hover {
            border-color: rgba(150, 242, 7, .4);
            background: rgba(150, 242, 7, .08);
            color: inherit;
        }
    }

    /* line-height: 1 on both, so the number's box is the glyphs and nothing
       else - an inherited line-height is what tips a number off the centre
       line of the chip beside it. */
    .work-score-value {
        display: inline-flex;
        align-items: center;
        font-size: 15px;
        font-weight: 500;
        line-height: 1;
        white-space: nowrap;
    }

    .work-score-value strong {
        font-size: 16px;
        font-weight: 800;
        line-height: 1;
    }

    .work-score-imdb .work-score-value strong {
        color: #f5c518;
    }

    /* No colour forced on the site mark: it is inline SVG whose first path
       carries .text-primary and whose second inherits the chip's own colour,
       so the two-tone comes from the markup. Overriding `color` here would
       flatten both paths to one shade. */
    .work-score-site .work-score-value strong {
        color: var(--primary-color, #96F207);
    }

    /* Readers with the work on their watchlist: the eye and the number in the
       site's colour, then what the number is, in the body's muted tone. */
    .work-score-watching .work-score-logo {
        width: 18px;
        color: var(--primary-color, #96F207);
    }

    .work-score-watching .work-score-value {
        gap: .35rem;
    }

    .work-score-watching .work-score-value strong {
        color: var(--primary-color, #96F207);
    }

    .work-score-watching .work-score-note {
        font-size: 13px;
        font-weight: 500;
        color: var(--text-muted, #979797);
    }

    /* ------------------------------------------------------------------
       The phone jump bar.

       This page is over a megabyte of markup, and the three things a visitor
       came for - the links, the details, the comments - sit thousands of
       pixels apart. On a phone, reaching the comments means scrolling past
       309 download rows. This offers all three from the top of the page.

       Plain anchors, so they work with no script at all; the smooth scroll in
       works.dj.html is decoration on top of them. Hidden from 1200px up,
       where the page is wide enough to navigate on its own.
       ------------------------------------------------------------------ */
    /* A scrollable tab strip. One bordered track, the tabs sitting in it edge
       to edge with hairlines between them, and the row scrolls sideways rather
       than dividing the width - a label is never squeezed, and the strip takes
       more tabs later without redesign.

       No hover and no current-section styling: on a touch screen :hover latches
       after a tap and a lit tab reads as a selected filter rather than as a link
       to somewhere further down the page. Focus keeps its ring, which is the
       keyboard affordance, not a hover effect. */
    .work-jump {
        display: flex;
        flex-wrap: nowrap;
        gap: 0;
        margin-top: 1.1rem;
        padding: 3px;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: .7rem;
        background: rgba(255, 255, 255, .04);
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
    }

    .work-jump::-webkit-scrollbar {
        display: none;
    }

    /* A third of the track each. The basis is what sets the width, and
       flex-grow is there only so the two-tab case - a title with no download
       box - still fills the track instead of leaving a third of it empty.
       border-box, or the horizontal padding would be added to the third and
       three tabs would no longer fit. */
    .work-jump-item {
        flex: 1 0 33.333%;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .4rem;
        min-height: 42px;
        padding: 0 .6rem;
        border: 0;
        border-radius: .55rem;
        background: none;
        color: inherit;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
    }

    .work-jump-item > svg {
        flex: 0 0 auto;
        opacity: .7;
    }

    .work-jump-item:focus-visible {
        outline: 2px solid var(--primary-color);
        outline-offset: -2px;
    }

    /* An anchor jump that lands under the fixed header shows the section's
       second line as its first. This keeps the heading clear of it. */
    #downloads,
    #additional-information,
    #reviews {
        scroll-margin-top: 90px;
    }

    /* ------------------------------------------------------------------
       The hero under 992px: poster beside the heading, actions above the text.

       The theme drops #post-intro .wrapper to a single column here, which put
       the poster in a band of its own and pushed the title, the scores and
       everything else below it - so a phone opened on artwork and had to
       scroll to learn what it was looking at.

       Both columns are flattened with `display: contents` so their contents
       become grid items of .wrapper itself. That is what lets the poster, the
       heading group and the action row be placed against each other while they
       live in different branches of the markup - the alternative was a second
       copy of the heading inside the image column, and two copies of the rate
       buttons would double-fire the handler in script.js.

       `!important` is not decoration here: .entry-side carries Bootstrap's
       .d-flex and .image-side is set to flex by the theme's own 768px block,
       both of which are `display: ... !important` and would otherwise win.

       Grid column 1 is the right-hand column on this right-to-left page, which
       is where the poster belongs. Rows: 1 poster + heading, 2 poster badges,
       3 the action row, 4 and on everything else in reading order.
       ------------------------------------------------------------------ */
    @media (max-width: 991.98px) {
        #post-intro .wrapper {
            grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
            align-items: start;
            row-gap: 0;
        }

        #post-intro .wrapper > .image-side,
        #post-intro .wrapper > .image-side > div,
        #post-intro .wrapper > .image-side > div > figure.entry-poster,
        #post-intro .wrapper > .entry-side {
            display: contents !important;
        }

        /* The empty twin of the poster figure. It draws nothing, but flattened
           into the grid it would still claim a cell. */
        #post-intro .wrapper > .image-side > div > div.entry-poster {
            display: none !important;
        }

        #post-intro .wrapper > .image-side > div > figure.entry-poster > img {
            grid-column: 1;
            grid-row: 1;
        }

        #post-intro .wrapper > .entry-side > .entry-head {
            grid-column: 2;
            grid-row: 1;
            padding-top: .25rem;
        }

        /* Dubbed / hard-sub badges stay with the poster they describe -
           and sit on it rather than under it: the same cell as the image,
           at the foot and across the middle. This rule comes after the one
           that dresses them, so the row has to be set here or it would win
           with the 2 it used to carry. */
        #post-intro .entry-icons {
            grid-column: 1;
            grid-row: 1;
            /* Centred on the poster, not on the column. The image is pinned
               to 140px by the rule above while its column measures about
               121, so it hangs over the edge - and justify-self: center
               would centre these on the column and leave them 10px off the
               picture. Given the poster's own width and aligned to the same
               edge, they centre on the poster itself. */
            justify-self: start;
            width: 140px;
            /* max-width: 100% would be the column, which is the 121 these
               are trying not to be measured against. */
            max-width: none;
            justify-content: center;
        }

        /* Everything that is not the heading group goes back to full width on a
           row of its own. Written as :not() rather than a list so a block added
           to this column later cannot land silently in the poster column. */
        #post-intro .wrapper > .entry-side > *:not(.entry-head) {
            grid-column: 1 / -1;
        }

        /* display: contents drops the column's own flex box, and with it the
           gap that separated these blocks. */
        #post-intro .wrapper > .entry-side > .entry-excerpt {
            margin-top: 0;
        }

        .entry-head .entry-title {
            font-size: 19px !important;
            line-height: 1.5 !important;
        }

        .entry-subtitle {
            margin-top: .5rem;
            margin-bottom: .5rem;
            font-size: 12px;
            line-height: 1.8;
        }

        .work-scores {
            justify-content: flex-start;
            gap: .4rem;
            margin-top: .8rem;
        }

        .work-score {
            min-height: 34px;
            gap: .4rem;
            padding-block: .3rem;
            padding-inline: .55rem .75rem;
        }

        .work-score-logo {
            height: 15px;
        }

        .work-score-value {
            font-size: 13px;
        }

        .work-score-value strong {
            font-size: 14px;
        }
    }

    /* Narrower still: a 38% poster column leaves the title about 150px, which
       is two words a line. The poster gives up some of its share. */
    @media (max-width: 575.98px) {
        #post-intro .wrapper {
            grid-template-columns: minmax(0, 33%) minmax(0, 1fr);
        }

        .entry-head .entry-title {
            font-size: 17px !important;
        }
    }

    /* ------------------------------------------------------------------
       One font idiom for every section title on the page.

       There were three shapes doing the same job - a <p>, an <h2> and an <h4>,
       each picking up whatever the theme happened to say about that element -
       so "باکس دانلود" and "اطلاعات تکمیلی" did not match each other or the
       headings further down. The element is an h2 in the markup now, and the
       family, the weight and its variation axis are stated here so the set
       cannot drift again whichever element a future section uses.

       font-feature-settings is inherited on purpose rather than restated: body
       turns on kern, liga and dlig, and Persian needs all three.
       ------------------------------------------------------------------ */
    #downloads-title,
    #additional-information-title,
    #work-gallery-title,
    #related-movies-title,
    #related-series-title,
    #reviews-title {
        font-family: inherit;
        font-size: 20px;
        font-weight: 900;
        font-variation-settings: "wght" 900;
        line-height: 1.6;
    }

    /* ------------------------------------------------------------------
       The poster, against the page.

       The hero behind it is the same artwork blurred, so a dark poster on a
       dark blur had no edge at all and read as part of the background. A
       hairline plus a drop shadow lifts it off. border-box, or the border would
       be added to the fixed 140px/200px the mobile rule pins the image to.
       ------------------------------------------------------------------ */
    #post-intro .entry-poster img {
        box-sizing: border-box;
        border: 1px solid rgba(255, 255, 255, .16);
        box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    }

    /* ------------------------------------------------------------------
       The additional-info tabs on a phone.

       Seven tabs wrapped onto three lines, which pushed the pane itself off
       the screen and made the row read as a block of text rather than as a
       control. One line that scrolls sideways instead.

       The scrollbar is deliberately left visible and given some colour: a row
       that scrolls with no scrollbar and no cut-off tab looks like a row that
       ends where it ends. Snap points make the swipe settle on a tab rather
       than halfway through one.
       ------------------------------------------------------------------ */
    @media (max-width: 991.98px) {
        .work-tabs {
            flex-wrap: nowrap;
            gap: .2rem;
            margin-bottom: 1rem;
            padding-bottom: .4rem;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-inline: contain;
            scroll-snap-type: inline proximity;
            scrollbar-width: thin;
            scrollbar-color: var(--primary-color, #96F207) rgba(255, 255, 255, .1);
        }

        .work-tabs::-webkit-scrollbar {
            height: 4px;
        }

        .work-tabs::-webkit-scrollbar-track {
            border-radius: 999px;
            background: rgba(255, 255, 255, .1);
        }

        .work-tabs::-webkit-scrollbar-thumb {
            border-radius: 999px;
            background: var(--primary-color, #96F207);
        }

        .work-tab {
            flex: 0 0 auto;
            padding: .45rem .8rem;
            font-size: .85rem;
            white-space: nowrap;
            scroll-snap-align: start;
        }

        /* A bottom border alone is easy to miss on a row that scrolls, so the
           selected tab is filled as well. */
        .work-tab.is-active {
            border-bottom-color: var(--primary-color, #96F207);
            border-radius: .4rem;
            background: rgba(150, 242, 7, .14);
        }

        /* ------------------------------------------------------------------
           Comment actions on a phone: one line.

           .btn is 50px tall with a 50px min-width from the theme, so the
           like/dislike pair plus "پاسخ" plus "گزارش تخلف" could not share a
           row and wrapped. Everything here is about fitting those four in one.
           ------------------------------------------------------------------ */
        #reviews .comment-list .commnetbody .row > .col-12.col-md-auto {
            flex-wrap: nowrap;
            align-items: center;
            gap: .35rem;
            margin-top: .6rem;
        }

        #reviews .comment-list .like-dislike {
            flex: 0 0 auto;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            border-radius: .5rem;
        }

        #reviews .comment-list .like-dislike .btn {
            height: 34px;
            min-width: 0;
            padding: 0 .45rem;
            line-height: 34px;
            font-size: 12px;
        }

        #reviews .comment-list .like-dislike .btn svg {
            width: 17px;
            height: 17px;
        }

        /* The theme draws a separator between the two with ::after and gives it
           .75rem of margin on each side, which is most of the width they need
           to save. */
        #reviews .comment-list .like-dislike .btn:not(:last-child):after {
            margin: 0 .3rem;
        }

        #reviews .comment-list .comment-reply-link,
        #reviews .comment-list .comment-report-link {
            flex: 0 1 auto;
            height: 32px;
            min-width: 0;
            padding: 0 .55rem;
            line-height: 32px;
            font-size: 11.5px;
            white-space: nowrap;
        }
    }

    /* ------------------------------------------------------------------
       Round 6 corrections.
       ------------------------------------------------------------------ */

    /* The gallery trailer. A <video> tile has to be sized like the <img> tiles
       beside it, or it lays out at its intrinsic video size and breaks the
       grid. */
    /* (the trailer tile is .work-gallery-zoom.is-video, with the gallery above) */

    @media (max-width: 991.98px) {
        /* Room around the tab row so the selected tab's own fill is not flush
           against the row's edges - without it the padding that marks the
           active tab had nothing to sit against and read as a full-bleed band. */
        .work-tabs {
            gap: .35rem;
            padding: .3rem .35rem .55rem;
        }

        .work-tab {
            padding: .5rem .9rem;
        }

        /* The scrollbar, always drawn rather than only while scrolling.
           Platforms with overlay scrollbars - iOS, and Android in most skins -
           fade the native bar out when the row is still, so a row that scrolls
           looks like a row that simply ends. This is a track of our own,
           painted on the element and therefore always visible, with the native
           bar left thin on top of it for platforms that do show one. */
        .work-tabs {
            background-image: linear-gradient(to right, rgba(255, 255, 255, .12), rgba(255, 255, 255, .12));
            background-repeat: no-repeat;
            background-position: bottom center;
            background-size: calc(100% - .7rem) 3px;
        }

        /* And the hint that there is more in the direction the reader has not
           looked: the row fades out at its far edge, which on this page is the
           left. The mask is on the scroll container, so it stays at the edge
           while the tabs move under it. */
        .work-tabs {
            -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent 100%);
            mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent 100%);
        }

        /* Comment actions: one height for all four controls, and the text
           centred in it rather than sitting on a line-height that happens to
           match. line-height is the thing that was tipping the labels off
           centre - the theme sets it to the old 50px box. */
        #reviews .comment-list .like-dislike {
            align-self: stretch;
            min-height: 34px;
        }

        #reviews .comment-list .like-dislike .btn,
        #reviews .comment-list .comment-reply-link,
        #reviews .comment-list .comment-report-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            height: 34px;
            min-height: 34px;
            line-height: 1;
        }

        #reviews .comment-list .comment-reply-link,
        #reviews .comment-list .comment-report-link {
            padding: 0 .6rem;
            font-size: 11.5px;
        }
    }


/* ---- Download box: one colour per link type -----------------------------
   The theme's default for a download list is the site green, and it only
   overrode two types (one of them spelt "dubbled", which no list carries),
   so most lists - and every download button - came out green. Each list now
   takes an accent from its type and every coloured part of it reads that:

     orginal (no sub, no dub) white   hardsub  red  (#FF1B1B)
     dubbed / dubbed_audio    yellow  softsub  blue (#0075FF)

   The bases are the requested ones, lifted a little where they sit on the
   near-black card: pure #FF1B1B and #0075FF read darker than they are on
   #0D0D0D. Anything else (music, a type added later) is white - never green.
   --dl is the accent, --dl-rgb the same for tints, --dl-ink the text on it.
   The season block of a series carries the type too (data-dl-type), so its
   header and status badge follow. */
.download-list,
.download-season {
    --dl: #F2F3F5;
    --dl-rgb: 242, 243, 245;
    --dl-ink: #121214;
}

.download-list.hardsub,
.download-season[data-dl-type="hardsub"] {
    --dl: #FF3B3B;
    --dl-rgb: 255, 59, 59;
    --dl-ink: #FFFFFF;
}

.download-list.dubbed,
.download-list.dubbed_audio,
.download-season[data-dl-type="dubbed"],
.download-season[data-dl-type="dubbed_audio"] {
    --dl: #FFC700;
    --dl-rgb: 255, 199, 0;
    --dl-ink: #1A1400;
}

.download-list.softsub,
.download-season[data-dl-type="softsub"] {
    --dl: #2B8CFF;
    --dl-rgb: 43, 140, 255;
    --dl-ink: #FFFFFF;
}

/* The theme reads --thisbasecolor for the quality text, the "مشاهده لینک ها"
   button, "پخش آنلاین" and the episode buttons' hover. Doubled class: the
   theme's .download-list.hardsub sets it to its blue and would outrank one. */
.download-list.download-list {
    --thisbasecolor: var(--dl);
}

/* The type label: just the accent-coloured text - no chip, no box. The
   theme draws it as a padded, tinted, rounded box; all of that is cleared.
   The class is doubled to match the theme's own .download-list.hardsub >
   .title > span (blue), which otherwise outranks a single class and wins. */
.download-list.download-list > .title > span {
    color: var(--dl);
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    line-height: inherit;
    font-weight: 700;
}

/* The rule after the label picks up a trace of the accent. */
.download-list > .title::after {
    background: linear-gradient(to left, rgba(var(--dl-rgb), .35), var(--border-color) 60%);
}

/* Each row: a thin accent edge on its start side. */
.download-list ul > li {
    border-inline-start: 3px solid rgba(var(--dl-rgb), .75);
}

.download-list ul > li .text {
    color: var(--dl);
}

/* The download buttons - "دانلود مستقیم" on a film, "مشاهده لینک ها" on a
   season - filled with the accent, lit from the top, with a soft glow. */
.download-list .btn.btn-primary,
.download-list ul > li .btn-download {
    color: var(--dl-ink);
    border-color: var(--dl);
    background-color: var(--dl);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%);
    box-shadow: 0 6px 18px -8px rgba(var(--dl-rgb), .75);
    transition: background-color .2s ease, box-shadow .2s ease, color .2s ease, transform .2s ease;
}

.download-list .btn.btn-primary:hover,
.download-list ul > li .btn-download:hover {
    color: var(--dl-ink);
    background-color: var(--dl);
    box-shadow: 0 8px 24px -6px rgba(var(--dl-rgb), .9);
    transform: translateY(-1px);
}

/* "پخش آنلاین": outlined in the accent. */
.download-list .f2m-watch-online {
    color: var(--dl);
    border-color: rgba(var(--dl-rgb), .55);
}

.download-list .f2m-watch-online:hover {
    color: var(--dl);
    border-color: var(--dl);
    background-color: rgba(var(--dl-rgb), .12);
}

/* Signed out, script.js marks the login-gated buttons looks-disabled, which
   greys them (grayscale .85): in the download box that turned the season's
   yellow, red or blue «پخش آنلاین» grey. Here it keeps its accent, a little
   dimmed, and lights up on hover as before. */
.download-list .f2m-watch-online.looks-disabled,
.download-season .f2m-watch-online.looks-disabled {
    -webkit-filter: none;
    filter: none;
    opacity: .8;
}

.download-list .f2m-watch-online.looks-disabled:hover,
.download-season .f2m-watch-online.looks-disabled:hover {
    opacity: 1;
}

/* An episode's two buttons stay on one line each. In a 200px cell the
   episode button was left ~72px beside «پخش آنلاین», so «قسمت 1» broke onto
   a second line (around 1280px wide) and that row of boxes grew taller than
   the others. The cells are wide enough for both labels, and neither wraps. */
.download-season .series-downloaditems {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
}

.download-season .series-downloaditems > .d-flex {
    align-items: stretch;
}

/* nowrap, and one height for an episode's two buttons - a size line under the
   episode's label makes it taller, and «پخش آنلاین» beside it follows */
.download-season .series-downloaditems > .d-flex > .btn {
    white-space: nowrap;
    height: auto;
}

.download-season .series-downloaditems > .d-flex > .f2m-watch-online {
    flex: 0 0 auto;
}

.download-season .series-downloaditems > .d-flex > a.btn {
    flex: 1 1 auto;
    min-width: max-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* A file's size: under an episode's label, and after a group's encoder (its
   average) - filled in by partials/download_sizes.dj.html. */
.download-season .series-downloaditems .dl-size {
    font-size: 11px;
    font-weight: 400;
    opacity: .75;
    direction: ltr;
}

/* «کپی تمام لینک ها» takes its row's height, so beside episodes with a size
   line it is as tall as they are */
.download-season .series-downloaditems .bulkcopy_series {
    display: flex;
}

.download-season .series-downloaditems .bulkcopy_series > .btn {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* a group where no file has a size: no size line (and no dashes) at all */
.download-season .series-downloaditems:not(:has(.dl-size[data-bytes])) .dl-size {
    display: none;
}

/* The episode buttons fill with the accent on hover; their text has to
   follow it, or white on white / white on yellow is unreadable. */
.download-season .series-downloaditems .btn.btn-default:hover {
    color: var(--dl-ink);
    background-color: var(--dl);
}

/* The "copied" tooltip over "کپی تمام لینک ها". */
.download-season .series-downloaditems .bulkcopy_series .tooltip {
    background-color: var(--dl);
    color: var(--dl-ink);
}

.download-season .series-downloaditems .bulkcopy_series .tooltip::after {
    border-top-color: var(--dl);
}

/* A series' season header: an accent edge, and the status badge in the
   season's colour instead of the theme's green "primary". */
.download-season[data-dl-type] > .btn {
    border-inline-start: 3px solid rgba(var(--dl-rgb), .75);
}

.download-season[data-dl-type] > .btn .btn.btn-lighten.btn-primary {
    --btn-text: var(--dl);
    --btn-color: rgba(var(--dl-rgb), .12);
    color: var(--dl);
    background-color: rgba(var(--dl-rgb), .12);
    border: 1px solid rgba(var(--dl-rgb), .28);
}