/* ==========================================================================
   BankMovie V70 — EXACT Design #5 skin
   Behavior stays V66 hard-locked/fixed. This file only replaces the VISUALS.
   ========================================================================== */

@media (max-width:991px){

  html body{
    /* Circle rises ~34px above bar. */
    padding-bottom:calc(98px + env(safe-area-inset-bottom,0px))!important;
  }

  /* -----------------------------------------------------------------------
     BAR — fixed, dark, rounded, no glass capsule movement
     ----------------------------------------------------------------------- */
  html body .bottom-nav[data-mobile-bottom-nav],
  html body .bottom-nav,
  html body .actor-bottom-nav,
  html body [data-mobile-bottom-nav]{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:max(0px,env(safe-area-inset-bottom,0px))!important;
    top:auto!important;
    inset:auto 10px max(0px,env(safe-area-inset-bottom,0px)) 10px!important;

    transform:none!important;
    translate:none!important;

    width:auto!important;
    max-width:none!important;
    height:72px!important;
    min-height:72px!important;

    margin:0!important;
    padding:7px 8px!important;
    overflow:visible!important;

    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:0!important;

    border:1px solid rgba(255,255,255,.15)!important;
    border-radius:26px!important;

    background:
      linear-gradient(180deg,#1c1d22 0%,#111217 58%,#0d0e12 100%)!important;

    box-shadow:
      0 8px 24px rgba(0,0,0,.30),
      inset 0 1px 0 rgba(255,255,255,.045)!important;

    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    filter:none!important;
    transition:none!important;
    animation:none!important;
    will-change:auto!important;
    z-index:2050!important;
  }

  /* Kill all old pseudo silhouettes from prior nav CSS. */
  html body .bottom-nav::before,
  html body .bottom-nav::after,
  html body .actor-bottom-nav::before,
  html body .actor-bottom-nav::after,
  html body [data-mobile-bottom-nav]::before,
  html body [data-mobile-bottom-nav]::after{
    content:none!important;
    display:none!important;
  }

  /* -----------------------------------------------------------------------
     REAL CENTER BRIDGE — the missing shape from V69.
     This is a real DOM element, not a pseudo-element, so old CSS cannot kill it.
     ----------------------------------------------------------------------- */
  html body .bottom-nav > .bm-nav-center-bridge,
  html body .actor-bottom-nav > .bm-nav-center-bridge,
  html body [data-mobile-bottom-nav] > .bm-nav-center-bridge{
    display:block!important;
    position:absolute!important;
    left:50%!important;
    top:-31px!important;
    width:142px!important;
    height:66px!important;
    transform:translateX(-50%)!important;

    border-radius:78px 78px 22px 22px!important;
    border-top:1px solid rgba(255,255,255,.15)!important;

    background:
      linear-gradient(180deg,#1d1e23 0%,#17181d 55%,#111217 100%)!important;

    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.04)!important;

    pointer-events:none!important;
    z-index:0!important;
  }

  /* Dark shoulder cutouts create the exact smooth Design #5 neck around the circle. */
  html body .bottom-nav > .bm-nav-center-bridge::before,
  html body [data-mobile-bottom-nav] > .bm-nav-center-bridge::before{
    content:""!important;
    position:absolute!important;
    left:-21px!important;
    bottom:0!important;
    width:43px!important;
    height:37px!important;
    border-radius:0 0 43px 0!important;
    background:#0b0c10!important;
    box-shadow:20px 16px 0 0 #111217!important;
  }

  html body .bottom-nav > .bm-nav-center-bridge::after,
  html body [data-mobile-bottom-nav] > .bm-nav-center-bridge::after{
    content:""!important;
    position:absolute!important;
    right:-21px!important;
    bottom:0!important;
    width:43px!important;
    height:37px!important;
    border-radius:0 0 0 43px!important;
    background:#0b0c10!important;
    box-shadow:-20px 16px 0 0 #111217!important;
  }

  /* -----------------------------------------------------------------------
     NORMAL ITEMS
     ----------------------------------------------------------------------- */
  html body .bottom-nav > .nav-item,
  html body .actor-bottom-nav > .nav-item,
  html body [data-mobile-bottom-nav] > .nav-item{
    position:relative!important;
    z-index:2!important;

    flex:1 1 0!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:58px!important;
    min-height:58px!important;

    margin:0!important;
    padding:6px 3px 4px!important;

    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;

    color:rgba(245,246,249,.86)!important;
    background:transparent!important;
    border:0!important;
    border-radius:16px!important;
    box-shadow:none!important;

    text-decoration:none!important;
    transform:none!important;
    translate:none!important;
    filter:none!important;
    transition:none!important;
    animation:none!important;
    will-change:auto!important;
  }

  html body .bottom-nav > .nav-item::before,
  html body .bottom-nav > .nav-item::after,
  html body .actor-bottom-nav > .nav-item::before,
  html body .actor-bottom-nav > .nav-item::after,
  html body [data-mobile-bottom-nav] > .nav-item::before,
  html body [data-mobile-bottom-nav] > .nav-item::after{
    content:none!important;
    display:none!important;
  }

  html body .bottom-nav > .nav-item svg,
  html body .actor-bottom-nav > .nav-item svg,
  html body [data-mobile-bottom-nav] > .nav-item svg{
    width:25px!important;
    height:25px!important;
    flex:0 0 25px!important;
    margin:0!important;
    color:inherit!important;
    stroke:currentColor!important;
    fill:none!important;
  }

  html body .bottom-nav > .nav-item .nav-label,
  html body .actor-bottom-nav > .nav-item .nav-label,
  html body [data-mobile-bottom-nav] > .nav-item .nav-label{
    display:block!important;
    margin:0!important;
    max-width:100%!important;
    color:inherit!important;
    font-size:10.5px!important;
    line-height:1.05!important;
    font-weight:900!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  /* Active non-center item = accent icon/text only, exactly like concept #5. */
  html body .bottom-nav > .nav-item.active:not([data-bm-nav-kind="categories"]),
  html body .actor-bottom-nav > .nav-item.active:not([data-bm-nav-kind="categories"]),
  html body [data-mobile-bottom-nav] > .nav-item.active:not([data-bm-nav-kind="categories"]){
    color:var(--accent,#2f7cff)!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  /* -----------------------------------------------------------------------
     CENTER CATEGORIES CIRCLE
     ----------------------------------------------------------------------- */
  html body .bottom-nav > [data-bm-nav-kind="categories"],
  html body .actor-bottom-nav > [data-bm-nav-kind="categories"],
  html body [data-mobile-bottom-nav] > [data-bm-nav-kind="categories"]{
    position:relative!important;
    z-index:6!important;

    flex:0 0 88px!important;
    width:88px!important;
    min-width:88px!important;
    max-width:88px!important;
    height:88px!important;
    min-height:88px!important;

    margin:-35px 6px 0!important;
    padding:12px 4px 8px!important;

    border-radius:50%!important;
    border:1px solid rgba(255,255,255,.28)!important;

    /* Entire button follows user's theme accent. */
    background:
      linear-gradient(155deg,rgba(255,255,255,.16) 0 18%,rgba(255,255,255,.03) 38%,transparent 39%),
      var(--accent,#2f7cff)!important;

    color:#fff!important;

    /* NO halo / NO outer glow. */
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.30),
      inset 0 -1px 0 rgba(0,0,0,.20)!important;

    transform:none!important;
    translate:none!important;
    filter:none!important;
    transition:none!important;
    animation:none!important;
  }

  html body .bottom-nav > [data-bm-nav-kind="categories"] svg,
  html body .actor-bottom-nav > [data-bm-nav-kind="categories"] svg,
  html body [data-mobile-bottom-nav] > [data-bm-nav-kind="categories"] svg{
    width:29px!important;
    height:29px!important;
    flex:0 0 29px!important;
    color:#fff!important;
    stroke:#fff!important;
  }

  html body .bottom-nav > [data-bm-nav-kind="categories"] .nav-label,
  html body .actor-bottom-nav > [data-bm-nav-kind="categories"] .nav-label,
  html body [data-mobile-bottom-nav] > [data-bm-nav-kind="categories"] .nav-label{
    color:#fff!important;
    font-size:10.2px!important;
    font-weight:950!important;
  }

  /* The category page itself must NOT add another pill/halo. */
  html body .bottom-nav > [data-bm-nav-kind="categories"].active,
  html body .actor-bottom-nav > [data-bm-nav-kind="categories"].active,
  html body [data-mobile-bottom-nav] > [data-bm-nav-kind="categories"].active{
    background:
      linear-gradient(155deg,rgba(255,255,255,.16) 0 18%,rgba(255,255,255,.03) 38%,transparent 39%),
      var(--accent,#2f7cff)!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.30),
      inset 0 -1px 0 rgba(0,0,0,.20)!important;
    color:#fff!important;
  }

  /* Old scroll-state classes are complete visual no-ops. */
  html body .bottom-nav.nav-hidden,
  html body .bottom-nav.nav-compact,
  html body .actor-bottom-nav.nav-hidden,
  html body .actor-bottom-nav.nav-compact,
  html body [data-mobile-bottom-nav].nav-hidden,
  html body [data-mobile-bottom-nav].nav-compact{
    left:10px!important;
    right:10px!important;
    bottom:max(0px,env(safe-area-inset-bottom,0px))!important;
    width:auto!important;
    max-width:none!important;
    height:72px!important;
    min-height:72px!important;
    margin:0!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
    translate:none!important;
    border-radius:26px!important;
  }

  /* Respect intentional Watch Party overlay hiding. */
  html body.watch-party-page.wp-room-tools-open .bottom-nav{
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }
}

@media (max-width:390px){
  html body .bottom-nav[data-mobile-bottom-nav],
  html body .bottom-nav,
  html body [data-mobile-bottom-nav]{
    left:6px!important;
    right:6px!important;
    inset:auto 6px max(0px,env(safe-area-inset-bottom,0px)) 6px!important;
  }

  html body .bottom-nav > .bm-nav-center-bridge,
  html body [data-mobile-bottom-nav] > .bm-nav-center-bridge{
    width:132px!important;
  }

  html body .bottom-nav > [data-bm-nav-kind="categories"],
  html body [data-mobile-bottom-nav] > [data-bm-nav-kind="categories"]{
    flex-basis:82px!important;
    width:82px!important;
    min-width:82px!important;
    max-width:82px!important;
    height:82px!important;
    min-height:82px!important;
    margin-top:-32px!important;
  }

  html body .bottom-nav > .nav-item .nav-label,
  html body [data-mobile-bottom-nav] > .nav-item .nav-label{
    font-size:9.4px!important;
  }
}