/* OSANIME mobile sticky ad v211
   Guest + member mobile footer banner.
   Main fix: horizontal centering uses left:50% + translateX(-50%). */

.osanime-mobile-sticky-ad{
  display:none;
}

@media (max-width:820px){
  body.osanime-mobile-sticky-ad-visible{
    padding-bottom:calc(78px + env(safe-area-inset-bottom, 0px))!important;
    --osanime-backtop-bottom:92px;
  }

  .osanime-mobile-sticky-ad{
    position:fixed;
    z-index:9985;

    /* Properly centered on every mobile viewport. */
    left:50%;
    right:auto;
    bottom:calc(8px + env(safe-area-inset-bottom, 0px));
    transform:translateX(-50%);

    width:min(344px, calc(100vw - 18px));
    min-height:62px;
    box-sizing:border-box;
    padding:6px 10px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(255,255,255,.11);
    border-radius:14px;
    background:rgba(4,9,22,.96);
    box-shadow:
      0 14px 38px rgba(0,0,0,.44),
      0 0 0 1px rgba(255,79,147,.05) inset;

    -webkit-backdrop-filter:blur(14px) saturate(135%);
    backdrop-filter:blur(14px) saturate(135%);

    transition:
      opacity .18s ease,
      transform .18s ease,
      visibility .18s ease;
  }

  .osanime-mobile-sticky-ad[hidden]{
    display:none!important;
  }

  .osanime-mobile-sticky-ad__canvas{
    width:min(320px, calc(100vw - 38px));
    height:50px;
    margin:0 auto;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:7px;
  }

  .osanime-mobile-sticky-ad__canvas iframe{
    display:block;
    flex:0 0 auto;
    border:0;
    padding:0;
    margin:0 auto;
    width:320px;
    max-width:100%;
    height:50px;
    overflow:hidden;
    background:transparent;
  }

  .osanime-mobile-sticky-ad__badge{
    position:absolute;
    left:10px;
    top:-11px;
    min-width:29px;
    height:21px;
    padding:0 7px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(255,255,255,.12);
    border-radius:999px;
    color:#c5cede;
    background:#0b1427;
    box-shadow:0 5px 14px rgba(0,0,0,.30);

    font:800 9px/1 Inter,system-ui,sans-serif;
    letter-spacing:.08em;
    pointer-events:none;
  }

  .osanime-mobile-sticky-ad__close{
    position:absolute;
    right:8px;
    top:-15px;
    z-index:2;

    width:32px;
    height:32px;
    padding:0;

    display:grid;
    place-items:center;

    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;
    color:#fff;
    background:#121c31;
    box-shadow:0 7px 18px rgba(0,0,0,.38);

    cursor:pointer;
    touch-action:manipulation;
  }

  .osanime-mobile-sticky-ad__close i{
    font-size:14px;
    line-height:1;
  }

  .osanime-mobile-sticky-ad__close:active{
    transform:scale(.94);
  }

  /* Do not cover navigation/profile overlays. Keep X centering while moving down. */
  body.sidebar-is-open .osanime-mobile-sticky-ad,
  body.profile-menu-is-open .osanime-mobile-sticky-ad{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate(-50%, 12px);
  }
}

/* Avoid consuming too much height in landscape/very short viewports. */
@media (max-width:820px) and (max-height:479px){
  .osanime-mobile-sticky-ad{
    display:none!important;
  }

  body.osanime-mobile-sticky-ad-visible{
    padding-bottom:0!important;
    --osanime-backtop-bottom:22px;
  }
}

@media (prefers-reduced-motion:reduce){
  .osanime-mobile-sticky-ad,
  .osanime-mobile-sticky-ad__close{
    transition:none!important;
  }
}