/* abibitumi-mobile-fix.css v2.0.7
 * Minimal scoped mobile repair — production mobile repair.
 * Written 2026-06-06 after diagnosing black-line blank render.
 *
 * ROOT CAUSE OF BLACK LINE:
 * v1.0.2 used display:none !important on .buddypanel and
 * overflow-x:hidden on body inside @media, which collapsed the
 * BuddyBoss layout. This minimal version lets BuddyBoss manage
 * its own panel and only fixes documented overflow issues.
 */

/* ─── MOBILE VIEWPORT ─────────────────────────────────────── */
@media (max-width: 1024px) {

  /* Prevent horizontal scroll without collapsing layout.
     html overflow-x:hidden clips the viewport without affecting
     body touch-scroll or BuddyBoss translate transforms. */
  html {
    overflow-x: hidden;
  }

  /* Ensure body has no browser-default minimum width on mobile. */
  body {
    min-width: 0;
  }

  /* BuddyBoss panel: on mobile, the panel is off-canvas by default.
     Do NOT use display:none — let BuddyBoss control visibility.
     Only ensure the panel does not force a horizontal scrollbar
     when it is in its default closed/off-canvas state. */
  body:not(.buddypanel-open) .buddypanel,
  body:not(.buddypanel-open) #buddypanel {
    overflow: hidden;
  }

  /* The desktop BuddyBoss rail can be left open on phones.
     Move that rail off-canvas instead of display:none, which previously
     caused the blank black-line render. */
  body.bb-buddypanel .buddypanel.buddypanel--toggle-on {
    transform: translate3d(-180px, 0, 0) !important;
    pointer-events: none;
  }

  body.bb-buddypanel .buddypanel img.bb-logo,
  body.bb-buddypanel .buddypanel img.bb-mobile-logo,
  body.bb-buddypanel .buddypanel img[src*="theme-logo"] {
    width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    max-height: 42px !important;
    object-fit: contain !important;
  }

  body.bb-buddypanel #page,
  body.bb-buddypanel .site,
  body.bb-buddypanel .site-content,
  body.bb-buddypanel .bb-grid.site-content-grid {
    margin-left: 0 !important;
    left: 0 !important;
    max-width: 100% !important;
  }

  /* Keep the mobile header logo inside the 60px header. */
  .site-header img.bb-logo,
  .site-header img.bb-mobile-logo,
  .site-header img[src*="theme-logo"],
  .bb-mobile-header img.bb-logo,
  .bb-mobile-header img.bb-mobile-logo,
  .bb-mobile-header img[src*="theme-logo"] {
    width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    max-height: 42px !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  img.bb-mobile-logo {
    width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    max-height: 42px !important;
    object-fit: contain !important;
  }

  /* Start Here route cards: keep the 1/2/3 badges from sitting on
     top of the headings/buttons on narrow screens. */
  .ab-route .ab-step {
    padding-left: 72px !important;
  }

  .ab-route .ab-step::before {
    left: 22px !important;
  }

}
/* ─── END MOBILE VIEWPORT ─────────────────────────────────── */

/* Start Here button color alignment. */
body .ab-actions .ab-btn.light,
body .ab-route .ab-btn.dark {
  background: #111 !important;
  border-color: #111 !important;
  color: #fff !important;
}

body .ab-actions .ab-btn.ghost,
body .ab-route .ab-step:nth-of-type(3) .ab-btn,
body .ab-route .ab-step .ab-btn.light {
  background: #0b7a3b !important;
  border-color: #0b7a3b !important;
  color: #fff !important;
}

/* Logged-in users should not see top auth prompts. */
body.logged-in a.ab-nav-keep[href*="/login/"],
body.logged-in a.ab-nav-keep[href*="/register/"] {
  display: none !important;
}

/* 16-Step Initiate membership option button. */
body a.ab-btn[href*="/product/onimerindinlogun-course-access-monthly/"] {
  background: #0b7a3b !important;
  border-color: #0b7a3b !important;
  color: #fff !important;
}