/*
 * Mobile header account controls.
 * Loaded after the legacy layout files so the responsive visibility rules
 * remain explicit and predictable.
 */
.mobile-account-dropdown{
  display:none;
}

@media(max-width:980px){
  .desktop-theme-button,
  .desktop-account-dropdown,
  .desktop-auth-link{
    display:none!important;
  }

  .mobile-account-dropdown{
    position:relative;
    display:inline-flex!important;
    flex:0 0 auto;
  }

  .mobile-account-dropdown .mobile-auth-button{
    display:inline-flex!important;
    width:auto!important;
    min-width:0!important;
    height:42px!important;
    min-height:42px!important;
    padding:0 13px!important;
    gap:7px!important;
    border-radius:13px!important;
    box-shadow:0 8px 20px rgba(53,22,76,.16)!important;
  }

  .mobile-account-dropdown .mobile-auth-button>i{
    flex:0 0 auto;
  }

  .mobile-account-dropdown .mobile-account-menu{
    display:block!important;
    top:calc(100% + 10px)!important;
    inset-inline-start:auto!important;
    inset-inline-end:0!important;
    min-width:220px!important;
    max-width:min(260px,calc(100vw - 24px))!important;
    z-index:1110!important;
  }

  .mobile-account-dropdown .mobile-account-menu a{
    min-height:45px;
  }
}

@media(max-width:380px){
  .mobile-account-dropdown .mobile-auth-button{
    padding-inline:10px!important;
    font-size:.8rem!important;
  }
}