/* ==========================================================================
   S2D26 - mobile surface fixes
   --------------------------------------------------------------------------
   WHY EVERY SELECTOR HERE IS SO LONG
   ----------------------------------
   This file is enqueued at wp_enqueue_scripts priority 23, which prints it
   around position 9 in the head. s2d26/header.css is NOT enqueued - header.php
   prints it as a hardcoded <link> near the end (position 16). Both use
   !important, so on an equal-specificity tie the THEME wins, and no enqueue
   priority can change that.

   header.css carries two mobile search-modal blocks:
     @media (max-width: 620px)  ~line 1685   html body .s2d26-search-modal...
     @media (max-width: 767px)  ~line 908    .s2d26-search-modal #search...

   A desktop emulator is wider than 767px so neither applies there and these
   rules looked correct - while every real phone is <=620px and the theme
   overrode all of them. So specificity here is deliberately pushed ABOVE the
   theme's, with `html body` plus a repeated class, and load order stops
   mattering. Do not "simplify" these selectors back down.

   The submit button's geometry is ALSO forced by normalizeSearchSubmit() in
   s2d26/header.js as INLINE !important - which beats any stylesheet, however
   specific. Anything about that button's position or size belongs in that
   function, not here.

   Loaded site-wide from s2d26/account-cabinet.php.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. "MOST POPULAR MOVIES" must stay on one line on a phone.
   --------------------------------------------------------------------------
   Copied from the fix that already solved the identical problem for
   "Most popular TV shows" (header.css, S2D_MOBILE_TV_ACCOUNT_SURFACE_FIX_20260916).
   Same properties, same clamp, same nowrap - only the body class differs.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  html body.page-template-archive-movies.s2d26-listing-h1-v4 .page-category
  .movies-list-wrap .cineby-api-popular-block .cineby-api-popular-title {
    display: inline-block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: clamp(19px, 5.9vw, 24px) !important;
    letter-spacing: -.045em !important;
    line-height: 1.06 !important;
    white-space: nowrap !important;
  }
}


/* --------------------------------------------------------------------------
   2. No sweep on touch. Desktop keeps it.
   --------------------------------------------------------------------------
   A tap leaves :hover applied until the next tap elsewhere, so the menu pill
   and the dropdown replay their one-shot sweep on every item the member
   touches. The pill background itself is the hover affordance and stays; only
   the animated highlight is switched off.
   -------------------------------------------------------------------------- */

@media (hover: none) {
  html body .s2d26-header--hover-3 .s2d26-header__menu > li:hover::after,
  html body .s2d26-header--hover-3 .s2d26-header__menu > li:focus-within::after {
    animation: none !important;
    opacity: 0 !important;
  }

  html body .s2d26-header__menu > li:hover > .sub-menu::before,
  html body .s2d26-header__menu > li:focus-within > .sub-menu::before {
    animation: none !important;
    opacity: 0 !important;
  }
}


/* --------------------------------------------------------------------------
   3. Search modal - compact layout
   --------------------------------------------------------------------------
   Applies to narrow screens AND to short ones. A phone in landscape is wide
   (~950px) but only ~440px tall, so it escaped every width-based query and got
   the desktop layout, which assumes a tall viewport: the brand row is pushed
   down 60px and the field gets clamp(70px,13vh,150px) of top margin. On a
   440px-tall screen that parked the whole form near the bottom edge, with the
   brand row overlapping it. (max-height: 560px) catches that case.
   -------------------------------------------------------------------------- */

@media (max-width: 767px), (max-height: 560px) {

  /* 3a. The modal must never be taller than what the member can see, and it
     must be the only thing that scrolls.

     The theme sets height/min-height:100dvh with only 20px of bottom padding,
     while env(safe-area-inset-bottom) is 0 on Android. The last rows were
     rendered but sat underneath Chrome's bottom bar with nothing left to
     scroll, which reads as "it will not scroll to the end". */
  html body .s2d26-search-modal.s2d26-search-modal.s2d26-search-modal {
    height: 100dvh !important;
    min-height: 0 !important;
    max-height: 100dvh !important;
    padding: max(12px, env(safe-area-inset-top)) 16px
             calc(56px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  html body .s2d26-search-modal.s2d26-search-modal .s2d26-search-modal__panel {
    min-height: 0 !important;
    overflow: visible !important;
  }

  /* 3b. Pull the content up. The theme pushes the brand row down by 60px and
     then adds clamp(54px,12vh,96px) above the field - together that is what
     ate the list. */
  html body .s2d26-search-modal.s2d26-search-modal .s2d26-search-modal__top {
    min-height: 44px !important;
    transform: none !important;
  }

  html body .s2d26-search-modal.s2d26-search-modal .s2d26-search-modal__brand,
  html body .s2d26-search-modal.s2d26-search-modal .s2d26-search-modal__brand img {
    width: 132px !important;
    height: 36px !important;
  }

  html body .s2d26-search-modal.s2d26-search-modal #search.s2d26-search-modal__search {
    margin: 10px 0 0 !important;
  }

  /* 3c. Field owns the whole row; the submit control sits inside its right
     edge as a round arrow. Single column at every width, so the Advanced
     Search link can never end up underneath the button.

     The form is the positioning context and its only in-flow child is the
     field (the screen-reader label is absolutely positioned), so the form's
     border-bottom IS the field's underline. */
  html body .s2d26-search-modal.s2d26-search-modal #search
  #searchform.s2d26-search-modal__form {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--s2d26-modal-line) !important;
  }

  html body .s2d26-search-modal.s2d26-search-modal #search
  #searchform input.s2d26-search-modal__input.search-input {
    height: 54px !important;
    padding: 0 58px 0 0 !important;
    border-bottom: 0 !important;
    font-size: 22px !important;
  }

  html body .s2d26-search-modal.s2d26-search-modal .s2d26-search-modal__advanced {
    margin-top: 14px !important;
  }

  /* 3d. Release the trend list from its own scroll box, but KEEP it clipping.

     The theme gives .s2dst-dropdown max-height:min(58vh,660px) plus
     overflow:auto, so the list scrolled inside itself and its last rows went
     under the browser bar. max-height goes; overflow must stay `hidden`
     rather than `visible`, because the list has rounded corners and its rows
     otherwise poke out past them. The modal is the only scroller.

     touch-action and overscroll-behavior have to be neutralised as well, and
     this is the part that was missing: the theme sets `touch-action: pan-y`
     and `overscroll-behavior: contain` on this element under max-width:767px.
     With overflow:hidden there is nothing to scroll inside it, so the browser
     claims the vertical pan, finds no scrollable box, and `contain` stops it
     chaining to the modal - the finger dies on the dropdown and nothing moves
     unless you hit the small area beside it. Measured on a 390x667 viewport:
     the dropdown covers y=184..809 and the modal is the only scroller
     (scrollHeight 913 > clientHeight 667), yet a pan started on the dropdown
     scrolled neither. `auto` on both lets the gesture reach the modal. */
  html body .s2d26-search-modal.s2d26-search-modal #search .s2dst-dropdown,
  html body .s2d26-search-modal.s2d26-search-modal #search .search-suggest {
    max-height: none !important;
    height: auto !important;
    margin-top: 14px !important;
    overflow: hidden !important;
    border-radius: 12px !important;
    touch-action: auto !important;
    overscroll-behavior: auto !important;
  }

  html body .s2d26-search-modal.s2d26-search-modal #search
  .s2dst-dropdown .s2dst-groups {
    grid-template-columns: 1fr !important;
  }
}


/* --------------------------------------------------------------------------
   3b. Portrait only - give the Advanced Search link room to breathe
   --------------------------------------------------------------------------
   In portrait the field is the last thing above the link, so the link sat
   crowded against the field's underline. 40px more than the shared value in 3c.
   Deliberately NOT inside the combined query: in landscape the link follows the
   field at 30% of the height and does not need the extra gap.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  html body .s2d26-search-modal.s2d26-search-modal .s2d26-search-modal__advanced {
    margin-top: 54px !important;
  }
}


/* --------------------------------------------------------------------------
   4. Landscape phones - a short viewport needs its own spacing
   --------------------------------------------------------------------------
   Every value here is vertical, because height is the scarce axis. The 56px
   bottom cushion from 3a is sized for a portrait phone and wastes a tenth of
   a landscape screen.
   -------------------------------------------------------------------------- */

@media (max-height: 560px) {
  html body .s2d26-search-modal.s2d26-search-modal.s2d26-search-modal {
    padding: 8px 16px calc(24px + env(safe-area-inset-bottom)) !important;
  }

  html body .s2d26-search-modal.s2d26-search-modal .s2d26-search-modal__top {
    min-height: 34px !important;
  }

  html body .s2d26-search-modal.s2d26-search-modal .s2d26-search-modal__brand,
  html body .s2d26-search-modal.s2d26-search-modal .s2d26-search-modal__brand img {
    width: 104px !important;
    height: 28px !important;
  }

  /* The field sits at roughly 30% of the viewport height.

     In landscape the old top margin is meaningless (13vh of a 440px screen is
     57px) and the block was landing near the bottom edge, effectively
     invisible. 20vh puts the field's top at ~30% on any short viewport, and the
     visibility properties are re-asserted because the theme hides #search on
     narrow screens and only re-establishes it below 620px - which a landscape
     phone (~950px wide) never matches. */
  html body .s2d26-search-modal.s2d26-search-modal #search.s2d26-search-modal__search {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    margin: 20vh 0 0 !important;
  }

  html body .s2d26-search-modal.s2d26-search-modal #search
  #searchform input.s2d26-search-modal__input.search-input {
    height: 46px !important;
    font-size: 19px !important;
  }

  html body .s2d26-search-modal.s2d26-search-modal .s2d26-search-modal__advanced {
    margin-top: 72px !important;
  }
}


/* --------------------------------------------------------------------------
   5. The submit control itself - a round arrow inside the field
   --------------------------------------------------------------------------
   Its POSITION and SIZE are set by normalizeSearchSubmit() in header.js, as
   inline !important, because that function already owned them. This block owns
   the appearance: hide the word, paint the arrow.

   The theme's own rule kills ::before/::after on this button (content:none),
   so the arrow has to be a background-image, and the theme's `background`
   shorthand on hover would wipe it - hence the hover rule repeats it.
   -------------------------------------------------------------------------- */

html body .s2d26-search-modal.s2d26-search-modal #search
#searchform button[type="submit"].s2d26-search-modal__submit.search-button {
  padding: 0 !important;
  border: 1px solid rgba(103, 221, 215, .30) !important;
  border-radius: 999px !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  background-color: var(--s2d26-accent) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071111' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
  box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
  html body .s2d26-search-modal.s2d26-search-modal #search
  #searchform button[type="submit"].s2d26-search-modal__submit.search-button:hover,
  html body .s2d26-search-modal.s2d26-search-modal #search
  #searchform button[type="submit"].s2d26-search-modal__submit.search-button:focus-visible {
    background-color: #8ff7f1 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071111' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
    box-shadow: 0 6px 20px rgba(103, 221, 215, .22) !important;
    transform: translateY(-50%) scale(1.06) !important;
    outline: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   6. The signed-in account icon: a green gradient, not flat grey
   --------------------------------------------------------------------------
   The glyph is drawn with `stroke/fill: currentColor`, and currentColor cannot
   hold a gradient. So the gradient is painted on a pseudo-element and shaped by
   the same glyph used as a mask, while the theme's own grey SVG is hidden.

   Scoped to `.s2d26-header__account`, which exists ONLY when a member is signed
   in - the signed-out control is `.s2d26-header__signin`, a different class, so
   a guest sees no change at all.
   -------------------------------------------------------------------------- */

.s2d26-header__account {
  --s2d26-account-glow:
    linear-gradient(150deg, #8bf5c0 0%, #38dfa4 32%, #12b886 64%, #059669 100%);
  --s2d26-account-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='13.5' fill='none' stroke='%23fff' stroke-width='1.35' opacity='.72'/%3E%3Ccircle cx='16' cy='11.8' r='4.2' fill='%23fff' opacity='.92'/%3E%3Cpath d='M7.7 25.2c1.12-4.42 3.88-6.63 8.3-6.63s7.18 2.21 8.3 6.63c-2.22 1.72-4.98 2.58-8.3 2.58s-6.08-.86-8.3-2.58Z' fill='%23fff' opacity='.72'/%3E%3Cpath d='M10.8 24.1c1.52.58 3.25.87 5.2.87s3.68-.29 5.2-.87' fill='none' stroke='%23fff' stroke-width='1' opacity='.4'/%3E%3C/svg%3E");
}

/* The grey original is replaced by the gradient copy below it. */
.s2d26-header__account > svg { visibility: hidden; }

.s2d26-header__account::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--s2d26-account-glow);
  -webkit-mask: var(--s2d26-account-glyph) center / 30px 30px no-repeat;
          mask: var(--s2d26-account-glyph) center / 30px 30px no-repeat;
  filter: drop-shadow(0 0 7px rgba(16, 185, 129, .40));
  pointer-events: none;
  transition: none !important;
}

/* Light theme: the same green, deepened so it still reads on a pale header. */
html:not(.night-mode):not([data-theme="dark"]) .s2d26-header__account {
  --s2d26-account-glow:
    linear-gradient(150deg, #34d399 0%, #10b981 38%, #059669 72%, #047857 100%);
}

/* The unread badge must stay above the gradient overlay. */
.s2d26-header__account .s2d26-header__account-notice { z-index: 2; }

/* NO hover transform, NO hover glow, NO press shrink.
   The icon must not grow or shift on hover - the only affordance is the
   background the theme already paints on .s2d26-header__account:hover, exactly
   as it behaved before the gradient. The base drop-shadow above is a static
   part of the look and does not change on interaction. */

/* Press feedback for the search arrow. (This rule was briefly lost while
   section 6 was inserted above it - it belongs to section 5.) */
html body .s2d26-search-modal.s2d26-search-modal #search
#searchform button[type="submit"].s2d26-search-modal__submit.search-button:active {
  background-color: #6cddd7 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23071111' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
  transform: translateY(-50%) scale(.94) !important;
}


/* ==========================================================================
   S2D26_HEADER_NOTICE_PULSE_20260918

   The new-episode alert is the header count itself. When it rises the badge pops
   and throws a ring once, so the eye goes to the header - no overlay, nothing
   covering the page.

   Both schemes: colour comes from the theme variables only. The ring is the
   accent at full strength fading to transparent, so it needs no second colour.
   Under `prefers-reduced-motion` the pop is replaced by a static outline, which
   draws the same attention without movement.
   ========================================================================== */
@keyframes s2d26-notice-pop {
  0%   { transform: scale(1); }
  34%  { transform: scale(1.5); }
  68%  { transform: scale(.92); }
  100% { transform: scale(1); }
}
@keyframes s2d26-notice-ring {
  0%   { box-shadow: 0 0 0 0 var(--s2d26-accent, #12b886); }
  100% { box-shadow: 0 0 0 16px rgba(18, 184, 134, 0); }
}
.s2d26-header__account .s2d26-header__account-notice.is-pulsing {
  animation: s2d26-notice-pop .62s cubic-bezier(.2, 1.4, .4, 1),
             s2d26-notice-ring .8s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .s2d26-header__account .s2d26-header__account-notice.is-pulsing {
    animation: none !important;
    outline: 3px solid var(--s2d26-accent, #12b886);
    outline-offset: 2px;
  }
}


/* ==========================================================================
   S2D26_LANDING_HEADER_SURFACE_20260918

   The fixed header carries no surface until it gets `.is-scrolled` (scrollY >
   18) and then fades the fill in over .64s. The landing page has no hero image
   behind it, so content that has already scrolled up from the first pixel sits
   under a see-through bar: the cards are visible through the header while the
   nav labels sit on top of them.

   The landing page never needs the transparent state - there is nothing to
   reveal behind it - so it keeps the same surface `.is-scrolled` ends up with
   (same fill, same border, both schemes), and scrolling no longer changes what
   the bar looks like.

   Scoped to this template only: every other page keeps its hero-aware
   behaviour. No markup change, no JS.
   ========================================================================== */
html:not(.night-mode):not([data-theme="dark"]) body.page-template-old-index .s2d26-header.s2d26-header:not(.is-scrolled) {
  background: rgba(247, 249, 250, .94) !important;
  border-bottom-color: var(--s2d26-header-border) !important;
}

html.night-mode body.page-template-old-index .s2d26-header.s2d26-header:not(.is-scrolled),
html[data-theme="dark"] body.page-template-old-index .s2d26-header.s2d26-header:not(.is-scrolled) {
  background: rgba(7, 11, 12, .93) !important;
  border-bottom-color: var(--s2d26-header-border) !important;
}


/* ==========================================================================
   S2D26_LANDING_MAIN_CLEARANCE_20260918

   #main keeps the 70px fixed-header offset on the landing page.

   js/cineby.custom.min.js binds a scroll handler that writes an INLINE
   padding-top on #main:
       $("#main").css("padding-top", "0px")     // whenever scrollTop >= previous
   and only restores it when the header is not fixed
   ("fixed" != $("header").css("position")). This theme's header is always
   position:fixed, so the restore branch never runs: the first scroll event of
   any kind removes the gap for good, and the first heading ends up at y=68 -
   under the 70px bar - instead of y=138.

   The listings answer this the same way; this is that rule (s2d26/header.css
   0.6.21, "listing clearance belongs to #main, so scroll-state code cannot
   collapse it") with the landing template's scope. A stylesheet !important
   outranks the inline style, which carries none.
   ========================================================================== */
body.page-template-old-index #main {
  box-sizing:border-box !important;
  margin-top:0 !important;
  padding-top:var(--s2d26-listing-header-clearance, var(--s2d26-header-height, 70px)) !important;
  scroll-margin-top:var(--s2d26-listing-header-clearance, var(--s2d26-header-height, 70px)) !important;
}


/* ==========================================================================
   S2D26_LANDING_RAIL_HEADING_STYLE_20260918

   The landing's four rail headings take the listing headings' approved
   treatment. On a listing those declarations hang off
   `body.s2d26-listing-h1-v4 .page-category ...`, and the heading also carries
   the `s2d26-listing-heading-rail` class the rail boot script adds; the
   landing has neither, so its four headings resolved to the generic h2
   defaults instead: 20px, Oswald, text-transform none, position static.

   The values are the ones the reference heading resolves to (s2d26/header.css
   0.6.38 and 0.6.39); only the scope is the landing template. The colours are
   that page's winning pair per scheme: #eeeeee in the dark scheme
   (css/theme-mode.css:274) and #edf4ff in the light one (css/main.css:9251),
   with the matching corner accent (#20d5d9 dark / #00aeb5 light).

   old-index.php stamps all four headings with the reference's
   `s2d26-listing-heading-rail` class (s2d26_home_rail_heading()).
   ========================================================================== */
html body.page-template-old-index #main .cineby-api-popular-title {
  --s2d26-h1-accent:#20d5d9;
  --s2d26-listing-section-heading-size:28px;
  position:relative !important;
  display:inline-block !important;
  box-sizing:border-box !important;
  width:auto !important;
  min-width:0 !important;
  max-width:calc(100vw - 36px) !important;
  height:auto !important;
  min-height:0 !important;
  padding:6px 0 !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  color:#eeeeee !important;
  font-family:"Trebuchet MS","Segoe UI",sans-serif !important;
  font-size:var(--s2d26-listing-section-heading-size) !important;
  font-weight:700 !important;
  letter-spacing:-.035em !important;
  line-height:1.06 !important;
  text-align:left !important;
  text-decoration:none !important;
  text-shadow:none !important;
  text-transform:uppercase !important;
  white-space:normal !important;
  isolation:isolate;
}
html:not(.night-mode):not([data-theme="dark"]) body.page-template-old-index #main .cineby-api-popular-title {
  --s2d26-h1-accent:#00aeb5;
  color:#edf4ff !important;
}
html body.page-template-old-index #main .cineby-api-popular-title::before {
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  left:-11px !important;
  display:block !important;
  box-sizing:border-box !important;
  width:13px !important;
  height:11px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-top:2px solid var(--s2d26-h1-accent) !important;
  border-left:2px solid var(--s2d26-h1-accent) !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  pointer-events:none !important;
}
html body.page-template-old-index #main .cineby-api-popular-title::after {
  content:"" !important;
  position:absolute !important;
  right:auto !important;
  bottom:0 !important;
  left:0 !important;
  display:block !important;
  box-sizing:border-box !important;
  width:100% !important;
  height:2px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:2px !important;
  background:linear-gradient(90deg,rgba(108,221,215,.95) 0%,rgba(108,221,215,.2) 100%) !important;
  box-shadow:0 0 10px rgba(108,221,215,.45) !important;
  opacity:1 !important;
  transform:none !important;
  pointer-events:none !important;
}
@media (max-width:767px) {
  html body.page-template-old-index #main .cineby-api-popular-title {
    max-width:calc(100vw - 24px) !important;
    font-size:clamp(24px,8vw,30px) !important;
  }
  html body.page-template-old-index #main .cineby-api-popular-title::before {
    content:none !important;
  }
}


/* ==========================================================================
   S2D26_LANDING_CARD_ACTIONS_LEFT_20260918

   The landing's card controls - the heart and, on a series card, the bell -
   sit in the poster's top-left corner, like the reference block.

   The anchoring rule is
       body.s2d26-card-actions-v2 .page-category .cineby-api-popular-grid
         > .ml-item > .ofa-card-actions { top:39px; right:auto; left:8px; ... }
   (s2d26/header.css 0.6.36, plus the Featured-TV fix that stacks the bell under
   the heart). It is scoped to `.page-category`, which a listing carries on
   #main; the landing's #main has no class, so that whole family misses and the
   plugin's default wins instead:
       .ofa-card-actions { top:10px; right:10px }               <- right anchored
       .ofa-card-actions > .ofa-title-action { width:32px; height:36px;
                                               background:transparent }

   The card markup never differed - .ml-item.ml-item-post inside
   .movies-list.cineby-api-popular-grid on both pages - so only the anchor is
   copied here: same geometry, same sizes, same colours as the reference. The
   zero-count badge is hidden as it is on the reference.

   Hover is background-only on pointer devices and the same background on press
   for touch; nothing scales or translates, so a tap cannot leave a control
   lifted. The hover fill is the project's existing one for this control
   (plugins/onlyflix-accounts/assets/accounts.css,
   .ofa-card-actions > .ofa-title-action:hover).
   ========================================================================== */
html body.page-template-old-index #main .cineby-api-popular-grid > .ml-item > .ofa-card-actions {
  position:absolute !important;
  z-index:12 !important;
  box-sizing:border-box !important;
  display:flex !important;
  top:39px !important;
  right:auto !important;
  bottom:auto !important;
  left:8px !important;
  min-height:28px !important;
  align-items:center !important;
  gap:3px !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  pointer-events:auto !important;
  isolation:isolate;
}
html body.page-template-old-index #main .cineby-api-popular-grid > .ml-item > .ofa-card-actions::before {
  display:none !important;
  content:none !important;
}
html body.page-template-old-index #main .cineby-api-popular-grid > .ml-item > .ofa-card-actions > .ofa-title-action {
  position:relative !important;
  z-index:1 !important;
  box-sizing:border-box !important;
  display:inline-flex !important;
  flex:0 0 28px !important;
  width:28px !important;
  min-width:28px !important;
  max-width:28px !important;
  height:28px !important;
  min-height:28px !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:50% !important;
  background:rgba(3,8,10,.85) !important;
  box-shadow:0 6px 16px rgba(0,0,0,.42) !important;
  -webkit-backdrop-filter:blur(10px) saturate(118%) !important;
  backdrop-filter:blur(10px) saturate(118%) !important;
  color:rgba(247,252,252,.94) !important;
  transform:none !important;
  transition:background-color .16s ease,color .16s ease !important;
}
html body.page-template-old-index #main .cineby-api-popular-grid > .ml-item > .ofa-card-actions > .ofa-title-action--favorite,
html body.page-template-old-index #main .cineby-api-popular-grid > .ml-item > .ofa-card-actions > .ofa-title-action--favorite.is-saved {
  color:#ff526b !important;
}
html body.page-template-old-index #main .cineby-api-popular-grid > .ml-item > .ofa-card-actions > .ofa-title-action--notification.is-saved {
  color:#53e4de !important;
}
html body.page-template-old-index #main .cineby-api-popular-grid > .ml-item > .ofa-card-actions > .ofa-title-action--favorite.is-saved .ofa-title-action__icon svg,
html body.page-template-old-index #main .cineby-api-popular-grid > .ml-item > .ofa-card-actions > .ofa-title-action--notification.is-saved .ofa-bell-body {
  fill:currentColor !important;
}
html body.page-template-old-index #main .cineby-api-popular-grid > .ml-item > .ofa-card-actions > .ofa-title-action .ofa-title-action__icon,
html body.page-template-old-index #main .cineby-api-popular-grid > .ml-item > .ofa-card-actions > .ofa-title-action .ofa-title-action__icon svg {
  display:block !important;
  width:14px !important;
  height:14px !important;
  min-width:14px !important;
  transform:none !important;
}
html body.page-template-old-index #main .cineby-api-popular-grid > .ml-item > .ofa-card-actions > .ofa-title-action .ofa-title-action__icon svg {
  overflow:visible !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.9 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.72));
}
html body.page-template-old-index #main .cineby-api-popular-grid > .ml-item > .ofa-card-actions .ofa-title-action__count {
  position:absolute !important;
  top:-4px !important;
  right:-5px !important;
  bottom:auto !important;
  left:auto !important;
  display:grid !important;
  box-sizing:border-box !important;
  width:auto !important;
  min-width:15px !important;
  height:15px !important;
  padding:0 3px !important;
  place-items:center !important;
  border:1px solid rgba(218,250,248,.26) !important;
  border-radius:999px !important;
  background:#071012 !important;
  box-shadow:0 3px 8px rgba(0,0,0,.5) !important;
  color:#f8ffff !important;
  font-family:Inter,Montserrat,Arial,sans-serif !important;
  font-size:9px !important;
  font-variant-numeric:tabular-nums !important;
  font-weight:760 !important;
  letter-spacing:-.015em !important;
  line-height:13px !important;
  text-align:center !important;
  text-shadow:none !important;
  opacity:1 !important;
  filter:none !important;
  transform:none !important;
  pointer-events:none !important;
}
/* A zero count is hidden, as it is on the reference block. */
html body.page-template-old-index #main .cineby-api-popular-grid > .ml-item > .ofa-card-actions > .ofa-title-action[data-ofa-public-count="0"] .ofa-title-action__count,
html body.page-template-old-index #main .cineby-api-popular-grid > .ml-item > .ofa-card-actions > .ofa-title-action.s2d26-count-zero .ofa-title-action__count {
  display:none !important;
}
/* Featured TV only: the bell sits on the heart's vertical axis, below it (the
   reference's own order rules name classes that do not exist in this markup,
   so the same order is expressed with the classes the buttons actually have). */
html body.page-template-old-index #main .cineby-api-popular-grid > .ml-item-tvshows > .ofa-card-actions {
  display:flex !important;
  flex-flow:column nowrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:28px !important;
  min-width:28px !important;
  max-width:28px !important;
  height:auto !important;
  min-height:61px !important;
  gap:5px !important;
}
html body.page-template-old-index #main .cineby-api-popular-grid > .ml-item-tvshows > .ofa-card-actions > .ofa-title-action--favorite {
  order:1 !important;
}
html body.page-template-old-index #main .cineby-api-popular-grid > .ml-item-tvshows > .ofa-card-actions > .ofa-title-action--notification {
  order:2 !important;
}
/* Desktop hover: the background, and nothing else. */
@media (hover:hover) and (pointer:fine) {
  html body.page-template-old-index #main .cineby-api-popular-grid > .ml-item > .ofa-card-actions > .ofa-title-action:hover,
  html body.page-template-old-index #main .cineby-api-popular-grid > .ml-item > .ofa-card-actions > .ofa-title-action:focus-visible {
    background:rgba(9,15,28,.88) !important;
    transform:none !important;
  }
}
/* Touch: the same background on press, and a tap may never leave the desktop
   hover fill or a transform behind. */
@media (hover:none) {
  html body.page-template-old-index #main .cineby-api-popular-grid > .ml-item > .ofa-card-actions > .ofa-title-action:hover {
    background:rgba(3,8,10,.85) !important;
    transform:none !important;
  }
  html body.page-template-old-index #main .cineby-api-popular-grid > .ml-item > .ofa-card-actions > .ofa-title-action:active {
    background:rgba(9,15,28,.88) !important;
    transform:none !important;
  }
}
/* Phone: the reference's compact values. */
@media (max-width:767px) {
  html body.page-template-old-index #main .cineby-api-popular-grid > .ml-item > .ofa-card-actions {
    top:36px !important;
    right:auto !important;
    bottom:auto !important;
    left:5px !important;
    min-height:27px !important;
    gap:3px !important;
  }
  html body.page-template-old-index #main .cineby-api-popular-grid > .ml-item > .ofa-card-actions > .ofa-title-action {
    flex-basis:27px !important;
    width:27px !important;
    min-width:27px !important;
    max-width:27px !important;
    height:27px !important;
    min-height:27px !important;
  }
  html body.page-template-old-index #main .cineby-api-popular-grid > .ml-item > .ofa-card-actions > .ofa-title-action .ofa-title-action__icon,
  html body.page-template-old-index #main .cineby-api-popular-grid > .ml-item > .ofa-card-actions > .ofa-title-action .ofa-title-action__icon svg {
    width:13px !important;
    height:13px !important;
    min-width:13px !important;
  }
  html body.page-template-old-index #main .cineby-api-popular-grid > .ml-item-tvshows > .ofa-card-actions {
    width:27px !important;
    min-width:27px !important;
    max-width:27px !important;
    min-height:59px !important;
    gap:5px !important;
  }
}


/* ==========================================================================
   S2D26_LANDING_HEADING_LIGHT_CONTRAST_20260918

   The landing's four rail headings were almost invisible in the LIGHT scheme.

   Measured live, light scheme, on /cineby/:
       heading colour    rgb(237, 244, 255)   (#edf4ff)
       page background   rgb(238, 242, 246)   (#eef2f6)
       contrast                                1.02 : 1   (WCAG minimum 4.5:1)

   This is NOT a regression r36 introduced: the reference page /movies-qfva3/
   carries the very same pair (measured in the same session, same values), so
   the whole site has it in the light scheme and r36 copied the reference
   faithfully. The reference is what is wrong here, which is exactly why the
   value below is taken from the theme's own declaration for THIS heading
   rather than from the reference page:

       css/cineby-api-popular.css, line ~52
       .page-category .movies-list-wrap .cineby-api-popular-block
         .cineby-api-popular-title { color: #333333; }

   That declaration is dark and correct but its scope never reaches the
   landing, so only the value is reused here, with the landing's scope.

       #333333 on #eef2f6 = 11.23 : 1

   The DARK scheme is deliberately untouched: rgb(238,238,238) on
   rgb(26,26,26) is 15.00 : 1 and correct as it stands.

   The selector repeats .cineby-api-popular-title on purpose. The light-scheme
   block above is (1,4,2) and this one is (1,5,2), so it wins whatever order
   the two end up in - the repetition is the mechanism, not noise. Do not
   "simplify" it (the same reason the landing overrides carry `html body`).

   The ::before corner was measured in the same session and is NOT missing: it
   draws a 2px teal L in both schemes (rgb(0,174,181) light, rgb(32,213,217)
   dark) from border-top/border-left, while its CSS `background` is - correctly
   - transparent. At phone width s2d26/header.css hides it under
   max-width:767px, and the reference hides it identically; the landing already
   matches, so nothing is changed there.
   ========================================================================== */
html:not(.night-mode):not([data-theme="dark"]) body.page-template-old-index #main .cineby-api-popular-title.cineby-api-popular-title {
  --s2d26-cs-heading-ink:#333333;
  color:var(--s2d26-cs-heading-ink) !important;
}


/* ==========================================================================
   S2D26_LANDING_CARD_GENRES_MATCH_20260918

   The genre line inside the landing's TV cards rendered at nearly the title's
   size, wrapped onto two or three lines and covered the bottom of the poster.

   Measured live, same browser session, both schemes:

       LANDING  /cineby/  .s2d-card-genres   14px / 400 / rgb(108,221,215)
                                                white-space normal, height 38px
                                                (78px on a three-genre card)
       REFERENCE /series/   .s2d-card-genres   10px / 500 / rgba(184,255,249,.86)
                                                white-space nowrap, height 12px

   The element and its class are identical on both pages; only the matching
   rule differs. The reference gets its values from two rules that are both
   scoped to `.page-category`, which a listing carries on #main and the landing
   does not:

       css/custom.css:1206
       .page-category .movies-list .ml-item-tvshows .mli-info .s2d-card-genres
         { display:block; width:100%; min-width:0; margin-top:3px; overflow:hidden;
           color:rgba(255,255,255,.72); font-size:10px; font-weight:500;
           line-height:1.2; text-align:center; text-overflow:ellipsis;
           text-shadow:0 1px 3px rgba(0,0,0,.82); white-space:nowrap }

       css/custom.css:1238
       .page-category .cineby-api-popular-grid > .ml-item-tvshows .mli-info .s2d-card-genres
         { color:rgba(184,255,249,.86); text-align:left }

   and, on phones, css/custom.css:1270

       @media (max-width:520px)
       .page-category .movies-list .ml-item-tvshows .mli-info .s2d-card-genres
         { font-size:9px }

   On the landing no `.s2d-card-genres` rule matched at all - the only rule
   CSS.getMatchedStylesForNode reported was the plugin's global span
   font-family - so size, weight and colour were simply inherited.

   So this is those three rules copied verbatim with the landing's scope, and
   nothing invented. The colour is a light teal drawn on the card's own dark
   gradient strip, so it is scheme-independent, and it is pinned in both
   schemes on purpose: the light scheme of this theme has already produced one
   invisible-text surprise today and must not produce a second.
   ========================================================================== */
html body.page-template-old-index #main .movies-list .ml-item-tvshows .mli-info .s2d-card-genres {
  display:block !important;
  box-sizing:border-box !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  margin:3px 0 0 !important;
  overflow:hidden !important;
  border:0 !important;
  background:none !important;
  color:rgba(184,255,249,.86) !important;
  font-family:Montserrat, Arial, sans-serif !important;
  font-size:10px !important;
  font-style:normal !important;
  font-weight:500 !important;
  letter-spacing:normal !important;
  line-height:1.2 !important;
  text-align:left !important;
  text-decoration:none !important;
  text-overflow:ellipsis !important;
  text-shadow:0 1px 3px rgba(0,0,0,.82) !important;
  text-transform:none !important;
  white-space:nowrap !important;
  opacity:1 !important;
  visibility:visible !important;
}
@media (max-width:520px) {
  html body.page-template-old-index #main .movies-list .ml-item-tvshows .mli-info .s2d-card-genres {
    font-size:9px !important;
  }
}