/* MoPower Mobile Navigation Visual Hotfix RC1
 * Scoped after the qualified RC3 and emergency-header layers.
 */

@media (max-width: 768px) {
  /* Header controls are neutral at rest and receive their own active state. */
  .mopowerlab-theme.mpl-v3 .mpl-header-actions > .mpl-menu-toggle,
  .mopowerlab-theme.mpl-v3 .mpl-cart-wrap #cart > .btn {
    background: transparent;
    border-color: rgba(137, 151, 166, .35);
    color: #d6dee7;
    box-shadow: none;
  }

  .mopowerlab-theme.mpl-v3 .mpl-header-actions > .mpl-menu-toggle:hover,
  .mopowerlab-theme.mpl-v3 .mpl-cart-wrap #cart > .btn:hover {
    background: rgba(33, 150, 243, .10);
    border-color: rgba(33, 150, 243, .55);
    color: #fff;
  }

  .mopowerlab-theme.mpl-v3 .mpl-header-actions > .mpl-menu-toggle[aria-expanded="true"] {
    background: rgba(33, 150, 243, .24);
    border-color: #2196f3;
    color: #fff;
    box-shadow: inset 0 -3px #2196f3, 0 0 0 1px rgba(33, 150, 243, .18);
  }

  .mopowerlab-theme.mpl-v3 .mpl-cart-wrap #cart.open > .btn,
  .mopowerlab-theme.mpl-v3 .mpl-cart-wrap #cart > .btn[aria-expanded="true"] {
    background: rgba(33, 150, 243, .24);
    border-color: #2196f3;
    color: #fff;
    box-shadow: inset 0 -3px #2196f3, 0 0 0 1px rgba(33, 150, 243, .18);
  }

  .mopowerlab-theme.mpl-v3 .mpl-header-actions > .mpl-menu-toggle:focus-visible,
  .mopowerlab-theme.mpl-v3 .mpl-cart-wrap #cart > .btn:focus-visible {
    outline: 3px solid #70c6ff;
    outline-offset: 2px;
  }

  /* Keep the panel in normal flow so it ends before page content. */
  .mopowerlab-theme.mpl-v3 .mpl-mobile-nav.is-open {
    background: #141d27;
    border-top: 3px solid #2196f3;
    border-bottom: 1px solid rgba(112, 198, 255, .28);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .42);
  }

  .mopowerlab-theme.mpl-v3 .mpl-mobile-nav .v3-mobile-links {
    gap: 0;
  }

  .mopowerlab-theme.mpl-v3 .mpl-mobile-nav .v3-mobile-links > a,
  .mopowerlab-theme.mpl-v3 .mpl-mobile-secondary > a,
  .mopowerlab-theme.mpl-v3 .mpl-mobile-nav .mpl-vehicles > summary,
  .mopowerlab-theme.mpl-v3 .mpl-mobile-nav .mpl-vehicle-make > summary {
    min-height: 44px;
    padding: 10px 10px;
    border-bottom: 1px solid rgba(214, 222, 231, .14);
    color: #fff;
  }

  .mopowerlab-theme.mpl-v3 .mpl-mobile-nav .v3-mobile-links > a > span,
  .mopowerlab-theme.mpl-v3 .mpl-mobile-nav summary > .fa {
    color: #70c6ff;
    font-size: 16px;
  }

  .mopowerlab-theme.mpl-v3 .mpl-mobile-nav .mpl-vehicles[open] > summary,
  .mopowerlab-theme.mpl-v3 .mpl-mobile-nav .mpl-vehicle-make[open] > summary {
    background: rgba(33, 150, 243, .16);
    color: #fff;
    box-shadow: inset 3px 0 #2196f3;
  }

  .mopowerlab-theme.mpl-v3 .mpl-mobile-nav .mpl-vehicle-panel {
    padding: 4px 0 6px 10px;
    background: #0e151d;
    border-left: 1px solid rgba(33, 150, 243, .34);
  }

  .mopowerlab-theme.mpl-v3 .mpl-mobile-nav .mpl-vehicle-models a,
  .mopowerlab-theme.mpl-v3 .mpl-mobile-nav .mpl-vehicle-tools a {
    min-height: 44px;
    color: #70c6ff;
  }

  .mopowerlab-theme.mpl-v3 .mpl-mobile-nav .mpl-vehicle-models a:hover,
  .mopowerlab-theme.mpl-v3 .mpl-mobile-nav .mpl-vehicle-models a:focus,
  .mopowerlab-theme.mpl-v3 .mpl-mobile-nav .mpl-vehicle-tools a:hover,
  .mopowerlab-theme.mpl-v3 .mpl-mobile-nav .mpl-vehicle-tools a:focus {
    background: rgba(33, 150, 243, .14);
    color: #fff;
  }

  .mopowerlab-theme.mpl-v3 .mpl-mobile-secondary {
    margin-top: 8px;
    padding-top: 6px;
    border-top-color: rgba(33, 150, 243, .55);
  }

  .mopowerlab-theme.mpl-v3 .mpl-mobile-nav a:focus-visible,
  .mopowerlab-theme.mpl-v3 .mpl-mobile-nav summary:focus-visible {
    outline: 3px solid #70c6ff;
    outline-offset: -3px;
  }
}