/* BankMovie V238 — mobile visual polish
   1) Movie titles centered on mobile.
   2) View-all header participates in layout so it cannot cover the page title.
   3) Listing card titles are centered consistently.
   Scoped only to movie-page and view-all-page on mobile. */
@media (max-width: 991.98px) {
  /* Movie detail: center the title block without touching poster/meta/actions. */
  html body.movie-page .movie-detail .info-col .movie-title-fa,
  html body.movie-page .movie-detail .info-col .movie-title-en,
  html body.movie-page .movie-detail > .movie-title-fa,
  html body.movie-page .movie-detail > .movie-title-en {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    justify-self: center !important;
  }

  html body.movie-page .movie-detail .movie-title-fa bdi,
  html body.movie-page .movie-detail .movie-title-en bdi {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* View All has no hero on mobile. Keep the transparent header, but reserve
     its real height in document flow instead of letting it cover the title. */
  html body.view-all-page #siteHeader.bm-public-header-v148,
  html body.view-all-page #siteHeader.header.bm-public-header-v148,
  html body.view-all-page #siteHeader.header-admin.bm-public-header-v148 {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    min-height: 70px !important;
    height: auto !important;
    margin: 0 !important;
    padding-top: max(6px, env(safe-area-inset-top, 0px)) !important;
    z-index: 1600 !important;
  }

  html body.view-all-page #siteHeader.bm-public-header-v148 .header-inner {
    position: relative !important;
    min-height: 64px !important;
    height: 64px !important;
    margin-top: 0 !important;
  }

  html body.view-all-page .page-title {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
    padding-top: 12px !important;
  }

  /* Center listing names too, so both two-column cards feel balanced. */
  html body.view-all-page .grid-title-fa,
  html body.view-all-page .grid-title-en,
  html body.view-all-page .a1-title,
  html body.view-all-page .a1-title-en {
    width: 100% !important;
    text-align: center !important;
  }

  html body.view-all-page .grid-meta.pro-meta {
    justify-content: center !important;
  }
}